section{padding:clamp(80px,10vw,140px) 0;border-top:1px solid var(--line)}
.head{display:grid;grid-template-columns:200px 1fr;gap:32px;margin-bottom:48px}
.head .eyebrow{color:var(--red);padding-top:10px}
.head h2{font-size:clamp(2.2rem,5vw,4rem)}
.head p{margin-top:18px;max-width:60ch;color:var(--muted);font-size:1.1rem}
@media (max-width:760px){.head{grid-template-columns:1fr;gap:12px}}

.cover{min-height:88svh;background:var(--red);color:var(--plaster);display:grid;place-items:center;text-align:center;position:relative;border:0}
.cover img{width:min(560px,80vw);height:auto;margin:0 auto}
.cover p{margin-top:36px}
.cover .back{position:absolute;top:24px;left:24px;font-weight:600;text-decoration:none;opacity:.85}
.cover .back:hover{opacity:1;text-decoration:underline}

.idea{display:grid;grid-template-columns:auto 1fr;gap:clamp(32px,6vw,96px);align-items:center}
.idea img{width:clamp(140px,20vw,240px);height:auto}
.idea p{font:700 clamp(1.4rem,2.6vw,2.2rem)/1.25 var(--display);font-variation-settings:"FLAR" 60;letter-spacing:-.02em;color:var(--oxblood);text-wrap:balance}
.idea p+p{font:400 1.1rem/1.6 var(--display);color:var(--muted);letter-spacing:0;margin-top:20px}
@media (max-width:760px){.idea{grid-template-columns:1fr}}

.logos{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.logo-tile{margin:0;border-radius:12px;aspect-ratio:16/9;display:grid;place-items:center;position:relative;border:1px solid var(--line)}
.logo-tile img{width:52%;height:auto}
.logo-tile.m img{width:22%}
.logo-tile figcaption{position:absolute;left:18px;bottom:14px;font:500 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;opacity:.7}
.logo-tile a{position:absolute;right:18px;bottom:12px;font:600 13px/1 var(--display)}
.rules{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:36px}
.rules div{border-top:2px solid var(--oxblood);padding-top:14px}
.rules b{display:block;margin-bottom:6px}
.rules p{color:var(--muted);font-size:15px}
@media (max-width:760px){.logos,.rules{grid-template-columns:1fr}}

.swatches{display:grid;grid-template-columns:2fr 1fr 1fr;grid-auto-rows:220px;gap:14px}
.sw{border-radius:12px;padding:20px;display:flex;flex-direction:column;justify-content:space-between;border:1px solid var(--line)}
.sw b{font:800 22px/1.1 var(--display);font-variation-settings:"FLAR" 100}
.sw span{display:block;font:400 12px/1.6 var(--mono)}
.sw.big{grid-row:span 2}
.ratio{display:flex;height:28px;border-radius:999px;overflow:hidden;margin-top:28px;border:1px solid var(--line)}
.ratio i{display:block}
.ratio-cap{margin-top:10px;font:400 12px/1.5 var(--mono);color:var(--muted)}
@media (max-width:760px){.swatches{grid-template-columns:1fr 1fr;grid-auto-rows:170px}.sw.big{grid-column:span 2;grid-row:auto}}

.type{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.spec{background:#fff;border-radius:12px;padding:clamp(22px,3vw,36px);border:1px solid var(--line)}
.spec .label{font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--red)}
.glyphs{font:800 clamp(6rem,14vw,11rem)/.9 var(--display);font-variation-settings:"FLAR" 100;color:var(--oxblood);margin:18px 0 8px;letter-spacing:-.04em}
.spec .meta{font:400 12px/1.6 var(--mono);color:var(--muted);margin-top:12px}
.scale{grid-column:1/-1;display:grid;gap:22px}
.scale div{display:grid;grid-template-columns:180px 1fr;gap:24px;align-items:baseline;border-bottom:1px solid var(--line);padding-bottom:18px}
.scale span{font:400 12px/1.5 var(--mono);color:var(--muted)}
@media (max-width:760px){.type{grid-template-columns:1fr}.scale div{grid-template-columns:1fr;gap:6px}}

/* the tape, same component as the homepage */
.ba{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:12px;background:var(--oxblood);user-select:none;--pos:50%}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ba .before{clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.ba input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;z-index:4;touch-action:pan-y}
.tape{position:absolute;z-index:3;top:0;bottom:0;left:var(--pos);width:14px;transform:translateX(-7px);pointer-events:none;
  background:repeating-linear-gradient(180deg,var(--plaster) 0 2px,transparent 2px 48px) left/10px 100% no-repeat,repeating-linear-gradient(180deg,rgba(245,238,234,.75) 0 1px,transparent 1px 12px) left/6px 100% no-repeat,var(--red);box-shadow:0 0 24px rgba(0,0,0,.35)}
.case{position:absolute;top:50%;left:50%;width:60px;height:60px;transform:translate(-50%,-50%);border-radius:50%;background:var(--red);border:3px solid var(--plaster);display:grid;place-items:center}
.case svg{width:26px;height:26px}
.ba:has(input:focus-visible) .case{outline:3px solid var(--red);outline-offset:4px}
.tape-notes{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:28px}
.tape-notes p{color:var(--muted);font-size:15px}
.tape-notes b{display:block;color:var(--ink);margin-bottom:4px}
@media (max-width:760px){.tape-notes{grid-template-columns:1fr}}

.photos{display:grid;grid-template-columns:2fr 1fr;grid-template-rows:repeat(2,minmax(180px,22vw));gap:14px}
.photos img{width:100%;height:100%;object-fit:cover;border-radius:12px}
.photos img:first-child{grid-row:span 2}
.dos{list-style:none;padding:0;margin:32px 0 0;display:grid;grid-template-columns:repeat(2,1fr);gap:14px 32px}
.dos li{padding-left:22px;position:relative}
.dos li::before{content:"";position:absolute;left:0;top:.55em;width:10px;height:10px;border-radius:50%;background:var(--red)}
@media (max-width:760px){.photos{grid-template-columns:1fr;grid-template-rows:none}.photos img{aspect-ratio:4/3}.photos img:first-child{grid-row:auto}.dos{grid-template-columns:1fr}}

.voice{display:grid;gap:14px}
.voice article{display:grid;grid-template-columns:1fr 1fr 1fr;gap:24px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:26px}
.voice h3{font-size:1.5rem}
.voice .say,.voice .not{font-size:1.05rem}
.voice .say::before,.voice .not::before{display:block;font:500 11px/1 var(--mono);letter-spacing:.14em;margin-bottom:8px}
.voice .say::before{content:var(--say,"SAY");color:var(--red)}
.voice .not::before{content:var(--not,"NOT");color:var(--muted)}
.voice .not{color:var(--muted);text-decoration:line-through;text-decoration-color:rgba(107,85,80,.5)}
@media (max-width:760px){.voice article{grid-template-columns:1fr}}

.foot{background:var(--oxblood);color:var(--plaster);padding:48px 0;text-align:center;font:400 12px/1.7 var(--mono)}
.foot a{color:inherit}
.cover .cover-lang{position:absolute;top:16px;right:20px}