*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;background:var(--surface-page);color:var(--text-primary)}
body{font-family:var(--font-text);font-size:var(--fs-text-m);line-height:var(--lh-text);-webkit-font-smoothing:antialiased}
/* Keep sideways overflow trimmed on the content itself, never on body or html: on iPhones that turns the page into an
   inner scroller and tapping the top of the screen stops scrolling back up. clip trims without making a scroller. */
main{overflow-x:clip}
img{display:block;max-width:100%}
a{color:var(--link);text-decoration:none;transition:color var(--dur) var(--ease-out)}
a:hover{color:var(--link-hover)}
::selection{background:var(--bg-accent);color:var(--bg-charcoal)}
:focus-visible{outline:2px solid var(--accent-ink);outline-offset:4px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.ast{color:var(--accent)}

/* Site header: logo left, links right, fixed across the top. It takes the color of the section under it,
   slides away while scrolling down and comes back on any scroll up. On phones the links move into a full-screen menu. */
.site-head{--hb:var(--surface-page);--hf:var(--text-primary);--hh:var(--accent-ink);--logo:var(--accent);
  position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:var(--space-5);
  padding:calc(var(--gutter) * .6) var(--gutter);background:var(--hb);color:var(--hf);
  transition:transform 350ms var(--ease-out),background var(--dur) var(--ease-out),color var(--dur) var(--ease-out)}
.site-head.is-hidden{transform:translateY(-100%)}
.site-head.tone-dark{--hb:var(--surface-dark);--hf:var(--text-on-dark);--hh:var(--accent)}
.site-head.tone-accent{--hb:var(--accent);--hf:var(--bg-charcoal);--hh:var(--bg-paper);--logo:var(--bg-charcoal)}
.head-logo{position:relative;z-index:2;display:block;border-radius:var(--radius-pill)}
.head-logo svg{display:block;width:clamp(40px,3.2vw,52px);height:auto}
.head-logo .logo-bg{fill:var(--logo);transition:fill var(--dur) var(--ease-out)}
.head-logo .logo-fg{fill:var(--bg-paper)}
.head-logo:hover .logo-bg{fill:var(--accent-ink)}
.site-head.tone-accent .head-logo:hover .logo-bg{fill:var(--bg-warm-700)}
.head-nav{display:flex;gap:clamp(24px,3vw,48px)}
.head-nav a{color:var(--hf);font-family:var(--font-display);font-weight:var(--fw-display);font-size:clamp(18px,1.4vw,22px);line-height:1;
  letter-spacing:var(--tracking-display);text-transform:uppercase;transition:color var(--dur) var(--ease-out)}
.head-nav a:hover{color:var(--hh)}
.menu-btn{display:none}
[id]{scroll-margin-top:96px}

/* Shared */
.round-btn{display:inline-flex;align-items:center;justify-content:center;flex:none;width:44px;height:44px;border-radius:var(--radius-pill);
  background:var(--accent);color:var(--bg-paper);transition:background var(--dur) var(--ease-out),transform var(--dur) var(--ease-out)}
.round-btn svg{width:20px;height:20px}
.round-btn.light{background:var(--bg-paper);color:var(--bg-charcoal)}
.big-title{margin:0;font-family:var(--font-display);font-weight:var(--fw-display-max);font-size:var(--fs-display-xxl);
  line-height:var(--lh-display);letter-spacing:var(--tracking-display);text-transform:lowercase}
.big-title.center{text-align:center}
.big-title .ast{display:inline-block;vertical-align:top;font-size:.62em;line-height:1;margin-left:.02em}
.kicker{margin:0;font-size:var(--fs-text-s);font-weight:500;color:var(--text-secondary)}
/* Buttons use the logo orange. Paper on it is 3.05:1, so button labels are bold 19px and up. */
.pill{display:inline-flex;align-items:center;height:52px;padding:0 28px;border-radius:var(--radius-pill);background:var(--accent);
  color:var(--bg-paper);font-family:var(--font-display);font-weight:700;font-size:20px;text-transform:lowercase}
.pill:hover{background:var(--bg-paper);color:var(--bg-charcoal)}

/* Hero */
.hero{position:relative;height:100vh;height:100svh;min-height:600px;display:grid;place-items:center;overflow:hidden}
.hero-line{position:relative;z-index:2;margin:0;text-align:center;font-family:var(--font-display);font-weight:var(--fw-display-max);
  font-size:clamp(44px,5.8vw,112px);line-height:var(--lh-display);letter-spacing:var(--tracking-display);text-transform:lowercase;pointer-events:none}
.hl{display:block}
.paren-line{display:inline-flex;align-items:center;justify-content:center;margin:.1em 0 0}
.paren-img{position:relative;display:inline-block;width:2.5em;height:1.3em;margin:0 .06em;overflow:hidden;border-radius:var(--radius-img-s);background:var(--image-placeholder)}
.paren-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0}
.paren-img img.on,.paren-img img:only-child{opacity:1}
.paren-img img:only-child{object-position:58% 45%}


