/* ===========================================================
   Matt Boudreau — stereo & Atmos
   Dark room, bone type, grease-pencil red.
   Atmos sections invert to light: the page shows both formats.
   =========================================================== */

:root{
  /* page default: the dark room */
  --paper:#131210;
  --card:#1E1B17;
  --card-2:#262219;
  --ink:#F7F4EE;
  --ink-soft:#DDD6CA;
  --rule:#36312A;
  --mark:#E75F3F;

  /* the inverted band */
  --inv-bg:#E9E5DD;
  --inv-card:#F4F1EB;
  --inv-ink:#15151A;
  --inv-soft:#55555E;
  --inv-rule:#CDC6BA;
  --inv-mark:#A8291A;

  --measure:62ch;
  --gut:clamp(20px,5vw,56px);
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;background:var(--paper);}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Newsreader',Georgia,'Times New Roman',serif;
  font-size:20px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

.wrap{max-width:1180px;margin:0 auto;padding:0 var(--gut);}
.wrap--narrow{max-width:820px;}

/* ---------- type ---------- */

h1,h2,h3,.display{
  font-family:'Anton','Arial Narrow','Helvetica Neue',Impact,sans-serif;
  font-weight:400;                 /* Anton ships one weight; 700+ fakes it */
  text-transform:uppercase;
  letter-spacing:.012em;
  line-height:.92;
  margin:0;
  font-variant-ligatures:none;
}
h1{font-size:clamp(40px,7.6vw,92px);}
h2{font-size:clamp(26px,4.2vw,46px);}
h3{font-size:clamp(20px,2.6vw,26px);line-height:.95;}

.eyebrow{
  font-family:'DM Mono',ui-monospace,Menlo,monospace;
  font-weight:500;font-size:14.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-soft);margin:0 0 14px;
}

p{margin:0 0 20px;max-width:var(--measure);}
.sub{color:var(--ink-soft);font-size:clamp(19px,2vw,22px);
  margin-top:18px;max-width:46ch;}

a{color:inherit;text-decoration-color:var(--rule);text-underline-offset:3px;}
a:hover{text-decoration-color:var(--mark);color:var(--mark);}
:focus-visible{outline:2px solid var(--mark);outline-offset:3px;}
.mono{font-family:'DM Mono',ui-monospace,Menlo,monospace;}

/* ---------- nav ---------- */

.nav{border-bottom:1px solid var(--rule);}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;
  gap:18px;flex-wrap:wrap;padding-top:18px;padding-bottom:18px;}
.nav .mark{font-family:'Anton','Arial Narrow',sans-serif;font-weight:400;
  text-transform:uppercase;font-size:21px;letter-spacing:.02em;
  text-decoration:none;white-space:nowrap;display:inline-flex;align-items:center;gap:12px;}
.nav .logo{width:60px;height:auto;display:block;border:1px solid var(--rule);filter:grayscale(1);}
.nav ul{list-style:none;display:flex;gap:clamp(12px,2.2vw,26px);
  margin:0;padding:0;align-items:baseline;flex-wrap:wrap;}
.nav ul a{font-family:'DM Mono',monospace;font-size:15px;letter-spacing:.12em;
  text-transform:uppercase;text-decoration:none;color:var(--ink-soft);}
