/* Girl Boss News: "The Oxblood Room" (2026-10-28). Design notes in ../DESIGN.md. */
:root{
  --paper:#f5eee3;--paper-2:#ebe1d1;--ink:#171214;--mute:#62524f;--line:#171214;--hair:rgb(23 18 20/.16);
  --oxblood:#5b1520;--oxblood-deep:#3a0b13;--velvet:#8c2c44;--ivory:#f5eee3;
  --brass:#c19a4b;--brass-hi:#e3c27a;--brass-deep:#8a6a2c;
  --coral:var(--brass);--coral-text:#7d1d2c;--focus:#7d1d2c;--bubble:#efe6d8;--sent:#5b1520;
  --s1:#5b1520;--s2:#171214;--s3:#ece2d0;--s4:#1e6a54;--s5:#11143a;--s6:#c19a4b;--navy:#0b0d2e;
  --f1:#f5eee3;--f2:#f5eee3;--f3:#171214;--f4:#f5eee3;--f5:#f5eee3;--f6:#171214;
  --pin:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='5'%3E%3Crect x='25' width='1' height='2.5' fill='%23f5eee3' fill-opacity='.3'/%3E%3C/svg%3E");
  --gilt:linear-gradient(135deg,#8a6a2c,#e3c27a 30%,#9c7934 55%,#f0d491 75%,#8a6a2c);
  --display:"Bodoni Moda","Bodoni 72",Didot,Georgia,serif;--ui:"Inter Tight",system-ui,-apple-system,"Segoe UI",sans-serif;
  --wrap:1320px;--gut:clamp(16px,4vw,48px);--wm:clamp(3.4rem,11.4vw,11.5rem);
  --consent-bg:#fbf7f0;--consent-fg:#171214;--consent-line:#171214;--consent-accent:#5b1520;
  color-scheme:light dark;
}
@media (prefers-color-scheme:dark){:root{
  --paper:#140f11;--paper-2:#1f171a;--ink:#f2e9e0;--mute:#b8a8a2;--line:#f2e9e0;--hair:rgb(242 233 224/.18);
  --coral-text:#e3c27a;--focus:#e3c27a;--s2:#2a2226;--s1:#7a1f2e;--s5:#262c6b;
  --consent-bg:#211a1d;--consent-fg:#f2e9e0;--consent-line:#f2e9e0;--consent-accent:#e3c27a;
}}
/* dark surfaces: the room, the velvet sign-up, the pinstripe bands */
.room,.chat-band,.archive,.foot,.ribbon{--focus:#e3c27a}
/* a gilt frame with an ivory mat, for every illustration and photo */
.gilt,.cover img,.art-fig img,.spot-portrait img,.spot-fig img{border:clamp(8px,1.1vw,14px) solid transparent;border-image:var(--gilt) 1;padding:clamp(10px,1.8vw,24px);background:var(--ivory);box-shadow:0 30px 60px -22px rgb(0 0 0/.55),inset 0 2px 8px rgb(0 0 0/.18)}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}}
body{margin:0;background:var(--paper);color:var(--ink);font:400 1.0625rem/1.6 var(--ui);overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:8px;z-index:20;background:var(--ink);color:var(--paper);padding:10px 16px}
.skip:focus{left:8px}
.label{font:600 .74rem/1.2 var(--ui);letter-spacing:.16em;text-transform:uppercase}

/* Ribbon + top bar */
.ribbon{margin:0;background:#171214 var(--pin);color:var(--brass-hi);text-align:center;font:600 .74rem/1.35 var(--ui);letter-spacing:.16em;text-transform:uppercase;border-bottom:1px solid rgb(193 154 75/.45)}
.ribbon a{display:block;padding:10px var(--gut);text-decoration:none}
.ribbon a:hover{text-decoration:underline}
.top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px var(--gut);max-width:var(--wrap);margin:0 auto}
.mini{font:800 1.55rem/1 var(--display);letter-spacing:-.02em;text-decoration:none;font-variation-settings:"opsz" 72;white-space:nowrap}
.mini em{font-weight:400;color:var(--coral-text)}
.pipes{display:flex;flex-wrap:wrap;justify-content:flex-end;list-style:none;margin:0;padding:0}
.pipes li+li{border-left:1px solid var(--hair)}
.pipes a{display:block;padding:6px 14px;font:600 .74rem/1.2 var(--ui);letter-spacing:.16em;text-transform:uppercase;text-decoration:none}
.pipes li:last-child a{padding-right:0}
.pipes a:hover{color:var(--coral-text)}
.home .top{justify-content:flex-end}