/* Bio */
.bio{padding:var(--section-gap) var(--gutter);display:flex;justify-content:center}
.bio-copy{max-width:22em;font-size:clamp(25px,2.85vw,44px)}
.bio-text + .bio-text{margin-top:1.1em}
.bio-text{margin:0;max-width:22em;font-size:clamp(25px,2.85vw,44px);line-height:1.4;font-weight:500;text-wrap:pretty}
.bio-text .ast{font-family:var(--font-display);font-weight:900;margin-right:.15em;line-height:1}
/* Lead-in: the entry point to the paragraph, in display type on its own line. */
.bio-lead{display:block;margin-bottom:.35em;font-family:var(--font-display);font-weight:800;font-size:1.6em;line-height:1.05}
.bio-text .inl{display:inline-block;height:1.1em;width:auto;aspect-ratio:3/2;object-fit:cover;vertical-align:-.18em;margin:0 .12em;border-radius:6px}
.w{display:inline}

/* Work */
.work{padding:var(--section-gap) var(--gutter) 0}
.work .big-title{margin-bottom:var(--space-9)}
.o-img{display:inline-block;width:.62em;height:.62em;margin:0 .02em;vertical-align:-.01em;border-radius:var(--radius-pill);overflow:hidden;background:var(--image-placeholder)}
.o-img img{width:100%;height:100%;object-fit:cover}
.work .kicker{padding-bottom:var(--space-4);border-bottom:var(--rule-width) solid var(--rule)}
.work-list{list-style:none;margin:0;padding:0}
.row{border-bottom:var(--rule-width) solid var(--rule)}
.row-link{display:grid;grid-template-columns:minmax(0,62fr) minmax(0,38fr);gap:var(--gutter);padding:var(--space-6) 0;color:var(--text-primary)}
.row-link:hover{color:var(--text-primary)}
.row-media{display:block;overflow:hidden;border-radius:var(--radius-img);aspect-ratio:16/10;background:var(--image-placeholder)}
.row-media img{width:100%;height:100%;object-fit:cover;transition:transform 600ms var(--ease-out)}
.row-link:hover .row-media img{transform:scale(1.03)}
.row-info{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.row-name{font-family:var(--font-display);font-weight:var(--fw-display);font-size:var(--fs-display-m);line-height:var(--lh-display-loose);
  letter-spacing:var(--tracking-display);text-transform:lowercase;transition:color var(--dur) var(--ease-out)}
.row-link:hover .row-name{color:var(--accent)}
.row-tags{list-style:none;margin:var(--space-4) 0 0;padding:0;font-size:var(--fs-text-m);line-height:1.45;color:var(--text-secondary);text-align:left}
.row-info .round-btn{margin-top:auto;align-self:flex-end}
.row-link:hover .round-btn{background:var(--bg-charcoal);transform:rotate(45deg)}

/* What I do */
.services{margin-top:var(--section-gap);padding:var(--section-gap) var(--gutter);background:var(--accent);color:var(--bg-charcoal)}
.services .big-title .ast{color:var(--bg-paper)}
/* Text on the accent is charcoal at 3.9:1, so everything here is 24px and up, or bold 19px and up. */
.svc-intro{margin:var(--space-6) 0 0 clamp(0px,14vw,240px);max-width:20em;font-size:clamp(28px,2.6vw,40px);font-weight:500;line-height:1.25;color:var(--bg-paper)}
.svc-intro .ast{color:var(--bg-paper);font-family:var(--font-display);font-weight:900;margin-right:.1em}
.svc-list{list-style:none;margin:var(--space-10) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-8) clamp(24px,4vw,64px)}
/* Each group is one column: icon, title, lead line, list. Icons are centered on a shared middle line. */
.svc{display:flex;flex-direction:column;min-width:0}
/* Subgrid lines up the titles, lead lines and lists across the three columns. */
@supports (grid-template-rows:subgrid){.svc{display:grid;grid-row:span 4;grid-template-rows:subgrid;row-gap:0}.svc-copy{display:contents}}
.svc-media{display:flex;align-items:center;height:clamp(96px,9vw,150px);margin-bottom:var(--space-5)}
.svc-icon{width:clamp(120px,11vw,180px);max-height:100%;height:auto;fill:none;stroke:currentColor;stroke-width:2.05;stroke-linecap:round;overflow:visible}
.svc-title{margin:0 0 var(--space-4);font-family:var(--font-display);font-weight:var(--fw-display);font-size:var(--fs-display-s);
  line-height:var(--lh-display-loose);letter-spacing:var(--tracking-display);text-transform:lowercase}
