/* sun-drawer.css - isolated Sun "File-Folder Drawer" module (v3.13). * * Scoped to [data-theme="sun"] so Moon is never touched. Cohesion system * (cutouts) lives in cutouts.css. This file owns the drawer + open surface. * * When mounted, gets .sun-drawer-active, which hides the LEGACY Sun * panel system (nav capsule, panel tab bar, panel nav list, panel content, * title-blocks) - Sun starts from an empty canvas, the drawer is the only nav. */ /* ── @property registrations ────────────────────────────────────── Register palette color tokens as so CSS transitions can interpolate them smoothly when the Sun-position palette shifts on mount. Without these, the browser treats the transition as `discrete` (snap, no crossfade). */ @property --paper { syntax: ''; initial-value: #F0E4D2; inherits: true; } @property --paper-2 { syntax: ''; initial-value: #E9DAC2; inherits: true; } @property --bone { syntax: ''; initial-value: #F4ECDB; inherits: true; } @property --ink-soft { syntax: ''; initial-value: #4A4138; inherits: true; } /* Self-contained Sun palette + type (fills any missing live tokens). Scoped to [data-theme="sun"] so it NEVER leaks into Moon (unscoped :root would override --border/--ink globally and corrupt Moon's borders). */ [data-theme="sun"]{ --paper:#F0E4D2; --paper-2:#E9DAC2; --ink:#241F1A; --ink-soft:#4A4138; --bone:#F4ECDB; --zinc:#3A7080; --zinc-dim:#6E8A8E; --border:#7C6E5C; --border-dim:#C7B79F; --pigment:#B5443B; --amber:#C6912E; --sage:#8A8C6A; --slate:#5B7480; --brown:#8A6A4E; --olive:#6E6E48; --clay:#A2664A; --mono:'Departure Mono','JetBrains Mono',ui-monospace,monospace; --serif:'Fraunces',Georgia,serif; --sans:'Newsreader',Georgia,serif; --kicker:'Archivo','Arial Narrow',sans-serif; /* Smooth transition for the Sun-position palette warmth shift. Animates from the CSS-declared base value to the inline warmth-adjusted value set by setSunPalette() after mount. 1.4s ease gives a gentle warmth bloom that's noticeable but not distracting. */ transition: --paper 1.4s ease, --paper-2 1.4s ease, --bone 1.4s ease, --ink-soft 1.4s ease; } [data-theme="sun"] .sun-drawer-active .nav, [data-theme="sun"] .sun-drawer-active .panel-tab-bar, [data-theme="sun"] .sun-drawer-active .panel-nav-list, [data-theme="sun"] .sun-drawer-active .panel-content[data-sun-only], [data-theme="sun"] .sun-drawer-active .title-block[data-sun-only], [data-theme="sun"] .sun-drawer-active .sun-layer-panel, [data-theme="sun"] .sun-drawer-active header.hero, /* Moon hero HUD - Sun uses the evidence board */ [data-theme="sun"] .sun-drawer-active #paper-portrait { display:none !important; } /* ---- the drawer (peeking folders) ---- */ .drawer{position:fixed;inset:0;z-index:30;pointer-events:none} .folder{position:absolute;bottom:12px;height:min(60vh,480px);pointer-events:auto;cursor:pointer;text-decoration:none; color:var(--ink,#241F1A);will-change:transform;transform-origin:bottom center; background:var(--bone,#F4ECDB);border:1px solid rgba(36,31,26,.5);border-radius:4px 4px 0 0; box-shadow:8px 0 16px -10px rgba(36,31,26,.5); background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 1px,transparent 1px 4px)} .folder .tab{position:absolute;top:-19px;height:20px;width:56px;background:var(--tint); border:1px solid rgba(36,31,26,.5);border-bottom:none;border-radius:7px 7px 0 0; display:flex;align-items:center;justify-content:center;box-shadow:3px -3px 8px -5px rgba(36,31,26,.5);overflow:hidden} .folder .tab b{font-family:var(--mono,'Departure Mono',monospace);font-size:9px;letter-spacing:.06em;color:var(--ink,#241F1A);position:relative;z-index:2} .folder .tab::after{content:'';position:absolute;right:-7px;bottom:-7px;width:14px;height:14px; background:var(--paper-2,#E9DAC2);border-left:1px solid var(--border-dim,#C7B79F);border-top:1px solid var(--border-dim,#C7B79F);transform:rotate(45deg)} .folder:nth-child(3n+1) .tab{left:12px}.folder:nth-child(3n+2) .tab{left:26px}.folder:nth-child(3n+3) .tab{left:40px} .folder .band{position:absolute;top:0;left:0;right:0;height:5px;background:var(--tint)} .cover{position:absolute;inset:0;padding:20px 16px 14px;display:flex;flex-direction:column;overflow:hidden} .cover .cfol{font-family:var(--mono,'Departure Mono',monospace);font-size:10px;letter-spacing:.14em;color:var(--zinc,#3A7080)} .cover .cname{font-family:var(--kicker,'Archivo',sans-serif);font-weight:600;font-size:clamp(15px,1.5vw,20px);letter-spacing:.08em;text-transform:uppercase;margin-top:8px;line-height:1} .cover .csub{font-family:var(--serif,'Fraunces',serif);font-style:italic;font-weight:600;font-size:13px;color:var(--ink-soft,#4A4138);margin-top:4px} .cover .cthumb{height:96px;margin:12px 0 10px;background:linear-gradient(135deg,#16323a,#0a1820 70%); display:flex;align-items:center;justify-content:center;overflow:hidden;border:1px solid var(--border-dim,#C7B79F)} .cover .cthumb img{width:78%;max-height:84px;object-fit:contain;filter:drop-shadow(0 4px 8px rgba(0,0,0,.3))} .cover .cthumb.is-self{background:linear-gradient(135deg,#e9dcc4,#d8c6a6)} .cover .cthumb img.portrait{width:92px;height:92px;max-height:none;border-radius:50%;object-fit:cover;border:2px solid var(--tint);box-shadow:0 4px 10px rgba(36,31,26,.25);filter:none;background:var(--paper-2,#E9DAC2)} .hero .hcut.portrait{width:176px;height:176px;margin-top:-88px;border-radius:50%;object-fit:cover;border:3px solid var(--tint);background:var(--paper-2,#E9DAC2);filter:drop-shadow(0 10px 18px rgba(36,31,26,.3))} .floatcut img.portrait{border-radius:50%;object-fit:cover;border:2px solid var(--tint);width:96px} .cover .cstamp{position:absolute;right:12px;top:54px;font-family:var(--kicker,'Archivo',sans-serif);font-weight:600;font-size:10px; letter-spacing:.12em;color:var(--pigment,#B5443B);border:1.5px solid var(--pigment,#B5443B);padding:3px 7px;border-radius:3px; transform:rotate(-13deg);opacity:.82;pointer-events:none;text-transform:uppercase} .cover .cfoot{font-family:var(--mono,'Departure Mono',monospace);font-size:8px;letter-spacing:.16em;color:var(--zinc-dim,#6E8A8E);text-transform:uppercase; border-top:1px solid var(--border-dim,#C7B79F);padding-top:8px;display:flex;justify-content:space-between;align-items:center} .cover .cfoot .bar{display:inline-block;width:54px;height:9px;background:repeating-linear-gradient(90deg,var(--ink,#241F1A) 0 2px,transparent 2px 4px)} /* === open surface (folder "unfolds" into a fullscreen page) === */ .surface{position:fixed;inset:12px;z-index:150;opacity:0;pointer-events:none;perspective:2000px;will-change:transform,opacity} .surface.on{pointer-events:auto} .surface .page{position:absolute;inset:0;overflow:hidden;background:var(--bone,#F4ECDB);border:1px solid var(--border,#7C6E5C); box-shadow:0 50px 120px -40px rgba(36,31,26,.65); background-image:radial-gradient(rgba(36,31,26,.5) .6px,transparent 1px);background-size:4px 4px;background-blend-mode:multiply} .surface .flap{position:absolute;inset:0;z-index:3;transform-origin:top center;backface-visibility:hidden; background:var(--paper-2,#E9DAC2);border:1px solid rgba(36,31,26,.4);padding:clamp(28px,6vw,70px); display:flex;flex-direction:column;justify-content:space-between; background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 1px,transparent 1px 5px)} .surface .flap::before{content:'';position:absolute;top:0;left:0;right:0;height:8px;background:var(--tint)} .surface .flap .ftop{font-family:var(--mono,'Departure Mono',monospace);font-size:12px;letter-spacing:.24em;color:var(--zinc,#3A7080);text-transform:uppercase} .surface .flap .ffol{font-family:var(--serif,'Fraunces',serif);font-style:italic;font-weight:600;font-size:clamp(60px,16vw,190px);line-height:.9;color:var(--tint)} .surface .flap .fname{font-family:var(--kicker,'Archivo',sans-serif);font-weight:600;font-size:clamp(22px,3vw,40px);letter-spacing:.14em;text-transform:uppercase} .surface .flap .ffoot{font-family:var(--mono,'Departure Mono',monospace);font-size:11px;letter-spacing:.2em;color:var(--zinc-dim,#6E8A8E);text-transform:uppercase} .surface .rd{position:absolute;inset:0;z-index:1;overflow:auto;padding:0} .fileback{position:fixed;top:24px;left:24px;font-family:var(--kicker,'Archivo',sans-serif);font-weight:600;font-size:10px; letter-spacing:.2em;text-transform:uppercase;color:var(--ink,#241F1A);background:transparent;border:1px solid var(--border,#7C6E5C); padding:6px 12px;cursor:pointer;display:flex;gap:8px;align-items:center;transition:background .2s,color .2s;z-index:160} .fileback:hover{background:var(--ink,#241F1A);color:var(--paper,#F0E4D2)} /* === 12-column dossier grid === */ .dossier{display:grid;grid-template-columns:repeat(12,1fr);column-gap:24px;position:relative; padding:96px clamp(24px,7vw,120px) 80px; background: linear-gradient(90deg, transparent 24.9%, rgba(36,31,26,.06) 25%, transparent 25.1%) 0 0 / calc(100%/12) 100% no-repeat, linear-gradient(90deg, transparent 74.9%, rgba(36,31,26,.06) 75%, transparent 75.1%) 0 0 / calc(100%/12) 100% no-repeat} /* ── Image loading placeholders - prevent blank white flash ── */ /* Themed paper background prevents transparent cutout PNGs from showing a white blank while the image loads over a slow connection. No opacity manipulation needed - GSAP handles the dossier fade-in, and the background color blends seamlessly with the page once the image renders. (No !important required - this is purely a background-color placeholder.) */ .dossier img{ background:var(--paper-2,#E9DAC2); } .cover .cthumb img{ background:var(--paper-2,#E9DAC2); } .col-guide{position:absolute;top:0;bottom:0;width:1px;background:repeating-linear-gradient(var(--border-dim,#C7B79F) 0 6px,transparent 6px 12px);opacity:.5;pointer-events:none} .col-guide.g-l{left:calc(25% + 12px)} .col-guide.g-r{left:calc(83.33% - 12px)} .sun-drawer-active .hero{grid-column:1 / 13;position:relative;height:200px;margin-bottom:36px;overflow:hidden} .hero .tintblock{position:absolute;inset:18px 33% 18px 0;background:var(--tint);opacity:.16;border:1px solid var(--border-dim,#C7B79F)} .hero .htitle{position:absolute;left:0;bottom:8px;z-index:2} .hero .htitle .hfol{font-family:var(--mono,'Departure Mono',monospace);font-size:12px;letter-spacing:.24em;color:var(--zinc,#3A7080);text-transform:uppercase} .hero .htitle h1{font-family:var(--serif,'Fraunces',serif);font-style:italic;font-weight:600;font-size:clamp(40px,7vw,96px);line-height:.9;margin:.1em 0 0;letter-spacing:-.02em} .hero .hcut{position:absolute;right:2%;top:50%;width:150px;height:150px;margin-top:-75px;z-index:1; filter:drop-shadow(0 8px 14px rgba(36,31,26,.25)) var(--print,);will-change:transform} .manifest{grid-column:1 / 4;position:sticky;top:96px;align-self:start;font-family:var(--mono,'Departure Mono',monospace);font-size:10px; letter-spacing:.06em;color:var(--ink-soft,#4A4138);text-transform:uppercase;line-height:1.7} .manifest::before,.manifest::after{content:'';display:block;width:18px;height:18px;border:1.5px solid var(--zinc,#3A7080);margin-bottom:14px} .manifest::after{margin:14px 0 0;border-top:0;border-left:0;margin-left:auto} .manifest .m-head{display:flex;justify-content:space-between;align-items:baseline;font-family:var(--kicker,'Archivo',sans-serif); font-weight:600;font-size:10px;letter-spacing:.22em;color:var(--zinc,#3A7080);text-transform:uppercase; border-bottom:2px solid var(--border,#7C6E5C);padding-bottom:8px;margin-bottom:6px} .manifest .m-head b{color:var(--pigment,#B5443B)} .manifest .m-row{display:flex;justify-content:space-between;gap:10px;border-bottom:1px dashed var(--border-dim,#C7B79F);padding:7px 0} .manifest .m-row .m-num{font-family:var(--mono,'Departure Mono',monospace);font-size:8px;color:var(--zinc-dim,#6E8A8E); width:16px;flex:0 0 16px;letter-spacing:.06em;align-self:center} .manifest .m-row span:not(.m-num){color:var(--zinc-dim,#6E8A8E)} .manifest .m-row b{color:var(--ink,#241F1A);font-weight:600} .manifest .m-h{font-family:var(--kicker,'Archivo',sans-serif);font-weight:600;color:var(--zinc,#3A7080);letter-spacing:.22em;margin:10px 0 2px} .manifest .m-tags{margin-top:14px;display:flex;flex-wrap:wrap;gap:7px} .manifest .m-note{margin-top:14px;color:var(--zinc-dim,#6E8A8E);font-size:9px;line-height:1.6} /* === vertical timeline track (clinical section index) === */ .timeline-track{position:absolute;left:14px;top:96px;bottom:80px;width:24px;display:flex; flex-direction:column;justify-content:space-between;z-index:2;pointer-events:none} .timeline-track:before{content:'';position:absolute;left:7px;top:0;bottom:0;width:1px; background:repeating-linear-gradient(var(--border-dim,#C7B79F) 0 6px,transparent 6px 12px);opacity:.6} .timeline-track .tt-node{position:relative;height:0} .timeline-track .tt-dot{position:absolute;left:3px;top:0;width:9px;height:9px;border-radius:50%; background:var(--paper-2,#E9DAC2);border:1.5px solid var(--zinc-dim,#6E8A8E);transform:translateY(-50%)} .timeline-track .tt-node.active .tt-dot{background:var(--pigment,#B5443B);border-color:var(--pigment,#B5443B); box-shadow:0 0 0 3px rgba(181,68,59,.18)} .timeline-track .tt-label{position:absolute;left:16px;top:0;transform:translateY(-50%);white-space:nowrap; font-family:var(--mono,'Departure Mono',monospace);font-size:9px;letter-spacing:.08em;color:var(--zinc-dim,#6E8A8E)} .timeline-track .tt-node.active .tt-label{color:var(--pigment,#B5443B)} /* ── Timeline-track clickable section nav ── */ /* Container stays pointer-events:none so the vertical line doesn't intercept clicks. Dots and labels get pointer-events:auto since .tt-node has height:0 (zero clickable bounding box). Clicks on the visible children bubble up to .tt-node which has the click listener. */ .timeline-track .tt-node{ cursor:pointer; } .timeline-track .tt-node.active{ cursor:default; } .timeline-track .tt-node .tt-dot, .timeline-track .tt-node .tt-label{ pointer-events:auto; } .timeline-track .tt-node:not(.active) .tt-dot{ transition:transform .2s, background .2s, border-color .2s; } .timeline-track .tt-node:not(.active):hover .tt-dot{ background:var(--zinc,#3A7080); border-color:var(--zinc,#3A7080); transform:translateY(-50%) scale(1.3); } .timeline-track .tt-node:not(.active):hover .tt-label{ color:var(--ink,#241F1A); } .timeline-track .tt-label{ transition:color .15s; } .timeline-track .tt-node:not(.active):focus-visible{ outline:2px solid var(--zinc,#3A7080); outline-offset:4px; border-radius:2px; } /* ── Manifest section navigation rows ── */ .manifest .m-sections-head{ font-family:var(--kicker,'Archivo',sans-serif); font-weight:600; color:var(--zinc,#3A7080); letter-spacing:.22em; text-transform:uppercase; margin:12px 0 2px; font-size:10px; } .manifest .m-section{ display:flex; align-items:center; gap:8px; padding:4px 0; cursor:pointer; transition:background .15s, color .15s; border-bottom:1px dashed var(--border-dim,#C7B79F); } .manifest .m-section.active{ cursor:default; } .manifest .m-section:hover{ background:color-mix(in srgb, var(--zinc,#3A7080) 8%, transparent); margin:0 -4px; padding:4px 4px; border-radius:2px; } .manifest .m-section:hover .m-sec-name{ color:var(--ink,#241F1A); } .manifest .m-section.active .m-sec-name, .manifest .m-section.active .m-sec-num{ color:var(--pigment,#B5443B); } .manifest .m-section:focus-visible{ outline:2px solid var(--zinc,#3A7080); outline-offset:2px; border-radius:2px; } .m-sec-num{ font-family:var(--mono,'Departure Mono',monospace); font-size:9px; letter-spacing:.08em; color:var(--zinc-dim,#6E8A8E); min-width:22px; } .m-sec-name{ font-family:var(--kicker,'Archivo',sans-serif); font-weight:600; font-size:10px; letter-spacing:.12em; color:var(--ink-soft,#4A4138); text-transform:uppercase; transition:color .15s; } /* === CAD dimension-line hover (beside docked folder) === */ .drawer-dims{position:fixed;inset:0;width:100%;height:100%;z-index:120;pointer-events:none;overflow:visible} .drawer-dims .dim-l{stroke:var(--pigment,#B5443B);stroke-width:1;opacity:.7} .drawer-dims .dim-cap{stroke:var(--pigment,#B5443B);stroke-width:1;opacity:.7} .drawer-dims .dim-t{fill:var(--pigment,#B5443B);font-family:var(--mono,'Departure Mono',monospace); font-size:9px;letter-spacing:.12em;opacity:.85} @media (max-width:768px){ .timeline-track{display:none} } .study{grid-column:5 / 11} .study .lede{font-family:var(--sans,'Newsreader',serif);font-size:16px;color:var(--ink-soft,#4A4138);line-height:1.65;text-align:justify;hyphens:auto} .study .lede p:first-of-type::first-letter{font-family:var(--serif,'Fraunces',serif);font-weight:600;font-size:3.4em;float:left;line-height:.7;padding:6px 9px 0 0;color:var(--tint)} .study .pq{font-family:var(--serif,'Fraunces',serif);font-style:italic;font-weight:600;font-size:clamp(20px,2.4vw,30px);line-height:1.25; color:var(--tint);border-left:3px solid var(--tint);padding:6px 0 6px 18px;margin:26px 0} .study .body{font-family:var(--sans,'Newsreader',serif);font-size:15px;color:var(--ink-soft,#4A4138);line-height:1.62;text-align:justify;hyphens:auto} .floatcut{grid-column:11 / 13;position:relative} .floatcut img{position:absolute;width:90px;opacity:.9;filter:var(--print,);will-change:transform} .sticker{display:inline-block;font-family:var(--mono,'Departure Mono',monospace);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase; color:var(--ink,#241F1A);background:var(--bone,#F4ECDB);border:1px solid var(--ink,#241F1A);padding:4px 8px;cursor:default; transition:transform .18s ease, filter .18s ease} .sticker:hover{transform:translateY(-2px);filter:drop-shadow(4px 4px 0 var(--ink,#241F1A))} /* ── Per-section layout variants ────────────────────────────────── */ /* Evidence callout (Focus section) */ .callout{display:flex;flex-direction:column;gap:6px; margin:16px 0 20px;padding:14px 16px; background:color-mix(in srgb,var(--tint) 8%,transparent); border-left:3px solid var(--tint);border-radius:0 2px 2px 0} .callout .co-label{font-family:var(--kicker,'Archivo',sans-serif);font-weight:600;font-size:9px; letter-spacing:.24em;color:var(--tint);text-transform:uppercase} .callout .co-text{font-family:var(--serif,'Fraunces',serif);font-style:italic;font-weight:600; font-size:clamp(15px,1.4vw,20px);color:var(--ink-soft,#4A4138);line-height:1.45} /* Work timeline entries */ .study--timeline .lede{margin-bottom:20px} .study--timeline .timeline{display:flex;flex-direction:column;gap:2px;position:relative} .study--timeline .timeline::before{content:'';position:absolute;left:84px;top:0;bottom:0;width:1px; background:repeating-linear-gradient(var(--border-dim,#C7B79F) 0 4px,transparent 4px 8px);opacity:.5} .tl-entry{display:flex;gap:20px;padding:10px 0 10px 0;border-bottom:1px dashed var(--border-dim,#C7B79F)} .tl-entry:last-child{border-bottom:none} .tl-date{flex:0 0 76px;font-family:var(--mono,'Departure Mono',monospace);font-size:9px; letter-spacing:.04em;color:var(--zinc,#3A7080);padding-top:2px;text-align:right} .tl-body{flex:1;display:flex;flex-direction:column;gap:3px} .tl-title{font-family:var(--kicker,'Archivo',sans-serif);font-weight:600;font-size:13px; letter-spacing:.06em;color:var(--ink,#241F1A);text-transform:uppercase} .tl-org{font-family:var(--mono,'Departure Mono',monospace);font-size:9px;letter-spacing:.1em; color:var(--zinc-dim,#6E8A8E);text-transform:uppercase} .tl-desc{font-family:var(--sans,'Newsreader',serif);font-size:13px;line-height:1.5; color:var(--ink-soft,#4A4138);margin:2px 0 0} /* Project gallery cards */ .study--gallery .body-p{font-family:var(--sans,'Newsreader',serif);font-size:15px; color:var(--ink-soft,#4A4138);line-height:1.62;text-align:justify;hyphens:auto; margin-bottom:18px} .pcard-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px} .pcard{display:flex;flex-direction:column;background:var(--paper,#F0E4D2); border:1px solid var(--border-dim,#C7B79F);padding:12px 14px; transition:box-shadow .2s ease, transform .2s ease} .pcard:hover{box-shadow:0 6px 16px -8px rgba(36,31,26,.3);transform:translateY(-2px)} .pcard-name{font-family:var(--mono,'Departure Mono',monospace);font-size:10px; letter-spacing:.12em;color:var(--ink,#241F1A);text-transform:uppercase} .pcard-status{font-family:var(--mono,'Departure Mono',monospace);font-size:7.5px; letter-spacing:.16em;color:var(--zinc,#3A7080);text-transform:uppercase;margin:4px 0 6px} .pcard-desc{font-family:var(--sans,'Newsreader',serif);font-size:12px;line-height:1.5; color:var(--ink-soft,#4A4138);margin:0} /* Registry certificate grid */ .study--registry .body-p{font-family:var(--sans,'Newsreader',serif);font-size:15px; color:var(--ink-soft,#4A4138);line-height:1.62;text-align:justify;hyphens:auto; margin-bottom:18px} .cert-grid{display:flex;flex-direction:column;border:1px solid var(--border-dim,#C7B79F); font-family:var(--mono,'Departure Mono',monospace);font-size:10px} .cert-head{display:grid;grid-template-columns:1fr auto 52px;gap:10px;padding:8px 12px; background:color-mix(in srgb,var(--zinc,#3A7080) 10%,transparent); border-bottom:1px solid var(--border-dim,#C7B79F); font-size:8px;letter-spacing:.18em;color:var(--zinc,#3A7080);text-transform:uppercase} .cert-row{display:grid;grid-template-columns:1fr auto 52px;gap:10px;padding:7px 12px; border-bottom:1px dashed var(--border-dim,#C7B79F);align-items:center} .cert-row:last-child{border-bottom:none} .cert-title{color:var(--ink,#241F1A);font-weight:600} .cert-issuer{font-size:9px;color:var(--zinc-dim,#6E8A8E)} .cert-year{font-size:9px;color:var(--zinc-dim,#6E8A8E);text-align:right} /* ── Colophon layout (build metadata grid) ── */ .study--colophon .colophon-body{display:flex;flex-direction:column;gap:18px;margin-top:10px} .col-grid{display:flex;flex-direction:column;gap:14px} .col-group{display:flex;flex-direction:column;gap:5px; border-bottom:1px dashed var(--border-dim,#C7B79F);padding-bottom:10px} .col-group:last-child{border-bottom:none} .col-head{font-family:var(--kicker,'Archivo',sans-serif);font-weight:600;font-size:9px; letter-spacing:.22em;color:var(--zinc,#3A7080);text-transform:uppercase;margin-bottom:2px} .col-meta{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:baseline; font-family:var(--mono,'Departure Mono',monospace);font-size:10px; padding:3px 0;border-bottom:1px dotted var(--border-dim,#C7B79F)} .col-meta:last-child{border-bottom:none} .col-label{color:var(--ink,#241F1A);font-weight:600;letter-spacing:.06em;min-width:120px} .col-value{color:var(--ink-soft,#4A4138);letter-spacing:.04em} .col-note{color:var(--zinc-dim,#6E8A8E);font-size:9px;letter-spacing:.06em;text-align:right} /* Colophon signature block */ .col-signature{display:flex;flex-direction:column;align-items:flex-end;gap:4px; margin-top:4px;padding-top:12px;border-top:1px solid var(--border,#7C6E5C)} .col-sig-line{font-family:var(--kicker,'Archivo',sans-serif);font-weight:600; font-size:18px;letter-spacing:.4em;color:var(--pigment,#B5443B);line-height:.6} .col-sig-name{font-family:var(--serif,'Fraunces',serif);font-style:italic;font-weight:600; font-size:clamp(16px,1.6vw,22px);color:var(--ink,#241F1A)} .col-sig-role{font-family:var(--mono,'Departure Mono',monospace);font-size:9px; letter-spacing:.18em;color:var(--zinc-dim,#6E8A8E);text-transform:uppercase} /* Toolchain spec sheet */ .study--spec .lede{margin-bottom:14px} .spec-grid{display:flex;flex-direction:column;gap:12px} .spec-group{display:flex;flex-direction:column;gap:6px; border-bottom:1px dashed var(--border-dim,#C7B79F);padding-bottom:10px} .spec-group:last-child{border-bottom:none} .spec-glabel{font-family:var(--kicker,'Archivo',sans-serif);font-weight:600;font-size:9px; letter-spacing:.22em;color:var(--zinc,#3A7080);text-transform:uppercase} .spec-items{display:flex;flex-wrap:wrap;gap:6px} .spec-item{font-family:var(--mono,'Departure Mono',monospace);font-size:10px; letter-spacing:.06em;color:var(--ink-soft,#4A4138); background:var(--paper,#F0E4D2);border:1px solid var(--border-dim,#C7B79F); padding:4px 9px;transition:background .15s ease, color .15s ease;cursor:default} .spec-item:hover{background:var(--ink,#241F1A);color:var(--bone,#F4ECDB)} /* ── Self section: historical figures dossier (Lineage) ──────────── */ .study--self .body{ margin-bottom:20px; } .study--self .pq{ margin-bottom:18px; } /* Lineage divider - red rule separating subject bio from historical figures */ .lineage-divider{ display:flex; align-items:center; gap:14px; margin:30px 0 26px; padding:0; } .lineage-divider .lineage-line{ flex:1; height:1px; background:repeating-linear-gradient(to right, var(--pigment,#B5443B) 0 6px, transparent 6px 12px); opacity:.5; } .lineage-divider .lineage-label{ flex:0 0 auto; font-family:var(--kicker,'Archivo',sans-serif); font-weight:600; font-size:9px; letter-spacing:.28em; text-transform:uppercase; color:var(--pigment,#B5443B); white-space:nowrap; } /* Historical figures portrait grid - 3-column, masonry-like cards */ .hfig-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-bottom:10px; } .hfig-card{ display:flex; flex-direction:column; background:var(--paper,#F0E4D2); border:1px solid var(--border-dim,#C7B79F); border-top:3px solid var(--pigment,#B5443B); padding:0 0 14px; transition:box-shadow .25s ease, transform .25s ease; } .hfig-card:hover{ box-shadow:0 8px 22px -10px rgba(36,31,26,.4); transform:translateY(-3px); } .hfig-card .hfig-portrait{ position:relative; height:160px; background:linear-gradient(180deg, var(--paper-2,#E9DAC2), var(--bone,#F4ECDB)); display:flex; align-items:center; justify-content:center; overflow:hidden; border-bottom:1px solid var(--border-dim,#C7B79F); } .hfig-card .hfig-portrait .hfig-img{ width:100%; height:100%; object-fit:contain; padding:12px 8px; filter:drop-shadow(0 4px 8px rgba(36,31,26,.2)); background:transparent; /* SVG fills its own background */ } .hfig-card .hfig-portrait .hfig-label{ position:absolute; bottom:6px; left:6px; right:6px; font-family:var(--mono,'Departure Mono',monospace); font-size:7px; letter-spacing:.12em; text-transform:uppercase; color:var(--zinc-dim,#6E8A8E); background:rgba(244,236,219,.7); padding:3px 6px; border-radius:2px; text-align:center; line-height:1.3; backdrop-filter:blur(2px); } .hfig-card .hfig-body{ padding:12px 12px 0; display:flex; flex-direction:column; gap:3px; } .hfig-card .hfig-name{ font-family:var(--kicker,'Archivo',sans-serif); font-weight:600; font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink,#241F1A); line-height:1.1; } .hfig-card .hfig-life{ font-family:var(--mono,'Departure Mono',monospace); font-size:9px; letter-spacing:.06em; color:var(--zinc,#3A7080); } .hfig-card .hfig-bio{ font-family:var(--sans,'Newsreader',serif); font-size:12px; line-height:1.55; color:var(--ink-soft,#4A4138); margin:4px 0 0; } @media (max-width:900px){ .manifest{grid-column:1 / 5}.study{grid-column:5 / 13}.floatcut{display:none} .dossier{background:none} .hfig-grid{ grid-template-columns:repeat(2,1fr); gap:14px; } } /* ── Layer Panel (toggleable grid + annotations overlay) ── */ .ds-layer-panel{ position:absolute; top:52px; right:14px; z-index:13; display:none; width:200px; background:var(--bone,#F4ECDB); border:1px solid var(--border,#7C6E5C); padding:10px 12px 12px; box-shadow:0 8px 24px -10px rgba(36,31,26,.45); pointer-events:auto; } .ds-layer-panel[hidden]{ display:none; } body.reading .ds-layer-panel:not([hidden]){ display:block; } .ds-layer-panel .ds-layer-title{ font-family:var(--mono,'Departure Mono',monospace); font-size:9px; letter-spacing:.18em; text-transform:uppercase; color:var(--zinc-dim,#6E8A8E); margin-bottom:8px; } .ds-layer-panel .ds-layer-row{ display:flex; align-items:center; gap:8px; font-family:var(--mono,'Departure Mono',monospace); font-size:10px; letter-spacing:.1em; color:var(--ink-soft,#4A4138); padding:4px 0; cursor:pointer; text-transform:uppercase; } .ds-layer-panel .ds-layer-row input{ accent-color:var(--pigment,#B5443B); margin:0; cursor:pointer; } .ds-layer-panel .ds-layer-sub{ margin-left:auto; color:var(--zinc-dim,#6E8A8E); font-size:9px; } .ds-layer-panel .ds-layer-divider{ height:1px; background:var(--border-dim,#C7B79F); margin:6px 0; } .ds-layer-panel .ds-layer-grid-row{ display:flex; align-items:center; justify-content:space-between; font-family:var(--mono,'Departure Mono',monospace); font-size:9px; letter-spacing:.1em; color:var(--zinc-dim,#6E8A8E); text-transform:uppercase; padding:2px 0; } .ds-layer-panel .ds-grid-cycle{ font-family:var(--mono,'Departure Mono',monospace); font-size:9px; color:var(--ink-soft,#4A4138); background:transparent; border:1px solid var(--border-dim,#C7B79F); padding:2px 8px; cursor:pointer; transition:border-color .15s ease, background .15s ease; } .ds-layer-panel .ds-grid-cycle:hover{ border-color:var(--border,#7C6E5C); } /* ── Layer toggle button (in stamp bar) ── */ .ds-layer-btn{ font-family:var(--mono,'Departure Mono',monospace); font-size:8px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft,#4A4138); background:transparent; border:1px solid transparent; padding:2px 5px; cursor:pointer; transition:border-color .15s ease, background .15s ease, color .15s ease; } .ds-layer-btn:hover{ border-color:var(--border,#7C6E5C); } .ds-layer-btn.active{ background:var(--zinc,#3A7080); color:var(--bone,#F4ECDB); border-color:var(--zinc,#3A7080); } /* ── Drawer grid overlay (on the page, behind dossier) ── */ .ds-grid-overlay{ position:absolute; inset:0; z-index:0; pointer-events:none; opacity:0; transition:opacity .25s ease; background-image: linear-gradient(to right, color-mix(in srgb, var(--ink,#241F1A) 7%, transparent) 1px, transparent 1px), linear-gradient(to bottom, color-mix(in srgb, var(--ink,#241F1A) 7%, transparent) 1px, transparent 1px); background-size:8px 8px; } .ds-grid-overlay.visible{ opacity:1; } /* ── ScrollTrigger Reveal Targets (hidden until scrolled into view) ── */ .sr-reveal{ will-change:transform,opacity; } /* ── Scroll Rail (reading trace along dossier right edge) ── */ .ds-rail{ position:absolute; top:12px; bottom:12px; right:12px; z-index:5; width:5px; pointer-events:none; opacity:0; transition:opacity .35s ease; } body.reading .ds-rail{ opacity:1; } .ds-rail .ds-rail-track{ position:absolute; inset:0; background:repeating-linear-gradient(to bottom, var(--border-dim,#C7B79F) 0 1px, transparent 1px 24px); opacity:.4; } .ds-rail .ds-rail-fill{ position:absolute; top:0; left:1px; width:2px; height:0%; background:var(--pigment,#B5443B); opacity:.7; transition:height .15s ease-out; } .ds-rail .ds-rail-dot{ position:absolute; left:-2px; width:6px; height:6px; border-radius:50%; background:var(--pigment,#B5443B); top:0; transition:top .1s linear; box-shadow:0 0 6px color-mix(in srgb, var(--pigment,#B5443B) 50%, transparent); } .ds-rail .ds-rail-pct{ position:absolute; right:14px; top:0; font-family:var(--mono,'Departure Mono',monospace); font-size:8px; letter-spacing:.08em; color:var(--zinc-dim,#6E8A8E); opacity:0; transition:opacity .3s ease; pointer-events:none; } .ds-rail .ds-rail-pct.ds-rail-visible{ opacity:.8; } /* ── Furthest-read marker (ghosted tick at deepest scroll point) ── */ .ds-rail .ds-rail-furthest{ position:absolute; left:-3px; width:10px; height:1.5px; background:var(--zinc-dim,#6E8A8E); border-radius:1px; opacity:0; transition:opacity .5s ease; pointer-events:none; z-index:3; } body.reading .ds-rail .ds-rail-furthest{ opacity:.45; } /* Hide scroll rail when trace layer is off */ body.trace-off .ds-rail{ display:none !important; } /* ── Annotations off: hide stamps in the drawer ── */ body.annotations-off .ds-mark{ opacity:0 !important; pointer-events:none !important; } /* ── Loupe Inspect Mode (circular magnifier) ──────────────── */ .ds-loupe{ position:fixed; top:0; left:0; z-index:170; width:220px; height:220px; pointer-events:none; opacity:0; transition:opacity .18s ease; clip-path:circle(50%); overflow:hidden; border:3px solid var(--zinc,#3A7080); background:var(--bone,#F4ECDB); box-shadow:0 20px 50px -12px rgba(36,31,26,.55), inset 0 0 0 2px rgba(255,255,255,.3); will-change:transform,opacity; } .ds-loupe.active{ opacity:1; } /* Glass glare on the magnifier surface */ .ds-loupe:after{ content:""; position:absolute; inset:0; border-radius:50%; pointer-events:none; background:radial-gradient(55% 45% at 32% 25%, rgba(255,255,255,.25), transparent 60%); z-index:2; } /* Inner container holds the cloned dossier content at 2x scale */ .ds-loupe .ds-loupe-inner{ position:absolute; inset:0; overflow:hidden; } .ds-loupe .ds-loupe-inner .dossier{ width:100%; height:auto; min-height:100%; transform-origin:0 0; } /* Loupe toggle button (in ds-bar) */ .ds-loupe-btn{ font-family:var(--mono,'Departure Mono',monospace); font-size:8px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft,#4A4138); background:transparent; border:1px solid transparent; padding:2px 5px; cursor:pointer; transition:border-color .15s ease, background .15s ease, color .15s ease; } .ds-loupe-btn:hover{ border-color:var(--border,#7C6E5C); } .ds-loupe-btn.active{ background:var(--zinc,#3A7080); color:var(--bone,#F4ECDB); border-color:var(--zinc,#3A7080); } @media (prefers-reduced-motion: reduce){ .ds-loupe{ display:none !important; } } /* ── Stamp Toolbar (floating above dossier content, visible only when reading) ── */ .ds-bar{ position:absolute; top:14px; right:14px; z-index:12; display:none; align-items:center; gap:4px; background:var(--bone,#F4ECDB); border:1px solid var(--border,#7C6E5C); padding:4px 8px; box-shadow:0 4px 12px -6px rgba(36,31,26,.45); pointer-events:auto; } body.reading .ds-bar{ display:flex; } .ds-bar .ds-label{ font-family:var(--mono,'Departure Mono',monospace); font-size:8px; letter-spacing:.16em; text-transform:uppercase; color:var(--zinc-dim,#6E8A8E); margin-right:2px; } .ds-bar .ds-btn{ font-family:var(--mono,'Departure Mono',monospace); font-size:8px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft,#4A4138); background:transparent; border:1px solid transparent; padding:2px 5px; cursor:pointer; transition:border-color .15s ease, background .15s ease, color .15s ease; } .ds-bar .ds-btn:hover{ border-color:var(--border,#7C6E5C); } .ds-bar .ds-btn.active{ background:var(--pigment,#B5443B); color:var(--bone,#F4ECDB); border-color:var(--pigment,#B5443B); } .ds-bar .ds-divider{ width:1px; height:14px; background:var(--border-dim,#C7B79F); margin:0 4px; } .ds-bar .ds-count{ font-family:var(--mono,'Departure Mono',monospace); font-size:8px; letter-spacing:.1em; color:var(--zinc-dim,#6E8A8E); min-width:14px; text-align:center; } .ds-bar .ds-clear{ font-family:var(--mono,'Departure Mono',monospace); font-size:9px; color:var(--pigment,#B5443B); background:transparent; border:1px solid transparent; padding:2px 5px; cursor:pointer; opacity:.6; transition:opacity .15s ease, border-color .15s ease; } .ds-bar .ds-clear:hover{ opacity:1; border-color:var(--pigment,#B5443B); } /* ── Stamp marks (red rubber stamps on the dossier) ── */ .ds-mark{ position:absolute; z-index:11; pointer-events:auto; cursor:pointer; font-family:var(--mono,'Departure Mono',monospace); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--pigment,#B5443B); border:1.5px solid var(--pigment,#B5443B); padding:3px 7px; transform:translate(-50%,-50%) rotate(var(--ds-rot,-6deg)); opacity:0; /* GSAP animates to .82 on drop; reduced-motion gets instant .82 via gsap.fromTo or stays 0 if no gsap (not visible but won't flash) */ background:transparent; filter:url(#ink-bleed); transition:filter .25s ease; } .ds-mark:hover{ filter:url(#ink-bleed) brightness(1.2); } /* === editorial hand (pencil-holding, reaches in from right) === */ #hand{position:fixed;left:50%;top:0;width:120px;height:auto;margin-left:-60px;z-index:300;pointer-events:none;opacity:0; filter:drop-shadow(0 6px 10px rgba(36,31,26,.25))} @media (max-width:820px){ .folder{height:52vh} .cover .cthumb{display:none} #hand{width:92px;margin-left:-46px} } /* ── Mobile (≤640px): single-column dossier, smaller hero, stacked project cards ── */ @media (max-width:640px){ .dossier{ grid-template-columns:1fr; background:none; padding-top:48px; padding-bottom:60px; column-gap:0; } .sun-drawer-active .hero{ grid-column:1; height:140px; margin-bottom:18px; } .hero .htitle h1{ font-size:clamp(26px,6.5vw,40px); } .hero .hcut{ width:80px; height:80px; margin-top:-40px; right:4%; } .hero .tintblock{ inset:10px 30% 10px 0; } .manifest{ grid-column:1; position:static; margin-bottom:18px; } .manifest::before,.manifest::after{ width:12px; height:12px; margin-bottom:10px; } .manifest::after{ margin:10px 0 0; } .study{ grid-column:1; } .study .lede{ font-size:14px; } .study .pq{ font-size:clamp(17px,4vw,22px); padding:4px 0 4px 12px; margin:18px 0; } .study .body{ font-size:13px; } .callout{ padding:10px 12px; margin:12px 0 16px; } .callout .co-text{ font-size:clamp(13px,3.5vw,16px); } .floatcut{ display:none !important; } .col-guide{ display:none; } .hfig-grid{ grid-template-columns:1fr; gap:12px; } .hfig-card .hfig-portrait{ height:130px; } .hfig-card .hfig-name{ font-size:11px; } .hfig-card .hfig-bio{ font-size:11px; } .lineage-divider .lineage-label{ font-size:7px; letter-spacing:.18em; } .pcard-grid{ grid-template-columns:1fr; gap:10px; } .cert-head,.cert-row{ grid-template-columns:1fr auto; font-size:8px; } .cert-year{ display:none; } .tl-entry{ gap:10px; } .tl-date{ flex:0 0 52px; font-size:8px; } .tl-title{ font-size:11px; } .tl-desc{ font-size:12px; } .col-meta{ grid-template-columns:1fr; gap:2px; } .col-label{ min-width:auto; } .col-note{ text-align:left; } .ds-bar{ flex-wrap:wrap; justify-content:center; max-width:calc(100vw - 28px); padding:3px 6px; } .ds-bar .ds-label{ display:none; } .ds-bar .ds-btn{ font-size:7px; padding:2px 4px; } .ds-bar .ds-clear{ font-size:8px; } .surface{ inset:4px; } .fileback{ top:10px; left:10px; font-size:8px; padding:4px 8px; gap:3px; } } @media (max-width:480px){ .surface{ inset:2px; } .dossier{ padding:36px 16px 50px; } .sun-drawer-active .hero{ height:120px; } .hero .hcut{ width:60px; height:60px; margin-top:-30px; } } /* === theme toggle (Sun-only): the moon asset, top-right, switches to Moon === */ .sun-drawer-toggle{position:fixed;top:16px;right:16px;z-index:400;width:54px;height:54px;border-radius:50%; display:none;align-items:center;justify-content:center;cursor:pointer;padding:0; background:var(--bone,#F4ECDB);border:1px solid var(--border,#7C6E5C); box-shadow:0 6px 18px -8px rgba(36,31,26,.5);transition:transform .2s ease, box-shadow .2s ease} [data-theme="sun"] .sun-drawer-toggle{display:flex} .sun-drawer-toggle:hover{transform:scale(1.08);box-shadow:0 10px 24px -8px rgba(36,31,26,.55)} .sun-drawer-toggle .tog-moon{width:40px;height:40px;filter:drop-shadow(0 1px 2px rgba(36,31,26,.35));transition:transform .25s ease} .sun-drawer-toggle:hover .tog-moon{transform:rotate(-10deg)} .sun-drawer-toggle .tog-arrow{position:absolute;right:-4px;bottom:-4px;width:20px;height:20px; fill:none;stroke:var(--pigment,#B5443B);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round; background:var(--bone,#F4ECDB);border-radius:50%;opacity:0;transform:translate(-4px,4px) scale(.7); transition:opacity .2s ease, transform .2s ease} .sun-drawer-toggle:hover .tog-arrow{opacity:1;transform:translate(0,0) scale(1)} .sun-drawer-toggle::after{content:attr(data-tooltip);position:absolute;top:50%;right:64px;transform:translateY(-50%); font-family:var(--kicker,'Archivo',sans-serif);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink,#241F1A); background:var(--bone,#F4ECDB);border:1px solid var(--border,#7C6E5C);padding:5px 9px;white-space:nowrap; opacity:0;pointer-events:none;box-shadow:0 4px 12px -8px rgba(36,31,26,.5);transition:opacity .2s ease} .sun-drawer-toggle:hover::after{opacity:1}