/* Composition uses the reference's rem grid. Manrope/Inter retain Jeremy's previous typography. */
@font-face{font-family:Manrope;src:url('assets/fonts/manrope.woff2') format('woff2');font-weight:400 800;font-display:swap}
@font-face{font-family:Inter;src:url('assets/fonts/inter.woff2') format('woff2');font-weight:400 700;font-display:swap}
:root{
  --display:Manrope,Arial,sans-serif;--body:Inter,Arial,sans-serif;
  --shell:88rem;--gut:5.5rem;--bar:3.5rem;
  --wall:#dad4cf;--wall-hi:#e4dfdb;--casing:#f2efec;--wood:#c2ae98;
}
html{font-size:16px;scrollbar-width:none;-webkit-font-smoothing:antialiased}
@media(min-width:1920.01px){html{font-size:calc(16px + (100vw - 1920px)*.005555)}}
html::-webkit-scrollbar{display:none}
body{font-family:var(--body);font-weight:400}
h1,h2,h3,.calendar-word,.door-plate{font-family:var(--display)}
@media(max-width:1920px){html{font-size:.833333333vw}}
@media(max-width:1440px){html{font-size:1.111111111vw}}
@media(max-width:1024px){html{font-size:1.5625vw}}
@media(max-width:640px){html{font-size:4.444444444vw}}
.shell{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:1.25rem}
@media(min-width:640px){.shell{padding-inline:2rem}}
@media(min-width:1024px){.shell{padding-inline:var(--gut)}}

/* Header: all text sits on the same horizontal grid as the hero. */
.header{position:fixed;inset:0 0 auto;z-index:40;transition:background .35s,box-shadow .35s}
.header.is-scrolled{background:var(--paper);box-shadow:0 1px 0 var(--line)}
.header-shell{display:flex;align-items:center;gap:1.4rem;width:100%;max-width:var(--shell);margin:auto;padding:1.5rem var(--gut);font-size:1rem;min-height:5.45rem;transition:padding .35s}
.header.is-scrolled .header-shell{padding-block:.85rem;min-height:4.15rem}
.home-link{display:flex;align-items:center;white-space:nowrap;min-height:2.4rem}
.mobile-name{display:none}
.desktop-nav{display:flex;align-items:center;gap:1.4rem;white-space:nowrap}
.desktop-nav a,.desktop-nav button{display:flex;align-items:center;min-height:2.4rem;padding:0;font-size:1rem;font-weight:400;position:relative}
.desktop-nav a:after,.desktop-nav button:after{content:"";position:absolute;left:0;right:0;bottom:.15rem;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .25s var(--ease)}
.desktop-nav a:hover:after,.desktop-nav button:hover:after{transform:scaleX(1)}
.menu-toggle{display:none;align-items:center;gap:.5rem;padding:.6rem 1.1rem;border:1px solid var(--line);border-radius:.875rem;min-height:2.6rem;font-size:.875rem;text-transform:uppercase;letter-spacing:.05em}
.menu-toggle i{width:1rem;height:.5rem;border-top:1px solid;border-bottom:1px solid;display:block}
.mobile-menu{position:fixed;inset:5.5rem 0 0;z-index:39;background:var(--paper);padding:2rem var(--gut);overflow-y:auto;overscroll-behavior:contain}
.mobile-menu nav{display:flex;flex-direction:column;gap:.5rem}
.mobile-menu a,.mobile-menu nav>button{display:block;text-align:left;font:500 2.25rem/1.2 var(--display);letter-spacing:-.04em;padding:.6rem 0}
.mobile-menu nav>button{display:flex;justify-content:space-between}
.mobile-menu>p{margin-top:2rem;color:var(--muted);font-size:.75rem}
@media(max-width:1199.98px){
  .header-shell{padding-inline:2rem;gap:1rem;justify-content:space-between}
  .desktop-nav,.home-link{display:none}.menu-toggle{display:flex;order:-1}
}
@media(max-width:639.98px){
  .header-shell{padding:1.25rem;min-height:5rem}
  .header.is-scrolled .header-shell{padding-inline:1.25rem}
  .menu-toggle{padding:.6rem 1.1rem}.menu-toggle>span{display:none}
  .mobile-menu{padding:2rem 1.25rem}.mobile-menu a,.mobile-menu nav>button{font-size:2rem}
}

