@font-face{font-family:'Newsreader';font-style:italic;font-weight:400 600;font-display:swap;src:url(/assets/fonts/newsreader-italic-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Newsreader';font-style:italic;font-weight:400 600;font-display:swap;src:url(/assets/fonts/newsreader-italic-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:400 700;font-display:swap;src:url(/assets/fonts/playfair-display-normal-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:400 700;font-display:swap;src:url(/assets/fonts/playfair-display-normal-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Source Serif 4';font-style:italic;font-weight:400 500;font-display:swap;src:url(/assets/fonts/source-serif-4-italic-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Source Serif 4';font-style:italic;font-weight:400 500;font-display:swap;src:url(/assets/fonts/source-serif-4-italic-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Source Serif 4';font-style:normal;font-weight:400 600;font-display:swap;src:url(/assets/fonts/source-serif-4-normal-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Source Serif 4';font-style:normal;font-weight:400 600;font-display:swap;src:url(/assets/fonts/source-serif-4-normal-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
:root{
  /* Layout: a private study seen through a gilt frame. The hero is one lit room (headline left, medallion right,
     the table and its objects below); an ivory leaf introduces the clientele; eight framed rooms hang as a gallery;
     the estate at night closes the page. One look only, by design: onyx, ivory, brass, oxblood, burgundy, emerald. */
  --onyx:#0A0807; --char:#15100D; --umber:#221913;
  --bone:#EFE7D6; --ivory:#F4EDDD; --aged:#E0D3B8; --smoke:#CFC5B4;
  --ink:#1A130E; --sepia:#6E5226;
  --gold-d:#7A5A26; --gold:#C49B55; --gold-l:#E9CF95; --gold-w:#FFF1CC;
  --ox:#5E1B17; --burgundy:#7A2A2A; --wax:#8E231C; --emerald:#12332B;
  --line:rgba(233,207,149,.2); --line-2:rgba(233,207,149,.48);
  --brass:linear-gradient(100deg,#7A5A26 0%,#C9A35C 14%,#F6E3AE 31%,#B98F4A 50%,#EBD292 68%,#9B7634 85%,#C9A35C 100%);
  --foil:linear-gradient(100deg,#8C6A2F 0%,#D9B872 22%,#FFF1CC 42%,#C49B55 60%,#F3DFA6 78%,#8C6A2F 100%);
  --foil-ink:linear-gradient(100deg,#6E5020 0%,#A8843F 25%,#C9A35C 45%,#8C6A2F 62%,#B98F4A 80%,#6E5020 100%);

  --display:"Playfair Display","Didot","Bodoni 72",Georgia,"Times New Roman",serif;
  --body:"Source Serif 4","Source Serif Pro",Georgia,"Times New Roman",serif;
  /* every italic line and word that is set in the display face: a plainer, more readable italic than Playfair's own */
  --ital:"Newsreader","Source Serif 4",Georgia,"Times New Roman",serif;

  --s-1:.8rem;
  --s0:clamp(1rem,.96rem + .2vw,1.125rem);
  --s1:clamp(1.1rem,1.02rem + .35vw,1.3rem);
  --s2:clamp(1.5rem,1.2rem + 1.3vw,2.3rem);
  --s3:clamp(2rem,1.3rem + 2.9vw,3.7rem);
  --s4:clamp(2.55rem,1.1rem + 3.8vw,4.7rem);

  --gutter:clamp(1.25rem,4.5vw,4.5rem);
  --hd-h:5.1rem;
  --ease:cubic-bezier(.16,1,.3,1);
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (min-width:1800px){html{font-size:106.25%}}
@media (min-width:2200px){html{font-size:118.75%}}
@media (min-width:3000px){html{font-size:137.5%}}
body{
  margin:0;background:var(--onyx);color:var(--bone);
  font-family:var(--body);font-weight:400;font-size:var(--s0);line-height:1.62;
  -webkit-font-smoothing:antialiased;overflow-x:clip;
}
img,svg,canvas{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3{margin:0;font-family:var(--display);font-weight:500;line-height:1.04;letter-spacing:-.01em;text-wrap:balance}
p{margin:0}
::selection{background:rgba(196,155,85,.4)}
:focus-visible{outline:2px solid var(--gold-l);outline-offset:3px}
.skip{position:absolute;left:1rem;top:-6rem;z-index:300;padding:.7rem 1rem;background:var(--gold-l);color:var(--ink);text-decoration:none}
.skip:focus{top:calc(1rem + env(safe-area-inset-top,0px))}
.wrap{width:100%;max-width:calc(1480px + 2*var(--gutter));margin-inline:auto;padding-left:max(var(--gutter),env(safe-area-inset-left,0px));padding-right:max(var(--gutter),env(safe-area-inset-right,0px));position:relative}
.grain{position:fixed;inset:0;z-index:140;pointer-events:none;opacity:.055;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0/240px 240px}

/* ---------- the mark ---------- */
.jd{--jw:#fff;--jk:#121313;--j1:#67717B;--j2:#434D57}
.jd--gilt{--jw:url(#gold);--j1:#B98F4A;--j2:#8C6A2F;--jk:#0A0807}
.jd--ink{--jw:#2A1D10;--jk:#2A1D10;--j1:#8E826F;--j2:#B0A592}
.foil{background:var(--foil);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:sheen 8s ease-in-out infinite}
@keyframes sheen{0%,100%{background-position:0 0}50%{background-position:100% 0}}
@keyframes spin{to{rotate:360deg}}

/* ---------- doors ---------- */
.doors{display:none}
.js .doors{display:block;position:fixed;inset:0;z-index:200;pointer-events:none}
.doors__l,.doors__r{position:absolute;top:0;bottom:0;width:50.5%;background:linear-gradient(90deg,#070504,#120D0A);transition:translate 1.25s cubic-bezier(.7,0,.2,1)}
.doors__l{left:0;border-right:1px solid var(--gold-d);box-shadow:inset -14px 0 0 -13px var(--line-2)}
.doors__r{right:0;border-left:1px solid var(--gold-d);background:linear-gradient(270deg,#070504,#120D0A);box-shadow:inset 14px 0 0 -13px var(--line-2)}
.doors__seal{position:absolute;left:50%;top:50%;width:clamp(5.5rem,14vw,8rem);aspect-ratio:1;translate:-50% -50%;border-radius:50%;background:#070504;display:grid;place-items:center;box-shadow:0 0 0 1px var(--gold),0 0 0 6px #070504,0 0 0 7px var(--gold-d),0 20px 50px #000;transition:opacity .5s,scale .9s var(--ease)}
.doors__seal svg{width:56%;height:auto;translate:0 -3%}
.doors:not(.is-closed) .doors__l{translate:-101% 0}
.doors:not(.is-closed) .doors__r{translate:101% 0}
.doors:not(.is-closed) .doors__seal{opacity:0;scale:.86}

/* ---------- header ---------- */
.hd{position:fixed;inset:0 0 auto 0;z-index:60;padding-top:env(safe-area-inset-top,0px);transition:background-color .5s var(--ease),box-shadow .5s}
.hd__in{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;min-height:var(--hd-h)}
.hd::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,rgba(233,207,149,0),var(--line-2) 18%,var(--line-2) 82%,rgba(233,207,149,0));opacity:0;transition:opacity .5s}
.hd.is-scrolled{background:rgba(10,8,7,.86);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);box-shadow:0 18px 40px -24px #000}
.hd.is-scrolled::after{opacity:1}
.brand{display:inline-flex;align-items:center;gap:.9rem;text-decoration:none;color:var(--bone);flex:none}
.brand__medal{width:3rem;height:3rem;border-radius:50%;background:#000;display:grid;place-items:center;flex:none;box-shadow:0 0 0 1px var(--gold),0 0 0 4px #050403,0 0 0 5px var(--gold-d),0 8px 18px rgba(0,0,0,.6);transition:box-shadow .5s,rotate .8s var(--ease)}
.brand__medal svg{width:60%;height:auto;translate:0 -3%}
.brand:hover .brand__medal{box-shadow:0 0 0 1px var(--gold-l),0 0 0 4px #050403,0 0 0 5px var(--gold),0 0 26px rgba(233,207,149,.35)}
.brand__text b{display:block;font:600 1.16rem/1 var(--display);letter-spacing:.17em;white-space:nowrap}
.brand__text i{display:block;font:500 .56rem/1 var(--body);letter-spacing:.38em;color:var(--gold);margin-top:.5rem;font-style:normal;white-space:nowrap}
.hd__nav{display:none;gap:clamp(1.1rem,2vw,2.3rem);margin-left:auto;margin-right:max(.5rem,calc(27.1vw - 13rem))}
.hd__nav a{font:400 .95rem/1 var(--body);letter-spacing:.03em;color:var(--smoke);text-decoration:none;padding:.7rem 0;position:relative;transition:color .3s}
.hd__nav a::before{content:"";position:absolute;left:0;right:0;bottom:.25rem;height:1px;background:var(--gold-l);scale:0 1;transform-origin:0 50%;transition:scale .5s var(--ease)}
.hd__nav a::after{content:"";position:absolute;left:50%;top:-.05rem;width:5px;height:5px;background:var(--gold-l);rotate:45deg;translate:-50% -4px;opacity:0;transition:opacity .35s,translate .45s var(--ease)}
.hd__nav a:hover{color:var(--gold-w)}
.hd__nav a:hover::before{scale:1 1}
.hd__nav a:hover::after{opacity:1;translate:-50% 0}
.hd__right{display:flex;align-items:center;gap:.8rem}
.hd__right .btn-brass{display:none}
.hd__menu{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:.7rem;padding:.75rem 1rem;border:1px solid var(--line-2);font:500 .78rem/1 var(--body);letter-spacing:.18em;text-transform:uppercase;color:var(--bone);background:rgba(10,8,7,.35)}
.hd__menu:focus-visible{outline:2px solid var(--gold-l);outline-offset:3px}
.hd__menu i{display:block;width:1.1rem;height:1px;background:currentColor;box-shadow:0 -5px 0 currentColor,0 5px 0 currentColor}
.hd .wrap,.menu__top.wrap{max-width:none;padding-left:max(var(--gutter),4.4vw,env(safe-area-inset-left,0px));padding-right:max(var(--gutter),4.4vw,env(safe-area-inset-right,0px))}
@media (min-width:1120px){.hd__nav{display:flex}.hd__right .btn-brass{display:inline-flex}.hd__menu{display:none}}
@media (max-width:420px){.brand__text b{font-size:1rem;letter-spacing:.14em}.brand__text i{font-size:.5rem;letter-spacing:.3em}.brand__medal{width:2.6rem;height:2.6rem}.hd__menu span{display:none}.hd__menu{padding:.95rem .85rem}}

/* ---------- menu (small screens) ---------- */
.menu{position:fixed;inset:0;z-index:120;display:grid;grid-template-rows:auto 1fr auto;background:#0A0807 radial-gradient(90% 60% at 80% 10%,#2B1F17 0%,rgba(43,31,23,0) 62%);padding:env(safe-area-inset-top,0px) 0 env(safe-area-inset-bottom,0px);visibility:hidden;opacity:0;transition:opacity .45s var(--ease),visibility 0s .45s;overflow-y:auto}
.menu.is-open{visibility:visible;opacity:1;transition:opacity .45s var(--ease)}
.menu__top{display:flex;align-items:center;justify-content:space-between;min-height:var(--hd-h)}
.menu__body{display:grid;align-content:center;gap:2.5rem;padding-block:1.5rem}
.menu__list{display:grid}
.menu__list a{display:flex;align-items:baseline;gap:1rem;padding:.55rem 0;font:500 clamp(1.9rem,8.5vw,3.2rem)/1.1 var(--display);text-decoration:none;color:var(--bone);border-bottom:1px solid var(--line);opacity:0;translate:0 1.2rem;transition:opacity .6s var(--ease),translate .7s var(--ease),color .3s,padding-left .5s var(--ease)}
.menu__list a small{font:500 .7rem/1 var(--body);letter-spacing:.3em;color:var(--gold);min-width:2.2rem}
.menu__list a:hover{color:var(--gold-l);padding-left:.6rem}
.menu.is-open .menu__list a{opacity:1;translate:0 0}
.menu.is-open .menu__list a:nth-child(2){transition-delay:.05s}.menu.is-open .menu__list a:nth-child(3){transition-delay:.1s}.menu.is-open .menu__list a:nth-child(4){transition-delay:.15s}.menu.is-open .menu__list a:nth-child(5){transition-delay:.2s}.menu.is-open .menu__list a:nth-child(6){transition-delay:.25s}.menu.is-open .menu__list a:nth-child(7){transition-delay:.3s}
.menu__list a.is-cta{font-style:italic;font-family:var(--ital);color:var(--gold-l)}
.menu__aside{display:grid;gap:.6rem;color:var(--smoke);font-size:.98rem;max-width:34ch}
.menu__aside a{color:var(--gold-l)}
.menu__foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.4rem 1.5rem;padding-block:1.1rem;border-top:1px solid var(--line);font:italic 400 .95rem/1.3 var(--ital);color:var(--gold)}

/* ---------- brass ---------- */
.btn-brass{
  --tx:0px;--ty:0px;
  display:inline-flex;align-items:center;gap:.9rem;padding:1.1rem 1.7rem;color:#2A1D08;text-decoration:none;
  font:600 .76rem/1 var(--body);letter-spacing:.2em;text-transform:uppercase;border:0;cursor:pointer;position:relative;overflow:hidden;
  background:var(--brass);background-size:220% 100%;text-shadow:0 1px 0 rgba(255,240,200,.55);
  box-shadow:inset 0 1px 0 rgba(255,248,220,.9),inset 0 -2px 0 rgba(70,48,12,.65),inset 0 0 0 1px rgba(90,63,20,.7),inset 0 0 0 4px rgba(255,241,204,.2),inset 0 0 0 5px rgba(90,63,20,.35),0 14px 26px -12px rgba(0,0,0,.9);
  translate:var(--tx) var(--ty);
  transition:background-position .9s var(--ease),translate .45s var(--ease),box-shadow .35s var(--ease);
}
.btn-brass::after{content:"";position:absolute;top:-20%;bottom:-20%;left:-40%;width:28%;background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,252,235,.75),rgba(255,255,255,0));rotate:8deg;translate:0 0;opacity:0;pointer-events:none}
.btn-brass:hover{background-position:100% 0;box-shadow:inset 0 1px 0 rgba(255,248,220,.9),inset 0 -2px 0 rgba(70,48,12,.65),inset 0 0 0 1px rgba(90,63,20,.7),inset 0 0 0 4px rgba(255,241,204,.2),inset 0 0 0 5px rgba(90,63,20,.35),0 20px 34px -12px rgba(0,0,0,.95),0 0 34px -6px rgba(233,207,149,.5)}
.btn-brass:hover::after{animation:glint .9s var(--ease)}
@keyframes glint{0%{translate:0 0;opacity:0}20%{opacity:1}100%{translate:620% 0;opacity:0}}
.btn-brass:active{translate:var(--tx) calc(var(--ty) + 1px)}
.btn-brass svg{width:2.1rem;height:.62rem;flex:none;transition:translate .5s var(--ease)}
.btn-brass:hover svg{translate:.35rem 0}
.btn-brass--sm{padding:.9rem 1.3rem;font-size:.7rem}
.tlink{display:inline-flex;align-items:center;gap:.8rem;padding:.5rem 0;font:600 .76rem/1.25 var(--body);letter-spacing:.2em;text-transform:uppercase;color:var(--gold-l);text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;transition:color .3s,background-size .6s var(--ease)}
.tlink svg{width:2.1rem;height:.62rem;flex:none;transition:translate .5s var(--ease)}
.tlink:hover{color:var(--gold-w);background-size:0 1px;background-position:100% 100%}
.tlink:hover svg{translate:.5rem 0}

/* ---------- reveal ---------- */
.js .rv{opacity:0;translate:0 1.6rem;transition:opacity 1s var(--ease),translate 1.1s var(--ease)}
.js .rv.in{opacity:1;translate:0 0}
.js .rv[data-d="1"]{transition-delay:.1s}.js .rv[data-d="2"]{transition-delay:.2s}.js .rv[data-d="3"]{transition-delay:.3s}.js .rv[data-d="4"]{transition-delay:.4s}

/* ================================================================ HERO */
/* Two arrangements. Wide screens get the poster: the room is one 16:9 plate pinned to the bottom edge, and the medallion and
   plaque hang in the plate's own coordinates (.stage) so they always sit on the rayed wall panel. Type follows --tu so the
   copy ends above the table. Everything else gets the column: copy, medallion, plaque, then the table, with the tall plate
   split in two so the curtain stays at the top and the table at the bottom whatever the height. */
.hero{
  position:relative;isolation:isolate;display:grid;grid-template-rows:auto auto auto;overflow:clip;background:#0D0A08;
  padding-top:calc(var(--hd-h) + env(safe-area-inset-top,0px));
  --lx:70%;--ly:38%;--px:0px;--py:0px;--strip:6.9rem;
  --hg:max(var(--gutter),4.4vw);--fi:clamp(.4rem,.8vw,.8rem);
}
.hero__bg{position:absolute;inset:0 0 var(--strip) 0;z-index:-1;container-type:size;overflow:hidden;background:#0D0A08}
.plate-top{position:absolute;left:0;top:0;width:100%;height:auto;max-width:none;-webkit-mask:linear-gradient(180deg,#000 0,#000 28%,rgba(0,0,0,0) 46%);mask:linear-gradient(180deg,#000 0,#000 28%,rgba(0,0,0,0) 46%)}
.plate-top img{display:block;width:100%;height:auto;max-width:none}
.scene{position:absolute;left:0;bottom:0;width:100cqw;height:177.78cqw;-webkit-mask:linear-gradient(180deg,rgba(0,0,0,0) 45%,#000 61%);mask:linear-gradient(180deg,rgba(0,0,0,0) 45%,#000 61%)}
.scene picture,.scene picture img{position:absolute;inset:0;width:100%;height:100%;max-width:none}
.scene picture img{object-fit:cover}
.js .scene picture img,.js .plate-top img{opacity:0;scale:1.06;transition:opacity 1.6s ease,scale 3.2s var(--ease)}
.js.is-open .scene picture img,.js.is-open .plate-top img{opacity:1;scale:1}
.spot{position:absolute;left:calc(var(--mx,var(--x)) * 1%);top:calc(var(--my,var(--y)) * 1%);pointer-events:none}
.glow{width:calc(var(--mw,var(--w,13)) * 1%);aspect-ratio:1;translate:-50% -50%;border-radius:50%;mix-blend-mode:screen;background:radial-gradient(circle,rgba(255,196,120,.4),rgba(255,170,90,.13) 34%,rgba(255,170,90,0) 66%);animation:flicker 4.3s infinite}
.glow--b{animation-duration:3.1s;animation-delay:-1.3s}
.glow--lamp{background:radial-gradient(circle,rgba(255,214,140,.3),rgba(120,200,120,.08) 40%,rgba(255,200,120,0) 68%);animation:breathe 7s ease-in-out infinite}
.glow--moon{display:none;background:radial-gradient(circle,rgba(190,210,255,.24),rgba(160,190,255,.06) 40%,rgba(160,190,255,0) 66%);animation:breathe 11s ease-in-out infinite}
@keyframes flicker{0%,100%{opacity:.86;scale:1}8%{opacity:1;scale:1.05}15%{opacity:.7;scale:.97}23%{opacity:.95;scale:1.02}37%{opacity:.78;scale:.99}46%{opacity:1;scale:1.06}58%{opacity:.82;scale:.98}71%{opacity:.96;scale:1.03}84%{opacity:.74;scale:.97}}
@keyframes breathe{0%,100%{opacity:.6;scale:.96}50%{opacity:1;scale:1.05}}
.smoke{width:0;height:0}
.smoke i{position:absolute;left:0;top:0;width:7cqw;min-width:30px;aspect-ratio:1;translate:-50% -50%;border-radius:50%;background:radial-gradient(circle,rgba(226,216,204,.5),rgba(226,216,204,.14) 40%,rgba(226,216,204,0) 68%);filter:blur(5px);mix-blend-mode:screen;opacity:0;animation:smoke 9s linear infinite}
.smoke i:nth-child(2){animation-delay:-1.8s;animation-duration:10s}
.smoke i:nth-child(3){animation-delay:-3.6s}
.smoke i:nth-child(4){animation-delay:-5.4s;animation-duration:11s}
.smoke i:nth-child(5){animation-delay:-7.2s}
@keyframes smoke{
  0%{translate:-50% -50%;scale:.35;opacity:0}
  12%{opacity:.5}
  40%{translate:calc(-50% - 1.1cqw) calc(-50% - var(--rise,9cqw));scale:1.1;opacity:.36}
  70%{translate:calc(-50% + 1.4cqw) calc(-50% - var(--rise,9cqw) * 1.9);scale:1.9;opacity:.18}
  100%{translate:calc(-50% - .6cqw) calc(-50% - var(--rise,9cqw) * 2.8);scale:2.8;opacity:0}
}
.glint{width:3cqw;min-width:14px;aspect-ratio:1;translate:-50% -50%;background:radial-gradient(circle,#fff 0,rgba(255,236,190,.8) 12%,rgba(255,236,190,0) 55%),conic-gradient(from 0deg,rgba(255,255,255,0) 0 12%,rgba(255,244,214,.9) 12.5%,rgba(255,255,255,0) 13% 37%,rgba(255,244,214,.9) 37.5%,rgba(255,255,255,0) 38% 62%,rgba(255,244,214,.9) 62.5%,rgba(255,255,255,0) 63% 87%,rgba(255,244,214,.9) 87.5%,rgba(255,255,255,0) 88%);border-radius:50%;mix-blend-mode:screen;opacity:0;animation:twinkle 7s ease-in-out infinite 2s}
@keyframes twinkle{0%,78%,100%{opacity:0;scale:.3;rotate:0deg}86%{opacity:1;scale:1;rotate:40deg}94%{opacity:0;scale:.5;rotate:80deg}}
#dust{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;mix-blend-mode:screen}
.hero__shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(7,5,4,.62) 0%,rgba(7,5,4,.4) 14%,rgba(7,5,4,.46) 34%,rgba(7,5,4,.12) 52%,rgba(7,5,4,0) 70%)}
.hero__light{position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;background:radial-gradient(circle 24rem at var(--lx) var(--ly),rgba(255,206,140,.13),rgba(255,206,140,.04) 45%,rgba(255,206,140,0) 70%)}

/* the frame: one fine gilt line, as around the screen in the presentation */
.frame{position:absolute;z-index:4;pointer-events:none;inset:var(--fi);border:1px solid rgba(233,207,149,.62);border-radius:clamp(.45rem,.9vw,.95rem);box-shadow:0 0 0 100vmax #070504,inset 0 0 0 3px rgba(7,5,4,.45),inset 0 0 0 4px rgba(233,207,149,.2)}
.js .frame{border-color:rgba(233,207,149,0);transition:border-color 1.6s ease .5s}
.js.is-open .frame{border-color:rgba(233,207,149,.62)}

.rule{display:block;position:relative;height:9px;background:linear-gradient(90deg,var(--rc,#C49B55) 0%,var(--rc2,#E9CF95) 46%,var(--rc,#C49B55) 70%,rgba(196,155,85,0) 100%) 0 50%/100% 1px no-repeat}
.rule::before{content:"";position:absolute;left:var(--rd,62%);top:50%;width:7px;height:7px;translate:-50% -50%;rotate:45deg;background:var(--rc2,#E9CF95);box-shadow:0 0 0 3px var(--rb,rgba(7,5,4,0))}
.rule::after{content:"";position:absolute;left:0;top:50%;width:34%;height:3px;translate:0 -50%;background:linear-gradient(90deg,var(--rc2,#E9CF95),rgba(233,207,149,0));border-radius:2px;opacity:.9}
.rule--c{background:linear-gradient(90deg,rgba(196,155,85,0),var(--rc,#C49B55) 22%,var(--rc2,#E9CF95) 50%,var(--rc,#C49B55) 78%,rgba(196,155,85,0)) 0 50%/100% 1px no-repeat;--rd:50%}
.rule--c::after{display:none}

.hero__copy{position:relative;z-index:2;min-width:0;padding:clamp(1.5rem,5vw,3rem) max(var(--gutter),env(safe-area-inset-right,0px)) 2.2rem max(var(--gutter),env(safe-area-inset-left,0px))}
.display{font:500 clamp(2.4rem,10.6vw,4.6rem)/1.03 var(--display);letter-spacing:-.012em;margin:0;color:#F7F1E6;text-shadow:0 2px 30px rgba(0,0,0,.7)}
.display .ln{display:block;overflow:hidden;padding-bottom:.16em;margin-bottom:-.16em}
.display .ln > span{display:block}
.display em{font-style:italic;font-family:var(--ital);font-weight:500;padding-right:.08em}
.display .foil{background-image:linear-gradient(100deg,#C9A35C 0%,#E6C988 22%,#FFF1CC 44%,#DDB86E 60%,#F3DFA6 80%,#C9A35C 100%)}
.js .display .ln > span{translate:0 112%;transition:translate 1.25s var(--ease)}
.js.is-open .display .ln > span{translate:0 0}
.js.is-open .display .ln:nth-child(2) > span{transition-delay:.12s}
.js.is-open .display .ln:nth-child(3) > span{transition-delay:.24s}
.hero__rule{width:min(88%,21rem);margin:1.25rem 0 1.15rem}
.lead{font-size:var(--s1);line-height:1.5;color:#EAE1D0;max-width:27em;text-shadow:0 1px 18px rgba(0,0,0,.85)}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:1.1rem 2.2rem;margin-top:1.7rem}
.js .hero__rule,.js .lead,.js .hero .actions{opacity:0;translate:0 1.2rem;transition:opacity 1.1s var(--ease) .45s,translate 1.2s var(--ease) .45s}
.js .lead{transition-delay:.58s}.js .hero .actions{transition-delay:.72s}
.js.is-open .hero__rule,.js.is-open .lead,.js.is-open .hero .actions{opacity:1;translate:0 0}

/* the medallion */
.hero__fg{position:relative;z-index:2;pointer-events:none;padding:.4rem 0 34vw}
.stage{display:grid;justify-items:center}
.exhibit{--D:min(84vw,27rem);position:relative;width:var(--D);display:grid;justify-items:center}
.medal{position:relative;width:100%;aspect-ratio:1;border-radius:50%;perspective:1100px;cursor:pointer;pointer-events:auto;-webkit-tap-highlight-color:transparent}
.js .medal{opacity:0;scale:.9;transition:opacity 1.4s var(--ease) .35s,scale 1.8s var(--ease) .35s}
.js.is-open .medal{opacity:1;scale:1}
.medal__rays{position:absolute;left:-22%;top:-22%;width:144%;height:144%;max-width:none;color:var(--gold);opacity:.3;-webkit-mask:radial-gradient(circle,#000 36%,rgba(0,0,0,0) 68%);mask:radial-gradient(circle,#000 36%,rgba(0,0,0,0) 68%);animation:spin 240s linear infinite;pointer-events:none}
.medal__halo{position:absolute;inset:-7%;border-radius:50%;background:radial-gradient(circle,rgba(233,207,149,.17),rgba(233,207,149,.05) 48%,rgba(233,207,149,0) 68%);animation:breathe 9s ease-in-out infinite;pointer-events:none}
.medal__tilt{position:absolute;inset:0;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .6s var(--ease);filter:drop-shadow(0 calc(var(--D) * .045) calc(var(--D) * .055) rgba(0,0,0,.82))}
.medal__img{position:absolute;inset:0;width:100%;height:100%;-webkit-user-drag:none;user-select:none}
.medal__hat{position:absolute;left:40.039%;top:32.227%;width:19.922%;height:auto;max-width:none;transform-origin:84% 90%;transition:transform .7s cubic-bezier(.3,1.5,.5,1);-webkit-user-drag:none;user-select:none}
.medal:hover .medal__hat,.medal.is-tipped .medal__hat{transform:translate(3%,-14%) rotate(12deg)}
.medal__spec{position:absolute;inset:0;pointer-events:none;mix-blend-mode:overlay;-webkit-mask:url(/img/medallion-640.webp) center/100% 100% no-repeat;mask:url(/img/medallion-640.webp) center/100% 100% no-repeat;background:radial-gradient(circle 38% at var(--sx,32%) var(--sy,24%),rgba(255,250,232,.75),rgba(255,244,214,.2) 45%,rgba(255,244,214,0) 75%)}
.medal__sweep{position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;-webkit-mask:url(/img/medallion-640.webp) center/100% 100% no-repeat;mask:url(/img/medallion-640.webp) center/100% 100% no-repeat;background:linear-gradient(105deg,rgba(255,244,214,0) 45%,rgba(255,248,226,.3) 50%,rgba(255,244,214,0) 55%) 0 0/300% 100% no-repeat;animation:sweep 9s ease-in-out infinite 2.5s}
@keyframes sweep{0%,55%{background-position:120% 0}85%,100%{background-position:-60% 0}}
.plaque{
  position:relative;z-index:3;pointer-events:auto;display:block;margin:calc(var(--D) * -.118) 0 0;padding:.72em 1.6em .76em;width:max-content;max-width:min(calc(var(--D) * 1.04),calc(100vw - 2rem));text-align:center;
  font:italic 500 max(1rem,calc(var(--D) * .0445))/1.25 var(--ital);text-wrap:balance;color:#2E2009;text-shadow:0 1px 0 rgba(255,244,210,.6);
  background:repeating-linear-gradient(92deg,rgba(255,255,255,.09) 0 1px,rgba(0,0,0,0) 1px 3px),var(--brass);background-size:auto,220% 100%;
  box-shadow:inset 0 1px 0 rgba(255,248,220,.9),inset 0 -2px 0 rgba(70,48,12,.7),inset 0 0 0 1px rgba(90,63,20,.7),inset 0 0 0 5px rgba(255,241,204,.16),inset 0 0 0 6px rgba(90,63,20,.4),0 22px 34px -16px rgba(0,0,0,.95);
  transition:background-position 1.2s var(--ease);
}
.plaque span{transition:opacity .9s var(--ease),filter .9s var(--ease)}
.plaque:hover{background-position:0 0,100% 0}
.plaque:hover .unseen{opacity:.2;filter:blur(1.2px)}
.plaque__drop{position:relative;z-index:2;width:calc(var(--D) * .27);height:auto;max-width:none;rotate:180deg;margin-top:calc(var(--D) * -.014);filter:drop-shadow(0 -6px 8px rgba(0,0,0,.6));pointer-events:none}
.js .plaque,.js .plaque__drop{opacity:0;translate:0 1rem;transition:opacity 1.1s var(--ease) .9s,translate 1.2s var(--ease) .9s,background-position 1.2s var(--ease)}
.js.is-open .plaque,.js.is-open .plaque__drop{opacity:1;translate:0 0}

/* the bar along the bottom edge */
.hero__strip{position:relative;z-index:3;display:grid;justify-items:center;align-content:center;gap:.25rem;min-height:var(--strip);margin:0 var(--fi) var(--fi);padding:1.5rem 1rem .9rem;text-align:center;font-size:.95rem;line-height:1.4;letter-spacing:.03em;color:#DDD2BF;background:#080605;border-top:1px solid rgba(233,207,149,.5);border-radius:0 0 clamp(.4rem,.85vw,.9rem) clamp(.4rem,.85vw,.9rem)}
.hero__mono{position:absolute;left:50%;top:0;translate:-50% -50%;display:flex;align-items:center;gap:.7rem;color:var(--gold)}
.hero__mono::before,.hero__mono::after{content:"";width:clamp(2rem,9vw,5.5rem);height:7px;background:linear-gradient(90deg,rgba(233,207,149,0),var(--gold)) 0 50%/100% 1px no-repeat,radial-gradient(circle at 100% 50%,var(--gold-l) 0 2.5px,rgba(0,0,0,0) 3px)}
.hero__mono::after{rotate:180deg}
.hero__mono b{width:2.6rem;height:2.6rem;border-radius:50%;display:grid;place-items:center;font:italic 500 1.05rem/1 var(--ital);letter-spacing:-.04em;color:var(--gold-l);background:#090706;box-shadow:0 0 0 1px var(--gold),0 0 0 3px #090706,0 0 0 4px var(--gold-d)}

@media (min-width:860px){
  .hero{
    grid-template-rows:1fr auto;--strip:0px;
    --hh:max(min(100svh,62vw),47.5vw);
    --tu:min(1vw,calc((var(--hh) - 15vw - var(--hd-h)) / 33.8));
    min-height:var(--hh);
  }
  .hero__bg{background:#090706}
  .plate-top{display:none}
  .scene,.stage{position:absolute;left:-1.5cqw;bottom:-.9cqw;width:103cqw;height:57.94cqw;translate:var(--px) var(--py);will-change:translate;-webkit-mask:none;mask:none}
  .scene picture img{-webkit-mask:linear-gradient(180deg,rgba(0,0,0,0) 0,#000 11%);mask:linear-gradient(180deg,rgba(0,0,0,0) 0,#000 11%)}
  .spot{left:calc(var(--x) * 1%);top:calc(var(--y) * 1%)}
  .glow{width:calc(var(--w,13) * 1%)}
  .glow--moon{display:block}
  .smoke i{width:3.4cqw;--rise:5cqw}
  .glint{width:1.5cqw}
  .hero__shade{background:
    linear-gradient(90deg,rgba(7,5,4,.5) 0%,rgba(7,5,4,.34) 24%,rgba(7,5,4,.1) 44%,rgba(7,5,4,0) 56%),
    linear-gradient(180deg,rgba(7,5,4,.72) 0%,rgba(7,5,4,.16) 15%,rgba(7,5,4,0) 26%,rgba(7,5,4,0) 84%,rgba(7,5,4,.42) 100%)}
  .hero__copy{padding:calc(var(--tu) * 1.6) 0 calc(var(--tu) * 2) max(var(--hg),10.4vw,env(safe-area-inset-left,0px));max-width:58vw}
  .display{font-size:max(2.3rem,calc(var(--tu) * 4.97));line-height:1.02}
  .hero__rule{width:calc(var(--tu) * 27.6);margin:calc(var(--tu) * 1.55) 0 calc(var(--tu) * 1.45)}
  .lead{font-size:max(.97rem,calc(var(--tu) * 1.42));line-height:1.47;max-width:max(calc(var(--tu) * 33),22.5rem)}
  .actions{margin-top:calc(var(--tu) * 2.2);gap:1rem clamp(1rem,calc(var(--tu) * 2.2),2.4rem)}
  .hero .btn-brass{padding-inline:clamp(1.1rem,calc(var(--tu) * 1.7),1.7rem)}
  .hero .actions{flex-wrap:nowrap}
  .hero .actions a{white-space:nowrap}
  .hero__fg{position:absolute;inset:0;container-type:size;padding:0}
  .stage{display:block}
  .exhibit{--D:min(38.5cqw,calc((100cqh - 9.4cqw - 1rem) / 1.13));position:absolute;left:75.4%;top:max(calc(22.886cqw - var(--D) / 2),calc(57.04cqw - 100cqh + 1rem));translate:calc(-50% + var(--px) * .5) calc(var(--py) * .5)}
  .medal__rays{opacity:.2}
  .plaque{white-space:nowrap}
  .hero__strip{grid-template-columns:1fr auto 1fr;justify-items:start;align-items:center;gap:1.5rem;min-height:max(3rem,calc(var(--tu) * 3.4));padding:.55rem calc(var(--hg) - var(--fi));text-align:left;background:linear-gradient(180deg,rgba(8,6,5,.66),rgba(8,6,5,.9));-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);font-size:max(.92rem,calc(var(--tu) * 1.08))}
  .hero__strip span:last-child{justify-self:end;text-align:right}
  .hero__mono{position:relative;left:auto;top:auto;translate:0 -6%}
  .hero__mono b{width:max(2.5rem,calc(var(--tu) * 3.1));height:max(2.5rem,calc(var(--tu) * 3.1));font-size:max(1rem,calc(var(--tu) * 1.25))}
  .hero__mono::before,.hero__mono::after{width:clamp(2rem,6vw,6rem)}
}
@media (min-width:860px) and (max-width:1239px){.hero .btn-brass,.hero .tlink{letter-spacing:.15em;gap:.6rem}.hero .btn-brass svg,.hero .tlink svg{width:1.5rem}}
@media (max-width:420px){.actions{gap:.9rem 1.4rem}.btn-brass{padding-inline:1.35rem}}
@media (min-width:860px) and (max-width:999px){.hero{--hh:max(min(100svh,62vw),37rem)}.hero .actions{flex-wrap:wrap}.hero__strip{font-size:.84rem;gap:.8rem;letter-spacing:.02em}.hero__mono::before,.hero__mono::after{width:1.5rem}}
@media (max-height:520px) and (orientation:landscape) and (max-width:859px){.display{font-size:clamp(2.2rem,6.2vw,3.3rem)}.exhibit{--D:min(52vw,24rem)}.hero__fg{padding-bottom:30vw}}

/* ================================================================ TICKER */
.ticker{position:relative;z-index:2;overflow:hidden;background:#080605;border-block:1px solid var(--gold-d);box-shadow:inset 0 5px 0 -4px var(--line-2),inset 0 -5px 0 -4px var(--line-2);padding:1.05rem 0}
.ticker__track{display:flex;align-items:center;gap:2.6rem;width:max-content;animation:ticker 80s linear infinite}
.ticker:hover .ticker__track{animation-play-state:paused}
.ticker span{font:italic 500 clamp(1.05rem,.95rem + .5vw,1.45rem)/1.2 var(--ital);white-space:nowrap;color:var(--bone)}
.ticker svg{width:1.9rem;height:auto;flex:none}
@keyframes ticker{to{translate:-50% 0}}

/* ================================================================ SELECT (ivory leaf) */
.select{position:relative;background:#F4EDDD url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='280'%3E %3Cfilter id='t' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='4' seed='9' stitchTiles='stitch' result='n'/%3E %3CfeDiffuseLighting in='n' surfaceScale='0.55' diffuseConstant='1.0' lighting-color='%23F4EDDD'%3E%3CfeDistantLight azimuth='235' elevation='72'/%3E%3C/feDiffuseLighting%3E%3C/filter%3E %3Crect width='280' height='280' filter='url(%23t)'/%3E%3C/svg%3E");color:var(--ink);overflow:clip}
.select::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(120% 90% at 70% 30%,rgba(255,255,255,.35),rgba(255,255,255,0) 55%),radial-gradient(90% 80% at 0% 100%,rgba(122,90,38,.14),rgba(122,90,38,0) 60%)}
.select__frame{position:absolute;inset:clamp(.55rem,1.15vw,1.05rem);border:1px solid rgba(122,90,38,.45);box-shadow:inset 0 0 0 4px rgba(244,237,221,.6),inset 0 0 0 5px rgba(122,90,38,.2);pointer-events:none}
.select__frame img{position:absolute;width:clamp(3.6rem,8vw,7rem);height:auto;max-width:none;filter:sepia(.2) saturate(.9) brightness(.82)}
.select__frame .c-tl{left:0;top:0;translate:-4% -7%}
.select__frame .c-br{right:0;bottom:0;translate:4% 7%;scale:-1 -1}
.select__grid{display:grid;gap:clamp(2rem,4vw,4rem);padding-block:clamp(4.5rem,11vh,8rem) 0;align-items:start}
.select__head{min-width:0;padding-bottom:clamp(2rem,6vh,5rem)}
.runhead{display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem 1.1rem;margin:0 0 1.5rem;color:var(--sepia)}
.runhead b{font:600 .74rem/1 var(--body);letter-spacing:.32em;text-transform:uppercase}
.runhead span{font:italic 400 1.02rem/1.3 var(--ital);color:#5A4A36}
.h-room{font:500 var(--s3)/1.06 var(--display);letter-spacing:-.012em;max-width:13ch}
.select__rule{width:min(100%,15rem);margin:1.7rem 0 0;--rc:#8C6A2F;--rc2:#6E5020}
.manor{position:relative;margin:1.2rem 0 0 -1.5rem;width:min(118%,31rem);max-width:none;mix-blend-mode:multiply;opacity:.78;-webkit-mask:radial-gradient(ellipse 50% 50% at 50% 52%,#000 46%,rgba(0,0,0,0) 100%);mask:radial-gradient(ellipse 50% 50% at 50% 52%,#000 46%,rgba(0,0,0,0) 100%);transition:opacity 1s,scale 2.4s var(--ease)}
.manor:hover{opacity:1;scale:1.02}
.manor img{width:100%;height:auto}
.select__body{min-width:0;display:grid;gap:1.4rem;align-content:start;padding-bottom:clamp(3rem,9vh,7rem);max-width:34rem}
.select__win{display:flex;align-items:center;gap:1.1rem;margin:0}
.select__win .foil{font:italic 500 clamp(2rem,1.3rem + 2vw,3.1rem)/1.1 var(--ital);white-space:nowrap;background-image:var(--foil-ink);padding-right:.1em}
.stamp{position:relative;width:4.4rem;height:4.4rem;flex:none;border-radius:50%;display:grid;place-items:center;color:var(--sepia);border:1px solid currentColor;box-shadow:inset 0 0 0 3px #F4EDDD,inset 0 0 0 4px rgba(110,82,38,.5);rotate:-8deg;transition:rotate .9s var(--ease)}
.stamp svg{width:54%;height:auto;translate:0 -3%}
.select__win:hover .stamp{rotate:4deg}
.select__body p{color:#3B2E22;font-size:var(--s1);line-height:1.58}
.select__body strong{font-weight:600;color:var(--ink)}
.select .tlink{color:var(--ox)}
.select .tlink:hover{color:var(--wax)}
.bust{position:relative;align-self:end;justify-self:center;width:min(100%,28rem);margin-bottom:-1px;min-width:0}
.bust{-webkit-mask:linear-gradient(90deg,rgba(0,0,0,0) 0,#000 13%,#000 89%,rgba(0,0,0,0) 100%);mask:linear-gradient(90deg,rgba(0,0,0,0) 0,#000 13%,#000 89%,rgba(0,0,0,0) 100%)}
.bust img{width:100%;height:auto;filter:drop-shadow(-18px 22px 30px rgba(74,52,20,.3));translate:0 var(--by,0px);transition:filter 1.2s var(--ease)}
.bust:hover img{filter:drop-shadow(-22px 26px 34px rgba(74,52,20,.42)) contrast(1.05)}
@media (min-width:1000px){.select__grid{grid-template-columns:minmax(0,4.4fr) minmax(0,4.1fr) minmax(0,3.9fr);min-height:36rem}}
/* in the three-column leaf the title is sized to its column, so that it always sets in three lines */
@media (min-width:1000px){.select__h{container-type:inline-size}.select__h .h-room{max-width:none;font-size:min(var(--s3),12cqi)}}
@media (min-width:640px) and (max-width:999px){
  .select__grid{grid-template-columns:minmax(0,1fr) minmax(0,.8fr)}
  .select__body{grid-column:1;padding-bottom:3.5rem}
  .bust{grid-column:2;grid-row:1 / span 2}
  .select__head{padding-bottom:0}
}
@media (max-width:639px){
  .select__head{padding-bottom:0}
  .select__body{padding-bottom:1rem}
  .bust{width:min(78%,19rem)}
  .manor{width:min(112%,26rem);margin-left:-1rem}
}

/* ================================================================ ROOMS */
/* The rooms hang as framed page previews, as on the presentation board: a small page inside each gilt frame, a caption
   underneath (numeral, name, a line from that room). Type inside each page scales with the card (cqw). */
.rooms{position:relative;padding-block:clamp(4rem,10vh,7rem);overflow:clip;background:radial-gradient(42% 64% at 0% 44%,rgba(94,27,23,.5),rgba(94,27,23,0) 70%),radial-gradient(42% 64% at 100% 58%,rgba(94,27,23,.5),rgba(94,27,23,0) 70%),radial-gradient(80% 50% at 50% 0%,#1E1611 0%,rgba(30,22,17,0) 70%),#080605}
.gallery{position:relative;border:1px solid rgba(233,207,149,.5);padding:clamp(2.6rem,4.2vw,3.8rem) clamp(.95rem,2.1vw,2.1rem) clamp(1.5rem,2.6vw,2.4rem);background:rgba(8,6,5,.55);box-shadow:inset 0 0 0 4px rgba(7,5,4,.5),inset 0 0 0 5px rgba(233,207,149,.16),0 40px 80px -50px #000}
.gallery__corner{position:absolute;width:clamp(2.9rem,5.4vw,4.6rem);height:auto;max-width:none;pointer-events:none;filter:drop-shadow(0 4px 6px rgba(0,0,0,.7))}
.gallery__corner.c-tl{left:0;top:0;translate:-9% -11%}
.gallery__corner.c-tr{right:0;top:0;translate:9% -11%;scale:-1 1}
.gallery__corner.c-bl{left:0;bottom:0;translate:-9% 11%;scale:1 -1}
.gallery__corner.c-br{right:0;bottom:0;translate:9% 11%;scale:-1 -1}
.gallery__title{position:absolute;left:50%;top:0;translate:-50% -50%;margin:0;display:flex;align-items:center;gap:1rem;padding:.35rem 1.3rem;background:#0C0908;white-space:nowrap;font:600 .78rem/1 var(--body);letter-spacing:.44em;text-transform:uppercase;color:var(--gold-l)}
.gallery__title span{padding-left:.44em}
.gallery__title::before,.gallery__title::after{content:"";width:6px;height:6px;rotate:45deg;background:var(--gold)}
.rooms__grid{display:grid;gap:clamp(1.5rem,2.3vw,2.2rem) clamp(.95rem,1.5vw,1.4rem);grid-template-columns:repeat(4,minmax(0,1fr))}
.room{--rx:0deg;--ry:0deg;--gx:50%;--gy:50%;--tone:8,6,5;display:grid;align-content:start;gap:.85rem;min-width:0;text-decoration:none;color:var(--bone);container-type:inline-size;perspective:900px;outline-offset:6px}
.room--emerald{--tone:8,25,20}
.room--burgundy{--tone:36,9,10}
.room--paper{--tone:243,235,217}
.room__page{position:relative;display:block;aspect-ratio:11/8;overflow:hidden;isolation:isolate;background:rgb(var(--tone));
  box-shadow:0 0 0 1px rgba(233,207,149,.62),0 0 0 4px #0A0807,0 0 0 5px rgba(233,207,149,.24),0 26px 44px -26px #000;
  transform:rotateX(var(--rx)) rotateY(var(--ry));transition:transform .7s var(--ease),box-shadow .6s var(--ease)}
.room__img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:100% 50%;z-index:-2;transform-origin:78% 55%;transition:scale 1.6s var(--ease),filter 1s var(--ease);filter:brightness(.94)}
.room__shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(var(--tone),.94) 0%,rgba(var(--tone),.78) 36%,rgba(var(--tone),0) 68%)}
.room__glare{position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(circle 60cqw at var(--gx) var(--gy),rgba(255,226,170,.22),rgba(255,226,170,0) 70%);mix-blend-mode:screen;opacity:0;transition:opacity .6s}
.room__bar{position:absolute;inset:0 0 auto 0;height:max(1.45rem,9.4cqw);display:flex;align-items:center;gap:2.2cqw;padding:0 3.6cqw;background:rgba(8,6,5,.9);border-bottom:1px solid rgba(233,207,149,.3);color:var(--bone)}
.room__bar svg{width:max(.8rem,4.4cqw);height:auto;flex:none}
.room__bar b{font:600 max(.4rem,2.3cqw)/1 var(--display);letter-spacing:.2em;margin-right:auto;white-space:nowrap}
.room__bar i{width:4.6cqw;height:1px;background:rgba(233,207,149,.5);flex:none}
.room__bar u{width:10cqw;height:max(.42rem,2.9cqw);background:var(--brass);background-size:220% 100%;flex:none;margin-left:1.4cqw;text-decoration:none;transition:background-position 1s var(--ease)}
.room__copy{position:absolute;left:0;top:max(1.45rem,9.4cqw);bottom:0;width:56%;display:grid;align-content:center;gap:2.6cqw;padding:3.4cqw 0 3.8cqw 6.2cqw;transition:translate .8s var(--ease)}
.room__title{font:500 clamp(1.02rem,6.7cqw,2.5rem)/1.09 var(--display);letter-spacing:-.01em;text-wrap:balance;text-shadow:0 2px 14px rgba(0,0,0,.85)}
.room__title em{font-style:italic;font-family:var(--ital);color:var(--gold-l)}
.room__title--gilt{color:var(--gold-l);font-style:italic;font-family:var(--ital)}
.room__text{font-size:clamp(.78rem,3.75cqw,1.08rem);line-height:1.42;color:#DCD2C0;padding-top:2.4cqw;border-top:1px solid rgba(233,207,149,.36);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden;text-shadow:0 1px 10px rgba(0,0,0,.9)}
.room--long .room__text{-webkit-line-clamp:2;line-clamp:2}
.room__go{position:absolute;right:3.4cqw;bottom:3.2cqw;display:flex;align-items:center;gap:.5rem;padding:.5rem .7rem;font:600 .62rem/1 var(--body);letter-spacing:.24em;text-transform:uppercase;color:#2A1D08;background:var(--brass);background-size:220% 100%;box-shadow:inset 0 1px 0 rgba(255,248,220,.9),inset 0 0 0 1px rgba(90,63,20,.7),0 10px 18px -8px #000;opacity:0;translate:0 .6rem;transition:opacity .5s var(--ease),translate .6s var(--ease)}
.room__go svg{width:1.5rem;height:.46rem}
.room__cap{display:flex;align-items:baseline;gap:clamp(.4rem,2.6cqw,.8rem);padding:0 .15rem;min-width:0}
.room__no{flex:none;min-width:1.25em;font:500 clamp(1rem,5.2cqw,1.35rem)/1 var(--display);font-style:normal;color:var(--gold);transition:color .4s}
.room__no svg{width:1.4rem;height:.44rem}
.room__name{flex:none;font:600 clamp(.62rem,3.2cqw,.8rem)/1.2 var(--body);letter-spacing:clamp(.16em,.9cqw,.28em);text-transform:uppercase;color:var(--bone)}
.room__tag{margin-left:auto;min-width:0;font:italic 400 clamp(.76rem,4cqw,1.05rem)/1.25 var(--ital);color:var(--gold-l);text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:linear-gradient(currentColor,currentColor) 100% 100%/0 1px no-repeat;transition:color .4s,background-size .6s var(--ease)}
.room:hover .room__page,.room:focus-visible .room__page,.room.is-called .room__page{box-shadow:0 0 0 1px var(--gold-l),0 0 0 4px #0A0807,0 0 0 5px rgba(233,207,149,.6),0 0 46px -8px rgba(233,207,149,.5),0 36px 56px -28px #000}
.room:hover .room__img,.room:focus-visible .room__img,.room.is-called .room__img{scale:1.08;filter:brightness(1.06)}
.room:hover .room__glare{opacity:1}
.room:hover .room__bar u,.room.is-called .room__bar u{background-position:100% 0}
.room:hover .room__copy{translate:0 -.2rem}
.room:hover .room__go,.room:focus-visible .room__go,.room.is-called .room__go{opacity:1;translate:0 0}
.room:hover .room__no,.room.is-called .room__no{color:var(--gold-w)}
.room:hover .room__tag,.room:focus-visible .room__tag,.room.is-called .room__tag{color:var(--gold-w);background-size:100% 1px;background-position:0 100%}
.room--paper .room__page{color:var(--ink)}
.room--paper .room__img{filter:none}
.room--paper .room__copy{width:52%}
.room--paper .room__title{text-shadow:none}
.room--paper .room__title em{color:var(--ox)}
.room--paper .room__text{color:#4A3B2B;text-shadow:none;border-top-color:rgba(122,90,38,.45)}
.room--paper .room__glare{mix-blend-mode:soft-light;background:radial-gradient(circle 60cqw at var(--gx) var(--gy),rgba(255,255,255,.75),rgba(255,255,255,0) 70%)}
.room--paper:hover .room__img{filter:contrast(1.04)}
@media (max-width:1179px){.rooms__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:619px){.rooms__grid{grid-template-columns:minmax(0,1fr)}.gallery__title{letter-spacing:.34em}}

/* ================================================================ CLOSE + FOOTER */
.close{position:relative;isolation:isolate;overflow:clip;text-align:center;padding-block:clamp(5rem,14vh,9rem) clamp(3.5rem,9vh,6rem);background:#070504}
.close__bg{position:absolute;inset:0;z-index:-1}
.close__bg img{position:absolute;inset:-6% 0;width:100%;height:112%;max-width:none;object-fit:cover;object-position:60% 50%;translate:0 var(--cy,0px)}
.close__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#090706 0%,rgba(9,7,6,.18) 24%,rgba(9,7,6,.3) 62%,#0A0807 100%),radial-gradient(80% 70% at 50% 45%,rgba(7,5,4,0),rgba(7,5,4,.5))}
.close__in{display:grid;justify-items:center;gap:1.1rem}
.close__rule{width:min(70%,20rem)}
.close__line{font:italic 500 var(--s2)/1.2 var(--ital);color:var(--gold-l);text-shadow:0 2px 24px #000}
.close__word{font:600 clamp(2.9rem,13.2vw,12.5rem)/.92 var(--display);letter-spacing:.015em;margin:-.05em -.14em -.2em;padding:.05em .14em .2em;white-space:nowrap;background:var(--foil);background-size:200% 100%;background-position:var(--wx,30%) 0;-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 10px 30px rgba(0,0,0,.8));user-select:none}
.close__cta{position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:1.4rem 1.8rem;margin-top:1.6rem}
.seal{width:clamp(4.6rem,8vw,6.2rem);height:auto;filter:drop-shadow(0 10px 14px rgba(0,0,0,.7));rotate:-12deg;transition:rotate .9s var(--ease),scale .5s var(--ease),filter .5s}
.close__cta:hover .seal{rotate:6deg;scale:1.04}
.close__cta:active .seal{scale:.95;filter:drop-shadow(0 3px 5px rgba(0,0,0,.8))}
.ft{position:relative;background:var(--onyx);padding-block:0 calc(1.6rem + env(safe-area-inset-bottom,0px))}
.ft__row{display:grid;gap:1.8rem 2rem;align-items:center;padding-block:2rem;border-top:1px solid var(--line-2);box-shadow:inset 0 4px 0 -3px var(--line)}
.ft__nav{display:flex;flex-wrap:wrap;gap:.5rem 1.6rem}
.ft__nav a{font-size:.95rem;color:var(--smoke);text-decoration:none;background:linear-gradient(var(--gold-l),var(--gold-l)) 0 100%/0 1px no-repeat;transition:color .3s,background-size .5s var(--ease);padding:.2rem 0}
.ft__nav a:hover{color:var(--gold-w);background-size:100% 1px}
.ft__forum{display:flex;align-items:center;gap:.9rem;font-size:.95rem;color:var(--smoke)}
.ft__forum a{color:var(--gold-l);display:inline-block;margin-top:.1rem}
.ft__forum p span{display:block}
.ft__knock{width:3.2rem;height:3.2rem;border-radius:50%;flex:none;display:grid;place-items:center;background:#000;box-shadow:0 0 0 1px var(--gold),0 0 0 4px #050403,0 0 0 5px var(--gold-d)}
.ft__knock svg{width:56%;height:auto;translate:0 -3%}
.ft__copy{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.4rem 2rem;font-size:.86rem;color:#A99E8C}
.ft__copy span:last-child{font:italic 400 .95rem/1.4 var(--ital);color:var(--gold)}
@media (min-width:1000px){.ft__row{grid-template-columns:auto 1fr auto}.ft__nav{justify-content:center}}

/* ================================================================ INNER ROOMS */
/* Each room opens on a plate, the full-size version of its framed preview on the homepage: the room's tone, its object
   on the right, the room's own words on the left, one gilt line around it. Below the plate the room does its work
   (portraits and a diptych, a 72-hour dial, a lens, cards, letters, a form), and a brass band leads to the next door. */
[hidden]{display:none !important}
.js:not([data-page]) .page:not(#home){display:none}
.page{position:relative}
.nb{white-space:nowrap}
.doors.is-fast .doors__l,.doors.is-fast .doors__r{transition-duration:.62s}

html[data-page]:not([data-page="home"]) .hd{background:rgba(8,6,5,.92);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);box-shadow:0 18px 40px -24px #000}
html[data-page]:not([data-page="home"]) .hd::after{opacity:1}
.hd__nav a[aria-current="page"]{color:var(--gold-w)}
.hd__nav a[aria-current="page"]::before{scale:1 1}
.hd__nav a[aria-current="page"]::after{opacity:1;translate:-50% 0}
.menu__list a[aria-current="page"]{color:var(--gold-l);padding-left:.6rem}
.ft__nav a[aria-current="page"]{color:var(--gold-w);background-size:100% 1px}
html[data-page="apply"] .close__cta{display:none}

/* ---------- the plate ---------- */
.plate{
  --tone:8,6,5;--fi:clamp(.4rem,.8vw,.8rem);--pg:max(var(--gutter),4.4vw);--lx:68%;--ly:40%;--px:0px;
  position:relative;isolation:isolate;overflow:clip;display:grid;grid-template-columns:minmax(0,1fr);background:rgb(var(--tone));color:var(--bone);
  padding-top:calc(var(--hd-h) + env(safe-area-inset-top,0px));
}
.plate--emerald{--tone:8,25,20}
.plate--burgundy{--tone:36,9,10}
.plate--paper{--tone:243,235,217;color:var(--ink)}
/* the bar is solid here, so the frame begins under it: its top edge and corners are in view, not behind the bar */
.plate > .frame{top:calc(var(--hd-h) + env(safe-area-inset-top,0px) + var(--fi))}
.plate__bg{position:relative;z-index:-1;order:2;aspect-ratio:1.22;margin-top:-1.5rem;overflow:hidden}
.plate__img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:100% 50%;-webkit-mask:linear-gradient(180deg,rgba(0,0,0,0) 0,#000 30%);mask:linear-gradient(180deg,rgba(0,0,0,0) 0,#000 30%)}
.js .plate__img{opacity:0;scale:1.07;transform-origin:80% 55%;transition:opacity 1.3s ease,scale 3.2s var(--ease),translate .9s var(--ease)}
.js .plate.is-in .plate__img{opacity:1;scale:1}
.plate__shade{display:none;position:absolute;inset:0;pointer-events:none}
.plate__light{position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;background:radial-gradient(circle 22rem at var(--lx) var(--ly),rgba(255,206,140,.17),rgba(255,206,140,.05) 45%,rgba(255,206,140,0) 70%)}
.plate--paper .plate__light{mix-blend-mode:soft-light;background:radial-gradient(circle 24rem at var(--lx) var(--ly),rgba(255,255,255,.8),rgba(255,255,255,0) 70%)}
.plate--paper .frame,.js.is-open .plate--paper .frame{border-color:rgba(122,90,38,.6);box-shadow:0 0 0 100vmax #070504,inset 0 0 0 3px rgba(243,235,217,.6),inset 0 0 0 4px rgba(122,90,38,.24)}
.plate__copy{position:relative;z-index:2;order:1;min-width:0;display:grid;justify-items:start;align-content:center;padding:clamp(2.2rem,7vw,3.4rem) max(var(--gutter),env(safe-area-inset-right,0px)) 1rem max(var(--gutter),env(safe-area-inset-left,0px))}
.label{display:flex;align-items:center;gap:.9rem;width:100%;max-width:25rem;margin:0 0 1.35rem;color:var(--gold-l)}
.label__no{width:2.6rem;height:2.6rem;flex:none;border-radius:50%;display:grid;place-items:center;font:italic 500 1.02rem/1 var(--ital);letter-spacing:-.02em;color:var(--gold-l);background:#090706;box-shadow:0 0 0 1px var(--gold),0 0 0 3px #090706,0 0 0 4px var(--gold-d)}
.label__t{font:600 .76rem/1 var(--body);letter-spacing:.36em;text-transform:uppercase;white-space:nowrap}
.label__line{flex:1;height:7px;background:linear-gradient(90deg,var(--gold),rgba(196,155,85,0)) 0 50%/100% 1px no-repeat,radial-gradient(circle at 0 50%,var(--gold-l) 0 2.5px,rgba(0,0,0,0) 3px)}
.plate--paper .label{color:var(--sepia)}
.plate--paper .label__no{color:var(--gold-l);box-shadow:0 0 0 1px var(--gold-d),0 0 0 3px #F3EBD9,0 0 0 4px rgba(110,82,38,.55)}
.plate--paper .label__line{background:linear-gradient(90deg,#8C6A2F,rgba(140,106,47,0)) 0 50%/100% 1px no-repeat,radial-gradient(circle at 0 50%,#6E5020 0 2.5px,rgba(0,0,0,0) 3px)}
.plate__title{font:500 clamp(2.35rem,1.25rem + 4.5vw,5.1rem)/1.03 var(--display);letter-spacing:-.012em;color:#F7F1E6;text-shadow:0 2px 30px rgba(0,0,0,.7);max-width:12.5em}
.plate__title:focus{outline:none}
.plate__title em{font-style:italic;font-family:var(--ital);font-weight:500;padding-right:.08em}
.plate__title .foil{background-image:linear-gradient(100deg,#C9A35C 0%,#E6C988 22%,#FFF1CC 44%,#DDB86E 60%,#F3DFA6 80%,#C9A35C 100%)}
.plate__title--long{font-size:clamp(1.72rem,1.02rem + 2.5vw,3.3rem);line-height:1.1;max-width:17.5em}
.plate--paper .plate__title{color:var(--ink);text-shadow:none}
.plate__rule{width:min(88%,21rem);margin:1.35rem 0 1.25rem}
.plate--paper .plate__rule{--rc:#8C6A2F;--rc2:#6E5020}
.plate__lead{font-size:var(--s1);line-height:1.52;color:#EAE1D0;max-width:29em;text-shadow:0 1px 18px rgba(0,0,0,.85)}
.plate--paper .plate__lead{color:#3B2E22;text-shadow:none}
.brassplate{
  position:relative;display:inline-block;margin:1.75rem 0 0;padding:.74em 2.3em .8em;max-width:100%;text-align:center;
  font:italic 500 clamp(1rem,.93rem + .45vw,1.28rem)/1.25 var(--ital);text-wrap:balance;color:#2E2009;text-shadow:0 1px 0 rgba(255,244,210,.6);
  background:repeating-linear-gradient(92deg,rgba(255,255,255,.09) 0 1px,rgba(0,0,0,0) 1px 3px),var(--brass);background-size:auto,220% 100%;
  box-shadow:inset 0 1px 0 rgba(255,248,220,.9),inset 0 -2px 0 rgba(70,48,12,.7),inset 0 0 0 1px rgba(90,63,20,.7),inset 0 0 0 5px rgba(255,241,204,.16),inset 0 0 0 6px rgba(90,63,20,.4),0 22px 34px -16px rgba(0,0,0,.95);
}
.js .brassplate.rv{transition:opacity 1s var(--ease) .4s,translate 1.1s var(--ease) .4s,background-position 1.2s var(--ease)}
.brassplate:hover{background-position:0 0,100% 0}
.brassplate::before,.brassplate::after{content:"";position:absolute;top:50%;width:.44em;height:.44em;translate:0 -50%;border-radius:50%;background:radial-gradient(circle at 35% 30%,#FFF4D2,#7A5A26 72%);box-shadow:0 0 0 1px rgba(60,40,10,.7),inset 0 -1px 0 rgba(0,0,0,.3)}
.brassplate::before{left:.8em}.brassplate::after{right:.8em}
.brassplate small{display:block;margin-top:.55em;font:600 .6rem/1 var(--body);font-style:normal;letter-spacing:.3em;text-transform:uppercase;color:#4A3410}
.plate--paper .brassplate{box-shadow:inset 0 1px 0 rgba(255,248,220,.9),inset 0 -2px 0 rgba(70,48,12,.7),inset 0 0 0 1px rgba(90,63,20,.7),inset 0 0 0 5px rgba(255,241,204,.16),inset 0 0 0 6px rgba(90,63,20,.4),0 18px 26px -16px rgba(74,52,20,.7)}
@media (min-width:860px){
  .plate{min-height:clamp(30rem,44vw,100svh)}
  .plate__bg{position:absolute;inset:calc(var(--hd-h) + env(safe-area-inset-top,0px)) 0 0 0;order:0;aspect-ratio:auto;margin:0}
  .plate__img{inset:0 -14px 0 auto;width:auto;height:100%;aspect-ratio:1800/1195;translate:var(--px) 0;-webkit-mask:linear-gradient(90deg,rgba(0,0,0,0) 0,#000 36%);mask:linear-gradient(90deg,rgba(0,0,0,0) 0,#000 36%)}
  .plate__shade{display:block;background:linear-gradient(90deg,rgba(var(--tone),.92) 0%,rgba(var(--tone),.62) 32%,rgba(var(--tone),0) 60%)}
  .plate__copy{padding:clamp(2rem,3.2vw,3.2rem) 0 clamp(2.4rem,3.8vw,3.8rem) max(var(--pg),10.4vw,env(safe-area-inset-left,0px));max-width:min(61vw,58rem)}
  .plate__title{font-size:clamp(2.5rem,4.75vw,5.4rem)}
  .plate__title--long{font-size:clamp(1.75rem,3.1vw,3.9rem);max-width:16.8em}
}
@media (min-width:860px) and (max-width:1099px){
  .plate__copy{max-width:58vw;padding-left:max(var(--pg),6vw)}
  .plate__lead{max-width:min(29em,46vw)}
  .plate__title--long{max-width:min(16.8em,50vw)}
  .plate__shade{background:linear-gradient(90deg,rgba(var(--tone),.94) 0%,rgba(var(--tone),.8) 40%,rgba(var(--tone),0) 70%)}
}
@media (min-width:600px) and (max-width:859px){.plate__bg{aspect-ratio:1.55}}
@media (min-width:600px) and (max-width:859px) and (orientation:landscape) and (max-height:540px){
  .plate{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)}
  .plate__bg{aspect-ratio:auto;margin:0;min-height:100%}
  .plate__img{-webkit-mask:linear-gradient(90deg,rgba(0,0,0,0) 0,#000 36%);mask:linear-gradient(90deg,rgba(0,0,0,0) 0,#000 36%)}
  .plate__copy{padding-block:1.6rem 2rem;padding-right:0}
}

/* ---------- bands ---------- */
.band{position:relative;isolation:isolate;overflow:clip;padding-block:clamp(3.6rem,9vh,7rem)}
.band::before{content:"";position:absolute;inset:0 0 auto 0;height:1px;z-index:1;background:linear-gradient(90deg,rgba(233,207,149,0),var(--line-2) 18%,var(--line-2) 82%,rgba(233,207,149,0))}
.band--onyx{background:radial-gradient(42% 34% at 0% 26%,rgba(94,27,23,.42),rgba(94,27,23,0) 70%),radial-gradient(42% 34% at 100% 72%,rgba(94,27,23,.42),rgba(94,27,23,0) 70%),radial-gradient(80% 26% at 50% 0%,#1E1611 0%,rgba(30,22,17,0) 70%),#080605}
.band--wall{background:radial-gradient(64% 36% at 50% 0%,rgba(58,120,96,.34),rgba(58,120,96,0) 72%),repeating-linear-gradient(90deg,rgba(233,207,149,.05) 0 1px,rgba(0,0,0,0) 1px clamp(4rem,9vw,8rem)),linear-gradient(180deg,#0D2A22 0%,#081A15 55%,#06120F 100%)}
.band--leather{background:radial-gradient(60% 60% at 50% 40%,rgba(122,42,42,.4),rgba(122,42,42,0) 70%),linear-gradient(rgba(22,6,7,.8),rgba(16,5,5,.93)),url(/img/room-discretion-1200.webp) 100% 50%/cover #170707}
.band--desk{background:radial-gradient(60% 46% at 50% 0%,rgba(122,42,42,.4),rgba(122,42,42,0) 70%),linear-gradient(rgba(22,6,7,.86),rgba(14,5,5,.95)),url(/img/room-apply-1200.webp) 100% 50%/cover #170707}
.band--baize{background:radial-gradient(70% 46% at 50% 10%,rgba(46,120,94,.42),rgba(46,120,94,0) 72%),linear-gradient(180deg,rgba(13,40,32,.9),rgba(7,22,17,.94)),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0/240px 240px,#0B211B}
.band--paper{background:#F4EDDD url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='280'%3E %3Cfilter id='t' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='4' seed='9' stitchTiles='stitch' result='n'/%3E %3CfeDiffuseLighting in='n' surfaceScale='0.55' diffuseConstant='1.0' lighting-color='%23F4EDDD'%3E%3CfeDistantLight azimuth='235' elevation='72'/%3E%3C/feDiffuseLighting%3E%3C/filter%3E %3Crect width='280' height='280' filter='url(%23t)'/%3E%3C/svg%3E");color:var(--ink)}
.band--paper::before{display:none}
.band--paper::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(120% 60% at 70% 20%,rgba(255,255,255,.35),rgba(255,255,255,0) 55%),radial-gradient(90% 50% at 0% 100%,rgba(122,90,38,.14),rgba(122,90,38,0) 60%)}
.band__frame{position:absolute;inset:clamp(.55rem,1.15vw,1.05rem);border:1px solid rgba(122,90,38,.45);box-shadow:inset 0 0 0 4px rgba(244,237,221,.6),inset 0 0 0 5px rgba(122,90,38,.2);pointer-events:none}
.band__frame img{position:absolute;width:clamp(3.6rem,8vw,7rem);height:auto;max-width:none;filter:sepia(.2) saturate(.9) brightness(.82)}
.band__frame .c-tl{left:0;top:0;translate:-4% -7%}
.band__frame .c-br{right:0;bottom:0;translate:4% 7%;scale:-1 -1}
.sheet{position:relative;background:#F4EDDD url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='280'%3E %3Cfilter id='t' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='4' seed='9' stitchTiles='stitch' result='n'/%3E %3CfeDiffuseLighting in='n' surfaceScale='0.55' diffuseConstant='1.0' lighting-color='%23F4EDDD'%3E%3CfeDistantLight azimuth='235' elevation='72'/%3E%3C/feDiffuseLighting%3E%3C/filter%3E %3Crect width='280' height='280' filter='url(%23t)'/%3E%3C/svg%3E");color:var(--ink);box-shadow:inset 0 0 0 1px rgba(122,92,44,.5),inset 0 0 0 6px rgba(244,237,221,.75),inset 0 0 0 7px rgba(122,92,44,.35),0 40px 60px -30px #000}
.wax{height:auto;max-width:none;filter:drop-shadow(0 10px 12px rgba(40,12,8,.5))}

/* ---------- next door ---------- */
.next{position:relative;isolation:isolate;display:block;overflow:hidden;text-decoration:none;color:var(--bone);background:#0A0807;border-block:1px solid var(--gold-d);box-shadow:inset 0 5px 0 -4px var(--line-2),inset 0 -5px 0 -4px var(--line-2)}
.next:focus-visible{outline-offset:-4px}
.next__img{position:absolute;right:0;top:-35%;width:auto;height:170%;max-width:none;aspect-ratio:1200/797;object-fit:cover;z-index:-2;opacity:.62;transform-origin:80% 50%;-webkit-mask:linear-gradient(90deg,rgba(0,0,0,0) 0,#000 62%);mask:linear-gradient(90deg,rgba(0,0,0,0) 0,#000 62%);transition:opacity .8s var(--ease),scale 1.8s var(--ease)}
.next::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,#0A0807 0%,rgba(10,8,7,.82) 42%,rgba(10,8,7,.3) 78%,rgba(10,8,7,.12) 100%)}
.next:hover .next__img,.next:focus-visible .next__img{opacity:1;scale:1.06}
.next__in{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:clamp(1rem,3vw,2.5rem);padding-block:clamp(2.2rem,5vw,4rem)}
.next__no{width:clamp(3.2rem,5.6vw,4.6rem);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;font:italic 500 var(--s1)/1 var(--ital);color:#2A1D08;background:var(--brass);background-size:220% 100%;box-shadow:inset 0 1px 0 rgba(255,246,214,.85),inset 0 0 0 4px rgba(42,29,8,.2),inset 0 0 0 5px rgba(255,241,204,.3),0 10px 20px rgba(0,0,0,.6);transition:background-position .9s var(--ease),rotate .9s var(--ease)}
.next:hover .next__no{background-position:100% 0;rotate:-10deg}
.next__t{display:grid;gap:.55rem;min-width:0}
.next__l{font:600 .74rem/1 var(--body);letter-spacing:.34em;text-transform:uppercase;color:var(--gold-l)}
.next__h{font:italic 500 clamp(1.45rem,1.05rem + 2vw,3rem)/1.1 var(--ital);text-wrap:balance;text-shadow:0 2px 22px #000,0 0 3px rgba(0,0,0,.6);transition:color .4s}
.next:hover .next__h{color:var(--gold-w)}
.next svg{width:clamp(2.4rem,6vw,5rem);height:1rem;color:var(--gold-l);filter:drop-shadow(0 1px 4px #000);transition:translate .6s var(--ease)}
.next:hover svg{translate:.8rem 0}

/* ================================================================ CLIENTELE */
.portraits{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(2rem,3.4vw,3rem) clamp(1rem,2.8vw,3rem);max-width:68rem;margin-inline:auto;align-items:end}
.portrait{all:unset;box-sizing:border-box;position:relative;display:grid;justify-items:center;min-width:0;cursor:pointer;-webkit-tap-highlight-color:transparent;perspective:900px;--rx:0deg;--ry:0deg;--gx:50%;--gy:30%;transition:translate .7s var(--ease),filter .7s var(--ease)}
.portrait__fig{position:relative;display:block;width:100%;transform:rotateX(var(--rx)) rotateY(var(--ry));transition:transform .7s var(--ease);filter:drop-shadow(0 26px 20px rgba(0,0,0,.7))}
.portrait__fig img{width:100%;height:auto;-webkit-user-drag:none;user-select:none}
.portrait__glare{position:absolute;inset:9% 12%;pointer-events:none;mix-blend-mode:screen;background:radial-gradient(circle 60% at var(--gx) var(--gy),rgba(255,226,170,.3),rgba(255,226,170,0) 70%);opacity:0;transition:opacity .6s}
.portrait:hover .portrait__glare{opacity:1}
.portrait__lamp{position:absolute;left:50%;top:-9%;width:150%;aspect-ratio:1.25;translate:-50% 0;pointer-events:none;mix-blend-mode:screen;background:radial-gradient(48% 62% at 50% 0%,rgba(255,214,150,.42),rgba(255,200,120,.1) 46%,rgba(255,200,120,0) 72%);opacity:0;transition:opacity .9s var(--ease)}
.portrait[aria-selected="true"] .portrait__lamp{opacity:1}
.portrait[aria-selected="false"]{filter:brightness(.6) saturate(.78)}
.portrait[aria-selected="false"]:hover{filter:brightness(.88) saturate(.95)}
.portrait[aria-selected="true"]{translate:0 -.7rem}
.portrait:focus-visible{outline:2px solid var(--gold-l);outline-offset:8px}
.portrait__plate{display:grid;place-items:center;min-width:74%;min-height:2rem;margin-top:clamp(.7rem,1.2vw,1.1rem);padding:.45rem .7rem;background:repeating-linear-gradient(92deg,rgba(255,255,255,.09) 0 1px,rgba(0,0,0,0) 1px 3px),var(--brass);background-size:auto,220% 100%;box-shadow:inset 0 1px 0 rgba(255,248,220,.9),inset 0 0 0 1px rgba(90,63,20,.7),0 6px 10px rgba(0,0,0,.6);transition:background-position 1s var(--ease)}
.portrait:hover .portrait__plate,.portrait[aria-selected="true"] .portrait__plate{background-position:0 0,100% 0}
.portrait__plate b{font:600 .66rem/1.15 var(--body);letter-spacing:.14em;text-transform:uppercase;text-align:center;color:#2A1D08;text-shadow:0 1px 0 rgba(255,240,200,.55)}
@media (min-width:760px){.portraits{grid-template-columns:repeat(4,minmax(0,1fr))}.portrait__plate b{font-size:.72rem;letter-spacing:.2em}}

.compares{scroll-margin-top:calc(var(--hd-h) + 1.5rem);margin-top:clamp(2.6rem,5vw,4.2rem);display:grid}
.compare{position:relative;--split:50;display:grid;box-shadow:0 0 0 1px var(--line-2),0 0 0 9px #0A0807,0 0 0 10px var(--line),0 50px 70px -30px #000;animation:cmpin .7s var(--ease)}
@keyframes cmpin{from{opacity:0;translate:0 1rem}}
.compare__night,.compare__paper{position:relative;min-width:0;isolation:isolate}
.compare__paper{z-index:1;order:-1;background:#F4EDDD url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='280'%3E %3Cfilter id='t' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='4' seed='9' stitchTiles='stitch' result='n'/%3E %3CfeDiffuseLighting in='n' surfaceScale='0.55' diffuseConstant='1.0' lighting-color='%23F4EDDD'%3E%3CfeDistantLight azimuth='235' elevation='72'/%3E%3C/feDiffuseLighting%3E%3C/filter%3E %3Crect width='280' height='280' filter='url(%23t)'/%3E%3C/svg%3E");color:var(--ink)}
.compare__night{background:radial-gradient(90% 80% at 85% 10%,#2A1F17,rgba(42,31,23,0) 70%),repeating-linear-gradient(57deg,rgba(233,207,149,.035) 0 1px,rgba(0,0,0,0) 1px 9px),#110D0B;color:var(--bone)}
.compare__night::after{content:"";position:absolute;inset:.8rem;border:1px dashed rgba(233,207,149,.26);pointer-events:none}
.compare__inner{position:relative;z-index:2;display:flex;flex-direction:column;gap:1rem;padding:clamp(1.7rem,4vw,3.6rem)}
.compare__label{font:600 .72rem/1 var(--body);letter-spacing:.3em;text-transform:uppercase;margin-bottom:.5rem}
.compare__night .compare__label{color:var(--gold-l)}
.compare__paper .compare__label{color:var(--sepia)}
.compare__quote{font:italic 500 var(--s1)/1.32 var(--ital);color:var(--gold-l);max-width:30ch}
.compare h3{font:500 clamp(1.6rem,1.1rem + 1.7vw,2.7rem)/1.07 var(--display);max-width:20ch}
.compare__text{max-width:46ch;line-height:1.55}
.compare__night .compare__text{color:var(--smoke)}
.compare__paper .compare__text{color:#463C30}
.compare__note{display:grid;gap:.45rem;padding-top:1.1rem;margin-top:.5rem;border-top:1px solid;max-width:44ch}
.compare__note span:first-child{font:600 .68rem/1 var(--body);letter-spacing:.26em;text-transform:uppercase}
.compare__note span:last-child{font:italic 500 var(--s1)/1.32 var(--ital)}
.compare__paper .compare__note{border-color:rgba(26,19,14,.3)}
.compare__paper .compare__note span:first-child{color:var(--ox)}
.compare__night .compare__note{border-color:var(--line-2)}
.compare__night .compare__note span:first-child{color:var(--gold-l)}
.compare__bar,.compare__range{display:none}
.compare__hint{position:relative;z-index:1;margin-top:1.6rem;font:italic 400 1rem/1.4 var(--ital);color:#CFE0D6;text-align:center}
.compare__hint .w{display:none}
@media (min-width:900px){
  .compare{overflow:hidden;min-height:36rem;user-select:none;-webkit-user-select:none}
  .compare__night,.compare__paper{grid-area:1/1;display:flex;flex-direction:column;justify-content:flex-end}
  .compare__paper{order:0;-webkit-clip-path:inset(0 calc(100% - var(--split) * 1%) 0 0);clip-path:inset(0 calc(100% - var(--split) * 1%) 0 0)}
  .compare__inner{width:50%;justify-content:flex-end}
  .compare__inner--right{margin-left:auto;padding-left:clamp(2.6rem,5vw,4.6rem)}
  .compare__paper .compare__inner{padding-right:clamp(2.6rem,5vw,4.6rem)}
  .compare__bar{display:block;position:absolute;top:0;bottom:0;left:calc(var(--split) * 1%);width:6px;margin-left:-3px;z-index:3;background:linear-gradient(90deg,#7A5A26,#F6E3AE 45%,#B98F4A 70%,#7A5A26);box-shadow:0 0 0 1px rgba(60,40,10,.8),0 0 22px rgba(0,0,0,.7)}
  .compare__bar span{position:absolute;left:50%;top:50%;translate:-50% -50%;width:3.6rem;height:3.6rem;border-radius:50%;display:grid;place-items:center;color:#2A1D08;background:var(--brass);background-size:220% 100%;box-shadow:inset 0 1px 0 rgba(255,248,220,.9),inset 0 0 0 1px rgba(90,63,20,.7),inset 0 0 0 5px rgba(255,241,204,.22),inset 0 0 0 6px rgba(90,63,20,.4),0 10px 20px rgba(0,0,0,.7);transition:scale .4s var(--ease),background-position .9s var(--ease)}
  .compare__bar svg{width:1.7rem;height:auto}
  .compare:hover .compare__bar span{scale:1.08;background-position:100% 0}
  .compare__range{display:block;position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;z-index:4;-webkit-appearance:none;appearance:none;touch-action:pan-y}
  .compare:has(.compare__range:focus-visible) .compare__bar span{outline:2px solid var(--gold-w);outline-offset:4px}
  .compare__hint .w{display:inline}
  .compare__hint .n{display:none}
}

/* ================================================================ DISCRETION */
.shadow__grid{display:block}
.shadow__dial{position:sticky;top:calc(var(--hd-h) + env(safe-area-inset-top,0px) + .6rem);z-index:5;width:max-content;max-width:100%;margin-bottom:2.2rem;display:flex;align-items:center;gap:1rem;padding:.5rem 1.2rem .5rem .5rem;background:#0B0908;border:1px solid var(--line-2);box-shadow:0 16px 26px -10px #000}
.dial72{width:4rem;flex:none;aspect-ratio:1;border-radius:50%;padding:4px;background:conic-gradient(from 210deg,#7A5A26,#F6E3AE,#B98F4A,#FFF1CC,#8C6A2F,#E9CF95,#7A5A26);box-shadow:0 12px 20px -10px #000,inset 0 0 0 1px rgba(255,246,214,.6)}
.dial72 svg{width:100%;height:100%;border-radius:50%;color:var(--gold-l);background:radial-gradient(circle at 35% 28%,#2E241D,#0B0908 72%);box-shadow:inset 0 0 0 2px #1A120A,inset 0 0 18px #000}
.dial72__nums{display:none;font:italic 500 13px/1 var(--ital)}
#dialArc{transition:stroke-dashoffset .4s linear}
#dialHand{transition:transform .4s linear}
.dial72__read{display:flex;align-items:baseline;gap:.7rem}
.dial72__read b{font:500 2.1rem/1 var(--display);color:var(--gold-w);min-width:2.3ch;font-variant-numeric:tabular-nums lining-nums}
.dial72__read small{font:600 .7rem/1 var(--body);letter-spacing:.26em;text-transform:uppercase;color:var(--gold-l);white-space:nowrap}
.hours{--pad:clamp(1.3rem,3vw,2.6rem);display:grid;gap:clamp(3.4rem,6vw,5.2rem);margin:0;padding:0 0 0 var(--pad);list-style:none;border-left:1px solid var(--line-2)}
.hour{position:relative;display:grid;gap:1.15rem;justify-items:start;min-width:0}
.hour::before{content:"";position:absolute;left:calc(var(--pad) * -1 - 7px);top:.55rem;width:13px;height:13px;rotate:45deg;background:#0A0807;box-shadow:0 0 0 1px var(--gold);transition:background-color .5s,box-shadow .5s}
.hour.is-active::before{background:var(--gold-l);box-shadow:0 0 0 1px var(--gold-w),0 0 0 6px rgba(233,207,149,.18)}
.hour__fig{position:relative;width:100%;margin:0 0 .5rem;aspect-ratio:16/9;overflow:hidden;background:#0A0807;box-shadow:0 0 0 1px rgba(233,207,149,.62),0 0 0 4px #0A0807,0 0 0 5px rgba(233,207,149,.24),0 30px 50px -28px #000}
.js .hour__fig.rv{transition:opacity 1s var(--ease),translate 1.1s var(--ease),box-shadow .8s var(--ease)}
.hour__fig img{width:100%;height:100%;max-width:none;object-fit:cover;filter:brightness(.5) saturate(.75);transition:filter 1.4s var(--ease),scale 2.6s var(--ease)}
.hour:nth-child(2) .hour__fig img{object-position:50% 42%}
.hour:nth-child(3) .hour__fig img{object-position:60% 80%}
.hour:nth-child(4) .hour__fig img{object-position:70% 58%}
.hour.is-active .hour__fig img{filter:none}
.hour.is-active .hour__fig{box-shadow:0 0 0 1px var(--gold-l),0 0 0 4px #0A0807,0 0 0 5px rgba(233,207,149,.55),0 0 46px -10px rgba(233,207,149,.4),0 30px 50px -28px #000}
.hour__fig:hover img{scale:1.06;filter:brightness(1.08)}
.hour__tag{position:absolute;left:0;bottom:0;padding:.6rem 1rem;font:600 .72rem/1 var(--body);letter-spacing:.26em;text-transform:uppercase;color:#2A1D08;background:var(--brass);background-size:220% 100%;text-shadow:0 1px 0 rgba(255,240,200,.55);box-shadow:inset 0 1px 0 rgba(255,248,220,.9),inset 0 0 0 1px rgba(90,63,20,.7),0 10px 16px -10px #000;transition:background-position 1s var(--ease)}
.hour.is-active .hour__tag{background-position:100% 0}
.hour h3{font:500 var(--s3)/1.05 var(--display);max-width:20ch}
.hour__body{font-size:var(--s1);line-height:1.52;color:var(--smoke);max-width:54ch}
.hour dl{display:grid;gap:1.3rem 2.4rem;width:100%;max-width:58rem;margin:.4rem 0 0;padding-top:1.3rem;border-top:1px solid var(--line-2)}
.hour dt{font:600 .7rem/1.2 var(--body);letter-spacing:.26em;text-transform:uppercase;color:var(--gold-l);margin-bottom:.65rem}
.hour dd{margin:0;color:var(--smoke);line-height:1.55;max-width:44ch}
.hour__quote{margin-top:.4rem;padding-left:1.2rem;border-left:2px solid var(--wax);font:italic 500 clamp(1.4rem,1.15rem + 1.1vw,2.1rem)/1.22 var(--ital);color:var(--gold-l);max-width:27ch}
@media (min-width:700px){.hour dl{grid-template-columns:1fr 1fr}}
@media (min-width:1000px){
  .shadow__grid{display:grid;gap:clamp(2rem,4.4vw,4.6rem);grid-template-columns:minmax(0,3.3fr) minmax(0,8.7fr);align-items:start}
  .shadow__dial{top:calc(var(--hd-h) + 2.4rem);margin:0;display:grid;place-items:center;padding:0;background:none;border:0;box-shadow:none;width:min(100%,22rem);aspect-ratio:1}
  .dial72{grid-area:1/1;width:100%;padding:10px}
  .dial72__nums{display:block}
  .dial72__read{grid-area:1/1;z-index:1;display:grid;justify-items:center;gap:.7rem}
  .dial72__read b{font-size:clamp(3.4rem,6vw,5.6rem);min-width:0}
  .hour__fig{aspect-ratio:2/1}
}
.nda{max-width:60rem;margin-inline:auto;padding:clamp(1.8rem,5vw,4.2rem);display:grid;gap:1.35rem;justify-items:start}
.nda__title{font:500 var(--s3)/1.06 var(--display);max-width:21ch}
.nda__rule{width:min(100%,15rem);--rc:#8C6A2F;--rc2:#6E5020}
.nda__clauses{list-style:none;width:100%;margin:.2rem 0 0;padding:0;border-top:1px solid rgba(122,92,44,.4)}
.nda__clauses li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:1.2rem;align-items:baseline;padding:1.25rem 0;border-bottom:1px solid rgba(122,92,44,.4);transition:padding-left .6s var(--ease)}
.nda__clauses li:hover{padding-left:.5rem}
.nda__clauses li > i{min-width:1.7rem;font:italic 500 1.2rem/1 var(--ital);color:var(--ox)}
.nda__clauses li > span{display:grid;gap:.35rem}
.nda__clauses b{font:500 var(--s1)/1.25 var(--display);color:var(--ink)}
.nda__clauses span span{color:#4A3B2B;line-height:1.55;max-width:58ch}
.nda__sign{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1rem,4vw,2.5rem);width:min(100%,32rem);margin-top:1.3rem;padding-right:clamp(0rem,12vw,7rem)}
.nda__sign span{position:relative;height:2.8rem;border-bottom:1px solid rgba(26,19,14,.7)}
.nda__sign i{position:absolute;left:.3rem;right:.3rem;bottom:.2rem;height:2rem;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 32' fill='none' stroke='%231A130E' stroke-width='1.3' stroke-linecap='round'%3E%3Cpath d='M3 24c9-18 14-22 16-12s-8 16-3 11 12-20 17-15-3 14 4 9 10-12 15-9-1 9 9 4 17-10 34-8 26 3 40-6'/%3E%3C/svg%3E") 0 100%/auto 100% no-repeat;opacity:.85}
.nda__sign b{position:absolute;left:0;bottom:.25rem;font:400 1.3rem/1 var(--display);color:var(--ox)}
.nda__wax{position:absolute;right:clamp(.8rem,5vw,4rem);bottom:clamp(.8rem,4vw,3rem);width:clamp(5rem,11vw,8.4rem);rotate:-10deg;transition:rotate .9s var(--ease),scale .5s var(--ease)}
.nda:hover .nda__wax{rotate:5deg;scale:1.04}

/* ================================================================ METHOD */
.lens{position:relative;--lx:50%;--ly:50%;--lr:clamp(4.2rem,10.5vw,7.4rem);margin:0 0 clamp(3rem,7vw,5.4rem);touch-action:pan-y}
.lens__field{position:relative;overflow:hidden;display:grid;min-height:clamp(12rem,27vw,18rem);border-block:1px solid var(--line-2);background:rgba(8,6,5,.55);box-shadow:inset 0 5px 0 -4px var(--line),inset 0 -5px 0 -4px var(--line)}
.lens__base,.lens__clear{grid-area:1/1;margin:0;display:grid;place-content:center;padding:1.5rem 1rem;text-align:center;font:italic 500 clamp(1.9rem,1rem + 4.7vw,5.1rem)/1.08 var(--ital);letter-spacing:-.01em;text-wrap:balance}
.lens__base{color:#8F8472;filter:blur(3.2px);opacity:.7}
.lens__hatch{grid-area:1/1;background:repeating-linear-gradient(57deg,rgba(233,207,149,.07) 0 1px,rgba(0,0,0,0) 1px 7px),repeating-linear-gradient(-33deg,rgba(233,207,149,.05) 0 1px,rgba(0,0,0,0) 1px 11px)}
.lens__clear{position:relative;color:var(--gold-w);background:radial-gradient(circle calc(var(--lr) * 1.1) at var(--lx) var(--ly),#3A2B1E,#140F0B 92%);-webkit-clip-path:circle(var(--lr) at var(--lx) var(--ly));clip-path:circle(var(--lr) at var(--lx) var(--ly));text-shadow:0 2px 18px rgba(0,0,0,.6)}
.lens__glass{position:absolute;z-index:2;left:var(--lx);top:var(--ly);width:calc(var(--lr) * 3.47);height:auto;max-width:none;translate:-32.7% -32.57%;pointer-events:none;filter:drop-shadow(0 18px 18px rgba(0,0,0,.65));-webkit-user-drag:none;user-select:none}
@media (hover:hover) and (pointer:fine){.lens{cursor:none}}
.pillars{border-bottom:1px solid var(--line-2)}
.pillar{border-top:1px solid var(--line-2)}
.pillar summary{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:clamp(.9rem,2.4vw,2rem);padding:clamp(1.2rem,2.6vw,2rem) 0;cursor:pointer;list-style:none;-webkit-tap-highlight-color:transparent}
.pillar summary::-webkit-details-marker{display:none}
.pillar summary:focus-visible{outline:2px solid var(--gold-l);outline-offset:4px}
.pillar__dial{width:clamp(3rem,5.4vw,4.6rem);aspect-ratio:1;border-radius:50%;padding:5px;background:conic-gradient(from 210deg,#7A5A26,#F6E3AE,#B98F4A,#FFF1CC,#8C6A2F,#E9CF95,#7A5A26);box-shadow:0 14px 22px -10px #000,inset 0 0 0 1px rgba(255,246,214,.6);transition:rotate .9s var(--ease)}
.pillar__dial b{display:grid;place-items:center;width:100%;height:100%;border-radius:50%;font:italic 500 clamp(1rem,1.9vw,1.5rem)/1 var(--ital);color:var(--gold-l);background:radial-gradient(circle at 35% 28%,#2E241D,#0B0908 72%);box-shadow:inset 0 0 0 2px #1A120A,inset 0 0 14px #000;transition:rotate .9s var(--ease)}
.pillar summary:hover .pillar__dial,.pillar[open] .pillar__dial{rotate:40deg}
.pillar summary:hover .pillar__dial b,.pillar[open] .pillar__dial b{rotate:-40deg}
.pillar__t{font:500 clamp(1.6rem,1rem + 3.1vw,4rem)/1.03 var(--display);letter-spacing:-.015em;transition:color .4s,translate .6s var(--ease)}
.pillar summary:hover .pillar__t{translate:.4rem 0;color:var(--gold-w)}
.pillar[open] .pillar__t{color:var(--gold-l)}
.pillar__ind{padding:.7rem .9rem;border:1px solid var(--line-2);font:600 .68rem/1 var(--body);letter-spacing:.26em;text-transform:uppercase;color:var(--gold-l);transition:background-color .4s,color .4s}
.pillar summary:hover .pillar__ind{background:var(--gold-l);color:#2A1D08}
.pillar__ind i{font-style:normal}
.pillar__ind i:last-child,.pillar[open] .pillar__ind i:first-child{display:none}
.pillar[open] .pillar__ind i:last-child{display:inline}
.pillar__content{display:grid;gap:clamp(1.6rem,3vw,2.4rem);padding:.4rem 0 clamp(2.4rem,5vw,4rem);animation:cmpin .8s var(--ease)}
.pillar__lead{font-size:var(--s1);line-height:1.52;color:var(--smoke);max-width:56ch}
.pillar__pair{display:grid;gap:1.2rem;max-width:70rem}
.pillar__down,.pillar__up{position:relative;display:grid;gap:.9rem;align-content:start;padding:clamp(1.4rem,3vw,2.3rem);transition:translate .7s var(--ease)}
.pillar__down{background:repeating-linear-gradient(57deg,rgba(233,207,149,.04) 0 1px,rgba(0,0,0,0) 1px 9px),#17110D;border:1px dashed rgba(233,207,149,.45);color:var(--smoke)}
.pillar__up:hover{translate:0 -5px}
.pillar__down h3,.pillar__up h3{font:600 .72rem/1 var(--body);letter-spacing:.28em;text-transform:uppercase}
.pillar__down h3{color:#D9A79A}
.pillar__down p{line-height:1.55}
.pillar__up h3{color:var(--ox)}
.pillar__up p{font:500 var(--s1)/1.38 var(--display);color:var(--ink)}
.pillar__quote{font:italic 500 clamp(1.55rem,1.2rem + 1.6vw,2.7rem)/1.16 var(--ital);color:var(--gold-l);max-width:25ch}
@media (min-width:760px){.pillar__pair{grid-template-columns:1fr 1fr}}
@media (min-width:1000px){
  .pillar__content{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);column-gap:clamp(2rem,5vw,5rem);align-items:start}
  .pillar__lead,.pillar__pair{grid-column:1;max-width:none}
  .pillar__quote{grid-column:2;grid-row:1 / span 2;align-self:center;padding-left:1.4rem;border-left:2px solid var(--wax)}
}
@media (max-width:520px){.pillar__ind{padding:.6rem .6rem;letter-spacing:.18em}}

/* ================================================================ PROGRAMS */
.progs{display:grid;gap:clamp(1.8rem,2.6vw,2.4rem);max-width:30rem;margin-inline:auto}
.prog{--rx:0deg;--ry:0deg;--lift:0px;display:flex;flex-direction:column;align-items:center;gap:.95rem;min-width:0;text-align:center;padding:clamp(1.8rem,3vw,2.6rem) clamp(1.4rem,2.4vw,2.2rem) clamp(2rem,3vw,2.6rem);transform:perspective(1000px) translateY(var(--lift)) rotateX(var(--rx)) rotateY(var(--ry));transition:transform .7s var(--ease),box-shadow .6s var(--ease)}
.js .prog.rv{transition:opacity 1s var(--ease),translate 1.1s var(--ease),transform .7s var(--ease),box-shadow .6s var(--ease)}
.js .prog.rv[data-d="1"]{transition-delay:.12s,.12s,0s,0s}
.js .prog.rv[data-d="2"]{transition-delay:.24s,.24s,0s,0s}
.prog:hover,.prog:focus-within{--lift:-8px;box-shadow:inset 0 0 0 1px rgba(122,92,44,.7),inset 0 0 0 6px rgba(244,237,221,.75),inset 0 0 0 7px rgba(122,92,44,.5),0 0 50px -12px rgba(233,207,149,.5),0 50px 60px -30px #000}
.prog__corner{position:absolute;width:clamp(2.6rem,4.4vw,3.6rem);height:auto;max-width:none;pointer-events:none;filter:sepia(.2) saturate(.9) brightness(.82)}
.prog__corner.c-tl{left:0;top:0;translate:-4% -7%}
.prog__corner.c-br{right:0;bottom:0;translate:4% 7%;scale:-1 -1}
.prog__vig{position:relative;flex:none;width:min(64%,13.5rem);aspect-ratio:1;mix-blend-mode:multiply;-webkit-mask:radial-gradient(closest-side,#000 60%,rgba(0,0,0,0) 100%);mask:radial-gradient(closest-side,#000 60%,rgba(0,0,0,0) 100%);transition:scale 1.2s var(--ease),rotate 1.2s var(--ease)}
.prog__vig img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.prog:hover .prog__vig{scale:1.08;rotate:-3deg}
.prog__dur{font:600 .72rem/1.3 var(--body);letter-spacing:.28em;text-transform:uppercase;color:var(--ox)}
.prog__t{font:500 clamp(1.6rem,1.25rem + 1.2vw,2.25rem)/1.08 var(--display)}
.prog__rule{width:min(60%,11rem);--rc:#8C6A2F;--rc2:#6E5020;flex:none}
.prog__text{color:#3B2E22;line-height:1.58;max-width:34ch;margin-bottom:.4rem}
.prog .tlink{margin-top:auto;color:var(--ox);text-align:left}
.prog .tlink:hover{color:var(--wax)}
@media (min-width:960px){.progs{grid-template-columns:repeat(3,minmax(0,1fr));max-width:none}}

/* ================================================================ LETTERS */
.letters__tools{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem 2rem;margin-bottom:clamp(2.4rem,5vw,3.8rem);padding-bottom:1.5rem;border-bottom:1px solid var(--line-2);font:italic 400 var(--s1)/1.4 var(--ital);color:#DDE9E1}
.letters__grid{display:grid;gap:clamp(1.8rem,3.2vw,2.8rem);align-items:start;max-width:36rem;margin-inline:auto}
.letter{display:grid;grid-template-columns:minmax(0,1fr);gap:1.2rem;align-content:start;min-width:0;padding:clamp(1.5rem,2.6vw,2.3rem)}
.js .letter.rv{transition:opacity 1s var(--ease),translate 1.1s var(--ease),rotate .6s var(--ease),transform .6s var(--ease),box-shadow .6s var(--ease)}
.letter:nth-child(odd){rotate:-.9deg}
.letter:nth-child(even){rotate:.8deg}
.letter:hover,.letter:focus-within{rotate:0deg;transform:translateY(-6px);box-shadow:inset 0 0 0 1px rgba(122,92,44,.5),inset 0 0 0 6px rgba(244,237,221,.75),inset 0 0 0 7px rgba(122,92,44,.35),0 0 44px -14px rgba(233,207,149,.45),0 50px 60px -30px #000}
.postmark{position:absolute;right:1.1rem;top:1rem;display:flex;align-items:center;color:var(--st,#5E1B17);opacity:.8;rotate:-7deg;transition:rotate .9s var(--ease)}
.letter:hover .postmark{rotate:3deg}
.postmark svg{width:3rem;height:auto;margin-right:-.4rem}
.postmark b{width:3.1rem;height:3.1rem;border-radius:50%;display:grid;place-items:center;font:500 1.1rem/1 var(--display);border:1.5px solid currentColor;box-shadow:inset 0 0 0 3px #F4EDDD,inset 0 0 0 4px currentColor}
.letter header{display:grid;gap:.5rem;align-content:end;min-height:3.9rem;padding:0 6rem 1.1rem 0;border-bottom:1px solid rgba(122,92,44,.4)}
.letter header span:first-child{font:600 .74rem/1.25 var(--body);letter-spacing:.26em;text-transform:uppercase;color:var(--ox)}
.letter header span:last-child{font-size:.9rem;line-height:1.35;color:#5A4A36}
.letter blockquote{margin:0;font:500 clamp(1.2rem,1.06rem + .55vw,1.5rem)/1.44 var(--display);color:var(--ink);text-wrap:pretty}
.letter footer{display:grid;gap:.9rem;padding-top:1.1rem;border-top:1px solid rgba(122,92,44,.4)}
.letter__shift{font:italic 500 clamp(1.08rem,1rem + .4vw,1.3rem)/1.36 var(--ital);color:var(--ox)}
.letter__sig{font:600 .68rem/1.5 var(--body);letter-spacing:.2em;text-transform:uppercase;color:#5A4A36}
.redact{cursor:pointer;background:#17110C;color:transparent;padding:0 .12em;border-radius:1px;-webkit-box-decoration-break:clone;box-decoration-break:clone;transition:background-color .45s,color .45s,box-shadow .45s;-webkit-tap-highlight-color:transparent}
.redact:hover{background:#3A2C22}
.redact[aria-pressed="true"]{background:rgba(142,35,28,.09);color:var(--ink);box-shadow:inset 0 -2px 0 var(--wax)}
.redact:focus-visible{outline:2px solid var(--wax);outline-offset:2px}
@media (min-width:1000px){.letters__grid{grid-template-columns:repeat(3,minmax(0,1fr));max-width:none}}

/* ================================================================ ABOUT */
.profile__grid{display:grid;gap:clamp(2rem,5vw,5rem);padding-block:clamp(.5rem,2vw,1.5rem)}
.profile__head{min-width:0}
.profile__rule{width:min(100%,15rem);margin:1.6rem 0 0;--rc:#8C6A2F;--rc2:#6E5020}
.window{margin:1.2rem 0 0 -1rem;width:min(108%,33rem);max-width:none;mix-blend-mode:multiply;-webkit-mask:radial-gradient(ellipse 50% 50% at 50% 50%,#000 58%,rgba(0,0,0,0) 100%);mask:radial-gradient(ellipse 50% 50% at 50% 50%,#000 58%,rgba(0,0,0,0) 100%)}
.js .window.rv{transition:opacity 1s var(--ease) .2s,translate 1.1s var(--ease) .2s,scale 2.4s var(--ease)}
.window:hover{scale:1.03}
.window img{width:100%;height:auto}
.prose{display:grid;gap:1.45rem;max-width:41rem;min-width:0}
.prose p{font-size:var(--s1);line-height:1.68;color:#33271C}
.prose__first::first-letter{float:left;font:500 4.3em/.8 var(--display);padding:.07em .07em 0 0;color:var(--ox)}
.prose p.prose__end{font:italic 500 clamp(1.22rem,1.1rem + .65vw,1.58rem)/1.46 var(--ital);color:var(--ink);padding-top:1.5rem;border-top:1px solid rgba(122,92,44,.45)}
@media (min-width:1000px){
  .profile__grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:start}
  .profile__head{position:sticky;top:calc(var(--hd-h) + 2rem)}
}

/* ================================================================ APPLICATION */
.form{max-width:56rem;margin-inline:auto;padding:clamp(1.5rem,3.8vw,3.4rem)}
.form__grid{display:grid;gap:0 2.4rem}
.sens{border:0;margin:0;padding:0 0 1.3rem;border-bottom:1px solid rgba(122,92,44,.4);min-width:0}
.sens legend,.field label{font:600 .7rem/1.25 var(--body);letter-spacing:.24em;text-transform:uppercase;color:var(--sepia);padding:0}
.sens legend{margin-bottom:.95rem}
.sens div{display:flex;flex-wrap:wrap;gap:.5rem}
.sens label{position:relative;cursor:pointer}
.sens input{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;cursor:pointer}
.sens span{display:block;padding:.72rem 1.05rem;border:1px solid rgba(122,92,44,.5);font:500 var(--s0)/1 var(--display);color:#4A3B2B;transition:background-color .3s,color .3s,border-color .3s,translate .3s var(--ease)}
.sens label:hover span{border-color:var(--ox);translate:0 -2px}
.sens input:checked + span{background:var(--ink);border-color:var(--ink);color:var(--gold-l)}
.sens input:focus-visible + span{outline:2px solid var(--wax);outline-offset:2px}
.field{display:grid;gap:.4rem;min-width:0;padding:1.05rem 0;border-bottom:1px solid rgba(122,92,44,.4);transition:border-color .3s,box-shadow .3s}
.field input,.field textarea{all:unset;box-sizing:border-box;display:block;width:100%;min-width:0;font:500 clamp(1.25rem,1.1rem + .7vw,1.7rem)/1.25 var(--display);color:var(--ink);padding:.2rem 0;overflow-wrap:anywhere}
.field textarea{min-height:6.5rem;resize:vertical;line-height:1.32;white-space:pre-wrap}
.field:focus-within{border-color:var(--wax);box-shadow:0 1px 0 var(--wax)}
.field__err{display:none;font-size:.9rem;line-height:1.4;color:var(--wax)}
.field.is-invalid{border-color:var(--wax);box-shadow:0 1px 0 var(--wax)}
.field.is-invalid .field__err{display:block}
.field__hint{font-size:.9rem;line-height:1.5;color:#5A4A36;max-width:56ch}
.form__foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1.5rem;padding-top:1.8rem}
.form__foot p{flex:1 1 15rem;max-width:40ch;font-size:.9rem;line-height:1.5;color:#5A4A36}
.form__error{grid-column:1 / -1;margin:1.15rem 0 0;padding:.7rem 1rem;border-left:3px solid var(--wax);background:rgba(110,26,26,.06);font-size:.95rem;line-height:1.5;color:var(--wax)}
.form__hp{position:absolute !important;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.form__grid.is-sending .btn-brass{opacity:.6;cursor:progress}
.done{display:grid;gap:1.3rem;justify-items:start;padding:clamp(.6rem,2vw,1.6rem) 0;animation:cmpin .8s var(--ease)}
.done h2{font:500 var(--s3)/1.05 var(--display);max-width:16ch}
.done h2:focus{outline:none}
.done p{font-size:var(--s1);line-height:1.52;color:#3B2E22;max-width:40ch}
.done .tlink{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:.8rem;padding:.5rem 0;font:600 .76rem/1.25 var(--body);letter-spacing:.2em;text-transform:uppercase;color:var(--ox);background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;transition:color .3s,background-size .6s var(--ease)}
.done .tlink:hover{color:var(--wax);background-size:0 1px;background-position:100% 100%}
.done .tlink:focus-visible{outline:2px solid var(--wax);outline-offset:3px}
.form__wax{position:absolute;right:clamp(-1.2rem,-1.4vw,-.4rem);top:clamp(-1.8rem,-2.4vw,-.9rem);width:clamp(5.4rem,10vw,8.4rem);rotate:14deg;scale:1.9;opacity:0;pointer-events:none;transition:scale .5s cubic-bezier(.2,1.4,.4,1),opacity .2s}
.form.is-sealed .form__wax{scale:1;opacity:1}
@media (min-width:700px){.form__grid{grid-template-columns:1fr 1fr}.sens,.field--wide,.form__foot{grid-column:1 / -1}}

/* ================================================================ THE FORUM (the house library, for reading) */
/* Four kinds of page: the library (forum home), the directory (all forums), a forum (its threads) and a thread (its
   letters). Members write on johnnydoe.is; here everything is for reading, so there is no form anywhere and every
   reply link leaves for the forum. Each section keeps one tone: Freedom Tactics on the green wall, Freedom of Thought
   on ivory, the community and the Gold vault on oxblood leather, the Archive on baize. Posts are ivory letters. */
.hd__nav a[aria-current="true"]{color:var(--gold-w)}
.hd__nav a[aria-current="true"]::before{scale:1 1}
.menu__list a[aria-current="true"]{color:var(--gold-l)}
.ft__nav a[aria-current="true"]{color:var(--gold-w);background-size:100% 1px}
[id^="sec-"]{scroll-margin-top:calc(var(--hd-h) + 1rem)}
@media (min-width:1120px) and (max-width:1339px){.hd__nav{gap:1.05rem;margin-right:.5rem}}
.menu.is-open .menu__list a:nth-child(8){transition-delay:.35s}
@media (max-height:700px){.menu__list a{font-size:clamp(1.6rem,6.4vw,2.4rem);padding:.4rem 0}}

/* ---------- plate, forum fittings ---------- */
.crumbs{display:flex;align-items:center;gap:.3rem .7rem;width:100%;margin:0 0 1.25rem;padding:0;list-style:none;font:500 .84rem/1.3 var(--body);letter-spacing:.05em;color:var(--smoke);white-space:nowrap}
.crumbs li{display:flex;align-items:center;gap:.7rem;flex:none;min-width:0}
.crumbs li > *{min-width:0;overflow:hidden;text-overflow:ellipsis}
.crumbs li:last-child{flex:0 1 auto}
.crumbs li:not(:first-child):not(:last-child){flex:0 1000000 auto;min-width:4.6em}
.plate--slim .plate__copy{grid-template-columns:minmax(0,1fr)}
.plate__copy > nav{justify-self:stretch;min-width:0}
.crumbs li + li::before{content:"";width:5px;height:5px;rotate:45deg;background:var(--gold);flex:none}
@media (max-width:599px){.crumbs{gap:.3rem .42rem;font-size:.8rem;letter-spacing:.012em;margin-bottom:1.05rem}.crumbs li{gap:.42rem}.crumbs li + li::before{width:4px;height:4px}}
.crumbs a{color:var(--smoke);text-decoration:none;padding:.3rem 0;background:linear-gradient(var(--gold-l),var(--gold-l)) 0 100%/0 1px no-repeat;transition:color .3s,background-size .5s var(--ease)}
.crumbs a:hover{color:var(--gold-w);background-size:100% 1px}
.crumbs [aria-current]{color:var(--gold-l)}
.label__no--sm{font-size:.8rem;letter-spacing:0}
/* on a phone a slim plate is one lit picture with the words on it, not words and then a strip of picture */
@media (max-width:859px){
  .plate--slim .plate__bg{position:absolute;inset:calc(var(--hd-h) + env(safe-area-inset-top,0px)) 0 0 0;order:0;aspect-ratio:auto;margin:0}
  .plate--slim .plate__img{object-position:100% 50%;-webkit-mask:linear-gradient(90deg,rgba(0,0,0,0) 0,#000 62%);mask:linear-gradient(90deg,rgba(0,0,0,0) 0,#000 62%)}
  .plate--slim .plate__shade{display:block;background:linear-gradient(180deg,rgba(var(--tone),.42) 0%,rgba(var(--tone),.6) 55%,rgba(var(--tone),.86) 100%),linear-gradient(90deg,rgba(var(--tone),.86) 0%,rgba(var(--tone),.6) 55%,rgba(var(--tone),.3) 100%)}
  .plate--slim .plate__copy{padding-top:clamp(1.7rem,6vw,2.6rem);padding-bottom:clamp(1.8rem,6.5vw,2.6rem)}
  .plate--slim .plate__rule{margin:1.15rem 0 1.1rem}
}
.plate__title--thread{font-size:clamp(1.6rem,1.05rem + 2.3vw,3.1rem);line-height:1.12;max-width:19em;text-wrap:balance}
.pfacts{--fp:clamp(.68rem,3.3vw,1.6rem);display:flex;flex-wrap:wrap;gap:.9rem var(--fp);margin:1.5rem 0 0 calc(-1 * var(--fp) - 1px);padding:0;clip-path:inset(-1rem -1rem -1rem 1px)}
.pfacts div{display:flex;flex-direction:column-reverse;gap:.35rem;padding:0 0 0 var(--fp);border-left:1px solid var(--line-2)}
.pfacts dd{margin:0;font:500 clamp(1.45rem,1.2rem + 1vw,2.1rem)/1 var(--display);font-variant-numeric:lining-nums;color:var(--gold-l)}
.pfacts dt{font:600 .64rem/1.2 var(--body);letter-spacing:.24em;text-transform:uppercase;color:var(--smoke)}
.plate__acts{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.8rem;margin-top:1.7rem}
.plate__note{font:italic 400 .98rem/1.35 var(--ital);color:var(--gold-l);max-width:19rem}
/* who started the thread, and its two numbers: one row. If a long name and big numbers cannot share it,
   the numbers drop a line and start flush left, their first rule out of sight */
.tmeta{--tp:clamp(.62rem,3.2vw,1.3rem);display:flex;flex-wrap:wrap;align-items:center;gap:.95rem calc(var(--tp) * 2 + 1px);width:100%;max-width:31rem;margin:0;text-shadow:0 1px 14px rgba(0,0,0,.8);clip-path:inset(-1.5rem -1.5rem -1.5rem -.5rem)}
.tmeta__by{display:flex;align-items:center;gap:.75rem;flex:1 1 8.2rem;min-width:0;margin:0}
.tmeta .sealav{--sz:clamp(2.5rem,10vw,2.9rem);--ring:#0B1F19}
.tmeta__who{display:grid;gap:.22rem;min-width:0}
.tmeta__who b{font:600 1.06rem/1.15 var(--display);letter-spacing:.02em;color:var(--gold-l);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tmeta__who time{font-size:.86rem;line-height:1.2;color:#D9CFBD;white-space:nowrap}
.tmeta__n{display:flex;flex:none;gap:0 var(--tp);margin:0 0 0 calc(-1 * var(--tp) - 1px)}
.tmeta__n div{display:flex;flex-direction:column-reverse;align-items:flex-start;gap:.3rem;padding:0 0 0 var(--tp);border-left:1px solid var(--line-2)}
.tmeta__n dd{margin:0;font:500 clamp(1.3rem,1.1rem + .9vw,1.7rem)/1 var(--display);font-variant-numeric:lining-nums;color:var(--gold-l)}
.tmeta__n dt{font:600 .6rem/1.2 var(--body);letter-spacing:.2em;text-transform:uppercase;color:var(--smoke)}
@media (min-width:860px){
  .plate--slim{min-height:clamp(23rem,31vw,36rem)}
  .plate--slim .plate__copy{padding-bottom:clamp(2.2rem,3.2vw,3.2rem)}
  .plate--slim .plate__title{font-size:clamp(2.4rem,4.2vw,4.7rem)}
  .plate--slim .plate__title--thread{font-size:clamp(1.8rem,2.75vw,3.3rem)}
  .plate--slim .plate__shade{background:linear-gradient(90deg,rgba(var(--tone),.95) 0%,rgba(var(--tone),.74) 38%,rgba(var(--tone),.1) 72%,rgba(var(--tone),0) 100%)}
}

/* ---------- small parts shared by the four pages ---------- */
.sealav{--av:#5E1B17;--sz:2.7rem;--ring:#0A0807;position:relative;flex:none;width:var(--sz);height:var(--sz);border-radius:50%;display:grid;place-items:center;
  font:italic 500 calc(var(--sz) * .37)/1 var(--ital);letter-spacing:-.01em;color:#F6E7C4;text-shadow:0 1px 0 rgba(0,0,0,.6),0 -1px 0 rgba(255,255,255,.14);
  background:radial-gradient(circle at 34% 26%,rgba(255,255,255,.3),rgba(255,255,255,0) 46%),radial-gradient(circle,rgba(0,0,0,0) 57%,rgba(0,0,0,.32) 61%,rgba(0,0,0,0) 67%),var(--av);
  box-shadow:0 0 0 1px rgba(233,207,149,.62),0 0 0 3px var(--ring),0 0 0 4px rgba(122,90,38,.9),0 8px 14px -6px #000;transition:rotate .8s var(--ease),box-shadow .5s}
.bhead{display:grid;gap:.95rem;margin-bottom:clamp(2rem,4vw,3.2rem);max-width:46rem}
.bhead__k{display:flex;align-items:center;gap:.9rem;font:600 .76rem/1.2 var(--body);letter-spacing:.3em;text-transform:uppercase;color:var(--gold-l)}
.bhead__k b{width:2.5rem;height:2.5rem;flex:none;border-radius:50%;display:grid;place-items:center;font:italic 500 1rem/1 var(--ital);letter-spacing:0;text-transform:none;color:var(--gold-l);background:#090706;box-shadow:0 0 0 1px var(--gold),0 0 0 3px #090706,0 0 0 4px var(--gold-d)}
.bhead__k::after{content:"";flex:0 1 7rem;height:7px;background:linear-gradient(90deg,var(--gold),rgba(196,155,85,0)) 0 50%/100% 1px no-repeat,radial-gradient(circle at 0 50%,var(--gold-l) 0 2.5px,rgba(0,0,0,0) 3px)}
.bhead__t{font:500 var(--s3)/1.06 var(--display);letter-spacing:-.012em}
.bhead__t em{font-style:italic;font-family:var(--ital);color:var(--gold-l)}
.bhead__s{font:italic 400 var(--s1)/1.42 var(--ital);color:#DDD2BF;max-width:38rem}
.band--paper .bhead__k{color:var(--sepia)}
.band--paper .bhead__k b{box-shadow:0 0 0 1px var(--gold-d),0 0 0 3px #F3EBD9,0 0 0 4px rgba(110,82,38,.55)}
.band--paper .bhead__k::after{background:linear-gradient(90deg,#8C6A2F,rgba(140,106,47,0)) 0 50%/100% 1px no-repeat,radial-gradient(circle at 0 50%,#6E5020 0 2.5px,rgba(0,0,0,0) 3px)}
.band--paper .bhead__t em{color:var(--ox)}
.band--paper .bhead__s{color:#5A4A36}
.bhead--sm .bhead__t{font-size:var(--s2)}
.chips{display:flex;flex-wrap:wrap;gap:.4rem .5rem;margin:0;padding:0;list-style:none}
.chips li{padding:.36rem .72rem;border:1px solid rgba(233,207,149,.42);background:rgba(12,5,5,.4);font-size:.8rem;line-height:1.2;color:var(--gold-l)}

/* thread rows: a ledger line with a brass ribbon */
.tlist{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-2)}
.tlist > li{border-bottom:1px solid var(--line)}
.trow{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:.9rem 1.1rem;padding:1.05rem .5rem 1.05rem .9rem;text-decoration:none;color:var(--bone);transition:background-color .4s,padding-left .5s var(--ease)}
.trow::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--brass);scale:1 0;transform-origin:50% 0;transition:scale .5s var(--ease)}
.trow:hover,.trow:focus-visible{background:rgba(233,207,149,.06);padding-left:1.35rem}
.trow:hover::before,.trow:focus-visible::before{scale:1 1}
.trow:focus-visible{outline-offset:-2px}
.trow:hover .sealav{rotate:-10deg;box-shadow:0 0 0 1px var(--gold-l),0 0 0 3px var(--ring),0 0 0 4px var(--gold),0 0 18px rgba(233,207,149,.35)}
.trow__t{min-width:0;display:grid;gap:.32rem}
.trow h3{font:500 clamp(1.08rem,1rem + .35vw,1.3rem)/1.25 var(--display);letter-spacing:0;text-wrap:pretty;transition:color .3s}
.trow:hover h3,.trow:focus-visible h3{color:var(--gold-w)}
.trow__m{font-size:.86rem;line-height:1.45;color:#B9AE9C}
.trow__m b{font-weight:500;color:var(--gold-l)}
.trow__n,.trow__l{display:none}
.tcols{display:none}
@media (min-width:900px){
  .tlist--full .trow,.tcols{grid-template-columns:auto minmax(0,1fr) 4.6rem 4.6rem 10.5rem}
  .tlist--full .trow__n{display:block;text-align:right;font:500 1.2rem/1 var(--display);font-variant-numeric:lining-nums;color:var(--bone)}
  .tlist--full .trow__n.is-hot{color:var(--gold-l)}
  .tlist--full .trow__l{display:grid;gap:.2rem;justify-items:end;text-align:right;font-size:.84rem;line-height:1.3;color:#B9AE9C}
  .tlist--full .trow__l b{font-weight:500;color:var(--bone)}
  .tlist--full .trow__x{display:none}
  .tcols{display:grid;gap:0 1.1rem;padding:0 .5rem .7rem .9rem;font:600 .64rem/1 var(--body);letter-spacing:.24em;text-transform:uppercase;color:#A99E8C}
  .tcols span:nth-child(1){grid-column:1 / span 2}
  .tcols span:nth-child(n+2){text-align:right}
}
.thead{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.5rem 2rem;margin-bottom:1.3rem}
.thead h2{font:500 var(--s2)/1.1 var(--display)}
.thead h2 em{font-style:italic;font-family:var(--ital);color:var(--gold-l)}
.thead p{font:italic 400 1.02rem/1.3 var(--ital);color:var(--gold)}
.pager{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin-top:1.9rem}
.pager a,.pager span{min-width:2.9rem;min-height:2.9rem;display:inline-grid;place-items:center;padding:0 1.05rem;text-decoration:none;font:500 1.02rem/1 var(--display);font-variant-numeric:lining-nums;color:var(--bone);border:1px solid var(--line-2);background:rgba(10,8,7,.4);transition:color .3s,border-color .3s,background-color .3s}
.pager a:hover{color:var(--gold-w);border-color:var(--gold-l);background:rgba(233,207,149,.09)}
.pager [aria-current]{color:#2A1D08;border-color:transparent;background:var(--brass);background-size:220% 100%;text-shadow:0 1px 0 rgba(255,240,200,.55);box-shadow:inset 0 1px 0 rgba(255,248,220,.9),inset 0 0 0 1px rgba(90,63,20,.7)}
.pager__gap{border:0 !important;background:none !important;min-width:1.4rem !important;padding:0 !important;color:var(--gold) !important}

/* two columns with a side that stays in view */
.cols{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(2.2rem,4vw,3.4rem)}
.cols__main{min-width:0}
.cols__side{display:grid;gap:1.4rem;min-width:0;align-content:start}
@media (min-width:1100px){.cols{grid-template-columns:minmax(0,1fr) 20.5rem;align-items:start}.cols__side{position:sticky;top:calc(var(--hd-h) + 1.4rem)}}
@media (min-width:700px) and (max-width:1099px){.cols__side{grid-template-columns:repeat(2,minmax(0,1fr))}.cols__side > .sidec--wide{grid-column:1 / -1}}
.sidec{position:relative;min-width:0;padding:1.4rem 1.4rem 1.5rem;color:var(--bone);background:rgba(10,8,7,.74);box-shadow:0 0 0 1px var(--line-2),inset 0 0 0 4px rgba(7,5,4,.55),inset 0 0 0 5px rgba(233,207,149,.13),0 30px 50px -34px #000}
.sidec__k{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin:0 0 1rem;font:600 .7rem/1.2 var(--body);letter-spacing:.28em;text-transform:uppercase;color:var(--gold-l)}
.sidec__k b{font:500 1rem/1 var(--display);letter-spacing:0;color:var(--bone)}
.sidec dl{display:grid;gap:.55rem;margin:0}
.sidec dl div{display:flex;justify-content:space-between;gap:1rem;font-size:.94rem;padding-bottom:.55rem;border-bottom:1px solid var(--line)}
.sidec dl div:last-child{border-bottom:0;padding-bottom:0}
.sidec dt{color:#B9AE9C}
.sidec dd{margin:0;color:var(--bone);text-align:right}
.people{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .1rem;margin-top:1.1rem}
.people .sealav{--sz:2.25rem;margin-right:-.3rem}
.people em{margin-left:.9rem;font:italic 400 .95rem/1 var(--ital);color:var(--gold)}
.sib{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:.9rem;padding:.6rem 0;text-decoration:none;color:var(--bone);border-top:1px solid var(--line);transition:color .3s,padding-left .5s var(--ease)}
.sib:first-of-type{border-top:0}
.sib__img{position:relative;width:3.1rem;aspect-ratio:1;overflow:hidden;box-shadow:0 0 0 1px rgba(233,207,149,.55),0 0 0 3px #0A0807,0 0 0 4px rgba(233,207,149,.2)}
.sib__img img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:82% 50%;transition:scale 1.2s var(--ease)}
.sib b{display:block;font:500 1.04rem/1.2 var(--display)}
.sib small{display:block;margin-top:.2rem;font-size:.82rem;color:#B9AE9C}
.sib:hover{color:var(--gold-w);padding-left:.35rem}
.sib:hover .sib__img img{scale:1.14}
.sidec .tlink{margin-top:1rem}
.sidec__src{margin:1.1rem 0 0;padding-top:.9rem;border-top:1px solid var(--line);font-size:.86rem;color:#B9AE9C}
.sidec--ox{background:radial-gradient(120% 90% at 0% 0%,#5E1B17,#2A0B0B 62%,#1C0707);box-shadow:0 0 0 1px var(--gold),inset 0 0 0 4px rgba(18,5,5,.6),inset 0 0 0 5px rgba(233,207,149,.26),0 30px 50px -34px #000}
.sidec--ox h3{font:500 1.55rem/1.12 var(--display);margin-bottom:.6rem}
.sidec--ox h3 em{font-style:italic;font-family:var(--ital);color:var(--gold-l)}
.sidec--ox p{font-size:.96rem;color:#E6D9C4;margin-bottom:1.2rem}
.sidec--pic{padding:0;overflow:hidden;display:block;text-decoration:none}
.sidec--pic img{display:block;width:100%;height:auto;aspect-ratio:16/8;object-fit:cover;object-position:80% 45%;transition:scale 1.6s var(--ease)}
.sidec--pic:hover img{scale:1.07}
.sidec--pic span{position:relative;display:grid;gap:.25rem;padding:1rem 1.4rem 1.25rem;background:linear-gradient(180deg,rgba(10,8,7,0),#0A0807 34%);margin-top:-2.4rem}
.sidec--pic b{font:500 1.3rem/1.15 var(--display);transition:color .3s}
.sidec--pic small{font-size:.86rem;color:#B9AE9C}
.sidec--pic:hover b{color:var(--gold-w)}
.simlist{list-style:none;margin:0;padding:0}
.simlist li + li{border-top:1px solid var(--line)}
.simlist a{display:grid;gap:.25rem;padding:.8rem 0;text-decoration:none;color:var(--bone);transition:color .3s,padding-left .5s var(--ease)}
.simlist a:hover{color:var(--gold-w);padding-left:.35rem}
.simlist b{font:500 1.04rem/1.28 var(--display);text-wrap:pretty}
.simlist small{font-size:.82rem;color:#B9AE9C}

/* ================================================================ THE LIBRARY (forum home) */
.fstats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin:0 0 clamp(2.6rem,5.5vw,4.6rem);border-block:1px solid var(--line-2);box-shadow:inset 0 4px 0 -3px var(--line),inset 0 -4px 0 -3px var(--line)}
.fstat{display:flex;flex-direction:column-reverse;align-items:center;gap:.55rem;padding:clamp(1.2rem,2.4vw,2rem) .5rem;text-align:center;min-width:0}
.fstat:nth-child(even){border-left:1px solid var(--line)}
.fstat:nth-child(n+3){border-top:1px solid var(--line)}
.fstat dd{margin:0;font:500 clamp(1.9rem,1.3rem + 2.3vw,3.4rem)/1 var(--display);font-variant-numeric:lining-nums tabular-nums;background:var(--foil);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:sheen 9s ease-in-out infinite}
.fstat dt{font:600 .66rem/1.3 var(--body);letter-spacing:.24em;text-transform:uppercase;color:var(--smoke)}
@media (min-width:760px){.fstats{grid-template-columns:repeat(4,minmax(0,1fr))}.fstat:nth-child(n){border-top:0;border-left:1px solid var(--line)}.fstat:first-child{border-left:0}}
.stacks__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(2.6rem,5vw,5rem)}
.stacks__shelf{min-width:0;order:-1}
@media (min-width:1000px){.stacks__grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:start}.stacks__shelf{order:0;position:sticky;top:calc(var(--hd-h) + 1.4rem)}}

/* five volumes on a shelf, one per section */
.shelf{position:relative;isolation:isolate;display:flex;align-items:flex-end;justify-content:center;gap:clamp(.3rem,.7vw,.55rem);height:clamp(20.5rem,56vw,22.5rem);padding:0 clamp(.5rem,2vw,1.5rem) 1.05rem}
.shelf::before{content:"";position:absolute;inset:0 0 1.05rem;z-index:-2;background:radial-gradient(70% 100% at 50% 100%,rgba(233,207,149,.13),rgba(233,207,149,0) 72%),repeating-linear-gradient(90deg,rgba(233,207,149,.05) 0 1px,rgba(0,0,0,0) 1px 3.2rem);-webkit-mask:linear-gradient(180deg,rgba(0,0,0,0),#000 55%);mask:linear-gradient(180deg,rgba(0,0,0,0),#000 55%)}
.shelf::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.05rem;z-index:-1;background:linear-gradient(180deg,#6A4628,#2E1C11 55%,#150C07);box-shadow:inset 0 1px 0 rgba(255,224,170,.45),inset 0 3px 0 -1px rgba(233,207,149,.18),0 22px 30px -10px #000}
.spine{--c1:#17443A;--c2:#0B241E;--tilt:-2.5deg;position:relative;flex:var(--w,1) 1 0;max-width:calc(var(--w,1) * 5.4rem);min-width:0;height:var(--h,90%);display:grid;grid-template-rows:auto minmax(0,1fr) auto;justify-items:center;align-items:center;gap:.7rem;padding:1rem .15rem .85rem;text-decoration:none;color:var(--gold-l);
  background:linear-gradient(90deg,rgba(0,0,0,.55) 0,rgba(255,255,255,.09) 13%,rgba(255,255,255,0) 30%,rgba(0,0,0,0) 72%,rgba(0,0,0,.5) 100%),linear-gradient(180deg,var(--c1),var(--c2));
  border-radius:3px 3px 1px 1px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.55),inset 0 2px 0 rgba(255,255,255,.08);transform-origin:50% 100%;transition:translate .6s var(--ease),rotate .6s var(--ease),box-shadow .5s,filter .5s;-webkit-tap-highlight-color:transparent}
.spine::before,.spine::after{content:"";position:absolute;left:0;right:0;height:.55rem;border-block:1px solid rgba(233,207,149,.7);background:linear-gradient(90deg,rgba(233,207,149,.05),rgba(233,207,149,.26) 30%,rgba(233,207,149,.05))}
.spine::before{top:3rem}
.spine::after{bottom:3.3rem}
.spine i{font:500 1.15rem/1 var(--display);font-style:normal;color:var(--gold-l)}
.spine b{writing-mode:vertical-rl;rotate:180deg;max-height:100%;padding-block:.9rem;overflow:hidden;font:600 clamp(.62rem,.52rem + .32vw,.78rem)/1.15 var(--body);letter-spacing:.2em;text-transform:uppercase;white-space:nowrap;text-shadow:0 1px 0 rgba(0,0,0,.6)}
.spine small{width:1.9rem;height:1.9rem;border-radius:50%;display:grid;place-items:center;font:500 .86rem/1 var(--display);font-variant-numeric:lining-nums;color:#2A1D08;background:var(--brass);background-size:220% 100%;box-shadow:inset 0 1px 0 rgba(255,246,214,.85),0 3px 6px rgba(0,0,0,.6)}
@media (max-width:520px){.spine b{letter-spacing:.13em}}
.spine--thought{--c1:#6A2224;--c2:#34100F;--tilt:2deg}
.spine--community{--c1:#3A2A1E;--c2:#1C130D;--tilt:-2deg}
.spine--gold{--c1:#6E1F1A;--c2:#2A0A09;--tilt:2.5deg;background:linear-gradient(90deg,rgba(0,0,0,.55) 0,rgba(255,255,255,.1) 13%,rgba(255,255,255,0) 30%,rgba(0,0,0,0) 72%,rgba(0,0,0,.5) 100%),repeating-linear-gradient(180deg,rgba(233,207,149,.16) 0 1px,rgba(0,0,0,0) 1px .9rem),linear-gradient(180deg,var(--c1),var(--c2))}
.spine--gold b{color:var(--gold-w)}
.spine--archive{--c1:#1E4B38;--c2:#0C2219;--tilt:-1.5deg}
.spine:hover,.spine:focus-visible,.spine.is-out{translate:0 -1.15rem;rotate:var(--tilt);filter:brightness(1.22);box-shadow:inset 0 0 0 1px rgba(233,207,149,.55),inset 0 2px 0 rgba(255,255,255,.1),0 0 34px -4px rgba(233,207,149,.5)}
.spine:focus-visible{outline-offset:4px}
.shelf__cap{display:grid;align-content:start;gap:.3rem;min-height:6.6rem;margin:1.2rem 0 0;text-align:center;color:#DDD2BF;font-size:.96rem;line-height:1.45}
.shelf__cap b{font:italic 500 1.2rem/1.2 var(--ital);color:var(--gold-l)}

/* I. Freedom Tactics: seven pictures on the green wall */
.fgrid{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(1.6rem,2.4vw,2.2rem) clamp(1rem,1.6vw,1.5rem)}
.fpic{--rx:0deg;--ry:0deg;--gx:50%;--gy:50%;--tone:8,25,20;display:grid;grid-template-rows:minmax(0,1fr) auto;gap:.8rem;min-width:0;text-decoration:none;color:var(--bone);perspective:900px;container-type:inline-size;outline-offset:6px}
.fpic--burgundy{--tone:36,9,10}
.fpic--onyx{--tone:14,10,8}
.fpic__frame{position:relative;display:block;min-height:0;aspect-ratio:4/3;overflow:hidden;isolation:isolate;background:rgb(var(--tone));
  box-shadow:0 0 0 1px rgba(233,207,149,.62),0 0 0 4px #0A0807,0 0 0 5px rgba(233,207,149,.24),0 26px 44px -26px #000;
  transform:rotateX(var(--rx)) rotateY(var(--ry));transition:transform .7s var(--ease),box-shadow .6s var(--ease)}
.fpic__img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:100% 50%;z-index:-2;transform-origin:78% 50%;filter:brightness(.94);transition:scale 1.6s var(--ease),filter 1s var(--ease)}
.fpic__shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(var(--tone),0) 34%,rgba(var(--tone),.82) 74%,rgba(var(--tone),.96) 100%),linear-gradient(90deg,rgba(var(--tone),.62) 0%,rgba(var(--tone),0) 56%)}
.fpic__glare{position:absolute;inset:0;z-index:1;pointer-events:none;mix-blend-mode:screen;background:radial-gradient(circle 60cqw at var(--gx) var(--gy),rgba(255,226,170,.22),rgba(255,226,170,0) 70%);opacity:0;transition:opacity .6s}
.fpic__copy{position:absolute;left:0;right:0;bottom:0;display:grid;gap:.5rem;padding:clamp(1rem,6cqw,2rem);transition:translate .8s var(--ease)}
.fpic__t{font:500 clamp(1.3rem,7.6cqw,2.7rem)/1.08 var(--display);letter-spacing:-.01em;text-wrap:balance;text-shadow:0 2px 14px rgba(0,0,0,.85)}
.fpic__d{font-size:clamp(.86rem,3.5cqw,1.04rem);line-height:1.42;color:#DCD2C0;text-shadow:0 1px 10px rgba(0,0,0,.9);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden;max-width:34em}
.fpic__go{position:absolute;right:.8rem;top:.8rem;z-index:2;display:flex;align-items:center;gap:.5rem;padding:.5rem .7rem;font:600 .62rem/1 var(--body);letter-spacing:.24em;text-transform:uppercase;color:#2A1D08;background:var(--brass);background-size:220% 100%;box-shadow:inset 0 1px 0 rgba(255,248,220,.9),inset 0 0 0 1px rgba(90,63,20,.7),0 10px 18px -8px #000;opacity:0;translate:0 -.5rem;transition:opacity .5s var(--ease),translate .6s var(--ease)}
.fpic__go svg{width:1.5rem;height:.46rem}
.fpic__cap{display:flex;align-items:baseline;gap:.75rem;padding:0 .15rem;min-width:0;font-size:.92rem;line-height:1.25;color:var(--smoke)}
.fpic__no{flex:none;min-width:1.25em;font:500 1.25rem/1 var(--display);font-style:normal;color:var(--gold);transition:color .4s}
.fpic__cap b{font-weight:500;color:var(--gold-l)}
.fpic__cap em{margin-left:auto;font:italic 400 1rem/1.25 var(--ital);color:var(--gold-l);white-space:nowrap;background:linear-gradient(currentColor,currentColor) 100% 100%/0 1px no-repeat;transition:color .4s,background-size .6s var(--ease)}
.fpic:hover .fpic__frame,.fpic:focus-visible .fpic__frame{box-shadow:0 0 0 1px var(--gold-l),0 0 0 4px #0A0807,0 0 0 5px rgba(233,207,149,.6),0 0 46px -8px rgba(233,207,149,.5),0 36px 56px -28px #000}
.fpic:hover .fpic__img,.fpic:focus-visible .fpic__img{scale:1.08;filter:brightness(1.08)}
.fpic:hover .fpic__glare{opacity:1}
.fpic:hover .fpic__copy{translate:0 -.25rem}
.fpic:hover .fpic__go,.fpic:focus-visible .fpic__go{opacity:1;translate:0 0}
.fpic:hover .fpic__no{color:var(--gold-w)}
.fpic:hover .fpic__cap em,.fpic:focus-visible .fpic__cap em{color:var(--gold-w);background-size:100% 1px;background-position:0 100%}
@media (min-width:640px){
  .fgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fpic--lead,.fpic--wide{grid-column:1 / -1}
  .fpic--lead .fpic__frame{aspect-ratio:2/1}
  .fpic--wide .fpic__frame{aspect-ratio:3/1}
  .fpic--lead .fpic__copy,.fpic--wide .fpic__copy{top:0;right:auto;width:min(60%,34rem);align-content:center}
  .fpic--lead .fpic__shade,.fpic--wide .fpic__shade{background:linear-gradient(90deg,rgba(var(--tone),.95) 0%,rgba(var(--tone),.74) 36%,rgba(var(--tone),0) 66%)}
  .fpic--wide .fpic__t{font-size:clamp(1.4rem,4.3cqw,2.15rem)}
  .fpic--wide .fpic__d{-webkit-line-clamp:3;line-clamp:3}
}
@media (min-width:1100px){
  .fgrid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .fpic--lead{grid-column:span 2;grid-row:span 2}
  .fpic--lead .fpic__frame{aspect-ratio:auto;height:100%}
  .fpic--lead .fpic__copy{top:auto;right:0;width:auto;align-content:end;padding:clamp(1.6rem,2.6vw,2.6rem)}
  .fpic--lead .fpic__t{font-size:clamp(2.2rem,3.4vw,3.6rem)}
  .fpic--lead .fpic__d{font-size:var(--s1);-webkit-line-clamp:3;line-clamp:3;max-width:27em}
  .fpic--lead .fpic__shade{background:linear-gradient(180deg,rgba(var(--tone),0) 40%,rgba(var(--tone),.8) 76%,rgba(var(--tone),.96) 100%),linear-gradient(90deg,rgba(var(--tone),.7) 0%,rgba(var(--tone),0) 52%)}
  .fpic--wide{grid-column:span 2}
  .fpic--wide .fpic__frame{aspect-ratio:8/3}
}

/* II. Freedom of Thought: six framed pictures on the ivory wall */
.fcards{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(1.5rem,2.6vw,2.4rem)}
.fcard{position:relative;display:grid;grid-template-columns:minmax(0,1fr);align-content:start;gap:.85rem;min-width:0;padding:clamp(.85rem,1.4vw,1.15rem) clamp(.85rem,1.4vw,1.15rem) clamp(1.2rem,2vw,1.6rem);text-decoration:none;color:var(--ink);background:#FBF6EA;
  box-shadow:inset 0 0 0 1px rgba(122,92,44,.45),0 1px 0 rgba(255,255,255,.7),0 26px 36px -26px rgba(74,52,20,.8);transition:transform .6s var(--ease),rotate .6s var(--ease),box-shadow .6s var(--ease)}
.js .fcard.rv{transition:opacity 1s var(--ease),translate 1.1s var(--ease),transform .6s var(--ease),rotate .6s var(--ease),box-shadow .6s var(--ease)}
.fcard:nth-child(odd){rotate:-.55deg}
.fcard:nth-child(even){rotate:.5deg}
.fcard:hover,.fcard:focus-visible{rotate:0deg;transform:translateY(-7px);box-shadow:inset 0 0 0 1px rgba(122,92,44,.75),0 0 0 4px rgba(251,246,234,.9),0 0 0 5px rgba(122,92,44,.45),0 44px 46px -28px rgba(74,52,20,.85)}
.fcard__pic{position:relative;display:block;margin:5px 5px .5rem;aspect-ratio:16/9;overflow:hidden;background:#1A0B0B;box-shadow:0 0 0 1px rgba(122,90,38,.85),0 0 0 4px #1A130E,0 0 0 5px rgba(196,155,85,.85),0 14px 18px -10px rgba(40,26,8,.75)}
.fcard__pic img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:92% 50%;transition:scale 1.6s var(--ease),filter 1s var(--ease)}
.fcard:hover .fcard__pic img,.fcard:focus-visible .fcard__pic img{scale:1.08;filter:brightness(1.1)}
.fcard__k{font:600 .7rem/1 var(--body);letter-spacing:.3em;text-transform:uppercase;color:var(--ox)}
.fcard h3{font:500 clamp(1.32rem,1.12rem + .7vw,1.7rem)/1.12 var(--display)}
.fcard p{font-size:.98rem;line-height:1.52;color:#4A3B2B}
.fcard__m{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:.3rem 1rem;margin-top:.3rem;padding-top:.85rem;border-top:1px solid rgba(122,92,44,.4);font-size:.9rem;color:#5A4A36}
.fcard__m b{font-weight:600;color:var(--ink)}
.fcard__m em{font:italic 500 1rem/1.2 var(--ital);color:var(--ox);transition:translate .5s var(--ease)}
.fcard:hover .fcard__m em{translate:.3rem 0}
@media (min-width:640px){.fcards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.fcards{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* III and IV. By the fire, and the vault */
.duo{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(1.8rem,3.4vw,2.8rem)}
.duo .bhead{margin-bottom:0}
.duo__pair{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(1.6rem,2.4vw,2.2rem) clamp(1rem,1.6vw,1.5rem)}
@media (min-width:560px){.duo__pair{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.duo{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:end;gap:clamp(2rem,4vw,4rem)}}
.vault{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1fr);min-width:0;margin-top:clamp(2.8rem,5.5vw,4.6rem);overflow:hidden;text-decoration:none;color:var(--bone);background:#240909;
  box-shadow:0 0 0 1px var(--gold),0 0 0 5px #120505,0 0 0 6px rgba(233,207,149,.38),0 40px 60px -30px #000;transition:box-shadow .6s var(--ease)}
.js .vault.rv{transition:opacity 1s var(--ease),translate 1.1s var(--ease),box-shadow .6s var(--ease)}
.vault__img{display:block;width:100%;height:auto;max-width:none;aspect-ratio:16/9;object-fit:cover;object-position:100% 70%;transform-origin:80% 60%;-webkit-mask:linear-gradient(180deg,#000 58%,rgba(0,0,0,0));mask:linear-gradient(180deg,#000 58%,rgba(0,0,0,0));transition:scale 2s var(--ease),filter 1s}
.vault__copy{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:1rem;margin-top:-2.6rem;padding:0 clamp(1.4rem,3.2vw,2.8rem) clamp(1.5rem,3.2vw,2.8rem)}
.vault h3{font:500 var(--s3)/1.05 var(--display);text-shadow:0 2px 20px rgba(0,0,0,.8)}
@media (min-width:900px){
  .vault{min-height:clamp(27rem,37vw,34rem);align-items:center}
  .vault__img{position:absolute;inset:0 0 0 auto;z-index:-1;width:auto;height:100%;aspect-ratio:3/2;-webkit-mask:linear-gradient(90deg,rgba(0,0,0,0) 0,#000 38%);mask:linear-gradient(90deg,rgba(0,0,0,0) 0,#000 38%)}
  .vault__copy{margin-top:0;padding-block:clamp(2rem,3.4vw,3.2rem);max-width:min(60%,46rem)}
}
.vault h3 em{font-style:italic;font-family:var(--ital);color:var(--gold-l)}
.vault p{color:#EADFCB;max-width:34rem}
.vault__foot{display:flex;flex-wrap:wrap;align-items:flex-end;gap:.8rem 2rem;padding-top:1rem;border-top:1px solid rgba(233,207,149,.34)}
.vault__foot span{display:grid;gap:.25rem;font:600 .64rem/1 var(--body);letter-spacing:.22em;text-transform:uppercase;color:#D9C9AE}
.vault__foot b{font:500 1.9rem/1 var(--display);letter-spacing:0;font-variant-numeric:lining-nums;color:var(--gold-l)}
.vault__foot .tlink{margin-left:auto}
.vault:hover,.vault:focus-visible{box-shadow:0 0 0 1px var(--gold-l),0 0 0 5px #120505,0 0 0 6px rgba(233,207,149,.7),0 0 60px -10px rgba(233,207,149,.45),0 40px 60px -30px #000}
.vault:hover .vault__img,.vault:focus-visible .vault__img{scale:1.05;filter:brightness(1.12)}
.vault:hover .tlink{color:var(--gold-w)}
.vault:hover .tlink svg{translate:.5rem 0}

/* V. The Archive: a ledger on baize */
.ledger{display:grid;grid-template-columns:minmax(0,1fr);gap:0 clamp(1.6rem,3vw,3.2rem);border-top:1px solid rgba(233,207,149,.36)}
.lrow{display:flex;align-items:baseline;gap:.7rem;min-width:0;padding:.95rem .2rem;border-bottom:1px solid rgba(233,207,149,.17);text-decoration:none;color:#E6EFE9;transition:color .3s,padding-left .5s var(--ease),background-color .4s}
.lrow span{min-width:0}
.lrow i{flex:1;min-width:1rem;border-bottom:1px dotted rgba(233,207,149,.5);translate:0 -.28em}
.lrow b{flex:none;font:500 1.06rem/1 var(--display);font-variant-numeric:lining-nums;color:var(--gold-l)}
.lrow:hover,.lrow:focus-visible{color:var(--gold-w);padding-left:.75rem;background:rgba(233,207,149,.05)}
.ledger__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem 2rem;margin-top:1.6rem;font:italic 400 1.02rem/1.4 var(--ital);color:#CFE0D6}
@media (min-width:700px){.ledger{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.ledger{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* the invitation */
.invite{display:grid;grid-template-columns:minmax(0,1fr);align-items:center;gap:1.6rem 3rem;padding:clamp(1.8rem,4vw,3.4rem);max-width:68rem;margin-inline:auto}
.invite__k{font:600 .72rem/1 var(--body);letter-spacing:.3em;text-transform:uppercase;color:var(--ox);margin-bottom:.9rem}
.invite h2{font:500 var(--s3)/1.06 var(--display)}
.invite h2 em{font-style:italic;font-family:var(--ital);color:var(--ox)}
.invite p{margin-top:.9rem;font-size:var(--s1);line-height:1.5;color:#3B2E22;max-width:30rem}
.invite__acts{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.8rem}
.invite .tlink{color:var(--ox)}
.invite .tlink:hover{color:var(--wax)}
.invite__seal{position:absolute;right:clamp(.8rem,2vw,1.6rem);top:0;width:clamp(3.6rem,6.4vw,5.2rem);height:auto;filter:drop-shadow(0 8px 10px rgba(60,20,10,.5));translate:0 -38%;rotate:9deg;transition:rotate .9s var(--ease)}
.invite:hover .invite__seal{rotate:-6deg}
@media (min-width:860px){.invite{grid-template-columns:minmax(0,1fr) auto}}

/* ================================================================ THE DIRECTORY (all forums) */
.dir{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(1.8rem,4vw,4rem)}
.toc{position:sticky;top:calc(var(--hd-h) + env(safe-area-inset-top,0px));z-index:5;display:flex;gap:.5rem;margin-inline:calc(var(--gutter) * -1);padding:.7rem var(--gutter);overflow-x:auto;scrollbar-width:none;background:rgba(8,6,5,.94);border-bottom:1px solid var(--line-2)}
.toc::-webkit-scrollbar{display:none}
.toc p{display:none}
.toc a{flex:none;display:flex;align-items:center;gap:.65rem;padding:.7rem .95rem;white-space:nowrap;text-decoration:none;font-size:.92rem;line-height:1.1;color:var(--smoke);border:1px solid var(--line);transition:color .3s,border-color .3s,background-color .3s}
.toc a i{font:500 1rem/1 var(--display);font-style:normal;color:var(--gold)}
.toc a b{margin-left:auto;padding-left:.5rem;font:500 .98rem/1 var(--display);font-variant-numeric:lining-nums;color:var(--gold-l)}
.toc a:hover,.toc a.is-on{color:var(--gold-w);border-color:var(--gold);background:rgba(233,207,149,.08)}
@media (min-width:1000px){
  .dir{grid-template-columns:16rem minmax(0,1fr);align-items:start}
  .toc{top:calc(var(--hd-h) + 1.4rem);display:grid;gap:.35rem;margin:0;padding:0;overflow:visible;background:none;border:0}
  .toc p{display:block;margin:0 0 .7rem;font:600 .68rem/1 var(--body);letter-spacing:.28em;text-transform:uppercase;color:#A99E8C}
  .toc a{white-space:normal}
}
.group{scroll-margin-top:calc(var(--hd-h) + 5rem)}
.group + .group{margin-top:clamp(3rem,6vw,5rem)}
.group__head{display:grid;gap:.7rem;margin-bottom:1.4rem;max-width:46rem}
.group__head h2{font:500 var(--s2)/1.1 var(--display)}
.group__head p:last-child{color:#CFC5B4}
.racks{--rk:rgba(10,8,7,.55);position:relative;background:var(--rk);box-shadow:0 0 0 1px var(--line-2),inset 0 0 0 4px rgba(7,5,4,.5),inset 0 0 0 5px rgba(233,207,149,.12),0 40px 60px -40px #000}
.group--emerald .racks{--rk:linear-gradient(180deg,rgba(15,46,37,.82),rgba(8,26,20,.9))}
.group--burgundy .racks{--rk:linear-gradient(180deg,rgba(52,14,15,.82),rgba(30,8,9,.92))}
.group--gold .racks{--rk:radial-gradient(120% 120% at 0% 0%,#5E1B17,#2A0B0B 62%,#1C0707);box-shadow:0 0 0 1px var(--gold),inset 0 0 0 4px rgba(18,5,5,.6),inset 0 0 0 5px rgba(233,207,149,.3),0 40px 60px -40px #000}
.group--baize .racks{--rk:linear-gradient(180deg,rgba(16,52,40,.86),rgba(8,26,20,.94))}
.frow{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start;gap:.9rem 1.2rem;padding:1.05rem clamp(.95rem,1.8vw,1.5rem);text-decoration:none;color:var(--bone);border-top:1px solid var(--line);transition:background-color .4s}
.frow:first-child{border-top:0}
.frow::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--brass);scale:1 0;transform-origin:50% 0;transition:scale .5s var(--ease)}
.frow:hover,.frow:focus-visible{background:rgba(233,207,149,.07)}
.frow:hover::before,.frow:focus-visible::before{scale:1 1}
.frow:focus-visible{outline-offset:-2px}
.frow__img{position:relative;width:clamp(3.6rem,7vw,5rem);aspect-ratio:1;overflow:hidden;display:grid;place-items:center;background:#0E0B09;font:italic 500 clamp(1.05rem,2vw,1.35rem)/1 var(--ital);color:var(--gold-l);box-shadow:0 0 0 1px rgba(233,207,149,.6),0 0 0 3px #0A0807,0 0 0 4px rgba(233,207,149,.22)}
.frow__img img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:84% 50%;transition:scale 1.2s var(--ease),filter .8s}
.frow:hover .frow__img img{scale:1.14;filter:brightness(1.1)}
.frow__t{min-width:0}
.frow h3{font:500 clamp(1.12rem,1rem + .45vw,1.38rem)/1.2 var(--display);transition:color .3s}
.frow:hover h3{color:var(--gold-w)}
.frow p{margin-top:.28rem;font-size:.94rem;line-height:1.48;color:#C9BFAE}
.frow p.frow__subs{font-size:.85rem;color:#B5AA98}
.frow__subs b{font:600 .64rem/1 var(--body);letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-right:.35rem}
.frow p.frow__x{font-size:.84rem;color:var(--gold-l)}
.frow__n{display:none}
@media (min-width:760px){
  .frow{grid-template-columns:auto minmax(0,1fr) 5rem 5.6rem;align-items:center}
  .frow__n{display:grid;justify-items:end;gap:.3rem;font:600 .62rem/1 var(--body);letter-spacing:.18em;text-transform:uppercase;color:#A99E8C}
  .frow__n b{font:500 1.32rem/1 var(--display);letter-spacing:0;font-variant-numeric:lining-nums;color:var(--gold-l)}
  .frow p.frow__x{display:none}
}

/* ================================================================ A THREAD */
.readbar{display:none;position:fixed;left:0;right:0;top:calc(var(--hd-h) + env(safe-area-inset-top,0px));z-index:61;height:2px;pointer-events:none}
html[data-page="thread"] .readbar{display:block}
.readbar i{display:block;height:100%;background:var(--brass);transform-origin:0 50%;scale:var(--p,0) 1;opacity:min(1,calc(var(--p,0) * 40));box-shadow:0 0 12px rgba(233,207,149,.65)}
.posts{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(1.3rem,2.4vw,2rem);min-width:0}
.post{position:relative;display:grid;grid-template-columns:minmax(0,1fr);min-width:0;scroll-margin-top:calc(var(--hd-h) + 1.4rem);
  box-shadow:0 0 0 1px rgba(233,207,149,.5),0 0 0 5px #0A0807,0 0 0 6px rgba(233,207,149,.18),0 40px 60px -34px #000;transition:box-shadow .7s var(--ease)}
.post:target,.post.is-hit{box-shadow:0 0 0 1px var(--gold-l),0 0 0 5px #0A0807,0 0 0 6px rgba(233,207,149,.7),0 0 56px -8px rgba(233,207,149,.55),0 40px 60px -34px #000}
.post__who{display:flex;flex-wrap:wrap;align-items:center;gap:.7rem 1rem;min-width:0;padding:.9rem 1.1rem;color:var(--bone);background:linear-gradient(180deg,#1C140F,#120D0A);border-bottom:1px solid var(--line-2)}
.post--op .post__who{background:linear-gradient(180deg,#431312,#260B0A)}
.post__who .sealav{--sz:3rem}
.post--op .post__who .sealav{--ring:#260B0A}
.post__id{display:grid;gap:.22rem;min-width:0}
.post__name{font:600 1.06rem/1.2 var(--display);letter-spacing:.02em;color:var(--gold-l);overflow-wrap:anywhere}
.post__rank{font:italic 400 .9rem/1.2 var(--ital);color:#CFC5B4}
.post__badge{justify-self:start;margin-top:.2rem;padding:.3rem .55rem .28rem;font:600 .58rem/1 var(--body);letter-spacing:.24em;text-transform:uppercase;color:#FBE9D2;background:linear-gradient(180deg,#A62C22,#7A1D17);box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 3px 8px rgba(0,0,0,.5)}
.post__facts{display:flex;gap:.3rem 1.2rem;flex-wrap:wrap;margin:0 0 0 auto;font-size:.8rem;line-height:1.3;color:#A99E8C}
.post__facts div{display:flex;gap:.45rem}
.post__facts dd{margin:0;color:#DDD2BF}
.post__paper{position:relative;min-width:0;padding:clamp(1.1rem,2.6vw,2rem) clamp(1.1rem,3vw,2.5rem) clamp(1.4rem,3vw,2.4rem);background:#F4EDDD url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='280'%3E %3Cfilter id='t' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='4' seed='9' stitchTiles='stitch' result='n'/%3E %3CfeDiffuseLighting in='n' surfaceScale='0.55' diffuseConstant='1.0' lighting-color='%23F4EDDD'%3E%3CfeDistantLight azimuth='235' elevation='72'/%3E%3C/feDiffuseLighting%3E%3C/filter%3E %3Crect width='280' height='280' filter='url(%23t)'/%3E%3C/svg%3E");color:var(--ink);box-shadow:inset 0 0 0 1px rgba(122,92,44,.28)}
.post__top{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin-bottom:1.15rem;padding-bottom:.8rem;border-bottom:1px solid rgba(122,92,44,.4);font:italic 400 .96rem/1.2 var(--ital);color:#5A4A36}
.post__no{padding:.3rem .25rem;font:500 1.02rem/1 var(--display);font-style:normal;font-variant-numeric:lining-nums;color:var(--ox);text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .5s var(--ease)}
.post__no:hover{background-size:100% 1px}
.post__body{display:grid;grid-template-columns:minmax(0,1fr);gap:1.05rem;font-size:clamp(1.04rem,1rem + .26vw,1.2rem);line-height:1.7;color:#2E2318;overflow-wrap:break-word}
.post__body > *{max-width:44rem;margin:0}
.post__body a{color:var(--ox);text-decoration-thickness:1px;text-underline-offset:.18em}
.post__body ul,.post__body ol{display:grid;gap:.45rem;padding-left:1.5rem}
.post__body ul{list-style:none;padding-left:0}
.post__body ul li{position:relative;padding-left:1.4rem}
.post__body ul li::before{content:"";position:absolute;left:.25rem;top:.72em;width:6px;height:6px;rotate:45deg;background:#8C6A2F}
.post__body ol li::marker{font-family:var(--display);color:var(--ox)}
.post__body blockquote{padding:.9rem 1.15rem 1rem;background:rgba(122,90,38,.12);border-left:3px solid #A8843F;font-size:.95em;line-height:1.6;color:#4A3B2B}
.post__body blockquote cite{display:block;margin-bottom:.45rem;font:600 .66rem/1.2 var(--body);font-style:normal;letter-spacing:.22em;text-transform:uppercase;color:var(--sepia)}
.post__body .mention{font-weight:600;color:var(--ox)}
@media (min-width:860px){
  .post{grid-template-columns:12.5rem minmax(0,1fr)}
  .post__who{flex-direction:column;flex-wrap:nowrap;justify-content:flex-start;gap:.75rem;padding:1.7rem 1rem 1.4rem;text-align:center;border-bottom:0;border-right:1px solid var(--line-2)}
  .post__who .sealav{--sz:5.2rem}
  .post__id{justify-items:center}
  .post__badge{justify-self:center}
  .post__facts{flex-direction:column;gap:.45rem;width:100%;margin:.5rem 0 0;padding-top:.9rem;border-top:1px solid var(--line)}
  .post__facts div{justify-content:space-between}
}
.reply{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1fr);align-items:center;gap:1.2rem 2rem;margin-top:clamp(2rem,4vw,3rem);padding:clamp(1.6rem,3.4vw,2.8rem);overflow:hidden;color:var(--bone);background:radial-gradient(90% 150% at 0% 0%,#6A1E19,#2E0C0B 58%,#1C0707);box-shadow:0 0 0 1px var(--gold),0 0 0 5px #120505,0 0 0 6px rgba(233,207,149,.38),0 40px 60px -30px #000}
.reply::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(to bottom right,rgba(0,0,0,0) calc(50% - .6px),rgba(233,207,149,.16) 50%,rgba(0,0,0,0) calc(50% + .6px)),linear-gradient(to bottom left,rgba(0,0,0,0) calc(50% - .6px),rgba(233,207,149,.16) 50%,rgba(0,0,0,0) calc(50% + .6px))}
.reply__seal{width:clamp(3.8rem,6vw,5.2rem);height:auto;rotate:-10deg;filter:drop-shadow(0 10px 14px rgba(0,0,0,.7));transition:rotate .9s var(--ease),scale .6s var(--ease)}
.reply:hover .reply__seal{rotate:7deg;scale:1.05}
.reply h2{font:500 var(--s2)/1.1 var(--display)}
.reply h2 em{font-style:italic;font-family:var(--ital);color:var(--gold-l)}
.reply p{margin-top:.5rem;color:#EADFCB;max-width:30rem}
.reply .reply__alt{margin-top:.9rem;font-size:.92rem;color:#CDBFA8}
.reply__alt a,.sidec__src a{color:inherit;text-decoration:underline;text-decoration-color:rgba(233,207,149,.42);text-decoration-thickness:1px;text-underline-offset:.24em;transition:color .3s,text-decoration-color .3s}
.reply__alt a:hover,.reply__alt a:focus-visible,.sidec__src a:hover,.sidec__src a:focus-visible{color:var(--gold-w);text-decoration-color:currentColor}
@media (min-width:760px){.reply{grid-template-columns:auto minmax(0,1fr) auto}}
.more{margin-top:clamp(2.4rem,5vw,4rem)}

/* ================================================================ FORUM, REAL CONTENT
   What members' posts can contain (pictures, files, code, tables, spoilers, videos) and the pieces the real forum
   needs beyond the four designed pages: member pictures, sub-forums, labels on threads. */

/* a member's picture sits on their seal; the initials stay underneath if the picture cannot load */
.sealav img{position:absolute;inset:0;width:100%;height:100%;max-width:none;border-radius:50%;object-fit:cover;background:var(--av)}

/* labels in front of a thread title */
.ttag{display:inline-block;margin:0 .55em .12em 0;padding:.26em .5em .22em;vertical-align:middle;font:600 .56rem/1 var(--body);font-style:normal;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-l);border:1px solid var(--line-2);background:rgba(233,207,149,.07)}

/* sub-forums listed on a forum page */
.subs{margin:0 0 clamp(2.2rem,4vw,3.2rem)}
.subs + .thead{margin-top:0}

/* the date line of a post */
.post__ed{margin:0 auto 0 .9rem;font-size:.86em;color:#7A6A55}
.post__top time{flex:none}

/* ---------- inside a post ---------- */
.post__body p{margin:0}
.post__body > *{min-width:0}
.post__body small{font-size:.86em}
.post__body .lg{font-size:1.18em;line-height:1.5}
.post__body h3,.post__body h4,.post__body h5{margin:.5rem 0 0;font-family:var(--display);font-weight:600;line-height:1.25;color:#231A11;text-wrap:balance}
.post__body h3{font-size:1.5em}
.post__body h4{font-size:1.28em}
.post__body h5{font-size:1.12em}
.post__body hr{width:100%;height:1px;border:0;background:rgba(122,92,44,.45)}
.post__body .ta-c{text-align:center}
.post__body .ta-r{text-align:right}
.post__body .ta-c,.post__body .ta-r,.post__body .indent,.post__body blockquote,.post__body details{display:grid;grid-template-columns:minmax(0,1fr);gap:.8rem}
.post__body li > * + *{margin-top:.5rem}
.post__body .indent{padding-left:clamp(1rem,3vw,2rem)}
.post__body blockquote{margin:0}
.post__body blockquote blockquote{background:rgba(122,90,38,.1);font-size:1em}
.post__body blockquote cite{margin-bottom:0}
.post__body blockquote cite a{color:inherit;text-decoration:none}
.post__body blockquote cite a:hover{color:var(--ox)}
.post__body a{overflow-wrap:anywhere}

/* pictures: never wider than the paper, and nothing shown for one that no longer exists */
.post__body img.pimg{display:inline-block;max-width:100%;height:auto;max-height:44rem;vertical-align:middle;box-shadow:0 0 0 1px rgba(122,92,44,.35)}
.post__body .is-gone{display:none !important}
.post__body .pattach{display:inline-block;max-width:100%;margin:.15rem .4rem .15rem 0;line-height:0;vertical-align:top;box-shadow:0 0 0 1px rgba(122,92,44,.4),0 0 0 4px #EFE6D2,0 0 0 5px rgba(122,92,44,.35);transition:box-shadow .3s,translate .4s var(--ease)}
.post__body .pattach:hover{translate:0 -2px;box-shadow:0 0 0 1px var(--ox),0 0 0 4px #EFE6D2,0 0 0 5px var(--ox)}
.post__body .pattach img{display:block;max-width:100%;height:auto;max-height:26rem}
.post__body .pfile{display:inline-flex;align-items:center;gap:.55rem;max-width:100%;margin:.15rem .5rem .15rem 0;padding:.5rem .8rem;font:500 .92em/1.3 var(--body);color:#3A2A1A;text-decoration:none;background:rgba(122,90,38,.12);box-shadow:inset 0 0 0 1px rgba(122,92,44,.4);overflow-wrap:anywhere}
.post__body .pfile::before{content:"";flex:none;width:.7rem;height:.9rem;background:linear-gradient(135deg,transparent .22rem,#8C6A2F 0)}
.post__body .pfile:hover{color:var(--ox);box-shadow:inset 0 0 0 1px var(--ox)}
.pfiles{padding-top:1rem;border-top:1px solid rgba(122,92,44,.4)}
.pfiles__k{margin:0 0 .7rem !important;font:600 .64rem/1.2 var(--body);letter-spacing:.22em;text-transform:uppercase;color:var(--sepia)}

/* code and tables scroll inside the paper */
.post__body pre{max-width:100%;margin:0;padding:.9rem 1.1rem;overflow:auto;font:400 .84em/1.55 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:#EDE3CF;background:#1A1410;box-shadow:inset 0 0 0 1px rgba(233,207,149,.18);tab-size:2}
.post__body code{font:400 .88em/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;padding:.08em .32em;background:rgba(122,90,38,.16);overflow-wrap:anywhere}
.post__body pre code{padding:0;background:none;font-size:1em;overflow-wrap:normal}
.post__body .tbl{max-width:100%;overflow-x:auto}
.post__body table{border-collapse:collapse;font-size:.92em;line-height:1.45}
.post__body th,.post__body td{padding:.5rem .8rem;text-align:left;vertical-align:top;border:1px solid rgba(122,92,44,.4)}
.post__body th{font-weight:600;background:rgba(122,90,38,.14)}

/* spoilers */
.post__body details.spoiler{padding:0;border:1px solid rgba(122,92,44,.45);background:rgba(122,90,38,.07)}
.post__body details.spoiler > summary{padding:.6rem .9rem;cursor:pointer;font:600 .7rem/1.2 var(--body);letter-spacing:.18em;text-transform:uppercase;color:var(--sepia)}
.post__body details.spoiler > :not(summary){padding:0 .9rem .8rem}
.post__body .ispoiler{color:transparent;background:#2E2318;border-radius:2px;cursor:pointer;transition:color .2s,background .2s}
.post__body .ispoiler:hover,.post__body .ispoiler:focus{color:inherit;background:rgba(122,90,38,.16)}

/* a video or outside post: a card that leads to it, never a player */
.post__body .pmedia{max-width:30rem}
.post__body .pmedia a{position:relative;display:grid;color:#F3E7CF;text-decoration:none;background:#17110D;box-shadow:0 0 0 1px rgba(122,92,44,.6),0 0 0 4px #EFE6D2,0 0 0 5px rgba(122,92,44,.4)}
.post__body .pmedia img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;opacity:.86;transition:opacity .4s,scale 1s var(--ease)}
.post__body .pmedia a:hover img{opacity:1}
.post__body .pmedia span{display:flex;align-items:center;gap:.6rem;padding:.7rem .95rem;font:600 .68rem/1.2 var(--body);letter-spacing:.2em;text-transform:uppercase;color:var(--gold-l)}
.post__body .pmedia span::before{content:"";flex:none;width:0;height:0;border:.34rem solid transparent;border-left:.55rem solid var(--gold-l);border-right:0}
.post__body .pmedia img.is-gone{display:none}

@media (max-width:599px){
  .post__body pre{margin-inline:-.4rem;padding:.8rem .85rem}
  .post__ed{display:none}
}


@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition-duration:.01ms !important;transition-delay:0s !important}
  html{scroll-behavior:auto}
  .smoke,.glint{display:none}
}

@media (prefers-reduced-motion:no-preference){@view-transition{navigation:auto}}