/* COMMON STUDIO · marketing site · The Pressing
   Editorial surface: paper ground, ink type, release accents used sparingly.
   Reference: brand/styleguide.html · canon/brand.md */

:root {
  --paper:#f6f3ec; --ink:#161410; --muted:#6f6a5e; --hair:#dcd7c9;
  --verm:#ec4a34; --cob:#2b43e0; --amb:#f4a52a; --grn:#10a05a; --pnk:#e85fa6;
  --sans:"Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --max:64rem;
}
@media (prefers-color-scheme: dark) {
  :root { --paper:#171511; --ink:#efece2; --muted:#9b968a; --hair:#312e27; --verm:#f0664f; }
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans);
  font-size:clamp(.95rem,.85rem + .35vw,1.08rem); line-height:1.55; -webkit-font-smoothing:antialiased; }
a { color:inherit; }
a:focus-visible, button:focus-visible { outline:2px solid var(--verm); outline-offset:2px; }
.wrap { max-width:var(--max); margin:0 auto; padding:0 clamp(1.1rem,4vw,2.5rem); }

/* header: stacked wordmark left, three quiet links right */
header.mast { border-bottom:2px solid var(--ink); }
.mastrow { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1rem 0 .9rem; }
.wm { font-weight:800; font-size:.95rem; letter-spacing:-.045em; line-height:.9; text-transform:uppercase; text-decoration:none; }
nav.sitenav { display:flex; gap:clamp(.9rem,3vw,1.8rem); }
nav.sitenav a { font-family:var(--mono); font-size:.66rem; letter-spacing:.13em; text-transform:uppercase; text-decoration:none; color:var(--muted); padding:.4rem 0; }
nav.sitenav a:hover { color:var(--ink); }
nav.sitenav a[aria-current="page"] { color:var(--verm); border-bottom:2px solid var(--verm); }

/* type */
.kick { font-family:var(--mono); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--verm); margin:0 0 1rem; }
h1 { font-weight:800; font-size:clamp(2rem,1.1rem + 4.4vw,4.2rem); line-height:1.02; letter-spacing:-.045em; margin:0 0 1.4rem; max-width:22ch; text-wrap:balance; }
h1 em, h2 em { font-style:normal; color:var(--verm); }
h2 { font-weight:800; font-size:clamp(1.4rem,1rem + 1.8vw,2.2rem); line-height:1.08; letter-spacing:-.04em; margin:0 0 1rem; max-width:28ch; text-wrap:balance; }
.lead { font-size:clamp(1.05rem,.95rem + .7vw,1.35rem); line-height:1.4; font-weight:600; max-width:44ch; margin:0 0 1rem; }
p { max-width:58ch; margin:.6rem 0; }
.mut { color:var(--muted); }
.fine { color:var(--muted); font-size:.8rem; max-width:66ch; }

/* sections */
section.band { padding:clamp(2.6rem,7vh,4.6rem) 0; border-top:1px solid var(--hair); }
section.band.first { border-top:none; padding-top:clamp(3rem,9vh,5.5rem); }

/* hero: poster-scale type on paper, with the stamp */
section.band.hero { padding-bottom:clamp(3rem,9vh,5.5rem); }
section.band.hero h1 { font-size:clamp(2.2rem,1.2rem + 5vw,4.8rem); margin-bottom:1.6rem; }
section.band.hero .stamp { margin-top:1.4rem; display:inline-block; }

/* statboard row: two to four figures, one rule, no boxes */
.statrow { display:grid; grid-template-columns:repeat(3,1fr); border-top:2px solid var(--ink); margin-top:1.6rem; }
.statrow .stat { padding:1.1rem 1.4rem 0 0; }
.statrow .stat + .stat { border-left:1px solid var(--hair); padding-left:1.4rem; }
.stat .n { font-weight:800; font-size:clamp(1.6rem,1.1rem + 2.2vw,2.7rem); letter-spacing:-.04em; line-height:1; font-variant-numeric:tabular-nums; }
.stat .n.acc { color:var(--verm); }
.stat .l { font-size:.78rem; color:var(--muted); margin-top:.5rem; max-width:24ch; }