.nav ul a:hover{color:var(--mark);}
.nav ul a[aria-current="page"]{color:var(--ink);box-shadow:inset 0 -2px 0 var(--mark);}
.nav .navcta{color:var(--paper);background:var(--ink);padding:8px 15px;letter-spacing:.12em;}
.nav .navcta:hover{background:var(--mark);color:#120F0C;}

/* ---------- hero ---------- */

.hero{padding:clamp(44px,8vw,96px) 0 clamp(32px,5vw,56px);}
.hero .rule{height:3px;background:var(--ink);margin:30px 0 0;max-width:96px;}

.hero--name{padding:clamp(34px,5vw,62px) 0 clamp(26px,4vw,44px);}
.namecard{display:block;line-height:.98;letter-spacing:.012em;}
.namecard .nm,.namecard .rl{display:block;}
.namecard .nm{color:var(--ink);}
.namecard--sketch{display:flex;align-items:flex-start;gap:.2em;}
.namecard .nmtext{display:block;}
.namecard .nmsketch{display:block;flex:none;height:5.02em;width:auto;
  margin-top:.04em;border:1px solid var(--rule);}
@media (max-width:600px){
  .namecard--sketch{display:block;}
  .namecard .nmsketch{height:2.9em;margin:0 0 .22em;}
}
.namecard .rl{color:var(--mark);margin-top:.14em;}
.hero--name h1{font-size:clamp(50px,12.2vw,164px);}
.hero--name .sub{margin-top:30px;max-width:52ch;}

/* split hero: type left, covers running down the right */
.hero-split{
  display:grid;
  grid-template-columns:1fr clamp(300px,38vw,520px);
  gap:clamp(24px,4vw,64px);
  align-items:start;
  border-bottom:1px solid var(--rule);
}
.hero-split .hero-type{
  padding:clamp(34px,5vw,64px) clamp(8px,2vw,20px) clamp(40px,5vw,70px) var(--gut);
  position:sticky;top:0;align-self:start;
}
.hero-split .hero-type .btn{margin-top:30px;}
.hero-split .wall{grid-template-columns:repeat(2,1fr);
  border-top:0;border-bottom:0;height:100%;}

/* ---------- buttons ---------- */

.btn{
  display:inline-block;background:var(--ink);color:var(--paper);
  font-family:'Anton','Arial Narrow',sans-serif;font-weight:400;
  text-transform:uppercase;letter-spacing:.06em;font-size:19px;
  padding:14px 28px;text-decoration:none;border:0;cursor:pointer;line-height:1;
}
.btn:hover{background:var(--mark);color:#120F0C;}
.btn--block{display:block;width:100%;text-align:center;font-size:21px;padding:17px;}

/* ---------- bands ---------- */

.band{padding:clamp(40px,6vw,76px) 0;border-top:1px solid var(--rule);}
.band--plain{border-top:0;}

/* the Atmos inversion */
.band--invert{
  background:var(--inv-bg);color:var(--inv-ink);border-top:0;
  --card:var(--inv-card);
  --ink:var(--inv-ink);
  --ink-soft:var(--inv-soft);
  --rule:var(--inv-rule);
  --mark:var(--inv-mark);
  --paper:var(--inv-bg);
}

/* ---------- the wall ---------- */

/* Fixed column counts rather than auto-fill: 6, 3 and 2 all divide the tile
   count evenly, so the last row is never left with holes in it. Keep the wall
   to a multiple of 6 records. */
.wall{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:1px;background:var(--rule);
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
}
@media (max-width:1099px){ .wall{grid-template-columns:repeat(3,1fr);} }
@media (max-width:699px){  .wall{grid-template-columns:repeat(2,1fr);} }
/* The cell holds its square whether or not the image has arrived, so a slow
   YouTube thumbnail can never collapse the grid. */
.tile{
  position:relative;display:block;aspect-ratio:1/1;background:var(--card);
  text-decoration:none;color:inherit;overflow:hidden;
}
.tile img{
  position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;
  color:transparent;                 /* hide alt text if the image fails */
  filter:saturate(.95);transition:filter .25s ease,transform .5s cubic-bezier(.2,.7,.3,1);
}
.tile:hover img{filter:saturate(1.08);transform:scale(1.035);}
.tile figcaption{
  position:absolute;inset:auto 0 0 0;padding:34px 12px 11px;
  background:linear-gradient(to top,rgba(6,5,4,.93) 10%,rgba(6,5,4,.55) 58%,rgba(6,5,4,0));
  color:#fff;font-family:'DM Mono',monospace;font-size:13px;
  line-height:1.4;letter-spacing:.02em;
  transition:opacity .22s ease,transform .22s ease;
}
.tile figcaption b{display:block;font-weight:500;letter-spacing:.07em;
  text-transform:uppercase;font-size:13.5px;margin-bottom:2px;}
/* Where there is a pointer, keep the covers clean and reveal on hover. */
@media (hover:hover){
  .tile figcaption{opacity:0;transform:translateY(6px);}
  .tile:hover figcaption,.tile:focus-visible figcaption{opacity:1;transform:none;}
}
.tile figcaption span{color:#CFC9BF;}
.tile--play::after{
  content:'';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:0;height:0;border-style:solid;border-width:11px 0 11px 18px;
  border-color:transparent transparent transparent #fff;
  filter:drop-shadow(0 1px 6px rgba(0,0,0,.7));pointer-events:none;
}

/* ---------- statement block ---------- */

.statement{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);
  gap:clamp(26px,4vw,56px);align-items:center;}
.statement .shot{margin:0;}
/* whole photograph, never cropped */
.statement .shot img{width:100%;height:auto;}
.statement-text{align-self:center;}
/* A photograph dropped into a column of prose, rather than in its own band. */
.band .wrap > .shot{margin:38px 0 34px;max-width:560px;}
.band .wrap > .shot + p{margin-top:0;}
.statement-text h2{margin-bottom:22px;}
.statement-text p{font-size:clamp(19px,2vw,21px);}
.statement-text p:last-child{margin-bottom:0;}

/* ---------- credit rows ---------- */

.creditlist{display:grid;gap:30px;margin-top:10px;max-width:760px;}
.credit{display:grid;grid-template-columns:132px 1fr;gap:24px;align-items:start;}
.credit-art{width:132px;height:132px;object-fit:cover;display:block;
  border:1px solid var(--rule);}
.credit h3{margin-bottom:8px;}
.credit p{margin:0;font-size:19px;line-height:1.55;}

.index{border-top:1px solid var(--rule);margin-top:12px;}
.index a{display:grid;grid-template-columns:1fr auto;gap:10px 24px;
  padding:15px 0;border-bottom:1px solid var(--rule);
  text-decoration:none;align-items:baseline;}
.index .who{font-family:'Anton','Arial Narrow',sans-serif;font-weight:400;
  text-transform:uppercase;font-size:21px;line-height:1;letter-spacing:.02em;}
.index .what{font-family:'DM Mono',monospace;font-size:15px;
  color:var(--ink-soft);letter-spacing:.05em;text-align:right;}
.index a:hover .who{color:var(--mark);}

/* ---------- rates ---------- */

.rates{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:1px;background:var(--rule);border:1px solid var(--rule);margin-top:8px;}
.rate{background:var(--card);padding:20px 18px;}
.rate .lab{font-family:'DM Mono',monospace;font-size:14px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-soft);margin-bottom:10px;}
.rate .amt{font-family:'Anton','Arial Narrow',sans-serif;font-weight:400;
  font-size:46px;line-height:.85;}
.rate .sub2{font-family:'DM Mono',monospace;font-size:14.5px;
  color:var(--ink-soft);margin-top:9px;line-height:1.45;}

/* ---------- numbered note ---------- */

ol.note{list-style:none;counter-reset:n;padding:0;margin:4px 0 0;max-width:var(--measure);}
ol.note li{counter-increment:n;position:relative;padding-left:52px;margin-bottom:18px;}
ol.note li::before{content:counter(n,decimal-leading-zero);position:absolute;left:0;top:3px;
  font-family:'DM Mono',monospace;font-size:15px;letter-spacing:.1em;color:var(--mark);}

/* ---------- photos ---------- */

.shot{margin:0;}
/* A photograph dropped into a column of prose, rather than in its own band. */
.band .wrap > .shot{margin:38px 0 34px;max-width:560px;}
.band .wrap > .shot + p{margin-top:0;}
.shot img{display:block;width:100%;height:auto;border:1px solid var(--rule);}
.shot figcaption{font-family:'DM Mono',monospace;font-size:15px;line-height:1.55;
  color:var(--ink-soft);margin-top:11px;max-width:52ch;}
.shots{display:grid;gap:clamp(22px,3.5vw,40px);
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));margin-top:8px;}

