/* Ahdis Jones — CAMPAIGN WALL, light edition (her pick: B + light).
   One lavender field, one commanding portrait, oversized condensed
   lettering set straight on the field, disciplined green, cream for the
   book, near-black for beauty. Grit is photographic: hard crops, frame
   numbers, a faint print grain on the hero field only.
   Type: Big Shoulders Display 900 (self-hosted, OFL) for the name and
   section titles; Figtree for reading; DM Mono for numbers and captions.
   Standalone build for review; the switch to Ahdis Beruk comes with the merger. */
@font-face{font-family:"Big Shoulders Display";font-weight:900;font-style:normal;font-display:swap;src:url("fonts/big-shoulders-900.woff2") format("woff2")}
@font-face{font-family:"Figtree";font-weight:400;font-style:normal;font-display:swap;src:url("fonts/figtree-400.woff2") format("woff2")}
@font-face{font-family:"Figtree";font-weight:600;font-style:normal;font-display:swap;src:url("fonts/figtree-600.woff2") format("woff2")}
@font-face{font-family:"DM Mono";font-weight:400;font-style:normal;font-display:swap;src:url("fonts/dm-mono-400.woff2") format("woff2")}

:root{
  --lav:#C9B8F2; --lav-deep:#3F2E86; --green:#7EE8AE; --green-ink:#145A3C;
  --cream:#F7F3EC; --ink:#17141F; --ink-2:#2A2535; --muted:#5B5569; --muted-inv:rgba(247,243,236,.72); --rule:rgba(23,20,31,.16); --rule-inv:rgba(247,243,236,.18);
  --disp:"Big Shoulders Display","Arial Narrow","Impact",sans-serif; --sans:"Figtree","Helvetica Neue",Arial,sans-serif; --mono:"DM Mono","SFMono-Regular",Consolas,monospace;
  --gut:clamp(1rem,4vw,2.75rem); --maxw:1320px; --head-h:60px;
  color-scheme:only light;
}
*{box-sizing:border-box} html{scroll-behavior:smooth} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--sans);font-size:1.0625rem;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:clip}
img{max-width:100%;height:auto;display:block}
h1,h2,h3,p,ul,figure{margin:0} ul{padding:0;list-style:none}
a{color:inherit}
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:var(--green);padding:.6rem 1rem;z-index:99}.skip:focus{left:1rem;top:1rem}
:focus-visible{outline:3px solid var(--green-ink);outline-offset:3px}
.no{font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.ph{font-family:var(--mono);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);border:1px dashed var(--rule);padding:.15rem .4rem;background:rgba(247,243,236,.85)}
.sec-t{font-family:var(--disp);font-weight:900;text-transform:uppercase;line-height:.9;letter-spacing:.005em;font-size:clamp(2.6rem,6vw,5rem)}
.btn-g{display:inline-flex;align-items:center;gap:.5rem;background:var(--green);color:var(--ink);font-family:var(--sans);font-weight:600;font-size:.95rem;letter-spacing:.02em;padding:.95rem 1.35rem;text-decoration:none;min-height:48px;border:0;cursor:pointer}
.btn-g:hover{background:var(--ink);color:var(--green)}
.ic{width:.9em;height:.9em;flex:none}
.lnk{display:inline-flex;align-items:center;min-height:44px;font-weight:600;font-size:.95rem;text-decoration:none;border-bottom:2px solid currentColor;padding-bottom:.1rem}
.lnk:hover{color:var(--lav-deep)}