/* the shelf: release spines, edge on */
.shelf { display:flex; gap:.5rem; height:clamp(8.5rem,24vh,12rem); margin-top:1.4rem; }
.shelf > * { flex:1; display:flex; align-items:flex-end; justify-content:center; padding:.8rem 0; writing-mode:vertical-rl; transform:rotate(180deg); text-decoration:none; color:#f6f3ec; font-family:var(--mono); font-size:.6rem; letter-spacing:.12em; text-transform:uppercase; white-space:nowrap; overflow:hidden; transition:flex .18s ease; }
.shelf > .inktext { color:#161410; }
.shelf > *:hover { flex:1.7; }
@media (prefers-reduced-motion:reduce) { .shelf > * { transition:none; } }

/* revenue quadrant: streams mapped, our corner accented */
.rq { display:grid; grid-template-columns:1fr 1fr; gap:2px; background:var(--hair); border:1.5px solid var(--ink); margin-top:1.4rem; }
.rq .cell { background:var(--paper); padding:1rem 1.1rem 1.2rem; min-height:9rem; }
.rq .cell .cl { font-family:var(--mono); font-size:.6rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin:0 0 .6rem; }
.rq .chips { display:flex; flex-wrap:wrap; gap:.4rem; }
.rq .chip { border:1px solid var(--hair); padding:.3rem .6rem; font-size:.78rem; color:var(--muted); }
.rq .cell.us { background:color-mix(in srgb, var(--verm) 8%, var(--paper)); outline:2px solid var(--verm); outline-offset:-2px; }
.rq .cell.us .cl { color:var(--verm); }
.rq .cell.us .big { font-weight:800; font-size:1.15rem; letter-spacing:-.02em; margin:.1rem 0 .3rem; }
.rq .cell.us p { font-size:.8rem; color:var(--muted); margin:0; }
.rqx { display:flex; justify-content:space-between; font-family:var(--mono); font-size:.6rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-top:.5rem; }

/* dashboard mock: the SaaS face of a release */
.dash { border:1.5px solid var(--ink); max-width:44rem; margin-top:1.4rem; background:var(--paper); }
.dash .dbar { display:flex; align-items:center; gap:.35rem; padding:.4rem .7rem; border-bottom:1px solid var(--hair); }
.dash .dot { width:.4rem; height:.4rem; border-radius:50%; background:var(--hair); }
.dash .dtitle { font-family:var(--mono); font-size:.58rem; color:var(--muted); margin-left:.4rem; letter-spacing:.08em; }
.dash .dbody { padding:1rem; }
.dash .kpis { display:grid; grid-template-columns:repeat(3,1fr); gap:.8rem; }
.dash .kpi { border:1px solid var(--hair); padding:.6rem .7rem; }
.dash .kpi .kl { font-family:var(--mono); font-size:.54rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.dash .kpi .kv { font-weight:800; font-size:1.15rem; letter-spacing:-.03em; font-variant-numeric:tabular-nums; margin-top:.15rem; }
.dash .kpi .kv.acc { color:var(--verm); }
.dash .cols { display:flex; align-items:flex-end; gap:.45rem; height:5.2rem; margin-top:1rem; border-bottom:2px solid var(--ink); }
.dash .cols i { flex:1; background:var(--ink); display:block; }
.dash .cols i.acc { background:var(--verm); }
.dash .dfoot { font-family:var(--mono); font-size:.56rem; color:var(--muted); margin-top:.6rem; }

/* lead form */
.leadform { max-width:34rem; display:grid; gap:1rem; margin-top:1.6rem; }
.leadform label { display:grid; gap:.35rem; font-family:var(--mono); font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.leadform input, .leadform textarea { border:1.5px solid var(--hair); background:transparent; color:var(--ink); font-family:var(--sans); font-size:.95rem; padding:.7rem .8rem; }
.leadform input:focus, .leadform textarea:focus { outline:2px solid var(--verm); outline-offset:1px; border-color:var(--ink); }
.leadform textarea { min-height:6.5rem; resize:vertical; }
.leadform button { justify-self:start; cursor:pointer; background:var(--ink); color:var(--paper); font-family:var(--mono); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; padding:.9rem 1.6rem; border:1.5px solid var(--ink); min-height:2.4rem; }
.leadform button:hover { background:var(--verm); border-color:var(--verm); color:#f6f3ec; }
.formok { border:1.5px solid var(--grn); padding:1rem 1.2rem; max-width:34rem; display:none; }
.formok.show { display:block; }
.hp { position:absolute; left:-9999px; }

/* numbered how columns */
.hcol .sno { font-family:var(--mono); font-size:.66rem; color:var(--muted); display:block; margin-bottom:.35rem; }

/* section chrome: deck-style kick row with a number, hard rule below */
.kickrow { display:flex; justify-content:space-between; align-items:baseline; border-bottom:2px solid var(--ink); padding-bottom:.55rem; margin-bottom:1.8rem; }
.kickrow .kick { margin:0; }
.kickrow .kn { font-family:var(--mono); font-size:.62rem; letter-spacing:.12em; color:var(--muted); }

/* liner spine on a band */
section.band.spined { position:relative; }
section.band.spined::before { content:""; position:absolute; left:0; top:0; bottom:0; width:clamp(.5rem,1vw,.9rem); background:var(--verm); }

/* lifted band: a quietly toned surface */
section.band.lift { background:color-mix(in srgb, var(--ink) 4%, var(--paper)); }

/* tracklist rows */
.trk { display:flex; align-items:baseline; gap:1rem; padding:.85rem 0; border-top:1px solid var(--hair); }
.trk:last-child { border-bottom:1px solid var(--hair); }
.trk .no { font-family:var(--mono); font-size:.68rem; color:var(--verm); min-width:2rem; }
.trk .tt { font-weight:700; letter-spacing:-.015em; }
.trk .tl2 { font-size:.8rem; color:var(--muted); margin-left:auto; text-align:right; max-width:26rem; }

/* big route rows */
a.route { display:flex; align-items:baseline; gap:1.2rem; padding:1.4rem 0; border-top:2px solid var(--ink); text-decoration:none; }
a.route:last-of-type { border-bottom:2px solid var(--ink); }
a.route .no { font-family:var(--mono); font-size:.72rem; color:var(--verm); }
a.route .tt { font-weight:800; font-size:clamp(1.25rem,1rem + 1.5vw,1.9rem); letter-spacing:-.03em; }
a.route .ar { margin-left:auto; font-weight:800; font-size:1.3rem; color:var(--verm); }
a.route:hover .tt { color:var(--verm); }

/* how-we-work columns */
.how { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.4rem,3.5vw,2.8rem); }
.hcol .colh { font-family:var(--mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--verm); margin:0 0 .5rem; }
.hcol p { margin:0; max-width:30ch; }
.hcol p + p { margin-top:.4rem; }

/* two-column split */
.split { display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.4rem,4vw,3rem); }
.split .colh { font-family:var(--mono); font-size:.64rem; letter-spacing:.13em; text-transform:uppercase; color:var(--muted); margin:0 0 .6rem; }
.split .colh.us { color:var(--verm); }

/* engine cards */
.engines { display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.2rem,3vw,2rem); }
.eng { border:1.5px solid var(--ink); }
.eng .top { padding:.7rem .9rem; color:#f6f3ec; display:flex; justify-content:space-between; align-items:baseline; }
.eng .top .side { font-family:var(--mono); font-size:.62rem; letter-spacing:.14em; }
.eng .top .nm { font-weight:800; letter-spacing:-.02em; }
.eng.a .top { background:var(--cob); }
.eng.b .top { background:var(--verm); }
.eng .bot { padding:1rem .95rem 1.1rem; }
.eng .bot p { margin:0; font-size:.9rem; max-width:none; }
.eng .bot .tag { display:block; margin-top:.8rem; font-family:var(--mono); font-size:.6rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }

/* steps */
.steps { display:grid; grid-template-columns:repeat(4,1fr); border-top:2px solid var(--ink); }
.step { padding:1rem 1.3rem 0 0; }
.step + .step { border-left:1px solid var(--hair); padding-left:1.3rem; }
.step .sno { font-family:var(--mono); font-size:.66rem; color:var(--verm); }
.step .st { font-weight:800; letter-spacing:-.015em; margin:.35rem 0 .25rem; }
.step .sd { font-size:.82rem; color:var(--muted); line-height:1.45; margin:0; }

/* sleeves */
.slvgrid { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,2.4vw,1.7rem); }
.slv { display:flex; flex-direction:column; border:1.5px solid var(--ink); background:var(--paper); }
.slv .pbar { padding:.5rem .8rem; color:#f6f3ec; }
.slv .pbar.inktext { color:#161410; }
.slv .pbar .cat { font-family:var(--mono); font-size:.58rem; letter-spacing:.1em; }
.slv .photo img { width:100%; aspect-ratio:3/2; object-fit:cover; display:block; filter:grayscale(1) contrast(1.06); }
.slv .bot { padding:.85rem .9rem 1rem; display:flex; flex-direction:column; gap:.35rem; flex:1; }
.slv h3 { margin:0; font-size:1rem; letter-spacing:-.015em; font-weight:800; }
.slv p { margin:0; font-size:.8rem; color:var(--muted); line-height:1.45; max-width:none; }
.slv .tag { margin-top:auto; padding-top:.5rem; font-family:var(--mono); font-size:.56rem; letter-spacing:.1em; text-transform:uppercase; color:var(--verm); }

/* stamp + button */
.stamp { display:inline-block; font-family:var(--mono); font-size:.6rem; border:1.5px solid currentColor; padding:.34rem .65rem; letter-spacing:.08em; text-transform:uppercase; }
.btn { display:inline-block; background:var(--ink); color:var(--paper); font-family:var(--mono); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; text-decoration:none; padding:.85rem 1.5rem; border:1.5px solid var(--ink); min-height:2.4rem; }
.btn:hover { background:var(--verm); border-color:var(--verm); color:#f6f3ec; }

/* footer */
footer.foot { border-top:2px solid var(--ink); margin-top:clamp(2.5rem,7vh,4.5rem); }
.footrow { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1.2rem 0 2.2rem; flex-wrap:wrap; }
.csmark { display:inline-grid; place-items:center; width:2.1rem; height:2.1rem; border:2px solid var(--ink); border-radius:50%; font-weight:800; font-size:.78rem; letter-spacing:-.04em; }
.footrow .m { font-family:var(--mono); font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }

/* 404 field page */
body.field { background:var(--cob); color:#f6f3ec; display:grid; place-items:center; min-height:100vh; }
body.field .wrap404 { padding:2rem; max-width:40rem; }
body.field h1 { color:#f6f3ec; }
body.field a { color:#f6f3ec; }

/* responsive */
@media (max-width:780px) {
  .engines, .split { grid-template-columns:1fr; }
  .steps { grid-template-columns:1fr; }
  .how { grid-template-columns:1fr; gap:1.1rem; }
  .hcol + .hcol { border-top:1px solid var(--hair); padding-top:1.1rem; }
  .step { padding-right:0; }
  .step + .step { border-left:none; border-top:1px solid var(--hair); padding-left:0; padding-top:.9rem; margin-top:.9rem; }
  .slvgrid { grid-template-columns:1fr 1fr; }
}
@media (max-width:560px) {
  .slvgrid { grid-template-columns:1fr; }
  .rq { grid-template-columns:1fr; }
  .dash .kpis { grid-template-columns:1fr 1fr; }
  .statrow { grid-template-columns:1fr; }
  .statrow .stat { padding:1rem 0 0; }
  .statrow .stat + .stat { border-left:none; border-top:1px solid var(--hair); padding-left:0; margin-top:1rem; }
  .shelf { height:7.5rem; gap:.35rem; }
  .trk { flex-wrap:wrap; gap:.25rem .8rem; }
  .trk .tl2 { flex-basis:100%; margin-left:2.9rem; text-align:left; }
  .mastrow { flex-wrap:wrap; }
}