/* ==================================================================
   MODULAR — announcement page

   GRID     12 columns, fixed gutter, fluid outer margin. Right-flank
            items sit in real columns (text-align:right), so the grid
            does structural work rather than decoration.
   BANDS    masthead / statement / contact, split by 1px rules.
   MODULE   every box distance is a multiple of 8:
            56 · 24 · 48 · 88 · 32 · 16 · 32 · 48
   SCALE    112 / 30 / 20 / 12 / 10   (3.73 · 1.50 · 1.67 · 1.20)
   ANCHOR   the statement hangs from the bottom of its band, so the
            page holds ONE dominant silence — above the phrase, closed
            by the masthead rule on top and by the phrase below.
   ================================================================== */

:root{
  --black:#000;
  --white:#fff;
  --grey:#8a8a8a;                  /* single secondary tone, 6.08:1 */
  --rule:rgba(255,255,255,.16);
  --teal:#3dc4b1;

  --margin:clamp(40px,5vw,104px);  /* 72px at 1440, 96px at 1920 */
  --gutter:24px;

  /* vertical module, base 8 */
  --v-top:56px;      /* sheet top           */
  --v-mast:24px;     /* logo -> rule        */
  --v-sig:48px;      /* phrase -> signature */
  --v-anchor:88px;   /* signature -> rule   */
  --v-band:32px;     /* rule -> contact, contact -> colophon */
  --v-lab:16px;      /* folio -> title      */
  --v-bleed:48px;    /* colophon -> trim    */

  /* The phrase drives the system: band 2 is a fixed multiple of it, so
     the interior proportions stay constant and any surplus viewport
     height becomes OUTER margin instead of an interior hole. */
  --fs:min(6.5vw,6.6vh);     /* reduced per request */
  --band-m:10.35;            /* band 2 height restored to original */

  /* fixed chrome above and below band 2, so band 2 never overruns */
  --logo-w:clamp(118px,10.98vw,176px);
  --logo-h:calc(var(--logo-w)/5.6312);
  --footer-h:121px;          /* 1 + 32 + 46 + 32 + 10 */
  --chrome:calc(var(--v-top) + var(--logo-h) + var(--v-mast) + 1px
                + var(--footer-h) + var(--v-bleed));

  --micro:10px;
  --track-micro:.16em;

  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%}

body{
  background:var(--black);
  color:var(--white);
  font-family:"Helvetica Neue",Helvetica,Inter,Arial,sans-serif;
  font-weight:400;
  font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  min-height:100svh;
}

/* ---------- frame ---------- */

.sheet{
  position:relative;
  min-height:100svh;
  display:grid;
  grid-template-rows:auto
    minmax(min-content,min(calc(var(--fs)*var(--band-m)),calc(100svh - var(--chrome))))
    auto;
  align-content:end;         /* surplus height leaves the composition */
  padding:var(--v-top) var(--margin) var(--v-bleed);
}

.band{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  column-gap:var(--gutter);
  align-items:center;
}

.rule{border:0;border-top:1px solid var(--rule);margin:0;height:0}

/* ---------- micro type: one size, one tone ---------- */

.micro{
  font-size:var(--micro);
  line-height:1;
  letter-spacing:var(--track-micro);
  text-transform:uppercase;
  color:var(--grey);
}
/* tracked caps carry a trailing sidebearing that CSS counts as width;
   pull it back so the right flank is a true edge, not a fringe */
.micro--r{text-align:right;margin-right:calc(var(--track-micro)*-1)}

/* ---------- band 1 · masthead ---------- */

.masthead{padding-bottom:var(--v-mast)}

.logo{
  grid-column:1 / span 5;
  display:block;
  width:var(--logo-w);                /* 158px at 1440 — ratio 5.63:1 */
  height:auto;
  color:var(--white);
  /* Optical alignment (margin, not transform — the entrance animation
     owns `transform`). Only d and l reach the ascender, so the visual
     mass sits at 57.8% of the box: the logo rises ~2% of its own
     height to centre against the cap-height label opposite it. */
  /* Offset, not margin: a margin would also move the row's centre and
     only deliver half the shift. `transform` belongs to the entrance
     animation, so the nudge rides on `top`. -1.6% of the width is -9%
     of the height, measured against the label's cap-height centre. */
  position:relative;
  top:calc(var(--logo-w) * -.016);
}
.masthead .micro{grid-column:6 / span 7}

