/* Field reports, in the architect's model look (the site's brand.css: its fonts, colours and grain).
   One rule set for the series: a report is a lit room of the building. Type runs the right way up:
   headings modest, data large. Sizes are fixed at Cam's screen (2560) and his phone (390) and scale
   between; nothing grows past 2560. */
@font-face{font-family:Sofia;src:url(../fonts/sofia-sans-extra-condensed-latin-wght-normal.woff2) format('woff2');font-weight:1 1000;font-display:swap}
@font-face{font-family:Hanken;src:url(../fonts/hanken-grotesk-latin-wght-normal.woff2) format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:Hanken;src:url(../fonts/hanken-grotesk-latin-wght-italic.woff2) format('woff2');font-weight:100 900;font-style:italic;font-display:swap}

:root{
  --bg:#030304;--card:#0b0b0c;--card-2:#131314;--ink:#f1efe9;--soft:#c8c6c0;--dim:#8f9195;--faint:#5d5f63;
  --gold:#e6cf9a;--brass:#b39258;--warm:#ffdcab;
  --line:rgba(241,239,233,.13);--line2:rgba(241,239,233,.28);
  /* a model's colour, wherever it is named */
  --argon:#e6cf9a;--opus:#e39a7f;--astra:#7cc1b4;--flash:#a99be0;
  --pad:clamp(20px,4vw,104px);
  --t-display:clamp(40px,3.3vw,86px);
  --t-h2:clamp(30px,2.05vw,54px);
  --t-h3:clamp(22px,1.18vw,30px);
  --t-lead:clamp(18px,.98vw,25px);
  --t-body:clamp(16px,.74vw,19px);
  --t-small:clamp(15px,.69vw,17.5px);
  --t-eng:clamp(12.5px,.62vw,16px);
  --t-num:clamp(38px,2.5vw,66px);
  --t-num-xl:clamp(56px,4.4vw,116px);
  --t-cell:clamp(14px,.66vw,17px);
  --ease:cubic-bezier(.2,.7,.1,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg);-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font-family:Hanken,system-ui,sans-serif;font-size:var(--t-body);line-height:1.55;overflow-x:hidden;-webkit-font-smoothing:antialiased;font-feature-settings:"tnum" 0}
