/* ============================================================
   CARDINAL GLOBAL, cardinalglobal.net
   Type:  Instrument Serif (display) · Newsreader (prose)
          Archivo (UI) · IBM Plex Mono (index)
   ============================================================ */

:root{
  color-scheme: light;

  --ground:#F2F1ED;
  --paper:#FFFFFF;
  --alt:#E8E7E1;
  --ink:#14171A;
  --ink-2:#3A4147;
  --muted:#666D74;

  --night:#101316;
  --night-2:#181C21;
  --night-3:#232930;
  --on-night:#F0EFEA;
  --on-night-2:#A6ADB4;
  --on-night-3:#7E858C;

  --rule:#D6D4CD;
  --rule-2:#E6E4DE;
  --rule-night:#2A3036;

  --cardinal:#A62B36;
  --cardinal-2:#7E1F28;
  --rose:#E4A6AC;

  --display:"Instrument Serif","Iowan Old Style",Georgia,serif;
  --prose:"Newsreader","Iowan Old Style",Georgia,serif;
  --ui:"Archivo","Helvetica Neue",Arial,sans-serif;
  --mono:"IBM Plex Mono",Menlo,Consolas,monospace;

  --gut:2rem;
  --max:78rem;
  --measure:60ch;
  --hdr:74px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--hdr) + 1rem); }
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:var(--ui); font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg{ max-width:100%; display:block; }
a{ color:var(--cardinal); text-underline-offset:0.2em; text-decoration-thickness:1px; }
a:hover{ color:var(--cardinal-2); }
:focus-visible{ outline:2px solid var(--cardinal); outline-offset:3px; }
.skip{ position:absolute; left:-9999px; }
.skip:focus{ left:1rem; top:1rem; z-index:200; background:var(--paper); padding:0.7rem 1.1rem; }

.wrap{ width:100%; max-width:var(--max); margin:0 auto; padding:0 var(--gut); }

/* ============ type scale ============ */
.display{
  font-family:var(--display); font-weight:400;
  font-size:clamp(2.45rem,5.95vw,5.3rem); line-height:1.0;
  letter-spacing:-0.021em; margin:0;
}
.display-s{
  font-family:var(--display); font-weight:400;
  font-size:clamp(2rem,4.6vw,3.5rem); line-height:1.05;
  letter-spacing:-0.015em; margin:0;
}
h2{
  font-family:var(--prose); font-weight:400;
  font-size:clamp(1.65rem,3.1vw,2.5rem); line-height:1.14;
  letter-spacing:-0.017em; margin:0 0 1.2rem; max-width:22ch;
}
h3{ font-family:var(--ui); font-weight:600; font-size:1.02rem; letter-spacing:-0.006em; margin:0 0 0.5rem; }
h4{ font-family:var(--ui); font-weight:600; font-size:0.93rem; letter-spacing:-0.004em; margin:0 0 0.35rem; }
p{ margin:0 0 1.1rem; max-width:var(--measure); }
p:last-child{ margin-bottom:0; }
.prose p{ font-family:var(--prose); font-size:1.08rem; line-height:1.66; color:var(--ink-2); }
.prose strong{ color:var(--ink); font-weight:600; }
section.night .prose strong,.cta .prose strong{ color:#fff; }
.lede{ font-family:var(--prose); font-size:clamp(1.15rem,2.2vw,1.42rem); line-height:1.5; color:var(--ink-2); max-width:46ch; }
.small{ font-size:0.9rem; color:var(--muted); }
strong{ font-weight:600; }

.idx{
  font-family:var(--mono); font-size:0.66rem; font-weight:400;
  letter-spacing:0.2em; text-transform:uppercase; color:var(--cardinal);
  margin:0 0 1rem; display:flex; align-items:center; gap:0.9rem;
}
.idx::after{ content:""; height:1px; flex:1; background:var(--rule); max-width:5rem; }
.on-night .idx{ color:var(--rose); }
.on-night .idx::after{ background:var(--rule-night); }

/* ============ masthead ============ */
.masthead{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,0.94); backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid var(--rule);
}
.masthead .bar{ display:flex; align-items:center; justify-content:space-between; gap:1.25rem; height:var(--hdr); }

.lockup{ display:flex; align-items:center; gap:0.78rem; text-decoration:none; min-width:0; }
.lockup .mk{ width:25px; height:25px; flex:none; }
.lockup .name{
  display:block; font-family:var(--ui); font-weight:600; font-size:0.96rem;
  letter-spacing:0.235em; text-transform:uppercase; color:var(--cardinal); line-height:1;
}
.lockup .desc{
  display:block; font-family:var(--ui); font-weight:500; font-size:0.475rem;
  letter-spacing:0.155em; text-transform:uppercase; color:var(--muted);
  margin-top:0.42rem; line-height:1; white-space:nowrap;
}

.navwrap{ display:flex; align-items:center; gap:2.4rem; }
.actions{ display:flex; align-items:center; gap:0.8rem; flex:none; }
nav.primary ul{ list-style:none; display:flex; gap:2.1rem; margin:0; padding:0; }
nav.primary a{
  font-family:var(--prose); font-size:1rem; font-weight:400; letter-spacing:0;
  color:var(--ink-2); text-decoration:none;
  padding:0.35rem 0; display:inline-block; border-bottom:1px solid transparent;
}
nav.primary a:hover{ color:var(--ink); border-bottom-color:var(--rule); }
nav.primary a[aria-current="page"]{ color:var(--cardinal); border-bottom-color:var(--cardinal); }

/* mobile menu (no javascript) */
.mtoggle{ position:absolute; opacity:0; pointer-events:none; }
.burger{ display:none; width:42px; height:42px; border:1px solid var(--rule); background:var(--paper); cursor:pointer; align-items:center; justify-content:center; flex-direction:column; gap:5px; flex:none; }
.burger i{ display:block; width:17px; height:1.5px; background:var(--ink); transition:transform .2s ease, opacity .2s ease; }
.mtoggle:checked ~ .bar .burger i:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.mtoggle:checked ~ .bar .burger i:nth-child(2){ opacity:0; }
.mtoggle:checked ~ .bar .burger i:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

/* ============ buttons ============ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:0.65rem;
  font-family:var(--ui); font-size:0.94rem; font-weight:500;
  letter-spacing:0.005em; text-decoration:none;
  padding:0.92rem 1.7rem; border:1px solid var(--cardinal);
  background:var(--cardinal); color:#fff; cursor:pointer;
  transition:background .16s ease, border-color .16s ease, color .16s ease;
}
.btn:hover{ background:var(--cardinal-2); border-color:var(--cardinal-2); color:#fff; }
.btn .ar{ font-size:0.9em; line-height:1; transform:translateY(-0.5px); }
.btn.sm{ padding:0.66rem 1.35rem; font-size:0.9rem; }
.btn.ghost{ background:transparent; color:var(--cardinal); }
.btn.ghost:hover{ background:var(--cardinal); color:#fff; }
.btn.light{ background:transparent; border-color:rgba(240,239,234,0.4); color:var(--on-night); }
.btn.light:hover{ background:var(--on-night); border-color:var(--on-night); color:var(--night); }
.btn.solid-light{ background:var(--cardinal); border-color:var(--cardinal); color:#fff; }
.btnrow{ display:flex; gap:0.85rem; flex-wrap:wrap; align-items:center; }

/* ============ hero ============ */
.hero{ position:relative; background:var(--night); color:var(--on-night); overflow:hidden; }
/* hero is a two column grid: the composition is balanced by structure, not by guesswork */
.herogrid{ position:static; }
.hero .art{
  position:absolute; pointer-events:none; user-select:none; z-index:0;
  right:-4vw; top:50%; transform:translateY(-50%);
  width:56vw; aspect-ratio:1; opacity:0.97;
}
.hero .art img{ width:100%; height:100%; }
@media (min-width:1560px){ .hero .art{ width:52vw; right:-2vw; } }
@media (min-width:1800px){ .hero .art{ width:48vw; right:0vw; } }

