/* ============================================================================ we-chassis.css — the shared page chassis: tokens, reset, containers, the ONE nav's styling, the reveal system, the zone palettes and the canonical TORN-PAPER TRANSITION SYSTEM v3.1. WHY THIS FILE EXISTS -------------------- `components/site_nav` supplies the nav MARKUP for 26 sections, but its STYLING has always lived in each page's own sheet (every teardown-*.css and landing sheet carries an identical copy at ~line 73). assets/we-teaser-nav.css and assets/we-nav-armour.css are corrective overlays on top of that base — they are NOT a complete nav. So a new page that links only its own sheet gets a half-styled nav: the CTA loses its size/radius/offset-shadow, the bar loses its 55.6px pinned height and dark-paper stock, and the dropdown panel never appears. That is exactly what happened to the PDP on first push. Rather than hand-roll a 27th copy, this file holds ONE canonical extract, copied verbatim from assets/teardown-im8.css (the reference implementation): · the nav block (teardown-im8.css:73-108) · the nav height pin + tear height (teardown-im8.css:1393-1399) · the shadow tiers (teardown-im8.css :root block) · .rv reveals (teardown-im8.css:~30) · .zone / .zone--light palettes (teardown-im8.css:~600) · the tstrip tear system + the REAL masks (teardown-im8.css:567-700) The tear masks are the whole point of reusing rather than re-deriving: they are turbulence-derived polygons with ~130 irregular points and a shallow, organic amplitude. A hand-authored zigzag at regular intervals reads as pinking shears, not torn paper. TWO DELIBERATE DEVIATIONS from the copied source, both required: 1. `background-attachment: fixed` is DROPPED from .nav and .tstrip. It was the 2026-07-30 Safari choppy-scroll root cause; layouts/theme.liquid ships a global kill-switch (including ::before/::after) plus a composited fixed paper layer, so the original declarations are already inert — copying them would just reintroduce dead code that looks load-bearing. 2. `.zone--light::before` keeps `mix-blend-mode:normal`. A full-height blended grain layer is a large raster cost and the layout de-blends the teardowns' equivalent anyway. LOAD ORDER — this must be linked BEFORE the page's own sheet: 1. assets/we-mobile-nav.css (layout ) 2. THIS FILE (in-body, blocking="render") 3. the page's own sheet (in-body, blocking="render") 4. assets/we-teaser-nav.css (emitted by site_nav, in-body) 5. assets/we-nav-armour.css (immediately after 4 — must stay last) Nothing here uses !important, so the armour sheet still wins every tie. Assets are FLAT and asset_url is filename-only, so all textures come from the :root custom properties layouts/theme.liquid declares (--we-paper-light / --we-paper-dark). A bare relative url() would 404 on the Fluid CDN. ========================================================================== */ /* ---------- tokens ---------- */ :root{ --hand:"FluidHand",Inter,-apple-system,sans-serif; --sans:Inter,-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",sans-serif; --mono:"WeHaas","Neue Haas Display","Helvetica Neue",sans-serif; --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif; --bg:#05070a;--panel:#0b0f16;--panel-2:#0d1219; --ink:#f7f8fa;--soft:#f7f8fa;--dim:rgba(247,248,250,.66);--faint:rgba(247,248,250,.44); --line:rgba(255,255,255,.1);--line-soft:rgba(255,255,255,.06); /* --blue is the token .btn-cta reads; --brand is the alias page sheets use */ --blue:#42b1ff;--brand:#42b1ff;--cyan:#7fd3ff; --green:#6ce1ad;--orange:#ff9474;--yellow:#ffd36c; --max:1180px;--col:740px; /* ---- shadow tiers (verbatim intent, flattened to the baked values) ---- Tier 1 = solid card on the page background. Tier 2 = torn-paper slip overlapping other content. Tier 3 = the tear strips themselves. --sh-rgb is re-scoped warm inside .zone--light so every tier casts a warm shadow on cream and a neutral one on dark. */ --sh-rgb:0,0,0; --shadow-1:0 2px 3px rgba(var(--sh-rgb),.28),0 16px 34px -20px rgba(var(--sh-rgb),.5); --shadow-1-hover:0 2px 3px rgba(var(--sh-rgb),.28),0 24px 42px -16px rgba(var(--sh-rgb),.62); --shadow-1-d:drop-shadow(0 2px 3px rgba(var(--sh-rgb),.28)) drop-shadow(0 16px 24px rgba(var(--sh-rgb),.5)); --slip-shadow:drop-shadow(0 3px 3px rgba(var(--sh-rgb),.3)) drop-shadow(2px 9px 12px rgba(var(--sh-rgb),.5)); --tear-sh:drop-shadow(0 2px 3px rgba(var(--sh-rgb),.24)); --tear-sh-up:drop-shadow(0 -2px 3px rgba(var(--sh-rgb),.24)); --tear-slip:drop-shadow(0 2px 3px rgba(var(--sh-rgb),.17)) drop-shadow(0 7px 12px rgba(var(--sh-rgb),.34)); --tear-box:0 8px 18px -11px rgba(var(--sh-rgb),.53); } /* ---------- reset ---------- */ *{box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} /* opaque body colour is deliberate: the layout's html body::before paper layer is z-index:-1, so it paints above the body background and below content. */ body{margin:0;background-color:var(--bg);color:var(--soft);font-family:var(--sans); font-size:17px;line-height:1.65;overflow-x:clip;-webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility} a{color:inherit;text-decoration:none} button{font:inherit;color:inherit;border:0;background:none;cursor:pointer} img,svg{display:block;max-width:100%} /* the UA gives
`margin:1em 40px`; without this a figure-wrapped image sits 40px inboard of the grid column and reads as a misaligned page */ figure,figcaption,dl,dd{margin:0} :focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:4px} ::selection{background:var(--blue);color:#05070a} .wrap{width:min(var(--col),calc(100% - 44px));margin-inline:auto} .wide{width:min(var(--max),calc(100% - 44px));margin-inline:auto} /* ---------- reveals (hidden state gated on html.js, so JS-off is safe) ---------- */ .js .rv{opacity:0;transform:translateY(26px); transition:opacity .7s cubic-bezier(.2,.65,.25,1),transform .7s cubic-bezier(.2,.65,.25,1)} .js .rv.in{opacity:1;transform:none} .js .rv.d1{transition-delay:.08s}.js .rv.d2{transition-delay:.16s}.js .rv.d3{transition-delay:.24s} @media(prefers-reduced-motion:reduce){.js .rv{opacity:1;transform:none;transition:none}} /* ---------- shadow wrappers ---------- */ .card-sh{filter:var(--shadow-1-d)} .tear-sh-w{filter:var(--tear-slip)} .slip-sh{filter:var(--slip-shadow)} /* ============================================================ NAV — dark-paper bar with a torn bottom edge (.tstrip--nav). Carries the same paper-dark stock as the body/tstrip plus a darkening veil for text legibility, so the bar reads as a torn strip of the same paper the tear hangs off. ============================================================ */ .nav{position:fixed;top:0;left:0;right:0;z-index:100;transition:box-shadow .3s,border-color .3s; background-color:var(--bg,#05070a); background-image:linear-gradient(rgba(5,7,10,.34),rgba(5,7,10,.52)),var(--we-paper-dark); background-size:cover;background-position:center; /* background-attachment:fixed intentionally omitted — see banner note 1 */ border-bottom:1px solid transparent} .nav.scrolled{border-bottom-color:var(--line);box-shadow:var(--tear-box)} /* the bar's height is PINNED so the CTA is the same height on every page: the visible bar is 69px minus the part the tear eats. */ .nav{--nav-tear-h:24px;height:calc(69px - .558 * var(--nav-tear-h));line-height:1.65} @media(max-width:640px){.nav{--nav-tear-h:18px}} .nav .tstrip--nav{height:var(--nav-tear-h)} /* ---- THE BAR→RAG SEAM (why the CTA looked butted against the nav's edge) ---- The bar is 55.6px but .nav-inner is 68px and OVERFLOWS it — deliberately, per we-teaser-nav.css: "the content box stays 68px and overflows the shorter painted bar, so the raised strip supplies the last stretch of paper." So the CTA (40.4px, centred in 68px) ends at y≈54.2 — just 1.4px above the bar's own bottom. The ~14px of breathing room under it is supposed to come from the torn strip, which continues the same sheet of paper down to the rag at ≈68px. The bug: the bar and the strip each paint their OWN `linear-gradient(rgba(5,7,10,.34), rgba(5,7,10,.52))` darkening veil. In the original both also carried background-attachment:fixed, so both gradients resolved against the VIEWPORT and formed one continuous wash. The layout's Safari choppy-scroll kill-switch forces `scroll` globally (correct — that was the 9fps root cause), so each element now resolves its own box and the strip RESTARTS the veil: the bar ends at .52 and the strip immediately jumps back to .34. That tonal step is a hard full-width line 1.4px under the CTA, and the eye reads it as the bottom of the nav — hence "no bottom padding". The teardowns hide it because a light hero photo sits under the rag; on a page whose content area is flat dark paper it is the most contrasty edge in the whole bar. ATTEMPTED FIX — REMOVED, see the verdict at the end of this comment. It painted bar and strip as ONE sheet by giving both the SAME background geometry and offsetting the strip by the bar's height, so the veil gradient and the paper photo both run continuously across the seam: · veil → `100% var(--nav-paper-h)` (the full 79.6px bar+tear span), so the gradient runs .34 at y=0 to .52 at y=79.6 ACROSS BOTH elements instead of restarting inside the strip. · paper → `100% auto`, which fills the width and keeps the image's aspect ratio, so both elements sample the identically-scaled photo. The paper is far taller than 79.6px at any viewport width, so this still covers. The strip then offsets both layers by -var(--nav-bar-h) to continue exactly where the bar stopped. The only edge left in the nav is the rag itself. TWO FAILED ATTEMPTS, for the next person (do not repeat either): 1. `background-size:100% var(--nav-paper-h)` on BOTH layers. Fixed the veil but squashed the photo to 79.6px tall, so its scale and average brightness no longer matched the page's `center/cover` paper — same seam, new cause. The photo layer needs `auto` height, not the veil's. 2. Holding the strip's veil CONSTANT at .52. That removes the restart but makes the strip a FLAT darker slab under a graduated bar, which reads as a second band divorced from the nav — worse than the original. #siteNav (1,1,0) beats we-teaser-nav.css's `.nav .tstrip--nav` (0,2,0), which loads later; we-nav-armour.css sets no background, so its ties are unaffected. The strip's background-image is restated verbatim (it is the canonical pair, veil + paper) because only its SIZE and POSITION change. ⛔ RESOLVED BY DELETION — DO NOT ADD A #siteNav OVERRIDE HERE. Three attempts were made to "fix" this seam from a page/chassis sheet: 1. background-size:100% on BOTH layers → squashed the paper photo, changing its scale/brightness vs the page. Same seam, new cause. 2. veil held constant at .52 → the strip became a FLAT darker slab under a graduated bar: "another band of bg lower, divorced from the nav." Worse. 3. matched geometry with the paper on `100% auto` → measured correct at scroll 0, but still wrong in a real browser at other scroll positions. All three were solving a problem the OTHER 26 pages do not have. Proof: a revision of this page cached in Chey's browser from BEFORE any of these overrides had a correct nav. The canonical nav in assets/we-teaser-nav.css (+ we-nav-armour.css, which must stay last) is correct as shipped; a #siteNav rule here outranks it (1,1,0 vs 0,2,0) and silently replaces a working component with a hand-rolled one. Leave the nav alone. If the nav ever genuinely needs a change, change we-teaser-nav.css so all 27 pages get it — do not patch it per page. */ .nav-inner{max-width:1120px;margin:0 auto;padding:0 24px;height:68px;display:flex; align-items:center;justify-content:space-between;gap:20px;position:relative;z-index:6} .brand{display:flex;align-items:center;flex:0 0 auto;height:68px} .brand img{display:block;width:auto;height:36px;max-width:208px;object-fit:contain} .nav-actions{display:flex;align-items:center;gap:30px} .nav-link{color:var(--dim);font-size:.92rem;transition:color .18s ease} .nav-link:hover{color:var(--ink)} .btn-cta{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:4px; font-size:.85rem;font-weight:700;letter-spacing:-.01em;background:var(--blue);color:#050a12; white-space:nowrap;box-shadow:2px 2px 0 rgba(0,0,0,.5);transform:rotate(-.6deg); transition:box-shadow .18s ease,transform .18s ease} .btn-cta:hover{box-shadow:3px 4px 0 rgba(0,0,0,.55);transform:rotate(-.6deg) translateY(-1px)} .dd{position:relative} .dd-trigger{display:inline-flex;align-items:center;gap:7px;color:var(--dim);font-size:.92rem; transition:color .18s ease} .dd-trigger:hover,.dd:hover .dd-trigger,.dd.open .dd-trigger,.dd:focus-within .dd-trigger{color:#fff} .dd-trigger svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:2.2; stroke-linecap:round;stroke-linejoin:round;transition:transform .22s ease} .dd:hover .dd-trigger svg,.dd.open .dd-trigger svg,.dd:focus-within .dd-trigger svg{transform:rotate(180deg)} .dd-panel{position:absolute;top:calc(100% + 12px);left:50%;translate:-50% 0;width:302px;padding:8px; border:1px solid var(--line);border-radius:12px;background:rgba(11,15,21,.98); box-shadow:0 30px 70px -30px #000,0 0 0 1px rgba(66,177,255,.06); opacity:0;visibility:hidden;transform:translateY(-6px); transition:opacity .2s ease,transform .2s ease,visibility .2s;z-index:70} .dd:hover .dd-panel,.dd.open .dd-panel,.dd:focus-within .dd-panel{opacity:1;visibility:visible;transform:translateY(0)} .dd-panel::before{content:"";position:absolute;top:-14px;left:0;right:0;height:14px} .dd-head{font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase; color:var(--dim);padding:8px 12px 6px} .dd-item{display:flex;gap:11px;align-items:flex-start;padding:10px 12px;border-radius:9px; transition:background .18s ease} .dd-item:hover{background:rgba(66,177,255,.1)} .dd-item .ic{flex:0 0 26px;height:26px;border-radius:7px;display:grid;place-items:center; background:linear-gradient(150deg,#123a63,#0a1a2e);border:1px solid rgba(66,177,255,.28); color:var(--cyan);font-family:var(--mono);font-size:.62rem;font-weight:700;margin-top:1px} .dd-item .tt{display:block;color:var(--ink);font-size:.86rem;font-weight:560;line-height:1.25} .dd-item .ds{display:block;color:var(--dim);font-size:.72rem;line-height:1.3;margin-top:3px} .dd-item.soon{opacity:.55;cursor:default} .dd-item.soon:hover{background:none} .dd-item.soon .ic{background:rgba(255,255,255,.04);border-color:var(--line);color:var(--dim)} @media(max-width:880px){.nav-actions .nav-link,.nav-actions .dd{display:none}} @media(max-width:480px){.brand img{height:28px;max-width:158px}.btn-cta{padding:9px 14px;font-size:.82rem}} /* ---------- buttons: the analog hard-offset signature ---------- */ .button{min-height:44px;padding:0 22px;border-radius:4px;display:inline-flex;align-items:center; justify-content:center;gap:9px;background:#fff;color:#07101a;font-weight:700;font-size:.85rem; box-shadow:3px 3px 0 rgba(0,0,0,.5);transform:rotate(-.6deg); transition:transform .22s ease,box-shadow .22s ease} .button:hover{transform:rotate(-.6deg) translateY(-2px);box-shadow:4px 5px 0 rgba(0,0,0,.55)} .button.ghost{background:rgba(255,255,255,.04);color:#fff;border:1px solid rgba(255,255,255,.2); box-shadow:none;transform:none} .button.ghost:hover{transform:translateY(-2px);box-shadow:none} .button[disabled],.button[aria-disabled="true"]{background:rgba(255,255,255,.08);color:var(--dim); box-shadow:none;transform:none;cursor:not-allowed} /* ============================================================ ZONE stacking + palettes The DARK side owns every tear, so dark zones paint ABOVE cream and their dark-filled tear strips overlap onto the continuous cream. Fixed nav (100) stays on top. ============================================================ */ .zone{position:relative} .zone--dark{z-index:3} .zone--light{z-index:2} .zone--light{ --bg:#f5f0e8; --ink:#17140e; --soft:#241f16; --dim:#4b4335; --panel:#fcf9f3; --panel-2:#f1eadd; --line:rgba(30,22,10,.14); --line-soft:rgba(30,22,10,.08); --sh-rgb:30,22,10; /* darkened blue that survives on cream (brand blue is ~2:1 on cream) */ --brand-ink:color-mix(in srgb,#42b1ff 58%,#0f3350); /* cream veil over the paper texture: keeps the tooth but pulls the tone to #f5f0e8 so the flat-cream tear bands meet the zone without a seam */ background:linear-gradient(rgba(245,240,232,.55),rgba(245,240,232,.55)),var(--bg) var(--we-paper-light) center/cover; color:var(--soft)} /* grain film over cream. mix-blend-mode:normal on purpose — see banner note 2. */ .zone--light::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.05; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='ng'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23ng)'/%3E%3C/svg%3E")} .zone--light>*{position:relative;z-index:1} .zone--light strong,.zone--light b{color:var(--ink)} .zone--light ::selection{background:#42b1ff;color:#fff} /* ============================================================ TORN-PAPER TRANSITION SYSTEM v3.1 (canonical) ------------------------------------------------------------ THE DARK SIDE OWNS EVERY TEAR. Cream zones are CONTINUOUS — their paper texture runs unbroken under every boundary; nothing cream is ever cut or duplicated (that was v2's fatal seam: a flat cream fill meeting the textured cream zone always showed a straight tonal joint). Every boundary is instead carved by a DARK-filled, mask-shaped strip (.tstrip) sitting ON TOP of the cream. Because the dark page background is flat, a dark strip's opaque edge abuts the adjacent dark section invisibly — dark-on-dark by construction — while its ragged edge bites into the cream. No straight line is possible. SPACING SCHEMA — two tokens own every boundary's clearance: --tear-gap-light : cream content → rag edge (cream side of a boundary) --tear-gap-dark : rag edge → first dark content (dark side) Measured to the rag's AVERAGE midline. A cream edge that RECEIVES deep teeth must additionally clear the rag's overhang so no tooth lands within ~40px of text; the .tear-clear-* helpers below do that arithmetic. VARIANTS (all masks are baked static polygons — never runtime feTurbulence or feDisplacementMap, which caused choppy scroll and edge artefacts): .tstrip--perf : boundary at a cream zone's TOP. Rag DOWN, opaque TOP, 22px micro-perforation — the torn top of a paper sheet. .tstrip--up2 : boundary at a cream zone's BOTTOM. Rag UP into the cream above, opaque BOTTOM merging dark-on-dark into the dark zone that follows. Full --tear-h deep. SYSTEM RULE: a tear strip MUST be a child of an UNMASKED zone. A masked element clips to its own border box, so a strip overflowing a masked parent is clipped — its rag vanishes and the boundary reads as a straight line. ============================================================ */ :root{--tear-h:112px;--tear-gap-light:64px;--tear-gap-dark:140px} @media(max-width:640px){:root{--tear-h:78px;--tear-gap-light:44px;--tear-gap-dark:92px}} .tstrip{position:absolute;left:0;right:0;height:var(--tear-h);pointer-events:none;z-index:5; /* MUST match the body's paper-dark texture (dark zones are transparent to body). background-attachment:fixed intentionally omitted — banner note 1. */ background:var(--bg,#05070a) var(--we-paper-dark) center/cover; -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat; -webkit-mask-size:100% 100%;mask-size:100% 100%; -webkit-mask-position:0 0;mask-position:0 0} /* rag DOWN, opaque TOP. Overlaps 1px up to kill a hairline. */ .tstrip--perf{top:-1px;height:22px; filter:var(--tear-sh); -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%201200%20120%27%20preserveAspectRatio%3D%27none%27%3E%3Cpolygon%20points%3D%27-40%2C64.5%200.1%2C64.5%2019.4%2C68.3%2026.1%2C67.5%2033.4%2C63%2038.1%2C62%2041.4%2C62.3%2045.6%2C64.8%2053.6%2C63.8%2072.9%2C65.3%2076.6%2C64.3%2084.4%2C65%2090.6%2C62.8%20108.9%2C62.8%20118.9%2C66.5%20134.1%2C64.3%20149.6%2C68.3%20158.4%2C64.8%20162.4%2C66.5%20177.6%2C65.5%20200.9%2C66.8%20215.1%2C64%20225.6%2C66%20245.6%2C65%20256.9%2C67.8%20261.4%2C65.5%20265.6%2C66%20270.9%2C63.8%20279.1%2C65.8%20283.9%2C64.8%20296.4%2C65.5%20312.1%2C62.5%20325.1%2C67.3%20342.4%2C64.3%20355.4%2C66.8%20365.9%2C67%20377.9%2C63%20383.6%2C66%20392.1%2C68%20406.1%2C66.3%20414.9%2C68.3%20425.1%2C66.3%20445.6%2C67.5%20460.6%2C63.8%20470.9%2C65%20480.1%2C68.8%20514.9%2C65.8%20524.9%2C69.3%20542.6%2C70.8%20550.9%2C69%20558.1%2C65%20563.4%2C65.8%20571.4%2C63.8%20580.6%2C66.5%20599.4%2C66.8%20609.6%2C70.3%20615.4%2C70.8%20625.4%2C70.3%20630.6%2C67.5%20637.4%2C66.5%20651.1%2C65.8%20655.9%2C66.8%20663.9%2C64.3%20671.9%2C67.3%20676.9%2C66.8%20683.1%2C68.8%20702.4%2C69.8%20709.1%2C68.3%20729.9%2C68.3%20750.6%2C64.3%20761.9%2C67.5%20774.9%2C67.3%20783.4%2C64%20788.9%2C63.8%20805.9%2C67.3%20811.4%2C70.3%20817.6%2C71.3%20830.6%2C68.8%20842.6%2C71.8%20848.4%2C69%20865.4%2C65.3%20873.6%2C70%20881.1%2C70.3%20896.1%2C68%20904.6%2C70.3%20915.4%2C70.5%20934.9%2C66.3%20950.9%2C67.3%20955.6%2C68.8%20959.6%2C68.3%20965.9%2C70.3%20978.6%2C68.8%20984.4%2C66.8%20993.9%2C66.3%201000.9%2C69.5%201015.9%2C72.3%201026.9%2C69.5%201038.4%2C70.8%201043.1%2C69%201046.9%2C71%201051.9%2C71%201063.1%2C67.3%201070.9%2C67.5%201079.1%2C71%201086.9%2C71.8%201094.1%2C69.8%201099.4%2C66%201107.1%2C64.8%201114.4%2C66%201117.9%2C68.8%201129.9%2C72.5%201138.6%2C70.8%201144.6%2C68%201161.1%2C68%201167.4%2C70.5%201172.9%2C71%201175.4%2C70%201180.1%2C71.5%201192.6%2C68.8%201199.9%2C70.5%201240%2C70.5%201240%2C-40%20-40%2C-40%27%20fill%3D%27%23fff%27%2F%3E%3C%2Fsvg%3E"); mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%201200%20120%27%20preserveAspectRatio%3D%27none%27%3E%3Cpolygon%20points%3D%27-40%2C64.5%200.1%2C64.5%2019.4%2C68.3%2026.1%2C67.5%2033.4%2C63%2038.1%2C62%2041.4%2C62.3%2045.6%2C64.8%2053.6%2C63.8%2072.9%2C65.3%2076.6%2C64.3%2084.4%2C65%2090.6%2C62.8%20108.9%2C62.8%20118.9%2C66.5%20134.1%2C64.3%20149.6%2C68.3%20158.4%2C64.8%20162.4%2C66.5%20177.6%2C65.5%20200.9%2C66.8%20215.1%2C64%20225.6%2C66%20245.6%2C65%20256.9%2C67.8%20261.4%2C65.5%20265.6%2C66%20270.9%2C63.8%20279.1%2C65.8%20283.9%2C64.8%20296.4%2C65.5%20312.1%2C62.5%20325.1%2C67.3%20342.4%2C64.3%20355.4%2C66.8%20365.9%2C67%20377.9%2C63%20383.6%2C66%20392.1%2C68%20406.1%2C66.3%20414.9%2C68.3%20425.1%2C66.3%20445.6%2C67.5%20460.6%2C63.8%20470.9%2C65%20480.1%2C68.8%20514.9%2C65.8%20524.9%2C69.3%20542.6%2C70.8%20550.9%2C69%20558.1%2C65%20563.4%2C65.8%20571.4%2C63.8%20580.6%2C66.5%20599.4%2C66.8%20609.6%2C70.3%20615.4%2C70.8%20625.4%2C70.3%20630.6%2C67.5%20637.4%2C66.5%20651.1%2C65.8%20655.9%2C66.8%20663.9%2C64.3%20671.9%2C67.3%20676.9%2C66.8%20683.1%2C68.8%20702.4%2C69.8%20709.1%2C68.3%20729.9%2C68.3%20750.6%2C64.3%20761.9%2C67.5%20774.9%2C67.3%20783.4%2C64%20788.9%2C63.8%20805.9%2C67.3%20811.4%2C70.3%20817.6%2C71.3%20830.6%2C68.8%20842.6%2C71.8%20848.4%2C69%20865.4%2C65.3%20873.6%2C70%20881.1%2C70.3%20896.1%2C68%20904.6%2C70.3%20915.4%2C70.5%20934.9%2C66.3%20950.9%2C67.3%20955.6%2C68.8%20959.6%2C68.3%20965.9%2C70.3%20978.6%2C68.8%20984.4%2C66.8%20993.9%2C66.3%201000.9%2C69.5%201015.9%2C72.3%201026.9%2C69.5%201038.4%2C70.8%201043.1%2C69%201046.9%2C71%201051.9%2C71%201063.1%2C67.3%201070.9%2C67.5%201079.1%2C71%201086.9%2C71.8%201094.1%2C69.8%201099.4%2C66%201107.1%2C64.8%201114.4%2C66%201117.9%2C68.8%201129.9%2C72.5%201138.6%2C70.8%201144.6%2C68%201161.1%2C68%201167.4%2C70.5%201172.9%2C71%201175.4%2C70%201180.1%2C71.5%201192.6%2C68.8%201199.9%2C70.5%201240%2C70.5%201240%2C-40%20-40%2C-40%27%20fill%3D%27%23fff%27%2F%3E%3C%2Fsvg%3E")} /* rag UP, opaque BOTTOM. Child of the (unmasked) cream zone, bottom:-1px. */ .tstrip--up2{position:absolute;bottom:-1px;top:auto;transform:none; filter:var(--tear-sh-up); -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%201200%20120%27%20preserveAspectRatio%3D%27none%27%3E%3Cpolygon%20points%3D%27-40%2C57.5%200.1%2C57.5%204.6%2C57.8%2014.9%2C54.3%2021.9%2C54.5%2028.4%2C51.8%2044.9%2C54%2049.1%2C51.5%2056.6%2C51.8%2068.1%2C49.3%2076.1%2C49.5%2084.9%2C54%20119.6%2C54%20127.1%2C50%20149.4%2C46.3%20156.1%2C48.5%20164.1%2C47.3%20172.9%2C48.5%20178.6%2C51.5%20188.6%2C49%20197.4%2C52.3%20206.4%2C51%20213.4%2C47.5%20225.6%2C46.8%20230.9%2C45.3%20243.4%2C48.8%20250.4%2C47%20257.6%2C48%20279.6%2C47.3%20286.9%2C43%20291.1%2C42.5%20296.6%2C42.5%20304.6%2C46.5%20312.4%2C44.5%20319.4%2C46.3%20326.4%2C42.5%20330.4%2C41.8%20336.4%2C43.3%20344.6%2C42%20351.4%2C45.3%20363.9%2C46.5%20372.4%2C49%20392.9%2C45.3%20399.4%2C47%20411.1%2C41.3%20422.6%2C39%20441.4%2C41.3%20446.1%2C38.8%20463.6%2C35%20469.4%2C35.8%20482.9%2C41.5%20488.6%2C41.5%20496.1%2C44.3%20503.4%2C41%20512.9%2C40.3%20526.1%2C44.5%20539.9%2C43%20547.1%2C45.3%20556.1%2C45.3%20570.1%2C36.3%20577.9%2C37.8%20591.6%2C37%20598.9%2C39.3%20608.4%2C39%20619.9%2C36.3%20632.1%2C41.3%20635.9%2C41.5%20644.6%2C39%20651.1%2C39%20662.9%2C33.3%20669.6%2C35.5%20682.4%2C34.5%20692.9%2C39.5%20707.9%2C42.8%20716.4%2C41%20724.1%2C36.3%20731.6%2C37.3%20743.9%2C42.3%20757.1%2C40%20761.9%2C41.3%20776.6%2C40%20799.4%2C35.3%20807.6%2C36%20811.1%2C35%20828.4%2C23.5%20837.6%2C23%20841.4%2C23.5%20845.9%2C26%20852.9%2C26.8%20857.6%2C30%20867.6%2C32.3%20871.6%2C35.8%20875.4%2C36.5%20889.1%2C31.5%20895.9%2C32%20901.1%2C30.8%20908.1%2C31.8%20930.1%2C27.3%20939.4%2C26.8%20953.4%2C28.8%20970.1%2C26.3%20978.6%2C30%20989.1%2C30%20998.1%2C27.8%201012.9%2C21.5%201025.6%2C21.5%201034.6%2C25%201048.4%2C25%201054.9%2C27%201063.1%2C26%201069.4%2C28.5%201086.9%2C29.5%201095.4%2C26.5%201100.6%2C27.3%201113.4%2C25.3%201121.6%2C25.5%201124.4%2C24%201144.1%2C22%201165.6%2C23.8%201180.4%2C28%201199.9%2C21.3%201240%2C21.3%201240%2C160%20-40%2C160%27%20fill%3D%27%23fff%27%2F%3E%3C%2Fsvg%3E"); mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%201200%20120%27%20preserveAspectRatio%3D%27none%27%3E%3Cpolygon%20points%3D%27-40%2C57.5%200.1%2C57.5%204.6%2C57.8%2014.9%2C54.3%2021.9%2C54.5%2028.4%2C51.8%2044.9%2C54%2049.1%2C51.5%2056.6%2C51.8%2068.1%2C49.3%2076.1%2C49.5%2084.9%2C54%20119.6%2C54%20127.1%2C50%20149.4%2C46.3%20156.1%2C48.5%20164.1%2C47.3%20172.9%2C48.5%20178.6%2C51.5%20188.6%2C49%20197.4%2C52.3%20206.4%2C51%20213.4%2C47.5%20225.6%2C46.8%20230.9%2C45.3%20243.4%2C48.8%20250.4%2C47%20257.6%2C48%20279.6%2C47.3%20286.9%2C43%20291.1%2C42.5%20296.6%2C42.5%20304.6%2C46.5%20312.4%2C44.5%20319.4%2C46.3%20326.4%2C42.5%20330.4%2C41.8%20336.4%2C43.3%20344.6%2C42%20351.4%2C45.3%20363.9%2C46.5%20372.4%2C49%20392.9%2C45.3%20399.4%2C47%20411.1%2C41.3%20422.6%2C39%20441.4%2C41.3%20446.1%2C38.8%20463.6%2C35%20469.4%2C35.8%20482.9%2C41.5%20488.6%2C41.5%20496.1%2C44.3%20503.4%2C41%20512.9%2C40.3%20526.1%2C44.5%20539.9%2C43%20547.1%2C45.3%20556.1%2C45.3%20570.1%2C36.3%20577.9%2C37.8%20591.6%2C37%20598.9%2C39.3%20608.4%2C39%20619.9%2C36.3%20632.1%2C41.3%20635.9%2C41.5%20644.6%2C39%20651.1%2C39%20662.9%2C33.3%20669.6%2C35.5%20682.4%2C34.5%20692.9%2C39.5%20707.9%2C42.8%20716.4%2C41%20724.1%2C36.3%20731.6%2C37.3%20743.9%2C42.3%20757.1%2C40%20761.9%2C41.3%20776.6%2C40%20799.4%2C35.3%20807.6%2C36%20811.1%2C35%20828.4%2C23.5%20837.6%2C23%20841.4%2C23.5%20845.9%2C26%20852.9%2C26.8%20857.6%2C30%20867.6%2C32.3%20871.6%2C35.8%20875.4%2C36.5%20889.1%2C31.5%20895.9%2C32%20901.1%2C30.8%20908.1%2C31.8%20930.1%2C27.3%20939.4%2C26.8%20953.4%2C28.8%20970.1%2C26.3%20978.6%2C30%20989.1%2C30%20998.1%2C27.8%201012.9%2C21.5%201025.6%2C21.5%201034.6%2C25%201048.4%2C25%201054.9%2C27%201063.1%2C26%201069.4%2C28.5%201086.9%2C29.5%201095.4%2C26.5%201100.6%2C27.3%201113.4%2C25.3%201121.6%2C25.5%201124.4%2C24%201144.1%2C22%201165.6%2C23.8%201180.4%2C28%201199.9%2C21.3%201240%2C21.3%201240%2C160%20-40%2C160%27%20fill%3D%27%23fff%27%2F%3E%3C%2Fsvg%3E")} @media(max-width:640px){.tstrip--perf{height:16px}} /* ============================================================ PRINTED-PAPER LAYER — procedural paper + tiled torn edges ------------------------------------------------------------ Copied from assets/teardown-im8.css (the "PRINTED-PAPER LAYER v2" block). This is what makes a small element read as a torn-off PAPER SLIP rather than a card with a jagged border, and it is a different mechanism from the full-width .tstrip zone tears above: PROCEDURAL PAPER — two generated SVG noise layers over flat white: fine clamped grain (--pp-grain-w) plus hard-thresholded sparse specks (--pp-speck-w), composited `multiply` so the dots read as ink flecks in the stock. Per-element --pp-gp / --pp-sp offsets de-duplicate the pattern between neighbouring pieces. TILED TEARS — a torn edge is a SEAMLESS REPEATING TILE, not one SVG stretched along the edge: a fixed physical tile (300px along the edge, 48px band) whose turbulence used stitchTiles='stitch', so the rag returns to the same coordinate at both tile ends and repeats without a seam. mask-repeat repeat-y (vertical edges, --tv-*) or repeat-x (horizontal, --tx-*) with a FIXED px mask-size on the edge axis, so rag DENSITY is identical on a 90px slip and a 1200px strip. Compare the zone .tstrip masks, which stretch one polygon across the full width on purpose. TEAR-AMP — a torn side reserves --tear-amp of extra padding so no rag point can eat content (rag amplitude ≈ band/2). MASK CLIPS ITS OWN SHADOW — a mask on the slip clips the slip's drop-shadow to the slip box, so the shadow must come from an unmasked wrapper (.card-sh / .tear-sh-w / .slip-sh). ============================================================ */ :root{ --pp-grain-w:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27220%27%20height%3D%27220%27%3E%3Cfilter%20id%3D%27g%27%20x%3D%270%27%20y%3D%270%27%20width%3D%27100%25%27%20height%3D%27100%25%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.95%27%20numOctaves%3D%272%27%20seed%3D%277%27%20stitchTiles%3D%27stitch%27%2F%3E%3CfeColorMatrix%20type%3D%27saturate%27%20values%3D%270%27%2F%3E%3CfeComponentTransfer%3E%3CfeFuncR%20type%3D%27linear%27%20slope%3D%271.0%27%20intercept%3D%270.5%27%2F%3E%3CfeFuncG%20type%3D%27linear%27%20slope%3D%271.0%27%20intercept%3D%270.5%27%2F%3E%3CfeFuncB%20type%3D%27linear%27%20slope%3D%271.0%27%20intercept%3D%270.5%27%2F%3E%3CfeFuncA%20type%3D%27linear%27%20slope%3D%270%27%20intercept%3D%270.52%27%2F%3E%3C%2FfeComponentTransfer%3E%3C%2Ffilter%3E%3Crect%20width%3D%27100%25%27%20height%3D%27100%25%27%20filter%3D%27url%28%23g%29%27%2F%3E%3C%2Fsvg%3E"); --pp-speck-w:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27300%27%20height%3D%27300%27%3E%3Cfilter%20id%3D%27s%27%20x%3D%270%27%20y%3D%270%27%20width%3D%27100%25%27%20height%3D%27100%25%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.46%27%20numOctaves%3D%273%27%20seed%3D%2710%27%20stitchTiles%3D%27stitch%27%2F%3E%3CfeColorMatrix%20type%3D%27saturate%27%20values%3D%270%27%2F%3E%3CfeComponentTransfer%3E%3CfeFuncR%20type%3D%27discrete%27%20tableValues%3D%270%200%200%200%200%200%200%200%200%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%27%2F%3E%3CfeFuncG%20type%3D%27discrete%27%20tableValues%3D%270%200%200%200%200%200%200%200%200%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%27%2F%3E%3CfeFuncB%20type%3D%27discrete%27%20tableValues%3D%270%200%200%200%200%200%200%200%200%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%27%2F%3E%3CfeFuncA%20type%3D%27linear%27%20slope%3D%270%27%20intercept%3D%270.64%27%2F%3E%3C%2FfeComponentTransfer%3E%3C%2Ffilter%3E%3Crect%20width%3D%27100%25%27%20height%3D%27100%25%27%20filter%3D%27url%28%23s%29%27%2F%3E%3C%2Fsvg%3E"); --pp-g-size:304px 304px;--pp-s-size:280px 280px; --tear-amp:26px; /* vertical torn tiles (48x300, repeat-y) — left and right short ends */ --tv-l2:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2048%20300%27%20preserveAspectRatio%3D%27none%27%3E%3Cpolygon%20points%3D%2724%2C-40%2024%2C0.1%2024.5%2C11.4%2023.8%2C26.1%2025.3%2C37.4%2025%2C49.1%2025.8%2C56.6%2025.3%2C57.1%2025.3%2C59.1%2022.8%2C62.6%2022.5%2C68.9%2023.5%2C74.6%2023.5%2C80.1%2026.3%2C89.4%2026.8%2C99.4%2026.3%2C105.9%2024.8%2C111.1%2023.8%2C117.4%2023.5%2C134.1%2024.5%2C146.1%2023.8%2C150.4%2023.3%2C150.9%2021.5%2C157.4%2021%2C161.4%2021%2C164.9%2022.3%2C167.9%2022.8%2C168.1%2024%2C173.9%2024%2C179.4%2023.3%2C183.6%2023.8%2C194.6%2023.5%2C207.1%2025.3%2C216.4%2023.3%2C232.1%2023.8%2C239.4%2024.8%2C243.6%2024.8%2C248.4%2021%2C262.9%2020.8%2C269.1%2021.3%2C269.4%2021.3%2C270.4%2020.8%2C271.6%2021.3%2C271.9%2020.8%2C272.1%2021%2C276.4%2020.5%2C276.6%2021.5%2C280.6%2021%2C281.1%2022%2C283.4%2023.4%2C290.4%2024%2C299.9%2024%2C340%2088%2C340%2088%2C-40%27%20fill%3D%27%23fff%27%2F%3E%3C%2Fsvg%3E"); --tv-r1:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2048%20300%27%20preserveAspectRatio%3D%27none%27%3E%3Cpolygon%20points%3D%2727.8%2C-40%2027.8%2C0.1%2027.8%2C8.6%2028.5%2C17.1%2028%2C22.1%2026%2C31.9%2025.8%2C36.4%2026.8%2C40.9%2026.8%2C43.9%2026%2C49.4%2023.5%2C54.1%2023%2C56.6%2023.3%2C69.1%2022.8%2C72.4%2022.8%2C76.9%2023.3%2C79.4%2023%2C90.6%2023.8%2C94.9%2023.3%2C104.9%2024.5%2C116.4%2025.5%2C120.4%2025%2C132.6%2025.8%2C136.1%2025.3%2C140.4%2026%2C143.6%2026.5%2C143.9%2026.3%2C144.9%2027%2C146.1%2027.3%2C148.9%2025.3%2C159.1%2025.5%2C160.4%2025.3%2C162.6%2024.8%2C162.9%2025%2C163.9%2024.3%2C169.4%2023.5%2C171.1%2023.8%2C171.6%2023.3%2C171.9%2024%2C177.4%2023%2C186.1%2024%2C194.1%2024.8%2C196.1%2025.3%2C204.6%2024.5%2C211.9%2023.8%2C214.9%2022.8%2C216.4%2022%2C220.6%2022%2C226.4%2022.8%2C227.4%2023.5%2C230.1%2023.5%2C234.1%2022.8%2C241.1%2021%2C249.1%2021.5%2C272.4%2022.3%2C275.4%2024%2C277.9%2024.5%2C283.4%2025.5%2C286.9%2027.3%2C290.1%2027.9%2C294.6%2027.8%2C299.9%2027.8%2C340%20-40%2C340%20-40%2C-40%27%20fill%3D%27%23fff%27%2F%3E%3C%2Fsvg%3E"); } /* ---- STATBAR → ONE LONG WHITE TORN-PAPER STRIP, torn short ends ---- Verbatim from teardown-im8.css (base .statbar + the printed-paper override). The left/right short ends are torn (--tv-l2 / --tv-r1 tiled repeat-y); the long top and bottom edges are cut straight, which is what a strip ripped off a wider sheet actually looks like. The centre gradient mask fills everything between the two 46px rag bands. `rotate:-.4deg` is the hand-placed tilt. Its wrapper (.card-sh) carries the shadow — see MASK CLIPS ITS OWN SHADOW. */ .statbar{display:grid;grid-template-columns:repeat(6,1fr);margin-top:44px; gap:0;border:0;border-radius:0;overflow:visible;box-shadow:none;position:relative; background:var(--pp-speck-w) var(--pp-sp,0 0)/var(--pp-s-size) repeat, var(--pp-grain-w) var(--pp-gp,0 0)/var(--pp-g-size) repeat #fff; background-blend-mode:multiply,multiply; rotate:-.4deg;padding-inline:var(--tear-amp); -webkit-mask-image:var(--tv-l2),var(--tv-r1),linear-gradient(#000,#000); mask-image:var(--tv-l2),var(--tv-r1),linear-gradient(#000,#000); -webkit-mask-repeat:repeat-y,repeat-y,no-repeat;mask-repeat:repeat-y,repeat-y,no-repeat; -webkit-mask-size:48px 300px,48px 300px,calc(100% - 92px) 100%; mask-size:48px 300px,48px 300px,calc(100% - 92px) 100%; -webkit-mask-position:left top,right top,center;mask-position:left top,right top,center} .statbar .stat{background:none;padding:18px 20px;position:relative} /* hairline rule between cells instead of the grid-gap trick a bordered card uses — a gap would show the dark page through the paper. */ .statbar .stat + .stat::before{content:"";position:absolute;left:0;top:24%;bottom:24%; width:1px;background:rgba(30,22,10,.16)} .statbar .stat .n{color:#141109;font-size:clamp(1.45rem,2.7vw,1.85rem)} .statbar .stat .l{color:#4a4234;font-size:.6rem} /* the accent glyph is ink at 47% on paper — brand blue on white is ~2:1 */ .statbar .stat .n .u,.stat .n .u{color:#141109;opacity:.47} /* CLEARANCE helpers — a cream edge that receives the deep up2 rag must clear the rag's overhang (the up2 polygon's deepest tooth reaches ~82% of --tear-h above the boundary) so no tooth lands within ~40px of text. */ .tear-clear-top{padding-top:var(--tear-gap-light)} /* overhang (~82% of --tear-h) PLUS the canonical cream→rag gap, so the deepest tooth still clears content by --tear-gap-light instead of grazing it */ .tear-clear-bottom{padding-bottom:calc(var(--tear-h) * .82 + var(--tear-gap-light))} .tear-recv-dark{padding-top:var(--tear-gap-dark)}