/* * KindredPages Studio — design system * Warm heritage editorial palette + shell + screen styles. * * Source of truth: mockups/kindredpages-studio/KindredPages_Studio_v0.3.html * (the Claude artifact). If you edit a token here, update the brief's §14 * design system reference too. * * Fonts loaded via Google Fonts CDN — see link in each shell page. */ :root{ --paper: #f1e8d4; --paper-2: #f6efde; --page: #faf4e4; --page-soft: #fdf8ec; --ink: #1c1814; --ink-2: #3a3027; --ink-3: #6e6052; --ink-4: #9a8a76; --rule: rgba(28,24,20,0.12); --rule-2: rgba(28,24,20,0.06); --sepia: oklch(0.55 0.07 55); --sepia-soft: oklch(0.78 0.05 65); --sepia-tint: oklch(0.92 0.03 70); --pioneer-red: oklch(0.48 0.13 28); --pioneer-red-soft: oklch(0.86 0.06 30); /* fidelity colors */ --fid-source: oklch(0.72 0.07 90); /* warm gold — directly from source */ --fid-source-bg: oklch(0.93 0.05 90); --fid-paraphrase: oklch(0.74 0.05 140); /* sage — paraphrased */ --fid-paraphrase-bg: oklch(0.94 0.03 140); --fid-bridge: oklch(0.78 0.03 50); /* tan — creative bridge */ --fid-bridge-bg: oklch(0.95 0.02 70); --shadow-sm: 0 1px 2px rgba(28,24,20,0.06), 0 1px 0 rgba(255,255,255,0.5) inset; --shadow-md: 0 8px 24px -12px rgba(28,24,20,0.18), 0 1px 0 rgba(255,255,255,0.5) inset; --shadow-lg: 0 24px 60px -28px rgba(28,24,20,0.32), 0 2px 0 rgba(255,255,255,0.6) inset; --serif: 'Newsreader', 'Caudex', Georgia, serif; /* Display face is now Fraunces (the "Family Archive" look), Caudex as fallback. Repointed app-wide 2026-06-09 so every heading/brand mark matches the redesigned marketing site + reader. */ --hist: 'Fraunces', 'Caudex', 'Newsreader', Georgia, serif; --mono: 'JetBrains Mono', ui-monospace, Menlo, monospace; /* Gilt accent for the wordmark + letterpress details (matches the home page). */ --gold: #c7923e; --gold-deep: #a06f1c; } *{box-sizing:border-box} html,body{margin:0;padding:0} body{ font-family:var(--serif); font-size:15px; line-height:1.55; color:var(--ink); background:var(--paper); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; font-feature-settings: 'liga' 1, 'kern' 1; } /* ── paper texture (very subtle) ── */ .paper-grain{ position:absolute; inset:0; pointer-events:none; background-image: radial-gradient(rgba(120,90,50,0.04) 1px, transparent 1px), radial-gradient(rgba(120,90,50,0.03) 1px, transparent 1px); background-size: 3px 3px, 7px 7px; background-position: 0 0, 1px 2px; mix-blend-mode: multiply; } /* ─────────────────────────── shell ─────────────────────────── */ .shell{ display:grid; grid-template-columns: 248px 1fr; min-height:100vh; position:relative; } .rail{ background:linear-gradient(180deg, var(--paper-2) 0%, var(--paper) 100%); border-right:1px solid var(--rule); padding: 22px 22px 28px; position:sticky; top:0; align-self:start; height:100vh; display:flex; flex-direction:column; overflow:hidden; z-index: 5; } /* Middle column scrolls when content (project card + workflow + family nav) exceeds available height. Brand stays glued to top, user foot to bottom. min-height:0 is what lets flex children actually shrink and scroll instead of forcing the parent to grow. */ .rail-scroll{ flex:1; overflow-y:auto; min-height:0; margin: 0 -8px; padding: 0 8px; scrollbar-width: thin; } .rail-scroll::-webkit-scrollbar{ width:4px; } .rail-scroll::-webkit-scrollbar-thumb{ background: var(--rule); border-radius: 2px; } .brand{ display:flex; align-items:flex-start; gap:10px; padding-bottom:18px; border-bottom:1px solid var(--rule); margin-bottom:18px; } .brand-mark{ width:34px; height:34px; flex:none; background:var(--ink); color:var(--paper); display:grid; place-items:center; font-family:var(--hist); font-weight:700; font-size:18px; letter-spacing:0.02em; border-radius:2px; position:relative; } .brand-mark::after{ content:""; position:absolute; inset:3px; border:0.5px solid rgba(241,232,212,0.35); border-radius:1px; } .brand-name{ font-family:var(--hist); font-weight:500; font-size:17px; letter-spacing:0.005em; line-height:1.05; } /* Wordmark: KindredPages — gilt italic K + P, "Pages" italic gold. */ .brand-name .wm-cap{ color:var(--gold-deep); font-style:italic; font-weight:600; font-size:1.12em; } .brand-name .wm-pages{ font-style:italic; color:var(--gold-deep); } .brand-sub{ font-family:var(--mono); font-size:10.5px; color:var(--ink-3); letter-spacing:0.08em; text-transform:uppercase; margin-top:3px; } .project-card{ border:1px solid var(--rule); background:var(--page-soft); padding:14px 14px 12px; border-radius:3px; margin-bottom:18px; position:relative; } .project-card::before{ /* corner clip — like a library card */ content:""; position:absolute; top:0; right:0; width:18px; height:18px; background:linear-gradient(225deg, var(--paper) 50%, transparent 50%); } .project-eyebrow{ font-family:var(--mono); font-size:10.5px; color:var(--ink-3); letter-spacing:0.1em; text-transform:uppercase; } .project-title{ font-family:var(--hist); font-size:17px; line-height:1.15; font-weight:700; margin:4px 0 2px; } .project-meta{ font-style:italic; font-size:12.5px; color:var(--ink-3); line-height:1.35; } .project-foot{ display:flex; align-items:center; gap:6px; margin-top:10px; padding-top:9px; border-top:0.5px dashed var(--rule); font-family:var(--mono); font-size:10.5px; color:var(--ink-3); letter-spacing:0.06em; text-transform:uppercase; } /* ─────────────── Per-project workflow stepper (in topbar) ─────────────── Shown only when a project is loaded. Replaces the old phase-nav that used to live in the rail. Reads left-to-right: I Sources → II Story → III Illustrate → IV Reader → V Finalize. */ .topbar-project{ flex-wrap: wrap; padding: 10px 20px; gap: 14px; } .wf-project{ display: flex; flex-direction: column; min-width: 0; max-width: 280px; } .wf-project-title{ font-family: var(--hist); font-weight: 700; font-size: 17px; line-height: 1.1; color: var(--ink); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wf-project-title:hover{ color: var(--pioneer-red); } .wf-project-crumb{ font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); margin-top: 3px; } .wf-stepper{ display: flex; align-items: center; gap: 6px; flex-wrap: wrap; flex: 1; font-family: var(--mono); } .wf-step{ display: inline-flex; align-items: baseline; gap: 6px; padding: 6px 10px; border-radius: 4px; text-decoration: none; color: var(--ink-3); background: var(--page-soft); border: 1px solid var(--rule); transition: all 120ms; } .wf-step:hover{ border-color: var(--ink-3); color: var(--ink); } .wf-step-roman{ font-family: var(--hist); font-style: italic; font-size: 11px; color: var(--ink-4); } .wf-step-name{ font-family: var(--serif); font-size: 13px; font-weight: 500; } .wf-step.step-active{ background: var(--ink); color: var(--paper); border-color: var(--ink); } .wf-step.step-active .wf-step-roman{ color: var(--paper); opacity: 0.7; } .wf-step.step-done{ color: var(--sepia); border-color: rgba(170,130,80,0.25); } .wf-step.step-done .wf-step-roman{ color: var(--sepia); } .wf-step.step-live{ border-color: var(--pioneer-red); background: var(--pioneer-red-soft); color: var(--ink); } .wf-step.step-live .wf-step-roman{ color: var(--pioneer-red); } .wf-step.step-muted{ opacity: 0.4; pointer-events: none; } .wf-step-sep{ color: var(--ink-4); font-size: 14px; font-family: var(--hist); } @media (max-width: 900px){ .topbar-project{ padding: 10px 16px; gap: 10px; } .wf-stepper{ overflow-x: auto; flex-wrap: nowrap; } .wf-step{ flex: none; } } /* primary CTA inside the rail */ .rail-cta{ display:block; width:100%; margin: 4px 0 18px; padding: 10px 12px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; text-align: center; text-decoration: none; background: var(--ink); color: var(--paper); border-radius: 2px; transition: background 120ms, transform 120ms; } .rail-cta:hover{ background: var(--ink-2); transform: translateY(-1px); } /* sub-step nav items (Story ideas, Workshop) — indented + lighter */ .nav-item.nav-sub{ padding-left: 18px; background: rgba(28,24,20,0.02); font-size: 13px; } .nav-item.nav-sub .nav-name{ font-size: 13px; color: var(--ink-2); } .nav-item.nav-sub .nav-roman{ color: var(--pioneer-red); font-style: normal; font-size: 16px; } /* chapter nav */ .nav-label{ font-family:var(--mono); font-size:10.5px; letter-spacing:0.12em; text-transform:uppercase; color:var(--ink-4); margin: 4px 2px 8px; } .nav{ display:flex; flex-direction:column; gap:1px; } .nav-item{ display:grid; grid-template-columns: 28px 1fr auto; align-items:center; gap:10px; padding:9px 10px 9px 4px; border-radius:3px; cursor:default; color:var(--ink-2); border:1px solid transparent; font-size:14px; position:relative; } .nav-item:hover{ background:rgba(28,24,20,0.035); } .nav-item.active{ background:var(--page-soft); border-color:var(--rule); color:var(--ink); box-shadow: var(--shadow-sm); } .nav-roman{ font-family:var(--hist); font-size:13px; font-style:italic; text-align:center; color:var(--ink-3); letter-spacing:0.04em; } .nav-item.active .nav-roman{ color:var(--pioneer-red); } /* Line icons (etched, single-stroke) replace the glossy emoji — inherit the nav item's currentColor (ink-3 default, pioneer-red when active). */ .nav-roman{ display:flex; align-items:center; justify-content:center; width:18px; } .nav-roman svg{ display:block; } .wf-crumb-home svg{ display:block; } .nav-name{ font-family:var(--serif); font-size:14.5px; font-weight:500; letter-spacing:0.005em; } .nav-status{ font-family:var(--mono); font-size:10.5px; letter-spacing:0.08em; color:var(--ink-4); text-transform:uppercase; } .nav-status.done{ color:var(--sepia); } .nav-status.live{ color:var(--pioneer-red); } .rail-foot{ margin-top:auto; padding-top:14px; border-top:1px solid var(--rule); display:flex; align-items:center; gap:10px; } .avatar{ width:30px; height:30px; border-radius:50%; background:var(--sepia-tint); border:1px solid var(--rule); display:grid; place-items:center; font-family:var(--hist); font-weight:700; color:var(--sepia); font-size:13px; } .rail-foot-text{ line-height:1.2; } .rail-foot-name{ font-size:13px; font-weight:500; } .rail-foot-meta{ font-family:var(--mono); font-size:10.5px; color:var(--ink-3); letter-spacing:0.06em; text-transform:uppercase; } /* ─────────────────── main canvas ─────────────────── */ .canvas{ position:relative; min-height:100vh; display:flex; flex-direction:column; /* No overflow:hidden — would create a new scroll context that breaks the topbar's sticky behavior. Sticky needs to resolve to body scroll. */ } .topbar{ display:flex; align-items:center; justify-content:space-between; padding: 16px 32px; border-bottom:1px solid var(--rule); background:var(--paper); position:sticky; top:0; z-index:6; /* Subtle shadow once scrolled — makes the stick obvious. */ box-shadow: 0 1px 0 var(--rule), 0 6px 16px -12px rgba(28,24,20,0.18); } .crumbs{ font-family:var(--mono); font-size:10.5px; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-3); display:flex; align-items:center; gap:10px; } .crumbs .sep{ color:var(--ink-4); } .crumbs .here{ color:var(--ink); } .actions{ display:flex; align-items:center; gap:10px; } .btn{ font-family:var(--serif); font-size:14px; padding: 8px 16px; border-radius:2px; border:1px solid var(--rule); background:var(--page-soft); color:var(--ink); cursor:pointer; letter-spacing:0.005em; transition: background 120ms, border-color 120ms; } .btn:hover{ background:var(--page); } .btn-ink{ background:var(--ink); color:var(--page); border-color:var(--ink); } .btn-ink:hover{ background:var(--ink-2); } .btn-ghost{ background:transparent; border-color:transparent; color:var(--ink-3); } .btn-ghost:hover{ color:var(--ink); background:rgba(28,24,20,0.04); } .btn-sm{ padding:5px 11px; font-size:12.5px; } .btn-mono{ font-family:var(--mono); font-size:11px; letter-spacing:0.06em; text-transform:uppercase; padding:7px 12px; } .kbd{ font-family:var(--mono); font-size:10px; border:1px solid var(--rule); border-bottom-width:1.5px; padding:1px 5px; border-radius:2px; background:var(--page-soft); color:var(--ink-3); margin-left:4px; } /* page header inside canvas */ .page-head{ padding: 28px 32px 18px; display:flex; align-items:flex-end; justify-content:space-between; gap:32px; } .page-eyebrow{ font-family:var(--mono); font-size:10px; letter-spacing:0.14em; text-transform:uppercase; color:var(--pioneer-red); margin-bottom:8px; } .page-h1{ font-family:var(--hist); font-weight:700; font-size:42px; line-height:1; margin:0; letter-spacing:-0.005em; } .page-h1 .it{ font-style:italic; font-weight:400; color:var(--ink-2); } .page-lede{ margin-top:10px; font-size:15.5px; line-height:1.55; color:var(--ink-2); max-width:60ch; } .page-body{ padding: 12px 32px 56px; } .divider-orn{ display:flex; align-items:center; justify-content:center; margin: 18px 0 10px; color:var(--ink-4); font-family:var(--hist); letter-spacing:0.4em; } .divider-orn::before, .divider-orn::after{ content:""; flex:1; height:1px; background:linear-gradient(90deg, transparent, var(--rule), transparent); margin:0 16px; } /* ─────────────────────── sources screen ─────────────────────── */ .src-grid{ display:grid; grid-template-columns: 1fr 320px; gap: 28px; } .shelf-head{ display:flex; align-items:center; justify-content:space-between; padding: 0 0 14px; border-bottom:1px solid var(--rule); margin-bottom: 18px; } .shelf-title{ font-family:var(--hist); font-size:18px; font-weight:700; letter-spacing:0.01em; } .shelf-meta{ font-family:var(--mono); font-size:10.5px; color:var(--ink-3); letter-spacing:0.06em; text-transform:uppercase; } .doc-list{ display:flex; flex-direction:column; gap:10px; } .doc-row{ display:grid; grid-template-columns: 84px 1fr 140px 110px 80px; align-items:stretch; background:var(--page-soft); border:1px solid var(--rule); border-radius:3px; overflow:hidden; cursor:default; transition: border-color 120ms, box-shadow 120ms, transform 120ms; } .doc-row:hover{ border-color: var(--ink-4); box-shadow: var(--shadow-sm); } .doc-row.selected{ border-color: var(--ink-2); box-shadow: var(--shadow-md); } .doc-thumb{ height:84px; position:relative; border-right:1px solid var(--rule-2); background:var(--page); overflow:hidden; } .doc-thumb-svg{ position:absolute; inset:0; width:100%; height:100%; display:block; } .doc-kind-tag{ position:absolute; left:6px; top:6px; font-family:var(--mono); font-size:10.5px; letter-spacing:0.08em; text-transform:uppercase; background: rgba(28,24,20,0.78); color: var(--page); padding:1px 5px; border-radius:1px; } .doc-meta{ padding:14px 16px; display:flex; flex-direction:column; gap:3px; min-width:0; } .doc-name{ font-size:15px; font-weight:500; line-height:1.25; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .doc-sub{ font-style:italic; font-size:12.5px; color:var(--ink-3); line-height:1.3; } .doc-foot{ font-family:var(--mono); font-size:10.5px; color:var(--ink-4); letter-spacing:0.06em; text-transform:uppercase; margin-top:auto; padding-top:6px; } .doc-stat{ display:flex; align-items:center; gap:8px; padding:14px 14px; border-left:1px solid var(--rule-2); } .doc-stat-bar{ flex:1; height:5px; background:var(--rule); border-radius:99px; overflow:hidden; } .doc-stat-bar > span{ display:block; height:100%; background:linear-gradient(90deg, var(--sepia), var(--sepia-soft)); } .doc-stat-num{ font-family:var(--mono); font-size:10.5px; color:var(--ink-3); font-variant-numeric:tabular-nums; } .doc-status{ display:flex; align-items:center; gap:6px; padding:14px 12px; border-left:1px solid var(--rule-2); font-family:var(--mono); font-size:10.5px; color:var(--ink-3); letter-spacing:0.06em; text-transform:uppercase; } .dot{ width:6px; height:6px; border-radius:50%; background:var(--ink-4); display:inline-block; } .dot.ready{ background:var(--sepia); } .dot.parsing{ background:var(--pioneer-red); animation: pulse 1.4s ease-in-out infinite; } .dot.queued{ background:var(--ink-4); } @keyframes pulse{ 0%,100%{opacity:1} 50%{opacity:.35} } .doc-action{ display:flex; align-items:center; justify-content:center; border-left:1px solid var(--rule-2); font-family:var(--mono); font-size:10px; color:var(--ink-3); letter-spacing:0.06em; text-transform:uppercase; } .doc-action:hover{ color:var(--pioneer-red); } /* drop zone */ .dropzone{ border:1.5px dashed var(--ink-4); border-radius:3px; padding: 26px 22px; text-align:center; background: var(--page-soft); margin-top: 18px; transition: background 120ms, border-color 120ms; } .dropzone.over{ border-color: var(--pioneer-red); background: var(--pioneer-red-soft); } .dropzone-h{ font-family:var(--hist); font-weight:700; font-size:18px; margin-bottom:4px; } .dropzone-sub{ color:var(--ink-3); font-style:italic; font-size:13.5px; } .dropzone-kinds{ margin-top:12px; display:flex; gap:8px; justify-content:center; flex-wrap:wrap; } .kind-chip{ font-family:var(--mono); font-size:10px; letter-spacing:0.06em; text-transform:uppercase; padding:5px 9px; border-radius:99px; background:var(--paper); color:var(--ink-2); border:1px solid var(--rule); } /* sidebar panels */ .side-panel{ background:var(--page-soft); border:1px solid var(--rule); border-radius:3px; padding:18px; margin-bottom:16px; } .side-h{ font-family:var(--mono); font-size:10px; letter-spacing:0.12em; text-transform:uppercase; color:var(--ink-3); margin-bottom:12px; padding-bottom:8px; border-bottom:1px solid var(--rule); } .side-row{ display:flex; align-items:center; justify-content:space-between; font-size:13.5px; padding:5px 0; color:var(--ink-2); } .side-row .num{ font-family:var(--mono); font-size:13px; color:var(--ink); font-variant-numeric:tabular-nums; } .side-row + .side-row{ border-top:0.5px dashed var(--rule); } .subject-card{ display:flex; gap:14px; align-items:flex-start; } .subject-portrait{ width:62px; height:78px; flex:none; background: var(--sepia-tint); border:1px solid var(--rule); position:relative; overflow:hidden; border-radius:1px; } .subject-name{ font-family:var(--hist); font-weight:700; font-size:16px; line-height:1.2; } .subject-life{ font-family:var(--mono); font-size:10.5px; color:var(--ink-3); letter-spacing:0.04em; margin: 3px 0 8px; } .subject-bio{ font-style:italic; font-size:12.5px; color:var(--ink-2); line-height:1.4; } /* ─────────────────── manuscript screen ─────────────────── */ .ms-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:0; border:1px solid var(--rule); border-radius:3px; background:var(--page); box-shadow:var(--shadow-md); overflow:hidden; min-height: 720px; } .ms-pane{ padding: 36px 44px 40px; position:relative; overflow-y:auto; max-height: 80vh; } .ms-pane + .ms-pane{ border-left:1px solid var(--rule); background:var(--page-soft); } .ms-pane-head{ display:flex; justify-content:space-between; align-items:flex-start; padding-bottom: 18px; margin-bottom: 22px; border-bottom: 1px solid var(--rule); } .ms-pane-eyebrow{ font-family:var(--mono); font-size:10.5px; letter-spacing:0.12em; text-transform:uppercase; color:var(--ink-3); } .ms-pane-title{ font-family:var(--hist); font-weight:700; font-size:22px; margin-top:2px; letter-spacing:0.005em; } .ms-pane-sub{ font-style:italic; font-size:12.5px; color:var(--ink-3); margin-top:2px; } /* fidelity meter */ .fid-meter{ display:grid; grid-template-columns: 1fr 1fr 1fr; gap:1px; background: var(--rule); border-radius:2px; overflow:hidden; margin-bottom: 14px; } .fid-meter > div{ background: var(--page-soft); padding: 10px 12px; text-align:left; } .fid-pct{ font-family:var(--hist); font-weight:700; font-size:22px; letter-spacing:-0.01em; } .fid-key{ font-family:var(--mono); font-size:10.5px; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-3); margin-top:2px; } .fid-key::before{ content:""; display:inline-block; width:8px; height:8px; margin-right:6px; vertical-align:middle; border-radius:1px; } .fid-key.src::before{ background: var(--fid-source); } .fid-key.par::before{ background: var(--fid-paraphrase); } .fid-key.brg::before{ background: var(--fid-bridge); } /* manuscript prose */ .prose{ font-family:var(--serif); font-size: 17px; line-height: 1.65; color: var(--ink); text-wrap: pretty; hyphens: auto; font-variation-settings: "opsz" 18; } .prose h2{ font-family: var(--hist); font-size: 26px; line-height: 1.15; margin: 20px 0 4px; font-weight: 700; letter-spacing: -0.005em; } .prose h2 + .chapter-meta{ font-family:var(--mono); font-size:10px; letter-spacing:0.12em; text-transform:uppercase; color:var(--ink-4); margin-bottom: 18px; } .prose p{ margin: 0 0 12px; } .prose .drop::first-letter{ font-family:var(--hist); font-weight:700; font-size: 3.4em; float:left; line-height:0.85; padding: 6px 8px 0 0; color:var(--ink); } /* fidelity passage spans */ .psg{ cursor: default; border-bottom: 1.5px solid transparent; padding: 0 1px; border-radius: 1px; transition: background 100ms, border-color 100ms; } .fid-on .psg.src{ background: var(--fid-source-bg); border-bottom-color: var(--fid-source); } .fid-on .psg.par{ background: var(--fid-paraphrase-bg); border-bottom-color: var(--fid-paraphrase); } .fid-on .psg.brg{ background: var(--fid-bridge-bg); border-bottom-color: var(--fid-bridge); border-bottom-style: dotted; } .psg:hover{ outline: 2px solid var(--ink); outline-offset:1px; } .psg.active{ outline: 2px solid var(--pioneer-red); outline-offset:1px; } /* source pane */ .src-display{ position:relative; } .src-card{ background: var(--page); border: 1px solid var(--rule); padding: 18px; border-radius: 2px; box-shadow: var(--shadow-sm); position:relative; } .src-card-head{ display:flex; justify-content:space-between; align-items:flex-start; padding-bottom: 12px; margin-bottom: 14px; border-bottom: 0.5px dashed var(--rule); } .src-card-name{ font-family:var(--hist); font-weight:700; font-size:16px; letter-spacing:0.005em; } .src-card-cite{ font-family:var(--mono); font-size:10px; color:var(--ink-3); letter-spacing:0.06em; text-transform:uppercase; } .scan{ background: #f3e6c4; border: 1px solid rgba(120,90,50,0.18); padding: 22px 24px; border-radius: 1px; position: relative; font-family: var(--hist); line-height: 1.95; color: #4a3924; font-style: italic; letter-spacing: 0.01em; font-size:14.5px; background-image: repeating-linear-gradient(180deg, transparent 0 30px, rgba(120,90,50,0.10) 30px 31px), radial-gradient(rgba(120,90,50,0.06) 1px, transparent 1px); background-size: auto, 4px 4px; text-wrap: pretty; } .scan::before{ /* margin red rule */ content:""; position:absolute; left:48px; top:0; bottom:0; width:1px; background: rgba(180,40,40,0.22); } .scan-line{ display:block; } .scan .quoted{ background: rgba(220,170,60,0.32); box-shadow: 0 0 0 1px rgba(180,140,40,0.45); padding: 0 2px; border-radius: 1px; } .scan-foot{ display:flex; justify-content:space-between; margin-top: 14px; padding-top: 10px; border-top: 0.5px dashed var(--rule); font-family:var(--mono); font-size:10px; color:var(--ink-3); letter-spacing:0.06em; text-transform:uppercase; } .fidelity-tag{ display:inline-flex; align-items:center; gap:6px; padding: 3px 8px; border-radius:99px; font-family:var(--mono); font-size:10.5px; letter-spacing:0.08em; text-transform:uppercase; } .fidelity-tag.src{ background: var(--fid-source-bg); color: oklch(0.4 0.08 90); } .fidelity-tag.par{ background: var(--fid-paraphrase-bg); color: oklch(0.4 0.06 140); } .fidelity-tag.brg{ background: var(--fid-bridge-bg); color: var(--ink-3); } .empty-src{ padding: 60px 20px; text-align:center; color: var(--ink-3); font-style: italic; font-size: 14px; } .empty-src .arr{ font-family: var(--hist); font-size: 28px; display:block; margin-bottom: 8px; color: var(--ink-4); } /* manuscript right rail tools */ .tool-strip{ display:flex; align-items:center; gap:14px; font-family:var(--mono); font-size:10.5px; color:var(--ink-3); letter-spacing:0.06em; text-transform:uppercase; } .toggle{ display:inline-flex; align-items:center; gap:8px; cursor:default; } .toggle .sw{ width: 28px; height:16px; border-radius:99px; background: var(--rule); position:relative; transition: background 160ms; } .toggle .sw::before{ content:""; position:absolute; top:2px; left:2px; width:12px; height:12px; border-radius:50%; background: var(--paper); box-shadow: 0 1px 2px rgba(0,0,0,0.2); transition: transform 160ms; } .toggle.on .sw{ background: var(--ink); } .toggle.on .sw::before{ transform: translateX(12px); } /* ─────────────────── illustrate screen ─────────────────── */ .ill-grid{ display:grid; grid-template-columns: 1fr 320px; gap: 28px; align-items:flex-start; } .spread{ background: var(--page); border: 1px solid var(--rule); border-radius: 2px; box-shadow: var(--shadow-md); display:grid; grid-template-columns: 1fr 1fr; position:relative; min-height: 520px; } .spread::before{ /* gutter shadow */ content:""; position:absolute; left:50%; top:8px; bottom:8px; width:24px; transform:translateX(-50%); background: linear-gradient(90deg, transparent, rgba(28,24,20,0.18), transparent); pointer-events:none; } .page-l, .page-r{ padding: 38px 36px; position:relative; display:flex; flex-direction:column; } .page-l{ border-right: 0.5px solid var(--rule); } .page-num{ position:absolute; bottom:18px; font-family:var(--mono); font-size:10px; color: var(--ink-4); letter-spacing:0.1em; } .page-l .page-num{ left: 36px; } .page-r .page-num{ right: 36px; } .illust-frame{ flex:1; border:1px dashed var(--ink-4); border-radius:1px; position:relative; background: var(--page-soft); overflow:hidden; margin-bottom: 20px; min-height: 300px; } .illust-frame.full{ margin-bottom: 0; min-height: 100%; } .book-text{ font-family:var(--serif); font-size: 16px; line-height: 1.55; color: var(--ink); } .book-text .first{ font-family: var(--hist); font-size: 19px; font-weight:700; display:block; margin-bottom:8px; } /* spread strip */ .strip{ display:flex; gap:10px; margin-top: 16px; overflow-x:auto; padding: 4px 2px 10px; } .strip-thumb{ flex:none; width: 96px; height: 64px; border:1px solid var(--rule); border-radius: 2px; background: var(--page-soft); position:relative; cursor:default; display:grid; place-items:center; font-family:var(--mono); font-size:10.5px; color: var(--ink-4); letter-spacing:0.1em; text-transform:uppercase; overflow:hidden; } .strip-thumb.cur{ border-color: var(--pioneer-red); box-shadow: 0 0 0 1px var(--pioneer-red); } .strip-thumb svg{ position:absolute; inset:0; width:100%; height:100%; } /* style lock */ .lock-card{ background: var(--page-soft); border: 1px solid var(--rule); border-radius: 3px; padding: 22px 22px 20px; position:relative; overflow:hidden; } .lock-eyebrow{ font-family:var(--mono); font-size:10px; letter-spacing:0.14em; text-transform:uppercase; color: var(--pioneer-red); margin-bottom:8px; } .lock-h{ font-family:var(--hist); font-weight:700; font-size:19px; line-height:1.2; margin-bottom: 6px; } .lock-body{ font-style:italic; font-size:13.5px; color: var(--ink-2); line-height: 1.5; margin-bottom: 14px; } .style-tokens{ display:flex; flex-direction:column; gap:8px; padding: 12px 0; border-top:1px solid var(--rule); } .style-tok{ display:grid; grid-template-columns: 90px 1fr; align-items:center; gap:10px; font-family:var(--mono); font-size:10.5px; letter-spacing:0.06em; text-transform:uppercase; color:var(--ink-3); } .tok-val{ color: var(--ink); font-family: var(--serif); font-size: 13px; text-transform:none; letter-spacing:0; font-style:italic; } .tok-swatches{ display:flex; gap:4px; } .tok-swatch{ width:14px; height:14px; border-radius:50%; border:0.5px solid var(--rule); } .lock-cta{ display:flex; gap:8px; margin-top: 14px; } .locked-stamp{ position:absolute; right:-30px; top:18px; transform: rotate(8deg); border: 2px solid var(--pioneer-red); color: var(--pioneer-red); font-family:var(--hist); font-weight:700; letter-spacing:0.18em; padding: 6px 36px 5px; font-size: 13px; text-transform: uppercase; background: var(--pioneer-red-soft); opacity:0.85; pointer-events:none; } /* family shelf preview in side */ .shelf-row{ display:flex; gap:6px; padding: 14px 0; } .book-spine{ flex:1; height:78px; border-radius: 1px; background: linear-gradient(180deg, var(--ink) 0%, var(--ink-2) 100%); color: var(--paper); position:relative; overflow:hidden; border: 0.5px solid rgba(0,0,0,0.4); } .book-spine.locked{ background: linear-gradient(180deg, var(--sepia) 0%, oklch(0.42 0.07 50) 100%); } .book-spine.empty{ background: var(--paper); border: 1px dashed var(--ink-4); color: var(--ink-4); } .book-spine span{ position:absolute; top:50%; left:50%; transform: translate(-50%,-50%) rotate(-90deg); white-space:nowrap; font-family:var(--hist); font-size:10px; letter-spacing:0.18em; text-transform:uppercase; } /* ─────────────────── reader screen ─────────────────── */ .reader-stage{ background: linear-gradient(180deg, #2a2419 0%, #1a1612 100%); border-radius: 2px; padding: 60px 40px; position:relative; display:flex; align-items:center; justify-content:center; min-height: 640px; overflow:hidden; } .reader-controls{ position:absolute; left:50%; bottom:18px; transform: translateX(-50%); display:flex; align-items:center; gap:10px; background: rgba(241,232,212,0.95); border: 1px solid rgba(255,255,255,0.4); padding: 6px 8px; border-radius: 99px; box-shadow: 0 8px 24px -10px rgba(0,0,0,0.4); } .reader-pill{ font-family:var(--mono); font-size:10.5px; letter-spacing:0.08em; text-transform:uppercase; color: var(--ink-3); padding:0 8px; } .book-stage{ position: relative; width: 880px; max-width:100%; perspective: 2400px; } .book-spread{ position:relative; display:grid; grid-template-columns: 1fr 1fr; background: var(--page); box-shadow: 0 30px 80px -30px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.04); border-radius: 2px 2px 2px 2px; min-height: 540px; overflow:hidden; } .book-spread::before{ content:""; position:absolute; left:50%; top:0; bottom:0; width:30px; transform:translateX(-50%); background: linear-gradient(90deg, transparent, rgba(28,24,20,0.32) 50%, transparent); pointer-events:none; } .book-page{ padding: 50px 44px; display:flex; flex-direction:column; position:relative; background: var(--page); } .book-page.left{ border-right:0.5px solid var(--rule); } .cover-page{ background: var(--ink); color: var(--paper); padding: 60px 50px; display:flex; flex-direction:column; justify-content:space-between; position:relative; } .cover-pretitle{ font-family:var(--mono); font-size:10.5px; letter-spacing:0.18em; text-transform:uppercase; color: rgba(241,232,212,0.6); } .cover-title{ font-family:var(--hist); font-weight:700; font-size: 44px; line-height: 1; letter-spacing:-0.005em; margin: 0; } .cover-title .it{ font-style:italic; font-weight:400; } .cover-rule{ width:60px; height:1px; background:var(--paper); opacity:0.5; margin: 18px 0; } .cover-meta{ font-family:var(--hist); font-style:italic; font-size:14px; color: rgba(241,232,212,0.75); } .hover-fid{ position:absolute; right: 18px; top: 18px; display:flex; gap:6px; } .flip-btn{ position:absolute; top:50%; transform: translateY(-50%); width:48px; height:48px; border-radius:50%; background: rgba(241,232,212,0.92); color: var(--ink); border: 1px solid rgba(255,255,255,0.4); display:grid; place-items:center; font-family:var(--hist); font-size: 22px; cursor:default; z-index: 4; } .flip-btn.prev{ left: 12px; } .flip-btn.next{ right: 12px; } .flip-btn:hover{ background: var(--paper); } /* footnotes */ .foot-note{ font-family:var(--hist); font-style:italic; font-size:12.5px; line-height:1.4; color: var(--ink-3); border-top: 0.5px dashed var(--rule); padding-top: 8px; margin-top:auto; } .foot-note .num{ color: var(--pioneer-red); font-weight:700; margin-right:4px; } /* tweak controls extras */ .kp-tweak-strip{ display:flex; gap:8px; } .kp-tweak-strip > *{ flex:1; } /* utility */ .row{ display:flex; align-items:center; gap:12px; } .spacer{ flex:1; } .muted{ color:var(--ink-3); } .it{ font-style:italic; } .mono{ font-family:var(--mono); font-size:11px; letter-spacing:0.04em; } /* density */ .density-cozy .page-body{ padding: 8px 24px 40px; } .density-cozy .page-head{ padding: 20px 24px 12px; } /* Hamburger toggle — hidden on desktop, visible on mobile. */ .rail-toggle{ display: none; background: transparent; border: 1px solid var(--rule); border-radius: 4px; padding: 8px 10px; cursor: pointer; flex-direction: column; gap: 3px; align-items: center; justify-content: center; width: 38px; height: 36px; margin-right: 8px; } .rail-toggle span{ display: block; width: 16px; height: 1.5px; background: var(--ink-2); border-radius: 1px; } .rail-toggle:hover{ background: var(--page-soft); } /* Mobile-only crumb shown in the topbar when full crumbs are hidden. */ .crumbs-mobile{ display: none; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); flex: 1; } /* Scrim behind the rail when it's slid open on mobile. */ .rail-scrim{ display: none; position: fixed; inset: 0; background: rgba(28,24,20,0.45); backdrop-filter: blur(2px); z-index: 8; } body.rail-open .rail-scrim{ display: block; } /* Welcome / first-run empty state on the Sources index. */ .welcome-empty{ background: var(--page-soft); border: 1px solid var(--rule); border-radius: 4px; padding: 36px 28px 30px; text-align: center; } .welcome-emoji{ font-size: 42px; margin-bottom: 12px; filter: sepia(0.4); } /* Etched line icons replace the glossy emoji on empty states — sepia stroke, inherits currentColor. */ .welcome-emoji svg, .home-empty-emoji svg{ width: 52px; height: 52px; display: block; margin: 0 auto; color: var(--sepia); filter: none; } .welcome-h{ font-family: var(--hist); font-weight: 700; font-size: 26px; line-height: 1.15; margin-bottom: 10px; } .welcome-body{ font-size: 15px; line-height: 1.55; color: var(--ink-2); max-width: 56ch; margin: 0 auto; } .welcome-steps{ display: grid; grid-template-columns: 1fr; gap: 0; text-align: left; margin: 24px auto 0; max-width: 56ch; } .welcome-step{ display: grid; grid-template-columns: 36px 1fr; align-items: center; gap: 12px; padding: 12px 0; font-size: 14px; color: var(--ink-2); } .welcome-step + .welcome-step{ border-top: 0.5px dashed var(--rule); } .welcome-num{ width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--pioneer-red-soft); color: var(--pioneer-red); font-family: var(--mono); font-weight: 600; font-size: 12px; } /* ─────────────── Mobile + tablet responsive ─────────────── The grid collapses to single column, the rail becomes a slide-in drawer toggled by the hamburger. All right-rail sidebars on per- screen views fall under main content. */ @media (max-width: 900px){ .shell{ grid-template-columns: 1fr; } .rail{ position: fixed; left: 0; top: 0; width: 280px; max-width: 86vw; transform: translateX(-100%); transition: transform 220ms ease; z-index: 10; box-shadow: 0 20px 60px -20px rgba(0,0,0,0.6); } body.rail-open .rail{ transform: translateX(0); } .rail-toggle{ display: inline-flex; } .crumbs{ display: none; } .crumbs-mobile{ display: block; } .topbar{ padding: 12px 16px; } .page-head{ flex-direction: column; align-items: flex-start; padding: 18px 16px 12px; gap: 12px; } .page-h1{ font-size: 30px; } .page-lede{ font-size: 14.5px; } .page-body{ padding: 8px 16px 40px; } /* Two-column screens stack to single column. */ .src-grid, .ill-grid{ grid-template-columns: 1fr; gap: 18px; } .ms-grid{ grid-template-columns: 1fr; min-height: 0; } .ms-pane + .ms-pane{ border-left: 0; border-top: 1px solid var(--rule); } .ms-pane{ max-height: none; } .spread{ grid-template-columns: 1fr; min-height: 0; } .spread::before{ display: none; } .page-l{ border-right: 0; border-bottom: 0.5px solid var(--rule); } .spread-editors{ grid-template-columns: 1fr; } /* Doc rows compress — drop the wide progress + status columns. */ .doc-row{ grid-template-columns: 84px 1fr 80px; } .doc-stat, .doc-status{ display: none; } /* Big touch targets for grandma. */ .btn{ padding: 10px 14px; min-height: 40px; } .nav-item{ padding: 12px 10px 12px 4px; min-height: 48px; } .rail-cta{ padding: 14px; font-size: 12px; } /* Reader stage cleans up on small screens. */ .reader-stage{ padding: 28px 12px; min-height: 0; } .book-spread{ grid-template-columns: 1fr; min-height: 0; } .book-spread::before{ display: none; } .book-page.left{ border-right: 0; border-bottom: 0.5px solid var(--rule); } .cover-page{ padding: 36px 28px; } .cover-title{ font-size: 32px; } .flip-btn{ width: 40px; height: 40px; } } /* Phone only — even tighter typography. */ @media (max-width: 600px){ .page-h1{ font-size: 24px; } .page-lede{ font-size: 14px; line-height: 1.5; } .lib-family-head{ flex-direction: column; align-items: flex-start; gap: 14px; } .scene-grid{ grid-template-columns: 1fr 1fr; } .lib-char-grid{ grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); } .pe-variations{ grid-template-columns: 1fr 1fr; } .ideas-grid{ grid-template-columns: 1fr; } .fin-grid{ grid-template-columns: 1fr; } .doc-row{ grid-template-columns: 64px 1fr 60px; } .doc-thumb{ height: 64px; } } .density-cozy .ms-pane{ padding: 26px 32px 30px; } .density-cozy .prose{ font-size: 16px; line-height: 1.6; } /* warm tone variants (set via inline style on root) */ /* ── Quality floor (launch audit 2026-07-03) ───────────────────────────────── Keyboard focus must be visible everywhere. Several inputs style away the default :focus outline for mouse users (their choice stands); this rule is the floor no component may break for KEYBOARD users — hence !important. */ :focus-visible { outline: 2px solid var(--pioneer-red) !important; outline-offset: 2px; } /* Respect reduced-motion across the Studio: kill decorative movement, keep state changes instant. Marketing page has its own equivalent. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }