body { margin: 0; background: #FFFCF7; color: #1E1915; font-family: "Figtree", "Helvetica Neue", Arial, sans-serif; -webkit-font-smoothing: antialiased; }
    a { color: #E8641B; text-decoration: none; } a:hover { color: #C24E0F; }
    h1, h2, h3 { font-family: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif; margin: 0; letter-spacing: -0.01em; }
    .navlink { font-size: 15px; font-weight: 500; color: #1E1915; }
    .col { display: flex; flex-direction: column; background: #FFFFFF; border: 1px solid #F3E7D6; border-radius: 20px; box-shadow: 0 2px 6px rgba(120,70,20,0.05); overflow: hidden; }
    .col-head { display: flex; flex-direction: column; gap: 3px; padding: 14px 16px 10px; border-bottom: 1px solid #F3E7D6; background: linear-gradient(180deg, #FFF6E8 0%, #FFFFFF 100%); }
    .col-title { font-size: 18px; font-weight: 600; }
    .col-sub { font-size: 11.5px; color: #7A6A5A; line-height: 1.4; text-wrap: pretty; }
    .row { display: flex; align-items: center; gap: 8px; padding: 5px 14px; border-bottom: 1px solid #F8F0E5; }
    .row:last-child { border-bottom: none; }
    .rank { width: 18px; flex-shrink: 0; font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: 14px; color: #C7B8A6; text-align: right; }
    .poster { width: 30px; height: 42px; border-radius: 4px; flex-shrink: 0; object-fit: cover; display: block; }
    .title { font-family: "Bricolage Grotesque", sans-serif; font-weight: 600; font-size: 14.5px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .meta { font-size: 11px; color: #7A6A5A; white-space: nowrap; }
    .lang { display: inline-flex; align-items: center; height: 16px; padding: 0 5px; border-radius: 999px; background: #FFF1DC; color: #8A5A1E; font-weight: 600; font-size: 9.5px; white-space: nowrap; }
    .score { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 7px; font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: 14px; line-height: 1; flex-shrink: 0; }
    .band { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; width: 74px; white-space: nowrap; }
    .pill { display: inline-flex; align-items: center; gap: 8px; }
    .age { display: inline-flex; align-items: center; justify-content: center; height: 20px; min-width: 20px; padding: 0 5px; border-radius: 5px; border: 1.5px solid #1E1915; font-weight: 700; font-size: 10px; white-space: nowrap; box-sizing: border-box; }
    .seeall { font-size: 13px; font-weight: 600; color: #E8641B; padding: 10px 16px; border-top: 1px solid #F3E7D6; }
    .section-title { font-size: 30px; font-weight: 600; }
    .divider { height: 1px; background: #F3E7D6; }
    .bigposter { width: 112px; height: 160px; border-radius: 10px; flex-shrink: 0; object-fit: cover; display: block; box-shadow: 0 6px 16px rgba(80,50,20,0.18); }
    .card { background: #FFFFFF; border: 1px solid #F3E7D6; border-radius: 16px; box-shadow: 0 2px 6px rgba(120,70,20,0.05); }
    .eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #8A5A1E; }
    .big { font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: 44px; line-height: 1; letter-spacing: -0.02em; }
    .pg-film .lang { height: 20px; padding: 0 8px; font-size: 11px; }
    .chip { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 999px; border: 1px solid #EDDFCC; background: #FFFFFF; font-size: 12px; font-weight: 500; color: #1E1915; white-space: nowrap; }
    .rev { display: grid; grid-template-columns: 190px minmax(0, 1fr) 130px 44px; gap: 14px; align-items: center; padding: 11px 0; border-bottom: 1px solid #F8F0E5; }
    .rev:last-child { border-bottom: none; }
    .outlet { font-weight: 600; font-size: 14px; }
    .critic { font-size: 12px; color: #7A6A5A; }
    .tag { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 5px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; }
    .tag-pub { background: #EAF6E4; color: #2A6A1E; }
    .tag-der { background: #EEF0FF; color: #3A46A8; }
    .tag-heard { background: #FFF1DC; color: #8A5A1E; }
    .tag-none { background: #F3EDE4; color: #7A6A5A; }
    .tag-retro { background: #F1E9F7; color: #6B4A87; }
    .flag { display: grid; grid-template-columns: 150px 1fr; gap: 12px; align-items: center; }
    .bar { display: flex; gap: 4px; }
    .seg { width: 22px; height: 8px; border-radius: 3px; background: #F1E6D6; }
    .section-title { font-size: 22px; font-weight: 600; }
    .credit { display: flex; flex-direction: column; gap: 2px; }
    .credit b { font-weight: 600; font-size: 14px; }
    .credit span { font-size: 12px; color: #7A6A5A; }
    .rel { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border: 1px solid #F3E7D6; border-radius: 12px; background: #FFFFFF; }
    .relposter { width: 44px; height: 62px; border-radius: 5px; object-fit: cover; display: block; flex-shrink: 0; }
  
    /* static-build additions */
    body { display: block; }
    /* the six-band distribution under the Filmi Score (Plan, Sep 6, variant B).
       Namespaced away from .bar/.seg, which are the Family Room's fixed-width
       content-flag segments and a different thing entirely. */
    .sbar { display: flex; height: 12px; border-radius: 999px; overflow: hidden; gap: 2px; background: #F3EDE4; }
    .sbar i { display: block; height: 100%; min-width: 0; }
    /* the same 2px gaps the bar has, so each count sits dead centre under its own segment */
    .sbar-lab { display: flex; gap: 2px; font-size: 11px; margin-top: 3px; }
    .sbar-lab span { min-width: 0; text-align: center; color: #1E1915; }
    .sbar-dir { display: flex; justify-content: space-between; font-size: 11px; color: #7A6A5A; }
    .blk { color: inherit; text-decoration: none; display: block; }
    a.blk:hover { color: inherit; }
    .col .blk .row { border-bottom: 1px solid #F8F0E5; }
    a.credit { text-decoration: none; color: inherit; }
    /* credits carry a face now (Sep 2), so .credit is a row, not a column; the
       .blk rule above would otherwise flatten the unlinked ones back to a block */
    .credit.blk { display: flex; flex-direction: row; align-items: center; gap: 9px; }
    .credit-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
    .credit-txt b, .credit-txt span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    a.rel.blk { display: flex; }
    .rel.blk { display: flex; }   /* and the unlinked ones (collaborator with no page) */
    a.seeall { display: block; }
    /* design batch 1: every outbound link on a film-page tile sits in the same
       place — bottom-right. margin-top: auto pins it to the card's bottom edge
       (the .tiles grid row stretches its three cards to equal height by
       default, so this actually reaches the bottom, not just trails the text). */
    .tile-foot { margin-top: auto; text-align: right; }
    /* Top Films runtime range (design batch 1): two overlapping native range
       inputs, transparent track, thumb-only pointer-events — the standard
       dependency-free two-handle slider. Same house-slider thumb as .fa-pf-age. */
    .fa-rt-readout { font-size: 13px; font-weight: 600; color: #1E1915; }
    .fa-rt-track { position: relative; height: 24px; margin: 6px 0 0; }
    .fa-rt-bg { position: absolute; top: 9px; left: 0; right: 0; height: 6px; border-radius: 999px; background: #F3E7D6; }
    .fa-rt-fill { position: absolute; top: 9px; height: 6px; border-radius: 999px; background: #F2711C; }
    .fa-rt-track input[type="range"] { position: absolute; top: 0; left: 0; width: 100%; height: 24px; margin: 0;
                 -webkit-appearance: none; appearance: none; background: transparent; pointer-events: none; }
    .fa-rt-track input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 24px; height: 24px;
                 border-radius: 50%; background: #FFFFFF; border: 2px solid #F2711C; cursor: pointer; pointer-events: auto;
                 box-shadow: 0 1px 4px rgba(80,50,20,0.25); }
    .fa-rt-track input[type="range"]::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%; background: #FFFFFF;
                 border: 2px solid #F2711C; cursor: pointer; pointer-events: auto; }
    .fa-rt-track input[type="range"]::-moz-range-track { background: transparent; border: 0; }
    .fa-rt-track input[type="range"]:focus-visible::-webkit-slider-thumb { outline: 2px solid #F2711C; outline-offset: 4px; }
    .fa-rt-ends { display: flex; justify-content: space-between; font-size: 11.5px; color: #9A8877; margin-top: 4px; }
    /* Design batch 3 item C12: the batch-1 Ratings <-> Family Room tab band is
       retired. The badge is the door now — one pill under the chips on the film
       page, and the same pill wearing "<- Ratings · <score>" in the same spot on
       the Family Room page. `.fa-tab-badge` is all that survives of the tabs,
       because the badge itself was never the problem. */
    .fa-tab-badge { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px;
                    background: #FFF1DC; color: #8A5A1E; font-family: 'Bricolage Grotesque', sans-serif;
                    font-size: 12.5px; font-weight: 700; }
    .fa-agelink { display: inline-flex; align-items: center; gap: 9px; align-self: flex-start; height: 38px;
                  padding: 0 6px; border-radius: 999px; background: #FFFFFF; border: 1px solid #EDDFCC;
                  font-weight: 600; font-size: 13.5px; color: #1E1915; text-decoration: none; }
    .fa-agelink > span:not(.fa-tab-badge):not(.fa-agelink-arr) { padding-left: 2px; }
    .fa-agelink-arr { color: #7A6A5A; padding-right: 10px; }
    .fa-agelink-back { padding: 0 0 0 10px; }
    .fa-agelink:hover { border-color: #CDBFAE; }
    /* v1.5 review rows: critic's number is the badge; Filmi's reading beside it */
    .rev { grid-template-columns: 180px minmax(0, 1fr) 118px 118px 44px; }
    /* film hero is a grid so the mobile pass can lift the title above the poster */
    .heroposter { grid-column: 1; grid-row: 1 / span 2; }
    .htitle { grid-column: 2; grid-row: 1; }
    .hmscore { display: none; }
    .hrest { grid-column: 2; grid-row: 2; }
    .reading-slot { display: flex; justify-content: flex-end; }
    .reading { display: inline-flex; align-items: center; gap: 2px; padding: 3px 8px; border-radius: 8px;
               border: 1.5px dashed #3A46A8; color: #3A46A8; background: #EEF0FF; font-size: 11.5px;
               white-space: nowrap; cursor: default; }
    .reading b { font-family: "Bricolage Grotesque", sans-serif; font-size: 13px; font-weight: 700; }
    /* v1.8 §J2: while a critic's dispute of their own reading is open, the row
       says so. Quiet and factual — it names no one and gives no reason, because
       the public view behind it carries neither (migration 0005). Only the
       critic can dispute their own row, so this cannot be used against anyone. */
    .rev-disputed { display: inline-flex; align-items: center; gap: 5px; margin-top: 4px;
                    font-size: 11px; font-weight: 600; color: #8A6D1F; white-space: nowrap; }
    .rev-disputed::before { content: ""; width: 6px; height: 6px; border-radius: 999px;
                            background: #E0A82E; flex-shrink: 0; }
    /* accounts: who you are, on every page. Signed out this is a plain "Sign in"
       pill; signed in it fills saffron, grows an initial disc and prints the
       address — the nav label alone ("My films") was too quiet to read as state
       (Sandeep, Aug 31). account.js fills it with textContent, never markup. */
    .fa-id { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px;
             border: 1px solid #EDDFCC; border-radius: 999px; background: #FFFFFF; color: #1E1915;
             text-decoration: none; font-size: 13.5px; font-weight: 600; max-width: 260px;
             flex-shrink: 0; transition: border-color 0.12s, background 0.12s; }
    .fa-id:hover { border-color: #D9C6AE; }
    .fa-id.in { background: #FFF3E8; border-color: #F5C79B; padding-left: 6px; }
    .fa-id-av { display: none; width: 26px; height: 26px; border-radius: 50%; background: #F2711C;
                color: #FFFFFF; font-size: 13px; font-weight: 700; text-transform: uppercase;
                align-items: center; justify-content: center; flex-shrink: 0;
                font-family: "Bricolage Grotesque", sans-serif; }
    .fa-id.in .fa-id-av { display: flex; }
    .fa-id-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    /* accounts: the heart + the sign-in popover (account.js drives both) */
    .fa-heart { width: 44px; height: 44px; border-radius: 12px; border: 1px solid #EDDFCC; background: #FFFFFF;
                color: #B0A090; cursor: pointer; display: flex; align-items: center; justify-content: center;
                transition: color 0.15s, border-color 0.15s, background 0.15s; }
    .fa-heart:hover { color: #D64545; border-color: #F2C9C9; }
    .fa-heart.on { color: #D64545; border-color: #F2C9C9; background: #FFF3F0; }
    .fa-heart.on svg path { fill: currentColor; }
    .fa-pop { position: absolute; right: 0; top: 52px; width: 320px; max-width: 84vw; z-index: 30;
              padding: 16px 18px; display: flex; flex-direction: column; gap: 10px;
              box-shadow: 0 12px 32px rgba(80,50,20,0.18); }
    #fa-me .fa-pop, .fa-rv-form .fa-pop { position: static; width: auto; max-width: 420px; box-shadow: none; }
    /* accounts: the review composer. The ladder is ONE control — six segments
       of a single scale, coldest (Pan) to warmest (Unreserved) — so it reads
       as one choice on a phone rather than six radio buttons. */
    .fa-review { position: relative; }
    .fa-rv-form, .fa-rv-done { display: flex; flex-direction: column; gap: 16px; }
    /* these two swap via the `hidden` attribute; a class selector setting
       display:flex outranks the UA [hidden] rule, so restate it here */
    .fa-rv-form[hidden], .fa-rv-done[hidden] { display: none; }
    .fa-rv-lbl { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
                 text-transform: uppercase; color: #B0A090; margin-bottom: 8px; }
    /* the house slider style (Sandeep, design batch 1): the parent age slider
       (.fa-pf-age) is the model — same 24px thumb, 6px track, readout above,
       end labels below. This one drives both the verdict (its band) and the
       rating (its number, saved to `ratings`) from a single control. */
    .fa-vd-readout { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; }
    .fa-vd-num { font-family: "Bricolage Grotesque", sans-serif; font-size: 34px; font-weight: 700; line-height: 1; color: #C7B8A6; }
    .fa-vd-band { font-size: 15px; font-weight: 600; color: #9A8877; }
    .fa-vd-slider { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 999px;
                    outline: none; margin: 8px 0 0; }
    .fa-vd-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 24px; height: 24px; border-radius: 50%;
                 background: #FFFFFF; border: 2px solid #F2711C; cursor: pointer; box-shadow: 0 1px 4px rgba(80,50,20,0.25); }
    .fa-vd-slider::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%; background: #FFFFFF; border: 2px solid #F2711C; cursor: pointer; }
    .fa-vd-slider:focus-visible { outline: 2px solid #F2711C; outline-offset: 4px; }
    .fa-vd-ends { display: flex; justify-content: space-between; font-size: 11.5px; color: #9A8877; margin-top: 6px; }
    .fa-body { width: 100%; box-sizing: border-box; padding: 12px 14px; border: 1px solid #E3D5C2;
               border-radius: 10px; background: #FFFFFF; color: #1E1915; font-family: inherit;
               font-size: 14.5px; line-height: 1.6; resize: vertical; }
    .fa-body:focus { outline: 2px solid #F2711C; outline-offset: 1px; border-color: #F2711C; }
    .fa-chips, .fa-ctx { display: flex; gap: 8px; flex-wrap: wrap; }
    .fa-chip, .fa-where, .fa-flag { display: inline-flex; align-items: center; gap: 5px;
               padding: 7px 13px; border: 1px solid #EDDFCC; border-radius: 999px; background: #FFFFFF;
               font-family: inherit; font-size: 13px; color: #5E4E3F; cursor: pointer;
               transition: border-color 0.12s, background 0.12s, color 0.12s; }
    .fa-chip:hover, .fa-where:hover, .fa-flag:hover { border-color: #D9C6AE; }
    .fa-chip.up { border-color: #6CC04A; background: #F2FBEE; color: #3B6B24; }
    .fa-chip.down { border-color: #E8442F; background: #FFF3F0; color: #A8331F; }
    .fa-chip-mark { font-size: 9px; line-height: 1; }
    .fa-where.on, .fa-flag.on { border-color: #F2711C; background: #FFF1E3; color: #A0450A; font-weight: 600; }
    .fa-rv-foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
    .fa-post { padding: 0 18px; height: 40px; border: 0; border-radius: 10px; background: #1E1915;
               color: #FFFFFF; font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
    .fa-post:disabled { opacity: 0.55; cursor: default; }
    .fa-rv-msg { font-size: 12.5px; color: #7A6A5A; }
    .fa-done-verdict { display: flex; flex-direction: column; gap: 4px; }
    .fa-done-verdict b { font-family: "Bricolage Grotesque", sans-serif; font-size: 22px; }
    .fa-band-unreserved { color: #005E26; } .fa-band-recommend { color: #56821F; }
    .fa-band-qualified { color: #A08C20; } .fa-band-mixed { color: #9F6000; }
    .fa-band-negative-lean { color: #913408; } .fa-band-pan { color: #691112; }
    /* user-authored text: escaped by account.js, laid out with pre-wrap so the
       newlines survive without any markup being interpreted */
    .fa-done-body { font-size: 15px; line-height: 1.6; color: #1E1915; white-space: pre-wrap;
                    overflow-wrap: anywhere; }
    .fa-done-ctx { font-size: 12.5px; color: #7A6A5A; line-height: 1.5; }
    .fa-rv-done .fa-chip { cursor: default; }
    .fa-edit { align-self: flex-start; padding: 0 14px; height: 34px; border: 1px solid #EDDFCC;
               border-radius: 9px; background: #FFFFFF; font-family: inherit; font-size: 13px;
               font-weight: 600; color: #5E4E3F; cursor: pointer; }
    /* accounts: /me/ — three sections over your own rows (saved, rated,
       written). Rows are links, not editors: the film page owns editing, so
       there is one edit surface per thing rather than two. */
    .fa-me-sec { display: flex; flex-direction: column; gap: 14px; margin-top: 30px; }
    .fa-me-sec:first-child { margin-top: 6px; }
    .fa-me-hd { display: flex; align-items: baseline; gap: 12px;
                border-bottom: 1px solid #EDE0CE; padding-bottom: 8px; }
    .fa-me-count { font-size: 12.5px; color: #9A8877; }
    .fa-me-empty { font-size: 14px; color: #7A6A5A; line-height: 1.5; max-width: 620px; }
    .fa-me-list { display: flex; flex-direction: column; gap: 10px; }
    .fa-me-thumb { aspect-ratio: 2/3; object-fit: cover; border-radius: 8px; background: #F3E9DA;
                   display: block; flex-shrink: 0; }
    .fa-me-noposter { display: block; height: 60px; border: 1px dashed #E3D5C2; }
    .fa-merow, .fa-mecard { display: flex; gap: 14px; padding: 12px 16px; border: 1px solid #EDDFCC;
                            border-radius: 12px; background: #FFFFFF; text-decoration: none;
                            color: inherit; transition: border-color 0.12s, box-shadow 0.12s; }
    .fa-merow:hover, .fa-mecard:hover { border-color: #F5C79B; box-shadow: 0 4px 14px rgba(80,50,20,0.06); }
    .fa-merow { align-items: center; }
    .fa-me-t { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex-grow: 1; }
    .fa-merow .fa-me-t { gap: 2px; }
    .fa-me-title { font-weight: 700; font-size: 15px; line-height: 1.25; }
    .fa-me-meta { font-size: 12.5px; color: #7A6A5A; }
    .fa-me-nums { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex-shrink: 0; }
    .fa-me-nums b { font-family: "Bricolage Grotesque", sans-serif; font-size: 24px; line-height: 1; }
    .fa-me-vs { font-size: 11.5px; color: #9A8877; white-space: nowrap; }
    .fa-me-verdict { font-family: "Bricolage Grotesque", sans-serif; font-size: 17px; font-weight: 700;
                     line-height: 1.1; }
    .fa-me-draft { align-self: flex-start; font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em;
                   text-transform: uppercase; color: #8A5A1E; background: #FFF1DC;
                   padding: 2px 7px; border-radius: 5px; }
    /* the review body is user-authored: escaped in JS, clamped here rather than
       truncated in code, so nothing is cut mid-entity */
    .fa-me-body { font-size: 14px; line-height: 1.55; color: #3E332A; white-space: pre-wrap;
                  overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3;
                  -webkit-box-orient: vertical; overflow: hidden; }
    .fa-mecard .fa-chip { cursor: inherit; pointer-events: none; }
    .fa-me-edit { font-size: 12.5px; font-weight: 600; color: #B85A0A; }
    /* ---- member surface v2 (SPEC §12a, Sep 6) ---------------------------------
       The action dock: exactly two pills, top-right of the hero. Save is the
       heart with a word; Review opens the modal. Same pill for both so they
       read as one control. */
    .fa-dock { display: flex; gap: 10px; flex-shrink: 0; margin-top: 6px; }
    .fa-pill { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 16px;
               border: 1.5px solid #FBE3C4; border-radius: 999px; background: #FFFFFF; color: #1E1915;
               font-family: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; white-space: nowrap;
               transition: border-color 0.12s, background 0.12s, color 0.12s; }
    .fa-pill:hover { border-color: #E8C9A0; }
    /* the heart keeps its class (account.js binds .fa-heart) but drops its
       44px square: as a pill it is the Save control, filled when saved */
    .fa-heart.fa-pill { width: auto; height: 38px; border-radius: 999px; color: #1E1915; }
    .fa-heart.fa-pill:hover { color: #1E1915; border-color: #E8C9A0; }
    .fa-heart.fa-pill.on { background: #FFF6E8; border-color: #E8C9A0; color: #1E1915; }
    .fa-heart.fa-pill svg { color: #B0A090; }
    .fa-heart.fa-pill:hover svg, .fa-heart.fa-pill.on svg { color: #D64545; }
    .fa-pill-review { background: #1E1915; color: #FFF6E8; border-color: #1E1915; }
    .fa-pill-review:hover { background: #2E2620; border-color: #2E2620; }
    .fa-pill-review.has { background: #FFFFFF; color: #1E1915; border-color: #FBE3C4; }
    .fa-dock .fa-pop { top: 46px; }
    /* the review modal (reference frame 2) */
    .fa-modal { position: fixed; inset: 0; z-index: 60; display: flex; align-items: flex-start; justify-content: center;
                padding: 6vh 16px; box-sizing: border-box; overflow-y: auto; }
    .fa-modal[hidden] { display: none; }
    .fa-modal-bg { position: fixed; inset: 0; background: rgba(58,47,36,0.72); }
    .fa-modal-box { position: relative; width: 100%; max-width: 560px; padding: 22px 26px 24px; border-radius: 18px;
                    background: #FFFFFF; box-shadow: 0 24px 60px rgba(30,20,10,0.4); display: flex; flex-direction: column; gap: 12px; }
    .fa-modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
    .fa-modal-title { margin: 0; font-family: "Bricolage Grotesque", sans-serif; font-size: 19px; font-weight: 700; line-height: 1.25; }
    .fa-modal-x { border: 0; background: transparent; font-size: 24px; line-height: 1; color: #9A8877; cursor: pointer; padding: 0 2px; }
    .fa-modal-x:hover { color: #1E1915; }
    .fa-posting-as { font-size: 12.5px; color: #9A8877; margin-top: -8px; }
    .fa-posting-as b { color: #1E1915; }
    .fa-posting-as a { color: #B85A0A; font-weight: 600; }
    .fa-modal .fa-rv-form { gap: 12px; }
    .fa-modal .fa-vd-slider { height: 12px; border-radius: 6px; margin: 6px 0 0; }
    .fa-vd-readout-m { margin: 4px 0 0; align-items: baseline; gap: 8px; }
    .fa-vd-readout-m .fa-vd-num { font-size: 18px; }
    .fa-vd-readout-m .fa-vd-band { font-size: 13.5px; }
    .fa-vd-note { font-size: 13px; color: #9A8877; }
    .fa-modal .fa-body { min-height: 88px; }
    .fa-modal .fa-name-row { margin-top: 2px; }
    .fa-modal-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
    .fa-modal-foot .fa-rv-msg { flex: 1; }
    .fa-modal-foot .fa-post { border-radius: 999px; padding: 0 22px; }
    .fa-cancel { border: 0; background: transparent; padding: 0; font-family: inherit; font-size: 13.5px; color: #9A8877; cursor: pointer; }
    .fa-cancel:hover { color: #1E1915; }
    .fa-modal .fa-rv-done { padding-top: 4px; }
    .fa-modal .fa-pop { position: static; width: auto; max-width: none; box-shadow: none; }
    body.fa-modal-open { overflow: hidden; }
    /* "Add more details" — the one expander, used by the modal (aspects) and
       the Family Room vote card (levels). Closed by default, always. */
    .fa-more { align-self: flex-start; border: 0; background: transparent; padding: 0; font-family: inherit;
               font-size: 13px; font-weight: 600; color: #B3441E; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; }
    .fa-more-arrow { font-size: 11px; transition: transform 0.15s; }
    .fa-more[aria-expanded="true"] .fa-more-arrow { transform: rotate(180deg); }
    .fa-aspects { border: 1.5px solid #F0E4D2; border-radius: 12px; padding: 12px 16px 6px; display: flex; flex-direction: column; gap: 8px; }
    .fa-aspects[hidden], .fa-pf-levels[hidden] { display: none; }
    .fa-asp-hint { font-size: 11.5px; color: #9A8877; line-height: 1.45; }
    .fa-asp { display: grid; grid-template-columns: 96px minmax(0, 1fr) 30px 18px; align-items: center; gap: 10px; }
    .fa-asp-n { font-size: 12.5px; color: #6E6152; }
    /* a thin house slider whose thumb only appears once the row is touched —
       an untouched row is not counted, and should not look like a 50 */
    .fa-asp-slider { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 3px; outline: none; margin: 0; }
    .fa-asp-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 15px; height: 15px; border-radius: 50%;
                 background: #FFFFFF; border: 2.5px solid #1E1915; cursor: pointer; opacity: 0; transition: opacity 0.12s; }
    .fa-asp-slider::-moz-range-thumb { width: 15px; height: 15px; border-radius: 50%; background: #FFFFFF; border: 2.5px solid #1E1915; cursor: pointer; opacity: 0; }
    .fa-asp.set .fa-asp-slider::-webkit-slider-thumb, .fa-asp-slider:hover::-webkit-slider-thumb, .fa-asp-slider:focus-visible::-webkit-slider-thumb { opacity: 1; }
    .fa-asp.set .fa-asp-slider::-moz-range-thumb, .fa-asp-slider:hover::-moz-range-thumb { opacity: 1; }
    .fa-asp-slider:focus-visible { outline: 2px solid #F2711C; outline-offset: 4px; }
    .fa-asp-v { font-size: 12px; font-weight: 700; text-align: right; color: #9A8A72; font-family: "Bricolage Grotesque", sans-serif; }
    .fa-asp.set .fa-asp-v { color: #1E1915; font-size: 13px; }
    .fa-asp-x { border: 0; background: transparent; padding: 0; font-size: 15px; line-height: 1; color: #B0A090; cursor: pointer; }
    .fa-asp-x:hover { color: #C0301F; }
    .fa-asp-x[hidden] { visibility: hidden; display: inline; }
    /* stated aspect numbers beside a posted review — the same "word · number"
       treatment wherever a review is shown (done card, readers' list, /me/) */
    .fa-asp-line { display: flex; gap: 6px 14px; flex-wrap: wrap; font-size: 12.5px; color: #7A6A5A; }
    .fa-asp-line b { color: #1E1915; font-family: "Bricolage Grotesque", sans-serif; font-size: 13.5px; }
    /* the Family Room vote card (reference frame 3), inline under the tabs */
    /* Design batch 3 item C14: the vote is no longer a band across the top —
       it is the first card in the right column, after the record. Larger and
       warmer than its neighbours so it still reads as the page's one ask. */
    .fa-frvote { padding: 22px 24px 24px; background: linear-gradient(180deg, #FFF7EA, #FFFFFF);
                 border-color: #F0DDC2; }
    .fa-ask-eye { color: #8A5A1E; }
    .fa-ask-h { font-size: 22px; letter-spacing: -0.015em; line-height: 1.15; margin-top: 6px; }
    .fa-frvote-head { margin-bottom: 14px; }
    .fa-frvote-hint { font-size: 13px; color: #7A6A5A; line-height: 1.5; margin-top: 4px; }
    .fa-frvote .fa-pf-age { height: 10px; border-radius: 5px; margin: 4px 0 0;
                            background: linear-gradient(90deg, #85C82F, #F6D732 45%, #F59300 70%, #DF500C); }
    .fa-frvote-readout { margin: 8px 0 0; gap: 6px; }
    .fa-frvote .fa-pf-age-big { font-size: 22px; }
    .fa-pf-and { font-size: 14px; color: #1E1915; }
    .fa-frvote .fa-pf-delta { margin-left: 6px; }
    .fa-frvote .fa-pf-note { background: #FFFFFF; }
    .fa-frvote .fa-pf-form { gap: 14px; }
    .fa-pf-levels { display: flex; flex-direction: column; gap: 12px; padding: 12px 14px; border: 1.5px solid #F0E4D2; border-radius: 12px; background: #FFFFFF; }
    .fa-frvote .fa-pf-post { border-radius: 999px; height: 36px; font-size: 13px; }
    /* /me/ as one tabbed page (reference frames 4–6) */
    .fa-metabs { display: flex; gap: 2px; border-bottom: 1.5px solid #F0E4D2; margin: 0 0 6px; font-size: 14px; overflow-x: auto; scrollbar-width: none; }
    .fa-metabs::-webkit-scrollbar { display: none; }
    .fa-metabs[hidden] { display: none; }
    .fa-metab { padding: 9px 14px; color: #6E6152; text-decoration: none; white-space: nowrap; border-bottom: 2.5px solid transparent; margin-bottom: -1.5px; }
    .fa-metab:hover { color: #1E1915; }
    .fa-metab[aria-selected="true"] { color: #1E1915; font-weight: 600; border-bottom-color: #B3441E; }
    .fa-metab[hidden] { display: none; }
    .fa-mepanel { display: flex; flex-direction: column; }
    .fa-mepanel[hidden] { display: none; }
    .fa-me-loading[hidden] { display: none; }
    .fa-lrow { display: flex; gap: 14px; border-top: 1px solid #F0E4D2; padding: 13px 0; align-items: flex-start; }
    .fa-lrow:first-child { border-top: none; }
    .fa-lrow > img, .fa-lrow > .fa-lthumb { width: 44px; height: 66px; object-fit: cover; border-radius: 7px; background: #EADFCB; flex-shrink: 0; display: block; }
    .fa-lmain { flex: 1; min-width: 0; }
    .fa-lt { font-weight: 600; font-size: 14.5px; line-height: 1.3; }
    .fa-lt a { color: inherit; text-decoration: none; }
    .fa-lt a:hover { color: #B85A0A; }
    .fa-lt span { color: #9A8A72; font-weight: 400; }
    .fa-lsub { color: #9A8A72; font-size: 12.5px; margin-top: 2px; display: flex; flex-wrap: wrap; gap: 0 4px; align-items: baseline; }
    .fa-lsub button, .fa-lsub a { border: 0; background: transparent; padding: 0; font-family: inherit; font-size: 12.5px; color: #9A8A72;
                                  cursor: pointer; text-decoration: none; }
    .fa-lsub button:hover, .fa-lsub a:hover { color: #B85A0A; }
    .fa-lsub .on { color: #B3441E; font-weight: 600; }
    .fa-lq { color: #6E6152; font-size: 13px; margin: 4px 0 2px; overflow-wrap: anywhere; }
    .fa-lnum { font-size: 12px; color: #9A8A72; margin-top: 3px; }
    .fa-lnum b { font-size: 13px; color: #1E1915; }
    .fa-lnum a { color: #9A8A72; text-decoration: none; }
    .fa-lnum a:hover { color: #B85A0A; }
    .fa-msc { min-width: 28px; height: 28px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center;
              font-weight: 700; font-size: 12.5px; padding: 0 5px; margin-top: 1px; flex-shrink: 0; font-family: "Bricolage Grotesque", sans-serif; }
    .fa-msc.none { background: #F3EEE6; color: #9A8A72; font-weight: 500; font-size: 11px; }
    .fa-msc.prov { outline: 1.5px dashed rgba(30,25,21,0.45); outline-offset: -1.5px; }
    .fa-me-sechd { font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; color: #9A8A72; margin: 22px 0 6px; font-weight: 600; }
    .fa-me-sechd:first-child { margin-top: 10px; }
    .fa-me-note { font-size: 13px; color: #9A8A72; line-height: 1.5; padding: 12px 0; }
    .fa-v2slot { margin-top: 16px; background: #FFF6E8; border: 1.5px dashed #FBE3C4; border-radius: 12px; padding: 12px 16px; font-size: 13px; color: #9A8A72; }
    .fa-setrow { display: flex; justify-content: space-between; align-items: center; gap: 16px; border-top: 1px solid #F0E4D2; padding: 14px 2px; font-size: 14px; max-width: 560px; }
    .fa-setrow:first-child { border-top: none; }
    .fa-setrow small { display: block; color: #9A8A72; font-size: 12px; margin-top: 2px; overflow-wrap: anywhere; }
    .fa-setact { border: 0; background: transparent; padding: 0; font-family: inherit; color: #B3441E; font-weight: 600; font-size: 13px; cursor: pointer; white-space: nowrap; text-decoration: none; }
    .fa-setact:hover { text-decoration: underline; }
    .fa-setedit { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
    .fa-setedit .fa-name { width: 220px; }
    .fa-setedit select { height: 36px; padding: 0 10px; border: 1px solid #E3D5C2; border-radius: 8px; background: #FFFFFF; font-family: inherit; font-size: 13.5px; color: #1E1915; }
    .fa-setedit .fa-post { height: 36px; }
    .fa-ov-stats { display: flex; gap: 22px; flex-wrap: wrap; padding: 10px 0 4px; }
    .fa-ov-stat { display: flex; flex-direction: column; gap: 2px; text-decoration: none; color: inherit; }
    .fa-ov-stat b { font-family: "Bricolage Grotesque", sans-serif; font-size: 24px; line-height: 1; }
    .fa-ov-stat span { font-size: 12px; color: #9A8A72; }
    .fa-ov-stat:hover span { color: #B85A0A; }
    /* Family Room "Parents ask" — the questions a parent types, answered from
       the record on the same page. Open by default on the first two so the
       answer is visible without a tap (and so the FAQPage markup describes
       something a reader can actually see). */
    .faq { display: flex; flex-direction: column; }
    .faq-q { border-bottom: 1px solid #F3E9DA; padding: 10px 0; }
    .faq-q:last-child { border-bottom: 0; }
    .faq-q summary { font-family: "Bricolage Grotesque", sans-serif; font-size: 16px; font-weight: 600;
                     color: #1E1915; cursor: pointer; list-style: none; display: flex;
                     align-items: baseline; gap: 8px; }
    .faq-q summary::-webkit-details-marker { display: none; }
    .faq-q summary::before { content: "+"; color: #B85A0A; font-size: 18px; line-height: 1; flex-shrink: 0; }
    .faq-q[open] summary::before { content: "\2212"; }
    .faq-q p { margin: 8px 0 2px 18px; font-size: 14.5px; line-height: 1.6; color: #5E4E3F;
               max-width: 620px; text-wrap: pretty; }
    /* editorial: one written piece with a figure. A reading measure — the body
       is capped at 680px whatever the window does — and a figure that is allowed
       to be wider than the prose, because a chart needs the room a sentence
       does not. */
    /* the article is a flex ITEM of the page wrapper, so it needs width:100% to
       fill it and min-width:0 to be allowed to shrink — without the second one
       the figure's min-width pushes the whole column past a phone's viewport */
    .ed { width: 100%; min-width: 0; max-width: 760px; margin: 0 auto;
          padding: 40px var(--gut) 56px; box-sizing: border-box;
          position: relative; display: flex; flex-direction: column; gap: 14px; }
    .ed h1 { font-size: 46px; font-weight: 700; line-height: 1.03; letter-spacing: -0.025em;
             text-wrap: pretty; }
    .ed-stand { font-size: 19px; line-height: 1.5; color: #5E4E3F; text-wrap: pretty; max-width: 680px; }
    .ed-meta { font-size: 12.5px; color: #9A8877; padding-bottom: 14px; border-bottom: 1px solid #EDE0CE; }
    .ed-body { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
    .ed-body p { font-size: 17px; line-height: 1.62; color: #2B231C; max-width: 680px; text-wrap: pretty; }
    .ed-body b { font-weight: 700; }
    .ed-foot { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 22px; padding-top: 18px;
               border-top: 1px solid #EDE0CE; font-size: 14px; font-weight: 600; }
    .ed-body a { font-weight: 600; }
    /* cover image above the title (the Ramayana piece) */
    .ed-hero { margin: 0 0 10px; display: flex; flex-direction: column; gap: 6px; }
    .ed-hero img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; display: block; border-radius: 16px;
                   background: #F3E9DA; box-shadow: 0 8px 24px rgba(80,50,20,0.16); }
    .ed-hero figcaption { font-size: 11.5px; color: #9A8877; }
    /* the Start-here packs: one card per film, the country switch above the list */
    .pk-cc { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 6px; }
    .pk-list { display: flex; flex-direction: column; background: #FFFFFF; border: 1px solid #F3E7D6; border-radius: 16px;
               box-shadow: 0 2px 6px rgba(120,70,20,0.05); padding: 4px 22px; }
    .pk-card { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 18px; align-items: start; padding: 18px 0;
               border-bottom: 1px solid #F8F0E5; }
    .pk-card:last-child { border-bottom: 0; }
    .pk-poster { width: 64px; height: 96px; border-radius: 8px; object-fit: cover; display: block; flex-shrink: 0;
                 background: #F3E9DA; box-shadow: 0 4px 12px rgba(80,50,20,0.14); }
    .pk-main { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
    .pk-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
    .pk-head .blk { display: inline; }
    .pk-title { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 600; font-size: 19px; line-height: 1.2; }
    .pk-year { font-family: 'Bricolage Grotesque', sans-serif; font-size: 15px; color: #9A8877; }
    .ed-body .pk-copy { margin: 0; font-size: 15.5px; line-height: 1.55; }
    .ed-body .pk-kids { margin: 0; font-size: 13px; line-height: 1.5; color: #7A6A5A; font-style: italic; }
    .pk-wrow { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
    .pk-w { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 7px; border: 1px solid #E3D5C2;
            background: #FFFFFF; color: #1E1915; font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: 12px; }
    .pk-ws { background: #1E1915; color: #FFFFFF; border-color: #1E1915; }
    .pk-wt { font-family: Figtree, sans-serif; font-size: 9.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; opacity: 0.7; }
    .pk-wsrc, .pk-wnone { font-size: 11.5px; color: #9A8877; }
    .pk-wsrc { margin-left: auto; }
    .pk-score { display: flex; justify-content: flex-end; min-width: 40px; }
    .pk-noscore { width: 118px; text-align: right; font-size: 12px; line-height: 1.4; color: #9A8877; }
    .ed-body .pk-foot { margin-top: 6px; font-size: 15.5px; color: #5E4E3F; }
    /* the Ramayana piece: poster + key facts, and the face strips */
    .pk-facts { display: flex; gap: 22px; align-items: center; padding: 18px 22px; border-radius: 16px; background: #FFF6E8;
                border: 1.5px solid #FBE3C4; max-width: 680px; box-sizing: border-box; }
    .pk-facts-poster { width: 96px; height: 144px; border-radius: 10px; object-fit: cover; display: block; flex-shrink: 0;
                       box-shadow: 0 6px 16px rgba(80,50,20,0.18); background: #F3E9DA; }
    .pk-facts ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; font-size: 14.5px; line-height: 1.4; }
    .pk-facts li b { font-weight: 700; margin-right: 6px; }
    .pk-faces { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 4px; }
    .pk-face { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; width: 96px; }
    .pk-face-name { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 600; font-size: 13.5px; line-height: 1.2; }
    .pk-face-role { font-size: 11.5px; color: #7A6A5A; }
    /* home: the front-page module (held dark) */
    .pk-mod { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
    .pk-mod-feat, .pk-mod-pack { display: flex; flex-direction: column; border-radius: 16px; overflow: hidden; }
    .pk-mod-feat { background: #FFFFFF; border: 1.5px solid #EDDFCC; }
    .pk-mod-pack { background: #FFF6E8; border: 1.5px solid #FBE3C4; }
    .pk-mod-feat img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; background: #F3E9DA; }
    .pk-mod-pack img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; display: block; background: #F3E9DA; }
    .pk-mod-body { display: flex; flex-direction: column; gap: 7px; padding: 18px 20px; }
    .pk-mod-kind { display: inline-block; align-self: flex-start; height: 18px; padding: 0 7px; border-radius: 4px; color: #FFFFFF;
                   font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; line-height: 18px; }
    .pk-mod-title { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 600; font-size: 19px; line-height: 1.2; text-wrap: pretty; }
    .pk-mod-blurb { font-size: 13.5px; line-height: 1.5; color: #5E4E3F; }
    /* min-width: 0 on both, and it is load-bearing: a flex item defaults to
       min-width:auto, so the SVG's own min-width would propagate up and stretch
       the whole article past the viewport on a phone — the prose runs off-screen
       and overflow-x never engages, because the box never has to shrink. */
    .fig { margin: 10px 0; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
    /* a chart never makes the page scroll sideways: it scrolls inside its own box */
    .fig-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; min-width: 0; }
    .fig svg { display: block; width: 100%; min-width: 540px; height: auto; }
    .fig figcaption { font-size: 12.5px; line-height: 1.55; color: #7A6A5A; max-width: 680px; }
    .fig-table summary { font-size: 13px; font-weight: 600; color: #5E4E3F; cursor: pointer; }
    .fig-table table { border-collapse: collapse; margin-top: 10px; font-size: 13px;
                       font-variant-numeric: tabular-nums; }
    .fig-table th, .fig-table td { text-align: right; padding: 5px 12px 5px 0; border-bottom: 1px solid #F3E9DA; }
    .fig-table th:first-child, .fig-table td:first-child { text-align: left; }
    .fig-table th { color: #7A6A5A; font-weight: 600; }
    /* v1.8 §J5: the critic portal at /me/critic/. Plain numbers and small
       inline bars — no chart library, and deliberately no ranked anything: a
       bar here is always the critic against their own total or against a panel
       SHARE, never a position among critics. Same card vocabulary as the rest
       of the site so the portal reads as part of it, not a separate product. */
    .fa-cp-card { padding: 22px 24px; display: flex; flex-direction: column; gap: 12px; margin-bottom: 18px; }
    .fa-cp-sub, .fa-cp-note { font-size: 13px; line-height: 1.55; color: #5E4E3F; max-width: 720px; }
    .fa-cp-fine { font-size: 12px; line-height: 1.5; color: #9A8877; }
    .fa-cp-claiming { font-size: 15px; line-height: 1.5; color: #1E1915; }
    .fa-cp-rejected { padding: 12px 14px; border-radius: 10px; background: #FFF1EE; border: 1px solid #F6CFC7;
                      font-size: 13px; line-height: 1.55; color: #5E4E3F; }
    .fa-cp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px;
                  margin-top: 4px; }
    .fa-stat { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 10px;
               background: #FDF7EE; border: 1px solid #F2E6D5; }
    .fa-stat span { font-size: 11.5px; color: #7A6A5A; }
    .fa-stat b { font-family: "Bricolage Grotesque", sans-serif; font-size: 20px; line-height: 1.15; }
    .fa-stat em { font-style: normal; font-size: 11px; color: #9A8877; line-height: 1.4; }
    .fa-cp-block { display: flex; flex-direction: column; gap: 8px; padding-top: 16px; margin-top: 4px;
                   border-top: 1px solid #EDE0CE; }
    .fa-cp-block h3 { font-family: "Bricolage Grotesque", sans-serif; font-size: 17px; font-weight: 600; }
    .fa-cp-big { display: flex; align-items: baseline; gap: 12px; }
    .fa-cp-big b { font-family: "Bricolage Grotesque", sans-serif; font-size: 34px; line-height: 1; }
    .fa-cp-big span { font-size: 13px; color: #5E4E3F; }
    .fa-cp-split { display: flex; gap: 16px; font-size: 12.5px; color: #7A6A5A; }
    .fa-bar { display: block; height: 8px; border-radius: 999px; background: #F3E9DA; overflow: hidden; }
    .fa-bar i { display: block; height: 100%; background: #F2711C; border-radius: 999px; }
    .fa-bar.level i { background: #C7B8A6; }
    .fa-hist, .fa-bands, .fa-curve, .fa-apart { display: flex; flex-direction: column; gap: 6px; }
    .fa-hist-row, .fa-band-row { display: grid; grid-template-columns: 150px minmax(0, 1fr) 34px 92px;
                                 gap: 10px; align-items: center; font-size: 12.5px; color: #5E4E3F; }
    .fa-hist-row { grid-template-columns: 150px minmax(0, 1fr) 34px; }
    .fa-hist-row b, .fa-band-row b { font-family: "Bricolage Grotesque", sans-serif; font-size: 14px;
                                     text-align: right; }
    .fa-band-row em { font-style: normal; font-size: 11.5px; color: #9A8877; text-align: right; }
    .fa-curve-row { display: grid; grid-template-columns: 120px 140px minmax(0, 1fr); gap: 10px;
                    font-size: 12.5px; color: #5E4E3F; padding: 5px 0; border-bottom: 1px solid #F8F0E5; }
    .fa-curve-row b { font-family: "Bricolage Grotesque", sans-serif; font-size: 14px; }
    .fa-curve-row em { font-style: normal; color: #9A8877; }
    .fa-apart-row { display: grid; grid-template-columns: minmax(0, 1fr) 56px 150px; gap: 10px;
                    align-items: center; padding: 8px 10px; border-radius: 9px; text-decoration: none;
                    color: inherit; font-size: 13px; transition: background 0.12s; }
    .fa-apart-row:hover { background: #FFF6E8; }
    .fa-apart-row b { font-family: "Bricolage Grotesque", sans-serif; font-size: 16px; text-align: right; }
    .fa-apart-row b.up { color: #1E7A34; }
    .fa-apart-row b.down { color: #C0301F; }
    .fa-apart-row em { font-style: normal; font-size: 11.5px; color: #9A8877; text-align: right; }
    /* the claim form */
    .fa-cp-form { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; }
    .fa-cp-form label { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px;
                        font-weight: 600; color: #5E4E3F; position: relative; }
    .fa-cp-form textarea, .fa-cp-form input, .fa-cp-find input, .fa-dis-form textarea, .fa-dis-form select {
      padding: 9px 12px; border: 1px solid #E3D5C2; border-radius: 9px; background: #FFFFFF;
      color: #1E1915; font-size: 14px; font-family: inherit; font-weight: 400; box-sizing: border-box;
      width: 100%; resize: vertical; }
    .fa-cp-count { position: absolute; right: 2px; top: 0; font-size: 11px; color: #9A8877; font-weight: 400; }
    .fa-cp-actions, .fa-dis-act { display: flex; align-items: center; gap: 12px; }
    .fa-cp-form button, .fa-dis-act button { padding: 0 16px; height: 38px; border: 0; border-radius: 9px;
                                             background: #1E1915; color: #FFFFFF; font-size: 13.5px;
                                             font-weight: 600; font-family: inherit; cursor: pointer; }
    .fa-dis-act .cancel { background: #FFFFFF; color: #5E4E3F; border: 1px solid #E3D5C2; }
    .fa-cp-form button[disabled] { opacity: 0.55; cursor: default; }
    .fa-cp-msg { font-size: 12.5px; color: #7A6A5A; }
    .fa-cp-find { display: flex; flex-direction: column; gap: 8px; }
    .fa-cp-results { display: flex; flex-direction: column; gap: 4px; }
    .fa-cp-results button { display: flex; align-items: baseline; gap: 10px; padding: 9px 12px;
                            border: 1px solid #EDDFCC; border-radius: 9px; background: #FFFFFF;
                            font-family: inherit; font-size: 14px; font-weight: 600; color: #1E1915;
                            cursor: pointer; text-align: left; }
    .fa-cp-results button:hover { background: #FFF6E8; border-color: #F5C79B; }
    .fa-cp-results em { font-style: normal; font-size: 12px; font-weight: 400; color: #7A6A5A; }
    /* the review list and its dispute affordance */
    .fa-clist { display: flex; flex-direction: column; }
    .fa-crow { display: grid; grid-template-columns: minmax(0, 1fr) 110px 150px 190px; gap: 12px;
               align-items: center; padding: 10px 0; border-bottom: 1px solid #F8F0E5; font-size: 13px; }
    .fa-crow-film { font-family: "Bricolage Grotesque", sans-serif; font-weight: 600; font-size: 15px;
                    color: #1E1915; text-decoration: none; overflow: hidden; text-overflow: ellipsis;
                    white-space: nowrap; }
    .fa-crow-film:hover { color: #B85A0A; }
    .fa-crow-date, .fa-crow-none { font-size: 12px; color: #9A8877; }
    .fa-crow-act { display: flex; justify-content: flex-end; }
    .fa-dispute { padding: 6px 11px; border: 1px solid #E3D5C2; border-radius: 8px; background: #FFFFFF;
                  font-family: inherit; font-size: 12px; font-weight: 600; color: #5E4E3F; cursor: pointer;
                  white-space: nowrap; }
    .fa-dispute:hover { border-color: #E0A82E; color: #8A6D1F; }
    .fa-dis-form { display: flex; flex-direction: column; gap: 8px; width: 100%; padding: 10px 0; }
    .fa-dis-list { display: flex; flex-direction: column; gap: 10px; }
    .fa-dis { padding: 12px 14px; border: 1px solid #EDDFCC; border-radius: 11px; background: #FFFFFF;
              display: flex; flex-direction: column; gap: 6px; }
    .fa-dis-head { display: flex; align-items: center; gap: 10px; font-size: 13px; }
    .fa-dis-head em { font-style: normal; font-size: 11.5px; color: #9A8877; margin-left: auto; }
    .fa-dis-body { font-size: 13px; line-height: 1.5; color: #5E4E3F; overflow-wrap: anywhere; }
    .fa-dis-res { font-size: 13px; line-height: 1.55; color: #1E1915; padding: 9px 12px;
                  border-radius: 9px; background: #FDF7EE; border: 1px solid #F2E6D5; overflow-wrap: anywhere; }
    .fa-dis-open, .fa-dis-upheld, .fa-dis-rejected { font-size: 10.5px; font-weight: 700; letter-spacing: 0.05em;
                                                     text-transform: uppercase; padding: 2px 7px; border-radius: 5px; }
    .fa-dis-open { color: #8A6D1F; background: #FFF4DC; }
    .fa-dis-upheld { color: #1E7A34; background: #E9F7EC; }
    .fa-dis-rejected { color: #7A6A5A; background: #F3EEE6; }
    .fa-dis-tag { white-space: nowrap; }
    /* accounts: own rating — a read-only tile now (design batch 1); the one
       interactive slider lives in the composer, .fa-vd above. */
    .fa-rate { position: relative; }
    /* hang the sign-in card below the tile — the default .fa-pop offset is
       measured from the heart button and would cover the rating just set */
    .fa-rate .fa-pop { top: calc(100% + 8px); }
    /* nav search — desktop: a dropdown anchored below the 300px input box.
       Rows share .fa-sr-row with the /me/ rows' hover treatment on purpose,
       so the whole site has one "clickable card" language. */
    .fa-search-input::placeholder { color: #9A8B7B; }
    .fa-search-panel { position: absolute; top: calc(100% + 8px); left: 0; width: 380px; max-width: calc(100vw - 2 * var(--gut));
                       max-height: 70vh; overflow-y: auto; background: #FFFFFF; border: 1px solid #EDDFCC; border-radius: 14px;
                       box-shadow: 0 12px 32px rgba(80,50,20,0.16); padding: 6px; z-index: 40; }
    .fa-search-panel[hidden] { display: none; }
    .fa-sr-row { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 9px; text-decoration: none;
                 color: inherit; cursor: pointer; }
    .fa-sr-row.on, .fa-sr-row:hover { background: #FFF6E8; }
    .fa-sr-t { min-width: 0; flex-grow: 1; }
    .fa-sr-title { font-weight: 600; font-size: 14px; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .fa-sr-meta { font-size: 11.5px; color: #9A8877; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .fa-sr-kind { flex-shrink: 0; font-size: 9.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
                  color: #B0A090; }
    .fa-sr-empty, .fa-sr-loading { padding: 16px 12px; font-size: 13px; color: #9A8877; text-align: center; }
    /* mobile trigger — hidden on desktop; nav() also emits a full-panel overlay
       for phones, since there is no room in the nav for a 300px input */
    .fa-search-btn { display: none; width: 36px; height: 36px; border-radius: 50%; border: 1px solid #EDDFCC;
                     background: #FFFFFF; color: #8A7A6A; align-items: center; justify-content: center; cursor: pointer;
                     flex-shrink: 0; padding: 0; }
    .fa-search-m { display: none; }
    /* accounts session 3: the display-name row shared by the composer and the
       parent form. The DB refuses public text without a name (migration 0004);
       this is where it gets set, prefilled from the profile when signed in. */
    .fa-name-row { display: flex; flex-direction: column; }
    .fa-name-row[hidden] { display: none; }
    .fa-name { width: 240px; max-width: 100%; box-sizing: border-box; padding: 0 12px; height: 36px;
               border: 1px solid #E3D5C2; border-radius: 8px; background: #FFFFFF; color: #1E1915;
               font-family: inherit; font-size: 13.5px; }
    .fa-name:focus { outline: 2px solid #F2711C; outline-offset: 1px; border-color: #F2711C; }
    .fa-name.need { border-color: #E8442F; box-shadow: 0 0 0 3px #FFF3F0; }
    .fa-name-hint { font-size: 12px; color: #9A8877; line-height: 1.4; max-width: 420px; }
    /* readers' reviews — live from the public view, rendered by account.js.
       Every string a person typed (name, body) goes through esc(); the reading
       badge reuses .reading from the critic rows so the two lists rhyme. */
    .fa-ur-list { display: flex; flex-direction: column; }
    .fa-ur { display: flex; flex-direction: column; gap: 8px; padding: 14px 0; border-bottom: 1px solid #F8F0E5; }
    .fa-ur:last-child { border-bottom: 0; }
    .fa-ur-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: 13px; color: #7A6A5A; }
    .fa-ur-head b { color: #1E1915; font-size: 14px; overflow-wrap: anywhere; }
    .fa-ur-handle { color: #B0A090; }
    .fa-ur-you { font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
                 color: #8A5A1E; background: #FFF1DC; padding: 2px 7px; border-radius: 5px; }
    .fa-ur-mid { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
    .fa-ur-verdict { font-family: "Bricolage Grotesque", sans-serif; font-size: 17px; font-weight: 700; line-height: 1.1; }
    .fa-ur-rating { font-size: 12.5px; color: #7A6A5A; }
    .fa-ur-rating b { font-family: "Bricolage Grotesque", sans-serif; font-size: 15px; }
    .fa-ur-unread { display: inline-flex; align-items: center; padding: 3px 8px; border-radius: 8px;
                    border: 1.5px dashed #C7B8A6; color: #8A7A6A; background: #FFFFFF; font-size: 11.5px; white-space: nowrap; }
    .fa-ur-body { font-size: 14.5px; line-height: 1.6; color: #1E1915; white-space: pre-wrap; overflow-wrap: anywhere; }
    .fa-ur-body.clamp { display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
    .fa-ur-more { align-self: flex-start; border: 0; background: transparent; padding: 0; font-family: inherit;
                  font-size: 12.5px; font-weight: 600; color: #B85A0A; cursor: pointer; }
    .fa-ur .fa-chip { cursor: default; pointer-events: none; }
    .fa-ur-foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 12px; color: #9A8877; }
    .fa-ur-empty { padding: 10px 0; font-size: 13.5px; color: #7A6A5A; line-height: 1.5; }
    /* the report affordance: a quiet link that turns into a one-line reason picker */
    .fa-report { border: 0; background: transparent; padding: 0; font-family: inherit; font-size: 12px;
                 color: #9A8877; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
    .fa-report:hover { color: #C0301F; }
    .fa-report-box { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12px; color: #7A6A5A; }
    .fa-report-box button { padding: 4px 10px; border: 1px solid #EDDFCC; border-radius: 999px; background: #FFFFFF;
                            font-family: inherit; font-size: 12px; color: #5E4E3F; cursor: pointer; }
    .fa-report-box button:hover { border-color: #E8442F; color: #A8331F; }
    .fa-report-box .fa-pop { position: static; width: auto; max-width: 420px; box-shadow: none; flex-basis: 100%; }
    /* parent form (Family Room): the anchored age slider, seven level pickers,
       the note, the ages prompt that follows the first vote */
    .fa-pf-form, .fa-pf-done, .fa-pf-ages { display: flex; flex-direction: column; gap: 16px; }
    .fa-pf-form[hidden], .fa-pf-done[hidden], .fa-pf-ages[hidden] { display: none; }
    .fa-pf-ages { margin-top: 16px; padding: 16px 18px; border-radius: 12px; background: #FFF6E8; border: 1px solid #FBE3C4; gap: 10px; }
    .fa-pf-readout { display: flex; align-items: baseline; gap: 12px; margin-bottom: 6px; }
    .fa-pf-age-big { font-family: "Bricolage Grotesque", sans-serif; font-size: 34px; font-weight: 700; line-height: 1; color: #1E1915; }
    .fa-pf-delta { font-size: 13px; color: #7A6A5A; }
    .fa-pf-delta.strict { color: #A8331F; } .fa-pf-delta.lenient { color: #3B6B24; }
    .fa-pf-age { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 999px;
                 background: linear-gradient(90deg, #C9E8B8, #F7C21A 45%, #E8442F); outline: none; margin: 8px 0 0; }
    .fa-pf-age::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 24px; height: 24px; border-radius: 50%;
                 background: #FFFFFF; border: 2px solid #F2711C; cursor: pointer; box-shadow: 0 1px 4px rgba(80,50,20,0.25); }
    .fa-pf-age::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%; background: #FFFFFF; border: 2px solid #F2711C; cursor: pointer; }
    .fa-pf-age:focus-visible { outline: 2px solid #F2711C; outline-offset: 4px; }
    .fa-pf-ends { display: flex; justify-content: space-between; font-size: 11.5px; color: #9A8877; margin-top: 6px; }
    .fa-lvs { display: flex; flex-direction: column; gap: 10px; }
    .fa-lv { display: grid; grid-template-columns: 170px minmax(0, 1fr); align-items: center; gap: 12px; }
    /* the gap ahead of the two positive categories (design batch 1) — they read
       as a distinct, separated pair under the five content-concern rows */
    .fa-lv-gap { margin-top: 8px; padding-top: 14px; border-top: 1px solid #F3E7D6; }
    .fa-lv-label { font-size: 13.5px; font-weight: 500; }
    /* four separate pills, not a joined segmented bar (design batch 1) */
    .fa-lv-segs { display: flex; gap: 6px; flex-wrap: wrap; max-width: 380px; }
    .fa-lv-b { padding: 7px 12px; border: 1px solid #EDDFCC; border-radius: 999px; background: #FFFFFF; font-family: inherit;
               font-size: 12px; color: #7A6A5A; cursor: pointer; transition: background 0.12s, color 0.12s, border-color 0.12s; }
    .fa-lv-b:hover { background: #FFF6E8; }
    .fa-lv-b.on { border-color: transparent; font-weight: 600; }
    /* content-concern ramp: None is the good end (green), Strong the worst (red) —
       palette B (Sep 6), drawn from four of the six score-band hexes */
    .fa-lv-b[data-l="0"].on { background: #85C82F; color: #1A2A10; }
    .fa-lv-b[data-l="1"].on { background: #F6D732; color: #2B1F0E; }
    .fa-lv-b[data-l="2"].on { background: #F59300; color: #2B1F0E; }
    .fa-lv-b[data-l="3"].on { background: #DF500C; color: #FFFFFF; }
    /* positive pair: inverted — None is the worst end (red), Strong the best (green) */
    .fa-lv[data-pos] .fa-lv-b[data-l="0"].on { background: #DF500C; color: #FFFFFF; }
    .fa-lv[data-pos] .fa-lv-b[data-l="1"].on { background: #F6D732; color: #2B1F0E; }
    .fa-lv[data-pos] .fa-lv-b[data-l="2"].on { background: #F59300; color: #2B1F0E; }
    .fa-lv[data-pos] .fa-lv-b[data-l="3"].on { background: #85C82F; color: #1A2A10; }
    .fa-pf-note { width: 100%; box-sizing: border-box; padding: 12px 14px; border: 1px solid #E3D5C2; border-radius: 10px;
                  background: #FFFFFF; color: #1E1915; font-family: inherit; font-size: 14.5px; line-height: 1.6; resize: vertical; }
    .fa-pf-note:focus { outline: 2px solid #F2711C; outline-offset: 1px; border-color: #F2711C; }
    .fa-pf-count { font-size: 11.5px; color: #9A8877; text-align: right; margin-top: 4px; }
    .fa-pf-done-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
    .fa-pf-done-head b { font-family: "Bricolage Grotesque", sans-serif; font-size: 30px; line-height: 1; }
    .fa-pf-done-note { font-size: 14.5px; line-height: 1.6; color: #1E1915; white-space: pre-wrap; overflow-wrap: anywhere; }
    .fa-pf-done-lv { display: flex; gap: 6px; flex-wrap: wrap; }
    .fa-pf-done-lv span { padding: 4px 10px; border-radius: 999px; border: 1px solid #EDDFCC; background: #FFFFFF; font-size: 12px; color: #5E4E3F; }
    /* "Parents say" — the live parent layer in the Family Room's right rail */
    .fa-ps-big { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
    .fa-ps-big b { font-family: "Bricolage Grotesque", sans-serif; font-size: 34px; line-height: 1; }
    .fa-ps-sub { font-size: 12.5px; color: #7A6A5A; line-height: 1.45; }
    .fa-ps-picks { display: flex; gap: 6px; flex-wrap: wrap; }
    .fa-ps-picks span { padding: 3px 9px; border-radius: 999px; background: #FFF6E8; border: 1px solid #FBE3C4; font-size: 12.5px; font-weight: 600; color: #8A5A1E; }
    .fa-ps-levels { display: flex; flex-direction: column; gap: 6px; padding-top: 10px; border-top: 1px solid #F3E7D6; }
    .fa-ps-level { display: flex; align-items: baseline; gap: 8px; font-size: 13px; }
    .fa-ps-level b { color: #1E1915; }
    .fa-ps-n { font-size: 11.5px; color: #9A8877; margin-left: auto; }
    .fa-ps-notes { display: flex; flex-direction: column; border-top: 1px solid #F3E7D6; }
    .fa-ps-note { display: flex; flex-direction: column; gap: 5px; padding: 12px 0; border-bottom: 1px solid #F8F0E5; }
    .fa-ps-note:last-child { border-bottom: 0; }
    .fa-ps-note-head { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; font-size: 12.5px; color: #7A6A5A; }
    .fa-ps-note-head b { color: #1E1915; overflow-wrap: anywhere; }
    .fa-ps-note-text { font-size: 13.5px; line-height: 1.55; color: #3E332A; white-space: pre-wrap; overflow-wrap: anywhere; }
    /* Google sign-in: a redirect-flow button (GoTrue's own /authorize, no
       client id needed) beside the email-link form every fa-pop already has. */
    .fa-google-btn { display: flex; align-items: center; justify-content: center; gap: 10px; height: 36px;
                     border: 1px solid #E3D5C2; border-radius: 8px; background: #FFFFFF; color: #1E1915;
                     font-size: 13px; font-weight: 600; font-family: inherit; text-decoration: none; }
    .fa-google-btn:hover { border-color: #D9C6AE; background: #FFFCF7; }
    .fa-or-div { display: flex; align-items: center; gap: 10px; color: #B0A090; font-size: 11px;
                 text-transform: uppercase; letter-spacing: 0.05em; }
    .fa-or-div::before, .fa-or-div::after { content: ""; flex: 1; height: 1px; background: #EDDFCC; }

    /* mobile pass — desktop is unchanged above 1024px; inline styles are overridden
       with !important only inside the media queries below */
    :root { --gut: 64px; }
    .page { overflow-x: clip; }
    @media (max-width: 1023px) {
      :root { --gut: 28px; }
      .page { min-height: auto !important; }
      .bodygrid { grid-template-columns: minmax(0, 1fr) !important; }
      .rank3, .tiles, .wyt3 { grid-template-columns: minmax(0, 1fr) !important; }
      .grid5 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
      .how3 { flex-direction: column !important; gap: 28px !important; }
      .wbrow { grid-template-columns: minmax(0, 1fr) !important; }
      .bostrip { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
      .pk-mod { grid-template-columns: minmax(0, 1fr); }
    }
    @media (max-width: 719px) {
      :root { --gut: 16px; }
      h1 { font-size: 34px !important; line-height: 1.05 !important; }
      .fa-search-d { display: none !important; }
      /* critic portal: every row that is a grid on desktop stacks, and the
         dispute button goes full width so it is a real tap target */
      .fa-crow { grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 14px 0; }
      .fa-crow-act { justify-content: flex-start; }
      .fa-dispute { width: 100%; padding: 10px 12px; }
      .fa-hist-row, .fa-band-row { grid-template-columns: minmax(0, 1fr) 34px; row-gap: 4px; }
      .fa-hist-row .fa-bar, .fa-band-row .fa-bar { grid-column: 1 / span 2; }
      .fa-band-row em { grid-column: 1 / span 2; text-align: left; }
      .fa-curve-row, .fa-apart-row { grid-template-columns: minmax(0, 1fr) auto; row-gap: 2px; }
      .fa-curve-row em, .fa-apart-row em { grid-column: 1 / span 2; text-align: left; }
      /* nav: one line, never two — horizontally scrollable with an edge fade (Sandeep, Aug 28) */
      .nav { flex-wrap: wrap; gap: 8px; }
      /* the search trigger sits right after the wordmark, ahead of the identity
         chip — reaching for search is a more likely first tap than the account
         chip on a phone. The chip's max-width shrinks to leave it room. */
      .fa-search-btn { display: flex !important; order: 1; }
      .fa-id { order: 2; max-width: 42vw; height: 34px; font-size: 13px; }
      .navlinks { order: 3; margin-left: 0 !important; margin-right: 0 !important;
                  flex: 1 1 100%; margin-top: 6px; gap: 22px !important; flex-wrap: nowrap !important;
                  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
                  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent);
                  mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent); }
      .navlinks::-webkit-scrollbar { display: none; }
      .navlink { white-space: nowrap; flex-shrink: 0; }
      .headrow { flex-wrap: wrap !important; align-items: flex-start !important; gap: 12px 40px !important; }
      .headrow > p { text-align: left !important; margin: 0 !important; }
      /* film hero: title above the poster; score pill + band + age beside it (Sandeep, Aug 28) */
      .hero { grid-template-columns: auto minmax(0, 1fr) !important; gap: 0 16px !important; }
      .htitle { grid-column: 1 / -1 !important; grid-row: 1 !important; }
      .htitle > div > div:first-child { flex-wrap: wrap; }
      .heroposter { grid-column: 1 !important; grid-row: 2 / span 1 !important; width: 128px !important; height: 192px !important; margin-top: 16px; }
      .hmscore { display: flex !important; grid-column: 2; grid-row: 2; flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 16px; align-self: center; }
      .hrest { grid-column: 1 / -1 !important; grid-row: 3 !important; }
      .bostrip { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
      .pk-card { grid-template-columns: 52px minmax(0, 1fr); gap: 12px; }
      .pk-poster { width: 52px; height: 78px; }
      .pk-score { grid-column: 2; justify-content: flex-start; }
      .pk-noscore { text-align: left; width: auto; }
      .pk-facts { flex-direction: column; align-items: flex-start; }
      .frband { flex-wrap: wrap; }
      .mlband { flex-direction: column !important; align-items: flex-start !important; padding: 24px !important; gap: 20px !important; }
      .mlposters { max-width: 100%; overflow-x: auto; }
      .grid5 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 18px 12px !important; }
      .fa-merow, .fa-mecard { padding: 10px 12px; gap: 10px; }
      .fa-me-nums b { font-size: 21px; }
      /* member surface v2 on a phone: the dock drops under the title, the
         modal takes the whole width, aspect rows stack label over slider */
      .fa-dock { margin-top: 2px; }
      .fa-pill { height: 34px; padding: 0 13px; font-size: 13px; }
      .fa-modal { padding: 0; align-items: stretch; }
      .fa-modal-box { max-width: none; min-height: 100%; border-radius: 0; padding: 18px 16px 24px; }
      .fa-asp { grid-template-columns: minmax(0, 1fr) 30px 18px; row-gap: 2px; }
      .fa-asp-n { grid-column: 1 / span 3; }
      .fa-frvote { max-width: none; }
      .fa-setrow { max-width: none; }
      /* parent form: label above its four segments; the name field goes full width */
      .fa-lv { grid-template-columns: minmax(0, 1fr); gap: 4px; }
      .fa-lv-segs { max-width: none; }
      .fa-name { width: 100%; }
      .controls { flex-wrap: wrap; }
      .footrow { flex-direction: column !important; align-items: flex-start !important; gap: 12px !important; }
      /* review rows: text left, every number pinned right in one vertical line (Sandeep, Aug 28) */
      .rev { display: grid !important; grid-template-columns: minmax(0, 1fr) max-content !important; gap: 4px 14px; align-items: start; }
      .rev > div:first-child { grid-column: 1; grid-row: 1; }
      .rev > .critic { grid-column: 1; grid-row: 2; }
      .rev > .tag { grid-column: 1; grid-row: 3; justify-self: start; margin-top: 2px; }
      .rev > .score { grid-column: 2; grid-row: 1; justify-self: end; }
      .rev > .reading-slot { grid-column: 2; grid-row: 2 / span 2; justify-self: end; align-self: start; }
      /* person filmography: year column goes (meta carries the date); role + status get their own row */
      .fgrow { grid-template-columns: 44px minmax(0, 1fr) 44px !important; gap: 8px 10px !important; }
      /* credits carry a 30px face now: two columns leaves ~120px for a name */
      .creditgrid { grid-template-columns: minmax(0, 1fr) !important; }
      .pfface { width: 64px !important; height: 96px !important; }
      .fgrow > :nth-child(1) { display: none !important; }
      .fgrow > :nth-child(2) { grid-column: 1; grid-row: 1; }
      .fgrow > :nth-child(3) { grid-column: 2; grid-row: 1; }
      .fgrow > :nth-child(4) { grid-column: 1 / -1; grid-row: 2; flex-direction: row !important;
                               align-items: center !important; gap: 8px !important; }
      .fgrow > :nth-child(5) { grid-column: 3; grid-row: 1; }
      /* source review rows: film title and this source's badge only */
      .srow { grid-template-columns: 44px minmax(0, 1fr) 44px !important; gap: 10px !important; }
      .srow > .tag, .srow > span:nth-last-child(2), .srow > .score:last-child { display: none !important; }
      /* mobile search: a full-panel overlay (there is no room in the nav for
         a 300px input) — fixed below the nav, own scroll, closes on the X,
         Escape, or picking a result (navigation does that for free). */
      .fa-search-m { position: fixed; top: 64px; left: 0; right: 0; bottom: 0; z-index: 45;
                     background: #FFFCF7; flex-direction: column; }
      .fa-search-m:not([hidden]) { display: flex; }
      .fa-search-m-bar { display: flex; align-items: center; gap: 10px; padding: 12px 16px;
                         border-bottom: 1px solid #EDDFCC; flex-shrink: 0; }
      .fa-search-m-bar input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent;
                               font-family: inherit; font-size: 16px; color: #1E1915; }
      .fa-search-m-bar input::placeholder { color: #9A8B7B; }
      .fa-search-close { border: 0; background: transparent; font-size: 22px; line-height: 1; color: #8A7A6A;
                         cursor: pointer; padding: 0 4px; flex-shrink: 0; }
      .fa-search-panel-m { position: static; width: auto; max-width: none; max-height: none; flex: 1;
                          overflow-y: auto; border: 0; border-radius: 0; box-shadow: none; padding: 8px 10px;
                          background: transparent; }
      .fa-sr-row { padding: 11px 10px; }
    }

    /* The rail toggles visibility with the [hidden] attribute, and the card
       grid carries an inline `display: grid` that would otherwise win over the
       UA stylesheet's `[hidden] { display: none }`. */
    [hidden] { display: none !important; }
    /* ---------- filter rail ---------- */
    .fa-rail { background: #FFFFFF; border: 1px solid #EDDFCC; border-radius: 14px; overflow: hidden; }
    .fa-rail-top { display: flex; align-items: center; justify-content: space-between; gap: 8px;
                   padding: 12px 16px; border-bottom: 1px solid #F3EBDF; font-size: 12.5px; color: #7A6A5A; }
    .fa-rail-top b { color: #1E1915; }
    .fa-rail-top a { color: #F2711C; font-weight: 600; cursor: pointer; }
    .fa-sec { border-bottom: 1px solid #F3EBDF; }
    .fa-sec:last-child { border-bottom: 0; }
    .fa-sec-h { display: flex; align-items: center; gap: 8px; width: 100%; padding: 11px 16px;
                background: none; border: 0; cursor: pointer; font: inherit; color: #1E1915; text-align: left; }
    .fa-sec-lbl { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
                  color: #B0A090; flex: 1; white-space: nowrap; }
    .fa-sec.open .fa-sec-lbl { color: #1E1915; }
    .fa-sec-n { display: none; align-items: center; justify-content: center; min-width: 18px; height: 18px;
                padding: 0 6px; border-radius: 999px; background: #1E1915; color: #FFFFFF;
                font-size: 11px; font-weight: 700; }
    .fa-sec-n.show { display: inline-flex; }
    .fa-chev { width: 9px; height: 9px; border-right: 1.5px solid #B0A090; border-bottom: 1.5px solid #B0A090;
               transform: rotate(-45deg); transition: transform 0.15s; margin-right: 2px; flex-shrink: 0; }
    .fa-sec.open .fa-chev { transform: rotate(45deg); }
    .fa-sec-b { display: none; padding: 2px 10px 12px; }
    .fa-sec.open .fa-sec-b { display: block; }
    .fa-opt { display: flex; align-items: center; gap: 10px; padding: 5px 6px; border-radius: 8px;
              cursor: pointer; font-size: 13.5px; }
    .fa-opt:hover { background: #FBF5EA; }
    .fa-opt:focus-visible { outline: 2px solid #F2711C; outline-offset: 1px; }
    .fa-box { width: 16px; height: 16px; border-radius: 4px; border: 1.5px solid #CDBFAE; flex-shrink: 0;
              position: relative; background: #FFFFFF; }
    .fa-box.r { border-radius: 999px; }
    .fa-opt.on .fa-box { background: #1E1915; border-color: #1E1915; }
    .fa-opt.on .fa-box:after { content: ""; position: absolute; left: 4.5px; top: 1.5px; width: 4px; height: 8px;
                               border: solid #FFFFFF; border-width: 0 2px 2px 0; transform: rotate(45deg); }
    .fa-opt.on .fa-box.r:after { left: 4px; top: 4px; width: 6px; height: 6px; border: 0; border-radius: 999px;
                                 background: #FFFFFF; transform: none; }
    .fa-opt-t { flex: 1; min-width: 0; }
    .fa-opt-c { font-size: 12px; color: #7A6A5A; font-variant-numeric: tabular-nums; }
    /* a zero-count row is still tappable — it just says, before the tap, that
       it would empty the page given everything else that is on */
    .fa-opt.zero { color: #B9AD9E; }
    .fa-opt.zero .fa-opt-c { color: #CDC2B3; }
    .fa-dot { width: 10px; height: 10px; border-radius: 999px; flex-shrink: 0; }
    .fa-hint { padding: 6px 6px 0; font-size: 12px; color: #7A6A5A; line-height: 1.45; }
    .fa-hint a { color: #F2711C; font-weight: 600; cursor: pointer; }
    .fa-more { display: block; padding: 6px 6px 0; font-size: 12.5px; font-weight: 600; color: #F2711C;
               cursor: pointer; background: none; border: 0; font-family: inherit; }
    .fa-cty { margin-left: auto; display: flex; gap: 2px; }
    .fa-cty span { font-size: 10px; font-weight: 700; padding: 2px 5px; border-radius: 999px;
                   color: #7A6A5A; cursor: pointer; }
    .fa-cty span.on { background: #1E1915; color: #FFFFFF; }
    .fa-cap { gap: 8px; }
    .fa-capword { min-width: 54px; text-align: right; }
    .fa-lvl { display: inline-flex; gap: 2px; flex-shrink: 0; }
    .fa-lvl i { width: 10px; height: 6px; border-radius: 2px; background: #EDE3D3; }
    .fa-lvl i.on { background: #DF500C; }
    /* the kid-age slider — the house slider, band gradient on the track */
    .fa-kid { padding: 6px 6px 4px; }
    .fa-kid-read { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: 22px;
                   letter-spacing: -0.01em; }
    .fa-kid-read small { display: block; font-family: Figtree, sans-serif; font-weight: 500; font-size: 13px;
                         color: #7A6A5A; margin-top: 2px; }
    .fa-kid-track { position: relative; height: 24px; margin: 8px 0 0; }
    .fa-kid-track input { position: absolute; left: 0; right: 0; top: 0; width: 100%; margin: 0;
                          -webkit-appearance: none; appearance: none; background: none; height: 24px; }
    .fa-kid-track input::-webkit-slider-runnable-track { height: 6px; border-radius: 999px;
      background: linear-gradient(90deg, #00913B, #85C82F, #F6D732, #F59300, #DF500C, #A21A1B); margin-top: 9px; }
    .fa-kid-track input::-moz-range-track { height: 6px; border-radius: 999px;
      background: linear-gradient(90deg, #00913B, #85C82F, #F6D732, #F59300, #DF500C, #A21A1B); }
    .fa-kid-track input::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px;
      border-radius: 999px; background: #FFFFFF; border: 2px solid #1E1915; margin-top: -8px; cursor: pointer; }
    .fa-kid-track input::-moz-range-thumb { width: 22px; height: 22px; border-radius: 999px;
      background: #FFFFFF; border: 2px solid #1E1915; cursor: pointer; }
    .fa-kid-ends { display: flex; justify-content: space-between; font-size: 11px; color: #7A6A5A; margin-top: 2px; }
    /* ---------- results head ---------- */
    .fa-tools { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
    .fa-count { font-size: 14px; color: #7A6A5A; }
    .fa-count b { color: #1E1915; font-weight: 600; }
    .fa-seg { display: inline-flex; padding: 3px; border-radius: 999px; background: #FFFFFF; border: 1px solid #EDDFCC; }
    .fa-seg span { padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; cursor: pointer;
                   display: inline-flex; align-items: center; gap: 6px; }
    .fa-seg span.on { background: #1E1915; color: #FFFFFF; }
    /* ---------- table view ---------- */
    .fa-tblwrap { overflow-x: auto; }
    .fa-tbl { width: 100%; border-collapse: collapse; background: #FFFFFF; border: 1px solid #EDDFCC;
              border-radius: 14px; overflow: hidden; }
    .fa-tbl th, .fa-tbl td { padding: 10px 12px; text-align: left; font-size: 13.5px;
                             border-bottom: 1px solid #F3EBDF; vertical-align: middle; }
    .fa-tbl tr:last-child td { border-bottom: 0; }
    .fa-tbl th { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
                 color: #B0A090; background: #FDF9F2; cursor: pointer; user-select: none; white-space: nowrap; }
    .fa-tbl th.on { color: #1E1915; }
    .fa-tbl th.on:after { content: " \2193"; }
    .fa-tbl th.on.asc:after { content: " \2191"; }
    .fa-tbl td.num, .fa-tbl th.num { text-align: right; font-variant-numeric: tabular-nums; }
    .fa-tbl tr:hover td { background: #FDF9F2; }
    .fa-tnum { color: #7A6A5A; }
    .fa-tth { width: 36px; height: 54px; border-radius: 6px; object-fit: cover; background: #F3E9DA; display: block; }
    .fa-tttl { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 600; font-size: 14.5px; color: inherit; }
    .fa-tyr { color: #7A6A5A; }
    .fa-tpill { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 28px;
                border-radius: 8px; font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: 14px; }
    .fa-tpill.pv { outline: 2px dashed rgba(0,0,0,0.25); outline-offset: -2px; }
    .fa-tpill-none { color: #B0A090; }
    .fa-tprov { color: #7A6A5A; font-size: 11px; }
    .fa-tprovs { display: inline-flex; gap: 4px; flex-wrap: wrap; }
    .fa-tprovs i { display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border-radius: 4px;
                   background: #FFF1DC; color: #8A5A1E; font-size: 9.5px; font-weight: 700; letter-spacing: 0.04em;
                   text-transform: uppercase; font-style: normal; white-space: nowrap; }
    /* ---------- the bookmark on a card and in a row ---------- */
    .fa-cbm, .fa-tbm { border: 0; padding: 0; cursor: pointer; display: inline-flex; align-items: center;
                       justify-content: center; }
    .fa-cbm { position: absolute; bottom: 10px; right: 10px; width: 32px; height: 32px; border-radius: 9px;
              background: rgba(255,252,247,0.92); box-shadow: 0 2px 6px rgba(0,0,0,0.15); }
    .fa-tbm { width: 28px; height: 28px; border-radius: 8px; background: transparent; }
    .fa-cbm svg, .fa-tbm svg { width: 15px; height: 15px; fill: none; stroke: #1E1915; stroke-width: 1.8; }
    .fa-cbm.on svg, .fa-tbm.on svg { fill: #1E1915; }
    .fa-tbm:hover { background: #F3EBDF; }
    .fa-cage { position: absolute; bottom: 10px; left: 10px; height: 24px; padding: 0 8px; border-radius: 6px;
               background: rgba(255,252,247,0.94); font-family: 'Bricolage Grotesque', sans-serif;
               font-weight: 700; font-size: 12.5px; display: flex; align-items: center; }
    /* ---------- share ---------- */
    .fa-pill-sm { height: 32px; font-size: 12.5px; }
    .fa-share-pop { position: absolute; top: calc(100% + 8px); right: 0; z-index: 40; min-width: 190px;
                    background: #FFFFFF; border: 1px solid #EDDFCC; border-radius: 12px; padding: 6px;
                    box-shadow: 0 12px 30px rgba(60,40,20,0.16); display: flex; flex-direction: column; }
    .fa-share-pop button, .fa-share-pop a { display: flex; align-items: center; gap: 8px; padding: 9px 10px;
      border: 0; background: none; font: inherit; font-size: 13.5px; color: #1E1915; text-align: left;
      cursor: pointer; border-radius: 8px; text-decoration: none; }
    .fa-share-pop button:hover, .fa-share-pop a:hover { background: #FBF5EA; }
    @media (max-width: 1023px) {
      /* the single-column switch itself comes from .bodygrid, which
         #fa-listpage carries — only the tools bar needs its own rule */
      .fa-tools { flex-wrap: wrap; }
    }