a{color:inherit;text-decoration:none}
img,video,svg{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:1px solid var(--gold);outline-offset:3px}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.grain{position:fixed;inset:0;z-index:40;pointer-events:none;opacity:.05;background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScyNDAnIGhlaWdodD0nMjQwJz48ZmlsdGVyIGlkPSduJz48ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nLjg1JyBudW1PY3RhdmVzPScyJyBzdGl0Y2hUaWxlcz0nc3RpdGNoJy8+PGZlQ29sb3JNYXRyaXggdmFsdWVzPScwIDAgMCAwIDEgIDAgMCAwIDAgMSAgMCAwIDAgMCAxICAwIDAgMCAuNyAwJy8+PC9maWx0ZXI+PHJlY3Qgd2lkdGg9JzEwMCUnIGhlaWdodD0nMTAwJScgZmlsdGVyPSd1cmwoI24pJy8+PC9zdmc+")}

/* ---------- type */
.eng{font-family:Sofia,sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:.2em;font-size:var(--t-eng);color:var(--dim);line-height:1.4}
.eng em,.gold{color:var(--gold);font-style:normal}
/* the label right above a heading names its section: heavier, warm grey and a step larger, as across the site since
   23 Oct (Cam found the labels hard to read) */
.eng:has(+ .title),.eng:has(+ .plate){font-weight:500;color:var(--soft);font-size:clamp(13.5px,.7vw,18px)}
.title{font-family:Sofia,sans-serif;font-weight:300;text-transform:uppercase;letter-spacing:.025em;line-height:.98;color:var(--ink);text-wrap:balance}
.display{font-size:var(--t-display)}
.h2{font-size:var(--t-h2);line-height:1.02}
.h3{font-size:var(--t-h3);line-height:1.05;letter-spacing:.03em}
.lead{font-size:var(--t-lead);line-height:1.42;font-weight:300;color:var(--ink);text-wrap:pretty}
.copy{color:var(--soft);max-width:38em;text-wrap:pretty}
.copy p+p{margin-top:.9em}
.copy strong{color:var(--ink);font-weight:500}
.small{font-size:var(--t-small);color:var(--dim);line-height:1.5}
.num{font-family:Sofia,sans-serif;font-weight:300;font-size:var(--t-num);line-height:.92;letter-spacing:.01em;color:var(--ink);font-variant-numeric:tabular-nums}
.num small{font-size:.46em;letter-spacing:.06em;color:var(--dim);margin-left:.12em}
.m-argon{color:var(--argon)}.m-opus{color:var(--opus)}.m-astra{color:var(--astra)}.m-flash{color:var(--flash)}

/* ---------- frame */
.wrap{padding-inline:var(--pad)}
.top{position:absolute;top:0;left:0;right:0;z-index:20;display:flex;justify-content:space-between;align-items:center;padding:clamp(18px,1.6vw,40px) var(--pad)}
.mark{font-family:Sofia,sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:.2em;font-size:clamp(17px,1.05vw,27px);white-space:nowrap}
.top nav{display:flex;gap:clamp(16px,1.6vw,40px)}
.top nav a{font-family:Sofia,sans-serif;text-transform:uppercase;letter-spacing:.2em;font-size:clamp(12.5px,.74vw,19px);color:var(--soft);transition:color .3s}   /* the site's menu size */
.top nav a:hover{color:var(--gold)}
section{position:relative}
.sec{padding-block:clamp(64px,5.2vw,136px)}
.sec-head{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(14px,1vw,26px);max-width:1500px}
.sec-head .h2{max-width:24em}
.dek{color:var(--soft);font-size:var(--t-lead);line-height:1.45;font-weight:300;max-width:42em;text-wrap:pretty}
.rule{border:0;border-top:1px solid var(--line);margin:0}

/* buttons that go somewhere: the site's hairline box with a gold mark */
.go{display:inline-flex;align-items:center;gap:.9em;border:1px solid var(--line2);padding:.8em 1.25em;font-size:var(--t-small);background:rgba(3,3,4,.4);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:var(--ink);transition:border-color .3s,background .3s;white-space:nowrap}
.go:hover,.go:focus-visible{border-color:var(--gold);background:rgba(230,207,154,.08)}
.go i{font-style:normal;color:var(--gold)}
.chip{display:inline-flex;align-items:center;gap:.45em;font-family:Sofia,sans-serif;text-transform:uppercase;letter-spacing:.16em;font-size:clamp(11.5px,.54vw,14px);color:var(--soft);border:1px solid var(--line);padding:.32em .7em;line-height:1.2;white-space:nowrap}
.chip b{font-weight:400;color:var(--ink)}

/* reveal on arrival in the screen (skipped with reduced motion or no script) */
.js [data-in]{opacity:0;transform:translateY(14px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js [data-in].in{opacity:1;transform:none}

/* ---------- the progress rail, as on the homepage */
.rail{position:fixed;left:var(--pad);bottom:clamp(18px,1.9vw,48px);z-index:30;display:flex;align-items:center;gap:clamp(14px,1.1vw,28px);opacity:0;transition:opacity .6s;pointer-events:none}
@media (min-width:1001px){.rail{left:calc(var(--pad)/2 - 7px);top:50%;bottom:auto;transform:translateY(-50%);flex-direction:column;gap:22px}.rail ol{flex-direction:column;gap:6px}.rail li button{width:14px;height:clamp(26px,1.7vw,42px)}.rail li button::after{left:6px;right:auto;top:0;bottom:0;width:1px;height:auto}.rail li.on button::after{width:2px;left:5.5px;height:auto;top:0}.rail .lab{writing-mode:vertical-rl;transform:rotate(180deg)}.rail-fade{display:none}}
.rail.on{opacity:1;pointer-events:auto}
.rail ol{display:flex;gap:6px;list-style:none}
.rail li button{display:block;width:clamp(22px,1.5vw,38px);height:14px;position:relative}
.rail li button::after{content:"";position:absolute;left:0;right:0;top:6px;height:1px;background:var(--line2);transition:background .4s,height .4s}
.rail li.on button::after{background:var(--gold);height:2px;top:5.5px}
.rail .lab{font-family:Sofia,sans-serif;text-transform:uppercase;letter-spacing:.2em;font-size:var(--t-eng);color:var(--dim);white-space:nowrap}
.rail .lab b{color:var(--gold);font-weight:400}
.rail-fade{position:fixed;left:0;right:0;bottom:0;height:clamp(70px,6vw,150px);z-index:29;pointer-events:none;background:linear-gradient(to top,rgba(3,3,4,.92),rgba(3,3,4,0));opacity:0;transition:opacity .6s}
.rail-fade.on{opacity:1}

/* ---------- 01 arrival */
.arrive{min-height:100svh;display:grid;grid-template-columns:minmax(0,46%) minmax(0,1fr);grid-template-rows:1fr auto;padding:0 var(--pad);overflow:hidden;isolation:isolate}
.room{position:absolute;inset:0 0 0 30%;z-index:-1;margin:0;overflow:hidden}
.room img{width:100%;height:100%;object-fit:cover;object-position:60% 50%;transform-origin:62% 48%;animation:drift 38s ease-in-out infinite alternate}
.room::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,var(--bg) 0%,rgba(3,3,4,.86) 14%,rgba(3,3,4,.25) 42%,rgba(3,3,4,0) 62%),linear-gradient(0deg,var(--bg) 0%,rgba(3,3,4,.55) 24%,rgba(3,3,4,0) 48%),linear-gradient(180deg,rgba(3,3,4,.6) 0%,rgba(3,3,4,0) 18%)}
.room figcaption{position:absolute;right:var(--pad);bottom:clamp(250px,17vw,420px);z-index:2;text-align:right}
@keyframes drift{from{transform:scale(1.02)}to{transform:scale(1.075) translate(-.6%,.4%)}}
.arrive-text{grid-column:1;align-self:end;padding-top:clamp(120px,9vw,230px);display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(18px,1.25vw,32px)}
.arrive .display{max-width:13.5em}
.arrive .lead{max-width:30em;color:var(--soft)}
.arrive .lead strong{color:var(--ink);font-weight:400}
.plate{display:flex;align-items:stretch;gap:clamp(14px,1vw,24px);width:max-content;max-width:100%}
.plate .el{width:clamp(64px,3.6vw,92px);aspect-ratio:1;border:1px solid var(--brass);display:grid;grid-template-rows:auto 1fr;padding:clamp(6px,.4vw,10px) clamp(8px,.5vw,12px);background:linear-gradient(160deg,rgba(230,207,154,.09),rgba(3,3,4,0) 70%);box-shadow:inset 0 0 0 1px rgba(3,3,4,.6),0 0 40px rgba(255,220,171,.05)}
.plate .el span{font-family:Sofia,sans-serif;font-size:clamp(10.5px,.5vw,13px);letter-spacing:.12em;color:var(--brass)}
.plate .el b{font-family:Sofia,sans-serif;font-weight:300;font-size:clamp(34px,2vw,52px);line-height:1;color:var(--gold);align-self:end}
.plate .who{display:grid;align-content:center;gap:.35em}
.plate .who .name{font-family:Sofia,sans-serif;text-transform:uppercase;letter-spacing:.14em;font-size:clamp(17px,.92vw,24px);color:var(--ink)}
.readouts{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(20px,2vw,56px);margin-top:clamp(36px,3vw,80px);padding-top:clamp(18px,1.3vw,32px);padding-bottom:clamp(96px,7vw,180px);border-top:1px solid var(--line)}
.ro{display:grid;align-content:start;gap:clamp(10px,.6vw,16px)}
.ro dt{font-family:Sofia,sans-serif;font-weight:500;text-transform:uppercase;letter-spacing:.2em;font-size:clamp(13.5px,.7vw,18px);color:var(--gold)}   /* a step up, as the site's fact labels (23 Oct) */
.ro .num{font-size:var(--t-num)}
.ro dd{margin:0}
.ro .txt{color:var(--soft);font-size:var(--t-small);line-height:1.5;max-width:24em}
.scroll-cue{position:absolute;right:var(--pad);bottom:clamp(18px,1.9vw,48px)}

/* ---------- 02 the shape */
.band{background:linear-gradient(180deg,var(--bg) 0,#08080a 22%,#08080a 78%,var(--bg) 100%)}
.shape-top{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(30px,4vw,110px);align-items:end}
.tally{display:flex;flex-wrap:wrap;gap:clamp(28px,3vw,80px);align-items:start;justify-content:flex-end}
.tally div{display:grid;gap:8px}
.tally .num{font-size:var(--t-num-xl)}
.tally .lbl{font-size:var(--t-small);color:var(--soft);max-width:11em}
.legend{display:flex;flex-wrap:wrap;gap:clamp(14px,1.4vw,36px);margin-top:clamp(30px,2vw,52px);align-items:center;color:var(--soft);font-size:var(--t-small)}
.legend span{display:inline-flex;align-items:center;gap:.6em}
.legend svg{width:16px;height:16px}
.shape{margin-top:clamp(18px,1.2vw,30px);position:relative;user-select:none;-webkit-user-select:none}
.shape svg{width:100%;height:auto;overflow:visible}
.shape .grp{font-family:Hanken,sans-serif}
.shape text{fill:var(--soft)}
.shape .gl{font-size:var(--t-cell);fill:var(--ink)}
.shape .gn{font-size:calc(var(--t-cell)*.86);fill:var(--dim)}
.shape .ax{font-family:Sofia,sans-serif;letter-spacing:.14em;font-size:calc(var(--t-eng)*.95);fill:var(--dim)}
.shape .zero{stroke:var(--brass);stroke-width:1}
.shape .tick{stroke:var(--line);stroke-width:1}
.shape .track{stroke:rgba(241,239,233,.07);stroke-width:1}
.shape .med{stroke:var(--gold);stroke-width:2}
.shape .medt{font-family:Sofia,sans-serif;font-size:calc(var(--t-cell)*1.05);letter-spacing:.06em}
.shape .dot{cursor:pointer;transition:r .2s,opacity .3s}
.shape .dot.f{fill:var(--argon)}
.shape .dot.g{fill:var(--bg);stroke:var(--argon);stroke-width:1.6}
.shape .dot.m{fill:var(--bg);stroke:var(--argon);stroke-width:1.6}
.shape .dot.behind.f{fill:#bfb39a}
.shape .dot.behind.g,.shape .dot.behind.m{stroke:#bfb39a}
.shape .dot.hot{stroke:var(--ink);stroke-width:2.2}
.shape .call{font-size:calc(var(--t-cell)*.9);fill:var(--soft)}
.shape .callline{stroke:var(--line2);stroke-width:1}
.shape .lead-l,.shape .lead-r{font-family:Sofia,sans-serif;letter-spacing:.18em;font-size:var(--t-eng);text-transform:uppercase}
.shape .lead-r{fill:var(--gold)}.shape .lead-l{fill:var(--dim)}
.card-pop{position:absolute;z-index:12;width:min(440px,92vw);background:rgba(11,11,12,.97);border:1px solid var(--line2);padding:clamp(16px,1vw,24px);box-shadow:0 30px 80px rgba(0,0,0,.6);pointer-events:auto;opacity:0;transform:translateY(6px);transition:opacity .25s,transform .25s;visibility:hidden}
.card-pop.on{opacity:1;transform:none;visibility:visible}
.card-pop h4{font-family:Sofia,sans-serif;font-weight:300;text-transform:uppercase;letter-spacing:.04em;font-size:clamp(22px,1.1vw,28px);line-height:1.05;margin:.35em 0 .3em}
.card-pop .what{color:var(--soft);font-size:var(--t-small)}
.card-pop .vals{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:14px 0 12px;border-top:1px solid var(--line);padding-top:12px}
.card-pop .vals div{display:grid;gap:2px}
.card-pop .vals span{font-family:Sofia,sans-serif;text-transform:uppercase;letter-spacing:.14em;font-size:11.5px;color:var(--dim)}
.card-pop .vals b{font-family:Sofia,sans-serif;font-weight:300;font-size:clamp(24px,1.2vw,30px);line-height:1}
.card-pop .note{font-size:var(--t-small);color:var(--soft);line-height:1.5}
.card-pop .meta{display:flex;justify-content:space-between;gap:12px;margin-top:12px;align-items:center}
.card-pop .x{position:absolute;top:8px;right:10px;color:var(--dim);font-size:20px;line-height:1;padding:6px}
.method{margin-top:clamp(26px,1.8vw,46px);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(18px,2vw,60px);align-items:start;border-top:1px solid var(--line);padding-top:clamp(18px,1.2vw,30px)}
.method p{color:var(--dim);font-size:var(--t-small);max-width:70em}

/* ---------- 03 gallery highlights */
.reel{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:auto;gap:clamp(12px,.9vw,24px);margin-top:clamp(36px,2.6vw,70px)}
.tile{position:relative;background:var(--card);border:1px solid var(--line);display:grid;grid-template-rows:auto 1fr;overflow:hidden;transition:border-color .3s}
.tile:hover{border-color:var(--line2)}
.tile.big{grid-column:span 2;grid-row:span 2}
.tile .pic{position:relative;aspect-ratio:16/9;background:#09090a;overflow:hidden}
.tile .pic img{width:100%;height:100%;object-fit:cover;object-position:var(--op,50% 50%);transition:transform 1.2s var(--ease),opacity .6s;opacity:.92}
.tile:hover .pic img{transform:scale(1.03);opacity:1}
.tile .pic::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(11,11,12,.7),rgba(11,11,12,0) 45%);pointer-events:none}
.tile .pic .tags{position:absolute;left:12px;top:12px;z-index:2;display:flex;gap:6px;flex-wrap:wrap}
.tile .pic .tags .chip{background:rgba(3,3,4,.72);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.tile .play{position:absolute;z-index:3;left:12px;bottom:12px;display:inline-flex;align-items:center;gap:.6em;font-size:var(--t-small);padding:.55em .95em;border:1px solid var(--line2);background:rgba(3,3,4,.62);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:border-color .3s}
.tile .play:hover{border-color:var(--gold)}
.tile .play i{font-style:normal;color:var(--gold)}
.tile .body{padding:clamp(14px,.9vw,22px);display:grid;align-content:start;gap:.55em}
.tile .body .h3{font-size:clamp(20px,1.02vw,26px)}
.tile.big .body .h3{font-size:clamp(24px,1.4vw,36px)}
.tile .by{font-size:var(--t-small);color:var(--dim)}
.tile .by a{color:var(--soft);border-bottom:1px solid var(--line2)}
.tile .what{font-size:var(--t-small);color:var(--soft);overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.tile.big .what{-webkit-line-clamp:6;font-size:var(--t-body)}
.tile .vs{display:flex;flex-wrap:wrap;gap:6px;margin-top:.2em}
.verdict{font-family:Sofia,sans-serif;text-transform:uppercase;letter-spacing:.16em;font-size:clamp(11.5px,.54vw,14px)}
.verdict.strong{color:var(--gold)}.verdict.decent{color:var(--soft)}.verdict.weak{color:#c9a58f}.verdict.failure{color:var(--opus)}
.tile .typo{position:absolute;inset:0;display:grid;place-items:center;padding:24px;text-align:center;background:radial-gradient(80% 80% at 50% 40%,rgba(230,207,154,.06),rgba(3,3,4,0)),var(--card-2)}
.tile .typo span{font-family:Sofia,sans-serif;text-transform:uppercase;letter-spacing:.2em;color:var(--faint);font-size:var(--t-eng)}
.embed-slot{position:absolute;inset:0;z-index:4;background:#000;display:grid;place-items:center;overflow:auto}
.embed-slot iframe{width:100%;height:100%;border:0}
.embed-slot.x{background:#0b0b0c;place-items:start center;padding:8px}
.reel-foot{display:flex;flex-wrap:wrap;gap:clamp(16px,1.4vw,36px);align-items:center;justify-content:space-between;margin-top:clamp(26px,1.8vw,46px)}

/* ---------- 04 my own work */
.own-intro{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(30px,5vw,140px);align-items:start;margin-top:clamp(36px,2.6vw,70px)}
.rule-quote{border-left:1px solid var(--brass);padding-left:clamp(18px,1.4vw,36px);display:grid;gap:14px}
.rule-quote p.title{font-size:clamp(26px,1.7vw,44px);line-height:1.08;text-transform:none;letter-spacing:.005em;font-weight:300}
.benches{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,1.2vw,30px);margin-top:clamp(48px,3.4vw,90px)}
.bench{border:1px solid var(--line);background:linear-gradient(180deg,rgba(255,220,171,.03),rgba(11,11,12,0) 50%),var(--card);padding:clamp(20px,1.6vw,40px);display:grid;gap:clamp(14px,1vw,24px);align-content:start}
.bench.lit{border-color:rgba(179,146,88,.55)}
.bench .eng{color:var(--soft)}
.bench .h3{font-size:clamp(24px,1.4vw,36px)}
.h3x{font-size:clamp(28px,1.75vw,46px)!important;line-height:1.02}
.ctx{position:relative;height:clamp(54px,3.2vw,82px);border:1px solid var(--line2);background:#070708}
.ctx .fill{z-index:1}
.ctx .at{position:absolute;top:50%;transform:translateY(-50%);font-family:Sofia,sans-serif;font-size:clamp(20px,1.2vw,30px);color:var(--ink);white-space:nowrap;z-index:2}
.ctx-axis{display:flex;justify-content:space-between;font-family:Sofia,sans-serif;letter-spacing:.14em;font-size:12.5px;color:var(--dim);text-transform:uppercase;margin-top:6px}
.ctx .fill{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,rgba(230,207,154,.2),rgba(230,207,154,.08));border-right:1px solid var(--gold)}
.ctx .cut{position:absolute;top:0;bottom:0;width:0;border-left:1px dashed var(--opus)}
.ctx .cutl{position:absolute;bottom:6px;font-size:12.5px;color:var(--opus);white-space:nowrap;padding-left:7px}
.ctx .scale{position:absolute;left:8px;top:6px;font-family:Sofia,sans-serif;letter-spacing:.14em;font-size:12px;color:var(--dim);text-transform:uppercase}
.facts{display:grid;gap:10px;font-size:var(--t-small);color:var(--soft)}
.facts li{list-style:none;display:grid;grid-template-columns:auto 1fr;gap:12px}
.facts li::before{content:"";width:6px;height:6px;margin-top:.62em;border:1px solid var(--brass);transform:rotate(45deg)}

.h2h{margin-top:clamp(70px,5vw,130px);display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(30px,4vw,110px);align-items:start}
.h2h-table{display:grid;gap:0;border-top:1px solid var(--line)}
.h2h-row{display:grid;grid-template-columns:minmax(120px,.8fr) minmax(0,1fr) minmax(0,1fr);gap:clamp(12px,1.2vw,30px);align-items:center;padding:clamp(12px,.8vw,20px) 0;border-bottom:1px solid var(--line)}
.h2h-row.head{padding-block:clamp(10px,.6vw,14px)}
.h2h-row .k{font-size:var(--t-small);color:var(--soft)}
.h2h-row .v{display:grid;gap:6px}
.h2h-row .v b{font-family:Sofia,sans-serif;font-weight:300;font-size:clamp(28px,1.75vw,46px);line-height:1;font-variant-numeric:tabular-nums}
.h2h-row .v small{font-size:var(--t-small);color:var(--dim)}
.h2h-row .bar{height:4px;background:var(--line);position:relative}
.h2h-row .bar i{position:absolute;left:0;top:0;bottom:0;background:var(--gold);width:0;transition:width 1.4s var(--ease)}
.h2h-row .v.alt .bar i{background:var(--soft)}
.in .h2h-row .bar i{width:var(--w)}
.verdict-line{margin-top:clamp(18px,1.2vw,30px);display:grid;gap:10px}

.condense{margin-top:clamp(70px,5vw,130px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,4vw,110px);align-items:start}
.timeline{display:grid;gap:clamp(22px,1.6vw,40px)}
.tl{display:grid;gap:10px}
.tl .run{position:relative;height:30px;margin-block:10px;background:rgba(241,239,233,.035);border-radius:2px}
.tl .seg{position:absolute;top:0;bottom:0;border-radius:2px;background:linear-gradient(180deg,rgba(227,154,127,.34),rgba(227,154,127,.16));transform-origin:0 50%;transform:scaleX(0);transition:transform 1.1s var(--ease)}
.in .tl .seg{transform:none}
.tl .tk{position:absolute;top:-10px;bottom:-10px;width:2px;margin-left:-1px;background:var(--opus);box-shadow:0 0 12px rgba(227,154,127,.55);transform:scaleY(0);transition:transform .45s var(--ease)}
.in .tl .tk{transform:none}
.tl.calm .seg{background:linear-gradient(180deg,rgba(230,207,154,.5),rgba(230,207,154,.22));box-shadow:0 0 24px rgba(230,207,154,.16)}
.tl .lim{position:absolute;top:-10px;bottom:-10px;border-left:1px dashed rgba(241,239,233,.45)}
.tl .lim .short{display:none}
.tl .lim span{font-style:normal;position:absolute;right:10px;top:50%;transform:translateY(-50%);white-space:nowrap;font-family:Sofia,sans-serif;letter-spacing:.14em;font-size:12.5px;text-transform:uppercase;color:var(--dim)}
.tl .ends{display:flex;justify-content:space-between;font-family:Sofia,sans-serif;letter-spacing:.14em;font-size:12.5px;color:var(--dim);text-transform:uppercase}
.tl .cap{font-size:var(--t-small);color:var(--soft);display:grid;grid-template-columns:auto minmax(0,1fr);align-items:baseline;column-gap:.55em}
.tl .cap b{font-family:Sofia,sans-serif;font-weight:300;font-size:clamp(30px,1.9vw,48px);color:var(--ink);line-height:1}

.jobs{margin-top:clamp(70px,5vw,130px)}
.jobs-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:clamp(8px,.5vw,12px);margin-top:clamp(26px,1.8vw,46px)}
.job{border:1px solid var(--line);padding:clamp(12px,.7vw,18px);display:grid;gap:8px;min-height:clamp(118px,6.2vw,160px);align-content:space-between;background:var(--card);position:relative}
.job .k{font-family:Sofia,sans-serif;text-transform:uppercase;letter-spacing:.14em;font-size:12px;color:var(--dim);line-height:1.35}
.job .g{font-size:var(--t-small);line-height:1.3}
.job .s{font-size:12.5px;color:var(--dim);font-variant-numeric:tabular-nums}
.job.good{border-color:var(--gold);background:linear-gradient(180deg,rgba(230,207,154,.12),rgba(11,11,12,0)),var(--card)}
.job.close{border-color:rgba(230,207,154,.5)}
.job.usable{border-color:var(--line2)}
.job.low{border-style:dashed}
.job.ag::after{content:"";position:absolute;right:10px;top:10px;width:8px;height:8px;border-radius:50%;background:var(--opus)}
.job-key{display:flex;flex-wrap:wrap;gap:clamp(12px,1.2vw,30px);margin-top:16px;font-size:var(--t-small);color:var(--soft)}
.job-key span{display:inline-flex;align-items:center;gap:.6em}
.job-key i{display:inline-block;width:16px;height:12px;border:1px solid var(--line2)}
.job-key i.good{border-color:var(--gold);background:rgba(230,207,154,.25)}
.job-key i.close{border-color:rgba(230,207,154,.55)}
.job-key i.low{border-style:dashed}
.job-key i.ag{border:0;width:8px;height:8px;border-radius:50%;background:var(--opus)}
.caught{margin-top:clamp(30px,2vw,52px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,3vw,80px)}

.tests{margin-top:clamp(70px,5vw,130px)}
.test-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1vw,26px);margin-top:clamp(26px,1.8vw,46px)}
.test{border-top:1px solid var(--brass);padding-top:clamp(16px,1.1vw,28px);display:grid;gap:clamp(10px,.7vw,16px);align-content:start}
.test .num{font-size:var(--t-num-xl)}
.test .num.word{font-size:clamp(34px,2.4vw,62px);color:var(--soft)}
.test .copy{font-size:var(--t-small)}
.test .can{border-top:1px solid var(--line);padding-top:10px;font-size:var(--t-small);color:var(--dim)}
.test .can b{font-weight:400;color:var(--soft)}

/* ---------- 05 running it */
.run-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.4vw,36px);margin-top:clamp(36px,2.6vw,70px)}
.lv{border:1px solid var(--line);background:var(--card);padding:clamp(16px,1.1vw,28px);display:grid;gap:10px;align-content:start}
.lv .h3{font-size:clamp(20px,1.05vw,27px)}
.lv svg{width:100%;height:auto;overflow:visible}
.lv svg text{font-family:Hanken,sans-serif;fill:var(--dim);font-size:13px}
.lv svg .lbl{font-family:Sofia,sans-serif;letter-spacing:.08em;font-size:14px}
.lv .find{font-size:var(--t-small);color:var(--soft)}
.lv .src{font-size:12.5px;color:var(--faint)}
.trap{margin-top:clamp(56px,4vw,110px);display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(30px,4vw,110px);align-items:center}
.cap-bars{display:grid;gap:clamp(14px,1vw,24px)}
.capbar{display:grid;gap:8px}
.capbar .lab{display:flex;justify-content:space-between;font-size:var(--t-small);color:var(--soft)}
.capbar .lab b{font-weight:400;color:var(--ink)}
.capbar .bar{height:clamp(30px,1.9vw,48px);border:1px solid var(--line2);position:relative;display:flex}
.capbar .bar i{display:block;height:100%}
.capbar .bar .th{background:repeating-linear-gradient(135deg,rgba(227,154,127,.55) 0 6px,rgba(227,154,127,.3) 6px 12px)}
.capbar .bar .an{background:var(--gold)}
.capbar .bar .em{flex:1}
.capbar .bar .note{position:absolute;right:10px;top:50%;transform:translateY(-50%);font-family:Sofia,sans-serif;letter-spacing:.14em;font-size:12.5px;text-transform:uppercase;color:var(--ink)}
.price{margin-top:clamp(56px,4vw,110px);display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(30px,4vw,110px);align-items:start}
.price-scale{position:relative;margin-top:10px}
.price-row{--k:.84;display:grid;grid-template-columns:clamp(130px,8vw,200px) 1fr;gap:16px;align-items:center;padding:clamp(10px,.6vw,14px) 0;border-bottom:1px solid var(--line)}
.price-row .who{font-size:var(--t-small);color:var(--soft)}
.price-row .who b{display:block;font-weight:400;color:var(--ink)}
.price-row .bars{position:relative;height:28px}
.price-row .bars i{position:absolute;top:4px;height:20px;left:0}
.price-row .bars .in-p{background:currentColor;opacity:.55}
.price-row .bars .out-p{border:1px solid currentColor;background:transparent}
.price-row .bars span{position:absolute;top:2px;font-family:Sofia,sans-serif;font-size:clamp(18px,1vw,24px);color:var(--ink);white-space:nowrap}
.brief-list{margin-top:clamp(56px,4vw,110px);display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(22px,1.6vw,40px)}
.brief-list ol{list-style:none;counter-reset:b;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(30px,4vw,110px);border-top:1px solid var(--line)}
.brief-list li{counter-increment:b;display:grid;grid-template-columns:clamp(40px,2.4vw,60px) 1fr;gap:12px;padding:clamp(14px,.9vw,22px) 0;border-bottom:1px solid var(--line)}
.brief-list li::before{content:counter(b,decimal-leading-zero);font-family:Sofia,sans-serif;color:var(--gold);letter-spacing:.1em;font-size:var(--t-eng);padding-top:.25em}
.brief-list li b{display:block;font-weight:500;color:var(--ink)}
.brief-list li span{color:var(--soft);font-size:var(--t-small)}

/* ---------- 06 by kind of work */
.kinds{margin-top:clamp(36px,2.6vw,70px);border-top:1px solid var(--line)}
.kinds .row{display:grid;grid-template-columns:minmax(0,1.1fr) repeat(3,minmax(0,.55fr)) minmax(0,2.1fr);gap:clamp(12px,1.2vw,30px);padding:clamp(14px,.9vw,22px) 0;border-bottom:1px solid var(--line);align-items:start}
.kinds .row.head{padding-block:clamp(10px,.6vw,14px);align-items:end}
.kinds .row.head span{font-family:Sofia,sans-serif;text-transform:uppercase;letter-spacing:.18em;font-size:var(--t-eng);color:var(--dim)}
.kinds .kname b{display:block;font-weight:500;color:var(--ink)}
.kinds .kname span{font-size:var(--t-small);color:var(--dim)}
.kinds .ev{font-size:var(--t-small);color:var(--soft)}
.kinds .ev .p10{display:inline-block;margin-top:8px;border:1px solid var(--brass);color:var(--gold);font-family:Sofia,sans-serif;letter-spacing:.14em;text-transform:uppercase;font-size:12px;padding:.25em .6em}
.st{display:inline-flex;align-items:center;gap:.5em;font-size:var(--t-small);color:var(--soft);white-space:nowrap}
.st i{width:12px;height:12px;border-radius:50%;border:1.5px solid var(--argon);display:inline-block;flex:none}
.st.ahead i{background:var(--argon)}
.st.level i{background:linear-gradient(90deg,var(--argon) 50%,transparent 50%)}
.st.mixed i{background:repeating-linear-gradient(135deg,var(--argon) 0 2px,transparent 2px 4px)}
.st.behind i{border-color:var(--dim)}
.st.none{color:var(--faint)}
.st.none i{border-color:var(--faint);border-style:dashed}
.st .who{display:none}
.strength{font-family:Sofia,sans-serif;letter-spacing:.14em;text-transform:uppercase;font-size:12px;color:var(--dim);margin-top:6px;display:block}

/* ---------- 07 the record */
.drawer{margin-top:clamp(30px,2vw,52px);border-top:1px solid var(--line2)}
.drawer>summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px;align-items:center;padding:clamp(18px,1.2vw,30px) 0}
.drawer>summary::-webkit-details-marker{display:none}
.drawer>summary .title{font-size:clamp(26px,1.6vw,42px)}
.drawer>summary .small{margin-top:6px;max-width:68ch}
.drawer>summary .go i{transition:transform .3s}
.drawer[open]>summary .go i{transform:rotate(180deg)}
.filters{display:flex;flex-wrap:wrap;gap:clamp(10px,.8vw,20px) clamp(16px,1.6vw,40px);align-items:center;padding:clamp(12px,.8vw,20px) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5;background:rgba(3,3,4,.94);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.filters label{display:inline-flex;align-items:center;gap:.6em;font-size:var(--t-small);color:var(--dim)}
.filters select,.filters input{font:inherit;font-size:var(--t-small);color:var(--ink);background:var(--card);border:1px solid var(--line2);padding:.45em .7em;border-radius:0}
.filters input{min-width:14em}
.filters .count{margin-left:auto;font-size:var(--t-small);color:var(--soft)}
.btable{width:100%;border-collapse:collapse;font-size:var(--t-cell)}
.btable th{font-family:Sofia,sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:.16em;font-size:var(--t-eng);color:var(--dim);text-align:left;padding:12px 10px;border-bottom:1px solid var(--line2);white-space:nowrap}
.btable th.n,.btable td.n{text-align:right}
.btable td{padding:12px 10px;border-bottom:1px solid var(--line);vertical-align:top}
.btable td.b{min-width:16em}
.btable td.b b{display:block;font-weight:500;color:var(--ink)}
.btable td.b span{display:block;color:var(--dim);font-size:.92em;margin-top:2px}
.btable td.n{font-family:Sofia,sans-serif;font-size:1.38em;line-height:1.1;font-variant-numeric:tabular-nums;white-space:nowrap}
.btable td.n.best{color:var(--gold)}
.btable td.n small{display:block;font-family:Hanken,sans-serif;font-size:.6em;color:var(--dim)}
.btable td.n.none{color:var(--faint)}
.btable td.by .chip{font-size:11.5px}
.btable td.nt{color:var(--soft);font-size:.94em;max-width:30em}
.btable td.nt a{color:var(--gold);border-bottom:1px solid rgba(230,207,154,.4)}
.btable tr.more td{border-bottom:0;padding-top:0}
.btable .pos{font-family:Sofia,sans-serif;letter-spacing:.12em;text-transform:uppercase;font-size:11.5px;display:block;margin-top:4px}
.btable .pos.ahead{color:var(--gold)}.btable .pos.behind{color:var(--dim)}.btable .pos.between,.btable .pos.level{color:var(--soft)}
.archive{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(10px,.8vw,20px);margin-top:clamp(18px,1.2vw,30px)}
.archive .tile .what{-webkit-line-clamp:3}
.yt-moments{display:flex;flex-wrap:wrap;gap:6px}
.yt-moments button{font-size:12.5px;border:1px solid var(--line2);padding:.3em .6em;color:var(--soft);font-variant-numeric:tabular-nums}
.yt-moments button:hover,.yt-moments button.on{border-color:var(--gold);color:var(--ink)}
.more-row{display:flex;justify-content:center;margin-top:clamp(20px,1.4vw,36px)}
.notes-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,80px);margin-top:clamp(36px,2.6vw,70px)}
.notes-grid h3{margin-bottom:14px}
.notes-grid ul{list-style:none;display:grid;gap:10px;color:var(--soft);font-size:var(--t-small)}
.notes-grid li{padding-left:18px;position:relative}
.notes-grid li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;border:1px solid var(--brass);transform:rotate(45deg)}
.sources a{color:var(--soft);border-bottom:1px solid var(--line2)}
.sources ul{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:28px}
.sources a:hover{color:var(--gold)}

