/* HAVEN FLIP PUBLISHING — §5 portable geometry + FlipGrid board + HavenFlip book (founder addendum, Aug 25). Loads AFTER hhh.css: this layer IS the FlipCard specification and wins the cascade. Only color tokens change per brand; sizes/weights/spacing are identical across all three. */ /* ===== §5 NEWS FLIP CARD — exact type + box, all brands ===== */ .hh-flipcard--news,.hh-flipcard--news .hh-flipinner,.hh-flipcard--news .hh-face{min-height:520px} .hh-flipcard--news{height:auto} .hh-flipcard--news .hh-flipinner{height:auto} .hh-flipcard--news .hh-face{padding:14px;border-radius:16px;height:auto} .hh-flipcard--news .hh-front{gap:8px} .hh-flipcard--news .hh-back{gap:6px;position:relative;overflow:auto} .hh-flipcard--news .hh-cats a{font-size:12.5px;font-weight:800;text-transform:uppercase;letter-spacing:.05em} .hh-flipcard--news .hh-front .hh-title{font-size:25px;font-weight:900;line-height:1.18;text-wrap:balance;overflow-wrap:normal;hyphens:none;display:block;-webkit-line-clamp:unset;overflow:visible;text-overflow:clip} .hh-flipcard--news .hh-front .hh-meta,.hh-flipcard--news .hh-back .hh-meta{font-size:15.5px;font-weight:400} .hh-flipcard .hh-flipbtn,.hh-flipcard .hh-front .hh-flipbtn,.hh-flipcard .hh-flipbtn--return, .hh-flipcard .hh-backnav .hh-flipbtn,.hh-regcard .hh-flipbtn, .hh-flipcard--news .hh-flipbtn,.hh-flipcard--news .hh-front .hh-flipbtn,.hh-flipcard--news .hh-flipbtn--return, .hh-grid .hh-flipcard--news .hh-flipbtn,.hh-grid .hh-flipcard--news .hh-backnav .hh-flipbtn{ font-size:29px;font-weight:900;line-height:1.1;min-height:58px;padding:8px 14px;border-width:2.5px;width:100%;border-radius:6px; display:inline-flex;align-items:center;justify-content:center;gap:0;overflow:visible;margin-bottom:0} /* §13 control pair law (9mm): the front Flip To Reveal and back Return To Front compute IDENTICAL — the grid-scoped selectors above outweigh the legacy donor-ratio grid overrides for both controls equally */ .hh-flipcard .hh-flipbtn .hh-flipbtn__u,.hh-flipcard .hh-flipbtn--return .hh-flipbtn__u, .hh-regcard .hh-flipbtn .hh-flipbtn__u,.hh-flipcard--news .hh-flipbtn__u{ font-size:1.9em;line-height:1;display:inline-flex;align-items:center;margin-left:12px;flex:none} /* §3.7 ROUTE CONTROL — a real pill in its own action area, never a bare text link */ .hh-flipcard .hh-backlink,.hh-flipcard--news .hh-backlink{display:inline-flex;align-items:center;justify-content:center;width:100%; min-height:52px;padding:10px 16px;font-size:18px;font-weight:900;color:#0B1820;background:#18AFEE; border:2.5px solid #18AFEE;border-radius:999px;text-decoration:none;text-transform:uppercase; letter-spacing:.04em;box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 3px 0 rgba(4,54,78,.55); transition:background .15s cubic-bezier(.2,.8,.2,1),transform .15s cubic-bezier(.2,.8,.2,1)} .hh-flipcard--news .hh-backlink:hover{background:#4FC4F5;border-color:#4FC4F5;color:#06212E;text-decoration:none;transform:translateY(-2px)} .hh-flipcard--news .hh-backlink:active{transform:scale(.98)} .hh-flipcard--news .hh-backlink:focus-visible{outline:3px solid #fff;outline-offset:3px} .hh-flipcard--news .hh-backlink .hh-flipbtn__u{font-size:1.2em;margin-left:8px;color:inherit} .hh-flipcard--news .hh-quick,.hh-flipcard--news .hh-back .hh-dek{font-size:17.5px;font-weight:500;line-height:1.5;margin:0} .hh-flipcard--news .hh-ctx{font-size:15px;font-style:italic;margin:0;opacity:.92} .hh-flipcard--news .hh-save{font-size:14.5px;font-weight:800} .hh-flipcard--news .hh-ext{font-size:12px} @media (max-width:699px){.hh-flipcard--news .hh-front .hh-title{font-size:22px}} /* §16: the 29px pair survives every mobile width — this overrides the legacy 19px shrink */ @media (max-width:379px){.hh-flipcard .hh-flipbtn,.hh-flipcard .hh-flipbtn--return,.hh-regcard .hh-flipbtn, .hh-flipcard--news .hh-flipbtn,.hh-flipcard--news .hh-flipbtn--return,.hh-grid .hh-flipcard--news .hh-flipbtn{font-size:29px;min-height:58px;padding:8px 14px}} /* ===== brand tokens (colors ONLY — geometry above is shared) ===== */ [data-rf-brand="raphaven"] .hh-face,[data-brand="raphaven"] .hh-face{border-color:#E8112D;background:#fff} [data-rf-brand="raphaven"] .hh-cats a,[data-brand="raphaven"] .hh-cats a{background:#E8112D} [data-rf-brand="raphaven"] .hh-front .hh-flipbtn,[data-brand="raphaven"] .hh-front .hh-flipbtn{border-color:#E8112D;color:#7A0D16} [data-rf-brand="raphaven"] .hh-front .hh-flipbtn:hover,[data-brand="raphaven"] .hh-front .hh-flipbtn:hover{background:#E8112D;color:#fff} [data-rf-brand="raphaven"] .hh-back,[data-brand="raphaven"] .hh-back{background:#141013;border-color:#E8112D} [data-rf-brand="raphaven"] .hh-backlink,[data-brand="raphaven"] .hh-backlink{color:#FF5A66} [data-rf-brand="musichaven"] .hh-face{border-color:rgba(228,200,120,.72);background:#FFFDF7} [data-rf-brand="musichaven"] .hh-cats a{background:#7A6125} [data-rf-brand="musichaven"] .hh-front .hh-title{font-family:'Playfair Display',Georgia,serif;letter-spacing:-0.02em} [data-rf-brand="musichaven"] .hh-front .hh-flipbtn{border-color:#C8A44D;color:#7A6125;background:#FFFDF7} [data-rf-brand="musichaven"] .hh-front .hh-flipbtn:hover{background:#C8A44D;color:#241733} [data-rf-brand="musichaven"] .hh-back{background:#3A1F4D;border-color:rgba(228,200,120,.72);color:#F3ECE0} [data-rf-brand="musichaven"] .hh-backlink{color:#E4C878} [data-rf-brand="musichaven"] .hh-flipbtn__u{color:#E4C878} [data-rf-brand="musichaven"] .hh-back .hh-flipbtn--return{border-color:#E4C878;color:#F3ECE0} /* ===== HAVEN FLIPGRID — hinged board (original Haven treatment; no third-party trade dress) ===== */ .fg-board{border:2px solid #0E1216;border-radius:18px;padding:22px;background:linear-gradient(180deg,#F5F8FA,#EDF2F5);position:relative} .fg-board::before{content:"";position:absolute;left:22px;right:22px;top:12px;height:4px;border-radius:99px;background:linear-gradient(90deg,#0E1216,#3A4750 30%,#0E1216 60%,#3A4750);opacity:.22} [data-rf-brand="raphaven"].fg-board{background:linear-gradient(180deg,#FFF6F7,#FDECEE);border-color:#141013} [data-rf-brand="musichaven"].fg-board{background:linear-gradient(180deg,#FBF4E6,#F4EAD6);border-color:#3A1F4D} .fg-head{display:flex;flex-wrap:wrap;gap:10px;align-items:baseline;justify-content:space-between;margin:0 0 16px} .fg-head h2{margin:0;font-size:22px;font-weight:900;letter-spacing:-0.01em} .fg-head .fg-note{font-size:12.5px;color:#54626C} .fg-grid{display:grid;grid-template-columns:repeat(var(--fg-eff,3),minmax(0,1fr));gap:26px;align-items:stretch} .fg-crown{display:flex;justify-content:center;gap:26px;margin:0 0 26px} .fg-crown:empty{display:none;margin:0} .fg-crown .fg-tile{width:calc((100% - (var(--fg-eff,3) - 1)*26px)/var(--fg-eff,3));flex:none} .fg-tile{position:relative;min-width:0} /* the shared hinge: a rail cap + two rivets on every tile */ .fg-tile::before{content:"";position:absolute;left:14%;right:14%;top:-9px;height:9px;border-radius:6px 6px 0 0;background:linear-gradient(180deg,#2A3640,#0E1216);z-index:1} .fg-tile::after{content:"";position:absolute;top:-6px;left:calc(14% + 8px);width:5px;height:5px;border-radius:50%;background:#8FA1AD;box-shadow:calc(72% - 16px) 0 0 #8FA1AD;z-index:2} [data-rf-brand="raphaven"] .fg-tile::before{background:linear-gradient(180deg,#5A0A14,#141013)} [data-rf-brand="musichaven"] .fg-tile::before{background:linear-gradient(180deg,#52276F,#241733)} .fg-tile .hh-flipcard{height:100%} @media (max-width:700px){.fg-grid{grid-template-columns:1fr}.fg-crown{flex-direction:column}.fg-crown .fg-tile{width:100%}.fg-board{padding:14px}} /* ===== HAVENFLIP — article-width flipper book ===== */ .fs-wrap{margin:22px 0;max-width:100%} .fs-book{position:relative;perspective:1600px;border:2px solid #0E1216;border-radius:18px;background:#0E1216;overflow:hidden} .fs-book:focus-visible{outline:3px solid #18AFEE;outline-offset:3px} .fs-spine{position:absolute;left:0;top:0;bottom:0;width:14px;background:linear-gradient(90deg,#000 0%,#2A3640 60%,transparent);z-index:3;pointer-events:none} .fs-page{display:grid;grid-template-rows:auto 1fr;min-height:520px;background:#fff;transform-origin:left center;backface-visibility:hidden;-webkit-backface-visibility:hidden} .fs-page.is-turning-out{transition:transform .26s cubic-bezier(.55,.06,.68,.19);transform:rotateY(-88deg)} .fs-page.is-turning-in{animation:fsIn .26s cubic-bezier(.22,.61,.36,1)} @keyframes fsIn{from{transform:rotateY(70deg)}to{transform:rotateY(0)}} @media (prefers-reduced-motion:reduce){.fs-page.is-turning-out{transition:none;transform:none;opacity:0}.fs-page.is-turning-in{animation:none}} .fs-media{position:relative;aspect-ratio:16/9;background:#101820;overflow:hidden} .fs-media img{width:100%;height:100%;object-fit:contain;display:block} /* FOUNDER REPAIR (Sep 1): the complete approved photograph, never a cover crop — the existing contain/blue-plate treatment */ .fs-media{background:#0F9FE1} .fs-media .fs-noimg{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:#fff;background:linear-gradient(160deg,#0879B3,#0E1216);font-weight:900;font-size:22px;text-align:center;padding:20px} .fs-media .fs-noimg small{font-size:12.5px;font-weight:600;opacity:.85} .fs-body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:8px;background:#fff} .fs-kick{font-size:12.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#0879B3;margin:0} .fs-h{font-size:24px;font-weight:900;line-height:1.16;margin:0} .fs-copy{font-size:17px;line-height:1.55;color:#17242C;margin:0} .fs-credit{font-size:12.5px;color:#50616B;margin:0} .fs-link{font-weight:800;color:#0A6A92;text-decoration:underline;font-size:15.5px} .fs-cta{display:flex;flex-direction:column;align-items:flex-start;gap:12px;justify-content:center;min-height:220px} .fs-cta a.hh-flipbtn{width:auto;font-size:22px;min-height:54px;padding:8px 22px} .fs-rail{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 2px 0;flex-wrap:wrap} .fs-pill{min-height:52px;min-width:120px;padding:8px 18px;border:2.5px solid #0E1216;border-radius:999px;background:#fff;font-weight:900;font-size:19px;cursor:pointer;display:inline-flex;align-items:center;gap:10px;justify-content:center;font-family:inherit;box-shadow:inset 0 2px 0 rgba(255,255,255,.75),0 3px 0 rgba(14,18,22,.28)} .fs-pill:hover:not(:disabled){background:#0E1216;color:#fff} .fs-pill:active:not(:disabled){transform:scale(.98)} .fs-pill:disabled{opacity:.38;cursor:not-allowed} .fs-pill:focus-visible{outline:3px solid #18AFEE;outline-offset:2px} .fs-count{font-weight:900;font-size:15.5px;letter-spacing:.02em;font-variant-numeric:tabular-nums} .fs-menu{display:flex;gap:8px;flex-wrap:wrap;padding:10px 2px 0} .fs-menu button{min-width:44px;min-height:44px;border:2px solid #0E1216;border-radius:10px;background:#fff;font-weight:900;font-size:15px;cursor:pointer;font-family:inherit} .fs-menu button[aria-current="true"]{background:#0E1216;color:#fff} .fs-menu button:focus-visible{outline:3px solid #18AFEE;outline-offset:2px} [data-rf-brand="raphaven"] .fs-book{border-color:#141013;background:#141013} [data-rf-brand="raphaven"] .fs-kick{color:#B00D1F} [data-rf-brand="raphaven"] .fs-pill{border-color:#E8112D;color:#7A0D16} [data-rf-brand="raphaven"] .fs-pill:hover:not(:disabled){background:#E8112D;color:#fff} [data-rf-brand="raphaven"] .fs-media .fs-noimg{background:linear-gradient(160deg,#B00D1F,#141013)} [data-rf-brand="musichaven"] .fs-book{border-color:#3A1F4D;background:#241733} [data-rf-brand="musichaven"] .fs-kick{color:#7A6125} [data-rf-brand="musichaven"] .fs-h{font-family:'Playfair Display',Georgia,serif} [data-rf-brand="musichaven"] .fs-body{background:#FFFDF7} [data-rf-brand="musichaven"] .fs-page{background:#FFFDF7} [data-rf-brand="musichaven"] .fs-pill{border-color:#C8A44D;color:#7A6125;background:#FFFDF7} [data-rf-brand="musichaven"] .fs-pill:hover:not(:disabled){background:#C8A44D;color:#241733} [data-rf-brand="musichaven"] .fs-media .fs-noimg{background:linear-gradient(160deg,#3A1F4D,#241733);color:#E4C878} @media (max-width:600px){.fs-h{font-size:20px}.fs-copy{font-size:16px}.fs-pill{min-width:104px;font-size:17px}.fs-media{aspect-ratio:4/3}} @media (forced-colors:active){.fs-pill,.fs-menu button,.fg-board,.fs-book{border:2px solid ButtonText}.fs-pill:disabled{opacity:1;color:GrayText;border-color:GrayText}} /* ===== HAVENFLIP — NO VISIBLE NUMBERS, NO TOOLBAR (founder, Aug 28) ===== */ .fs-rail,.fs-menu,.fs-count,.fs-pill{display:none!important} .fs-book{position:relative;outline:none} .fs-book:focus-visible{outline:3px solid #18AFEE;outline-offset:4px} /* the turn surface fills its host box — the photograph, or the dedicated band on a text-only leaf */ .fs-turn{position:absolute;top:0;bottom:0;width:16%;min-width:56px;min-height:56px;z-index:6;border:0; padding:0;background:transparent;cursor:pointer;appearance:none;font:inherit;color:transparent} .fs-band{position:relative;height:96px;margin:0} .fs-turn--fwd{right:0} .fs-turn--back{left:0} .fs-turn:disabled{cursor:default;pointer-events:none} /* a restrained page-edge lift belongs to the PAGE — never a button. It fades once the reader has turned. */ .fs-turn::after{content:"";position:absolute;top:8%;bottom:8%;width:26px;pointer-events:none; transition:opacity .28s cubic-bezier(.2,.8,.2,1),transform .28s cubic-bezier(.2,.8,.2,1);opacity:.85} .fs-turn--fwd::after{right:0;border-radius:22px 0 0 22px; background:linear-gradient(270deg,rgba(11,24,32,.20),rgba(11,24,32,.04) 60%,transparent); box-shadow:inset -1px 0 0 rgba(255,255,255,.55)} .fs-turn--back::after{left:0;border-radius:0 22px 22px 0; background:linear-gradient(90deg,rgba(11,24,32,.20),rgba(11,24,32,.04) 60%,transparent); box-shadow:inset 1px 0 0 rgba(255,255,255,.55)} .fs-turn:disabled::after{opacity:0} .fs-book[data-learned="1"] .fs-turn::after{opacity:0} .fs-turn:hover::after{opacity:1;transform:translateX(0) scaleX(1.12)} .fs-turn--fwd:hover::after{transform-origin:right center} .fs-turn--back:hover::after{transform-origin:left center} @media (hover:none){.fs-turn::after{width:20px}} @media (prefers-reduced-motion:reduce){.fs-turn::after{transition:none}} /* ===== HAVENFLIP FOLD — sheet lifts off the hinge, destination leaf underneath (founder, Aug 29) ===== */ .fs-book{position:relative;perspective:1900px;perspective-origin:0% 50%;touch-action:pan-y;user-select:none} .fs-under{position:absolute;inset:0;overflow:hidden;z-index:1;background:#fff; box-shadow:inset 14px 0 22px -14px rgba(8,20,28,.42)} .fs-page{position:relative;z-index:2;transform-origin:0% 50%;backface-visibility:hidden; transform:rotateY(var(--fsa,0deg));background:#fff;will-change:transform} .fs-book[data-folding="1"] .fs-page{box-shadow:26px 0 48px -18px rgba(8,20,28,.5)} .fs-glare{position:absolute;inset:0;pointer-events:none;opacity:0;z-index:3; background:linear-gradient(90deg,rgba(255,255,255,.62),rgba(255,255,255,.06) 26%,rgba(8,20,28,.16) 74%,rgba(8,20,28,.42))} .fs-spine{position:absolute;left:0;top:0;bottom:0;width:5px;z-index:4;pointer-events:none; background:linear-gradient(90deg,rgba(8,20,28,.30),rgba(8,20,28,0))} .fs-book[data-folding="1"]{cursor:grabbing} @media (prefers-reduced-motion:reduce){.fs-page,.fs-glare{transition:none!important}} /* the final leaf's route control obeys the capsized floor: 58px desktop / 52px mobile, >=22px, 900 */ .fs-cta a.hh-flipbtn,.fs-page a.hh-flipbtn{min-height:58px!important;font-size:22px!important; font-weight:900!important;padding:14px 26px!important;white-space:nowrap;text-transform:uppercase} @media (max-width:600px){.fs-cta a.hh-flipbtn,.fs-page a.hh-flipbtn{min-height:52px!important;padding:12px 16px!important}} /* ===== TURN ARROWS — permanently visible physical leaf controls, never pagination (founder, Aug 29) ===== The full-height zone stays the drag surface; the circular arrow sits at the media midpoint inside it. */ .fs-arrow{position:absolute;top:50%;transform:translateY(-50%); width:56px;height:56px;border-radius:999px;display:flex;align-items:center;justify-content:center; background:rgba(7,20,26,.88);border:3px solid #1FA6D9;color:#fff;font-size:32px;font-weight:900; line-height:1;pointer-events:none;opacity:1; box-shadow:inset 0 1px 0 rgba(255,255,255,.32),0 3px 0 rgba(4,54,78,.55)} .fs-turn--back .fs-arrow{left:18px} .fs-turn--fwd .fs-arrow{right:18px} .fs-turn:disabled .fs-arrow{opacity:.35} .fs-turn:hover:not(:disabled) .fs-arrow{background:rgba(7,20,26,.96);transform:translateY(-50%) scale(1.05)} .fs-turn{pointer-events:auto} .fs-turn:disabled{pointer-events:none} @media (max-width:600px){ .fs-arrow{width:46px;height:46px;font-size:27px;border-width:2.5px} .fs-turn--back .fs-arrow{left:8px} .fs-turn--fwd .fs-arrow{right:8px}} /* ===== ZERO SEAM — the rail bottom edge IS the photograph's top edge ===== */ .fs-page .hh-ribbon{margin:0!important;border-radius:0!important} .fs-page .hh-ribbon+.fs-media,.fs-under .hh-ribbon+.fs-media{margin-top:0!important} .fs-page .fs-media,.fs-under .fs-media{margin-top:0!important} .fs-page,.fs-under{padding-top:0!important;row-gap:0} /* the rail and arrows must answer to the COMPONENT's width, not only the viewport — a narrow embed gets the mobile geometry just as a 390px screen does */ .fs-wrap{container-type:inline-size;container-name:hfbook} @container hfbook (max-width:600px){ .fs-page .hh-ribbon,.fs-under .hh-ribbon{height:54px} .fs-page .hh-ribbon__pennant,.fs-under .hh-ribbon__pennant{flex:0 0 82px;width:82px;padding:0 12px 0 6px} .fs-page .hh-ribbon__pennant img,.fs-under .hh-ribbon__pennant img{width:42px;height:42px} .fs-page .hh-ribbon__cats,.fs-under .hh-ribbon__cats{height:54px;padding:0 16px} .fs-page .hh-ribbon__cats a,.fs-page .hh-ribbon__cats span, .fs-under .hh-ribbon__cats a,.fs-under .hh-ribbon__cats span{font-size:16px} .fs-arrow{width:46px;height:46px;font-size:27px;border-width:2.5px} .fs-turn--back .fs-arrow{left:8px} .fs-turn--fwd .fs-arrow{right:8px}} /* every interactive element inside a leaf outranks the turn surface */ .fs-page .hh-ribbon,.fs-page .hh-ribbon a,.fs-page a.hh-flipbtn,.fs-page .fs-cta{position:relative;z-index:7} /* FOCUS LAW — the turn surface is a real tabbable control, so it must paint on focus. The ring follows the ARROW CIRCLE, not the invisible band: the band is 115x403 and a ring around it would read as a page edge. .fs-arrow is pointer-events:none but still paints, so this is purely visual. */ .fs-turn:focus-visible{outline:none} .fs-turn:focus-visible .fs-arrow{outline:3px solid #fff;outline-offset:3px; box-shadow:inset 0 1px 0 rgba(255,255,255,.32),0 0 0 3px rgba(31,166,217,.55),0 3px 0 rgba(4,54,78,.55)} .fs-turn[data-focus]{outline:none} .fs-turn[data-focus] .fs-arrow{outline:3px solid #fff;outline-offset:3px; box-shadow:inset 0 1px 0 rgba(255,255,255,.32),0 0 0 3px rgba(31,166,217,.55),0 3px 0 rgba(4,54,78,.55)} @media (forced-colors:active){.fs-turn:focus-visible .fs-arrow,.fs-turn[data-focus] .fs-arrow{outline:3px solid CanvasText}} /* ===== HIPHOPHAVEN FLIPCARD SPACING LEDGER (founder, Aug 29) ===== Behavioural donor: the approved RapHaven rhythm (copy→control 16, control→bottom 16, 0px front/back delta). Ported as BEHAVIOUR only — no RapHaven colour, font, ribbon, content, geometry or selector. SCOPED to the HipHopHaven root modifier: it cannot reach RapHaven, MusicHaven, a body selector or a shared flip rule. The cause of the ~32.7px drift was `margin-top:auto` on the control (plus `auto` on .hh-backnav and .hh-regcard's control) — spacing produced by leftover space instead of the ledger. */ .hh-flipcard--hhh .hh-flipbtn, .hh-flipcard--hhh .hh-backnav, .hh-flipcard--hhh .hh-backnav .hh-flipbtn, .hh-regcard--hhh .hh-flipbtn{margin-top:0!important} /* the ledger, in normal flow — the copy and the action are one editorial stack */ .hh-flipcard--hhh .hh-cats{margin:0 0 8px} .hh-flipcard--hhh .hh-kicker{margin:0 0 8px} .hh-flipcard--hhh .hh-title{margin:8px 0 0} .hh-flipcard--hhh .hh-dek,.hh-flipcard--hhh .hh-quick{margin:12px 0 0} .hh-flipcard--hhh .hh-meta{margin:12px 0 0} .hh-flipcard--hhh .hh-meta:empty{display:none;margin:0} /* missing metadata reserves nothing */ /* FINAL COPY → ACTION GROUP = 16px. The action group is whichever comes first in the stack. */ .hh-flipcard--hhh .hh-front .hh-flipbtn{margin-top:16px!important} .hh-flipcard--hhh .hh-back .hh-backlink{margin-top:16px!important} .hh-flipcard--hhh .hh-back .hh-backnav{padding-top:0!important;margin-top:12px!important} .hh-flipcard--hhh .hh-back .hh-backlink~.hh-backnav{margin-top:12px!important} /* one action GROUP */ /* FINAL CONTROL → FACE BOTTOM = 16px, set by the face's own padding-bottom */ .hh-flipcard--hhh .hh-face{padding-bottom:16px!important} .hh-regcard--hhh{padding-bottom:16px!important;justify-content:flex-start} .hh-regcard--hhh .hh-flipbtn{margin-top:16px!important} /* the front's flex gap must not add to the ledger */ .hh-flipcard--hhh .hh-front,.hh-flipcard--hhh .hh-back{gap:0!important} /* NO MATTE TRICK. The front's media well keeps the locked 16:9 ratio and stays identical to the back's; the front's residual bottom whitespace is reported to the founder, not absorbed. See CLAUDE.md. */ /* ===== FOUNDER RULING (Aug 29): the back's two controls become ONE ACTION ROW ===== Read The Full Story ↗ and Return To Front ↻ sit side by side, so the back's action group is one control height (76px) exactly like the front's. Both faces then land at 16px with the media well and front/back media identity untouched — no matte trick, no flexible cavity, no crop change. */ .hh-flipcard--hhh .hh-back .hh-backlink{margin-top:16px!important} .hh-flipcard--hhh .hh-back .hh-backnav{display:contents!important} .hh-flipcard--hhh .hh-back{display:flex;flex-direction:column} .hh-flipcard--hhh .hh-back .hh-actionrow{display:flex;align-items:stretch;gap:12px;margin-top:16px!important} .hh-flipcard--hhh .hh-back .hh-actionrow .hh-backlink, .hh-flipcard--hhh .hh-back .hh-actionrow .hh-flipbtn{margin-top:0!important;width:auto;flex:1 1 0;min-width:0} /* LABELS AND FONT SIZES ARE FROZEN. Only horizontal padding and proportional widths flex, per the ruling. Both halves share one height (align-items:stretch), the row is one fixed action slot. */ .hh-flipcard--hhh .hh-back .hh-actionrow>*{padding-left:10px!important;padding-right:10px!important; white-space:nowrap;overflow:hidden;text-overflow:ellipsis;justify-content:center} .hh-flipcard--hhh .hh-back .hh-actionrow .hh-backlink{flex:1 1 0} .hh-flipcard--hhh .hh-back .hh-actionrow .hh-flipbtn{flex:1 1 0} .hh-flipcard--hhh .hh-back .hh-actionrow .hh-flipbtn .hh-flipbtn__u{margin-left:6px!important} @media (max-width:420px){.hh-flipcard--hhh .hh-back .hh-actionrow>*{padding-left:6px!important;padding-right:6px!important}} /* the action ROW occupies the same fixed slot height as the front's single control, so the two faces' action groups are identical and neither face inherits slack from the other */ .hh-flipcard--hhh .hh-back .hh-actionrow{min-height:58px} .hh-flipcard--hhh .hh-back .hh-actionrow>*{min-height:58px!important;height:auto} /* ===== CONTENT-FIT PER RECORD, STABLE THROUGH THE FLIP (founder, Aug 29) ===== The FRONT stays in normal flow and defines this card's height — so it is content-fit and its control always lands 16px off the bottom. The BACK is absolutely positioned over it at inset:0, so both faces share one box and flipping cannot change the card's height. Only the back's COPY PORT scrolls. Every stretch mechanism is removed: no universal height, no min-height, no height:100%, no flex-grow, no margin-top:auto, no grid-row stretch. Grid cards start, they do not stretch to the tallest sibling. */ .hh-flipcard--hhh{align-self:start;height:auto!important;min-height:0!important} .hh-flipcard--hhh .hh-flipinner{display:block!important;position:relative;height:auto!important; min-height:0!important;transform-style:preserve-3d} .hh-flipcard--hhh .hh-front{position:relative!important;height:auto!important;min-height:0!important; display:flex;flex-direction:column;justify-content:flex-start} .hh-flipcard--hhh .hh-back{position:absolute!important;inset:0!important;height:auto!important; min-height:0!important;display:flex;flex-direction:column;justify-content:flex-start;overflow:hidden!important} /* the front keeps its layout while hidden, so the card's height never moves */ .hh-flipcard--hhh.flipped .hh-front{visibility:hidden;pointer-events:none} /* nothing inside a face may stretch. The blanket rule must NOT zero margins — at equal specificity it erased the ledger. Only the specific auto-margins are killed, by name. */ .hh-flipcard--hhh .hh-face>*{flex:0 0 auto} .hh-flipcard--hhh .hh-flipbtn,.hh-flipcard--hhh .hh-backnav,.hh-regcard--hhh .hh-flipbtn{margin-top:0} .hh-flipcard--hhh .hh-media,.hh-flipcard--hhh .hh-poster,.hh-flipcard--hhh .hh-backmedia{flex:0 0 auto} /* ONLY the back's copy port scrolls, and only when the copy exceeds the front-defined box */ .hh-flipcard--hhh .hh-back .hh-quick{flex:1 1 auto!important;min-height:0;overflow:auto; overscroll-behavior:contain} /* the locked ledger */ .hh-flipcard--hhh .hh-face{padding-bottom:16px!important} .hh-flipcard--hhh .hh-cats,.hh-flipcard--hhh .hh-kicker{margin:0 0 8px!important} .hh-flipcard--hhh .hh-title{margin:8px 0 0!important} .hh-flipcard--hhh .hh-dek{margin:12px 0 0!important} .hh-flipcard--hhh .hh-meta{margin:12px 0 0!important} .hh-flipcard--hhh .hh-meta:empty{display:none!important;margin:0!important} .hh-flipcard--hhh .hh-meta:empty{display:none;margin:0} .hh-flipcard--hhh .hh-front .hh-flipbtn{margin-top:16px!important} .hh-flipcard--hhh .hh-back .hh-quick{margin:12px 0 0} .hh-flipcard--hhh .hh-back .hh-actionrow{margin-top:16px!important;padding-top:0!important} /* the §5 520px floor is a UNIVERSAL fixed height — content-fit per record supersedes it here */ .hh-flipcard--hhh,.hh-flipcard--hhh .hh-flipinner,.hh-flipcard--hhh .hh-face{min-height:0!important} .fg-grid,.hh-grid{align-items:start} .fg-tile .hh-flipcard--hhh{height:auto!important} /* GLYPH-ACCURATE 16px: the copy block's bottom edge sits below its last glyph by the line-box's half-leading (measured 3px on the front, 7px on the back), so a 16px margin reads 19/23 from the ink. Trimming the trailing leading makes the box edge the text edge, so the margin IS the glyph gap. */ .hh-flipcard--hhh .hh-face>*:not(.hh-flipbtn):not(.hh-actionrow):not(.hh-media):not(.hh-poster):not(.hh-backmedia):not(.rr){ text-box-trim:trim-end;text-box-edge:auto text} /* THE BACK'S ACTION AREA IS THE BOOKMARK ROW + THE ACTION ROW: copy → action area 16px, action-to-action gap 12px, last action → inner bottom 16px. The bookmark is an action, never copy. */ .hh-flipcard--hhh .hh-back .hh-actions{margin-top:16px!important} .hh-flipcard--hhh .hh-back .hh-actions+.hh-actionrow{margin-top:12px!important} .hh-flipcard--hhh .hh-back .hh-actions:empty{display:none;margin:0!important} /* THE TYPOGRAPHY POSTER IS A TEXT FALLBACK. Aspect-locking it to 16:9 with overflow:hidden sliced the headline mid-glyph once the card floor was removed. It now takes its height from its own content and keeps 16:9 only as a MINIMUM, so it can never clip. */ .hh-flipcard--hhh .hh-poster,.hh-regcard--hhh .hh-poster{aspect-ratio:auto!important;height:auto!important; overflow:visible!important;min-height:max-content!important} /* ===== ONE FLIP MECHANIC FOR --hhh CARDS (founder correction, Aug 29) ===== Two mechanics were fighting: hhh.css rotates the INNER while flipcard-spec.css rotates the BACK FACE, and my content-fit change (inner display:block, back absolute) left neither able to complete. This block states ONE mechanic explicitly and with !important so no legacy rule can win: the front stays in flow and defines the height, the back is absolute over it, and the INNER rotates in 3D. Visibility swaps at the 90 degree point, exactly as the Aug 25 seal requires. */ .hh-flipcard--hhh{perspective:1400px!important} .hh-flipcard--hhh .hh-flipinner{transform-style:preserve-3d!important; transition:transform .34s cubic-bezier(.2,.8,.2,1)!important;transform:rotateY(0deg)!important} .hh-flipcard--hhh.flipped .hh-flipinner{transform:rotateY(180deg)!important} .hh-flipcard--hhh .hh-face{backface-visibility:hidden!important;-webkit-backface-visibility:hidden!important} .hh-flipcard--hhh .hh-front{transform:rotateY(0deg)!important;visibility:visible!important; } .hh-flipcard--hhh .hh-back{transform:rotateY(180deg)!important;visibility:hidden!important; transition:visibility 0s linear .17s!important;pointer-events:none!important} .hh-flipcard--hhh.flipped .hh-front{visibility:hidden!important;pointer-events:none!important} .hh-flipcard--hhh.flipped .hh-back{visibility:visible!important;pointer-events:auto!important} @media (prefers-reduced-motion:reduce){ .hh-flipcard--hhh .hh-flipinner{transition:none!important} .hh-flipcard--hhh .hh-front,.hh-flipcard--hhh .hh-back{transition:none!important}} /* ===== THE BACK ACTION ROW MAY NEVER CUT THE LABELS ===== Two controls at 18px and 29px cannot share 273px. The row keeps ONE line wherever the labels fit and WRAPS to two full-width controls when they do not — labels and font sizes unchanged either way, and nothing is ever clipped or ellipsised. */ .hh-flipcard--hhh .hh-back .hh-actionrow{flex-wrap:wrap!important;row-gap:12px!important} /* ===== THE FLIP MUST WORK WITHOUT 3D ===== MEASURED: in this environment an inline `transform:rotateY(45deg) !important` computes to `matrix(1,0,0,1,0,0)` on the LIVE route as well as in a card preview — 3D transforms are flattened here. With the context flattened, `backface-visibility:hidden` treats the back face (rotateY(180deg)) as back-facing and hides it PERMANENTLY, so the card appeared not to flip at all. The face swap therefore rests on class-driven visibility + opacity, exactly as the Aug 25 seal specifies, and the rotation stays a progressive enhancement that adds depth where 3D is available. */ .hh-flipcard--hhh .hh-face{backface-visibility:visible!important;-webkit-backface-visibility:visible!important} .hh-flipcard--hhh .hh-front{opacity:1!important} .hh-flipcard--hhh .hh-back{opacity:0!important} .hh-flipcard--hhh.flipped .hh-front{opacity:0!important;visibility:hidden!important;pointer-events:none!important} .hh-flipcard--hhh.flipped .hh-back{opacity:1!important;visibility:visible!important;pointer-events:auto!important} @media (prefers-reduced-motion:reduce){ .hh-flipcard--hhh .hh-front,.hh-flipcard--hhh .hh-back{transition:none!important}} /* THE SINGLE SOURCE OF FACE STATE IS data-face (the Aug 25 seal's contract); .flipped is an alias so either wiring produces the same result and an inversion is structurally impossible. */ .hh-flipcard--hhh[data-face="front"] .hh-front,.hh-flipcard--hhh:not(.flipped):not([data-face="back"]) .hh-front{ opacity:1!important;visibility:visible!important;pointer-events:auto!important} .hh-flipcard--hhh[data-face="front"] .hh-back,.hh-flipcard--hhh:not(.flipped):not([data-face="back"]) .hh-back{ opacity:0!important;visibility:hidden!important;pointer-events:none!important} .hh-flipcard--hhh[data-face="back"] .hh-front,.hh-flipcard--hhh.flipped .hh-front{ opacity:0!important;visibility:hidden!important;pointer-events:none!important} .hh-flipcard--hhh[data-face="back"] .hh-back,.hh-flipcard--hhh.flipped .hh-back{ opacity:1!important;visibility:visible!important;pointer-events:auto!important} .hh-flipcard--hhh[data-face="back"] .hh-flipinner{transform:rotateY(180deg)!important} .hh-flipcard--hhh .hh-front,.hh-flipcard--hhh .hh-back{transition:none!important} /* ===== THE BACK ACTION ROW FITS THE FACE, ALWAYS (founder correction, Aug 30) ===== CAUSE: `min-width:max-content` forbade the controls from shrinking, so a 289px control stuck out of a 245px face and the face's overflow:hidden sliced it. The controls may now shrink, they stack to full-width rows, and the TYPE steps down ONLY at container widths where a full-width row physically cannot hold the locked label. Measured need: "Return To Front ↻" is 289px at 29px and "Read The Full Story ↗" is 277px at 18px, so both fit a full-width row at 356px (a 390px card) — the locked sizes survive there and step down only on the narrow 279px grid card. Nothing is ever clipped or ellipsised. */ .hh-flipcard--hhh .hh-back{container-type:inline-size;container-name:hhface} .hh-flipcard--hhh .hh-back .hh-actionrow{flex-wrap:wrap!important;row-gap:12px!important} .hh-flipcard--hhh .hh-back .hh-actionrow>*{min-width:0!important;flex:1 1 auto!important; overflow:visible!important;text-overflow:clip!important} /* below ~330px of face the two cannot share a row: each takes its own full-width row, sizes intact */ @container hhface (max-width:560px){ .hh-flipcard--hhh .hh-back .hh-actionrow>*{flex:1 1 100%!important}} /* below ~300px of face even a full-width row cannot hold the 29px label — the type steps down together */ /* ===== THE BACK FACE'S APPROVED DARK PAIR (founder correction, Aug 30) ===== `hhh.css` sets `.hh-back{color:#fff}` for a DARK back, but the dark background that pairs with it lives only in ds/flipcard-spec.css — which the production surfaces do not load — so the back was painting white ink on a white face and the continuation copy was invisible. The pair is restored HERE, in the stylesheet every surface loads, so background and ink can never separate again. */ .hh-flipcard--hhh .hh-back{background:#0E1216!important;border-color:#1FA6D9!important;color:#E8EEF2!important} .hh-flipcard--hhh .hh-back .hh-quick,.hh-flipcard--hhh .hh-back .hh-ctx, .hh-flipcard--hhh .hh-back p,.hh-flipcard--hhh .hh-back li{color:#E8EEF2!important} .hh-flipcard--hhh .hh-back .hh-meta{color:#9FB0BD!important} .hh-flipcard--hhh .hh-back .hh-ext{color:#8FA2B0!important} .hh-flipcard--hhh .hh-back .hh-flipbtn{background:#0E1216!important;color:#fff!important;border-color:#1FA6D9!important} .hh-flipcard--hhh .hh-back .hh-flipbtn:hover{background:#1FA6D9!important;color:#04222F!important} /* ===== THE COPY PORT IS CONTENT-FIT (founder correction, Aug 30) ===== `flex:1 1 auto` made the port GROW into the front-defined box (a 44px hole below the last glyph on a short back) and SHRINK below its own content (47px of continuation copy hidden on a long back). Both are the same cause. The port is now content-fit like every other child: it never holds a hole and it never hides copy. Because the back may then be taller than the front, the two faces share one grid cell again so the CARD takes the taller face's height — no crush, no hidden copy, footprint still identical. */ .hh-flipcard--hhh .hh-back .hh-quick{flex:0 0 auto!important;overflow:visible!important; min-height:0!important;max-height:none!important} .hh-flipcard--hhh .hh-flipinner{display:grid!important;grid-template-columns:minmax(0,1fr)!important} .hh-flipcard--hhh .hh-face{grid-area:1/1!important} .hh-flipcard--hhh .hh-front{position:relative!important} .hh-flipcard--hhh .hh-back{position:relative!important;inset:auto!important;overflow:visible!important} /* ===== B · THE 29px CONTROL TYPE IS LOCKED AT EVERY WIDTH (founder ruling, Aug 30) ===== No step-down, no shortened label. Where the locked label cannot share a row it takes its own full-width row, and where it cannot fit one line it wraps at 29px — which grows the SHARED grid cell ONCE, so both faces keep identical computed dimensions and there is no flip-time shift. */ .hh-flipcard--hhh .hh-back .hh-actionrow>*{white-space:normal!important;text-align:center!important; line-height:1.1!important;height:auto!important;font-size:inherit} .hh-flipcard--hhh .hh-back .hh-actionrow .hh-backlink{font-size:18px!important} .hh-flipcard--hhh .hh-back .hh-actionrow .hh-flipbtn{font-size:29px!important;padding:8px 14px!important} /* NOTHING on either face may clip canonical copy */ .hh-flipcard--hhh .hh-face .hh-dek,.hh-flipcard--hhh .hh-face .hh-quick, .hh-flipcard--hhh .hh-face .hh-title{-webkit-line-clamp:none!important;line-clamp:none!important; overflow:visible!important;display:block!important} /* ===== THE LOCKED 76px CONTROL HEIGHT, SET EXPLICITLY (founder ruling, Aug 30) ===== `flex-basis:100%` puts each back control on its own flex line, so `align-items:stretch` equalized only within a line and each control sized to its own wrapped content — 65px at 18px against 85px at 29px. The locked height is now declared on both back controls and on the front's, so all three are equal to each other by declaration rather than by layout accident. */ .hh-flipcard--hhh .hh-back .hh-actionrow>*, .hh-flipcard--hhh .hh-front .hh-flipbtn{min-height:76px!important;height:auto!important; display:inline-flex!important;align-items:center!important;justify-content:center!important} /* ===== EQUAL CONTROL HEIGHT AT EVERY WIDTH, AT THE LOCKED 29px (founder ruling, Aug 30) ===== The founder already authorized the shared footprint growing equally when necessary, which is the ruling I wrongly handed back. A one-line 29px label needs a 289px line box, so below ~323px of card width it takes two lines and computes 85px. The answer is therefore NOT to shrink the type but to grow ALL THREE controls equally: the front control and both back controls share one height at every width. */ .hh-flipcard--hhh .hh-front .hh-flipbtn, .hh-flipcard--hhh .hh-back .hh-actionrow>*{min-height:76px!important} /* below ~323px of card width the locked 29px label takes two lines and computes 85px, so ALL THREE controls grow to 85 together — the shared footprint growing equally, exactly as authorized. */ /* the card establishes its own inline-size container, so this branch is guaranteed to resolve */ .hh-flipcard--hhh{container-type:inline-size;container-name:hhcard} @container hhcard (max-width:322px){ .hh-flipcard--hhh .hh-front .hh-flipbtn, .hh-flipcard--hhh .hh-back .hh-actionrow>*{min-height:85px!important}} /* the front's own container must publish the same query context as the back's */ .hh-flipcard--hhh .hh-front{container-type:inline-size;container-name:hhface} /* the poster takes its height from its own content only — no flex-grow, no absorbed cavity */ /* ===== RECORD-SCOPED SUB-LINE CORRECTION — tory-100m only (founder-authorized lever, Aug 30) ===== This record's front copy sits 7.8px short of the shared footprint, and prose can only move a face in whole 26px lines. The authorized remedy: the smallest possible line-height adjustment, distributed across the existing rendered lines of THIS record's front excerpt. Font size, wording, width, control count and outer dimensions are unchanged, and no other record is affected. VALUE SETTLED BY SWEEP, not by taste: the front defines the card box and the back is absolutely positioned over it, so the two faces' bottom gaps trade off against each other as this value moves. 1.552 is the joint optimum — front 16.008px, back 16.000px, a 0.008px maximum deviation, which is below the 1/64px (0.0156px) the layout engine can itself represent. Lower values push the whole residual onto the front (1.5503 gave 16.289); higher values push it onto the back (1.5525 gave 16.063). */ /* same authorized lever, gucci-shiesty only: its BACK continuation sits 1.5px short of the shared footprint. 6 rendered lines x 0.25px = 1.5px. Font size, wording, width and controls unchanged. */ /* ===== THE AUTHORIZED SUB-LINE LEVER, REINSTATED (Pass 16) ===== Pass 16 tried to replace this with a structural fix — making the back's copy port absorb the difference (flex:1 1 auto) so the action would land on 16px by construction. MEASURED, IT REPRODUCED EXACTLY THE DEFECT THE FOUNDER DIAGNOSED ON AUG 30 and it was reverted: continuation copy was lost on long backs (48px on tory-100m, 53px on meg-klay, 39px on gucci-shiesty) and short backs opened a hole below the last glyph that reached 629px at a 320px viewport. The ledger read 16/16/16/16 only because the port had swallowed the difference. The founder's grid-overlay box — card height = max(front, back), no hidden copy, no hole — stands, and under it the two faces' NATURAL heights are what must match. That is what this lever does, and it is the only remedy that closes the gap without hiding copy or opening a hole. */ /* VALUE SETTLED BY SWEEP AT THE FOUNDER'S OWN CASE (card width 278px), not by taste: lever off -> front 23.75 / back 16 <- exactly the reported 23.8 / 16 failure 1.5503 -> front 16.289 / back 16 (max deviation 0.289px) 1.552 -> front 16.008 / back 16.000 (max deviation 0.008px) <- SET 1.5525 -> front 16 / back 16.063 (residual crosses to the back) 0.008px is below the 1/64px (0.0156px) the layout engine can represent. Copy->action is 16.000 on both faces, front/back delta 0px, hidden copy 0 at every value above. */ .hh-flipcard--hhh[data-story="tory-100m"] .hh-front .hh-dek{line-height:1.552!important} /* same authorized lever, gucci-shiesty only: its BACK continuation sits 1.5px short of the shared footprint. 6 rendered lines x 0.25px = 1.5px. Font size, wording, width and controls unchanged. */ .hh-flipcard--hhh[data-story="gucci-shiesty"] .hh-back .hh-quick{line-height:1.5143!important} /* ===== CANONICAL COPY MAY NEVER BE CUT (Pass 18, measured) ===== At artist.html's 205px grid cards the headline's longest unbreakable token exceeded the 177px title box by 7.3px and painted under the face's structural overflow:hidden — invisible letters. The §5 rule above pins overflow-wrap:normal as a no-mid-word-break PREFERENCE; where the word physically cannot fit, the "nothing may clip canonical copy" law outranks it. overflow-wrap:anywhere breaks ONLY a token that cannot fit its line, so every card where the copy already fits renders byte-identically, and hyphens:none still holds (no hyphen glyphs are introduced). */ .hh-flipcard--news .hh-front .hh-title{overflow-wrap:anywhere} /* ===== FOUNDER REPAIR (Sep 1) — TURN CONTROLS IN RESERVED GUTTERS, NEVER OVER THE LEAF ===== Desktop: the wrap reserves a 76px gutter left and right OUTSIDE the book; each turn zone IS its gutter. Mobile (<=600): the wrap reserves a 72px rail BELOW the book; the zones sit side by side in that rail. Arrow-to-photo overlap 0px², arrow-to-copy overlap 0px² by construction. */ .fs-wrap{position:relative;padding:0 76px} .fs-wrap>.fs-turn{position:absolute;top:0;bottom:0;width:76px;min-width:0;height:auto;z-index:6; display:flex;align-items:center;justify-content:center} .fs-wrap>.fs-turn--back{left:0;right:auto} .fs-wrap>.fs-turn--fwd{right:0;left:auto} .fs-wrap>.fs-turn::after{display:none} /* no page-edge lift gradient anywhere */ .fs-wrap>.fs-turn .fs-arrow{position:static;transform:none;left:auto;right:auto} .fs-wrap>.fs-turn:hover:not(:disabled) .fs-arrow{transform:scale(1.05)} @media (max-width:600px){ .fs-wrap{padding:0 0 72px} .fs-wrap>.fs-turn{top:auto;bottom:0;height:64px;width:50%;min-height:64px} .fs-wrap>.fs-turn--back{left:0} .fs-wrap>.fs-turn--fwd{right:0}}