.hero::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(100deg, var(--night) 0%, rgba(16,19,22,0.9) 30%, rgba(16,19,22,0.12) 46%, rgba(16,19,22,0) 60%);
  pointer-events:none;
}
.hero .inner{ position:relative; z-index:2; padding:clamp(2rem,3.1vw,3.25rem) 0; max-width:45rem; }
.hero .display{ color:#fff; max-width:16ch; }
.hero .kick{
  font-family:var(--mono); font-size:0.68rem; letter-spacing:0.22em; text-transform:uppercase;
  color:var(--rose); margin:0 0 1.3rem; display:flex; align-items:center; gap:0.9rem;
}
.hero .kick::after{ content:""; height:1px; width:3.5rem; background:rgba(228,166,172,0.4); }
.hero .stand{
  font-family:var(--prose); font-size:clamp(1.04rem,1.5vw,1.16rem); line-height:1.55;
  color:var(--on-night-2); max-width:60ch; margin:1.5rem 0 0;
}
.hero .stand.lead{ font-size:clamp(1.12rem,1.7vw,1.34rem); line-height:1.42; color:#fff; margin-top:1.3rem; max-width:54ch; }
.hero .stand + .stand{ margin-top:0.8rem; }
.hero .stand:last-of-type{ margin-bottom:1.8rem; }
.hero .stand b{ color:#fff; font-weight:500; }

/* hero index rail */
.rail{
  position:absolute; z-index:3; right:calc(var(--gut) + 0.5rem); bottom:8.75rem;
  display:flex; flex-direction:column; gap:0.45rem; align-items:flex-start;
  padding-left:1.05rem; pointer-events:none;
}
.rail::before{ content:""; position:absolute; left:0; top:0.34rem; width:0.62rem; height:1px; background:var(--cardinal); }
.rail span{
  font-family:var(--mono); font-size:0.6rem; letter-spacing:0.22em; text-transform:uppercase;
  color:#BAC1C8; line-height:1; text-shadow:0 0 10px rgba(8,10,13,0.95), 0 0 3px rgba(8,10,13,0.9);
}

/* hero footer strip */
.heroband{ position:relative; z-index:3; background:var(--night); border-top:1px solid var(--rule-night); }
.heroband ul{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); }
.heroband li{ padding:1.45rem 1.3rem 1.45rem 0; border-right:1px solid var(--rule-night); }
.heroband li:last-child{ border-right:0; }
.heroband li + li{ padding-left:1.3rem; }
.heroband .n{ font-family:var(--mono); font-size:0.62rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--rose); display:block; margin-bottom:0.5rem; }
.heroband .t{ font-family:var(--prose); font-size:0.96rem; line-height:1.4; color:var(--on-night-2); }

/* inner page header */
.pagehead{ position:relative; background:var(--night); color:var(--on-night); overflow:hidden; }
@media (min-width:721px){ .pagehead{ min-height:26rem; display:flex; align-items:center; } .pagehead > .wrap{ width:100%; } }
.pagehead .art{ position:absolute; right:2%; top:50%; transform:translateY(-50%); width:min(34vw,400px); aspect-ratio:1; opacity:0.88; pointer-events:none; }
.pagehead::after{ content:""; position:absolute; inset:0; background:linear-gradient(100deg,var(--night) 0%,var(--night) 34%,rgba(16,19,22,0.84) 56%,rgba(16,19,22,0.2) 82%); }
.pagehead .inner{ position:relative; z-index:2; padding:clamp(3.5rem,8vw,6rem) 0 clamp(2.6rem,5vw,4rem); max-width:40rem; }
.pagehead .display-s{ color:#fff; }
.pagehead .kick{ font-family:var(--mono); font-size:0.66rem; letter-spacing:0.22em; text-transform:uppercase; color:var(--rose); margin:0 0 1.3rem; }
.pagehead p{ font-family:var(--prose); font-size:clamp(1.02rem,1.8vw,1.2rem); line-height:1.58; color:var(--on-night-2); max-width:48ch; margin:1.4rem 0 0; }

/* ============ sections ============ */
section{ padding:clamp(3.5rem,7vw,6rem) 0; }
section.paper{ background:var(--paper); }
section.night{ background:var(--night); color:var(--on-night); }
section.night h2,section.night h3,section.night h4,section.night .display-s{ color:#fff; }
section.night p,section.night .prose p{ color:var(--on-night-2); }
section.night .lede{ color:var(--on-night-2); }
section + section:not(.night):not(.paper){ border-top:1px solid var(--rule); }
section.paper + section:not(.night){ border-top:1px solid var(--rule); }

/* asymmetric editorial grid */
.grid{ display:grid; grid-template-columns:minmax(0,4fr) minmax(0,7fr); gap:clamp(2rem,6vw,5.5rem); align-items:start; }
.grid > .aside{ position:sticky; top:calc(var(--hdr) + 2.5rem); }
.grid.flip{ grid-template-columns:minmax(0,7fr) minmax(0,4fr); }
.grid.even{ grid-template-columns:repeat(2,minmax(0,1fr)); }

/* numbered products */
.products{ border-top:1px solid var(--rule); max-width:62rem; }
section.night .products{ border-color:var(--rule-night); }
.products > article{
  display:grid; grid-template-columns:minmax(0,3.5rem) minmax(0,15rem) minmax(0,1fr);
  gap:clamp(1rem,3vw,2.5rem); padding:2.2rem 0; border-bottom:1px solid var(--rule);
  align-items:start;
}
section.night .products > article{ border-color:var(--rule-night); }
.products .n{ font-family:var(--mono); font-size:0.72rem; letter-spacing:0.14em; color:var(--cardinal); padding-top:0.5rem; }
section.night .products .n{ color:var(--rose); }
.products h3{ font-family:var(--prose); font-weight:400; font-size:1.5rem; letter-spacing:-0.012em; line-height:1.18; margin:0; }
.products p{ font-size:1rem; color:var(--ink-2); margin:0; max-width:none; }
section.night .products p{ color:var(--on-night-2); }

/* statement */
.statement{ padding:clamp(3.5rem,8vw,6.5rem) 0; }
.statement q{ quotes:none; }
.statement .big{
  font-family:var(--display); font-weight:400;
  font-size:clamp(1.85rem,4.4vw,3.2rem); line-height:1.14; letter-spacing:-0.017em;
  max-width:20ch; margin:0; color:inherit;
}
.statement .attrib{ font-family:var(--mono); font-size:0.66rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--muted); margin:1.8rem 0 0; }
section.night .statement .attrib{ color:var(--on-night-3); }

/* rule list */
.stack{ list-style:none; margin:0; padding:0; border-top:1px solid var(--rule); }
section.night .stack{ border-color:var(--rule-night); }
.stack > li{ display:grid; grid-template-columns:minmax(0,9rem) minmax(0,1fr); gap:clamp(0.8rem,3vw,2rem); padding:1.3rem 0; border-bottom:1px solid var(--rule); }
section.night .stack > li{ border-color:var(--rule-night); }
.stack .lbl{ font-family:var(--mono); font-size:0.65rem; letter-spacing:0.15em; text-transform:uppercase; color:var(--cardinal); padding-top:0.25rem; }
section.night .stack .lbl{ color:var(--rose); }
.stack p{ margin:0; font-size:0.99rem; color:var(--ink-2); }
section.night .stack p{ color:var(--on-night-2); }

/* dash list */
ul.dash{ list-style:none; padding:0; margin:0 0 1.2rem; max-width:var(--measure); }
ul.dash li{ position:relative; padding:0.45rem 0 0.45rem 1.5rem; font-size:1rem; color:var(--ink-2); }
ul.dash li::before{ content:""; position:absolute; left:0; top:1.1em; width:0.7rem; height:1px; background:var(--cardinal); }
section.night ul.dash li{ color:var(--on-night-2); }
section.night ul.dash li::before{ background:var(--rose); }
ul.dash strong{ color:var(--ink); }
section.night ul.dash strong{ color:#fff; }

/* steps */
.steps{ counter-reset:s; list-style:none; margin:0; padding:0; border-top:1px solid var(--rule); }
section.night .steps{ border-color:var(--rule-night); }
.steps > li{ counter-increment:s; display:grid; grid-template-columns:3.5rem minmax(0,1fr); gap:clamp(0.8rem,2vw,1.5rem); padding:1.4rem 0; border-bottom:1px solid var(--rule); }
section.night .steps > li{ border-color:var(--rule-night); }
.steps > li::before{ content:counter(s,decimal-leading-zero); font-family:var(--mono); font-size:0.7rem; letter-spacing:0.12em; color:var(--cardinal); padding-top:0.3rem; }
section.night .steps > li::before{ color:var(--rose); }
.steps p{ margin:0; font-size:0.99rem; color:var(--ink-2); }
section.night .steps p{ color:var(--on-night-2); }

/* two-up blocks */
.blocks{ display:grid; grid-template-columns:repeat(auto-fit,minmax(13rem,1fr)); gap:0; border-top:1px solid var(--rule); }
section.night .blocks{ border-color:var(--rule-night); }
.blocks > div{ padding:1.6rem 1.6rem 1.8rem 0; border-bottom:1px solid var(--rule); border-right:1px solid var(--rule); }
.blocks > div + div{ padding-left:1.6rem; }
.blocks.two > div:nth-child(2n+1){ padding-left:0; }
.blocks > div:last-child{ border-right:0; }
section.night .blocks > div{ border-color:var(--rule-night); }
.blocks p{ font-size:0.95rem; color:var(--ink-2); margin:0; }
section.night .blocks p{ color:var(--on-night-2); }

/* boxed refusal */
.refuse{ border:1px solid var(--rule); border-left:2px solid var(--cardinal); background:var(--paper); padding:clamp(1.5rem,3.5vw,2.4rem); max-width:var(--measure); }
section.night .refuse{ background:var(--night-2); border-color:var(--rule-night); border-left-color:var(--cardinal); }
.refuse p{ font-family:var(--prose); font-size:1.04rem; }

/* ============ call to action band ============ */
.cta{ position:relative; background:var(--night); color:var(--on-night); overflow:hidden; }
.cta .art{ position:absolute; right:-10%; top:50%; transform:translateY(-50%); width:min(50vw,540px); aspect-ratio:1; opacity:0.9; pointer-events:none; }
.cta::after{ content:""; position:absolute; inset:0; background:linear-gradient(100deg,var(--night) 0%,var(--night) 34%,rgba(16,19,22,0.88) 54%,rgba(16,19,22,0.2) 82%); }
.cta .wrap{ position:relative; z-index:2; }
.cta .inner{ padding:clamp(3.5rem,7vw,6rem) 0; max-width:42rem; }
.cta h2{ color:#fff; font-family:var(--display); font-size:clamp(1.8rem,3.6vw,2.75rem); line-height:1.1; letter-spacing:-0.015em; margin:0; max-width:17ch; }
.cta p{ color:var(--on-night-2); font-family:var(--prose); margin:1.15rem 0 2.1rem; max-width:46ch; }

/* ============ contact ============ */
.contactgrid{ display:grid; grid-template-columns:minmax(0,4fr) minmax(0,6fr); gap:clamp(2rem,6vw,5rem); align-items:start; }
.detail{ display:grid; grid-template-columns:minmax(0,7.5rem) minmax(0,1fr); gap:1rem; padding:0.95rem 0; border-bottom:1px solid var(--rule); }
.detail:first-of-type{ border-top:1px solid var(--rule); }
.detail b{ font-family:var(--mono); font-size:0.63rem; font-weight:400; letter-spacing:0.14em; text-transform:uppercase; color:var(--muted); padding-top:0.28rem; }
.detail span,.detail a{ font-size:1rem; }
.field{ margin:0 0 1.2rem; }
.field label{ display:block; font-family:var(--ui); font-size:0.7rem; font-weight:600; letter-spacing:0.13em; text-transform:uppercase; color:var(--muted); margin-bottom:0.45rem; }
.field input,.field select,.field textarea{
  width:100%; font-family:var(--ui); font-size:1rem; color:var(--ink);
  background:var(--paper); border:1px solid var(--rule); padding:0.8rem 0.9rem; border-radius:0; appearance:none;
}
.field select{ background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%); background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%; background-size:5px 5px,5px 5px; background-repeat:no-repeat; }
.field textarea{ min-height:9.5rem; resize:vertical; line-height:1.55; }
.field input:focus,.field select:focus,.field textarea:focus{ border-color:var(--cardinal); outline:none; }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.formnote{ font-size:0.87rem; color:var(--muted); max-width:48ch; margin-top:1.1rem; }
.notice{ border-left:2px solid var(--cardinal); background:var(--paper); padding:1rem 1.2rem; margin:0 0 1.6rem; font-size:0.97rem; }
.notice.bad{ border-left-color:#8A6D1F; }

/* ============ footer ============ */
footer.site{ background:var(--night); color:var(--on-night-2); padding:clamp(3rem,6vw,4.5rem) 0 2.2rem; font-size:0.92rem; border-top:1px solid var(--rule-night); }
footer.site .cols{ display:grid; grid-template-columns:minmax(0,2fr) repeat(2,minmax(0,1fr)); gap:2.5rem; padding-bottom:2.6rem; border-bottom:1px solid var(--rule-night); }
footer.site .lockup .name{ color:var(--rose); }
footer.site .lockup .desc{ color:var(--on-night-3); }
footer.site .blurb{ font-family:var(--prose); margin:1.4rem 0 0; max-width:32ch; color:var(--on-night-2); font-size:1rem; }
footer.site h5{ font-family:var(--mono); font-size:0.62rem; letter-spacing:0.17em; text-transform:uppercase; color:var(--on-night-3); margin:0 0 1rem; font-weight:400; }
footer.site ul{ list-style:none; margin:0; padding:0; }
footer.site li{ margin:0 0 0.2rem; }
footer.site a{ color:var(--on-night-2); text-decoration:none; display:inline-block; padding:0.3rem 0; }
footer.site a:hover{ color:#fff; }
footer.site .base{ display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; padding-top:1.6rem; font-family:var(--mono); font-size:0.63rem; letter-spacing:0.1em; color:var(--on-night-3); text-transform:uppercase; }

/* ============ responsive ============ */
@media (max-width:1080px){
  .rail{ display:none; }
  .hero .art{ width:72vw; right:-14vw; }
  .pagehead .art{ right:0%; width:min(36vw,330px); opacity:0.75; }
}
@media (max-width:900px){
  :root{ --gut:1.5rem; }
  .grid,.grid.flip,.grid.even,.contactgrid{ grid-template-columns:1fr; gap:1.8rem; }
  .grid > .aside{ position:static; }
  .products > article{ grid-template-columns:2.1rem minmax(0,1fr); gap:0.9rem 0.9rem; }
  .products > article > h3{ grid-column:2; }
  .products > article > p{ grid-column:2; margin-top:0.5rem; }
  .products .n{ grid-row:1; padding-top:0.35rem; }
  .blocks > div{ border-right:0; padding-right:0; }
}
@media (max-width:820px){
  .navwrap{ display:none; }
  .burger{ display:flex; }
  .masthead .bar{ height:64px; }
  :root{ --hdr:64px; }
  .mobilemenu{ display:block; max-height:0; overflow:hidden; transition:max-height .28s ease; border-top:0; background:var(--paper); }
  .mtoggle:checked ~ .mobilemenu{ max-height:26rem; border-top:1px solid var(--rule); }
  .mobilemenu ul{ list-style:none; margin:0; padding:0.6rem 0 1.2rem; }
  .mobilemenu li{ border-bottom:1px solid var(--rule-2); }
  .mobilemenu li:last-child{ border-bottom:0; }
  .mobilemenu a{ display:block; padding:0.95rem 0; font-family:var(--prose); font-size:1.1rem; color:var(--ink-2); text-decoration:none; }
  .mobilemenu a[aria-current="page"]{ color:var(--cardinal); }
  .mobilemenu .btn{ display:flex; width:100%; justify-content:center; margin-top:1.1rem;
    font-family:var(--ui); font-size:0.94rem; font-weight:500; color:#fff; }
  .mobilemenu .btn:hover{ color:#fff; }
}
@media (min-width:821px){ .mobilemenu{ display:none; } }

@media (max-width:720px){
  .hero .art{ left:52%; right:auto; top:15%; transform:translate(-50%,-50%); width:min(122vw,580px); opacity:0.9; }
  .hero::after{ background:linear-gradient(180deg,rgba(16,19,22,0.02) 0%,rgba(16,19,22,0.18) 14%,rgba(16,19,22,0.72) 28%,rgba(16,19,22,0.97) 40%,var(--night) 54%); }
  .hero .inner{ padding-top:clamp(8.5rem,45vw,13.5rem); }
  .hero .kick,.hero .display{ text-shadow:0 1px 18px rgba(8,10,13,0.9), 0 0 6px rgba(8,10,13,0.7); }
  .pagehead .kick,.pagehead .display-s{ text-shadow:0 1px 18px rgba(8,10,13,0.9), 0 0 6px rgba(8,10,13,0.7); }
  .pagehead .art{ right:auto; left:56%; top:16%; transform:translate(-50%,-50%); width:min(96vw,430px); opacity:0.8; }
  .pagehead::after{ background:linear-gradient(180deg,rgba(16,19,22,0.02) 0%,rgba(16,19,22,0.2) 14%,rgba(16,19,22,0.76) 30%,rgba(16,19,22,0.97) 44%,var(--night) 58%); }
  .cta .art{ right:-38%; top:auto; bottom:-18%; transform:none; opacity:0.4; width:min(88vw,400px); }
  .heroband ul{ grid-template-columns:1fr; }
  .heroband li{ border-right:0; border-bottom:1px solid var(--rule-night); padding:1.15rem 0; }
  .heroband li:last-child{ border-bottom:0; }
  .heroband li + li{ padding-left:0; }
  .stack > li{ grid-template-columns:1fr; gap:0.35rem; }
  .detail{ grid-template-columns:1fr; gap:0.2rem; }
  .detail b{ padding-top:0; }
  footer.site .cols{ grid-template-columns:1fr 1fr; }
  footer.site .cols > div:first-child{ grid-column:1 / -1; }
  .btnrow .btn{ flex:1 1 auto; }
}
@media (max-width:470px){
  .actions .btn{ padding:0.58rem 0.8rem; font-size:0.78rem; white-space:nowrap; }
  .actions .btn .ar{ display:none; }
  .actions{ gap:0.45rem; }
  .burger{ width:35px; height:35px; }
  .masthead .bar{ gap:0.45rem; }
  .lockup{ gap:0.5rem; }
  .lockup .mk{ width:19px; height:19px; }
  .lockup .name{ font-size:0.74rem; letter-spacing:0.15em; }
  .lockup .desc{ font-size:0.44rem; letter-spacing:0.07em; margin-top:0.34rem; }
}
@media (max-width:335px){ .actions .btn{ display:none; } }
@media (max-width:420px){
  :root{ --gut:1.2rem; }
  footer.site .cols{ grid-template-columns:1fr; }
  .btn{ padding:0.95rem 1.3rem; font-size:0.7rem; }
}
@media (prefers-reduced-motion:reduce){ *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; } }

/* ============ print ============ */
@media print{
  .masthead,footer.site,.btn,.cta,.hero .art,.pagehead .art{ display:none !important; }
  body{ background:#fff; font-size:11pt; }
  .hero,.pagehead,section.night{ background:#fff !important; color:#14171A !important; }
  .hero .display,.pagehead .display-s,section.night h2,section.night h3{ color:#14171A !important; }
  section.night p,.pagehead p,.hero .stand{ color:#3A4147 !important; }
  .hero::after,.pagehead::after{ display:none; }
}

/* two-up block grid */
.blocks.two{ grid-template-columns:repeat(2,minmax(0,1fr)); }
@media (max-width:560px){
  .blocks.two,.blocks{ grid-template-columns:1fr; }
  .hero .kick::after,.idx::after{ display:none; }
}

/* two-up blocks: no dangling right rule */
.blocks.two > div:nth-child(2n){ border-right:0; }
/* inner-page header needs room for the artwork on phones */
@media (max-width:720px){
  .pagehead .inner{ padding-top:clamp(7rem,37vw,11rem); }
}

/* hero band: two-up on tablets, stacked on phones */
@media (max-width:1000px) and (min-width:721px){
  .heroband ul{ grid-template-columns:repeat(2,1fr); }
  .heroband li:nth-child(2n){ border-right:0; }
  .heroband li:nth-child(-n+2){ border-bottom:1px solid var(--rule-night); }
  .heroband li:nth-child(odd){ padding-left:0; }
  .heroband li:nth-child(even){ padding-left:1.3rem; }
}