.svc-copy{min-width:0}
.svc-text{margin:0 0 var(--space-5);font-size:clamp(24px,1.8vw,28px);font-weight:500;line-height:1.3}
.svc-items{list-style:none;margin:0;padding:0;font-family:var(--font-text);font-weight:400;font-size:24px;line-height:1.4;text-transform:lowercase}

/* Clients */
.clients{padding:var(--section-gap) 0}
.marquee{margin:0 0 var(--space-8);overflow:hidden;font-family:var(--font-display);font-weight:var(--fw-display-max);
  font-size:var(--fs-display-xxl);line-height:var(--lh-display-loose);letter-spacing:var(--tracking-display);text-transform:lowercase;white-space:nowrap}
.mq-track{display:inline-flex;will-change:transform}
.mq-set{display:inline-flex;align-items:center;flex:none}
.mq-word{padding:0 .12em}
.mq-ast{color:var(--accent);padding:0 .12em}
.logo-marquee{overflow:hidden;border-top:var(--rule-width) solid var(--rule);border-bottom:var(--rule-width) solid var(--rule);padding:var(--space-7) 0}
.logo{flex:none;padding:0 clamp(32px,5vw,80px);font-family:var(--font-display);font-weight:var(--fw-display-max);
  font-size:var(--fs-display-m);line-height:1;letter-spacing:var(--tracking-display);text-transform:lowercase;color:var(--text-secondary)}
.clients-note{margin:var(--space-5) var(--gutter) 0;padding-left:clamp(0px,14vw,240px);font-size:var(--fs-text-s);color:var(--text-secondary)}

/* Contact */
.contact{overflow:hidden;padding:var(--section-gap) var(--gutter) var(--space-7);background:var(--surface-dark);color:var(--text-on-dark)}
.contact-line{margin:0 0 var(--space-7);font-family:var(--font-display);font-weight:var(--fw-display);
  font-size:var(--fs-display-m);line-height:var(--lh-display-loose);letter-spacing:var(--tracking-display);text-transform:lowercase}
.foot{margin-top:var(--space-10)}
.foot-meta{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--space-2) var(--space-6);margin:0 0 var(--space-6);
  font-size:var(--fs-text-s);font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--text-on-dark-muted)}
.foot-meta p{margin:0;display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-6)}
.foot-mark{margin:0;text-align:center;font-family:var(--font-display);font-weight:var(--fw-display-max);font-size:clamp(96px,26vw,440px);
  line-height:.9;letter-spacing:var(--tracking-display);color:var(--bg-warm-700)}
.foot-mark .ast{font-size:.5em;vertical-align:top;line-height:1}

/* Project page */
.pj-title{margin:0;font-family:var(--font-display);font-weight:var(--fw-display-max);font-size:var(--fs-display-xl);
  line-height:var(--lh-display);letter-spacing:var(--tracking-display);text-transform:lowercase}
.pj-info{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-6) var(--gutter);align-items:start;
  margin:0 var(--gutter);padding:var(--space-9) 0;border-top:var(--rule-width) solid var(--rule)}