/* Hero: 12 columns, reference-sized copy, calendar and waist-up portrait. */
.hero{--fig-h:min(27rem,calc((100vw - 2.5rem)*1033/801));position:relative;z-index:2;isolation:isolate;overflow:hidden;border-radius:0 0 2rem 2rem;min-height:100svh;display:flex;flex-direction:column;background:radial-gradient(120% 90% at 62% 30%,var(--hero-top),var(--hero-mid) 48%,var(--hero-bottom));box-shadow:0 1px 0 #1a18181a,0 1.75rem 3rem -1.5rem #1a18184d}
.hero-vignette{position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 50% 10%,#f0ece859,transparent 75%);pointer-events:none}
.hero-content{position:relative;z-index:3;flex:1;display:flex;flex-direction:column;gap:2rem;padding-top:7rem;padding-bottom:calc(var(--fig-h) + 1.25rem);pointer-events:none}
.hero-copy{position:relative;display:flex;flex-direction:column;gap:1.75rem;min-width:0;pointer-events:none}
.hero-copy a,.hero-copy button,.calendar{pointer-events:auto}
.hero-copy>.eyebrow{margin:0;font-size:.875rem;line-height:1.285714;font-weight:500;gap:.5rem}
.hero-copy>.eyebrow:before{width:.375rem;height:.375rem}
.hero h1{margin:0;font-size:2.625rem;font-weight:600;line-height:.98;letter-spacing:-.02em;text-wrap:balance}
.greeting,.hero h1 .soft{display:block}
.hero h1 .soft{color:color-mix(in srgb,var(--ink) 50%,transparent)}
.hero-description{max-width:28rem;margin:0;font-size:1rem;line-height:1.65;color:var(--muted);text-wrap:pretty;pointer-events:auto}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem}
.pill{display:inline-flex;align-items:center;justify-content:center;gap:.75rem;border-radius:999px;font-size:.875rem;line-height:1.2;font-weight:500;padding:.875rem 1.75rem;min-height:3rem;white-space:nowrap;border:1px solid transparent;transition:scale .32s var(--ease),background .25s}
.pill:hover{scale:1.04}
.pill.primary{background:var(--ink);color:var(--paper);padding:.375rem .375rem .375rem 1.5rem;border:0}
.pill i{display:grid;place-items:center;width:2.25rem;height:2.25rem;border-radius:50%;background:var(--paper);color:var(--ink);font-style:normal}
.pill svg{width:1rem;height:1rem;transition:transform .3s var(--ease)}
.pill:hover svg{transform:translateX(.1875rem)}
.pill.outline{border-color:var(--line)}.pill.outline:hover{background:#c4b0b02e}
.portrait{--portrait-scale:1.4;--portrait-shift:.035;--portrait-top:-.056041667;position:absolute;z-index:2;bottom:var(--bar);left:50%;translate:-50% 0;height:var(--fig-h);aspect-ratio:801/1033;overflow:hidden;pointer-events:auto}
.portrait>img{position:absolute;display:block;max-width:none;width:calc(var(--portrait-scale)*100%);height:calc(var(--portrait-scale)*100%);left:calc((1 - var(--portrait-scale))*50% + var(--portrait-shift)*100%);top:calc(var(--portrait-top)*100%);object-fit:contain;object-position:50% 0;filter:grayscale(1)}
.portrait>canvas{position:absolute;inset:0;display:block;width:100%;height:100%;pointer-events:none;visibility:hidden}
.portrait.canvas-ready>canvas{visibility:visible}
.portrait.canvas-ready>img{opacity:0}
.hero-bar{position:relative;z-index:3;height:var(--bar);flex:none;display:flex;align-items:center;justify-content:flex-end;gap:.75rem;border-top:1px solid color-mix(in srgb,var(--ink) 10%,transparent);font-size:.75rem;font-weight:500;line-height:1.2;text-transform:uppercase;letter-spacing:.025em;color:color-mix(in srgb,var(--ink) 72%,transparent)}
.hero-bar>a{display:flex;align-items:center;gap:.5rem;min-height:2.75rem}.hero-bar>a>span{font-size:1rem}
@media(min-width:640px){.hero h1{font-size:3.5rem}}
@media(min-width:768px){.hero h1{font-size:4.25rem}}
@media(min-width:640px) and (max-width:1023.98px){.hero{--fig-h:min(43rem,calc((100vw - 4rem)*1033/801))}.hero-copy{padding-left:1.5rem}}
@media(min-width:1024px){
  .hero-content{display:grid;min-height:calc(100lvh - var(--bar));grid-template-columns:repeat(12,1fr);align-content:center;gap:2.5rem;padding-top:7rem;padding-bottom:4rem}
  .hero-copy{grid-column:1/span 7}.hero h1{font-size:4.75rem}
  .portrait{left:auto;translate:none;right:calc(max(0px,(100% - var(--shell))/2) + var(--gut));height:min(calc(100% - var(--bar) - 6rem),58rem,calc((min(100vw,var(--shell)) - 2*var(--gut))*.44*1033/801))}
}
/* Enlarge the whole desktop frame so the face rises while the hand-safe crop stays intact. */
@media(min-width:1200px){
  .portrait{height:min(calc(100% - var(--bar) - 6rem),66.7rem,calc((min(100vw,var(--shell)) - 2*var(--gut))*.506*1033/801))}
}
@media(max-width:639.98px){.hero-bar{font-size:.625rem}.hero-copy>.eyebrow{line-height:1.32}}

/* Desk calendar: physical page edges, aligned punched holes and separate metal rings. */
.calendar-line{display:block;padding-top:.34em;margin-top:.1em;padding-bottom:.42em}
.calendar{--calendar-width:8.583em;display:inline-block;position:relative;font-size:.9em;perspective:14em;perspective-origin:30% 0;vertical-align:top}
.calendar-body{position:relative;display:block;width:var(--calendar-width);height:1.72em;transform:rotateX(10deg) rotateY(-9deg);transform-style:preserve-3d;transition:width .5s var(--soft)}
.calendar-stand{position:absolute;left:.2em;right:-.14em;top:.28em;bottom:-.4em;border-radius:.26em;background:linear-gradient(165deg,#3a3a3a,#141414 40%,#050505);box-shadow:0 .5em .9em -.35em #0009,inset 0 .02em 0 #ffffff1f;transform:translateZ(-.12em)}
.calendar-paper{position:absolute;inset:0;border-radius:.2em;background:linear-gradient(#fdfcf9,#f3f1ec);color:#0a0a0a;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.calendar-paper.beneath{background:linear-gradient(#fbfaf7,#f2f0eb);box-shadow:0 .045em 0 #d8d4cb,0 .08em 0 #f6f4ef,0 .115em 0 #d0cbc1,0 .15em 0 #f2f0ea,0 .185em 0 #c8c3b8,0 .22em 0 #e9e6df,0 .255em 0 #aaa498,0 .45em .6em -.2em #0006}
.calendar-word{position:absolute;inset:0;display:flex;align-items:center;padding:.2em .4em 0;font-size:1em;font-weight:700;letter-spacing:-.035em;line-height:1;white-space:nowrap}
.calendar-paper small{position:absolute;right:.42em;bottom:.2em;font-family:var(--body);font-size:.15em;font-weight:500;letter-spacing:.08em;color:#0a0a0a6b;line-height:1;font-variant-numeric:tabular-nums}
.calendar-leaf{position:absolute;inset:0;transform-origin:50% 0;transform-style:preserve-3d;transform:translateZ(.004em);z-index:2}
.calendar-paper.front{box-shadow:inset 0 -.015em 0 #0000000f}
.calendar-paper.back{transform:rotateX(180deg);background:linear-gradient(0deg,#e9e6df,#d9d5cc)}
.calendar-holes{position:absolute;top:.09em;left:.32em;right:.32em;height:.075em;display:flex;justify-content:space-between}
.calendar-holes i{display:block;width:.075em;height:.075em;border-radius:50%;background:#1b1b1b;box-shadow:inset 0 .01em .01em #ffffff4d}
.calendar-shade{position:absolute;inset:0;border-radius:inherit;opacity:0;pointer-events:none;background:linear-gradient(#0008,#00000014 70%,transparent)}
.calendar-rings{position:absolute;top:-.27em;left:.32em;right:.32em;height:.42em;display:flex;justify-content:space-between;transform:translateZ(.05em);pointer-events:none;z-index:4}
.calendar-rings i{display:block;position:relative;width:.075em;height:.42em}
.calendar-rings i:before{content:"";position:absolute;left:-.065em;right:-.065em;top:0;bottom:0;border-radius:.2em;border:.04em solid #a9a9a9;border-left-color:#ededed;border-top-color:#f6f6f6;border-right-color:#6f6f6f;border-bottom-color:#8a8a8a;filter:drop-shadow(.01em .025em .015em #0006)}
.calendar-measure{position:absolute;visibility:hidden;white-space:nowrap;font:700 1em/1 var(--display);letter-spacing:-.035em;pointer-events:none}

/* A small landscape switch: day on the right, night on the left, as in the reference. */
.theme-switch{display:none;align-items:center;justify-content:center;flex:none;margin-left:auto}
.js .theme-switch{display:flex}
.theme-toggle{display:grid;place-items:center;position:relative;flex:none;width:80px;height:44px;min-height:44px;padding:0;border:0;border-radius:999px;cursor:pointer;touch-action:manipulation}
.theme-toggle:focus-visible{outline:2px solid #a4552c;outline-offset:4px}
.theme-switch-visual{position:relative;display:block;isolation:isolate;width:72px;aspect-ratio:120/56;overflow:hidden;border-radius:999px;background:#f2df72;box-shadow:0 7px 10px -7px #172a345c,0 2px 3px #172a341c;transition:box-shadow .25s,background .4s}
.theme-switch-visual:after{content:"";position:absolute;inset:0;z-index:3;border:1px solid #ffffff30;border-radius:inherit;box-shadow:inset 0 1px 2px #1c2d3c12;pointer-events:none}
.switch-scene{position:absolute;inset:0;background-position:center;background-size:100% 100%;background-repeat:no-repeat;transition:opacity .42s ease,transform .55s var(--soft);pointer-events:none}
.switch-scene--day{background-image:url('assets/images/theme-switch-day.svg');opacity:1;transform:translateY(0)}
.switch-scene--night{background-image:url('assets/images/theme-switch-night.svg');opacity:0;transform:translateY(5%)}
.switch-thumb{position:absolute;z-index:2;left:3.333333%;top:7.142857%;width:40%;height:85.714286%;border-radius:50%;background:#f9f9f7;box-shadow:0 1px 3px #11253126,inset 0 1px 1px #fff,inset 0 -1px 1px #d5dadd66;transform:translateX(133.333333%);transition:transform .5s cubic-bezier(.22,1.3,.36,1),box-shadow .25s;pointer-events:none}
html[data-theme=dark] .theme-switch-visual{background:#132f3e;box-shadow:0 7px 10px -7px #0009,0 2px 3px #0004}
html[data-theme=dark] .switch-scene--day{opacity:0;transform:translateY(-5%)}
html[data-theme=dark] .switch-scene--night{opacity:1;transform:translateY(0)}
html[data-theme=dark] .switch-thumb{transform:translateX(0)}
@media(hover:hover) and (pointer:fine){.theme-toggle:hover .theme-switch-visual{box-shadow:0 9px 12px -7px #172a3470,0 2px 4px #172a3426}}
@media(max-width:1199.98px){.header-shell{gap:.8rem}}
@media(max-width:639.98px){.header-shell{gap:.5rem}.theme-toggle{width:72px;height:44px}.theme-switch-visual{width:64px}}
@media(prefers-reduced-motion:reduce){.theme-switch-visual,.switch-scene,.switch-thumb{transition:none}}
@media(forced-colors:active){.theme-switch-visual{forced-color-adjust:none}.theme-toggle{outline:1px solid ButtonText}.theme-toggle:focus-visible{outline:3px solid Highlight}}

/* Door wall: tall 1:2.25 proportions and a clean backdrop without a floor plane. */
.doors{position:relative;z-index:1;isolation:isolate;margin-top:-2rem;padding-top:7.25rem;overflow:clip;background:linear-gradient(#0000000d,transparent 22%,transparent 78%,#00000012),linear-gradient(var(--wall-hi),var(--wall) 55%)}
.door-grain{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.04;background-size:150px 150px;background-position:0 0;background-repeat:repeat;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150' viewBox='0 0 150 150'%3E%3Cfilter id='n' filterUnits='userSpaceOnUse' primitiveUnits='userSpaceOnUse' x='0' y='0' width='150' height='150'%3E%3CfeTurbulence x='0' y='0' width='150' height='150' type='fractalNoise' baseFrequency='.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='150' height='150' filter='url(%23n)'/%3E%3C/svg%3E")}
/* Continuous skirting behind the casings, fixed while the mobile door row moves. */
.doors-pin{position:relative}
.doors-pin:after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5rem;z-index:0;pointer-events:none;background:linear-gradient(180deg,#ffffff8c 0,#ffffff8c 1px,#0000000f 2px,transparent 4px,transparent 7px,#0000000d 8px,#ffffff40 9px,transparent 11px,#00000014 100%),var(--door-base);box-shadow:0 -1px 0 #00000012,0 -.5rem .9rem -.45rem #00000029}
html[data-theme=dark] .doors-pin:after{background:linear-gradient(180deg,#ffffff0f 0,#ffffff0f 1px,#0000004d 2px,transparent 4px,transparent 7px,#00000040 8px,transparent 11px,#0000004d 100%),var(--door-base);box-shadow:0 -1px 0 #0006,0 -.5rem .9rem -.45rem #00000080}
.doors-shell{position:relative;display:flex;flex-direction:column;align-items:center;gap:3.6rem;padding-bottom:0}
.door-dots{display:none}
.doors h2{position:relative;z-index:3;margin:0;padding:.08em 0 .14em;font-size:4.75rem;font-weight:700;letter-spacing:-.03em;line-height:.95;text-align:center;white-space:nowrap}
.mobile-break,.doors-mobile-hint{display:none}
.door-row{--door-row-gap:3rem;--door-info-gap:clamp(3rem,5.5vw,6rem);position:relative;z-index:2;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--door-row-gap);align-items:end;width:100%;margin:0;list-style:none;padding:0}
.door-unit{position:relative;container-type:inline-size;min-width:0;width:100%;max-width:min(17.5rem,calc((100svh - 19.5rem)/2.25));justify-self:center;--angle:0deg;z-index:1}
.doorway{position:relative;display:block;width:100%;aspect-ratio:1/2.25;border-radius:50cqi 50cqi 0 0;isolation:isolate;transition:opacity .5s var(--soft);outline-offset:.6rem;-webkit-tap-highlight-color:transparent}
.door-frame{position:absolute;inset:0;border-radius:50cqi 50cqi 0 0;background:linear-gradient(90deg,#00000012,#ffffff2e 3cqi,transparent 6cqi,transparent calc(100% - 6cqi),#0000000d calc(100% - 3cqi),#0000001f),linear-gradient(#ffffff59,transparent 30%),var(--casing);box-shadow:inset 0 0 0 1.1cqi #ffffff47,inset 0 0 0 1.5cqi #00000012,inset 0 0 0 3.6cqi #ffffff1f,inset 0 0 0 4.1cqi #00000014,0 0 0 1px #0000000f,1.5cqi 2.5cqi 4.5cqi #1a181833,-.5cqi 1cqi 3cqi #1a181814}
.door-frame:before{content:"";position:absolute;left:-1cqi;right:-1cqi;bottom:0;height:11cqi;z-index:1;background:var(--casing);mask:linear-gradient(90deg,#000 0 8.5cqi,transparent 8.5cqi calc(100% - 8.5cqi),#000 calc(100% - 8.5cqi));box-shadow:inset 0 .5cqi 0 #fff6,inset 0 1cqi 0 #00000014,inset 0 -.6cqi 1cqi #0000001a}
.door-frame:after{content:"";position:absolute;left:4.6cqi;right:4.6cqi;top:4.6cqi;bottom:0;border:.45cqi solid #00000012;border-bottom:0;border-radius:45.4cqi 45.4cqi 0 0}
.door-opening{position:absolute;left:7.5cqi;right:7.5cqi;top:7.5cqi;bottom:0;perspective:160cqi;perspective-origin:50% 42%}
.door-room{position:absolute;inset:0;border-radius:42.5cqi 42.5cqi 0 0;background:var(--room);box-shadow:inset 2cqi 0 4cqi #1a18181a,inset 0 2cqi 4cqi #1a18181a}
.door-leaf{position:absolute;inset:0;border-radius:42.5cqi 42.5cqi 0 0;background:linear-gradient(100deg,#ffffff1a,transparent 30%,#0000002e),var(--door);box-shadow:inset 0 0 0 .3cqi #00000047,inset .6cqi 0 0 #ffffff0d;transform:rotateY(var(--angle));transform-origin:0 50%;transform-style:preserve-3d;will-change:transform}
.door-reeds{position:absolute;left:8cqi;right:8cqi;top:8cqi;bottom:9cqi;border-radius:34.5cqi 34.5cqi 1.2cqi 1.2cqi;background:repeating-linear-gradient(90deg,#ffffff13 0,#ffffff05 1cqi,#00000021 2.1cqi,#ffffff13 2.8cqi);box-shadow:inset 0 0 0 .3cqi #00000029,inset 1cqi 1.2cqi 2cqi #00000047,inset -.6cqi -.6cqi 1cqi #ffffff12}
.door-plate{position:absolute;left:50%;right:auto;top:31%;translate:-50% -50%;width:58cqi;min-height:17.6cqi;display:grid;place-items:center;padding:2.6cqi 4cqi;border-radius:.9cqi;z-index:1;text-align:center;font-size:5.4cqi;font-weight:600;line-height:1.15;letter-spacing:.055em;text-transform:uppercase;color:#2b2112;text-shadow:0 .28cqi 0 #ffeeC48c,0 -.15cqi 0 #0004;background:linear-gradient(160deg,#efdfb2,#c9a866 28%,#e3cc92 48%,#a98747 72%,#d2b67a);box-shadow:0 .5cqi 1cqi #0006,inset 0 .3cqi 0 #fffae4b3,inset 0 -.3cqi 0 #583e1673;transform:translateZ(.2cqi)}
.door-plate:before,.door-plate:after{content:"";position:absolute;top:50%;width:1.6cqi;height:1.6cqi;border-radius:50%;translate:0 -50%;background:radial-gradient(circle at 35% 30%,#fff4cf,#9c7b3d 65%,#6d5027);box-shadow:0 .2cqi .2cqi #0004}
.door-plate:before{left:1.5cqi}.door-plate:after{right:1.5cqi}
.door-handle{position:absolute;right:7cqi;top:59%;width:9.4cqi;height:9.4cqi;border-radius:50%;z-index:1;background:radial-gradient(circle at 36% 30%,#fff6dc,#e6cb8a 14%,#b8934c 40%,#80602a 70%,#4d3816);box-shadow:0 0 0 .35cqi #00000038,.9cqi 1.5cqi 2cqi #00000073,inset -.7cqi -.9cqi 1.1cqi #281a068c,inset .5cqi .6cqi .8cqi #fff8de80;transform:translateZ(.6cqi)}
.door-handle>i{position:absolute;right:3.6cqi;top:2.75cqi;width:23cqi;height:3.9cqi;border-radius:2.4cqi 1.6cqi 1.6cqi 2.4cqi;transform-origin:calc(100% - 1.9cqi) 50%;background:linear-gradient(#fff5d6,#ecd395 16%,#c39d55 42%,#8e6a2d 72%,#5c4119);box-shadow:.3cqi 2.4cqi 2.2cqi #0006,0 .4cqi .4cqi #0004,inset 0 -.3cqi .4cqi #32200873;transition:transform .18s cubic-bezier(.3,.7,.4,1)}
.door-handle>i:before{content:"";position:absolute;left:-.4cqi;top:-.45cqi;width:7cqi;height:4.8cqi;border-radius:2.4cqi;background:linear-gradient(#fff5d6,#e8cd8c 18%,#bf9850 45%,#86632a 75%,#5c4119);box-shadow:0 .5cqi .6cqi #0005}
.door-handle>i:after{content:"";position:absolute;left:1.4cqi;right:2.6cqi;top:.55cqi;height:.55cqi;border-radius:1cqi;background:linear-gradient(90deg,#fffff0f2,#fffae159)}
.door-handle>b{position:absolute;left:50%;top:calc(100% + 6.5cqi);width:5.4cqi;height:10.5cqi;margin-left:-2.7cqi;border-radius:2.7cqi;background:radial-gradient(ellipse at 38% 28%,#fff3d0,#d9b86f 22%,#a07b37 55%,#5e4419);box-shadow:0 0 0 .3cqi #0003,.6cqi 1cqi 1.4cqi #0007,inset -.4cqi -.6cqi .8cqi #281a0680,inset .3cqi .4cqi .5cqi #fff8de73}
.door-handle>b:before{content:"";position:absolute;left:50%;top:30%;width:2cqi;height:2cqi;margin-left:-1cqi;border-radius:50%;background:#140d04}
.door-handle>b:after{content:"";position:absolute;left:50%;top:calc(30% + 1.3cqi);width:1cqi;height:3cqi;margin-left:-.5cqi;border-radius:0 0 .3cqi .3cqi;background:#140d04}
.door-unit.is-entering .door-handle>i{transform:rotate(-32deg)}
.door-edge{position:absolute;right:0;top:40cqi;bottom:0;width:3.4cqi;transform:rotateY(-90deg);transform-origin:100% 50%;background:color-mix(in srgb,var(--door-dark) 62%,#000)}
.door-leaf-shade{position:absolute;inset:0;border-radius:inherit;background:linear-gradient(90deg,#0002,transparent 35%);pointer-events:none}
.door-unit.is-active .door-frame{box-shadow:0 0 0 1px #0000000f,2cqi 5cqi 9cqi #1a18184d,-1cqi 2cqi 5cqi #00000014,inset 0 1px 0 #ffffff8c}
.door-unit.is-active .door-leaf{box-shadow:inset 0 0 0 .35cqi #0003,inset -2.5cqi 0 3cqi #0000002e,4cqi 0 7cqi #00000073}
.doors.is-focused .door-unit:not(.is-active) .doorway{opacity:.03}
/* Desktop details are children of the selected unit, so the gap follows that door. */
.door-info{position:absolute;z-index:3;top:50%;right:calc(100% + var(--door-info-gap,1rem));width:min(22rem,calc(200% + var(--door-row-gap,3rem)*2 - var(--door-info-gap,1rem)));visibility:hidden;pointer-events:none;opacity:0;transform:translateY(calc(-50% + .6rem));transition:opacity .35s,transform .5s var(--soft)}
.door-info.is-visible{visibility:visible;pointer-events:auto;opacity:1;transform:translateY(-50%)}.door-info.on-right{right:auto;left:calc(100% + var(--door-info-gap,1rem))}
.door-info h3{font-size:2.25rem;line-height:1.05;font-weight:600;letter-spacing:-.02em;margin:0 0 .45rem}
.door-info>p{font:700 .8125rem/1.5 Consolas,monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:1.15rem}
.door-info ul{list-style:none;padding:0;display:grid;gap:.5rem;font-size:1rem;line-height:1.35}
.door-info li{display:flex;align-items:center;gap:.6rem}.door-info li:before{content:"✓";font-size:.75rem;display:grid;place-items:center;width:1.2rem;height:1.2rem;border:1px solid var(--line);border-radius:50%;flex:none}
.door-scroll-controls{display:none}
@media(min-width:640px) and (max-width:1023.98px){.doors h2{font-size:4rem}.door-row{--door-row-gap:1.5rem;--door-info-gap:clamp(1.5rem,3.5vw,2.5rem)}.door-info h3{font-size:2rem}.door-info ul{font-size:.875rem}}
@media(max-width:639.98px){
  .doors{padding-top:0;height:calc(100svh + 3*55svh)}
  .doors-pin{--unit-width:min(56vw,calc((100svh - 28.2rem)/2.25));position:sticky;top:0;height:100svh;padding-top:4.75rem;display:flex;flex-direction:column;justify-content:flex-end;overflow:clip}
  .doors-shell{gap:1rem;align-items:stretch;padding-bottom:0}
  .doors h2{font-size:2rem;line-height:.95;white-space:normal;text-align:left;max-width:100%;align-self:flex-start;margin:.25rem 0 .5rem}.mobile-break{display:block}
  .door-info,.door-info.is-visible{display:block;position:relative;top:auto;left:auto!important;right:auto!important;width:auto;max-width:100%;margin:.9rem 0 0;padding-top:1rem;border-top:1px solid var(--line);min-height:12.5rem;visibility:visible;pointer-events:auto;opacity:1;transform:none}
  .door-info h3{font-size:1.5rem;line-height:1.1;margin-bottom:.35rem}.door-info>p{margin-bottom:.85rem;font-size:.625rem;letter-spacing:.08em;line-height:1.4}.door-info ul{font-size:.875rem;line-height:1.35;gap:.45rem}.door-info li{gap:.6rem}.door-info li:before{width:.95rem;height:.95rem;font-size:.55rem;background:#6b4f4f;color:#fff;border:0}
  .door-dots{display:flex;gap:.4rem;margin:.25rem 0 0}
  .door-dots button{position:relative;display:block;width:.4rem;height:.4rem;padding:0;border-radius:999px;background:color-mix(in srgb,var(--ink) 20%,transparent);transition:width .35s var(--soft),background .35s}
  .door-dots button:after{content:"";position:absolute;inset:-.6rem -.15rem}
  .door-dots button[aria-current=true]{width:1.3rem;background:var(--ink)}
  .door-row{display:flex;gap:calc(50vw - var(--unit-width)/2 + .75rem);width:calc(100% + 2.5rem);max-width:none;margin-inline:-1.25rem;margin-top:-1rem;overflow:visible;padding:2rem calc(50% - var(--unit-width)/2) 0;will-change:transform}
  .door-unit{flex:0 0 var(--unit-width);width:var(--unit-width);max-width:none;scroll-snap-align:center}
  .doors.is-focused .door-unit:not(.is-active) .doorway{opacity:1}
  .door-cursor{display:none}
}
@media(max-width:639.98px) and (max-height:740px){
  .doors-pin{--unit-width:min(56vw,calc((100svh - 22rem)/2.25))}
  .door-info{min-height:5.5rem}.door-info ul{display:none}
}

/* Story: native-flow chapters beside a sticky clock, with the reference's scale. */
.story{position:relative;height:auto;border-top:1px solid #1a18181a;background:radial-gradient(50% 45% at 0 30%,#e27a3a24,transparent 74%),radial-gradient(45% 45% at 100% 70%,#5c84ca20,transparent 74%),repeating-linear-gradient(42deg,#1a181806 0 1px,transparent 1px .75rem),linear-gradient(176deg,#fbf9f7,#f7f4f1 54%,#f3efeb);box-shadow:inset 0 1.75rem 2.25rem -1.75rem #1a181824}
.story-pin{position:relative;height:auto;min-height:0;display:block;padding:7rem 0 2.5rem;overflow:visible}
.story-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:3.5rem;align-items:start;padding-block:0;position:relative;z-index:1}
.story-left{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;margin-top:-7rem;padding-top:3rem;isolation:isolate}
.story-left>.eyebrow{margin:0;font-size:.875rem;font-weight:500}
.story-left h2{margin-top:.6rem;font-size:3.4rem;font-weight:700;line-height:.98;letter-spacing:-.035em}
.story-year{margin:1.5rem 0 0 -.04em;font:700 clamp(5.5rem,11.5vw,11.5rem)/1 var(--display);letter-spacing:-.06em;font-variant-numeric:tabular-nums;overflow:hidden}
.story-year>span{display:block}
.story-date{margin-top:.9rem;font:600 .8125rem/1.4 Consolas,monospace;letter-spacing:.12em;text-transform:uppercase;color:#5c4242}
.story-position{display:flex;align-items:center;gap:.6rem;margin-top:1.5rem;font-size:.875rem;font-weight:600;max-width:none;width:100%}
.story-position>span{white-space:nowrap;flex:none}
.story-position>i{display:block;flex:1;max-width:11rem;height:2px;margin-left:.6rem;border-radius:2px;background:color-mix(in srgb,var(--ink) 12%,transparent);overflow:hidden}
.story-position>i>b{display:block;width:100%;height:100%;background:var(--ink);transform-origin:left;transform:scaleX(.25)}
.story-position>div{display:flex;gap:.3rem;flex:none}.story-position button{min-width:2.25rem;min-height:2.25rem;font-size:1.0625rem}
.story-window{height:auto;overflow:visible;mask-image:none;-webkit-mask-image:none}
.story-track{padding:24vh 0 4vh 2.75rem;transform:none!important;list-style:none;position:relative;will-change:auto}
.story-track:before{left:.45rem;top:calc(24vh + 3rem);bottom:7rem;width:2px;background:var(--line)}
.story-track>li{position:relative;min-height:0;padding:3rem 0;opacity:.52;transition:opacity .45s}
.story-track>li.is-active{opacity:1}
.story-track>li:before{left:-2.65rem;top:3.25rem;width:.8rem;height:.8rem;border-radius:50%;background:var(--ink);box-shadow:0 0 0 .35rem #1a181814}
.story-track>li.is-active:before{background:#7fb069;box-shadow:0 0 0 .4rem #7fb0692e}
.story-track>li>span{display:block;margin-bottom:.7rem;font:600 .75rem/1.4 Consolas,monospace;letter-spacing:.12em;text-transform:uppercase}
.story-track h3{font-size:2.15rem;font-weight:600;line-height:1.08;letter-spacing:-.02em;margin:0 0 .6rem}
.story-track p{font-size:1.0625rem;font-weight:400;line-height:1.55;max-width:46ch;margin:0 0 1rem}
.story-track .story-place{font-size:1rem;font-weight:500;line-height:1.5;color:var(--muted);margin-bottom:1.1rem}
.story-track ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:.55rem;font-size:1rem;line-height:1.55}
.story-track ul li{position:relative;padding-left:1.1rem}.story-track ul li:before{content:"";position:absolute;left:0;top:.72em;width:.45rem;height:1.5px;background:currentColor;opacity:.45}
html[data-theme=dark] .story{background:radial-gradient(ellipse at 0 35%,#a4552c1f,transparent 60%),radial-gradient(#e8e4e00e 1px,transparent 1.4px) center/1.6rem 1.6rem,#171515}
html[data-theme=dark] .story-date{color:#d9c6c6}
@media(min-width:768px) and (max-width:1023.98px){.story-left h2{font-size:2.4rem}.story-track h3{font-size:1.9rem}}
@media(max-width:767.98px){
  .story-pin{padding:0 0 1.5rem}.story-layout{grid-template-columns:1fr;gap:0}
  .story-left{top:0;height:auto;margin:0 -1.25rem;padding:calc(4.4rem + 1rem) 1.25rem .9rem;z-index:3;justify-content:flex-start;background:#f4f1ee;border-bottom:1px solid #1a18181a;box-shadow:0 .625rem 1rem -.75rem #1a181840}
  .story-left>.eyebrow{display:none}.story-left h2{margin-top:0;font-size:1.6rem}
  .story-year{font-size:clamp(3.4rem,17vw,4.5rem);margin-top:.35rem}
  .story-date{margin-top:.25rem;font-size:.6875rem}.story-position{margin-top:.5rem;font-size:.8125rem}
  .story-window{margin:0}.story-track{padding:1rem 0 6vh 2.1rem}.story-track:before{top:2.75rem}
  .story-track>li{padding:1.75rem 0}.story-track>li:before{left:-2rem;top:2rem}
  .story-track>li>span{font-size:.6875rem}.story-track h3{font-size:1.45rem}.story-track p{font-size:.9375rem;margin-bottom:.6rem}.story-track ul{font-size:.9375rem}
  html[data-theme=dark] .story-left{background:#171515}
}
html[data-theme=dark]{--wall:#1f1c1c;--wall-hi:#262222;--casing:#3a3434;--wood:#2b221c}
html[data-theme=dark] .hero-vignette{background:radial-gradient(ellipse at 50% 10%,#0003,transparent 75%)}
html[data-theme=dark] .hero{box-shadow:0 1px 0 #e8e4e014,0 1.75rem 3rem -1.25rem #000d}

html[data-theme=dark] .door-frame{background:linear-gradient(90deg,#0004,#ffffff0a 3cqi,transparent 6cqi,transparent calc(100% - 6cqi),#0005),linear-gradient(#ffffff0d,transparent 30%),var(--casing);box-shadow:inset 0 0 0 1.1cqi #ffffff0d,inset 0 0 0 1.5cqi #0004,inset 0 0 0 3.6cqi #ffffff08,inset 0 0 0 4.1cqi #00000038,0 0 0 1px #0006,1.5cqi 2.5cqi 5cqi #0009}
html[data-theme=dark] .door-leaf{background:linear-gradient(100deg,#ffffff0d,transparent 30%,#0005),var(--door-dark)}
.door-transition{background:var(--wall)}
@media(max-width:639.98px){
  html:not(.js) .doors{height:auto}
  html:not(.js) .doors-pin{position:relative;height:auto;padding-bottom:0}
  html:not(.js) .door-info,html:not(.js) .door-dots{display:none}
  html:not(.js) .door-row{overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:1rem}
}
@media(prefers-reduced-motion:reduce){.portrait>img{opacity:1!important}.portrait>canvas{display:none}.door-leaf{transform:none!important}.pill:hover{scale:1}.story-track>li{opacity:1}}
@media(forced-colors:active){.calendar-paper,.door-plate,.door-leaf{forced-color-adjust:none}.doorway{outline:1px solid CanvasText}}