/* ---------- services ---------- */

.svc{display:grid;gap:1px;background:var(--rule);
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  border:1px solid var(--rule);margin-top:8px;}
.svc > div{background:var(--card);padding:26px 24px 28px;}
.svc h3{margin-bottom:12px;}
.svc h3 a{text-decoration:none;}
.svc p{font-size:19px;line-height:1.55;margin-bottom:14px;}
.svc .from{font-family:'DM Mono',monospace;font-size:15px;line-height:1.65;
  color:var(--ink-soft);margin:0;}

/* ---------- video strip ---------- */

.vids{display:grid;gap:clamp(18px,2.5vw,28px);
  grid-template-columns:repeat(auto-fit,minmax(290px,1fr));margin-top:8px;}
.vid{margin:0;}
.vid .vid-play{display:block;width:100%;padding:0;border:1px solid var(--rule);
  background:var(--card);cursor:pointer;position:relative;line-height:0;
  overflow:hidden;aspect-ratio:16/9;}
.vid .vid-play img{position:absolute;inset:0;display:block;width:100%;height:100%;
  object-fit:cover;color:transparent;
  transition:transform .5s cubic-bezier(.2,.7,.3,1);}
.vid .vid-play:hover img{transform:scale(1.03);}
.vid .vid-icon{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:0;height:0;border-style:solid;border-width:13px 0 13px 21px;
  border-color:transparent transparent transparent #fff;
  filter:drop-shadow(0 2px 8px rgba(0,0,0,.7));}