.pj-intro{margin:0 0 var(--space-7);font-size:clamp(22px,1.9vw,28px);font-weight:500;line-height:1.4;max-width:var(--measure)}
.pj-meta{margin:0;display:grid;gap:var(--space-3);font-size:var(--fs-text-m)}
.pj-meta div{display:grid;grid-template-columns:7em minmax(0,1fr);gap:var(--space-4);padding-top:var(--space-3);border-top:var(--rule-width) solid var(--rule)}
.pj-meta dt{font-family:var(--font-display);font-weight:var(--fw-display);font-size:var(--fs-text-s);letter-spacing:var(--tracking-display);text-transform:uppercase;line-height:1.9;color:var(--text-primary)}
.pj-meta dd{margin:0}
.pj-deliv{list-style:none;margin:0;padding:0;line-height:1.6;columns:2;column-gap:var(--space-6)}
.pj-deliv li{break-inside:avoid}
.pj-imgs{display:grid;gap:var(--space-4);padding:calc(var(--gutter) + 88px) var(--gutter) var(--space-9)}
.pj-live{font-weight:500}
.pj-nav{display:grid;grid-template-columns:1fr 1fr;gap:var(--gutter);margin:0 var(--gutter);padding:var(--space-7) 0 var(--section-gap);border-top:var(--rule-width) solid var(--rule)}
.pj-step{display:flex;align-items:center;gap:var(--space-5);color:var(--text-primary)}
.pj-step:hover{color:var(--text-primary)}
.pj-step.next{justify-content:flex-end;text-align:right}
.pj-step-label{display:flex;flex-direction:column;gap:var(--space-2)}
.pj-step-name{font-family:var(--font-display);font-weight:var(--fw-display);font-size:var(--fs-display-m);line-height:1;text-transform:lowercase;transition:color var(--dur) var(--ease-out)}
.pj-step:hover .pj-step-name{color:var(--accent)}
.pj-step:hover .round-btn{background:var(--bg-charcoal)}
.pj-step.next:hover .round-btn{transform:translateX(4px)}
.pj-step.prev:hover .round-btn{transform:translateX(-4px)}
.pj-fig{margin:0;overflow:hidden;border-radius:var(--radius-img);background:var(--image-placeholder)}
.pj-fig img{width:100%;height:auto;object-fit:cover}
.pj-pair{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4)}
.pj-pair.n3{grid-template-columns:1fr 1fr 1fr}
.pj-pair img{object-fit:cover}

/* Cursor */
.cursor{position:fixed;left:0;top:0;z-index:60;pointer-events:none;width:10px;height:10px;margin:-5px 0 0 -5px;
  border-radius:var(--radius-pill);background:var(--bg-charcoal);opacity:0;display:flex;align-items:center;justify-content:center;
  transition:width var(--dur) var(--ease-out),height var(--dur) var(--ease-out),margin var(--dur) var(--ease-out),background var(--dur) var(--ease-out)}
.cursor-label{opacity:0;font-family:var(--font-display);font-weight:700;font-size:15px;color:var(--bg-paper);transition:opacity var(--dur) var(--ease-out)}
.cursor.live{opacity:1}
.cursor.on-dark{background:var(--bg-paper)}
.cursor.pill{width:64px;height:30px;margin:-15px 0 0 -32px;background:var(--accent)}
.cursor.pill .cursor-label{opacity:1}
.has-cursor .row-link{cursor:none}
@media (hover:none),(pointer:coarse){.cursor{display:none}}

/* Tablet and phone */
@media (max-width:900px){
  .svc-list{grid-template-columns:1fr;row-gap:var(--space-9)}
  .svc{display:flex}
  .svc-copy{display:block}
  }
@media (max-width:640px){
  .hero-line{font-size:clamp(44px,13vw,72px)}
            .big-title{font-size:clamp(64px,19vw,96px)}
  .work .big-title{margin-bottom:var(--space-8)}
  .row-link{grid-template-columns:1fr;gap:var(--space-4);padding:var(--space-5) 0 var(--space-6)}
  .row-info{flex-direction:row;flex-wrap:wrap;align-items:flex-start;gap:0 var(--space-4)}
  .row-name{flex:1 1 auto}
  .row-tags{flex:0 0 100%;order:3;margin-top:var(--space-2);font-size:var(--fs-text-s)}
  .row-info .round-btn{margin-top:0;align-self:flex-start}
  .svc-intro{margin-left:0}
  .clients-note{padding-left:0}
  .pj-pair{grid-template-columns:1fr}
    .contact{padding-bottom:calc(var(--space-7) + 48px)}
}