/* ── header ── */
.head{position:sticky;top:0;z-index:50;background:rgba(201,184,242,.92);backdrop-filter:blur(10px);border-bottom:1px solid rgba(23,20,31,.18)}
.head-in{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:var(--head-h)}
.mark{font-family:var(--disp);font-weight:900;text-transform:uppercase;font-size:1.35rem;letter-spacing:.02em;text-decoration:none;white-space:nowrap;line-height:1}
/* wordmark + the Actress / Model switch */
.brand{display:flex;align-items:center;gap:clamp(.6rem,1.5vw,1.1rem);min-width:0}
.xsw{display:inline-flex;align-items:center;font-family:var(--mono);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}
.xsw a{display:inline-flex;align-items:center;min-height:44px;padding:.4rem .5rem;text-decoration:none;color:var(--ink);opacity:.6;border-bottom:1.5px solid transparent}
.xsw a[aria-current]{opacity:1;border-bottom-color:var(--ink)}
.xsw a:hover{opacity:1}
.xsw a+a{margin-left:.15rem}
.xsw a+a::before{content:"";display:inline-block;width:1px;height:.95em;background:var(--ink);opacity:.4;margin-right:.65rem}
@media (max-width:480px){.xsw{font-size:.56rem;letter-spacing:.08em}.xsw a{padding:.4rem .3rem}.xsw a+a::before{margin-right:.4rem}}
.nav{display:flex;gap:1.3rem;font-size:.8rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.nav a{text-decoration:none;padding-block:.4rem;border-bottom:2px solid transparent}.nav a:hover{border-color:currentColor}
@media (max-width:900px){.nav{display:none}}
.menu-btn{display:none;font:inherit;font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;border:1.5px solid var(--ink);background:transparent;color:var(--ink);padding:0 .9rem;min-height:40px;cursor:pointer;align-items:center;gap:.5rem}
.menu-btn:hover{background:var(--ink);color:var(--green)}
@media (max-width:900px){.menu-btn{display:inline-flex}}
@media (max-width:480px){.mark{font-size:1.15rem}}

/* ── 1 · campaign hero ── */
.hero{position:relative;background:var(--lav);color:var(--ink);min-height:min(84svh,820px);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:1fr auto;overflow:hidden;isolation:isolate}
/* print grain on the field only; images and type sit above it */
.hero::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.14;mix-blend-mode:multiply;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
.hero-img{grid-column:7/13;grid-row:1/3;position:relative;z-index:1;min-height:0;align-self:stretch}
/* absolute so the photo never sets the hero height; the field and the type do */
.hero-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 12%}
.hero-img .ph{position:absolute;right:.75rem;top:.75rem}
.hero-type{grid-column:1/10;grid-row:2;position:relative;z-index:2;padding:0 var(--gut) clamp(1.5rem,3.5vw,2.75rem);display:grid;gap:clamp(.6rem,1.5vw,1.1rem);align-self:end;min-width:0}
.meta{display:flex;flex-wrap:wrap;gap:.3rem 1.5rem;font-family:var(--mono);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
.name{font-family:var(--disp);font-weight:900;text-transform:uppercase;line-height:.78;letter-spacing:.005em;font-size:clamp(5.2rem,14vw,15rem);display:grid;color:var(--ink);margin-left:-.03em}
.name span{display:block;position:relative;white-space:nowrap}
.name .ln{overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}
.name .ln::before{content:none}
/* one hairline of misregistration, green, decorative only */
.name span::before{content:attr(data-t);position:absolute;left:2px;top:2px;z-index:-1;color:var(--green);opacity:.9}
.name .ln:nth-child(2){margin-left:.55em}
.hero-act{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.75rem}
.hero-no{position:absolute;left:var(--gut);top:clamp(1rem,3vw,2rem);z-index:2;font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}
@media (max-width:1100px){.name{font-size:clamp(5rem,16vw,15rem)}}
@media (max-width:900px){
  .hero{min-height:0;grid-template-columns:1fr;grid-template-rows:auto auto}
  .hero-img{grid-column:1;grid-row:1;height:min(52svh,460px)}
  .hero-img img{object-position:50% 10%}
  /* phones: the name kisses the photo edge; the descriptor sits under it on the field, never on the photo */
  .hero-type{grid-column:1;grid-row:2;margin-top:0;padding-top:0;padding-bottom:1.25rem}
  .name{order:1;margin-top:-1.3rem}
  .meta{order:2;margin-top:.2rem}
  .hero-act{order:3}
  .name{font-size:clamp(4.6rem,24vw,8rem);line-height:.8}
  .name .ln:nth-child(2){margin-left:.45em}
  .hero-no{display:none}
  .meta{gap:.2rem .9rem;font-size:.66rem}
}
@media (max-width:480px){.name{font-size:clamp(4.2rem,25vw,6.4rem);margin-top:-1.1rem}}

/* ── 2 · the book ── */
.book{background:var(--cream);padding-block:clamp(2.5rem,6vw,4.5rem) clamp(2.5rem,6vw,4rem)}
.book-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1rem 2rem;margin-bottom:1.25rem}
.book-head .sec-t{font-size:clamp(2.2rem,4.5vw,3.6rem)}
.filters{display:flex;flex-wrap:wrap;gap:.2rem 1.1rem}
.flt{font-family:var(--sans);font-size:.78rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:.5rem 0;border:0;border-bottom:2px solid transparent;background:transparent;color:var(--muted);cursor:pointer;min-height:40px}
.flt:hover{color:var(--ink)}
.flt[aria-pressed="true"]{color:var(--ink);border-bottom-color:var(--ink)}
.book-wrap{position:relative}
.rail{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gut);padding-inline:var(--gut);padding-bottom:.5rem;overscroll-behavior-inline:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.rail::-webkit-scrollbar{display:none}
.rail:focus-visible{outline:3px solid var(--green-ink);outline-offset:-3px}
.frame{position:relative;flex:0 0 auto;width:min(38vw,420px);scroll-snap-align:start;margin:0;min-width:0}
.frame img{width:100%;aspect-ratio:3/4;object-fit:cover;background:#E7E0F5}
.frame figcaption{display:flex;align-items:center;gap:.8rem;padding-top:.55rem}
.frame .cap{font-size:.8rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.frame figcaption .ph{margin-left:auto}
.frame.hid{display:none}
.frame.reel img{filter:saturate(.6) brightness(.7)}
.frame a{display:block;position:relative;color:inherit;overflow:hidden}
.play{position:absolute;left:50%;top:38%;transform:translate(-50%,-50%);width:64px;height:64px;border:0;border-radius:50%;background:var(--green);cursor:pointer;display:grid;place-items:center}
.play span{border-left:18px solid var(--ink);border-top:11px solid transparent;border-bottom:11px solid transparent;margin-left:5px}
.play.na{background:var(--cream)}
.arrow{position:absolute;top:34%;z-index:3;width:46px;height:46px;border:1.5px solid var(--ink);background:var(--cream);color:var(--ink);font-size:1.1rem;cursor:pointer;display:grid;place-items:center}
.arrow:hover{background:var(--ink);color:var(--green)}
.arrow.prev{left:calc(var(--gut) - 10px)} .arrow.next{right:calc(var(--gut) - 10px)}
@media (max-width:900px){.frame{width:72vw;scroll-snap-stop:always}.arrow{width:42px;height:42px;top:30%}}

/* ── 3 · beauty ── */
.beauty{background:var(--ink);color:var(--cream);padding-block:clamp(3rem,7vw,6rem)}
.beauty-in{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(1rem,2.5vw,2rem);align-items:end}
.b-main{grid-column:1/8;position:relative;min-width:0}
.b-main img{width:100%;aspect-ratio:4/5;object-fit:cover}
.b-type{grid-column:8/13;min-width:0;display:grid;gap:.8rem;padding-bottom:clamp(1rem,4vw,3rem)}
.b-type .sec-t{color:var(--lav)}
.b-type p{color:var(--muted-inv);max-width:34ch}
.no.g{color:var(--green)}
.b-sub{grid-column:9/13;position:relative;min-width:0;margin-top:clamp(-4rem,-6vw,-2rem)}
.b-sub img{width:100%;aspect-ratio:4/5;object-fit:cover;border-top:3px solid var(--green)}
.beauty .ph{position:absolute;right:.6rem;top:.6rem;background:rgba(23,20,31,.8);color:var(--muted-inv);border-color:var(--rule-inv)}
@media (max-width:900px){.beauty-in{grid-template-columns:1fr 1fr}.b-main{grid-column:1/3}.b-type{grid-column:1/3;padding-bottom:0}.b-sub{grid-column:2/3;margin-top:0}}

/* ── 4 · lifestyle ── */
.life{background:var(--cream);padding-block:clamp(3rem,7vw,6rem);border-top:1px solid var(--rule)}
.life-in{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(1rem,2.5vw,2rem);align-items:center}
.l-img{grid-column:2/6;position:relative;min-width:0}
.l-img img{width:100%;aspect-ratio:3/4;object-fit:cover}
.l-type{grid-column:7/12;display:grid;gap:.8rem;min-width:0}
.l-type .sec-t{font-size:clamp(2.2rem,4.5vw,3.6rem)}
.l-type p{color:var(--muted);max-width:36ch}
.life .ph{position:absolute;right:.6rem;top:.6rem}
@media (max-width:900px){.l-img{grid-column:1/7}.l-type{grid-column:7/13}}
@media (max-width:640px){.l-img{grid-column:1/9}.l-type{grid-column:1/13}}

/* ── 5 · the latest ── */
.latest{background:var(--cream);padding-block:clamp(3rem,7vw,5.5rem);border-top:1px solid var(--rule)}
.row-h{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:.5rem 2rem;margin-bottom:1.5rem}
.row-h .sec-t{font-size:clamp(2.2rem,4.5vw,3.6rem)}
.row-h p{color:var(--muted);max-width:44ch}
.row-h p a{color:var(--ink);font-weight:600}
.posts{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(.6rem,1.5vw,1rem)}
.post{display:block;text-decoration:none;color:var(--ink);min-width:0}
.post img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;background:#E7E0F5}
.post .cap{display:grid;gap:.15rem;padding-top:.45rem;font-size:.8rem;font-weight:600;line-height:1.3}
.post:hover img{filter:contrast(1.05)}
@media (max-width:900px){.posts{grid-template-columns:repeat(3,minmax(0,1fr))}.post:nth-child(n+4){display:none}}
@media (max-width:640px){.posts{grid-template-columns:1fr 1fr;gap:.6rem}.post:nth-child(n+4){display:block}.post:nth-child(n+5){display:none}}
.stills{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(.8rem,2vw,1.5rem)}
.still{display:block;text-decoration:none;color:var(--ink);min-width:0}
.still img{width:100%;aspect-ratio:4/5;object-fit:cover}
.still .cap{display:flex;align-items:center;gap:.6rem;padding-top:.5rem;font-size:.82rem;font-weight:600}
.still .cap .ph{margin-left:auto}
.still:hover img{filter:contrast(1.05)}
.row-f{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;margin-top:1.25rem}
.row-f a{font-weight:600;font-size:.9rem;text-decoration:none;border-bottom:2px solid currentColor}
@media (max-width:640px){.stills{grid-template-columns:1fr 1fr}.still:nth-child(3){display:none}}

/* ── 6 · about ── */
.about{background:var(--lav);padding-block:clamp(3rem,7vw,6rem)}
.about .no{color:var(--ink)}
.about-in{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(1rem,2.5vw,2rem);align-items:center}
.a-img{grid-column:1/6;min-width:0}
.a-img img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 20%}
.a-type{grid-column:7/13;display:grid;gap:.9rem;min-width:0}
.a-type .lede{max-width:46ch}
.marks{display:grid;gap:.45rem;padding-block:.4rem}
.marks li{font-family:var(--disp);font-weight:900;text-transform:uppercase;font-size:1.35rem;line-height:1.1;letter-spacing:.01em;border-left:3px solid var(--ink);padding-left:.8rem}
@media (max-width:760px){.a-img{grid-column:1/9}.a-type{grid-column:1/13}}

/* ── 7 · work ── */
.work{background:var(--cream);padding-block:clamp(3rem,7vw,6rem)}
.routes{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(2rem,5vw,4rem)}
.route{min-width:0;padding-top:1.25rem;border-top:2px solid var(--ink);display:grid;gap:.7rem;align-content:start}
.route h3{font-family:var(--disp);font-weight:900;text-transform:uppercase;font-size:clamp(1.8rem,3.5vw,2.6rem);line-height:.95}
.route p{color:var(--muted);max-width:40ch}
.mail{font-family:var(--mono);font-size:1rem;word-break:break-all;user-select:all;display:inline-block;padding:.55rem .7rem;border:1.5px solid var(--ink);justify-self:start}
.form{display:grid;gap:.7rem}
.form label{font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;display:grid;gap:.3rem;color:var(--muted)}
.form input,.form select,.form textarea{font:inherit;font-family:var(--sans);font-size:1rem;color:var(--ink);padding:.7rem .85rem;border:1.5px solid var(--ink);background:#fff;width:100%;min-height:44px}
.form textarea{min-height:110px;resize:vertical}
.form .btn-g{justify-self:start}
.form .note{font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
@media (max-width:760px){.routes{grid-template-columns:1fr;gap:2.5rem}}

/* ── footer ── */
.foot{background:var(--ink);color:var(--cream);padding-block:1.6rem}
.foot-in{display:flex;flex-wrap:wrap;gap:.8rem 2rem;align-items:center;justify-content:space-between}
.foot-name{font-family:var(--disp);font-weight:900;text-transform:uppercase;font-size:1.3rem;letter-spacing:.02em}
.foot-links{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem}
.foot a{color:var(--cream);text-decoration:none;font-size:.86rem;font-weight:600}
.foot a:hover{color:var(--green)}

/* ── menu (full-screen index, light) ── */
.menu{position:fixed;inset:0;z-index:70;background:var(--cream);color:var(--ink);overflow:auto}
.menu[hidden]{display:none}
.menu-in{min-height:100%;display:grid;align-content:center;gap:2rem;padding:clamp(2rem,6vw,4rem) var(--gut)}
.menu-close{position:fixed;top:.6rem;right:var(--gut);width:48px;height:48px;border:1.5px solid var(--ink);background:var(--cream);color:var(--ink);font-size:1.6rem;cursor:pointer;line-height:1}
.menu nav{display:grid;gap:.3rem}
.menu nav a{display:flex;align-items:baseline;gap:1rem;font-family:var(--disp);font-weight:900;text-transform:uppercase;font-size:clamp(2.4rem,9vw,4.5rem);line-height:.95;text-decoration:none;color:var(--ink);min-height:44px}
.menu nav a:hover{color:var(--lav-deep)} .menu nav a .no{color:var(--green-ink);font-size:.78rem}
.menu-foot{display:flex;flex-wrap:wrap;gap:.8rem 2rem;font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase}
.menu-foot a{color:var(--muted);text-decoration:none;min-height:44px;display:inline-flex;align-items:center} .menu-foot a:hover{color:var(--ink)}
html.menu-lock{overflow:hidden}

/* ── form states ── */
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.form .inv{border-color:#B3261E;box-shadow:inset 0 0 0 1px #B3261E}
.form button[disabled]{opacity:.6;cursor:wait}
.mail{text-decoration:none;color:var(--ink)} .mail:hover{background:var(--ink);color:var(--green)}
.foot-rev{flex-basis:100%;font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-inv)}

/* ── ABOUT PAGE. A quote as the cover, then eight numbered chapters in
   two columns (story + a mono fact rail), alternating cream / lavender,
   two of them carrying an image. ── */
.ab-hero{background:var(--lav);padding-block:clamp(2.5rem,6vw,5rem) 0;overflow:hidden}
.ab-hero-in{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(1rem,2.5vw,2rem);align-items:end}
.ab-type{grid-column:1/8;display:grid;gap:1.1rem;padding-bottom:clamp(2rem,5vw,4rem);min-width:0}
.ab-type .no{color:var(--ink)}
.ab-quote{font-family:var(--disp);font-weight:900;text-transform:uppercase;line-height:.86;letter-spacing:.005em;font-size:clamp(3.2rem,8.5vw,8.5rem);color:var(--ink)}
.ab-lede{max-width:48ch;font-size:1.1rem}
.ab-jump{display:flex;flex-wrap:wrap;gap:.5rem 1.75rem}
.ab-jump a{font-weight:600;font-size:.95rem;text-decoration:none;border-bottom:2px solid currentColor;min-height:44px;display:inline-flex;align-items:center}
.ab-jump a:hover{color:var(--lav-deep)}
.ab-img{grid-column:8/13;position:relative;min-width:0;align-self:end}
.ab-img img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:50% 20%}
.ab-img .ph{position:absolute;right:.6rem;top:.6rem}
@media (max-width:900px){.ab-type{grid-column:1/13;padding-bottom:1.5rem}.ab-img{grid-column:3/13}.ab-quote{font-size:clamp(3rem,13vw,6rem)}}
.ch{padding-block:clamp(2.5rem,6vw,4.5rem);background:var(--cream);scroll-margin-top:calc(var(--head-h) + .5rem)}
.ch.alt{background:var(--lav)}
.ch+.ch:not(.alt){border-top:1px solid var(--rule)}
.ch-in{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:1.25rem clamp(1rem,2.5vw,2rem)}
.ch-h{grid-column:1/13;display:flex;align-items:baseline;gap:1rem;flex-wrap:wrap}
.ch-h h2{font-family:var(--disp);font-weight:900;text-transform:uppercase;line-height:.9;font-size:clamp(2.2rem,5vw,4rem)}
.ch.alt .no{color:var(--ink)}
.ch-body{grid-column:1/8;display:grid;gap:1rem;min-width:0}
.ch-body p{max-width:60ch;font-size:1.05rem;line-height:1.6}
.ch-side{grid-column:9/13;min-width:0;display:grid;gap:.6rem;align-content:start;border-top:2px solid var(--ink);padding-top:.9rem}
.ch-side h3{font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:400}
.ch.alt .ch-side h3{color:var(--ink)}
.ch-side h3+ul{margin-bottom:.4rem}
.ch-side li{font-size:.92rem;font-weight:600;line-height:1.35;padding-block:.25rem;border-bottom:1px solid var(--rule)}
.ch-side li:last-child{border-bottom:0}
.ch-note{font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.ch.alt .ch-note{color:var(--ink)}
.ch-img{position:relative;min-width:0}
.ch-img img{width:100%;aspect-ratio:3/4;object-fit:cover}
.ch-img .ph{position:absolute;right:.6rem;top:.6rem}
.img-l .ch-img{grid-column:1/5;grid-row:2/4}
.img-l .ch-body{grid-column:5/10}
.img-l .ch-side{grid-column:10/13}
.img-r .ch-img{grid-column:9/13;grid-row:2/4;align-self:start}
.img-r .ch-body{grid-column:1/6}
.img-r .ch-side{grid-column:6/9}
.ch.now .marks{padding-block:0}
.ch.now .ch-side{border-top:0;padding-top:0}
@media (max-width:900px){
  .ch-body,.ch-side,.img-l .ch-body,.img-l .ch-side,.img-r .ch-body,.img-r .ch-side{grid-column:1/13}
  .img-l .ch-img,.img-r .ch-img{grid-column:1/9;grid-row:auto}
  .ch-side{border-top-width:1px}
}
.ab-close{background:var(--ink);color:var(--cream);padding-block:clamp(3rem,7vw,6rem)}
.ab-close-in{display:grid;gap:2rem;max-width:62ch}
.ab-tw p{font-family:var(--disp);font-weight:900;text-transform:uppercase;line-height:.9;font-size:clamp(2.2rem,6vw,4.6rem);color:var(--lav)}
.ab-tw footer{margin-top:1rem;color:var(--muted-inv);font-size:.95rem}
.ab-mantra{display:grid;gap:.4rem;font-size:1.3rem;font-weight:600}
.ab-mantra .no{color:var(--green)}
.ab-close .lnk{color:var(--cream)} .ab-close .lnk:hover{color:var(--green)}


/* ── PORTFOLIO PAGE. A short cream head, the reel on near-black, then the
   whole book as a straight grid: 3 up (4 up wide, 2 up on phones), numbered,
   filters as text tabs, a lightbox for one frame at a time. ── */
.pf-head{background:var(--cream);padding-block:clamp(2rem,5vw,3.5rem) clamp(1.25rem,3vw,2rem)}
.pf-head-in{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:1rem clamp(1rem,2.5vw,2rem);align-items:end}
.pf-head-in>div{grid-column:1/7}
.pf-lede{grid-column:7/13;max-width:44ch;color:var(--muted)}
.pf-lede a{color:var(--ink);font-weight:600}
@media (max-width:760px){.pf-head-in>div,.pf-lede{grid-column:1/13}}
.pf-reel{background:var(--ink);color:var(--cream);padding-block:clamp(1.5rem,4vw,2.5rem)}
.reel-wrap{display:grid;gap:.6rem;max-width:1100px}
.reel-fac{position:relative;display:block;width:100%;aspect-ratio:16/9;border:0;padding:0;background:#000;cursor:pointer;overflow:hidden}
.reel-fac img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.85}
.reel-fac .play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:72px;height:72px;border-radius:50%;background:var(--green);display:grid;place-items:center}
.reel-fac .play span{border-left:20px solid var(--ink);border-top:12px solid transparent;border-bottom:12px solid transparent;margin-left:6px}
.reel-fac:hover .play{background:var(--lav)}
.reel-wrap.na .reel-fac{cursor:default}
.reel-wrap.na .reel-fac img{opacity:.45;filter:saturate(.5)}
.reel-wrap.na .play.dim{background:rgba(247,243,236,.35)} .reel-wrap.na .play.dim span{border-left-color:var(--cream)}
.reel-wrap video{width:100%;aspect-ratio:16/9;background:#000;display:block}
.reel-cap{display:flex;align-items:center;gap:.8rem}
.reel-cap .no{color:var(--muted-inv)} .reel-cap .cap{font-size:.8rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.pf-reel .ph{color:var(--muted-inv);border-color:var(--rule-inv);background:rgba(23,20,31,.8);margin-left:auto}
.pf-book{background:var(--cream);padding-block:clamp(1.5rem,4vw,2.5rem) clamp(3rem,6vw,4.5rem)}
.pf-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem 2rem;margin-bottom:1rem;border-bottom:1px solid var(--rule);padding-bottom:.4rem}
.pf-count{white-space:nowrap}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(.8rem,2vw,1.5rem) clamp(.8rem,1.6vw,1.2rem)}
@media (min-width:1280px){.grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:640px){.grid{grid-template-columns:1fr 1fr;gap:1rem .6rem}}
.gf{min-width:0;margin:0}
.gf.hid{display:none}
.gf-btn{display:block;width:100%;border:0;padding:0;background:#E7E0F5;cursor:zoom-in}
.gf-btn img{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;display:block}
.gf-btn:hover img{filter:contrast(1.05)}
.gf figcaption{display:flex;align-items:center;gap:.6rem;padding-top:.45rem;min-width:0}
.gf .cap{font-size:.76rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gf figcaption .ph{margin-left:auto}
@media (max-width:640px){.gf figcaption .ph{display:none}}
.pf-foot{background:var(--lav);padding-block:clamp(2rem,5vw,3rem)}
/* lightbox */
.lb{border:0;padding:0;background:transparent;max-width:100vw;max-height:100vh;width:100%;height:100%;color:var(--cream)}
.lb::backdrop{background:rgba(14,12,18,.94)}
.lb-fig{position:absolute;inset:0;display:grid;grid-template-rows:1fr auto;justify-items:center;align-items:center;padding:3.5rem var(--gut) 1.25rem;gap:.6rem;margin:0}
.lb-fig img{max-width:100%;max-height:calc(100vh - 7rem);width:auto;height:auto;object-fit:contain}
.lb-fig figcaption{display:flex;gap:1rem;align-items:center}
.lb-fig .no{color:var(--green)} .lb-fig .cap{font-size:.8rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.lb-x{position:fixed;top:.8rem;right:var(--gut);width:48px;height:48px;border:1.5px solid var(--cream);background:transparent;color:var(--cream);font-size:1.6rem;line-height:1;cursor:pointer;z-index:2}
.lb-nav{position:fixed;top:50%;transform:translateY(-50%);width:48px;height:48px;border:1.5px solid var(--cream);background:rgba(14,12,18,.6);color:var(--cream);font-size:1.2rem;cursor:pointer;z-index:2}
.lb-nav.prev{left:var(--gut)} .lb-nav.next{right:var(--gut)}
.lb-nav:hover,.lb-x:hover{background:var(--green);color:var(--ink);border-color:var(--green)}
@media (max-width:640px){.lb-nav{top:auto;bottom:1rem;transform:none}.lb-fig{padding-bottom:4.5rem}.lb-fig img{max-height:calc(100vh - 9rem)}}


/* ── MOTION LAYER. One easing, small offsets, nothing bounces. Everything
   here is transform/opacity/clip only, so the layout never shifts. ── */
:root{--ease:cubic-bezier(.2,.7,.2,1)}
/* 1 · campaign hero entrance (class .enter is added by the script on load) */
.hero-img img{transform-origin:50% 40%}
.hero.enter .hero-img img{animation:hero-img .9s var(--ease) both}
.hero.enter .name .l1,.hero.enter .name .l2{animation:hero-line .7s var(--ease) both}
.hero.enter .name .ln:nth-child(1) span{animation-delay:.14s}
.hero.enter .name .ln:nth-child(2) span{animation-delay:.24s}
.hero.enter .meta{animation:hero-fade .5s var(--ease) both .4s}
.hero.enter .hero-act{animation:hero-fade .5s var(--ease) both .5s}
.hero.enter .hero-no{animation:hero-fade .5s var(--ease) both .55s}
.hero.enter.instant *{animation:none!important}
@keyframes hero-img{from{clip-path:inset(14% 10% 12% 10%);transform:scale(1.04)}to{clip-path:inset(0 0 0 0);transform:scale(1)}}
@keyframes hero-line{from{transform:translateY(108%)}to{transform:none}}
@keyframes hero-fade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
/* 2 · the book rail */
.rail{cursor:grab;scroll-snap-stop:normal}
.rail.drag{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto;user-select:none}
.frame img{user-select:none;-webkit-user-drag:none;transition:transform .7s var(--ease),filter .4s ease}
.frame figcaption .no,.frame .cap{transition:color .3s ease}
@media (hover:hover){
  .frame:hover img{transform:scale(1.04)}
  .frame.reel:hover img{filter:saturate(.8) brightness(.85)}
  .frame:hover figcaption .no{color:var(--green-ink)}
  .frame:hover .play{background:var(--lav)}
}
.play{transition:background .3s ease}
.arrow{transition:background .25s ease,color .25s ease}
/* 3 · scroll reveals */
.rv{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .8s var(--ease)}
.rv.in{opacity:1;transform:none}
/* actions */
.btn-g{transition:background .3s ease,color .3s ease,transform .3s var(--ease)}
.btn-g:hover{transform:translateY(-1px)}
.btn-g .ic{transition:transform .3s var(--ease)} .btn-g:hover .ic{transform:translate(2px,-2px)}
.lnk{transition:color .3s ease}
.gf-btn img{transition:transform .7s var(--ease)} @media (hover:hover){.gf-btn:hover img{transform:scale(1.03)}} .gf-btn{overflow:hidden}
.post img,.still img{transition:transform .7s var(--ease)} @media (hover:hover){.post:hover img,.still:hover img{transform:scale(1.03)}} .post,.still{overflow:hidden}
@media (prefers-reduced-motion:reduce){
  .hero.enter .hero-img img,.hero.enter .name .l1,.hero.enter .name .l2,.hero.enter .meta,.hero.enter .hero-act,.hero.enter .hero-no{animation:none}
  .rv{opacity:1;transform:none;transition:none}
  .frame img,.gf-btn img,.post img,.still img,.btn-g,.btn-g .ic{transition:none}
  .frame:hover img,.gf-btn:hover img,.post:hover img,.still:hover img,.btn-g:hover{transform:none}
}


/* 3 · signature Beauty moment: the featured image opens from an inset crop to
   its full box as the section enters. Scroll-linked where the browser has
   view() timelines; a one-shot transition elsewhere. The box itself never
   changes size, so nothing below it moves. */
.b-main{overflow:clip}
.b-main img{transform-origin:45% 30%;will-change:transform}
@keyframes beauty-in{from{clip-path:inset(12% 16% 8% 0);transform:scale(1.08)}to{clip-path:inset(0 0 0 0);transform:scale(1)}}
@keyframes beauty-in-m{from{opacity:.35;transform:scale(1.04)}to{opacity:1;transform:scale(1)}}
@supports (animation-timeline: view()){
  .js .b-main img{animation:beauty-in linear both;animation-timeline:view();animation-range:entry 10% cover 38%}
  @media (max-width:900px){.js .b-main img{animation-name:beauty-in-m;animation-range:entry 10% cover 30%}}
}
@supports not (animation-timeline: view()){
  .js .b-main img{clip-path:inset(12% 16% 8% 0);transform:scale(1.08);transition:clip-path 1s var(--ease),transform 1.1s var(--ease)}
  .js .b-main.in img{clip-path:inset(0 0 0 0);transform:none}
  @media (max-width:900px){.js .b-main img{clip-path:none;opacity:.35;transform:scale(1.04);transition:opacity .7s ease,transform .9s var(--ease)}.js .b-main.in img{opacity:1;transform:none}}
}
/* headings rise from behind their own box; the mono label leads by a beat */
.rv-h{overflow:hidden;padding-bottom:.12em;margin-bottom:-.12em}
.rv-h .hl{display:block;transform:translateY(106%);transition:transform .7s var(--ease) .08s}
.rv-h.in .hl{transform:none}
.rv-l{opacity:0;transform:translateY(6px);transition:opacity .4s ease,transform .5s var(--ease)}
.rv-l.in{opacity:1;transform:none}
/* links: underline draws in; focus stays the ring we already have */
.nav a{background:linear-gradient(currentColor,currentColor) no-repeat 0 100%/0 2px;border-bottom:0;padding-bottom:.4rem;transition:background-size .3s var(--ease)}
.nav a:hover,.nav a:focus-visible{background-size:100% 2px}
.lnk{border-bottom:0;background:linear-gradient(currentColor,currentColor) no-repeat 0 100%/100% 2px;padding-bottom:.15rem;transition:color .3s ease,background-size .3s var(--ease),background-position .3s var(--ease)}
.lnk:hover,.lnk:focus-visible{background-size:100% 3px}
.row-f a,.foot a,.pf-lede a,.row-h p a{transition:color .25s ease}
/* portfolio: filter changes fade and re-settle; the lightbox image pops in */
.grid .gf{transition:opacity .22s ease,transform .3s var(--ease)}
.grid.swap .gf{opacity:0;transform:translateY(6px);transition-delay:0ms!important}
@keyframes lb-in{from{opacity:0;transform:scale(.965)}to{opacity:1;transform:none}}
.lb-fig img.pop{animation:lb-in .28s var(--ease)}
.lb-nav,.lb-x{transition:background .25s ease,color .25s ease}
@media (prefers-reduced-motion:reduce){
  .js .b-main img{animation:none;clip-path:none;transform:none;opacity:1;transition:none}
  .rv-h .hl,.rv-l{transform:none;opacity:1;transition:none}
  .grid .gf,.grid.swap .gf{opacity:1;transform:none;transition:none}
  .lb-fig img.pop{animation:none}
  .nav a,.lnk{transition:none}
}


/* ── real content: landscape frames + the Right now strip ── */
.frame.wide{width:calc(min(38vw,420px)*2 + 14px)}
.frame.wide img{aspect-ratio:auto;height:calc(min(38vw,420px)*4/3)}
@media (max-width:900px){.frame.wide{width:92vw}.frame.wide img{height:calc(72vw*4/3)}}
.gf.wide{grid-column:span 2}
.gf.wide img{aspect-ratio:1.55}
.ch-body a{color:var(--ink);font-weight:600}
.now{background:var(--lav);padding-block:clamp(3rem,7vw,6rem);border-top:1px solid var(--rule)}
.now .row-h p,.now .no{color:var(--ink)}
.now-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1rem,2.5vw,2rem)}
.now-it{display:grid;gap:.75rem;text-decoration:none;color:var(--ink);min-width:0;align-content:start}
.now-it img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;object-position:50% 30%;background:#B9A6E6;transition:filter .3s ease}
.now-it:hover img{filter:contrast(1.06)}
.now-t{display:grid;gap:.3rem}
.now-t b{font-family:var(--disp);font-weight:900;text-transform:uppercase;font-size:clamp(1.4rem,2.2vw,1.8rem);line-height:.95}
.now-t span:last-child{font-size:.92rem;line-height:1.45;max-width:36ch}
.now-it:hover .now-t b{color:var(--lav-deep)}
@media (max-width:760px){.now-grid{grid-template-columns:1fr;gap:1.5rem}.now-it{grid-template-columns:40% 1fr;gap:1rem;align-items:center}}


/* ── JOURNAL. A lavender head, the newest entry large, the rest as a
   straight grid with text filters. Entry pages read like a magazine column:
   cream, one measure, Figtree at reading size, Big Shoulders only for the
   title and a pull quote. ── */
.jn-head{background:var(--lav);padding-block:clamp(2rem,5vw,3.5rem) clamp(1.25rem,3vw,2rem)}
.jn-head-in{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:1rem clamp(1rem,2.5vw,2rem);align-items:end}
.jn-head-in>div{grid-column:1/7} .jn-head .no{color:var(--ink)}
.jn-lede{grid-column:7/13;max-width:44ch;color:var(--ink)}
.jn-lede a{color:var(--ink);font-weight:600}
@media (max-width:760px){.jn-head-in>div,.jn-lede{grid-column:1/13}}
.jn-feat{background:var(--lav);padding-block:0 clamp(2.5rem,6vw,4.5rem)}
.jf{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(1rem,2.5vw,2rem);align-items:center;text-decoration:none;color:var(--ink)}
.jf-img{grid-column:1/7;overflow:hidden;background:#B9A6E6}
.jf-img img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;transition:transform .8s var(--ease)}
@media (hover:hover){.jf:hover .jf-img img{transform:scale(1.03)}}
.jf-t{grid-column:7/13;display:grid;gap:.9rem;align-content:center}
.jf-t .no{color:var(--ink)}
.jf-t h2{font-family:var(--disp);font-weight:900;text-transform:uppercase;line-height:.9;font-size:clamp(2.4rem,5vw,4.6rem)}
.jf-t p{max-width:46ch;font-size:1.05rem}
.jf-t .lnk{justify-self:start}
.jf-t .ph{justify-self:start}
@media (max-width:760px){.jf-img{grid-column:1/13}.jf-t{grid-column:1/13}}
.jn-list{background:var(--cream);padding-block:clamp(2rem,5vw,3rem) clamp(3rem,6vw,4.5rem)}
.jn-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.2rem,2.5vw,2rem) clamp(.8rem,1.6vw,1.2rem)}
@media (max-width:760px){.jn-grid{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.jn-grid{grid-template-columns:1fr}}
.jc{display:grid;gap:.7rem;text-decoration:none;color:var(--ink);min-width:0;align-content:start}
.jc.hid{display:none}
.jc img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;background:#E7E0F5;transition:transform .7s var(--ease)}
.jc>img{display:block}
.jc-t{display:grid;gap:.3rem}
.jc-t b{font-family:var(--disp);font-weight:900;text-transform:uppercase;font-size:clamp(1.3rem,2vw,1.7rem);line-height:.95}
.jc-t span:not(.no):not(.ph){font-size:.92rem;color:var(--muted);line-height:1.45}
.jc-t .ph{justify-self:start}
@media (hover:hover){.jc:hover .jc-t b{color:var(--lav-deep)}}
.jn-empty{color:var(--ink)}
/* entry */
.jp-head{background:var(--lav);padding-block:clamp(2rem,5vw,3.5rem) clamp(1.5rem,4vw,2.5rem)}
.jp-head-in{max-width:62rem;display:grid;gap:1rem}
.jp-meta,.jp-head .no{color:var(--ink)} .jp-meta a{color:var(--ink)}
.jp-head h1{font-family:var(--disp);font-weight:900;text-transform:uppercase;line-height:.88;letter-spacing:.005em;font-size:clamp(2.8rem,7vw,6.5rem)}
.jp-lede{max-width:52ch;font-size:1.15rem;line-height:1.5}
.jp-head .ph{justify-self:start}
.jp-cover{padding-top:clamp(1.25rem,3vw,2rem)}
.jp-cover img{width:100%;max-width:62rem;height:auto;display:block}
.jp-body{max-width:calc(64ch + 2*var(--gut));padding-block:clamp(2rem,4vw,3rem);font-size:1.1rem;line-height:1.65}
.jp-body>*+*{margin-top:1.1em}
.jp-body h2,.jp-body h3,.jp-body h4{font-family:var(--disp);font-weight:900;text-transform:uppercase;line-height:.95;margin-top:1.6em}
.jp-body h2{font-size:clamp(1.8rem,3.5vw,2.6rem)} .jp-body h3{font-size:clamp(1.4rem,2.5vw,1.9rem)} .jp-body h4{font-size:1.2rem}
.jp-body a{color:var(--ink);font-weight:600}
.jp-body blockquote{margin:1.6em 0;padding:.2em 0 .2em 1.2rem;border-left:4px solid var(--green);font-family:var(--disp);font-weight:900;text-transform:uppercase;font-size:clamp(1.5rem,3vw,2.2rem);line-height:1;color:var(--lav-deep)}
.jp-body blockquote p{margin:0}
.jp-body ul,.jp-body ol{padding-left:1.2rem;list-style:disc} .jp-body ol{list-style:decimal}
.jp-body li+li{margin-top:.3em}
.jp-body .jp-fig{margin:1.6em 0} .jp-body .jp-fig img{width:100%;height:auto}
.jp-body hr{border:0;border-top:1px solid var(--rule);margin:2em 0}
.jp-body code{font-family:var(--mono);font-size:.92em}
.jp-foot{max-width:calc(64ch + 2*var(--gut));padding-bottom:clamp(2.5rem,5vw,4rem);display:grid;gap:1.4rem}
.jp-src{color:var(--muted);font-size:.95rem} .jp-src a{color:var(--ink);font-weight:600}
.jp-share{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.75rem}
.jp-nav{display:grid;grid-template-columns:1fr 1fr;gap:1rem;border-top:1px solid var(--rule);padding-top:1.2rem}
.jp-nav a{display:grid;gap:.3rem;text-decoration:none;color:var(--ink);font-family:var(--disp);font-weight:900;text-transform:uppercase;font-size:1.25rem;line-height:1;min-height:44px}
.jp-nav a:hover{color:var(--lav-deep)}
.jp-newer{text-align:right;justify-self:end}
.jn-more{background:var(--cream);border-top:1px solid var(--rule);padding-block:clamp(2.5rem,6vw,4.5rem)}
.jn-more .row-h .lnk{align-self:flex-end}

.jp-cover-link{position:relative;display:block;max-width:62rem;color:inherit}
.jp-cover-link img{transition:filter .3s ease}
.jp-cover-link:hover img{filter:contrast(1.05)}
.jp-watch{position:absolute;left:1rem;bottom:1rem;display:inline-flex;align-items:center;gap:.5rem;background:var(--ink);color:var(--green);font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;padding:.6rem .9rem;min-height:44px}
.jp-cover-link:hover .jp-watch{background:var(--green);color:var(--ink)}

.jt{background:var(--cream);padding-block:clamp(3rem,7vw,5.5rem);border-top:1px solid var(--rule)}
.jt .row-h p a{color:var(--ink);font-weight:600}