.vid iframe{width:100%;aspect-ratio:16/9;height:auto;display:block;
  border:1px solid var(--rule);}
.vid .vid-cap{font-family:'DM Mono',monospace;font-size:15px;line-height:1.55;
  color:var(--ink-soft);margin:10px 0 0;}

/* ---------- calculator ---------- */

.calc{border:1px solid var(--rule);background:var(--card);
  padding:clamp(20px,3vw,30px);margin-top:8px;}
.calc .controls{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:24px;}
.calc .f label,.calc .f .lg{display:block;font-family:'DM Mono',monospace;
  font-size:14px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-soft);margin-bottom:8px;}

select,input[type=text],input[type=email],input[type=number],input[type=tel],textarea{
  width:100%;background:var(--paper);border:1px solid var(--rule);
  color:var(--ink);font-family:'DM Mono',monospace;font-size:16.5px;
  padding:13px 14px;border-radius:0;appearance:none;-webkit-appearance:none;
}
textarea{font-family:'Newsreader',serif;font-size:19px;min-height:110px;resize:vertical;}
select{
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-soft) 50%),
                   linear-gradient(135deg,var(--ink-soft) 50%,transparent 50%);
  background-position:calc(100% - 18px) 52%,calc(100% - 13px) 52%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:36px;
}

.terms-toggle{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;border:1px solid var(--rule);}
.terms-toggle button{background:var(--paper);border:0;color:var(--ink-soft);
  font-family:'DM Mono',monospace;font-size:14.5px;letter-spacing:.1em;
  text-transform:uppercase;padding:13px 8px;cursor:pointer;}
.terms-toggle button+button{border-left:1px solid var(--rule);}
.terms-toggle button[aria-pressed="true"]{background:var(--ink);color:var(--paper);}

.readout{border-top:2px solid var(--ink);padding-top:22px;}
.readout .rows{display:grid;grid-template-columns:1fr 1fr;gap:22px;}
.readout .rl{font-family:'DM Mono',monospace;font-size:14px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-soft);margin-bottom:8px;}
.readout .row.lit .rl{color:var(--mark);}
.readout .amt{font-family:'Anton','Arial Narrow',sans-serif;font-weight:400;
  font-size:clamp(38px,6vw,60px);line-height:.82;color:var(--ink-soft);
  font-variant-numeric:tabular-nums;}
.readout .row.lit .amt{color:var(--ink);}
.readout .per{font-family:'DM Mono',monospace;font-size:14.5px;
  color:var(--ink-soft);margin-top:9px;}
.readout .save{margin-top:20px;padding-top:16px;border-top:1px solid var(--rule);
  font-family:'DM Mono',monospace;font-size:16px;letter-spacing:.03em;color:var(--mark);}
.readout .note{font-family:'DM Mono',monospace;font-size:14.5px;line-height:1.7;
  color:var(--ink-soft);margin:16px 0 0;max-width:60ch;}
.calc .cta{margin-top:22px;}

/* ---------- form ---------- */

form{margin-top:8px;}
.field{margin-bottom:22px;}
.field label,legend{display:block;font-family:'DM Mono',monospace;font-size:14px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);
  margin-bottom:9px;padding:0;}
.field label .opt{letter-spacing:.04em;text-transform:none;opacity:.7;margin-left:7px;}
fieldset{border:0;padding:0;margin:0 0 22px;}
.opts{display:flex;flex-wrap:wrap;gap:9px;}
.opts label{display:inline-block;background:var(--card);border:1px solid var(--rule);
  padding:11px 16px;cursor:pointer;font-family:'DM Mono',monospace;font-size:16px;
  color:var(--ink-soft);text-transform:none;letter-spacing:0;margin:0;}
.opts input{position:absolute;opacity:0;width:0;height:0;}
.opts label:has(input:checked){background:var(--ink);color:var(--paper);border-color:var(--ink);}
.opts label:has(input:focus-visible){outline:2px solid var(--mark);outline-offset:2px;}
.two{display:grid;grid-template-columns:1fr 1fr;gap:22px;}
.hp{position:absolute;left:-9999px;}
.fineprint{font-family:'DM Mono',monospace;font-size:14.5px;line-height:1.7;
  color:var(--ink-soft);margin-top:18px;}

/* ---------- footer ---------- */