/* Preview: add ?caps to the URL to set the big display type in uppercase. */
.caps .hero-line,.caps .big-title,.caps .marquee,.caps .row-name,.caps .svc-title,.caps .contact-line,.caps .pj-title{text-transform:none}

/* Website screenshots on a card panel */
.pj-web{display:flex;justify-content:center;align-items:flex-start;gap:var(--space-6);padding:var(--space-8) var(--gutter);background:var(--surface-card)}
.pj-web img{max-width:100%;height:auto;object-fit:cover;object-position:50% 0;border-radius:var(--radius-img-s)}

/* Project names are set in caps wherever they appear as display type. */
.row-name,.pj-title,.pj-step-name{text-transform:uppercase}

/* Uneven rows (70/30 and 30/70): both images fill the row height. */
.pj-split{grid-template-rows:100%}
.pj-split .pj-fig{height:100%}
.pj-split .pj-fig img{width:100%;height:100%;object-fit:cover}

/* Project info: the name runs the full width on its own row, so long uppercase names never collide with the text.
   The case study and the services sit side by side below it. */
.pj-info{grid-template-columns:minmax(0,1fr)}
.pj-about{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-6) var(--gutter);align-items:start}
.pj-about .pj-intro{margin:0}
@media (max-width:900px){.pj-about{grid-template-columns:minmax(0,1fr)}}

/* Lightbox */
.pj-imgs img,.paren-img img{cursor:zoom-in}
.has-cursor .pj-imgs img,.has-cursor .paren-img img{cursor:none}
.paren-img{pointer-events:auto}
.lb-btn[hidden]{display:none}
.lb-open,.lb-open body{overflow:hidden}
.lightbox{position:fixed;inset:0;z-index:100;overflow:hidden;background:var(--surface-dark)}
/* The current image is centered. The previous and next images are placed a fixed gap off its edges by JS,
   so only a slice of each shows before the screen edge cuts them off. */
.lb-stage{position:absolute;inset:calc(var(--gutter) + 56px) 0;display:flex;align-items:center;justify-content:center}
.lb-img{display:block;max-width:74vw;max-height:100%;width:auto;height:auto;border-radius:var(--radius-img)}
/* Centered with top/bottom + auto margins, not a transform, so the swipe animation's scale can't knock it off center. */
.lb-side{position:absolute;top:0;bottom:0;margin:auto 0;height:78%;width:auto;max-width:none;border-radius:var(--radius-img);
  opacity:.35;cursor:pointer;transition:opacity var(--dur) var(--ease-out)}
.lb-side:hover{opacity:.6}
.lb-side[hidden]{display:none}
.lb-btn{z-index:2}
.lb-zoom{display:block;max-width:100%;max-height:100%;line-height:0}
.lb-zoom .lb-img{max-height:calc(100vh - (var(--gutter) + 56px) * 2)}
.lb-btn{all:unset;box-sizing:border-box;position:absolute;display:flex;align-items:center;justify-content:center;width:52px;height:52px;
  border-radius:var(--radius-pill);background:var(--accent);color:var(--bg-paper);cursor:pointer;transition:background var(--dur) var(--ease-out)}
.lb-btn:hover{background:var(--bg-paper);color:var(--bg-charcoal)}
.lb-btn:focus-visible{outline:2px solid var(--bg-paper);outline-offset:3px}
.lb-btn svg{width:22px;height:22px}
.lb-close{top:var(--gutter);right:var(--gutter)}
.lb-prev{left:var(--gutter);top:50%;margin-top:-26px}
.lb-next{right:var(--gutter);top:50%;margin-top:-26px}
.lb-count{position:absolute;bottom:var(--gutter);left:50%;transform:translateX(-50%);margin:0;font-size:var(--fs-text-s);font-weight:500;color:var(--text-on-dark-muted)}
.lb-open .site-head,.lb-open .cursor{display:none}