/* The room: the home page's header and masthead sit on an oxblood wall between two curtains */
.room{position:relative;overflow:hidden;color:var(--ivory);background:radial-gradient(60% 55% at 22% 14%,rgb(255 214 150/.2),transparent 70%),linear-gradient(var(--oxblood),var(--oxblood-deep))}
.room::before,.room::after{content:"";position:absolute;top:0;bottom:0;z-index:0;width:clamp(14px,4.5vw,72px);background:repeating-linear-gradient(90deg,#4a0f19 0 9px,#6a1c29 9px 15px,#3d0c14 15px 22px)}
.room::before{left:0;box-shadow:12px 0 30px rgb(0 0 0/.35)}
.room::after{right:0;box-shadow:-12px 0 30px rgb(0 0 0/.35)}
.room>*{position:relative;z-index:1}
/* the home header has no background of its own: the room slides up under it */
.home .top{position:relative;z-index:2;box-sizing:border-box;min-height:64px;color:var(--ivory);border-bottom:1px solid rgb(193 154 75/.35);max-width:calc(var(--wrap) - 2 * var(--gut));--focus:#e3c27a}
.home .room{margin-top:-64px;padding-top:64px}
.home .pipes li+li{border-left-color:rgb(193 154 75/.35)}
.home .pipes a:hover{color:var(--brass-hi)}
.room .dateline{color:var(--brass-hi)}
.room .wordmark em,.room .kicker,.room .latest time,.room .latest .no{color:var(--brass-hi)}
.room .lead-dek{color:rgb(245 238 227/.82)}
.room .meta{color:rgb(245 238 227/.6)}
.room .latest h2{border-top-color:var(--brass)}
.room .latest li{border-bottom-color:rgb(193 154 75/.25)}
.room .latest a:hover,.room .lead-title a:hover{color:var(--brass-hi)}
.room .pill{border-color:var(--brass);color:var(--ivory)}
.room .pill.solid{background:var(--brass);color:#171214}
.room .pill:hover,.room .pill.solid:hover{background:var(--ivory);color:#171214;border-color:var(--ivory)}

/* Masthead */
.mast{position:relative;max-width:var(--wrap);margin:0 auto;padding:clamp(20px,3vw,40px) calc(var(--gut) + clamp(14px,4.5vw,72px)) clamp(64px,8vw,104px)}
.dateline{position:absolute;left:calc(var(--gut) + clamp(14px,4.5vw,72px) - 18px);top:40px;margin:0;writing-mode:vertical-rl;transform:rotate(180deg);color:var(--mute)}
.wordmark{position:relative;z-index:2;margin:0;text-align:center;font:900 var(--wm)/.9 var(--display);letter-spacing:-.035em;font-variation-settings:"opsz" 96}
.wordmark em{font-weight:400;letter-spacing:-.02em;color:var(--coral-text)}
.beats-line{margin:14px 0 0;text-align:center;color:rgb(245 238 227/.72)}
.beats-line b{color:var(--brass-hi);font-weight:600}
.mast-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:0 clamp(20px,2.4vw,40px);margin-top:clamp(36px,5vw,72px)}
.cover{grid-column:1/7;align-self:start;position:relative}
.cover>a{display:block;width:100%}
.cover img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .4s}
.cover>a:hover img{transform:translateY(-4px)}

.cover-copy{grid-column:7/10}
.latest{grid-column:10/13}
.kicker{margin:0 0 14px;color:var(--coral-text)}
.lead-title{margin:0 0 16px;font:700 clamp(1.9rem,2.9vw,2.9rem)/1.04 var(--display);letter-spacing:-.02em;font-variation-settings:"opsz" 96}
.lead-title a{text-decoration:none}
.lead-title a:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}
.lead-dek{margin:0 0 18px;color:var(--mute);font-size:1.05rem}
.meta{margin:0 0 26px;color:var(--mute)}
.meta span+span::before{content:"·";margin:0 .5em}
.pill{display:inline-flex;align-items:center;justify-content:space-between;gap:28px;min-height:48px;padding:10px 24px;border:1px solid var(--line);border-radius:2px;background:transparent;color:var(--ink);font:600 .8rem/1.2 var(--ui);letter-spacing:.12em;text-transform:uppercase;text-decoration:none;cursor:pointer;transition:background .2s,color .2s}
.pill:hover{background:var(--ink);color:var(--paper)}
.pill .arr{font-size:1.1rem;letter-spacing:0}
.pill.solid{background:var(--ink);color:var(--paper)}
.pill.solid:hover{background:var(--brass);color:#171214;border-color:var(--brass)}
.latest h2{margin:0 0 6px;padding-top:14px;border-top:1px solid var(--line)}
.latest ol{list-style:none;margin:0;padding:0}
.latest li{padding:18px 0;border-bottom:1px solid var(--hair)}
.latest li:last-child{border-bottom:0}
.latest time,.latest .no{display:block;margin-bottom:6px;color:var(--coral-text)}
.latest a,.latest p{margin:0;font:500 1.2rem/1.22 var(--display);text-decoration:none;font-variation-settings:"opsz" 36}
.latest a:hover{text-decoration:underline}

/* Empty-state cover: the first edition, as a folded paper */
.paper-stack{position:relative;width:min(70%,340px);margin:24px auto;aspect-ratio:4/5;transform:rotate(-4deg)}
.paper-stack .sheet{position:absolute;inset:0;background:#f4ead9;color:#17141a;box-shadow:0 18px 40px -18px rgb(0 0 0/.55);padding:8% 9%;display:flex;flex-direction:column}
.paper-stack .sheet.back{transform:rotate(8deg) translate(5%,2%);background:#e4d5bd}
.sh-mark{margin:0 0 6%;font:900 clamp(1.5rem,3.4vw,2.8rem)/.9 var(--display);letter-spacing:-.04em;font-variation-settings:"opsz" 144}
.sh-mark em{font-weight:400;color:#7d1d2c}
.sh-rule{height:6px;margin:0 0 7%;border-top:2px solid #17141a;border-bottom:1px solid #17141a}
.sheet ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;justify-content:space-around;flex:1}
.sheet li{display:flex;gap:12px;align-items:flex-start;font:600 clamp(.82rem,1.4vw,1.02rem)/1.25 var(--ui)}
.sheet li b{flex:0 0 auto;min-width:2.3em;padding:3px 0;text-align:center;color:#fff;font:700 .78em/1.2 var(--ui);letter-spacing:.06em}
.sheet li:nth-child(1) b{background:#141214;color:#f6efe8}.sheet li:nth-child(2) b{background:var(--s2);color:var(--f2)}.sheet li:nth-child(3) b{background:var(--s3);color:var(--f3)}.sheet li:nth-child(4) b{background:var(--s4);color:var(--f4)}
.sh-foot{margin:6% 0 0;font:600 .68rem/1 var(--ui);letter-spacing:.16em;text-transform:uppercase}

/* Inside the latest: a contents page. Each story is a row with its colour as a thin swatch on the
   left; on hover or focus the swatch unrolls across the row and the arrow slides in. Story n keeps
   colour ((n-1) mod 6)+1, the same as its chip in the article. */
.edition{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(28px,5vw,88px);align-items:start;max-width:var(--wrap);margin:0 auto;padding:clamp(64px,8vw,112px) var(--gut) clamp(72px,9vw,128px)}
.ed-side{position:sticky;top:28px}
.ed-side .kicker{margin:0 0 14px;color:var(--coral-text)}
.ed-side h2{margin:0 0 22px;font:900 clamp(2.6rem,5vw,4.6rem)/.92 var(--display);letter-spacing:-.035em;font-variation-settings:"opsz" 96}
.ed-side h2 em{display:block;font-weight:400;color:var(--coral-text)}
.ed-title{margin:0 0 10px;padding-top:18px;border-top:1px solid var(--brass);font:600 1.35rem/1.25 var(--display)}
.ed-title a{text-decoration:none}
.ed-title a:hover{text-decoration:underline;text-underline-offset:4px}
.ed-side .meta{margin:0 0 24px}
.contents{list-style:none;margin:0;padding:0;counter-reset:st;border-bottom:1px solid var(--line)}
.contents li{counter-increment:st;--sw:var(--s1);--fw:var(--f1)}
.contents li:nth-child(6n+2){--sw:var(--s2);--fw:var(--f2)}.contents li:nth-child(6n+3){--sw:var(--s3);--fw:var(--f3)}
.contents li:nth-child(6n+4){--sw:var(--s4);--fw:var(--f4)}.contents li:nth-child(6n+5){--sw:var(--s5);--fw:var(--f5)}.contents li:nth-child(6n+6){--sw:var(--s6);--fw:var(--f6)}
.contents li>*{position:relative;isolation:isolate;display:grid;grid-template-columns:clamp(4.2rem,7vw,6.2rem) minmax(0,1fr) auto;align-items:center;gap:clamp(12px,2vw,28px);min-height:clamp(96px,9vw,124px);padding:18px clamp(18px,2.4vw,32px) 18px clamp(22px,2.8vw,36px);border-top:1px solid var(--line);text-decoration:none;color:var(--ink);transition:color .35s}
.contents li>*::before{content:"";position:absolute;z-index:-1;left:0;top:0;bottom:0;width:6px;background:var(--sw);transition:width .55s cubic-bezier(.65,0,.2,1)}
.contents li:nth-child(6n+2)>*::before{background-image:var(--pin)}
.contents li:nth-child(6n+5)>*::before{background:linear-gradient(rgb(8 10 36/.35),rgb(8 10 36/.35)),url(/img/navy-pinstripe-fabric-draped.jpg) center/cover var(--sw)}
.contents li:nth-child(6n+3)>*::before{box-shadow:inset 0 0 0 1px rgb(23 18 20/.18)}
.contents .no::before{content:counter(st,decimal-leading-zero);font:italic 400 clamp(2.4rem,4.4vw,3.8rem)/1 var(--display);font-variation-settings:"opsz" 96;color:var(--coral-text);transition:color .35s,transform .45s cubic-bezier(.2,.7,.2,1);display:inline-block;transform-origin:left center}
.contents .hd{font:700 clamp(1.3rem,2.3vw,2.1rem)/1.12 var(--display);letter-spacing:-.015em;font-variation-settings:"opsz" 72}
.contents .tx{display:block;max-width:52ch;margin-top:8px;font:400 1rem/1.5 var(--ui);letter-spacing:0;opacity:.85}
.contents .go{font:400 1.6rem/1 var(--ui);opacity:.35;transform:translateX(-10px);transition:opacity .35s,transform .45s cubic-bezier(.2,.7,.2,1)}
.contents li>:is(:hover,:focus-visible){color:var(--fw)}
.contents li>:is(:hover,:focus-visible)::before{width:100%}
.contents li>:is(:hover,:focus-visible) .no::before{color:inherit;transform:scale(1.08)}
.contents li>:is(:hover,:focus-visible) .go{opacity:1;transform:none}
.contents li>:focus-visible{outline-offset:-3px}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .contents li{animation:row-in linear both;animation-timeline:view();animation-range:entry 0% entry 70%}
  }
}
@keyframes row-in{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@media (max-width:1020px){.edition{grid-template-columns:1fr}.ed-side{position:static}}
@media (max-width:720px){.contents li>*{grid-template-columns:3.2rem minmax(0,1fr);padding:16px 14px 16px 20px}.contents .go{display:none}}
.sec-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:12px 24px;margin:0 0 24px;padding-top:16px;border-top:1px solid var(--line)}
.sec-head h2{margin:0;font:800 clamp(2rem,4.4vw,3.6rem)/1 var(--display);letter-spacing:-.03em;font-variation-settings:"opsz" 144}
.sec-head h2 em{font-weight:400;color:var(--coral-text)}
.sec-head a{font:600 .78rem/1 var(--ui);letter-spacing:.16em;text-transform:uppercase}

/* Past editions: dark band with a sideways shelf */
.archive{background:linear-gradient(rgb(8 10 36/.5),rgb(8 10 36/.68)),url(/img/navy-pinstripe-fabric-flat.jpg) center top/700px auto repeat var(--navy);color:#f2e9e0;padding:clamp(56px,7vw,96px) 0}
.archive .wrap{display:grid;grid-template-columns:minmax(200px,1fr) 3fr;gap:clamp(24px,4vw,64px);align-items:start}
.archive h2{display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-end;min-height:clamp(260px,26vw,380px);margin:0;padding:clamp(24px,2.6vw,40px);font:400 clamp(2.4rem,4.2vw,4.2rem)/.95 var(--display);letter-spacing:-.03em;text-align:right;font-variation-settings:"opsz" 96;background:linear-gradient(170deg,rgb(8 10 36/.05),rgb(8 10 36/.6)),url(/img/navy-pinstripe-fabric-draped.jpg) center/cover var(--navy);box-shadow:0 30px 60px -26px rgb(0 0 0/.75);outline:1px solid rgb(193 154 75/.55);outline-offset:8px}
.archive h2 em{display:block;color:var(--brass-hi)}
.shelf{list-style:none;margin:0;padding:0 0 18px;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(240px,30%);gap:clamp(18px,2.4vw,36px);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-color:var(--brass) transparent}
.shelf li{scroll-snap-align:start}
.shelf a{display:block;text-decoration:none}
.shelf .thumb{display:block;aspect-ratio:4/5;outline:1px solid rgb(193 154 75/.5);outline-offset:6px;background:var(--s3);color:var(--f3);overflow:hidden;margin-bottom:14px}
.shelf li:nth-child(4n+2) .thumb{background:var(--s2);color:var(--f2)}.shelf li:nth-child(4n+3) .thumb{background:var(--s4);color:var(--f4)}.shelf li:nth-child(4n+4) .thumb{background:var(--s1);color:var(--f1)}
.shelf img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.shelf a:hover img{transform:scale(1.04)}
.shelf time{display:block;margin-bottom:8px;color:var(--brass-hi)}
.shelf h3{margin:0;font:500 1.4rem/1.15 var(--display);font-variation-settings:"opsz" 48}
.shelf a:hover h3{text-decoration:underline}

/* What we do */
.why{max-width:1000px;margin:0 auto;padding:clamp(72px,9vw,128px) var(--gut);text-align:center}
.why h2{margin:18px 0 26px;font:600 clamp(2.5rem,6vw,5.2rem)/.98 var(--ui);letter-spacing:-.055em}
.why h2 em{font:italic 400 1.04em/1 var(--display);letter-spacing:-.03em;color:var(--coral-text)}
.why p{max-width:62ch;margin:0 auto 30px;font-size:1.12rem}
.chips{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;list-style:none;margin:0 0 34px;padding:0}
.chips li{padding:9px 18px;border:1px solid var(--line);border-radius:2px;font:600 .74rem/1.2 var(--ui);letter-spacing:.14em;text-transform:uppercase}

/* Sign-up: the group chat */
.chat-band{position:relative;background:radial-gradient(120% 90% at 50% 0%,#a63a55,var(--velvet) 45%,#5e1a2c);color:var(--ivory);overflow:hidden}
.chat-band::before{content:"";position:absolute;inset:0;opacity:.12;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.chat-band .wrap{position:relative;display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(28px,5vw,72px);align-items:center;padding-top:clamp(56px,7vw,96px);padding-bottom:clamp(56px,7vw,96px)}
.chat-band h2{margin:14px 0 28px;font:900 clamp(2.8rem,7vw,6.4rem)/.92 var(--display);letter-spacing:-.045em;font-variation-settings:"opsz" 144}
.chat-band h2 em{font-weight:400;color:var(--brass-hi)}
.chat-band .label{color:var(--brass-hi)}
.chat-band .pill.solid{background:var(--brass);color:#171214;border-color:var(--brass)}
.chat-band .pill.solid:hover{background:var(--ivory);border-color:var(--ivory)}
.chat-band p{max-width:46ch;margin:0 0 26px;font-size:1.08rem}
.signup label{display:block;margin-bottom:8px}
.signup .row{display:flex;flex-wrap:wrap;gap:10px}
.signup input[type=email]{flex:1 1 240px;min-height:52px;padding:12px 20px;border:1px solid var(--brass);border-radius:2px;background:rgb(0 0 0/.2);color:var(--ivory);font:500 1rem var(--ui)}
.signup input[type=email]::placeholder{color:rgb(245 238 227/.6)}
.signup .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.signup .note{margin:12px 0 0;font-size:.92rem}
.signup-msg{margin:14px 0 0;padding:10px 16px;border-left:3px solid var(--brass);background:var(--ivory);color:#171214}
.phone{justify-self:center;width:min(100%,320px);aspect-ratio:9/18;padding:13px;border-radius:46px;background:#111;box-shadow:0 30px 60px -24px rgb(0 0 0/.6),0 0 0 2px #8a6a2c;transform:rotate(7deg)}
.phone .scr{height:100%;border-radius:34px;background:#fff;color:#111;padding:54px 14px 18px;display:flex;flex-direction:column;gap:10px;position:relative;font:500 .92rem/1.35 system-ui,-apple-system,"Segoe UI",sans-serif}
.phone .scr::before{content:"";position:absolute;top:12px;left:33%;width:34%;height:24px;border-radius:20px;background:#111}
.phone .who{margin:0 0 6px;text-align:center;font:700 .95rem/1.2 var(--ui)}
.phone .who span{display:block;font:500 .72rem/1.4 var(--ui);color:#6b6b70}
.bub{align-self:flex-start;max-width:84%;margin:0;padding:9px 13px;border-radius:18px;background:var(--bubble);color:#111}
.bub.me{align-self:flex-end;background:var(--sent);color:#fff}
.bub.dots{display:flex;gap:4px;padding:12px 14px}
.bub.dots i{width:7px;height:7px;border-radius:50%;background:#8e8e93;animation:blink 1.2s infinite}
.bub.dots i:nth-child(2){animation-delay:.2s}.bub.dots i:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,60%,100%{opacity:.35}30%{opacity:1}}
.bang{position:absolute;right:clamp(8px,6vw,90px);top:clamp(18px,4vw,48px);display:grid;place-items:center;width:clamp(64px,8vw,104px);aspect-ratio:1;border-radius:50%;background:var(--gilt);color:#171214;font:900 clamp(1.8rem,3vw,2.8rem)/1 var(--display);transform:rotate(8deg)}

/* Footer */
.foot{background:#171214 var(--pin);color:#f2e9e0;padding:clamp(48px,6vw,80px) var(--gut) 40px}
.foot>*{max-width:var(--wrap);margin-left:auto;margin-right:auto}
.foot-word{margin-top:0;margin-bottom:28px;font:900 clamp(2.8rem,9vw,8.4rem)/.85 var(--display);letter-spacing:-.045em;font-variation-settings:"opsz" 144}
.foot-word em{font-weight:400;color:var(--brass-hi)}
.foot p{margin-top:0;margin-bottom:10px}
.foot a{color:#f2e9e0}
.foot a:hover{color:var(--brass-hi)}
.foot .buzzz{margin-top:22px;padding-top:18px;border-top:1px solid rgb(193 154 75/.35);font:600 .78rem/1 var(--ui);letter-spacing:.16em;text-transform:uppercase}

/* Article */
.art-head{max-width:1080px;margin:0 auto;padding:clamp(24px,4vw,56px) var(--gut) 34px;text-align:center}
.art-head h1{margin:0 0 22px;font:800 clamp(2.3rem,6vw,5.4rem)/.98 var(--display);letter-spacing:-.035em;font-variation-settings:"opsz" 144}
.art-head .dek{max-width:58ch;margin:0 auto 22px;font:400 clamp(1.1rem,1.6vw,1.32rem)/1.55 var(--ui)}
.byline{margin:0;font-size:.95rem}
.byline a{font-weight:700;text-decoration:none}
.byline a:hover{text-decoration:underline}
.art-head .meta{margin:6px 0 0;font-size:.88rem}
.art-fig{position:relative;z-index:0;max-width:1200px;margin:0 auto 72px;padding:0 var(--gut)}
.art-fig img{width:100%;aspect-ratio:16/9;object-fit:cover}
.read{display:grid;grid-template-columns:minmax(200px,280px) minmax(0,700px);justify-content:center;gap:clamp(28px,5vw,80px);max-width:var(--wrap);margin:0 auto;padding:0 var(--gut) 88px}
.rail{position:sticky;top:24px;align-self:start}
.rail h2{margin:0 0 10px;padding-top:12px;border-top:1px solid var(--line)}
.rail ol{list-style:none;margin:0;padding:0;counter-reset:rl}
.rail li{counter-increment:rl;border-bottom:1px solid var(--hair)}
.rail a{display:flex;gap:12px;padding:12px 0;text-decoration:none;font:500 1rem/1.25 var(--display);font-variation-settings:"opsz" 24}
.prose{font:400 1.2rem/1.72 var(--display);font-variation-settings:"opsz" 11;counter-reset:h}
.prose>p:first-child::first-letter{float:left;margin:.06em .1em 0 0;font:400 5.4em/.78 var(--display);font-variation-settings:"opsz" 96;color:var(--coral-text)}
.prose p{margin:0 0 1.15em}
.prose a{text-decoration-color:var(--coral);text-decoration-thickness:2px;text-underline-offset:3px}
.prose a:hover{color:var(--coral-text)}
.prose strong{font-weight:700}
.prose h2{counter-increment:h;margin:2.2em 0 .7em;padding-top:18px;border-top:1px solid var(--line);font:700 clamp(1.6rem,2.6vw,2.15rem)/1.12 var(--display);letter-spacing:-.02em;font-variation-settings:"opsz" 96;scroll-margin-top:24px}
/* "Quick answers" (an h2 followed by h3 questions) is not a story: no number, Q&A rows instead */
.prose h2:has(+h3){counter-increment:none;margin-top:2.6em;font:600 .8rem/1.2 var(--ui);letter-spacing:.16em;text-transform:uppercase}
.prose h2:has(+h3)::before{content:none}
.prose h2:has(+h3)~h3{margin:18px 0 6px;font:700 1.25rem/1.25 var(--display);font-variation-settings:"opsz" 36}
.prose h2:has(+h3)~p{margin:0;padding:0 0 16px;border-bottom:1px solid var(--hair);font-size:1.08rem}
.prose h3{margin:1.6em 0 .5em;font:700 1.35rem/1.2 var(--display)}
.prose ul,.prose ol{padding-left:1.3em}
.prose li{margin-bottom:.4em}
.prose li::marker{color:var(--coral-text)}
.prose blockquote{position:relative;margin:2em 0;padding:18px 0 58px;font:400 clamp(1.5rem,2.6vw,1.95rem)/1.3 var(--display);letter-spacing:-.01em;text-align:center;font-variation-settings:"opsz" 96}
.prose blockquote p{margin:0}
.prose blockquote::after{content:"\201D";position:absolute;left:50%;bottom:-.05em;transform:translateX(-50%);font:400 4.2rem/1 var(--display);color:var(--coral)}
.prose img{margin:1.4em 0}
.prose hr{border:0;border-top:1px solid var(--line);margin:2.4em 0}
.after{margin-top:48px}
.after h2{margin:0 0 12px;padding-top:14px;border-top:1px solid var(--line)}
.after ol,.after ul{margin:0;padding-left:1.3em;font-size:.98rem}
.after li{margin-bottom:8px}
.after li::marker{color:var(--coral-text)}
.after .from{color:var(--mute)}
.more{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut) 96px}
.cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:clamp(18px,2.4vw,32px)}
.cards a{display:flex;flex-direction:column;height:100%;border:1px solid var(--line);box-shadow:inset 0 3px 0 var(--brass);text-decoration:none;background:var(--paper)}
.cards .thumb{display:block;aspect-ratio:3/2;background:var(--s3);color:var(--f3);overflow:hidden}
.cards li:nth-child(3n+2) .thumb{background:var(--s2);color:var(--f2)}.cards li:nth-child(3n+3) .thumb{background:var(--s4);color:var(--f4)}
.cards img{width:100%;height:100%;object-fit:cover}
.cards .in{display:block;padding:20px 22px 24px}
.cards time{display:block;margin-bottom:10px;color:var(--coral-text)}
.cards h3{margin:0;font:500 1.38rem/1.15 var(--display);font-variation-settings:"opsz" 48}
.cards a:hover h3{text-decoration:underline}

/* About */
.about-hero{max-width:var(--wrap);margin:0 auto;padding:clamp(28px,5vw,64px) var(--gut) clamp(48px,6vw,80px)}
.about-hero h1{max-width:14ch;margin:16px 0 28px;font:900 clamp(3rem,8.4vw,7.6rem)/.88 var(--display);letter-spacing:-.045em;font-variation-settings:"opsz" 144}
.about-hero h1 em{font-weight:400;color:var(--coral-text)}
.about-hero p{max-width:60ch;font-size:1.15rem}
.beats{list-style:none;margin:0 auto;padding:0 var(--gut);max-width:var(--wrap);display:grid;grid-template-columns:repeat(4,1fr)}
.beats li{min-height:300px;padding:clamp(20px,2.4vw,32px);color:#fff;display:flex;flex-direction:column;justify-content:space-between;gap:24px}
.beats li:nth-child(1){background:var(--s1);color:var(--f1)}.beats li:nth-child(2){background:var(--s2) var(--pin);color:var(--f2)}.beats li:nth-child(3){background:var(--s3);color:var(--f3)}.beats li:nth-child(4){background:var(--s4);color:var(--f4)}
.beats b{font:500 clamp(1.8rem,2.6vw,2.6rem)/1 var(--display)}
.beats h3{margin:0 0 8px;font:700 1.7rem/1.05 var(--display);font-variation-settings:"opsz" 72}
.beats p{margin:0;font-size:.98rem;opacity:.92}
.how{max-width:var(--wrap);margin:0 auto;padding:clamp(64px,8vw,112px) var(--gut);display:grid;grid-template-columns:1fr 2fr;gap:clamp(24px,5vw,80px)}
.how h2{margin:0;font:800 clamp(2rem,4.4vw,3.6rem)/1 var(--display);letter-spacing:-.03em;font-variation-settings:"opsz" 144}
.how h2 em{font-weight:400;color:var(--coral-text)}
.how ol{list-style:none;margin:0;padding:0;counter-reset:hw}
.how li{counter-increment:hw;display:grid;grid-template-columns:3.4rem 1fr;gap:16px;padding:22px 0;border-top:1px solid var(--line)}
.how li::before{content:counter(hw,decimal-leading-zero);font:500 1.8rem/1 var(--display);color:var(--coral-text)}
.how h3{margin:0 0 6px;font:700 1.35rem/1.2 var(--display)}
.how p{margin:0}
.who-box{max-width:1000px;margin:0 auto clamp(64px,8vw,112px);padding:clamp(28px,4vw,48px);border:1px solid var(--brass);border-radius:2px;box-shadow:inset 0 0 0 6px var(--paper),inset 0 0 0 7px rgb(193 154 75/.5)}
.who-wrap{padding:0 var(--gut)}
.who-box h2{margin:12px 0 14px;font:700 clamp(1.8rem,3.4vw,2.6rem)/1.05 var(--display);letter-spacing:-.02em}
.who-box p{margin:0 0 14px;max-width:64ch}

/* Narrower screens */
@media (max-width:1020px){
  .mast-grid{grid-template-columns:1fr 1fr}
  .cover{grid-column:1/-1;max-width:720px;width:100%;justify-self:center}
  .cover-copy{grid-column:1/2;padding-top:36px}
  .latest{grid-column:2/3;padding-top:36px}
  .read{grid-template-columns:minmax(0,700px)}
  .rail{position:static}
  .how{grid-template-columns:1fr}
  .beats{grid-template-columns:1fr 1fr}
}
@media (max-width:720px){
  .pipes{display:none}
  .home .top{display:none}
  .top{padding:14px var(--gut)}
  .mast{padding-top:22px;padding-bottom:56px}
  .dateline{position:static;writing-mode:horizontal-tb;transform:none;margin:0 0 10px}
  .wordmark{margin-left:0}
  .mast-grid{grid-template-columns:1fr;gap:28px 0;margin-top:28px}
  .cover{padding:0}
  .mast{padding-left:calc(var(--gut) + 14px);padding-right:calc(var(--gut) + 14px)}
  .home .room{margin-top:0;padding-top:0}
  .cover-copy,.latest{grid-column:1/-1}
  .archive .wrap{grid-template-columns:1fr}
  .archive h2{text-align:left;align-items:flex-start;min-height:200px}
  .shelf{grid-auto-columns:78%}
  .chat-band .wrap{grid-template-columns:1fr}
  .phone{width:min(76%,280px);transform:rotate(4deg)}
  .bang{display:none}
  .beats{grid-template-columns:1fr}
  .beats li{min-height:0}
  .pill{width:100%}
}
.paper-stack,.sh-mark,.sh-rule,.sh-foot{display:block}

/* Spotlight pages (_spotlight.html, Cara 2026-10-22): portrait on the burgundy block, big name, photos in the story */
.spot-head{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(28px,5vw,80px);align-items:center;max-width:1240px;margin:0 auto;padding:clamp(24px,4vw,56px) var(--gut) clamp(48px,7vw,96px)}
.spot-portrait{position:relative;margin:0}
.spot-portrait img{display:block;width:100%;aspect-ratio:11/13;object-fit:cover}
.spot-portrait figcaption{margin-top:14px;color:var(--mute);font-size:.72rem}
.spot-copy h1{margin:0 0 22px;font:800 clamp(2.6rem,6.4vw,6rem)/.95 var(--display);letter-spacing:-.04em;font-variation-settings:"opsz" 144}
.spot-copy .dek{max-width:46ch;margin:0 0 22px;font:400 clamp(1.1rem,1.6vw,1.32rem)/1.55 var(--ui)}
.spot-copy .byline{margin:0 0 6px}
.spot-copy .meta{margin:0;font-size:.88rem}
.spot-tag{display:inline-block;margin-right:10px;padding:5px 10px;background:var(--s2);color:var(--f2)}
.spot-fig{margin:2em 0 2.2em}
.spot-fig img{display:block;width:100%;height:auto}
.spot-fig figcaption{margin-top:14px;color:var(--mute);font:500 .82rem/1.4 var(--ui)}
@media (max-width:820px){.spot-head{grid-template-columns:1fr}.spot-portrait{max-width:520px}}
/* The BUZZZ disclosure line, moved under Sources in small type (Cara, 2026-10-22) */
.disclosure{margin:18px 0 0;color:var(--mute);font:500 .7rem/1.4 var(--ui);letter-spacing:.04em}

/* Notice pages (_notice.html: 404 and "you're on the list", 2026-10-28): a framed piece on the oxblood wall */
.notice .notice-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,96px);align-items:center;max-width:1160px;margin:0 auto;padding:clamp(48px,8vw,120px) calc(var(--gut) + clamp(14px,4.5vw,72px))}
.notice-frame{display:block;transform:rotate(-2deg)}
.notice-frame .art{display:block;position:relative;aspect-ratio:4/5;overflow:hidden;background:#f3ece0}
.notice-frame i{position:absolute;background:#171214}
.notice-frame i:nth-child(1){left:18%;top:42%;width:24%;height:30%}
.notice-frame i:nth-child(2){left:30%;top:16%;width:46%;height:10%}
.notice-frame i:nth-child(3){left:64%;top:16%;width:12%;height:66%}
.notice h1{margin:0 0 22px;font:900 clamp(2.6rem,6vw,5.4rem)/.95 var(--display);letter-spacing:-.035em;font-variation-settings:"opsz" 96}
.notice h1 em{display:block;font-weight:400;color:var(--brass-hi)}
.notice-copy>p:not(.kicker):not(.notice-btns){max-width:46ch;margin:0 0 30px;font-size:1.12rem;color:rgb(245 238 227/.85)}
.notice-btns{display:flex;flex-wrap:wrap;gap:12px;margin:0}
.notice-page .more{padding-top:clamp(56px,7vw,96px)}
@media (max-width:720px){.notice .notice-in{grid-template-columns:1fr}.notice-art{max-width:220px}}
/* The room photo (Cara, 2026-10-28; credits in public/img/CREDITS.md). Wide screens: the photo is the
   left half of the room, full height, and the masthead sits on the oxblood panel beside it.
   Narrower: a band across the top, under the header. */
.home .room{padding-top:0}
.room-photo{position:relative;margin:0;overflow:hidden;background:var(--oxblood-deep)}
.room-photo img{display:block;width:100%;height:100%;object-fit:cover}
.room-photo::after{content:"";position:absolute;inset:0;pointer-events:none}
@media (min-width:1021px){
  .home .room{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
  .home .room::before{display:none}
  .room-photo img{position:absolute;inset:0;object-position:50% 40%}
  .room-photo::after{background:linear-gradient(90deg,transparent 62%,rgb(58 11 19/.85)),linear-gradient(180deg,rgb(23 18 20/.45),transparent 14%)}
  .home .mast{width:100%;padding:calc(64px + clamp(28px,3vw,48px)) calc(clamp(14px,4.5vw,72px) + clamp(24px,3vw,48px)) clamp(56px,6vw,88px) clamp(28px,3.4vw,56px)}
  .home .dateline{position:static;writing-mode:horizontal-tb;transform:none;margin:0 0 14px}
  .home .wordmark{text-align:left;font-size:clamp(3.4rem,6.2vw,7rem)}
  .home .beats-line{text-align:left}
  .home .mast-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px clamp(24px,3vw,44px);margin-top:clamp(28px,3.4vw,48px)}
  .home .cover{grid-column:1/2}
  .home .cover-copy{grid-column:2/3}
  .home .latest{grid-column:1/-1}
  .home .latest ol{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 28px}
  .home .latest li:nth-child(n+4){display:none}
  .home .latest li{border-bottom:0}
}
@media (max-width:1020px){
  .room-photo img{aspect-ratio:16/10;object-position:50% 36%}
  .room-photo::after{background:linear-gradient(180deg,rgb(23 18 20/.45),transparent 22%,transparent 70%,var(--oxblood))}
  .home .room::before,.home .room::after{display:none}
}
@media (max-width:720px){.room-photo img{aspect-ratio:4/3}}

/* Article and spotlight pages (2026-10-28): the title on the oxblood wall with the picture hung half
   on it, a brass reading-progress line, the rail and story headings in the contents-row style, and
   "More to read" on Cara's navy fabric. */
.article .top{position:relative;z-index:2;box-sizing:border-box;min-height:64px;color:var(--ivory);border-bottom:1px solid rgb(193 154 75/.35);max-width:calc(var(--wrap) - 2 * var(--gut));--focus:#e3c27a}
.article .mini em{color:var(--brass-hi)}
.article .pipes li+li{border-left-color:rgb(193 154 75/.35)}
.article .pipes a:hover{color:var(--brass-hi)}
.art-room{margin-top:-64px;padding-top:64px}
.art-room .art-head{padding:clamp(40px,6vw,88px) calc(var(--gut) + clamp(14px,4.5vw,72px)) clamp(48px,6vw,80px)}
.art-room:has(+.art-fig) .art-head{padding-bottom:clamp(150px,17vw,260px)}
.art-room .kicker,.art-room .byline a:hover{color:var(--brass-hi)}
.art-room .dek{color:rgb(245 238 227/.86)}
.art-room .byline a{color:var(--ivory)}
.art-room .meta{color:rgb(245 238 227/.62)}
.art-fig{z-index:1;margin-top:calc(-1 * clamp(110px,13vw,210px))}
.spot-room .spot-head{padding:clamp(40px,6vw,80px) calc(var(--gut) + clamp(14px,4.5vw,72px)) clamp(56px,7vw,96px)}
.spot-room .spot-copy .dek{color:rgb(245 238 227/.86)}
.spot-room .spot-copy .meta,.spot-room .spot-portrait figcaption{color:rgb(245 238 227/.62)}
.spot-room .spot-copy .kicker{color:var(--brass-hi)}
@supports (animation-timeline:scroll()){
  .article::after{content:"";position:fixed;z-index:60;left:0;top:0;width:100%;height:3px;background:linear-gradient(90deg,var(--brass-deep),var(--brass-hi));transform-origin:0 50%;animation:read-progress linear both;animation-timeline:scroll(root)}
}
@keyframes read-progress{from{transform:scaleX(0)}to{transform:scaleX(1)}}

.rail li{--sw:var(--s1);--fw:var(--f1)}
.rail li:nth-child(6n+2){--sw:var(--s2);--fw:var(--f2)}.rail li:nth-child(6n+3){--sw:var(--s3);--fw:var(--f3)}.rail li:nth-child(6n+4){--sw:var(--s4);--fw:var(--f4)}.rail li:nth-child(6n+5){--sw:var(--s5);--fw:var(--f5)}.rail li:nth-child(6n+6){--sw:var(--s6);--fw:var(--f6)}
.rail a{align-items:baseline;padding:12px 12px 12px 16px;background:linear-gradient(var(--sw),var(--sw)) no-repeat 0 0/3px 100%;transition:background-size .45s cubic-bezier(.65,0,.2,1),color .3s}
.rail a::before{content:counter(rl,decimal-leading-zero);flex:0 0 2.1em;font:italic 400 1.35rem/1 var(--display);font-variation-settings:"opsz" 72;color:var(--coral-text);transition:color .3s}
.rail a:is(:hover,:focus-visible,[aria-current]){background-size:100% 100%;color:var(--fw)}
.rail a:is(:hover,:focus-visible,[aria-current])::before{color:inherit}

.prose h2{--sw:var(--s1);padding-top:22px;background:linear-gradient(var(--sw),var(--sw)) no-repeat 0 0/72px 5px}
.prose h2:nth-of-type(6n+2){--sw:var(--s2)}.prose h2:nth-of-type(6n+3){--sw:var(--s3)}.prose h2:nth-of-type(6n+4){--sw:var(--s4)}.prose h2:nth-of-type(6n+5){--sw:var(--s5)}.prose h2:nth-of-type(6n+6){--sw:var(--s6)}
.prose h2::before{content:counter(h,decimal-leading-zero);display:block;margin:0 0 8px;font:italic 400 clamp(2.4rem,4vw,3.4rem)/1 var(--display);font-variation-settings:"opsz" 96;letter-spacing:0;color:var(--coral-text)}
.prose h2:has(+h3){background:none}

.fabric-band{background:linear-gradient(rgb(8 10 36/.5),rgb(8 10 36/.68)),url(/img/navy-pinstripe-fabric-flat.jpg) center top/700px auto repeat var(--navy);color:#f2e9e0;--focus:#e3c27a}
.fabric-band .more{padding-top:clamp(56px,7vw,96px)}
.fabric-band .sec-head{border-top-color:rgb(193 154 75/.6)}
.fabric-band .sec-head h2 em{color:var(--brass-hi)}
.fabric-band .cards a{background:var(--ivory);color:#171214;border-color:transparent}
.fabric-band .cards time{color:#7d1d2c}