footer{border-top:1px solid var(--rule);padding:40px 0 56px;
  font-family:'DM Mono',monospace;font-size:15px;line-height:1.75;color:var(--ink-soft);}
footer .social{margin-top:14px;display:flex;gap:20px;flex-wrap:wrap;}

/* ---------- responsive ---------- */

@media (max-width:900px){
  .hero-split{grid-template-columns:1fr;gap:0;}
  .hero-split .hero-type{position:static;
    padding:clamp(28px,6vw,44px) var(--gut) clamp(30px,6vw,44px);}
  .hero-split .wall{grid-template-columns:repeat(3,1fr);border-top:1px solid var(--rule);}
}
@media (max-width:699px){
  .hero-split .wall{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:860px){
  .statement{grid-template-columns:1fr;gap:24px;}
}
@media (max-width:760px){
  body{font-size:17px;}
  .nav .wrap{padding-top:13px;padding-bottom:13px;gap:10px 16px;}
  .nav .mark{font-size:18px;}
  .nav ul{gap:12px;}
  .nav ul a{font-size:14px;letter-spacing:.09em;}
  .nav .navcta{padding:7px 12px;}
  .credit{grid-template-columns:96px 1fr;gap:16px;}
  .credit-art{width:96px;height:96px;}
  .calc .controls{grid-template-columns:1fr;}
  .readout .rows{grid-template-columns:1fr;gap:20px;}
  .two{grid-template-columns:1fr;gap:0;}
  .two .field{margin-bottom:22px;}
  .index a{grid-template-columns:1fr;}
  .index .what{text-align:left;}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important;}
}

/* ---------- photo hero: type left, photograph right ---------- */
/* The photo takes the wider column so a 4:3 image is barely cropped and the
   people at the edges of a band shot stay in frame. */
.hero-split--photo{
  grid-template-columns:minmax(0,.72fr) minmax(0,1fr);align-items:stretch;
  min-height:clamp(420px,58vh,620px);
}
.hero-split--photo .hero-type{position:static;align-self:center;}
.hero-img{margin:0;position:relative;overflow:hidden;background:var(--card);}
.hero-img img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;}
@media (max-width:900px){
  .hero-split--photo{grid-template-columns:1fr;min-height:0;}
  .hero-img{aspect-ratio:4/3;}
}

/* About: text and photograph side by side, alternating */
.duo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
  gap:clamp(28px,5vw,72px);align-items:center;}
.duo--flip .duo-text{order:2;}
.duo .shot{margin:0;max-width:none;}
.duo-text p:last-child,.duo-text .btn:last-child{margin-bottom:0;}
@media (max-width:760px){
  .duo{grid-template-columns:1fr;}
  .duo--flip .duo-text{order:0;}
}
.band--rows .duo + .duo{margin-top:clamp(64px,9vw,120px);}
body:has(.nmsketch) .nav .logo{display:none;}

/* Homepage title with sketch: size the type to the room left beside the wall.
   The block is roughly 9em wide (sketch ~4.9em + gap + MASTERING ~3.9em). */
.hero-split .hero-type{min-width:0;}
.hero-split h1.namecard--sketch{
  font-size:min(104px, calc((100vw - clamp(300px,38vw,520px) - clamp(24px,4vw,64px) - 120px) / 9));}
@media (max-width:900px){
  .hero-split h1.namecard--sketch{font-size:min(104px, calc((100vw - 60px) / 10.2));}
}
@media (max-width:600px){
  .hero-split h1.namecard--sketch{font-size:clamp(46px,13vw,64px);}
}
.duo--atmos{align-items:start;}
.duo--atmos .shot{position:sticky;top:24px;margin-top:6px;}
@media (max-width:760px){.duo--atmos .shot{position:static;}}

/* About: early photos in one strip. Each photo's share of the width matches its
   aspect ratio, so all three come out the same height with nothing cropped. */
.strip{display:flex;gap:clamp(10px,1.4vw,18px);margin-top:clamp(28px,4vw,48px);}
.strip figure{margin:0;min-width:0;}
.strip figure:nth-child(1){flex:1 1 0;}
.strip figure:nth-child(2){flex:1.243 1 0;}
.strip figure:nth-child(3){flex:1.506 1 0;}
.strip img{display:block;width:100%;height:auto;border:1px solid var(--rule);}
@media (max-width:760px){
  .strip{flex-wrap:wrap;}
  .strip figure:nth-child(1),.strip figure:nth-child(2){flex:1 1 40%;}
  .strip figure:nth-child(1) img,.strip figure:nth-child(2) img{aspect-ratio:1/1;object-fit:cover;}
  .strip figure:nth-child(3){flex:1 1 100%;}
}
.band--rows .strip + .duo{margin-top:clamp(64px,9vw,120px);}
.controls .f:has(.terms-toggle){grid-column:1 / -1;}
.terms-toggle button{white-space:nowrap;}
@media (max-width:420px){.terms-toggle button{white-space:normal;letter-spacing:.06em;}}

