/* ══════════════════════════════════════════════════════════════════════
   vissuale. — independent design office
   Set like a catalogue: one sans, hard rules, marginal small caps,
   plate numbers, and type that carries the page.
   ══════════════════════════════════════════════════════════════════════ */

:root{
  --paper:#F6F4F0;
  --plate:#F1EEE9;
  --ink:#111111;
  --muted:#6F6F6A;
  --hair:#D8D5CF;

  /* colour lives in the work — one accent per commission, page chrome stays ink */
  --acc-a:#5E202B;   /* VESPER — oxblood */
  --acc-b:#9A6106;   /* ARCA — ochre */
  --acc-c:#1E5C3A;   /* AERTARIS — deep green */
  --acc-d:#C9A86A;   /* AERVANTE — gold, the real brand's own */

  --m:clamp(18px,3vw,52px);
  --gut:clamp(10px,1.3vw,22px);

  /* one family, no serif anywhere */
  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text",
         "Helvetica Neue","Inter","Segoe UI",Roboto,Arial,sans-serif;

  --ease:cubic-bezier(.16,1,.3,1);
  --micro:clamp(9px,.72vw,10.5px);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}

body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:clamp(13.5px,.92vw,15.5px);
  line-height:1.5;
  letter-spacing:-.006em;
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

a{color:inherit;text-decoration:none;}
ol,ul{list-style:none;}
h1,h2,h3{font-weight:inherit;}
svg{display:block;}
::selection{background:var(--ink);color:var(--paper);}
:focus-visible{outline:1px solid var(--ink);outline-offset:5px;}

/* the period is the register mark — one weight heavier, everywhere */
b{font-weight:600;}

.skip{
  position:fixed;top:8px;left:8px;z-index:99;
  padding:9px 13px;background:var(--ink);color:var(--paper);
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  transform:translateY(-160%);
}
.skip:focus{transform:translateY(0);}

/* small-caps marginalia — the page's connective tissue */
.sec,.cover-note,.entry-meta,.cover-meta,figcaption,
.colophon,.idx,.close-meta,.nav a{
  font-size:var(--micro);
  letter-spacing:.18em;
  text-transform:uppercase;
  line-height:1.6;
}


/* ═══ MASTHEAD ══════════════════════════════════════════════════════
   Sticky, single baseline, one hairline. Same margins as the type it
   sits above, so it reads as a running head and not a floating bar. */
.masthead{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:baseline;justify-content:space-between;
  gap:20px;
  padding:clamp(14px,1.5vw,20px) var(--m) clamp(12px,1.3vw,17px);
  background:var(--paper);
  border-bottom:1px solid var(--hair);
}
.wordmark{
  font-size:clamp(14px,1.15vw,16px);
  font-weight:500;
  letter-spacing:-.035em;
}
.nav{display:flex;gap:clamp(16px,2.2vw,38px);}
.nav a{color:var(--muted);transition:color .2s;}
.nav a:hover{color:var(--ink);}


/* ═══ COVER ═════════════════════════════════════════════════════════ */
.cover{
  padding:clamp(46px,9vh,120px) var(--m) clamp(40px,7vh,90px);
  display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gut);
}

.cover-note{
  grid-column:1 / 5;
  color:var(--muted);
  margin-bottom:clamp(44px,11vh,150px);
}
.cover-note .ln{display:block;}
.cover-note .gap{margin-top:1.5em;}

/* the wordmark sets to the full measure — this is the cover */
.mark{
  grid-column:1 / -1;
  /* "vissuale." sets ~2.97× its font-size wide, so 30.6vw fills the
     measure at every width — the wordmark is the cover. */
  font-size:clamp(40px,30.6vw,760px);
  font-weight:250;
  line-height:.80;
  letter-spacing:-.052em;
  margin-left:-.045em;          /* optical flush to the margin */
}

.cover-foot{
  grid-column:1 / -1;
  margin-top:clamp(30px,5.5vh,64px);
  padding-top:clamp(18px,2.4vh,30px);
  border-top:1px solid var(--hair);
  display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gut);
  align-items:start;
}
.lede{
  grid-column:1 / 7;
  font-size:clamp(17px,1.62vw,24px);
  font-weight:350;
  line-height:1.32;
  letter-spacing:-.02em;
}
.lede .ln{display:block;}
.cover-meta{
  grid-column:10 / -1;
  color:var(--muted);
  text-align:right;
  display:flex;flex-direction:column;gap:.5em;
}
.cover-cta{grid-column:1 / 7;margin-top:clamp(26px,4vh,52px);}


/* ═══ CTA ═══════════════════════════════════════════════════════════ */
.cta{
  display:inline-flex;align-items:baseline;gap:1.1em;
  font-size:clamp(13px,.95vw,15px);
  padding-bottom:9px;
  border-bottom:1px solid var(--ink);
}
.cta i{font-style:normal;transition:transform .22s var(--ease);display:inline-block;}
.cta:hover i{transform:translateX(6px);}


/* ═══ CHAPTERS ══════════════════════════════════════════════════════ */
.chapter{padding:clamp(64px,11vh,150px) var(--m) 0;}
.closing{padding-bottom:clamp(60px,10vh,130px);}

.chapter-head{
  display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gut);
  align-items:baseline;
  padding-top:13px;
  border-top:2px solid var(--ink);
  margin-bottom:clamp(40px,7vh,96px);
}
.sec{grid-column:1 / 3;color:var(--muted);}
.chapter-title{
  grid-column:3 / 10;
  font-size:clamp(15px,1.25vw,18px);
  font-weight:450;
  letter-spacing:-.02em;
  text-transform:none;
}
.sec-r{grid-column:10 / -1;text-align:right;color:var(--muted);}


/* ═══ § 01 · WORK ═══════════════════════════════════════════════════ */
.entry{
  display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gut);
  padding-top:15px;
  border-top:1px solid var(--hair);
  margin-bottom:clamp(56px,10vh,140px);
}
.entry:last-child{margin-bottom:0;}

.idx{color:var(--muted);}
.entry .idx{grid-column:1 / 2;grid-row:1;padding-top:.55em;}

.name{
  grid-row:1;
  font-size:clamp(42px,9.4vw,166px);
  font-weight:250;
  line-height:.86;
  letter-spacing:-.05em;
}
.entry-meta{
  grid-row:1;
  color:var(--muted);
  display:flex;flex-direction:column;gap:.45em;
  text-align:right;
  padding-top:.6em;
}

/* Three placements, three scales. 01 and 03 are spreads — plate beside the
   name on the same rule; 02 breaks the pattern and takes the full width. */
.e--a,.e--c{grid-template-rows:auto 1fr;}  /* keep the meta under the name */
.e--a .name{grid-column:2 / 8;}
.e--a .entry-meta{grid-column:2 / 5;grid-row:2;text-align:left;padding-top:clamp(14px,2vh,26px);}
.e--a .plate{grid-column:9 / -1;grid-row:1 / span 2;}
.e--a .plate-in{aspect-ratio:4/5;}

.e--b .name{grid-column:2 / 9;}
.e--b .entry-meta{grid-column:10 / -1;}
.e--b .plate{grid-column:3 / -1;grid-row:2;margin-top:clamp(20px,3vh,40px);}
/* the interface plate is sized by its own content — a real crop, not a box */
.e--b .plate-in{aspect-ratio:auto;}

.e--c .name{grid-column:7 / 12;}
.e--c .entry-meta{grid-column:7 / 10;grid-row:2;text-align:left;padding-top:clamp(14px,2vh,26px);}
.e--c .plate{grid-column:1 / 7;grid-row:1 / span 2;}
.e--c .plate-in{aspect-ratio:4/3;}

.e--d{grid-template-rows:auto 1fr;}
.e--d .name{grid-column:2 / 9;}
.e--d .entry-meta{grid-column:2 / 5;grid-row:2;text-align:left;padding-top:clamp(14px,2vh,26px);}
.e--d .plate{grid-column:9 / 12;grid-row:1 / span 2;}
.e--d .plate-in{aspect-ratio:10/18;}

.plate-in{
  background:var(--plate);
  border:1px solid var(--hair);
  display:grid;place-items:stretch;
  overflow:hidden;
}
.plate figcaption{
  margin-top:11px;
  color:var(--muted);
}

/* ── mockups ──
   The plates depict physical and on-screen artifacts, so soft shadows are
   allowed INSIDE them — the page itself still has none. Each commission
   carries its own accent; the caption chip ties them together. */
.mock{position:relative;overflow:hidden;}

/* caption chips — the only colour that escapes the plates */
figcaption::before{
  content:"";display:inline-block;
  width:.7em;height:.7em;margin-right:.9em;
  vertical-align:-.05em;
}
.e--a figcaption::before{background:var(--acc-a);}
.e--b figcaption::before{background:var(--acc-b);}
.e--c figcaption::before{background:var(--acc-c);}
.e--d figcaption::before{background:var(--acc-d);}

/* pl. 01 — poster & stationery */
.mock--brand{font-size:clamp(8px,.95vw,15px);}
.poster{
  position:absolute;left:10%;top:8%;
  width:56%;height:66%;
  background:var(--acc-a);color:var(--paper);
  padding:8% 7%;
  display:flex;flex-direction:column;justify-content:space-between;
  box-shadow:0 34px 54px -30px rgba(17,17,17,.5);
}
.poster-mark{
  font-size:3.2em;font-weight:300;
  letter-spacing:-.02em;line-height:.95;
}
.poster-foot{
  display:flex;justify-content:space-between;
  font-size:.72em;letter-spacing:.16em;text-transform:uppercase;
  opacity:.85;
}
.poster-foot em{font-style:normal;}
.card{
  position:absolute;
  width:46%;aspect-ratio:17/10;
  padding:5% 6%;
  display:flex;flex-direction:column;justify-content:space-between;
  box-shadow:0 20px 34px -20px rgba(17,17,17,.45);
}
.card span{font-weight:500;font-size:1.05em;letter-spacing:-.02em;}
.card em{font-style:normal;font-size:.68em;letter-spacing:.14em;text-transform:uppercase;opacity:.72;}
.card--ink{
  background:var(--ink);color:var(--paper);
  right:14%;bottom:17%;
  transform:rotate(-3deg);
}
/* garment hangtag — punched hole, slight throw */
.hangtag{
  position:absolute;
  right:5%;bottom:6%;
  width:21%;aspect-ratio:10/16;
  background:var(--paper);border:1px solid var(--hair);
  padding:14% 5% 6%;
  display:flex;flex-direction:column;justify-content:space-between;
  transform:rotate(8deg);
  box-shadow:0 16px 26px -16px rgba(17,17,17,.4);
}
.hangtag::before{
  content:"";position:absolute;
  top:6%;left:50%;transform:translateX(-50%);
  width:.55em;height:.55em;border-radius:50%;
  background:var(--plate);
  box-shadow:inset 0 0 0 1px var(--hair);
}
.hangtag span{font-weight:500;font-size:.78em;letter-spacing:.06em;text-align:center;}
.hangtag em{font-style:normal;font-size:.6em;letter-spacing:.12em;text-transform:uppercase;opacity:.6;text-align:center;}
.chips{position:absolute;left:10%;bottom:8%;display:flex;gap:.6em;}
.chips i{width:2em;height:2em;}
.ch-a{background:var(--acc-a);}
.ch-ink{background:var(--ink);}
.ch-paper{background:var(--paper);border:1px solid var(--hair);}

/* pl. 02 — product interface */
.mock--app{
  display:flex;
  font-size:clamp(8px,.72vw,11.5px);
  letter-spacing:.01em;
  background:var(--paper);
}
.app-side{
  flex:0 0 21%;
  border-right:1px solid var(--hair);
  padding:4% 3.4%;
  display:flex;flex-direction:column;gap:1.25em;
  color:var(--muted);
}
.app-dot{width:1em;height:1em;background:var(--acc-c);margin-bottom:1.6em;}
.app-side .on{color:var(--ink);font-weight:500;box-shadow:inset 2px 0 0 var(--acc-c);padding-left:1em;margin-left:-1em;}
.app-main{flex:1;min-width:0;padding:3% 3.6% 2.6%;display:flex;flex-direction:column;}
.app-top{
  display:flex;align-items:center;gap:1.4em;
  padding-bottom:1.5em;border-bottom:1px solid var(--hair);
}
.app-title{font-weight:600;font-size:1.3em;letter-spacing:-.02em;}
.app-search{
  margin-left:auto;
  border:1px solid var(--hair);
  padding:.5em 2.2em .5em 1em;
  color:var(--muted);
}
.app-btn{
  background:var(--acc-c);color:#FDFDFB;
  padding:.6em 1.3em;font-weight:500;
}
.unit{font-style:normal;font-size:.5em;color:var(--muted);margin-left:.15em;letter-spacing:.08em;}
.app-stats{display:flex;gap:3.4em;padding:1.5em 0 1.2em;}
.app-stats b{display:block;font-size:2em;font-weight:300;letter-spacing:-.03em;line-height:1.1;}
.app-stats em{font-style:normal;color:var(--muted);font-size:.72em;letter-spacing:.14em;text-transform:uppercase;}
.ui-row{
  display:grid;grid-template-columns:1fr 1.3fr 1.5fr .8fr;
  gap:8px;
  padding:.9em 0;
  border-bottom:1px solid var(--hair);
}
.ui-row span:last-child{text-align:right;}
.ui-head{color:var(--muted);text-transform:uppercase;letter-spacing:.14em;font-size:.78em;}
.ui-sel{background:rgba(30,92,58,.06);box-shadow:0 0 0 1px rgba(30,92,58,.09);}
.st{display:inline-block;width:.55em;height:.55em;margin-right:.7em;vertical-align:.05em;}
.st--ok{background:#1E7A46;}
.st--rev{background:#C08415;}
.st--p{background:var(--hair);}
.ui-foot{
  display:flex;justify-content:space-between;
  padding-top:1em;margin-top:auto;
  color:var(--muted);text-transform:uppercase;letter-spacing:.14em;font-size:.78em;
}

/* pl. 03 — marketing site in a browser window */
.mock--web{
  display:flex;flex-direction:column;
  font-size:clamp(8px,.8vw,12px);
}
.web-chrome{
  display:flex;align-items:center;gap:.5em;
  padding:1em 1.3em;
  border-bottom:1px solid var(--hair);
}
.web-chrome i{width:.72em;height:.72em;border-radius:50%;background:var(--hair);}
.web-url{
  flex:1;margin-left:1em;
  text-align:center;
  background:rgba(17,17,17,.045);
  padding:.4em 1em;
  color:var(--muted);
  font-size:.85em;letter-spacing:.08em;
}
.web-page{
  flex:1;min-height:0;
  background:var(--paper);
  padding:5.5% 6.5%;
  display:flex;flex-direction:column;gap:1.7em;
}
.web-nav{display:flex;align-items:center;gap:1.8em;color:var(--muted);font-size:.9em;}
.web-logo{color:var(--ink);font-weight:600;letter-spacing:-.01em;margin-right:auto;}
.web-cart{
  color:var(--ink);
  border:1px solid var(--hair);
  padding:.35em .9em;
  position:relative;
}
.web-cart::before{
  content:"";display:inline-block;
  width:.5em;height:.5em;margin-right:.6em;
  background:var(--acc-b);
}
.web-h{
  font-size:2.5em;font-weight:250;
  line-height:1.02;letter-spacing:-.035em;
  color:var(--ink);
}
/* product grid — the tints keep the shop quiet, ochre marks the one live item */
.shop{flex:1;display:grid;grid-template-columns:repeat(3,1fr);gap:1.6em;align-content:end;}
.prod{display:flex;flex-direction:column;gap:.7em;min-width:0;}
.prod > i{aspect-ratio:4/5;display:block;}
.prod .p1{background:rgba(154,97,6,.20);}
.prod .p2{background:rgba(17,17,17,.08);}
.prod .p3{background:rgba(17,17,17,.16);}
.prod > span{display:flex;justify-content:space-between;gap:.6em;font-size:.85em;}
.prod b{font-weight:500;}
.prod em{font-style:normal;color:var(--muted);}

/* pl. 04 — the member app. Dark and gold — the one plate allowed to leave
   the paper world, because the product actually lives there. The rounded
   corners depict hardware, same licence as the shadows. */
.mock--phone{display:grid;place-items:center;font-size:clamp(8px,.78vw,12.5px);}
.phone{
  width:72%;aspect-ratio:10/20;
  background:#0B0B0C;
  border-radius:2.2em;
  padding:2em 1.6em 1.6em;
  display:flex;flex-direction:column;
  box-shadow:0 34px 54px -30px rgba(17,17,17,.55);
}
.ph-status{display:flex;justify-content:space-between;color:rgba(246,244,240,.55);font-size:.72em;letter-spacing:.08em;}
.ph-brand{margin-top:2em;color:var(--acc-d);font-size:.68em;letter-spacing:.32em;text-transform:uppercase;}
.ph-h{margin-top:.4em;color:#F6F4F0;font-size:1.6em;font-weight:300;letter-spacing:-.02em;}
.ph-card{
  margin-top:1.4em;
  background:#151514;border:1px solid #26261F;
  padding:1.2em 1.2em 1.1em;
  display:flex;flex-direction:column;gap:.45em;
}
.ph-card b{color:#F6F4F0;font-weight:500;font-size:.92em;}
.ph-card em{font-style:normal;color:#8C8B84;font-size:.78em;}
.ph-tag{color:var(--acc-d);font-size:.62em;letter-spacing:.22em;text-transform:uppercase;margin-top:.3em;}
.ph-tag--dim{color:#8C8B84;}
.ph-cta{
  margin-top:auto;
  background:var(--acc-d);color:#0B0B0C;
  text-align:center;padding:1em;
  font-weight:500;font-size:.9em;
}


/* ═══ § 02 · SERVICES ═══════════════════════════════════════════════ */
.menu li{
  display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gut);
  align-items:baseline;
  padding-block:clamp(22px,4vh,46px);
  border-bottom:1px solid var(--hair);
}
.menu li:first-child{border-top:1px solid var(--hair);}
.menu .idx{grid-column:1 / 2;}
.menu h3{
  grid-column:2 / 7;
  font-size:clamp(22px,2.9vw,44px);
  font-weight:250;
  letter-spacing:-.035em;
  line-height:1.04;
}
.menu .incl{
  grid-column:7 / 11;
  color:var(--muted);
  font-size:clamp(11.5px,.84vw,13px);
  line-height:1.55;
  align-self:start;
  padding-top:.42em;
}
.menu .fee{
  grid-column:11 / -1;
  text-align:right;
  font-size:clamp(19px,2.1vw,32px);
  font-weight:300;
  letter-spacing:-.035em;
}
.menu .fee i{font-style:normal;font-size:.5em;color:var(--muted);letter-spacing:0;}


/* ═══ § 03 · OFFICE ═════════════════════════════════════════════════ */
/* the closing sets on the same axis as the chapter titles — column 3 */
.closing{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gut);}
.closing > *{grid-column:1 / -1;}

.statement{
  grid-column:3 / 12;
  font-size:clamp(23px,3.2vw,48px);
  font-weight:250;
  line-height:1.2;
  letter-spacing:-.038em;
}
.statement .ln{display:block;}
.statement-note{
  grid-column:3 / 8;
  margin-top:clamp(26px,4.4vh,54px);
  color:var(--muted);
  line-height:1.6;
}

.bigcta{
  display:block;
  margin-top:clamp(64px,12vh,170px);
  font-size:clamp(40px,10.4vw,186px);
  font-weight:250;
  line-height:.86;
  letter-spacing:-.05em;
  margin-left:-.04em;
}
.bigcta i{
  font-style:normal;display:inline-block;
  margin-left:.12em;
  transition:transform .26s var(--ease);
}
.bigcta:hover i{transform:translateX(.1em);}

.close-meta{
  margin-top:clamp(34px,5.5vh,68px);
  padding-top:14px;
  border-top:1px solid var(--hair);
  display:flex;flex-wrap:wrap;gap:8px clamp(20px,3.4vw,52px);
  color:var(--muted);
}
.close-meta a{color:var(--ink);}


/* ═══ COLOPHON ══════════════════════════════════════════════════════ */
.colophon{
  display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gut);
  align-items:baseline;
  padding:clamp(16px,1.8vw,24px) var(--m);
  border-top:1px solid var(--hair);
  color:var(--muted);
}
.c-label{grid-column:1 / 3;}
.c-mark{grid-column:3 / 5;color:var(--ink);letter-spacing:-.03em;
  text-transform:none;font-size:clamp(12px,.95vw,14px);font-weight:500;}
.colophon > span:nth-child(3){grid-column:5 / 7;}
.colophon > span:nth-child(4){grid-column:7 / 10;}
.c-social{grid-column:10 / 12;display:flex;gap:14px;}
.c-year{grid-column:12 / -1;text-align:right;}
.colophon a:hover{color:var(--ink);}


/* ═══ MOTION ════════════════════════════════════════════════════════
   Transform + opacity only. The cover runs on load with no JS at all;
   everything below waits for one IntersectionObserver.               */
.ln{display:inline-block;overflow:hidden;vertical-align:top;}
.ln > span{display:inline-block;will-change:transform;}
.fit{display:inline-block;white-space:nowrap;}

.cover .ln > span{animation:rise 1s var(--ease) both;}
.cover-note .ln:nth-child(1) > span{animation-delay:.05s}
.cover-note .ln:nth-child(2) > span{animation-delay:.10s}
.cover-note .ln:nth-child(3) > span{animation-delay:.15s}
.mark .ln > span{animation-delay:.12s}
.lede .ln:nth-child(1) > span{animation-delay:.34s}
.lede .ln:nth-child(2) > span{animation-delay:.40s}
.lede .ln:nth-child(3) > span{animation-delay:.46s}
.cover-meta,.cover-cta{animation:fade .9s var(--ease) .5s both;}

@keyframes rise{from{transform:translateY(105%)}to{transform:translateY(0)}}
@keyframes fade{from{opacity:0}to{opacity:1}}

[data-reveal]{opacity:0;transform:translateY(14px);}
[data-reveal].in{
  opacity:1;transform:none;
  transition:opacity .6s var(--ease),transform .7s var(--ease);
}
[data-reveal] .ln > span{transform:translateY(105%);}
[data-reveal].in .ln > span{transition:transform .8s var(--ease);transform:translateY(0);}
[data-reveal].in .ln:nth-child(2) > span{transition-delay:.06s}
[data-reveal].in .ln:nth-child(3) > span{transition-delay:.12s}


/* ═══ PHONE ═════════════════════════════════════════════════════════
   Still the publication: oversized type, marginalia, asymmetric plates. */
@media (max-width:820px){
  .cover,.cover-foot,.chapter-head,.entry,.menu li,.colophon{
    grid-template-columns:repeat(4,1fr);
  }

  .nav a:nth-child(1),.nav a:nth-child(2){display:none;}

  .cover-note{grid-column:1 / -1;margin-bottom:clamp(30px,7vh,60px);}
  .lede{grid-column:1 / -1;font-size:clamp(16px,4.4vw,21px);}
  .cover-meta{grid-column:1 / -1;text-align:left;margin-top:26px;
    flex-direction:row;justify-content:space-between;}
  .cover-cta{grid-column:1 / -1;}

  .sec{grid-column:1 / 3;}
  .chapter-title{grid-column:3 / -1;text-align:right;}
  .sec-r{display:none;}

  /* these must match the desktop .e--x specificity or the placements
     above win and the meta lands on top of the name */
  .e--a,.e--c,.e--d{grid-template-rows:auto;}
  .entry .idx{grid-column:1 / -1;grid-row:1;padding-top:0;}
  .e--a .name,.e--b .name,.e--c .name,.e--d .name{
    grid-column:1 / -1;grid-row:2;
    font-size:clamp(44px,15.5vw,86px);
  }
  .e--a .entry-meta,.e--b .entry-meta,.e--c .entry-meta,.e--d .entry-meta{
    grid-column:1 / -1;grid-row:3;
    flex-direction:row;justify-content:space-between;
    text-align:left;padding-top:12px;}
  /* keep the asymmetry on a phone rather than stacking four equal blocks */
  .e--a .plate,.e--b .plate,.e--c .plate,.e--d .plate{grid-column:1 / -1;grid-row:4;margin-top:24px;}
  .e--a .plate{width:78%;margin-left:auto;}
  .e--b .plate{width:100%;}
  .e--c .plate{width:100%;}
  .e--d .plate{width:60%;margin-inline:auto;}
  .mock--brand{font-size:clamp(7px,2.6vw,11px);}
  .mock--app{font-size:clamp(6.5px,2vw,9px);}
  .mock--web{font-size:clamp(7px,2.4vw,10px);}
  .mock--phone{font-size:clamp(7px,2.4vw,10px);}

  .menu .idx{grid-column:1 / -1;}
  .menu h3{grid-column:1 / 4;font-size:clamp(21px,6.2vw,30px);margin-top:6px;}
  .menu .incl{grid-column:1 / -1;padding-top:10px;}
  .menu .fee{grid-column:1 / -1;text-align:left;margin-top:8px;
    font-size:clamp(18px,5.4vw,26px);}

  .closing{grid-template-columns:repeat(4,1fr);}
  .statement{grid-column:1 / -1;font-size:clamp(22px,6.6vw,34px);}
  .statement-note{grid-column:1 / -1;}
  .bigcta{font-size:clamp(38px,13.5vw,72px);}

  .colophon{row-gap:14px;}
  .c-label{grid-column:1 / -1;}
  .c-mark{grid-column:1 / 3;}
  .colophon > span:nth-child(3){grid-column:3 / -1;text-align:right;}
  .colophon > span:nth-child(4){grid-column:1 / 3;}
  .c-social{grid-column:3 / -1;justify-content:flex-end;}
  .c-year{grid-column:1 / -1;}
}


@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-delay:0ms!important;
    transition-duration:.01ms!important;transition-delay:0ms!important;
  }
  [data-reveal]{opacity:1!important;transform:none!important;}
  .ln > span{transform:none!important;}
  .cover-meta,.cover-cta{opacity:1!important;}
}