/* ==========================================================================
   Sub-pages (About, News). 11-08: he didn't like the dark backgrounds, so both
   now sit on the home page's Cream with black ink and pink accents.
   (Class is still .dark so the markup didn't change; it's just the page theme.)
   ========================================================================== */
.dark{--bg:#F3EFE8; --fg:#000; --fg2:#333; --fg3:#555; --line:rgba(0,0,0,.3); --line2:rgba(0,0,0,.1); --card:#FBFAF9;
  background:var(--bg);color:var(--fg)}
.dark .eyebrow{color:var(--fg3)}
.dark .eyebrow.pink{color:var(--pink-text)}

/* nav */
.pnav{position:fixed;top:0;left:0;right:0;z-index:9000;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px var(--m);
  background:color-mix(in srgb,var(--bg) 78%,transparent);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.pnav .links{display:flex;gap:30px;font-size:14px;font-weight:500}
.pnav .links a.on{color:var(--pink-text)}
.pnav .pill-outline{border-color:var(--fg)}
@media (max-width:900px){.pnav .links{display:none}.pnav{padding:14px 16px}.pnav .logo{font-size:26px}.pnav .pill-outline{font-size:13px;padding:8px 16px}}

.pill-light{background:#000;color:#fff}
.p-sec{padding:clamp(100px,16vh,180px) 0}
.p-h1{font-size:clamp(56px,8.6vw,124px);font-weight:500;letter-spacing:-.055em;line-height:.92;margin-top:24px}
.p-h1 em{font-style:normal;color:var(--pink-text)}
.p-h2{font-size:clamp(38px,4.6vw,66px);font-weight:500;letter-spacing:-.045em;line-height:.98;margin-top:16px}
.p-lede{font-size:clamp(17px,1.4vw,20px);line-height:1.55;color:var(--fg2);max-width:32em}
.p-body{font-size:16px;line-height:1.6;color:var(--fg2);max-width:34em}

/* photos (team = placeholders still; others real, 11-08) */
.ph{position:relative;margin:0;border-radius:24px;overflow:hidden;background:#E7E1D7}
.ph img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(.15) contrast(1.02);transform:scale(1.08);will-change:transform}
.ph-real img{filter:none}
.ph .ph-tag{position:absolute;left:14px;top:14px;font-size:10.5px;font-weight:600;letter-spacing:.14em;padding:6px 10px;border-radius:99px;
  background:rgba(14,13,13,.6);color:#F3EFE8;backdrop-filter:blur(6px)}

/* footer */
.pfoot{padding:28px var(--m) 24px;border-top:1px solid var(--line2);display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:13px;color:var(--fg3)}
.pfoot a{color:var(--fg2)}
.pfoot .links{display:flex;gap:24px}

/* ═════════════ ABOUT ═════════════ */
/* hero (11-08 night): the team film, home film-opener language — white type, white pills, the ring cue */
.a-film{position:relative;height:100vh;height:100svh;min-height:560px;overflow:hidden;background:#3a3633;color:#fff}
.a-film-media{position:absolute;inset:0;transform:scale(1.08);transform-origin:50% 40%;transition:transform 2.4s var(--ease-out)}
.a-film.is-in .a-film-media{transform:none}
.a-film video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 45%;display:block;transition:filter 1.6s var(--ease-out)}
.a-film.is-ended video{filter:blur(7px) saturate(.9) brightness(.86)}
.a-film-scrim{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(20,16,14,.4) 0%,rgba(20,16,14,0) 24%,rgba(20,16,14,0) 48%,rgba(20,16,14,.62) 100%)}
.a-film-in{position:absolute;left:var(--m);right:var(--m);bottom:clamp(40px,7vh,72px);display:grid;grid-template-columns:minmax(0,1fr) 320px;align-items:end;gap:40px}
.a-film-eye{grid-column:1/-1;font-size:13px;font-weight:600;letter-spacing:.2em;text-shadow:0 1px 14px rgba(0,0,0,.25)}
.a-film-h{font-family:Arial,Helvetica,sans-serif;font-weight:700;letter-spacing:-.05em;line-height:.9;font-size:clamp(64px,11vw,190px);margin:0;white-space:nowrap}
.a-film-copy{display:flex;flex-direction:column;gap:18px;padding-bottom:88px}
.a-film-copy p{font-size:16px;line-height:1.5;color:rgba(255,255,255,.88);text-wrap:pretty}
.a-film-btns{display:flex;gap:10px;flex-wrap:wrap}
.pill-outline--light{color:#fff;border-color:#fff !important;padding:14px 22px;font-size:15px}
.a-film-cue{bottom:clamp(40px,7vh,72px)}
.a-film-eye,.a-film-h,.a-film-copy>*{opacity:0;translate:0 20px;transition:opacity 1s var(--ease-out),translate 1.2s var(--ease-out)}
.a-film.is-in .a-film-eye{opacity:1;translate:0 0;transition-delay:.25s}
.a-film.is-in .a-film-h{opacity:1;translate:0 0;transition-delay:.35s}
.a-film.is-in .a-film-copy>*:nth-child(1){opacity:1;translate:0 0;transition-delay:.55s}
.a-film.is-in .a-film-copy>*:nth-child(2){opacity:1;translate:0 0;transition-delay:.7s}
.a-film.is-in .pa-cue{opacity:1}
/* the ring's end state (same as the home film; those rules are scoped to the home stage) */
.a-film.is-ended .cue-arrow{opacity:1}
.a-film.is-ended .cue-arrow i{animation:cueDrop 1.9s var(--ease) infinite}
.a-film.is-ended .cue-ring{animation:cueBreathe 3.8s ease-in-out infinite}
.a-film.is-ended .cue-label{opacity:1;translate:0 0;transition-delay:.35s}
.a-film.is-ended .pa-cue .cue-replay{opacity:1;translate:0 0;transition-delay:.9s;pointer-events:auto}
/* nav reads white while it sits over the film */
.pnav{transition:background .5s,backdrop-filter .5s}
.about.on-film .pnav{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
.about.on-film .pnav .links a:not(.on),.about.on-film .pnav .pill-outline{color:#fff;border-color:#fff;text-shadow:0 1px 14px rgba(0,0,0,.3)}
.about.on-film .pnav .links a.on{color:var(--naomi-pink)}
.pnav .links a,.pnav .pill-outline{transition:color .5s,border-color .5s}
@media (max-width:900px){
  .a-film-in{grid-template-columns:1fr;gap:14px;bottom:96px;left:16px;right:16px}
  .a-film-copy{padding-bottom:0}
  .a-film-cue{bottom:22px}
  .a-film-h{font-size:clamp(56px,17vw,96px)}
}

/* what Naomi is: three product photos with captions */
.a-what-head{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;flex-wrap:wrap}
.a-what-head .p-h2{max-width:13em}
.a-what-head .p-body{max-width:26em;padding-bottom:6px}
.a-what{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:clamp(48px,8vh,90px)}
.aw{margin:0}
.aw .ph{aspect-ratio:4/5}
.aw figcaption{display:grid;grid-template-columns:auto 1fr;column-gap:12px;margin-top:16px;font-size:15px;line-height:1.5;color:var(--fg2)}
.aw figcaption span{grid-row:span 2;font-size:12px;font-weight:600;color:var(--pink-text);padding-top:3px}
.aw figcaption b{font-size:18px;font-weight:600;letter-spacing:-.02em;color:var(--fg)}
@media (max-width:900px){.a-what{grid-template-columns:1fr}.aw .ph{aspect-ratio:5/4}}

.a-why{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:6vw;align-items:start}
.a-why .copy{display:flex;flex-direction:column;gap:20px;position:sticky;top:120px}
.a-why .ph{aspect-ratio:4/5}


.a-where{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:6vw;align-items:center}
.a-gallery{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.a-gallery .ph:nth-child(1){aspect-ratio:3/4}
.a-gallery .ph:nth-child(2){aspect-ratio:3/4;margin-top:70px}
.a-gallery .ph:nth-child(3){grid-column:1/-1;aspect-ratio:16/8}

.team{list-style:none;margin:clamp(40px,7vh,80px) 0 0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.tm-media{position:relative;margin:0 0 14px;aspect-ratio:4/5;border-radius:24px;overflow:hidden;background:#cfcac4}
.tm-media img,.tm-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.tm-media video{opacity:0;transition:opacity .45s var(--ease-out)}
.tm.is-playing .tm-media video{opacity:1}
.tm-media img{transition:transform 1.2s var(--ease-out)}
.tm:hover .tm-media img{transform:scale(1.03)}
.team h3{font-size:18px;font-weight:600;letter-spacing:-.02em}
.team p{font-size:14px;color:var(--fg3);margin-top:2px}

.a-cta{border-top:1px solid var(--line2);display:flex;justify-content:space-between;align-items:flex-end;gap:40px;flex-wrap:wrap}
.a-cta .btns{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.a-cta .pill-outline{border-color:var(--fg);padding:14px 24px;font-size:15px}

@media (max-width:1023px){
  .a-why,.a-where{grid-template-columns:1fr}
  .a-why .copy{position:static}
  .team{grid-template-columns:repeat(2,1fr)}
}

/* ═════════════ ABOUT [01] (11-09 v2) ═════════════
   One still composition: two product cards stacked left, the worn photo large right at the pair's height.
   Each photo rises out of its own frame once as it enters (page.js aboutWhat); ring on the stud. */
.ear-ring.tag-below .ear-tag{left:50%;right:auto;top:calc(100% + 14px);translate:-50% 6px}
.ear-ring.tag-below.is-on .ear-tag{translate:-50% 0}
.aw3{display:grid;grid-template-columns:1fr 1fr 1.42fr;gap:clamp(16px,2vw,28px);margin-top:clamp(48px,8vh,90px);align-items:start}
.aw3-card{margin:0;display:flex;flex-direction:column;min-width:0}
/* column widths 1 : 1 : 1.42 with 9:16 and 4:5 frames = the three photos end at the same height */
.aw3-ph{position:relative;border-radius:24px;overflow:hidden;background:#EDE8DF;aspect-ratio:9/16;
  clip-path:inset(100% 0 0 0 round 24px);transition:clip-path 1.3s var(--ease-out)}
.aw3-big .aw3-ph{aspect-ratio:4/5}
.aw3-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.08);transition:transform 1.6s var(--ease-out)}
.aw3-card.is-in .aw3-ph{clip-path:inset(0 0 0 0 round 24px)}
.aw3-card.is-in .aw3-ph img{transform:scale(1)}
.aw3-card:not(.aw3-big):hover .aw3-ph img{transform:scale(1.04)}
.aw3-big .aw3-ph::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(20,16,14,0) 60%,rgba(20,16,14,.18))}
.aw3-big .ear-ring{z-index:2}
.aw3-big .ear-tag{color:#fff}
.aw3-card figcaption{display:flex;gap:16px;align-items:baseline;padding:20px 4px 0;opacity:0;translate:0 14px;transition:opacity .9s var(--ease) .25s,translate 1s var(--ease-out) .25s}
.aw3-card.is-in figcaption{opacity:1;translate:0 0}
.aw3-num{flex:none;font-family:'DM Mono',monospace;font-size:11.5px;letter-spacing:.14em;color:var(--pink-text);padding:4px 9px;border:1px solid rgba(224,122,154,.35);border-radius:99px}
.aw3-card figcaption b{display:block;font-size:clamp(22px,1.9vw,28px);font-weight:500;letter-spacing:-.035em;line-height:1.05}
.aw3-card figcaption p{font-size:15.5px;line-height:1.5;color:var(--fg2);margin-top:6px;max-width:26em}
@media (max-width:900px){
  .aw3{grid-template-columns:1fr 1fr;gap:26px 14px}
  .aw3-big{grid-column:1/-1}
  .aw3-ph{aspect-ratio:3/4}
  .aw3-card figcaption{flex-direction:column;gap:8px}
  .aw3-card figcaption p{font-size:14.5px}
}
@media (prefers-reduced-motion:reduce){.aw3-ph{clip-path:none!important;transition:none}.aw3-ph img{transform:none!important;transition:none}.aw3-card figcaption{opacity:1;translate:0 0;transition:none}}

/* ═════════════ NEWS (11-09 redesign) ═════════════
   Lead story with the home page's ring + reading on a photo, the other four as cards,
   then the founding-member block. The progress log is gone. */
.n-hero{padding:clamp(130px,20vh,200px) 0 40px;position:relative}
.n-title{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;flex-wrap:wrap;margin-top:18px}
.n-title h1{font-size:clamp(90px,16vw,230px);font-weight:500;letter-spacing:-.065em;line-height:.8}
.n-title .p-lede{max-width:24em;padding-bottom:10px}
.n-pulse{width:100%;height:120px;margin-top:40px;overflow:visible;display:block}
.n-pulse path{fill:none;stroke:#F5A3BE;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.n-pulse .trail{stroke:rgba(0,0,0,.08)}

.nw{margin-top:clamp(40px,7vh,80px)}
.nw-meta{display:flex;gap:14px;align-items:baseline;flex-wrap:wrap}
.nw-date{font-family:'DM Mono',monospace;font-size:11.5px;font-weight:500;letter-spacing:.16em;color:var(--pink-text)}
.nw-src{font-size:14px;color:var(--fg3)}
.nw-item h3{font-weight:500;letter-spacing:-.035em;line-height:1.06}
.nw-item p{font-size:16px;line-height:1.55;color:var(--fg2);margin-top:12px}
.nw-item .nw-why{font-size:15px;color:var(--fg);display:flex;gap:10px;align-items:baseline}
.nw-why b{flex:none;display:inline-flex;align-items:center;gap:8px;font-family:'DM Mono',monospace;font-size:10.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--pink-text)}
.nw-why b::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--naomi-pink);transform:translateY(-1px)}
.nw-link{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:500;padding:11px 20px;border-radius:99px;border:1px solid #000;white-space:nowrap;
  transition:background .3s var(--ease),color .3s var(--ease)}
.nw-link span{transition:translate .3s var(--ease-out)}
.nw-link:hover{background:#000;color:#F3EFE8;opacity:1}
.nw-link:hover span{translate:2px -2px}

/* lead: photo left (rounded, the ring finds the clasp), story right */
.nw-lead{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(30px,5vw,80px);align-items:center}
.nw-media{position:relative;margin:0;aspect-ratio:4/3.4;border-radius:24px;overflow:hidden;background:#E7E1D7}
.nw-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 50%;display:block}
.nw-media::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(20,16,14,.16),rgba(20,16,14,0) 30%,rgba(20,16,14,0) 70%,rgba(20,16,14,.2))}
.nw-media .ear-ring{z-index:2}
.nw-media .ear-tag{color:#fff}
.ear-ring.tag-left .ear-tag{left:auto;right:calc(100% + 12px);translate:6px -50%}
.ear-ring.tag-left.is-on .ear-tag{translate:0 -50%}
.nw-cap{position:absolute;left:18px;top:16px;z-index:2;display:flex;align-items:center;gap:8px;font-family:'DM Mono',monospace;font-size:10px;letter-spacing:.2em;color:#fff;text-shadow:0 1px 10px rgba(0,0,0,.35)}
.nw-cap::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--naomi-pink)}
.nw-lead h3{font-size:clamp(30px,3.2vw,46px);margin-top:16px}
.nw-lead p{max-width:34em}
.nw-lead .nw-link{margin-top:26px}

/* the other four: cards in two columns */
.nw-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2vw,24px);margin-top:clamp(60px,10vh,110px)}
.nw-card{display:flex;flex-direction:column;padding:clamp(26px,2.6vw,38px);border-radius:24px;background:var(--card);border:1px solid var(--line2);
  transition:translate .5s var(--ease-out),box-shadow .5s var(--ease-out),opacity .9s var(--ease),transform 1s var(--ease-out)}
.nw-card:hover{translate:0 -4px;box-shadow:0 18px 40px -24px rgba(40,20,30,.28)}
.nw-top{display:flex;justify-content:space-between;align-items:flex-start;gap:20px}
.nw-num{font-family:'DM Mono',monospace;font-size:12px;letter-spacing:.14em;color:var(--fg3);padding:5px 10px;border:1px solid var(--line2);border-radius:99px}
.nw-card .nw-meta{flex-direction:column;align-items:flex-end;gap:4px;text-align:right}
.nw-card h3{font-size:clamp(24px,2.1vw,30px);margin-top:clamp(28px,4vh,44px)}
.nw-card .nw-link{margin-top:auto;align-self:flex-start}
.nw-card .nw-why{margin:16px 0 28px}

/* founding members (kept): open, no card, soft heart-pink glow */
.n-join{position:relative;margin-top:clamp(90px,14vh,160px);padding:clamp(40px,8vh,90px) 0 clamp(20px,4vh,40px)}
.n-join-glow{position:absolute;left:-8%;top:50%;transform:translateY(-50%);width:min(620px,80vw);aspect-ratio:1;border-radius:50%;pointer-events:none;z-index:0;
  background:radial-gradient(circle at 45% 45%,#F48FAE,#F06A93 40%,rgba(245,163,190,0) 70%);filter:blur(70px);opacity:.38}
.n-join>:not(.n-join-glow){position:relative;z-index:1}
.n-join h2{font-size:clamp(52px,8vw,120px);font-weight:500;letter-spacing:-.055em;line-height:.92;margin-top:18px}
.n-join-row{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap;margin-top:clamp(24px,4vh,40px)}
.n-join-row p{font-size:clamp(17px,1.4vw,20px);line-height:1.55;color:var(--fg2);max-width:30em}
.n-join-cta{display:flex;gap:12px;flex-wrap:wrap}

@media (max-width:900px){
  .nw-lead{grid-template-columns:1fr;gap:26px}
  .nw-media{aspect-ratio:4/3}
  .nw-grid{grid-template-columns:1fr}
  .nw-card .nw-meta{align-items:flex-end}
  .nw-item .nw-why{flex-direction:column;gap:6px}
  .nw-media .ear-ring.tag-left .ear-tag{right:auto;left:50%;top:calc(100% + 12px);translate:-50% 6px}
  .nw-media .ear-ring.tag-left.is-on .ear-tag{translate:-50% 0}
}

@media (prefers-reduced-motion:reduce){.n-live i{animation:none}.ph img{transform:none}}