/* Hero line in caps. */
.hero-line{text-transform:uppercase;line-height:.84;
  /* As big as the width allows: the longest line ("BRAND STRATEGIST") spans the page between the gutters,
     capped by height so all four lines fit on short screens. */
  font-size:min(9.8vw,17.5vh)}
/* Section titles in caps. */
.big-title,.svc-title{text-transform:uppercase}

/* Phones: one word per line so the hero can run much bigger. "STRATEGIST" is the longest line. */
.m-br{display:none}
@media (max-width:640px){
  .m-br{display:inline}
  .hero-line{font-size:min(14vw,10vh);line-height:.9}
  /* Words within a role stay tight; the roles get clear air between them. */
  .hero-line .hl + .hl{margin-top:.32em}
}

/* Phones: logo and a menu button; the links open as a full-screen charcoal menu. */
@media (max-width:640px){
  /* Three plain bars in the header's text color. They fold into an X when the menu is open. */
  .menu-btn{all:unset;box-sizing:border-box;position:relative;z-index:2;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:6px;
    width:44px;height:44px;margin-right:-10px;cursor:pointer;color:var(--hf)}
  .menu-bar{display:block;width:26px;height:3px;background:currentColor;transition:transform var(--dur) var(--ease-out),opacity var(--dur) var(--ease-out)}
  .menu-btn:focus-visible{outline:2px solid var(--accent-ink);outline-offset:2px}
  .menu-open .menu-btn:focus-visible,.menu-open .head-nav a:focus-visible{outline-color:var(--bg-paper)}
  .head-nav{position:fixed;inset:0;z-index:1;display:none;flex-direction:column;justify-content:center;gap:var(--space-5);
    padding:var(--space-9) var(--gutter);background:var(--accent)}
  .head-nav a{color:var(--bg-paper);font-weight:var(--fw-display-max);font-size:clamp(48px,15vw,72px);line-height:.95}
  .head-nav a:hover,.head-nav a:focus-visible{color:var(--bg-charcoal)}
  .menu-open .head-nav{display:flex}
  .menu-open,.menu-open body{overflow:hidden}
  .menu-open .site-head{transform:none;background:var(--accent)}
  .menu-open .head-logo .logo-bg{fill:var(--bg-charcoal)}
  .menu-open .menu-btn{color:var(--bg-paper)}
  .menu-open .menu-bar:nth-child(2){transform:translateY(9px) rotate(45deg)}
  .menu-open .menu-bar:nth-child(3){opacity:0}
  .menu-open .menu-bar:nth-child(4){transform:translateY(-9px) rotate(-45deg)}
}

/* WORK title: as wide as the page. The rule above the first row replaces the old "selected work" line. */
#work-title{font-size:min(31.4vw,64vh);line-height:.8;letter-spacing:var(--tracking-display-min);white-space:nowrap;margin-bottom:var(--space-8)}
.work-list{border-top:var(--rule-width) solid var(--rule)}

/* Phones: previous and next stack as two full-width rows, next first. Names stay on one line. */
@media (max-width:640px){
  .pj-nav{grid-template-columns:1fr;gap:0;padding:0 0 var(--space-9)}
  .pj-step{justify-content:space-between;gap:var(--space-4);padding:var(--space-5) 0;border-bottom:var(--rule-width) solid var(--rule)}
  .pj-step.next{order:-1;justify-content:flex-start;text-align:left}
  .pj-step.next .round-btn{order:-1}
  .pj-step.prev{justify-content:flex-start}
  .pj-step-name{font-size:clamp(32px,10.5vw,48px);line-height:.95}
  .pj-step .round-btn{width:44px;height:44px}
}
@media (max-width:640px){
  .pj-meta div{grid-template-columns:minmax(0,1fr);gap:var(--space-2)}
  .pj-live{overflow-wrap:anywhere}
}
@media (max-width:640px){
  /* Project name scales with the screen so long names (RADLANDS, SYNERGY SKIN WORX) fit. */
  .pj-title{font-size:min(15vw,72px);overflow-wrap:break-word}
}

/* Lightbox on phones: the image nearly fills the width, side previews hide, arrows and count sit at the bottom.
   The stage takes touch so the image can be swiped. */