/* ---------- band 2 · statement ---------- */

.statement{
  align-content:center;
}

.statement__text{
  grid-column:1 / span 11;
  margin:0 0 0 -.012em;              /* optical: the W hangs on the line */
  font-size:var(--fs);
  font-weight:400;
  line-height:1;
  letter-spacing:-.025em;
}
.statement__text .l{display:block}   /* landscape: two measured lines */

/* Signature. A different typographic CATEGORY from the folio:
   three times the body size, medium weight, near-zero tracking. */
.sigrow{
  grid-column:1 / span 12;
  display:grid;
  grid-template-columns:repeat(12,1fr);
  column-gap:var(--gutter);
  align-items:baseline;
  margin-top:var(--v-sig);
}
.sign{
  grid-column:1 / span 6;
  margin:0;
  font-size:clamp(22px,min(3.7vw,3.4vh),30px);
  font-weight:500;
  margin-left:-.03em;                 /* optical: the round S overhangs */
  line-height:1;
  letter-spacing:.02em;
  text-transform:uppercase;
  color:var(--white);
}
.sign .star{                          /* footnote mark — see the colophon */
  font-size:.55em;                    /* a superior, not a third body size */
  font-weight:400;
  letter-spacing:0;
  vertical-align:.26em;               /* ink lands inside the cap band */
  margin-left:.13em;
  color:var(--grey);
}
.sigrow .micro{grid-column:1 / span 12}

/* ---------- band 3 · contact ---------- */

.contact{padding:var(--v-band) 0 0}

.contact__label{
  grid-column:1 / span 6;
  display:flex;
  flex-direction:column;
  gap:var(--v-lab);
}
.contact__title{
  font-size:20px;
  line-height:1;
  letter-spacing:-.01em;
  font-weight:400;
  margin-left:-.02em;                /* optical: the round G overhangs */
}

.cta{
  grid-column:1 / span 12;
  justify-self:start;
  display:inline-flex;
  align-items:center;
  gap:1.4em;
  white-space:nowrap;
  /* right padding compensates the label's trailing tracking */
  padding:15px calc(22px - .14em) 14px 22px;
  border:1px solid rgba(255,255,255,.42);
  color:var(--white);
  text-decoration:none;
  font-size:12px;
  line-height:1;
  letter-spacing:.14em;
  text-transform:uppercase;
  transition:background-color .35s var(--ease),
             border-color .35s var(--ease),
             color .35s var(--ease);
}
.cta .arrow{
  font-size:1em;
  line-height:1;
  transform:translateY(-.5px);
  transition:transform .35s var(--ease);
}
.cta:hover{background:var(--white);border-color:var(--white);color:var(--black)}
.cta:hover .arrow{transform:translate(2px,-2.5px)}
.cta:focus-visible{
  outline:2px solid var(--teal);
  outline-offset:4px;
  border-color:var(--white);
}

/* ---------- colophon ---------- */

.colophon{padding:var(--v-band) 0 0}
.colophon .micro:first-child{grid-column:1 / span 7}
.colophon .micro:last-child{grid-column:8 / span 5}
.colophon a{
  color:inherit;text-decoration:none;
  display:inline-block;padding:7px 0;margin:-7px 0;   /* 24px hit area */
  transition:color .35s var(--ease);
}
.colophon a:hover{color:var(--white)}
.colophon a:focus-visible{outline:2px solid var(--teal);outline-offset:3px}

/* ---------- register mark (deck: 29 x 39 on a 1920 canvas) ---------- */

.register{
  position:absolute;
  left:var(--margin);
  bottom:0;
  width:clamp(16px,1.5vw,29px);
  height:clamp(21.5px,2.02vw,39px);
  background:var(--teal);
}

/* ---------- entrance ---------- */

.rise{opacity:0;transform:translateY(10px)}
.is-ready .rise{
  opacity:1;
  transform:none;
  transition:opacity .8s var(--ease) var(--d,0ms),
             transform .8s var(--ease) var(--d,0ms);
}
.register{transform:scaleY(0);transform-origin:50% 100%}
.is-ready .register{transform:none;transition:transform .9s var(--ease) 900ms}

