/* TT-SITE-CSS-001 · R0.1 · 2026-09-14 · Tacit Tessera site r3 — the whole design system. The look is direction B, "Plate" (Gate A1): a dark graphite ground, every skill set a machined builder's plate, red only where the brand puts it. Sources of truth: _design/direction-B_Plate.html (the drawing), TCT-BRD-001 R0.5 §2 (colour) and §4 (component names), TCT-STD-001 R0.3 §4/§4b. RULES THIS FILE ENFORCES - Every text colour clears 4.5:1 on its own ground. --steel (#7A7A7A) is a RULE AND BEVEL colour and is never used for type. --red-dark-type (#FF5B5F) is the only red that carries type on dark, and it needs a ground no lighter than #2C2C2C to clear 4.5:1 — so no dark surface in this file is lighter than that. The brand text reds (#AA0000 / #C81E1E) are white-paper colours. - Tiles are NOT drawn in CSS. A tile is an SVG from tessera/tile.py (viewBox 0 0 400 250, aspect 8:5, width 100%). CSS only sizes its container. - No horizontal overflow at 1280 / 768 / 375 / 320. Anything that cannot reflow (tables, machine forms, diagrams) sits in its own .scrollx. SECTIONS 1 fonts 6 plate components 11 book + filters 2 tokens 7 tile containers 12 verify 3 base + type 8 rack/chain/glyphs 13 light sheets (paper) 4 layout grid 9 tables 14 print: deck, CR80, certificate 5 header/footer 10 card page 15 reveal motion */ /* ==== 1 · FONTS ========================================================= Font URLs are RELATIVE to this stylesheet (../fonts/…), the r1 convention: a relative URL resolves the same over http and from a file:// render, and the stylesheet's own ?v= already busts the cache for the faces it names. */ @font-face{font-family:"Barlow";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/Barlow-400.woff2) format("woff2")} @font-face{font-family:"Barlow";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/Barlow-500.woff2) format("woff2")} @font-face{font-family:"Barlow";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/Barlow-600.woff2) format("woff2")} @font-face{font-family:"Barlow";font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/Barlow-700.woff2) format("woff2")} @font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/BarlowCondensed-600.woff2) format("woff2")} @font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/BarlowCondensed-700.woff2) format("woff2")} /* ==== 2 · TOKENS ======================================================== */ :root{ /* dark grounds — BRD R0.5 §2 */ --void:#121212; /* page ground */ --graphite:#262626; /* brand panels, the plate wall */ --plate:#2B2B2B; /* plate face, lit edge (capped so red type clears 4.5:1) */ --plate-mid:#202020; --plate-dark:#1C1C1C; --deep:#0B0B0B; --hair:#343434; /* hairline rule on dark */ --hair-soft:#2A2A2A; /* brand */ --red:#8E0A0A; /* plate accents, edges, rules */ --red-hi:#C81E1E; /* rules only on dark */ --red-dark-type:#FF5B5F; /* the ONLY red that carries type on dark — 4.98:1 on graphite */ --steel:#7A7A7A; /* RULES AND BEVELS ONLY — never type */ --steel-type:#A8ADB2; /* secondary type on dark — 6.69:1 on graphite */ --body:#F2F3F4; /* body type on dark — 13.6:1 */ --body-dim:#DADDE0; /* light sheets — white paper on the wall */ --paper:#FFFFFF; --paper-tint:#F4F5F6; --ink:#0C0E11; --ink-2:#454B52; /* 8.8:1 on white */ --ink-3:#5C636B; /* 6.1:1 on white */ --p-rule:#D5D9DD; --accent:#AA0000; /* text red on white — 7.75:1 */ --accent-l:#C81E1E; /* text red on white — 5.74:1 */ /* type */ --f-body:Barlow,"Helvetica Neue",Arial,sans-serif; --f-cond:"Barlow Condensed","Arial Narrow",Arial,sans-serif; --f-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace; /* measure */ --wrap:1280px; --gutter:clamp(16px,4vw,56px); /* the machined plate face, reused by the wallet card */ --face:linear-gradient(var(--plate),var(--plate-mid) 62%,var(--plate-dark)); --face-card:linear-gradient(155deg,#2C2C2C,#222222 46%,#191919); } /* ==== 3 · BASE + TYPE =================================================== */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{margin:0;background:var(--void);color:var(--body); font:16px/1.62 var(--f-body);-webkit-font-smoothing:antialiased;overflow-x:hidden} img,svg,video{display:block;max-width:100%} img{height:auto} a{color:var(--body)} a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{outline:2px solid var(--red-dark-type);outline-offset:2px} p{margin:0 0 .8em} p:last-child{margin-bottom:0} h1,h2,h3,h4{font-family:var(--f-cond);font-weight:700;text-transform:uppercase; line-height:1.02;letter-spacing:.005em;margin:0 0 .34em} h1{font-size:clamp(34px,6.6vw,84px)} h2{font-size:clamp(24px,3.4vw,42px)} h3{font-size:clamp(17px,1.9vw,23px)} h4{font-size:clamp(15px,1.5vw,18px)} code,kbd,samp{font-family:var(--f-mono);overflow-wrap:anywhere} hr{border:0} ul,ol{margin:0 0 .9em;padding-left:1.15em} li{margin-bottom:.24em} .lab{font:700 11px/1.5 var(--f-mono);letter-spacing:.2em;text-transform:uppercase; color:var(--steel-type);margin:0 0 .7em} .lab.r{color:var(--red-dark-type)} .lede{font-size:clamp(16px,1.3vw,19px);color:var(--body-dim);max-width:56ch} .sm2{font-size:13.5px;color:var(--steel-type)} .mono{font-family:var(--f-mono);letter-spacing:.1em} .rt{color:var(--red-dark-type)} /* the EXAMPLE stamp, inline form (BRD §4 "example stamp") */ .ex{display:inline-block;font:700 10px/1 var(--f-mono);letter-spacing:.18em; text-transform:uppercase;color:var(--deep);background:var(--steel-type); padding:4px 6px;vertical-align:.12em} /* the EXAMPLE stamp, outlined form — used on plates and cards */ .exs{display:inline-block;font:700 10px/1 var(--f-mono);letter-spacing:.18em; text-transform:uppercase;color:var(--red-dark-type);border:1px solid var(--red); padding:5px 7px} /* the EXAMPLE stamp, struck across a sheet */ .stamp{position:absolute;right:4cqw;top:4cqw;z-index:2; font:700 1.7cqw/1 var(--f-mono);letter-spacing:.2em;text-transform:uppercase; color:var(--accent);border:.28cqw solid var(--accent);padding:1cqw 1.4cqw; transform:rotate(-6deg)} .skip{position:absolute;left:-9999px;top:0;background:var(--graphite);color:var(--body); padding:10px 16px;z-index:50;font:700 12px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase} .skip:focus{left:0} /* ==== 4 · LAYOUT GRID =================================================== */ .w{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)} .sec{padding-block:clamp(22px,3vw,38px)} .sec.tight{padding-block:clamp(14px,2vw,24px)} main{display:block} .narrow{max-width:70ch} /* anything that cannot reflow gets its own scroller, never the page */ .scrollx{overflow-x:auto;-webkit-overflow-scrolling:touch} /* the two-column page body: rail + reading column */ .split{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr); gap:clamp(20px,3vw,40px);align-items:start} @media(max-width:900px){.split{grid-template-columns:1fr}} /* ==== 5 · HEADER / FOOTER ============================================== */ header.site{background:linear-gradient(#1E1E1E,#151515);border-bottom:1px solid #000; box-shadow:0 1px 0 rgba(255,255,255,.06)} header.site .bar{display:flex;align-items:center;gap:clamp(12px,2.4vw,32px); flex-wrap:nowrap;padding-block:14px} /* ONE ROW: the lockup and the menu never stack (owner, 2026-09-14) */ header.site .lockup{flex:0 0 auto;line-height:0} header.site .lockup img{height:clamp(46px,5.2vw,74px);width:auto} .burger{display:none;margin-left:auto;background:#1B1B1B;color:var(--body); border:1px solid var(--hair);font:700 11px/1 var(--f-mono);letter-spacing:.16em; text-transform:uppercase;padding:11px 14px;cursor:pointer} nav.site{display:flex;gap:clamp(10px,1.1vw,16px);flex-wrap:nowrap;align-items:center;flex:0 1 auto;min-width:0; margin-left:auto;font:700 11px/1 var(--f-mono);letter-spacing:.11em;text-transform:uppercase} nav.site a{color:var(--steel-type);text-decoration:none;padding:9px 0; border-bottom:2px solid transparent;white-space:nowrap} nav.site a:hover,nav.site a:focus{color:#fff;border-bottom-color:var(--red-hi)} nav.site a[aria-current="page"]{color:#fff;border-bottom-color:var(--red)} nav.site a.boxed{border:1px solid var(--red);padding:9px 12px;color:var(--body)} nav.site a.boxed:hover,nav.site a.boxed:focus{background:var(--red);color:#fff;border-bottom-color:var(--red)} @media(max-width:1199px){ /* below this the full menu no longer fits beside the lockup on one row: the burger takes over */ header.site .bar{flex-wrap:wrap} /* only so the OPENED menu can drop below the row */ .burger{display:block} nav.site{display:none;order:3;flex:1 0 100%;margin-left:0;flex-direction:column; align-items:stretch;gap:0;border-top:1px solid var(--hair);margin-top:12px} nav.site.open{display:flex} nav.site a{padding:13px 2px;border-bottom:1px solid var(--hair-soft);white-space:normal} nav.site a.boxed{margin-top:10px;text-align:center;border-bottom:1px solid var(--red)} } footer.site{border-top:1px solid var(--hair-soft);margin-top:clamp(44px,6vw,88px); padding-block:clamp(26px,3.4vw,40px) clamp(36px,5vw,60px);background:#0E0E0E} footer.site .fgrid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr)); gap:clamp(18px,3vw,44px)} @media(max-width:1000px){footer.site .fgrid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:600px){footer.site .fgrid{grid-template-columns:1fr;gap:22px}} footer.site h2{font:700 11px/1.4 var(--f-mono);letter-spacing:.18em;text-transform:uppercase; color:var(--red-dark-type);margin:0 0 12px;padding-bottom:9px;border-bottom:1px solid var(--hair)} footer.site a{display:block;color:var(--body-dim);text-decoration:none;font-size:14.5px;padding:5px 0} footer.site a:hover,footer.site a:focus{color:#fff;text-decoration:underline} footer.site .noted{color:var(--steel-type);font-size:13px;padding:5px 0} footer.site .fine{margin-top:clamp(22px,3vw,34px);padding-top:16px; border-top:1px solid var(--hair-soft);font:12px/1.7 var(--f-mono);letter-spacing:.07em; color:var(--steel-type)} footer.site .fine b{color:#E6E8EA;font-weight:700} footer.site .fine p{margin:0 0 4px} /* ==== 6 · PLATE COMPONENTS (BRD R0.5 §4) =============================== */ /* .pl the machined panel · .pl.f flat plate · .pl.acc accent plate .riv the four countersunk marks · .mk the red-ticked section band .hr the hairline · .word the verb plate */ .pl{position:relative;background:var(--face);border:1px solid #0E0E0E; box-shadow:inset 0 1px 0 rgba(255,255,255,.15),inset 0 -1px 0 rgba(0,0,0,.65), 0 2px 0 rgba(0,0,0,.55),0 12px 26px rgba(0,0,0,.42)} .pl.f{background:linear-gradient(#232323,#191919)} .pl.acc{border-left:4px solid var(--red); box-shadow:inset 5px 0 0 rgba(255,255,255,.06),inset 0 1px 0 rgba(255,255,255,.13), 0 2px 0 rgba(0,0,0,.55)} .riv::before{content:"";position:absolute;inset:0;pointer-events:none; background-image: radial-gradient(circle at 13px 13px,#090909 0 3.2px,rgba(255,255,255,.22) 3.2px 4.4px,transparent 4.6px), radial-gradient(circle at calc(100% - 13px) 13px,#090909 0 3.2px,rgba(255,255,255,.22) 3.2px 4.4px,transparent 4.6px), radial-gradient(circle at 13px calc(100% - 13px),#090909 0 3.2px,rgba(255,255,255,.22) 3.2px 4.4px,transparent 4.6px), radial-gradient(circle at calc(100% - 13px) calc(100% - 13px),#090909 0 3.2px,rgba(255,255,255,.22) 3.2px 4.4px,transparent 4.6px)} .mk{display:flex;gap:14px;align-items:baseline;flex-wrap:wrap; margin:clamp(48px,6vw,96px) 0 20px;padding:12px 0 12px 14px; border-block:1px solid var(--hair);border-left:4px solid var(--red); font:700 12px/1.4 var(--f-mono);letter-spacing:.16em;text-transform:uppercase; color:var(--steel-type)} .mk b{color:var(--red-dark-type);font-weight:700} .mk:first-child{margin-top:clamp(24px,3vw,44px)} .hr{height:1px;background:linear-gradient(90deg,var(--red),var(--hair) 34%,var(--hair-soft)); border:0;margin:0} .word{display:inline-block;padding:9px 15px 8px;font:700 13px/1 var(--f-cond); letter-spacing:.2em;text-transform:uppercase;color:#fff; clip-path:polygon(0 0,100% 0,100% 64%,calc(100% - 9px) 100%,0 100%)} .fours{display:grid;gap:14px;margin-top:20px} .four{display:flex;gap:8px;flex-wrap:wrap;align-items:center} .four .k{font:700 10px/1.5 var(--f-mono);letter-spacing:.14em;text-transform:uppercase; color:var(--red-dark-type);flex:0 0 100%} /* .cand — the candidate plate: a boxed list of keyed values */ .cand{margin-top:26px;padding:16px 18px} .cand ul{list-style:none;margin:0;padding:0;display:grid;gap:10px} .cand li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 14px;align-items:baseline} @media(max-width:560px){.cand li{grid-template-columns:1fr}} .cand .k{font:700 10px/1.5 var(--f-mono);letter-spacing:.14em;text-transform:uppercase; color:var(--red-dark-type)} .cand .v{font:700 clamp(15px,1.5vw,19px)/1.25 var(--f-cond);text-transform:uppercase; letter-spacing:.03em;color:#fff} /* .vbox — the verify box */ .vbox{margin-top:16px;padding:16px 18px;border:1px dashed #4A4A4A;background:#151515} .vbox b{display:block;font:700 15px/1.3 var(--f-cond);text-transform:uppercase; letter-spacing:.07em;color:#fff;margin-bottom:6px} .vbox p{margin:0 0 6px;font-size:13.5px;color:var(--steel-type)} .vbox code{display:inline-block;margin-top:8px;font:700 13.5px/1.35 var(--f-mono); letter-spacing:.08em;color:#fff;background:#0C0C0C;border:1px solid #303030;padding:9px 12px} /* .legend — the source-mark key */ .legend{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:22px;padding:0;list-style:none} .legend li,.legend span{font:700 11px/1.35 var(--f-mono);letter-spacing:.1em;text-transform:uppercase; color:var(--steel-type);padding:9px 13px;background:#1F1F1F;border:1px solid #303030; box-shadow:inset 0 1px 0 rgba(255,255,255,.07);margin:0} .legend b{color:#fff} /* ==== 7 · TILE CONTAINERS ============================================== */ /* The tile itself is an SVG generated by tessera/tile.py. CSS never draws it — it only sizes the box and hangs the plate's shadow behind it. */ .tw{margin:0;filter:drop-shadow(0 1px 0 rgba(0,0,0,.8)) drop-shadow(0 7px 15px rgba(0,0,0,.5))} .tw>svg,svg.tile{display:block;width:100%;height:auto;aspect-ratio:8/5} .tcap{font:600 12px/1.5 var(--f-mono);letter-spacing:.1em;text-transform:uppercase; color:var(--steel-type);margin-top:9px} .tcap b{color:#E6E8EA;font-weight:700} .feat{padding:18px} .feat .tw{margin-bottom:14px} .feat dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:5px 16px;margin:0;font-size:13.5px} @media(max-width:480px){.feat dl{grid-template-columns:1fr}} .feat dt{font:700 10.5px/1.7 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--steel-type)} .feat dd{margin:0;color:#E4E6E8} /* ==== 8 · RACK · CHAIN · GLYPH ROW ===================================== */ .rack{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr)); gap:clamp(10px,1.2vw,16px);margin-top:clamp(24px,3vw,40px)} @media(max-width:400px){.rack{grid-template-columns:1fr}} .chain{display:flex;gap:10px;flex-wrap:wrap;align-items:stretch;margin-top:clamp(24px,3vw,38px)} .chain .n{flex:1 1 150px;padding:13px 15px;min-width:0} .chain .n b{display:block;font:700 15px/1.2 var(--f-cond);text-transform:uppercase; letter-spacing:.06em;color:#fff} .chain .n span{font-size:12.5px;color:var(--steel-type)} .chain .ar{align-self:center;color:var(--red);font:700 20px/1 var(--f-mono)} @media(max-width:560px){.chain .ar{display:none}} .gram{padding:clamp(18px,2.6vw,32px)} .glyphs{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-start} .gu{flex:0 0 auto;text-align:center;min-width:54px} .gu .d{font:700 clamp(28px,4vw,52px)/1 var(--f-cond);color:#fff; background:linear-gradient(#2A2A2A,#1C1C1C);border:1px solid #0D0D0D; box-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 0 -2px 0 rgba(0,0,0,.6); padding:10px 13px 8px;letter-spacing:.03em} .gu.mid .d{color:var(--red-dark-type)} .gu .tick{height:16px;width:1px;background:var(--red);margin:0 auto} .gu .n{font:700 10px/1.4 var(--f-mono);letter-spacing:.12em;text-transform:uppercase; color:var(--steel-type);max-width:96px;margin:0 auto} .gu .n em{display:block;font-style:normal;color:#E6E8EA} .mach{margin-top:26px;display:flex;gap:14px;flex-wrap:wrap;align-items:center} .mach code{font:700 clamp(15px,2.2vw,26px)/1.3 var(--f-mono);letter-spacing:.2em;color:#fff; background:#111;border:1px solid #000;box-shadow:inset 0 1px 0 rgba(255,255,255,.08); padding:11px 14px} .mach code i{font-style:normal;color:var(--red-dark-type)} .gnote{margin-top:18px;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px} @media(max-width:400px){.gnote{grid-template-columns:1fr}} .gnote>div{padding:13px 15px} .gnote h3{font:700 13px/1.4 var(--f-mono);letter-spacing:.12em;text-transform:uppercase; color:var(--red-dark-type);margin-bottom:.5em} .gnote p{margin:0;font-size:13.5px;color:#DFE1E3} @media(max-width:520px){.gu{min-width:46px}.legend li,.legend span{font-size:10px}} /* ==== 9 · TABLES ======================================================= */ table.tt{width:100%;border-collapse:collapse;font-size:14.5px;margin:0 0 1em} table.tt caption{text-align:left;font:700 11px/1.5 var(--f-mono);letter-spacing:.18em; text-transform:uppercase;color:var(--red-dark-type);padding-bottom:10px} table.tt th,table.tt td{text-align:left;vertical-align:top;padding:11px 14px 11px 0; border-bottom:1px solid var(--hair-soft)} table.tt thead th{font:700 10.5px/1.6 var(--f-mono);letter-spacing:.13em;text-transform:uppercase; color:var(--steel-type);border-bottom:1px solid var(--hair)} table.tt tbody th{font-weight:600;color:#fff} table.tt td{color:#E4E6E8} @media(max-width:740px){ /* stacked rows: every cell carries its own column name from data-th */ /* the head is taken out of the flow, not hidden, so it stays in the a11y tree. No white-space:nowrap here — a clipped nowrap box reads as truncated text. */ table.tt thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)} /* a display:table-caption inside a display:block table is wrapped in an anonymous shrink-to-fit table box, which squeezes the caption to a column */ table.tt caption{display:block} table.tt,table.tt tbody,table.tt tr,table.tt td,table.tt th{display:block;width:auto} table.tt tr{border-bottom:1px solid var(--hair);padding-block:10px} table.tt tr:last-child{border-bottom:0} table.tt td,table.tt tbody th{border-bottom:0;padding:4px 0} table.tt td[data-th]::before{content:attr(data-th);display:block; font:700 10px/1.6 var(--f-mono);letter-spacing:.13em;text-transform:uppercase; color:var(--steel-type)} } /* ==== 10 · CARD PAGE =================================================== */ .cardpg{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr); gap:clamp(20px,3vw,40px);align-items:start} @media(max-width:900px){.cardpg{grid-template-columns:1fr}} .cardpg .hd{padding:16px} .spec{display:grid;gap:10px} .row2{display:grid;grid-template-columns:190px minmax(0,1fr);gap:4px 20px;padding:13px 16px;margin:0} @media(max-width:900px){.row2{grid-template-columns:1fr}} .row2 dt{font:700 10.5px/1.7 var(--f-mono);letter-spacing:.13em;text-transform:uppercase; color:var(--red-dark-type)} .row2 dd{margin:0;font-size:14.5px;color:#E4E6E8} .row2 dd ul{margin:.2em 0 0;padding-left:18px} .row2 dd li{margin-bottom:.2em} .row2 dd code{font-size:13.5px;letter-spacing:.1em} /* ==== 11 · BOOK: the wall of plates + filters ========================== */ .filters{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 18px;padding:0;list-style:none} .fgroup{display:flex;gap:8px;flex-wrap:wrap;align-items:center; padding:10px 0;border-top:1px solid var(--hair-soft);width:100%} .fgroup>.k{font:700 10px/1.5 var(--f-mono);letter-spacing:.14em;text-transform:uppercase; color:var(--red-dark-type);flex:0 0 108px} @media(max-width:560px){.fgroup>.k{flex:0 0 100%}} .chip{font:700 11px/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase; color:var(--steel-type);background:#1F1F1F;border:1px solid #303030; box-shadow:inset 0 1px 0 rgba(255,255,255,.07);padding:9px 12px;cursor:pointer} .chip:hover{color:#fff} .chip[aria-pressed="true"]{color:#fff;background:#2B2B2B;border-color:var(--red); box-shadow:inset 0 1px 0 rgba(255,255,255,.1),inset 3px 0 0 var(--red)} .count{font:700 11px/1.5 var(--f-mono);letter-spacing:.14em;text-transform:uppercase; color:var(--steel-type);margin:0 0 18px} .count b{color:#fff} .book{display:grid;grid-template-columns:repeat(auto-fill,minmax(224px,1fr)); gap:clamp(14px,1.8vw,24px);padding:0;list-style:none;margin:0} @media(max-width:400px){.book{grid-template-columns:1fr}} .book>li{margin:0;min-width:0} .book a{display:block;text-decoration:none;color:inherit} .book a:hover .tcap b,.book a:focus .tcap b{color:var(--red-dark-type)} .book [hidden]{display:none!important} .book-empty{font-size:14.5px;color:var(--steel-type);padding:18px 0} /* ==== 12 · VERIFY ====================================================== */ .vform{display:flex;gap:10px;flex-wrap:wrap;align-items:stretch;margin:18px 0} .vform label{flex:0 0 100%;font:700 10.5px/1.6 var(--f-mono);letter-spacing:.13em; text-transform:uppercase;color:var(--steel-type)} .vform input{flex:1 1 240px;min-width:0;background:#0C0C0C;border:1px solid #3A3A3A; color:#fff;font:700 16px/1 var(--f-mono);letter-spacing:.16em;padding:13px 14px} .vform button{flex:0 0 auto;background:var(--red);border:1px solid #000;color:#fff; font:700 12px/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase; padding:13px 20px;cursor:pointer} .vform button:hover{background:var(--red-hi)} .vout{padding:16px 18px;margin-top:6px} .vout dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 18px;margin:0} @media(max-width:480px){.vout dl{grid-template-columns:1fr}} .vout dt{font:700 10.5px/1.7 var(--f-mono);letter-spacing:.13em;text-transform:uppercase; color:var(--steel-type)} .vout dd{margin:0;font-size:14.5px;color:#fff} .vout .no{color:var(--red-dark-type)} /* ==== 13 · LIGHT SHEETS — white paper on the wall ====================== */ /* .stage is the hatched shop wall; .sheet is a Letter-portrait facsimile whose every dimension is in cqw, so the same rules drive the printed sheet. */ .stage{padding:clamp(18px,3vw,42px); background:repeating-linear-gradient(135deg,#1B1B1B 0 9px,#171717 9px 18px); border:1px solid #0E0E0E;display:flex;gap:clamp(18px,3vw,40px);flex-wrap:wrap; justify-content:center} .sheet{container-type:inline-size;width:min(600px,100%);aspect-ratio:8.5/11; background:var(--paper);color:var(--ink);position:relative;overflow:hidden; box-shadow:0 3px 0 rgba(0,0,0,.6),0 22px 44px rgba(0,0,0,.55); display:flex;flex-direction:column;padding:4.6cqw 4.6cqw 3.6cqw 8.4cqw} .sheet a{color:var(--accent)} .punch{position:absolute;left:3cqw;top:0;bottom:0;width:2.6cqw} .punch i{position:absolute;left:0;width:2.6cqw;height:2.6cqw;border-radius:50%; background:#E3E5E7;box-shadow:inset 0 1px 2px rgba(0,0,0,.3)} .punch i:nth-child(1){top:17%}.punch i:nth-child(2){top:48.7%}.punch i:nth-child(3){top:80.4%} .shd{display:flex;align-items:flex-end;gap:2.4cqw;border-bottom:.34cqw solid var(--ink); padding-bottom:1.6cqw} .shd img{height:5.2cqw;width:auto} .shd .t{margin-left:auto;text-align:right;font:700 1.8cqw/1.35 var(--f-mono); letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)} .shd .t b{display:block;color:var(--ink);font-size:2.1cqw} /* .strip — one deck row: tile at left, then the line. Never a tall chip. */ .strip{display:grid;grid-template-columns:19cqw minmax(0,1fr);gap:2.6cqw;align-items:center; padding-block:1.9cqw;border-bottom:.14cqw solid var(--p-rule)} .strip:last-of-type{border-bottom:0} .strip .tw{filter:drop-shadow(0 .12cqw 0 rgba(0,0,0,.35)) drop-shadow(0 .5cqw 1cqw rgba(0,0,0,.22))} .strip .num{font:700 2.9cqw/1 var(--f-cond);letter-spacing:.02em;color:var(--ink)} .strip .nm{font:600 2cqw/1.3 var(--f-body);color:var(--ink)} .strip .sc{font:1.66cqw/1.4 var(--f-body);color:var(--ink-3);margin-top:.35cqw} .strip .src{font:700 1.5cqw/1.35 var(--f-mono);letter-spacing:.13em;text-transform:uppercase; color:var(--accent);margin-top:.7cqw} .strip .vfy{font:1.5cqw/1.4 var(--f-mono);letter-spacing:.06em;color:var(--ink-3);margin-top:.35cqw} .sft{margin-top:auto;padding-top:1.8cqw;border-top:.14cqw solid var(--p-rule); display:flex;gap:2cqw;flex-wrap:wrap;font:1.5cqw/1.5 var(--f-mono);letter-spacing:.1em; text-transform:uppercase;color:var(--ink-3)} .sft b{color:var(--accent)} /* the certificate sheet */ .cert{padding:5cqw 5.4cqw 3.6cqw} .cert .ttl{font:700 5.6cqw/1 var(--f-cond);text-transform:uppercase;letter-spacing:.04em; margin:3cqw 0 .5cqw} .cert .sub{font:1.8cqw/1.5 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)} .cert .band{display:flex;gap:3cqw;align-items:flex-start;margin-top:3cqw;padding-top:2.4cqw; border-top:.3cqw solid var(--ink)} .cert .band .tw{flex:0 0 26cqw} .cert dl{display:grid;grid-template-columns:19cqw minmax(0,1fr);gap:.9cqw 2.4cqw;margin:0;flex:1 1 0} .cert dt{font:700 1.5cqw/1.5 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)} .cert dd{margin:0;font:600 1.95cqw/1.35 var(--f-body);color:var(--ink)} .cert dd .sm{font:1.5cqw/1.4 var(--f-mono);letter-spacing:.08em;color:var(--ink-3)} .cert dd .exq{font:700 1.4cqw/1 var(--f-mono);letter-spacing:.14em;color:var(--accent)} .cert .stand{margin-top:2.8cqw;padding:2.2cqw 2.4cqw;background:var(--paper-tint); border-left:.5cqw solid var(--accent)} .cert .stand b{display:block;font:700 2.1cqw/1.2 var(--f-cond);text-transform:uppercase; letter-spacing:.07em;margin-bottom:.8cqw} .cert .stand ul{margin:0;padding-left:2.4cqw;font:1.62cqw/1.5 var(--f-body);color:#2A2E33} .cert .stand li{margin-bottom:.3cqw} .cert .sigs{display:flex;gap:4cqw;margin-top:auto;padding-top:4cqw} .cert .sig{flex:1 1 0;border-top:.22cqw solid var(--ink);padding-top:.9cqw; font:700 1.5cqw/1.4 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)} .cert .sig b{display:block;color:var(--ink);font-size:1.72cqw} .cert .fine{margin-top:2.4cqw;padding-top:1.4cqw;border-top:.14cqw solid var(--p-rule); font:1.42cqw/1.55 var(--f-mono);letter-spacing:.06em;color:var(--ink-3)} .cert .fine b{color:var(--accent)} /* ==== 14 · THE WALLET PLATE (CR80) ==================================== */ .cards{display:flex;gap:clamp(18px,3vw,40px);flex-wrap:wrap;justify-content:center} /* inside a .stage the card row is a flex item: make it span, or it shrinks to one card's width and the two faces stack when they would have fitted */ .stage>.cards{flex:1 1 100%} .stage>.sheet{flex:0 1 auto} .cr80{container-type:inline-size;width:min(452px,100%);aspect-ratio:85.6/54; position:relative;overflow:hidden;background:var(--face-card);border:1px solid #0B0B0B; box-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 0 -1px 0 rgba(0,0,0,.7), 0 3px 0 rgba(0,0,0,.6),0 18px 34px rgba(0,0,0,.55); display:flex;flex-direction:column;padding:5.2cqw 5.4cqw 4.4cqw;color:var(--body)} .cr80::after{content:"";position:absolute;left:0;right:0;top:0;height:1.5cqw; background:linear-gradient(90deg,var(--red),#5C0606 62%,#2A0303)} .cr80 .top{display:flex;gap:4cqw;align-items:flex-start;margin-top:1.4cqw} .cr80 .who{flex:1 1 0;min-width:0} .cr80 .k{font:700 2.2cqw/1.3 var(--f-mono);letter-spacing:.18em;text-transform:uppercase; color:var(--steel-type)} .cr80 .nme{font:700 8.4cqw/1 var(--f-cond);text-transform:uppercase;letter-spacing:.015em; color:#fff;margin:.8cqw 0 1.2cqw} .cr80 .tw{flex:0 0 27cqw} .cr80 .meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6cqw 3cqw;margin-top:2.4cqw} .cr80 .meta span{font:2.55cqw/1.3 var(--f-body);color:#E2E4E6;min-width:0} .cr80 .meta span.wide{grid-column:1 / -1} .cr80 .meta span b{display:block;font:700 2.1cqw/1.4 var(--f-mono);letter-spacing:.14em; text-transform:uppercase;color:var(--steel-type)} .cr80 .base{margin-top:auto;display:flex;gap:3cqw;flex-wrap:wrap;align-items:baseline; padding-top:2.4cqw;border-top:.24cqw solid #3A3A3A;font:700 2.3cqw/1.3 var(--f-mono); letter-spacing:.12em;text-transform:uppercase;color:var(--steel-type)} .cr80 .base b{color:#fff} .cr80 .base .rt{margin-left:auto;color:var(--red-dark-type)} .cr80 ul{list-style:none;margin:1.6cqw 0 0;padding:0;display:grid;gap:1.5cqw} .cr80 ul li{font:600 3.2cqw/1.22 var(--f-body);color:#EDEFF0;padding-left:3.4cqw; position:relative;margin:0} .cr80 ul li::before{content:"";position:absolute;left:0;top:1.1cqw;width:1.7cqw;height:1.7cqw; background:var(--red);clip-path:polygon(0 0,100% 0,100% 60%,60% 100%,0 100%)} .cr80 .vf{margin-top:2.2cqw;font:700 2.35cqw/1.4 var(--f-mono);letter-spacing:.06em;color:#fff} .cr80 .vf span{display:block;font-weight:400;letter-spacing:.13em;text-transform:uppercase; color:var(--steel-type);font-size:2.05cqw} .cr80 .exs{align-self:flex-start;font:700 2cqw/1 var(--f-mono);letter-spacing:.18em; color:var(--red-dark-type);border:.22cqw solid var(--red);padding:1cqw 1.2cqw} .cr80 .who .exs{display:inline-block;margin-top:1.9cqw} /* ==== 15 · PRINT TEMPLATES ============================================= */ /* Three printed artefacts, three page sizes. Named pages (@page plus the `page` property) let one stylesheet carry all three. print-deck Letter portrait, 0.5 in margins, six strips to a sheet print-cr80 CR80 85.6 x 54 mm + 3 mm bleed + crop marks, front and back on one sheet print-certificate Letter portrait, one sheet The print templates are standalone documents: no site chrome, no scripts. They are rendered from inside the site root so /assets/... resolves. */ @page tt-letter{size:8.5in 11in;margin:0} @page tt-card{size:99.6mm 140mm;margin:0} body[data-page="print-deck"],body[data-page="print-certificate"]{page:tt-letter} body[data-page="print-cr80"]{page:tt-card} body.print{background:#0E0E0E;margin:0;overflow-x:hidden} /* on screen a print template is proofed inside its own scroller, so an 8.5 in sheet never widens the page */ .printwrap{display:flex;flex-direction:column;align-items:center;gap:24px; padding:24px 0;overflow-x:auto;max-width:100%} body.print .sheet{width:8.5in;height:11in;max-width:none;aspect-ratio:auto} body.print .sheet{padding:5.9cqw 5.9cqw 4.6cqw 9cqw} /* 0.5 in, 0.77 in at the binder edge */ /* the wallet plate, laid out for a card printer */ .cr80-sheet{position:relative;width:99.6mm;height:68mm;background:#fff; background-repeat:no-repeat; background-image: linear-gradient(#000,#000),linear-gradient(#000,#000), /* trim verticals, left */ linear-gradient(#000,#000),linear-gradient(#000,#000), /* trim verticals, right */ linear-gradient(#000,#000),linear-gradient(#000,#000), /* trim horizontals, top */ linear-gradient(#000,#000),linear-gradient(#000,#000); /* trim horizontals, foot*/ background-size:.25mm 4mm,.25mm 4mm,.25mm 4mm,.25mm 4mm, 4mm .25mm,4mm .25mm,4mm .25mm,4mm .25mm; background-position: 6.875mm 0,6.875mm 64mm,92.475mm 0,92.475mm 64mm, 0 6.875mm,95.6mm 6.875mm,0 60.875mm,95.6mm 60.875mm} .cr80-bleed{position:absolute;inset:4mm;overflow:hidden;background:var(--face-card)} .cr80-bleed::after{content:"";position:absolute;left:0;right:0;top:0;height:4.3mm; background:linear-gradient(90deg,var(--red),#5C0606 62%,#2A0303)} /* inside the bleed box the card keeps its own padding — the inset only takes it to the trim line, and type flush to a trim line is type the guillotine finds */ .cr80-bleed>.cr80{position:absolute;inset:3mm;width:auto;height:auto;aspect-ratio:auto; background:none;border:0;box-shadow:none} .cr80-bleed>.cr80::after{display:none} .cr80-note{font:11px/1.5 var(--f-mono);letter-spacing:.08em;text-transform:uppercase; color:var(--steel-type);text-align:center} @media print{ *{print-color-adjust:exact;-webkit-print-color-adjust:exact} body.print{background:#fff;padding:0} .printwrap{display:block;padding:0;gap:0;overflow:visible} .cr80-note{display:none} .punch{display:none} body.print .sheet{box-shadow:none;break-after:page;page-break-after:always;margin:0} body.print .sheet:last-of-type{break-after:auto;page-break-after:auto} .cr80-sheet{break-inside:avoid;page-break-inside:avoid;margin:0 0 4mm} .cr80-sheet:last-of-type{margin-bottom:0} .strip{break-inside:avoid;page-break-inside:avoid} /* a site page printed from a browser drops its chrome and its motion */ header.site,footer.site nav,.burger,.filters,.vform button{display:none} .rv{opacity:1!important;transform:none!important} } /* ==== 16 · REVEAL MOTION =============================================== */ /* Forked from the r1 system. Nothing is hidden without script: the stylesheet only animates under html.rv-armed, and tt.js is the only thing that adds it. Anything carrying a transform of its own is faded, never moved (.rv-fade). */ .rv{opacity:1} @media(prefers-reduced-motion:no-preference){ html.rv-armed .rv{transition:opacity .72s cubic-bezier(.22,.61,.36,1), transform .72s cubic-bezier(.22,.61,.36,1)} html.rv-armed .rv:not(.in){opacity:0} html.rv-armed .rv:not(.in):not(.rv-fade){transform:translateY(18px)} html.rv-armed .rv.rv-soft{transition-duration:.6s} html.rv-armed .rv.rv-soft:not(.in):not(.rv-fade){transform:translateY(8px)} html.rv-armed header.site .lockup, html.rv-armed header.site nav.site{animation:tt-fade .7s ease-out both} } @keyframes tt-fade{from{opacity:0}to{opacity:1}} @media(prefers-reduced-motion:reduce){ html.rv-armed .rv,.rv{opacity:1!important;transform:none!important;transition:none!important} *{animation:none!important} } /* ---- 17 · tile markers in writer copy (orchestrator, 2026-09-14) ---- build.py replaces with
svg
. Same box as .tw: block, 8:5, no UA figure margin; the whole plate is the link. */ .tile-fig{margin:0;max-width:100%;filter:drop-shadow(0 1px 0 rgba(0,0,0,.8)) drop-shadow(0 7px 15px rgba(0,0,0,.5))} .tile-fig a{display:block;color:inherit;text-decoration:none} .tile-fig svg{display:block;width:100%;height:auto;aspect-ratio:8/5} .rack .tile-fig{flex:1 1 220px;min-width:0} /* inside a facsimile the wrapper already casts the shadow — no doubling */ .strip .tile-fig,.cr80 .tile-fig,.cert .tile-fig,.tw .tile-fig{filter:none} /* long machine forms and verify addresses must wrap at 320 px, never overflow */ .vbox code,.vbox .mono,.mach,code.mach{overflow-wrap:anywhere;word-break:break-all;max-width:100%} /* card page: the way out (orchestrator, 2026-09-14) */ .cardnav{margin:22px 0 0;font:600 12px/1.8 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--steel-type)} .cardnav a{color:inherit;text-decoration:none;border-bottom:1px solid var(--steel)} .cardnav a:hover{color:#fff;border-bottom-color:var(--red-dark-type)} .vbox a.mono{display:block;overflow-wrap:anywhere;color:inherit} /* on a phone the name comes before the plate (verification read N2) */ @media(max-width:900px){.cardpg>div:first-child{order:2}} /* ============================================================ r4 imagery — ported from r1 (lane I1, 2026-09-14, ruling D9) ============================================================ Source: _site-r1_BUILD/site/assets/css/tct.css?v=r4.3 (`.hero.shot`, `.sec.frame`, `.sec.shot`, `.wm` + its wm-* variants) and the three tools that build the assets these rules point at -- apply_heroes.py (TCT-IMG-004), apply_frames.py (TCT-IMG-005), wm.py (TCT-IMG-003) -- copied into BUILD/_imagery_tools/, never run from r1. Applied to the pages by BUILD/imagery.py. Class names are carried over unchanged so r1's page-anatomy knowledge still applies. What changed crossing into r3: - r1's content wrapper is `.wrap` (and `.plate` inside a hero); r3's is `.w`, used both as a bare width box and, on the opening/closing panels, combined directly onto the same element as `.sec` -- so `.wm` may land on an element that already IS a `.w`, not only wrap one. Both shapes work: `.wm`'s ::before paints under the element's own in-flow children either way; `.wm>.w` below is the belt-and-braces case where `.wm` sits on an outer
and `.w` is its own nested child (r1's shape). - r1's dark ground was #0B0D11; r3's --void is #121212 (rgb 18,18,18). Every scrim/veil rgba below uses r3's ground colour, r1's alpha stops unchanged -- the treatment is the same, only re-based on this site's token. - r1 had `.cta-band` and `.sec.light` (a white-paper content surface); r3 has neither (no inline light content sections yet), so the `.cta-band.wm` opacity bump and the `.sec.light.wm` invert+multiply rule are not ported -- nothing in r3 today would select them. Add them back the same way (rgba re-based on --paper) if a light content section is introduced later. - Asset URLs are absolute (`/assets/img/...`, `/assets/wm/...`) and carry NO hand-written ?v= -- build.py's stamp_asset_urls() adds it, the same pass that stamps every other /assets/(css|js|img|fonts)/ URL on the site. "wm" was added to that function's ASSET_RE alternation (build.py, ASSET_RE) so these follow the same cache-busting path instead of going stale in place -- see the joefoster.ca same-path-CSS lesson this build's memory carries. PHOTOGRAPH BANDS — the group's own field and fleet photography, graded to black and white so it sits under white type (grade.py; house target 0.47 mean, hero 2400x1350, frame band 1800x840). */ /* ---- HERO — a photograph as the page's opening band ---- */ .hero.shot{padding:0;min-height:clamp(480px,78vh,820px);display:flex;align-items:flex-end; position:relative;overflow:hidden;background:var(--void)} .hero.shot .media,.hero.shot .media img{position:absolute;inset:0;width:100%;height:100%; object-fit:cover;object-position:center} /* r1's measured correction for photographs graded to a 0.47 mean and shown on a dark ground: brought up one step so detail reads through the scrim. */ .hero.shot .media img,.sec.frame .media img,.sec.shot .media img{filter:brightness(1.12) contrast(1.03)} /* set on a page whose subject is composed off-centre in its source frame */ .hero.shot.anchor-r .media img{object-position:64% 50%} .hero.shot.anchor-l .media img{object-position:32% 50%} /* Heavy toward the reading edge and the foot, clear past two-thirds across, so the type earns its legibility and the machine is still seen. */ .hero.shot .scrim{position:absolute;inset:0;z-index:1; background:linear-gradient(90deg,rgba(18,18,18,.86) 0%,rgba(18,18,18,.80) 30%,rgba(18,18,18,.62) 46%,rgba(18,18,18,.30) 60%,rgba(18,18,18,.06) 78%,rgba(18,18,18,0) 92%), linear-gradient(180deg,rgba(18,18,18,.36) 0%,rgba(18,18,18,.02) 34%,rgba(18,18,18,.04) 58%,rgba(18,18,18,.46) 100%)} .hero.shot>.w{position:relative;z-index:2;width:100%; padding-top:clamp(76px,11vw,160px);padding-bottom:clamp(44px,6vw,82px)} @media (max-width:760px){ .hero.shot{min-height:min(80svh,700px)} .hero.shot .scrim{background:linear-gradient(180deg,rgba(18,18,18,.42) 0%,rgba(18,18,18,.18) 30%,rgba(18,18,18,.90) 78%)} } /* ---- A FRAME — a photograph on its own, between blocks of copy ---- No scrim and no text: the rhythm device, not a place to say something. Full bleed, ruled top and bottom so it reads as deliberate rather than a picture that wandered in. */ .sec.frame{position:relative;padding:0;overflow:hidden;background:var(--void); border-block:1px solid var(--hair);height:clamp(200px,36vw,440px)} .sec.frame .media,.sec.frame .media img{position:absolute;inset:0;width:100%;height:100%; object-fit:cover;object-position:center} /* a light, even veil so a frame sits in the page rather than glaring out of it */ .sec.frame::after{content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(180deg,rgba(18,18,18,.30) 0%,rgba(18,18,18,.08) 38%,rgba(18,18,18,.08) 62%,rgba(18,18,18,.34) 100%)} @media (max-width:760px){.sec.frame{height:clamp(170px,50vw,290px)}} /* ---- .sec.shot — a mid-page band that carries a heading over a photograph, the hero's construction at section scale ---- */ .sec.shot{position:relative;min-height:clamp(340px,50vh,580px);display:flex;align-items:flex-end; padding:0;overflow:hidden;background:var(--void);border-block:1px solid var(--hair)} .sec.shot .media,.sec.shot .media img{position:absolute;inset:0;width:100%;height:100%; object-fit:cover;object-position:center} .sec.shot .scrim{position:absolute;inset:0;z-index:1; background:linear-gradient(90deg,rgba(18,18,18,.84) 0%,rgba(18,18,18,.46) 46%,rgba(18,18,18,.10) 100%), linear-gradient(180deg,rgba(18,18,18,.20) 0%,rgba(18,18,18,0) 40%,rgba(18,18,18,.62) 100%)} .sec.shot>.w{position:relative;z-index:2;width:100%; padding-top:clamp(42px,5.8vw,78px);padding-bottom:clamp(36px,4.8vw,62px)} .sec.shot h2{max-width:22ch} .sec.shot .lede{color:rgba(255,255,255,.90)} @media (max-width:760px){ .sec.shot .scrim{background:linear-gradient(180deg,rgba(18,18,18,.28) 0%,rgba(18,18,18,.14) 32%,rgba(18,18,18,.88) 80%)} } /* ---- WATERMARK — a ghosted machine photograph behind copy (wm.py, TCT-IMG-003): the structural mid-tones of a graded photograph, radially masked and held at low opacity so a machine reads rather than a fog. ---- */ .wm{position:relative;overflow:hidden} .wm>.w{position:relative;z-index:1} .wm::before{content:"";position:absolute;inset:0;pointer-events:none; background-repeat:no-repeat;background-size:cover;background-position:center; opacity:.16; -webkit-mask-image:radial-gradient(ellipse 82% 92% at 50% 50%,#000 34%,transparent 100%); mask-image:radial-gradient(ellipse 82% 92% at 50% 50%,#000 34%,transparent 100%)} .wm.wm-cab::before{background-image:url("/assets/wm/tct-wm-cab.webp?v=r4.3")} .wm.wm-track::before{background-image:url("/assets/wm/tct-wm-track.webp?v=r4.3")} .wm.wm-hyd::before{background-image:url("/assets/wm/tct-wm-hyd.webp?v=r4.3")} .wm.wm-breaker::before{background-image:url("/assets/wm/tct-wm-breaker.webp?v=r4.3")} .wm.wm-filters::before{background-image:url("/assets/wm/tct-wm-filters.webp?v=r4.3")} .wm.wm-idler::before{background-image:url("/assets/wm/tct-wm-idler.webp?v=r4.3")} .wm.wm-drive::before{background-image:url("/assets/wm/tct-wm-drive.webp?v=r4.3")} @media (max-width:760px){.wm::before{opacity:.12}} /* ---- coordinator additions carried in this same block, 2026-09-14 ---- 1. footer.site .fgrid now has SIX columns (_chrome/footer.html gained a Sectors column) -- overridden here, after section 5's original rule, rather than editing that rule directly while this block is held. The 600px rule is RESTATED (not just relied on) so it still wins at that width even though this override sits later in the cascade than section 5's own now-superseded 1000px/600px pair. */ footer.site .fgrid{grid-template-columns:repeat(6,minmax(0,1fr))} @media(max-width:1100px){footer.site .fgrid{grid-template-columns:repeat(3,minmax(0,1fr))}} @media(max-width:600px){footer.site .fgrid{grid-template-columns:1fr}} /* 2. the physical Tessera page's renders (plate/card photography, a different lane) -- a bare, captionless image block. */ .render{margin:0} .render img{max-width:100%;height:auto;display:block} /* r4 — the six-sector wall (build.py render_sectors_wall). Six plates, the letter large, the name, one line, the counts by track, the total. */ .sectors-wall{margin:22px 0 6px} .sectors-wall ul.sectors{list-style:none;margin:0;padding:0;display:grid;gap:14px; grid-template-columns:repeat(auto-fit,minmax(150px,1fr))} .sectors-wall .sector-cell{margin:0;padding:0} .sectors-wall .sector-cell>a{display:block;height:100%;padding:18px 16px 16px;text-decoration:none;color:inherit; background:linear-gradient(135deg,rgba(255,255,255,.07),rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.14); clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,18px 100%,0 calc(100% - 18px)); transition:border-color .2s,background .2s} .sectors-wall .sector-cell>a:hover,.sectors-wall .sector-cell>a:focus-visible{border-color:rgba(255,255,255,.4); background:linear-gradient(135deg,rgba(255,255,255,.11),rgba(255,255,255,.04))} .sectors-wall .sc-letter{display:block;font-family:"Barlow Condensed",Arial,sans-serif;font-weight:700; font-size:2.6rem;line-height:1;letter-spacing:.02em;margin-bottom:6px} .sectors-wall .sector-cell h2,.sectors-wall .sector-cell h3,.sectors-wall .sc-name{display:block;margin:0 0 6px; font-family:"Barlow Condensed",Arial,sans-serif;font-weight:700;font-size:1.05rem;letter-spacing:.08em;text-transform:uppercase} .sectors-wall .sc-line{margin:0 0 10px;font-size:.86rem;line-height:1.35;opacity:.82;min-height:2.7em} .sectors-wall .sc-counts{margin:0 0 4px;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;opacity:.75; display:flex;flex-wrap:wrap;gap:4px 12px} .sectors-wall .sc-counts b{font-weight:600} .sectors-wall .sc-total{margin:0;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;opacity:.6} @media (max-width:600px){.sectors-wall ul.sectors{grid-template-columns:repeat(2,minmax(0,1fr))} .sectors-wall .sc-letter{font-size:2.1rem}} .fig .figcap{margin:10px 0 0;font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;opacity:.6}