@media (max-width:640px){
  .lb-stage{inset:68px 0 84px;touch-action:none}
  .lb-img{max-width:calc(100vw - 16px);border-radius:var(--radius-img-s)}
  .lb-side{display:none}
  .lb-btn{width:44px;height:44px}
  .lb-close{top:12px;right:12px}
  .lb-prev,.lb-next{top:auto;bottom:20px;margin-top:0}
  .lb-prev{left:16px}
  .lb-next{right:16px}
  .lb-count{bottom:32px}
}
@media (max-width:640px){
  .lb-zoom .lb-img{max-height:calc(100svh - 152px)}
  .is-zoomed .lb-count,.is-zoomed .lb-prev,.is-zoomed .lb-next{opacity:0;pointer-events:none}
}

/* Footer: the BGCG mark spans the page width as big as it goes; name, city and rights line sit below it. */
.foot-mark{font-size:calc((100vw - var(--gutter) * 2) * .369);line-height:.78;white-space:nowrap;letter-spacing:var(--tracking-display-min);text-align:left;margin:0 0 var(--space-6)}
.foot-meta{margin:0}

/* Hero asterisk: a slow-turning orange asterisk after WHISPERER. Hover (or tap on phones) pops up the bird photo above it;
   clicking it on desktop, or tapping the photo, opens the photo in the lightbox. */
.ast-wrap{position:relative;display:inline-block;pointer-events:auto}
.hero-ast{all:unset;cursor:pointer;display:inline-block;color:var(--accent);font-size:1.45em;line-height:.62;vertical-align:top;margin-left:-.03em;padding:0 .02em}
.ast-glyph{display:inline-block;animation:ast-spin 14s linear infinite;transform-origin:50% 3.9%}
@keyframes ast-spin{to{transform:rotate(360deg)}}
.hero-ast:focus-visible{outline:3px solid var(--accent-ink);outline-offset:4px;border-radius:var(--radius-pill)}
.ast-pop{position:absolute;right:0;bottom:100%;z-index:5;width:clamp(240px,30vw,480px);padding-bottom:12px;font-size:16px;line-height:0;
  opacity:0;transform:translateY(14px) scale(.96);transform-origin:100% 100%;pointer-events:none;
  transition:opacity 220ms var(--ease-out),transform 260ms var(--ease-out)}
.ast-pop img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;object-position:58% 45%;border-radius:var(--radius-img);cursor:zoom-in}
.ast-wrap:hover .ast-pop,.ast-wrap:focus-within .ast-pop,.ast-wrap.is-open .ast-pop{opacity:1;transform:none;pointer-events:auto}
.ast-wrap:hover .ast-glyph,.ast-wrap.is-open .ast-glyph{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.ast-glyph{animation:none}.ast-pop{transition:none}}
@media (max-width:640px){.ast-pop{width:min(72vw,300px);right:-4px}}
/* Lightbox: the image can be dragged sideways with a mouse to move between images. */
.lb-stage{cursor:grab;user-select:none;-webkit-user-select:none}
.lb-stage:active{cursor:grabbing}
.lb-img,.lb-side{-webkit-user-drag:none;user-select:none}

/* Project team credits: role in small gray above the names. */
.pj-team{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-3)}
.pj-team li{display:flex;flex-direction:column;gap:2px}
.t-role{font-size:var(--fs-text-s);color:var(--text-secondary)}
.t-name{line-height:1.4}
.t-person{white-space:nowrap}

/* Hero lines rise and fade in on load. Pure CSS so the headline (the largest thing on screen) paints as soon as
   the page renders, without waiting for the scripts at the end of the page. */
/* Starts at .01, not 0: Chrome never counts a fully transparent element as painted, so the headline would never register as the page's largest paint. */
@keyframes hero-in{from{opacity:.01;transform:translateY(40%)}to{opacity:1;transform:none}}
.hero-line .hl{animation:hero-in .9s cubic-bezier(.2,.7,.2,1) both}
.hero-line .hl:nth-child(1){animation-delay:.05s}
.hero-line .hl:nth-child(2){animation-delay:.15s}
.hero-line .hl:nth-child(3){animation-delay:.25s}
@media (prefers-reduced-motion:reduce){.hero-line .hl{animation:none}}