/* ---------- name plate */
.plate-end{padding-block:clamp(90px,8vw,210px) clamp(110px,8vw,200px);display:grid;gap:clamp(16px,1.2vw,30px);border-top:1px solid var(--line);background:radial-gradient(60% 80% at 20% 100%,rgba(255,220,171,.05),rgba(3,3,4,0))}
.plate-end .title{font-size:var(--t-display)}
.plate-end .links{display:flex;flex-wrap:wrap;gap:12px;margin-top:10px}

/* ---------- laptops: headline above, columns kept */
@media (max-width:1700px){
  .test-grid{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:clamp(36px,3vw,60px)}
  .run-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .reel{grid-template-columns:repeat(3,minmax(0,1fr))}
  .archive{grid-template-columns:repeat(3,minmax(0,1fr))}
  .kinds .row{grid-template-columns:minmax(0,1.2fr) repeat(3,minmax(0,.7fr)) minmax(0,2fr)}
}
@media (max-width:1180px){
  .shape-top{grid-template-columns:minmax(0,1fr)}
  .tally{justify-content:flex-start}
  .brief-list ol{grid-template-columns:minmax(0,1fr)}
  .jobs-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .arrive{grid-template-columns:minmax(0,62%) 1fr}
  .readouts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .own-intro,.h2h,.condense,.trap,.price,.brief-list,.caught{grid-template-columns:minmax(0,1fr)}
  .notes-grid{grid-template-columns:minmax(0,1fr)}
  .benches{grid-template-columns:minmax(0,1fr)}
  .reel{grid-template-columns:repeat(2,minmax(0,1fr))}
  .archive{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kinds .row{grid-template-columns:minmax(0,1fr) repeat(3,auto);row-gap:8px}
  .kinds .row .ev{grid-column:1/-1}
  .kinds .row.head .evh{display:none}
}

/* ---------- phone */
@media (max-width:760px){
  .top{padding:16px var(--pad);gap:14px;background:linear-gradient(180deg,rgba(3,3,4,.85),rgba(3,3,4,0))}
  .top nav a:not(.keep):not(.work){display:none}
  .top nav a{white-space:nowrap}.top nav a.work{color:var(--gold)}.top nav a.work::after{content:"\2192";margin-left:.7em}   /* Work with me stays, in gold, as on the homepage */
  .arrive{display:block;min-height:auto;padding-bottom:0}
  .room{position:relative;inset:auto;height:clamp(200px,34svh,260px);margin:0 calc(-1*var(--pad))}
  .room img{object-position:58% 46%}
  .room::before{background:linear-gradient(0deg,var(--bg) 2%,rgba(3,3,4,.15) 46%,rgba(3,3,4,.55) 100%)}
  .room figcaption{display:none}
  .arrive-text{padding-top:6px;gap:16px}
  .plate{width:auto}
  .plate .el{width:56px;flex:none}
  .plate .el b{font-size:30px}
  .plate .who .name{font-size:16px}
  .readouts{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 18px;margin-top:30px;padding-bottom:40px}
  .ro .num{font-size:38px}
  .scroll-cue{display:none}
  .rail{left:var(--pad);bottom:14px}
  .rail li button{width:18px}
  .rail .lab{font-size:11.5px}
  .rail-fade{display:none}
  .rail{left:0;right:0;bottom:0;padding:11px var(--pad) calc(11px + env(safe-area-inset-bottom,0px));background:rgba(6,6,7,.95);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-top:1px solid var(--line)}
  .sec{padding-block:72px}
  .tally{gap:22px 30px}
  .tally .num{font-size:52px}
  .method{grid-template-columns:minmax(0,1fr)}
  .price-row{--k:.56;grid-template-columns:110px 1fr}
  .reel{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin-inline:calc(-1*var(--pad));padding-inline:var(--pad);scrollbar-width:none;padding-bottom:6px}
  .reel::-webkit-scrollbar{display:none}
  .reel .tile{flex:0 0 84%;scroll-snap-align:start}
  .tile.big{grid-column:auto;grid-row:auto}
  .tile.big .what{-webkit-line-clamp:4;font-size:var(--t-small)}
  .h2h-row{grid-template-columns:minmax(0,.9fr) minmax(0,1fr) minmax(0,1fr)}
  .h2h-row .v b{font-size:27px}
  .test-grid,.run-grid{grid-template-columns:minmax(0,1fr)}
  .jobs-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .jobs-grid{gap:6px}
  .job{min-height:0;padding:9px 10px;gap:4px}
  .job .g{font-size:13px}
  .job .k{font-size:10.5px;letter-spacing:.1em}
  .job .s{display:none}
  .job.ag::after{top:9px;right:8px;width:6px;height:6px}
  .kinds .row{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:12px}
  .st{white-space:normal;flex-wrap:wrap;row-gap:2px;font-size:13.5px}
  .st .who{display:block;width:100%;font-family:Sofia,sans-serif;letter-spacing:.12em;text-transform:uppercase;font-size:11px}
  .kinds .row .kname{grid-column:1/-1}
  .kinds .row.head{display:none}
  .filters{gap:10px 14px}
  .filters input{min-width:0;width:100%}
  .filters .count{margin-left:0;width:100%}
  .btable thead{display:none}
  .btable,.btable tbody,.btable tr,.btable td{display:block;width:100%}
  .btable tr.r{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:8px;padding:14px 0;border-bottom:1px solid var(--line)}
  .btable tr.r td{border:0;padding:0}
  .btable tr.r td.b{grid-column:1/-1;margin-bottom:10px;min-width:0}
  .btable tr.r td.n{text-align:left;font-size:22px}
  .btable tr.r td.n::before{content:attr(data-k);display:block;font-family:Sofia,sans-serif;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-bottom:3px}
  .btable tr.r td.by{grid-column:1/-1;margin-top:10px}
  .btable tr.r td.nt{grid-column:1/-1;margin-top:8px}
  .archive{grid-template-columns:minmax(0,1fr)}
  .card-pop{position:fixed;left:0!important;right:0;bottom:0;top:auto!important;width:auto;border-width:1px 0 0;padding:22px var(--pad) 30px;transform:translateY(20px)}
}
@media (prefers-reduced-motion:reduce){
  .room img{animation:none}
  .js [data-in]{opacity:1;transform:none;transition:none}
  *{transition-duration:.01ms!important}
}

@media (max-width:1500px){.tl .lim .long{display:none}.tl .lim .short{display:inline}}
@media (max-width:370px){.top nav a.keep{display:none}}   /* narrower phones keep the name and Work with me: all three ran to two lines at 320 and touched at 360 */
@media (max-width:640px){.tl .lim span{font-size:11px;letter-spacing:.1em}}

.idx-arrive{min-height:auto;padding-top:clamp(130px,10vw,250px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,5vw,140px);align-items:end}
.idx-arrive .arrive-text{padding-top:0;max-width:60em}
.idx-rule{align-self:end;max-width:44em;justify-self:end}
.shelf{padding-block:clamp(28px,2.6vw,70px) clamp(80px,6vw,160px)}
.report-card{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);border:1px solid var(--line2);background:var(--card);overflow:hidden;transition:border-color .4s}
.report-card:hover{border-color:var(--brass)}
.report-card figure{margin:0;position:relative;min-height:clamp(300px,21vw,540px)}
.report-card figure img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.6s var(--ease)}
.report-card:hover figure img{transform:scale(1.03)}
.report-card figure::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(11,11,12,0) 60%,var(--card))}
.rc-body{padding:clamp(22px,2vw,56px);display:grid;align-content:center;gap:clamp(14px,1vw,24px)}
.rc-body .h2{font-size:clamp(28px,1.9vw,50px)}
.rc-body .go{justify-self:start}
.shelf-next{border:1px dashed var(--line);display:grid;align-content:end;gap:8px;padding:clamp(18px,1.4vw,36px)}
@media (max-width:1180px){.idx-arrive{grid-template-columns:minmax(0,1fr)}.idx-rule{justify-self:start}}
@media (max-width:760px){.report-card{grid-template-columns:minmax(0,1fr)}.report-card figure{min-height:220px}.report-card figure::after{background:linear-gradient(0deg,var(--card),rgba(11,11,12,0) 50%)}}