/* Work: credit cards */
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(28px,3vw,40px) clamp(16px,2vw,28px);margin-top:8px;}
.cc img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;
  border:1px solid var(--rule);margin-bottom:14px;}
.cc-role{font-family:'DM Mono',monospace;font-size:13.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--mark);margin:0 0 6px;}
.cc h3{font-size:clamp(20px,2vw,24px);line-height:1.02;margin:0 0 4px;}
.cc-title{font-style:italic;font-size:18px;line-height:1.35;margin:0 0 6px;}
.cc-meta{font-family:'DM Mono',monospace;font-size:14px;color:var(--ink-soft);margin:0 0 8px;}
.cc-listen{font-family:'DM Mono',monospace;font-size:14px;letter-spacing:.1em;
  text-transform:uppercase;}
.cc-listen::after{content:" \2197";}
@media (max-width:1000px){.cards{grid-template-columns:repeat(3,minmax(0,1fr));}}
@media (max-width:600px){.cards{grid-template-columns:repeat(2,minmax(0,1fr));}}

/* Recording: three ways to do it */
.ways{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3.5vw,48px);margin-top:10px;}
.ways h3{font-size:clamp(30px,3.4vw,44px);line-height:.98;margin:0 0 16px;}
.ways p{margin:0;}
/* one line each: size the type to the column (container query units) */
.ways > div{container-type:inline-size;}
.ways h3{white-space:nowrap;font-size:min(44px, 10.6cqi);}
@media (max-width:900px){.ways{grid-template-columns:1fr;gap:36px;}}
.ways .shot{margin:0 0 22px;}
.ways .shot img{aspect-ratio:3/2;height:auto;object-fit:cover;}
.duo--note{align-items:start;}
.duo--note .shot{margin-top:clamp(0px,6vw,90px);}
@media (min-width:901px){.ways .shot figcaption{min-height:3.1em;}}

/* Photos page: uncropped, masonry by columns */
.gallery{columns:3 300px;column-gap:clamp(14px,2vw,24px);}
.g{break-inside:avoid;margin:0 0 clamp(14px,2vw,24px);}
.g img{display:block;width:100%;height:auto;border:1px solid var(--rule);}
.g figcaption{font-family:'DM Mono',monospace;font-size:14px;line-height:1.5;color:var(--ink-soft);margin-top:8px;}
.strip figcaption{font-family:'DM Mono',monospace;font-size:14px;line-height:1.5;color:var(--ink-soft);margin-top:8px;}
.cc-note{font-size:16px;line-height:1.45;color:var(--ink-soft);margin:0 0 8px;}

/* Recording: production examples, two side by side */
.pair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,56px);margin-top:clamp(28px,4vw,44px);}
.pair .shot{margin:0 0 18px;max-width:none;}
.pair .shot img{width:100%;height:auto;}  /* both photos are 16:9; shown whole */
.pair h3{font-size:clamp(24px,2.4vw,30px);margin:0 0 10px;}
.pair h3 em{font-family:'Newsreader',Georgia,serif;font-style:italic;text-transform:none;}
.pair p{margin:0;}
@media (max-width:760px){.pair{grid-template-columns:1fr;gap:40px;}}
.vids--two{grid-template-columns:1fr 1fr;margin-top:22px;}
@media (max-width:500px){.vids--two{grid-template-columns:1fr;}}
/* About hero: the polaroid is shown whole, never cropped */
.hero-img img[src*="hero-about"]{object-fit:contain;background:#0b0b0b;}
.bighead{font-size:clamp(56px,9vw,120px);line-height:.9;}
.pair p + p{margin-top:14px;}

/* Mixing: how it works */
.steps{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3.5vw,44px) clamp(28px,5vw,64px);margin-top:clamp(26px,3.5vw,40px);}
.steps h3{font-size:clamp(24px,2.4vw,30px);margin:0 0 8px;}
.steps p{margin:0;}
@media (max-width:700px){.steps{grid-template-columns:1fr;}}
.wall--row{margin-top:14px;border:1px solid var(--rule);}