/* ---------- large screens: the module steps up, still on 8 ---------- */

@media (min-width:1600px){
  :root{
    --v-top:80px;--v-mast:32px;--v-sig:72px;--v-anchor:96px;
    --v-band:48px;--v-lab:24px;--v-bleed:72px;
    --footer-h:161px;        /* 1 + 48 + 54 + 48 + 10 */
    --fs:min(12.2vw,13.6vh); /* the phrase keeps growing past 1600 */
    --band-m:5.25;
  }
}

/* ==================================================================
   PORTRAIT — the phrase takes three lines and the footer stacks.
   This is the layout the 761-1024 tablet range never had.
   ================================================================== */

@media (orientation:portrait){
  :root{--fs:min(12.0vw,9.2vh);--band-m:7.2}
  .statement__text{grid-column:1 / span 12;line-height:1.02}
  .statement__text .w{display:block}    /* three lines, descending rag */
  .sigrow .micro{grid-column:1 / span 12}
}

@media (orientation:portrait) and (min-width:761px){
  :root{--footer-h:196px}    /* 121 + 32 + 43, the CTA drops to its own row */
  .contact__label{grid-column:1 / span 12}
  .cta{grid-column:1 / span 12;justify-self:start;margin-top:var(--v-band)}
  .colophon .micro:first-child{grid-column:1 / span 8}
  .colophon .micro:last-child{grid-column:9 / span 4}
}

/* ---------- phones ---------- */

@media (max-width:760px){
  /* On a phone the page is read at arm's length in one gulp: the air is
     shared out, not banked into one field. The statement sits higher and
     the surplus moves below the signature, where SRZ closes it on top and
     the contact rule closes it underneath. */
  :root{
    --margin:24px;--gutter:16px;
    --v-top:32px;--v-mast:16px;--v-sig:40px;--v-anchor:152px;
    --v-band:24px;--v-lab:12px;--v-bleed:40px;
    --fs:min(15.4vw,7.6vh);--band-m:9.36;
    --footer-h:172px;        /* 1+24+40+24+45+24+14 — colophon on one line */
  }

  .masthead .micro{font-size:9px;letter-spacing:.12em;margin-right:-.12em}
  .logo{top:calc(var(--logo-w) * -.0125)}   /* 9px label, smaller shift */

  .contact{row-gap:var(--v-band)}
  .contact__label{grid-column:1 / span 12}
  .contact__title{font-size:18px}
  .cta{
    grid-column:1 / span 12;justify-self:stretch;
    justify-content:center;gap:1.2em;
    padding:16px 18px 15px;
  }

  /* the two-flank structure holds on phones too */
  .colophon .micro{font-size:9px;letter-spacing:.08em}
  .colophon .micro--r{margin-right:-.08em}
  .colophon .micro:first-child{grid-column:1 / span 8}
  .colophon .micro:last-child{grid-column:9 / span 4}
}

/* very narrow phones (320): keep both flanks inside the measure */
@media (max-width:380px){
  .cta{font-size:11px;letter-spacing:.10em;gap:1em;padding:16px 14px 15px}
  .colophon .micro{font-size:8px}
  .colophon .micro:first-child{grid-column:1 / span 7}
  .colophon .micro:last-child{grid-column:8 / span 5}
}

/* short phones: the module tightens rather than the air collapsing */
@media (max-width:760px) and (max-height:699px){
  :root{--v-sig:32px;--v-anchor:72px}
}

/* four lines only when the phone is tall enough to hold them */
@media (max-width:760px) and (min-height:700px){
  .statement__text .w2{display:block}
}

/* ---------- landscape, short ---------- */

@media (orientation:landscape) and (max-height:760px){
  :root{
    --v-top:32px;--v-sig:32px;--v-anchor:56px;--v-band:24px;--v-bleed:32px;
    --footer-h:105px;        /* 1 + 24 + 46 + 24 + 10 */
  }
}

@media (prefers-reduced-motion:reduce){
  .rise,.is-ready .rise,.register,.is-ready .register{
    opacity:1;transform:none;transition:none
  }
  .cta,.cta .arrow,.colophon a{transition:none}
}