/* Iran Scorecard, iranuncensored.com. One stylesheet for both languages: every side is written as
   inline-start / inline-end, so the Persian pages mirror by themselves. Colours are the recommended
   Iran Uncensored set in projects/brand/brands.json (black, sun gold, the three colour ribbon as a
   detail). When Armin picks another set, change the tokens in :root and nothing else. */
@font-face{font-family:"Big Shoulders Display";src:url(fonts/bigshoulders.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Public Sans";src:url(fonts/publicsans.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Vazirmatn";src:url(fonts/vazirmatn.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Lalezar";src:url(fonts/lalezar.woff2) format("woff2");font-weight:400;font-display:swap}
:root{
  /* 14 October 2026: the ground and the text are the brand register's own (brands.json: Ground #12120E, Paper
     #F2F1E6, Sun gold #D9B45A, the ribbon's green and red). Every other grey here is a step between Ground and
     Paper (panel 5%, raise 9%, line 16%, dim 68% of the way), and sunk is Ground a third of the way to black. */
  --field:#D9B45A; --on-field:#14120B; --field-hi:#E8C97A; --field-lo:#8E7434;
  --field-edge:#8E7434;      /* 31 Oct 2026: the shared Liberty Politics parts (room.py's backing bars, tools.css) paint with it; undefined here their gold drew as nothing */
  --bg:#12120E; --panel:#1D1D18; --sunk:#0C0C09; --raise:#262621;
  --ink:#F2F1E6; --dim:#AAAAA1; --line:#36362F;
  --green:#239F40; --white:#F2F1E6; --red:#DA0000;
  --ga:#46CC82; --gb:#A9D84E; --gc:#E8DC82; --gd:#FF9A3D; --gf:#FF5A48; --on-grade:#16140A;
  --display:"Big Shoulders Display","Arial Narrow","Roboto Condensed",sans-serif;
  --body:"Public Sans","Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  --gutter:16px; --col:72rem; --r:6px; --r2:10px;
  /* One spacing scale and one type scale (13 October 2026, his "simplify ... messy and chaotic, too much clutter").
     A new rule takes its space and its size from here. A card is --panel with no line round it and --r2 corners;
     a line is kept for what is typed in, what is pressed, and the two bars that stay on screen. */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:72px;
  /* ONE TYPE SCALE (14 October 2026). Three display sizes, the lede, the body, and three sizes under it: 15, 14
     and 12px. --fs-1 to --fs-5 are kept as names because every older rule reads them; they hold only those three. */
  --h1:clamp(2.5rem,11vw,5rem); --h2:clamp(1.75rem,6vw,2.75rem); --h3:1.4rem; --lede:1.125rem;
  --fs-1:.75rem; --fs-2:.75rem; --fs-3:.875rem; --fs-4:.875rem; --fs-5:.9375rem;
  color-scheme:dark;
}
html[lang="fa"]{--display:"Vazirmatn",Tahoma,"Segoe UI",sans-serif;--body:"Vazirmatn",Tahoma,"Segoe UI",sans-serif;
  --h1:clamp(1.7rem,7.6vw,3.6rem);--h2:clamp(1.35rem,5vw,2.1rem);--h3:1.2rem;--lede:1.0625rem}
*,*::before,*::after{box-sizing:border-box}
/* A thing marked hidden is never drawn. Without this line any class that sets display (.btn, .joined, .row)
   beats the hidden mark, and the page shows what the script just put away: the Join page said "You are in"
   to everyone, and "Play it here" stayed after it was pressed (7 October 2026). */
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-padding-top:76px;scrollbar-color:var(--line) var(--sunk)}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.6 var(--body);overflow-x:hidden}
html[lang="fa"] body{line-height:1.85}
::selection{background:var(--field);color:var(--on-field)}
img{max-width:100%;display:block}
a{color:inherit;text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--field);outline-offset:2px;border-radius:2px}
.field :focus-visible{outline-color:var(--field)}
h1,h2,h3{font-family:var(--display);font-weight:800;line-height:1;margin:0;text-wrap:balance}
html[lang="en"] h1,html[lang="en"] h2,html[lang="en"] h3{text-transform:uppercase;letter-spacing:.005em}
html[lang="fa"] h1,html[lang="fa"] h2,html[lang="fa"] h3{font-weight:900;line-height:1.35}
h2{font-size:var(--h2)}
h3{font-size:var(--h3);line-height:1.1}
p,li{text-wrap:pretty}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
.wrap{max-width:var(--col);margin:0 auto;padding:0 var(--gutter)}
.narrow{max-width:46rem}
.dim{color:var(--dim)}
.mt{margin-top:var(--s3)}.mt2{margin-top:var(--s6)}
.num{font-variant-numeric:tabular-nums lining-nums}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
a.vh:focus{position:fixed;inset-inline-start:8px;top:8px;z-index:60;width:auto;height:auto;clip:auto;padding:12px 16px;background:var(--field);color:var(--on-field);font-weight:700}

/* the ribbon: the flag's three colours, as a detail and never a background */
.ribbon{display:flex;height:5px}
.ribbon i{flex:1}.ribbon i:nth-child(1){background:var(--green)}.ribbon i:nth-child(2){background:var(--white)}.ribbon i:nth-child(3){background:var(--red)}
.stagebar{background:var(--gf);color:var(--on-grade);font-weight:700;font-size:var(--fs-3);text-align:center;padding:6px 12px}

/* top bar */
.top{position:sticky;top:0;z-index:20;background:var(--sunk);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:10px;min-height:60px}
.mark{display:flex;align-items:center;gap:10px;text-decoration:none;font:800 1.3rem/1 var(--display);white-space:nowrap;min-height:44px}
html[lang="en"] .mark{text-transform:uppercase;letter-spacing:.02em}
html[lang="fa"] .mark{font-family:"Lalezar","Vazirmatn",Tahoma,sans-serif;font-weight:400;font-size:1.25rem}
.mark img{width:44px;height:44px;border-radius:50%}
.mark b{color:var(--field);font-weight:inherit}
@media(max-width:380px){.mark span{font-size:1.05rem}}
.top nav{margin-inline-start:auto;display:flex;align-items:center;gap:4px}
.top nav a{display:none;padding:10px 12px;text-decoration:none;font-weight:600;font-size:var(--fs-5);border-radius:var(--r)}
.top nav a:hover{background:var(--raise)}
.top nav a[aria-current="page"]{color:var(--field)}
.top nav a.lang,.top nav a.join{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;font-weight:700}
.top nav a.lang{border:1px solid var(--line);font-family:"Vazirmatn","Public Sans",sans-serif}
.top nav a.join{background:var(--field);color:var(--on-field)}
.top nav a.join:hover{background:var(--field-hi)}
/* 14 Oct 2026: the menu grew (Public events), and from 820 to about 1230px it overlapped the mark and pushed Sign in off the screen; the strip below the bar serves those widths now. */
@media(min-width:1240px){.top nav a{display:inline-flex;align-items:center;min-height:44px}}
/* 20 Oct 2026: the strip holds the "Join the panel" pill (render.py nav_go) and, beside it, the part that scrolls (.subnav-s), so the pill never slides out of sight. */
.subnav{display:flex;align-items:center;background:var(--sunk);padding-inline-start:8px}
.subnav-s{display:flex;gap:4px;flex:1 1 auto;min-width:0;overflow-x:auto;scrollbar-width:none}
.subnav-s::-webkit-scrollbar{display:none}
.subnav a{flex:none;display:inline-flex;align-items:center;padding:0 10px;min-height:44px;text-decoration:none;font-weight:600;font-size:var(--fs-4);color:var(--dim)}
.subnav a[aria-current="page"]{color:var(--field)}
/* the row scrolls sideways on a phone: its far edge fades, so a cut word reads as "more this way" */
.subnav-s{-webkit-mask-image:linear-gradient(to left,transparent,#000 36px);mask-image:linear-gradient(to left,transparent,#000 36px)}
html[dir="rtl"] .subnav-s{-webkit-mask-image:linear-gradient(to right,transparent,#000 36px);mask-image:linear-gradient(to right,transparent,#000 36px)}
.subnav-s a:last-child{margin-inline-end:28px}
@media(min-width:1240px){.subnav{display:none}}

/* The head of a page. It was a block of solid gold until 5 October 2026, when Armin called it ugly
   ("this orange for Iran Uncensored looks ugly ... just fix it"). Now it is black like the rest of the
   page and the gold is spent on three things only: the headline, the buttons and the links. */
.field{background:var(--sunk);color:var(--ink)}
.field h1{color:var(--field)}
.field h1 i{font-style:normal;color:var(--ink)}
.field.band{background:var(--panel)}
.field.band h2{color:var(--ink)}
.field .btn-ink{background:var(--field);color:var(--on-field)}.field .btn-ink:hover{background:var(--field-hi)}
.field .wrap{padding-top:var(--s6);padding-bottom:var(--s6)}
.field h1{font-size:var(--h1);line-height:.9}
html[lang="fa"] .field h1{line-height:1.35}
.hero h1{font-weight:900}
@media(min-width:900px){.hero .wrap{display:grid;grid-template-columns:1.15fr 1fr;gap:48px;align-items:end;padding-top:56px;padding-bottom:48px}}
.lede{font-size:1.2rem;line-height:1.4;font-weight:600;max-width:36ch;margin-top:14px}
html[lang="fa"] .lede{line-height:1.7}
.field .sub{margin-top:8px;max-width:48ch;color:var(--dim)}
.find{margin-top:22px;position:relative}
.find label{display:block;font-weight:700;margin-bottom:6px}
input,select,textarea{font:500 1rem/1.3 var(--body);color:var(--ink);background:var(--sunk);border:1px solid var(--line);border-radius:var(--r);width:100%;min-height:48px;padding:10px 12px;caret-color:var(--field)}
textarea{min-height:120px;resize:vertical}
.find input,.tools input,.tools select{min-height:52px;color:var(--ink);background:var(--panel);border:1px solid var(--field-lo)}
.find input:focus,.tools input:focus,.tools select:focus{border-color:var(--field)}
.find input::placeholder,.tools input::placeholder{color:var(--dim)}
.hits{position:absolute;inset-inline:0;top:calc(100% - 44px);z-index:10;margin:4px 0 0;background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:var(--r);max-height:60vh;overflow:auto}
.hits:empty{display:none}
.hits a{display:flex;align-items:center;gap:10px;padding:10px 12px;min-height:48px;text-decoration:none;border-bottom:1px solid var(--line)}
.hits a:hover,.hits a:focus-visible{background:var(--raise)}
.hits small{color:var(--dim);margin-inline-start:auto}
/* under the search: pick a state, or open the whole list. One under the other on a phone, side by side from 520px */
.statepick{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;margin-top:10px}
.statepick select{min-height:52px;color:var(--ink);background:var(--panel);border:1px solid var(--field-lo)}
.statepick select:focus{border-color:var(--field)}
.statepick select option{color:var(--ink);background:var(--panel)}
.statepick .btn{min-height:52px;text-align:center}
@media(min-width:520px){.statepick{grid-template-columns:minmax(0,1fr) auto}}
.tools{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:20px}
.tools input{grid-column:1/-1}
.tools select{min-height:48px;padding-inline:10px 8px;font-size:var(--fs-5);text-overflow:ellipsis}
@media(min-width:760px){.tools{grid-template-columns:repeat(3,1fr)}}
/* 31 Oct 2026: seven columns of 143px cut the words of the filters ("Senate and ..."); four wide columns, the name box two of them, two rows */
@media(min-width:1100px){.tools{grid-template-columns:repeat(4,minmax(0,1fr))}.tools input{grid-column:span 2}}

/* sections */
.sec{padding:var(--s6) 0}
.sunk{background:var(--sunk)}
.sec h2{margin-bottom:var(--s4)}
.more{margin-top:var(--s4)}
.more a{display:inline-flex;align-items:center;min-height:44px;font-weight:700;color:var(--field)}
.how a{font-weight:700;color:var(--field)}
/* 31 Oct 2026: a link inside a sentence stays inline, so its line is as tall as the others; its padding (which never
   moves a line) makes the tap about 44px. A link that stands alone keeps its own 44px box (.more a, .alinks a, .btn). */
.how a,.src a,.prose a:not(.btn),a.inl{display:inline;min-height:0;padding-block:max(11px,calc(22px - .59em))}
.measures{display:grid;gap:var(--s3);counter-reset:m}
@media(min-width:760px){.measures{grid-template-columns:1fr 1fr}}
.measures li{background:var(--panel);border-radius:var(--r2);padding:var(--s4)}
.measures h3{margin-bottom:8px}
.measures .from{margin-top:10px;color:var(--dim);font-size:var(--fs-4)}

/* grade stamp */
.g{display:inline-grid;place-items:center;inline-size:72px;block-size:72px;border-radius:var(--r);font:900 2.6rem/1 "Big Shoulders Display","Arial Narrow",sans-serif;color:var(--on-grade);background:var(--line);letter-spacing:0;direction:ltr;flex:none}
.g-sm{inline-size:44px;block-size:44px;font-size:1.5rem}
/* the stamp is the score out of 100: 100 is three digits, and Persian digits are wider than the display face */
.g-3{font-size:2.2rem}.g-sm.g-3{font-size:1.3rem}
html[lang="fa"] .g{font-family:"Vazirmatn",Tahoma,sans-serif;font-weight:800;font-size:2.1rem}
html[lang="fa"] .g-sm{font-size:1.3rem}html[lang="fa"] .g-3{font-size:1.7rem}html[lang="fa"] .g-sm.g-3{font-size:1.05rem}
.g-a{background:var(--ga)}.g-b{background:var(--gb)}.g-c{background:var(--gc)}.g-d{background:var(--gd)}.g-f{background:var(--gf)}.g-n{background:transparent;border:2px dashed var(--line);color:var(--dim)}

/* member rows */
.rows{display:grid;gap:var(--s2)}
.mrow a{display:flex;align-items:center;gap:var(--s3);min-height:72px;padding:7px 10px;background:var(--panel);border:1px solid transparent;border-radius:var(--r2);text-decoration:none}
.mrow a:hover{background:var(--raise);border-color:var(--field)}
.face{inline-size:48px;block-size:58px;object-fit:cover;border-radius:var(--r);flex:none;background:var(--raise)}
.noface{display:grid;place-items:center;font:800 1.1rem/1 "Big Shoulders Display",sans-serif;color:var(--dim)}
.who{display:flex;flex-direction:column;min-width:0;flex:1}
.who b{font-size:1.05rem;line-height:1.25}
.who small{color:var(--dim);font-size:var(--fs-3);line-height:1.4}
.sc{display:flex;flex-direction:column;align-items:center;gap:2px;flex:none}
.sc small{color:var(--dim);font-size:var(--fs-1);white-space:nowrap}
.chips{display:flex;flex-wrap:wrap;gap:4px;margin-top:3px}
.chip{font-size:var(--fs-1);font-weight:700;line-height:1;padding:4px 6px;border-radius:3px;white-space:nowrap}
.chip-y{background:#173D28;color:#8FE8B4}.chip-n{background:#4A1712;color:#FFB0A6}
.count{color:var(--dim);margin-bottom:12px}
.empty{padding:24px 0;color:var(--dim)}

/* member page */
.mhead .wrap{display:grid;grid-template-columns:auto 1fr;gap:14px 16px;align-items:center}
.face-lg{inline-size:96px;block-size:118px;border:1px solid var(--line)}
.mhead h1{font-size:clamp(2.2rem,9vw,3.8rem);overflow-wrap:anywhere;text-transform:uppercase;font-family:"Big Shoulders Display","Arial Narrow",sans-serif;font-weight:900;line-height:.9}
.role{font-weight:700;margin-top:6px}
.gline{margin-top:6px;max-width:44ch}
.latin{margin-top:2px;color:var(--dim);font:600 var(--fs-5)/1.3 "Public Sans","Segoe UI",sans-serif;text-align:end}
html[lang="fa"] .mhead h1{font-family:var(--display);text-transform:none;line-height:1.3;font-size:clamp(1.9rem,8vw,3.2rem)}
.gradebox{grid-column:1/-1;display:flex;align-items:center;gap:var(--s3);padding:var(--s3);background:var(--panel);border-radius:var(--r2)}
.gradebox .g{inline-size:76px;block-size:76px;font-size:3rem}
.gradebox .g.g-3{font-size:2.4rem}
html[lang="fa"] .gradebox .g{font-size:2.3rem}html[lang="fa"] .gradebox .g.g-3{font-size:1.85rem}
.gradebox .gline{margin:0;font-weight:600;max-width:36ch}
.gradebox .chips{margin-top:8px}
@media(min-width:860px){.mhead .wrap{grid-template-columns:auto 1fr minmax(0,26rem)}.gradebox{grid-column:auto}}
.mslist{display:grid;gap:14px}
.ms{display:grid;grid-template-columns:1fr auto;gap:4px 12px;align-items:baseline}
.msn{font-weight:700}
.msv{font:800 1.5rem/1 "Big Shoulders Display",var(--display);direction:ltr}
html[lang="fa"] .msv{font-family:"Vazirmatn";font-size:1.25rem}
html[lang="fa"] .ms-none .msv{font-size:var(--fs-5)}
.ms-pen .msv{color:#FFB0A6;font-weight:700}
.pen{color:var(--gf)}
.pen::before{content:"\2212"}
.ms-none{grid-template-columns:1fr}
.ms-none .msv{font:500 var(--fs-5)/1.5 var(--body);color:var(--dim);direction:inherit}
.track{grid-column:1/-1;block-size:10px;background:var(--raise);border-radius:5px;overflow:hidden;display:block}
.fill{display:block;block-size:100%;border-radius:5px}
.how{margin-top:12px;color:var(--dim)}
.fair{margin-top:var(--s5);padding:var(--s4);background:var(--panel);border-radius:var(--r2)}
.fair h3{margin-bottom:12px}
.fair .btn{min-height:44px}
.tally{margin-top:10px;color:var(--dim)}
.msec{padding:var(--s5) 0;border-bottom:1px solid var(--line)}
.msec:last-child{border-bottom:0}
.msec header{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap}
.msec h2{margin:0}
.mscore{display:flex;align-items:baseline;gap:6px}
.big{font:900 2.4rem/1 "Big Shoulders Display",var(--display);color:var(--field)}
html[lang="fa"] .big{font-family:var(--display);font-weight:900}
.of,.none{color:var(--dim);font-size:var(--fs-4)}
.blurb{color:var(--dim);margin-top:8px}
.clean{margin-top:14px}
.askbox{margin-top:14px;padding:16px;background:var(--panel);border:1px solid var(--field-lo);border-radius:var(--r2);display:grid;gap:12px;justify-items:start}
.recs,.acts-plain{display:grid;gap:14px;margin-top:18px}
.rec{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start}
.mk{display:inline-grid;place-items:center;min-inline-size:64px;padding:5px 8px;border-radius:3px;font-size:var(--fs-1);font-weight:800;line-height:1.2;text-align:center}
.mk-ok{background:#173D28;color:#8FE8B4}.mk-no{background:#4A1712;color:#FFB0A6}.mk-un{background:var(--raise);color:var(--dim)}
.what{line-height:1.45}
.why{color:var(--dim);font-size:var(--fs-4);margin-top:4px}
.src{font-size:var(--fs-3);color:var(--dim);margin-top:4px}
.key{display:inline-block;font-size:var(--fs-1);font-weight:700;padding:2px 6px;border:1px solid var(--field);color:var(--field);border-radius:3px;white-space:nowrap}
blockquote{margin:var(--s2) 0 0;padding:var(--s3);border-radius:var(--r);background:var(--panel);font-size:var(--fs-5);font-family:"Public Sans","Segoe UI",sans-serif;line-height:1.5;text-align:left}
.acts-plain li{padding-bottom:14px;border-bottom:1px solid var(--line)}
.office{color:var(--dim)}
.office a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink);font-weight:700}

/* buttons, forms */
.row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 18px;border-radius:var(--r);font:700 1rem/1.2 var(--body);text-decoration:none;border:2px solid transparent;cursor:pointer;text-align:center}
.btn-key{background:var(--field);color:var(--on-field)}.btn.btn-key,.btn.btn-key:visited{color:var(--on-field)}.btn-key:hover{background:var(--field-hi)}
.btn-ink{background:var(--on-field);color:var(--field)}.btn-ink:hover{background:#2A2610}
.btn-line{background:transparent;color:inherit;border-color:currentColor}
.btn-line:hover{background:rgba(127,127,127,.18)}
.btn-ghost{background:transparent;color:var(--field);text-decoration:underline}
.btn[aria-pressed="true"]{background:var(--field);color:var(--on-field);border-color:var(--field)}
.band .wrap{display:grid;gap:var(--s4);padding-top:var(--s6);padding-bottom:var(--s6)}
@media(min-width:900px){.band .wrap{grid-template-columns:1fr auto;align-items:center}}
.form{display:grid;gap:10px;margin-top:18px}
.form label,.form legend{font-weight:700;margin-top:6px}
fieldset{border:0;padding:0;margin:0}
.picks{display:grid;gap:8px;margin-top:8px}
@media(min-width:560px){.picks{grid-template-columns:1fr 1fr}}
.pick{display:flex;align-items:center;gap:10px;min-height:48px;padding:0 12px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);cursor:pointer;font-weight:600;margin:0}
.pick input{inline-size:20px;block-size:20px;min-height:0;flex:none;accent-color:var(--field);padding:0}
.pick:has(input:checked){border-color:var(--field);background:var(--raise)}
.hint,.fineprint{color:var(--dim);font-size:var(--fs-4)}
.fineprint{margin-top:14px}.fineprint a{display:inline-flex;align-items:center;min-height:40px}
.joinin{display:grid;gap:10px;padding:14px;background:var(--panel);border:1px solid var(--field-lo);border-radius:var(--r2);margin-top:6px}
.joinhead{font-weight:700}
.me{color:var(--dim);font-size:var(--fs-4)}
.status{min-height:1.4em;font-weight:700}
.status.ok{color:var(--ga)}.status.bad{color:var(--gf)}
.aboutline{padding:8px 12px;background:var(--panel);border:1px solid var(--field-lo);border-radius:var(--r)}
.gets{display:grid;gap:10px;margin-bottom:12px}
.gets li{padding-inline-start:28px;position:relative}
.gets li::before{content:"";position:absolute;inset-inline-start:4px;top:.55em;inline-size:12px;block-size:12px;background:var(--field);border-radius:50%}
.joined{padding:var(--s4);background:var(--panel);border:1px solid var(--field);border-radius:var(--r2);display:grid;gap:var(--s3);margin-top:var(--s4)}
.rules{display:grid;gap:12px;counter-reset:r}
.rules li{counter-increment:r;padding-inline-start:40px;position:relative}
.rules li::before{content:counter(r);position:absolute;inset-inline-start:0;top:0;inline-size:28px;block-size:28px;display:grid;place-items:center;background:var(--field);color:var(--on-field);font-weight:800;border-radius:50%;font-size:var(--fs-4)}
html[lang="fa"] .rules li::before{content:counter(r,persian)}
.scale{display:flex;flex-wrap:wrap;gap:10px 16px}
.scale li{display:flex;align-items:center;gap:8px}
.swatch{display:inline-block;inline-size:22px;block-size:22px;border-radius:var(--r);flex:none}
.prose h2{margin-top:var(--s6)}
.prose h2:first-child{margin-top:0}
.prose p{margin-top:12px;max-width:65ch}
.prose a{color:var(--field);font-weight:700}
.says{display:grid;gap:12px;margin-top:14px}
.discuss{margin-top:16px;display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.discuss .btn{min-height:44px;font-size:var(--fs-5)}
.more-talk{display:inline-flex;align-items:center;min-height:44px;color:var(--field);font-weight:700}
.talkrow{margin-top:16px}
.say-item{padding:var(--s4);background:var(--panel);border-radius:var(--r2)}
.by{color:var(--dim);font-size:var(--fs-4);margin-top:6px}

/* the corner button that leads to the box */
.fab{position:fixed;inset-inline-end:12px;bottom:12px;z-index:30;display:inline-flex;align-items:center;gap:6px;min-height:48px;padding:0 16px;background:var(--field);color:var(--on-field);border:2px solid var(--on-field);border-radius:24px;text-decoration:none;font-weight:600;box-shadow:0 8px 20px -6px rgba(0,0,0,.7)}

footer{background:var(--sunk);border-top:1px solid var(--line);padding:var(--s6) 0 84px;color:var(--dim);font-size:var(--fs-4)}
footer strong{color:var(--ink)}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4)}
.cols>div{grid-column:1/-1}
@media(min-width:760px){.cols{grid-template-columns:1.4fr 1fr 1fr;gap:var(--s5)}.cols>div{grid-column:auto}}
footer li a{display:inline-flex;align-items:center;min-height:44px;line-height:1.35}
.fine{margin-top:var(--s5);font-size:var(--fs-2);line-height:1.6}
.pick-lang{min-height:100vh;display:grid;place-content:center;justify-items:center;gap:18px;text-align:center;padding:24px}
.pick-lang h1{font-size:2.6rem;text-transform:uppercase}
@media(prefers-reduced-motion:no-preference){.btn,.mrow a{transition:background-color .12s,border-color .12s}}

/* ---- taking action (act/, act/trump-meet-pahlavi/, act/bloc/), added 5 October 2026 ---- */
.camp h1{font-size:clamp(3.2rem,15vw,6rem);font-weight:900}
html[lang="fa"] .camp h1{font-size:clamp(2.2rem,10vw,4.2rem);font-weight:900}
.askp{font-size:1.2rem;line-height:1.5;font-weight:600;margin-top:14px;max-width:44ch}
html[lang="fa"] .askp{line-height:1.9}
.tws{display:grid;gap:12px;margin-top:20px}
@media(min-width:900px){.tws{grid-template-columns:1fr 1fr}}
.tw{display:grid;grid-template-columns:112px minmax(0,1fr);gap:var(--s3);padding:var(--s3);background:var(--panel);border-radius:var(--r2)}
.tw-pic{position:relative;display:block;inline-size:112px;block-size:150px;background:#000;border-radius:var(--r);overflow:hidden}
.tw-go{position:absolute;inset:0;margin:auto;inline-size:44px;block-size:44px;border-radius:50%;background:rgba(10,10,10,.7);box-shadow:inset 0 0 0 2px var(--field)}
.tw-go::after{content:"";position:absolute;left:17px;top:13px;border-style:solid;border-width:9px 0 9px 14px;border-color:transparent transparent transparent var(--field)}
.tw-pic img{inline-size:100%;block-size:100%;object-fit:cover}
.tw-pic.wide img{object-fit:contain}
.tw-d{color:var(--dim);font-size:var(--fs-4)}
.tw-t{margin-top:4px}
.tw .row{margin-top:10px;gap:8px}
.tw .btn{min-height:44px;padding:0 14px;font-size:var(--fs-5)}
.tw-embed{grid-column:1/-1;min-height:120px}
.tw-embed p{color:var(--dim)}
/* an open card grows by the height of X's player: the card beside it keeps its own height instead of
   stretching into an empty box, and the player sits in the middle of the card */
.tws:has(.tw.open){align-items:start}
.tw-embed .twitter-tweet{margin:0 auto!important}
.tw-embed blockquote{margin:0;text-align:start;color:var(--dim)}
.asteps{display:grid;gap:14px;max-width:54rem}
.asteps>li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:var(--s3);padding:var(--s4);background:var(--panel);border-radius:var(--r2)}
.asteps>li>b{display:grid;place-items:center;inline-size:44px;block-size:44px;border-radius:50%;background:var(--field);color:var(--on-field);font:900 1.6rem/1 var(--display)}
html[lang="fa"] .asteps>li>b{font-weight:800;font-size:1.3rem}
.asteps h3{font-size:1.7rem}
html[lang="fa"] .asteps h3{font-size:1.3rem}
html[lang="fa"] .asteps h3{line-height:1.4}
.asteps p{margin-top:10px;max-width:60ch}
.asteps .row{margin-top:14px}
.asks{display:grid;gap:8px;margin-top:12px;counter-reset:q}
.asks li{counter-increment:q;padding:10px 12px;border-radius:var(--r);background:var(--raise);font-weight:600}
.alinks{margin-top:8px}
.alinks a{display:inline-flex;align-items:center;min-height:44px}
.alinks a,a.inl{color:var(--field);font-weight:700}
.bfacts{display:grid;gap:18px;margin-top:8px}
.bfacts li{padding:var(--s4);background:var(--panel);border-radius:var(--r2);line-height:1.6}
.asteps .bfacts li{background:var(--bg)}
html[lang="fa"] .bfacts li{line-height:1.9}
.src{display:block;margin-top:6px;font-size:var(--fs-4);color:var(--dim)}
.src a{overflow-wrap:anywhere}      /* inline, its tap height from padding: the shared rule under .how a (31 Oct 2026) */
.asteps .bfacts{margin-top:14px}
.who{display:grid;gap:10px;margin-top:16px}
.who div{padding:var(--s4);background:var(--panel);border-radius:var(--r2)}
.who dt{font:800 1.3rem/1.2 var(--display);color:var(--field)}
html[lang="en"] .who dt{text-transform:uppercase}
html[lang="fa"] .who dt{font-weight:800}
.who dd{margin:6px 0 0}

/* ---- the discussion: one room, two languages (5 October 2026). Drawn only when data/firebase-config.json
   exists. The markup and the class names are the Liberty Politics site's, because the same two scripts draw
   it (../../site/build/community.js and discussion.js); these are this site's own styles for them: its
   tokens, and every side written as inline-start / inline-end so the Persian pages mirror by themselves.
   Gold is spent where it already is: the headline, the buttons, the links, and the side of the switch that
   leads to the discussion. A reader's words keep the direction of the language they were written in
   (dir="auto" on the post), on a Persian page and on an English one. ---- */
/* A reader's words may be in either language on either page: Persian letters come from the site's own
   Persian font on an English page too, never from whatever the device falls back to. */
html{--mix:"Public Sans","Vazirmatn","Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif}
html[lang="fa"]{--mix:"Vazirmatn",Tahoma,"Segoe UI",sans-serif}
.top nav a.acct{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 12px;border:1px solid var(--field-lo);color:var(--field);font-weight:700;white-space:nowrap}
.top nav a.acct:hover{background:var(--raise);border-color:var(--field)}
.top nav a.acct.in{padding-inline:6px 12px;border-color:transparent;color:var(--ink)}
.acct-i{display:inline-flex;align-items:center;justify-content:center;inline-size:32px;block-size:32px;flex:none;border-radius:50%;background:var(--field);color:var(--on-field);font:800 1.05rem/1 var(--body)}
.acct-n{max-inline-size:9rem;overflow:hidden;text-overflow:ellipsis}
@media(max-width:559px){.acct-n{display:none}.top nav a.acct.in{padding-inline:6px}}
@media(max-width:419px){.top .wrap{gap:8px}.mark{gap:8px}.mark img{width:36px;height:36px}.top nav a.acct,.top nav a.lang{padding:0 9px}}
/* replies to you (6 October 2026; the shared script draws it, projects/brand/site/README.md "Replies to you"):
   a count laid over the corner of the reader's letter, taking no room of its own, and the list at the top of
   the account panel. */
.acct-i{position:relative}
.acct-c{position:absolute;inset-block-start:-5px;inset-inline-end:-8px;min-inline-size:18px;block-size:18px;padding:0 4px;border-radius:9px;background:var(--ink);color:var(--on-field);box-shadow:0 0 0 2px var(--sunk);font:800 var(--fs-1)/18px var(--body);text-align:center;font-variant-numeric:tabular-nums}
/* the reader's own picture in the header in place of the letter (community.js paintHeader, 15 October 2026) */
.acct-i.acct-pic{background:var(--raise);box-shadow:0 0 0 2px var(--field)}
.acct-i.acct-pic img{display:block;width:100%;height:100%;border-radius:50%;object-fit:cover}
/* a face that has its picture: the letter's coloured ground no longer shows */
.av.av-pic{background:var(--raise)}
.ry{display:grid;gap:6px;padding-block-end:14px;border-block-end:1px solid var(--line)}
.ry h3{font-size:1.3rem}
.ry-list{display:grid}
.ry-list li+li{border-block-start:1px solid var(--line)}
.ry-go{display:grid;gap:2px;align-content:center;min-height:44px;padding:10px 0;text-decoration:none}
.ry-go:hover .ry-t{text-decoration:underline;text-underline-offset:3px}
.ry-who{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 8px;color:var(--dim);font-size:var(--fs-4)}
.ry-who b{color:var(--ink);overflow-wrap:anywhere;font-family:var(--mix)}
.ry-who .tag{color:var(--field)}
.ry-sub{white-space:nowrap}
.ry-t{overflow-wrap:anywhere;font-family:var(--mix)}

/* the switch under the header: the side the reader is on is filled, the other side is a button */
.modes{position:sticky;top:61px;z-index:19;background:var(--sunk);border-bottom:1px solid var(--line)}
.modes .wrap{display:flex;align-items:center;gap:8px;padding:6px 8px}
.modes-sw{position:relative;flex:1 1 auto;min-width:0;display:grid;grid-template-columns:1fr 1fr;padding:3px;background:var(--bg);border:1px solid var(--line);border-radius:999px}
.mode{position:relative;z-index:1;min-width:0;display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:42px;padding:0 10px;border-radius:999px;font:700 var(--fs-5)/1 var(--body);text-decoration:none;color:var(--ink);white-space:nowrap}
.mode:focus-visible{border-radius:999px}
.mode>span{min-width:0;overflow:hidden;text-overflow:ellipsis;line-height:1.5}
.mode svg{flex:none}
.mode-d{color:var(--field)}
.modes-on .modes-sw::before{content:"";position:absolute;top:3px;bottom:3px;inset-inline-start:3px;inline-size:calc(50% - 3px);border-radius:999px;background:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.55);transition:transform .28s cubic-bezier(.16,1,.3,1),background-color .28s}
.modes-on[data-mode="discussion"] .modes-sw::before{transform:translateX(100%);background:var(--field)}
html[dir="rtl"].modes-on[data-mode="discussion"] .modes-sw::before{transform:translateX(-100%)}
.modes-on[data-mode="record"] .mode-r,.modes-on[data-mode="discussion"] .mode-d{color:var(--on-field);cursor:default}
.modes-on[data-mode="record"] .mode-d{background:rgba(217,180,90,.14);box-shadow:inset 0 0 0 1.5px var(--field)}
.modes-on[data-mode="record"] .mode-d:hover{background:rgba(217,180,90,.26)}
.modes-on[data-mode="discussion"] .mode-r:hover{background:var(--raise)}
.mode-n{display:inline-flex;align-items:center;justify-content:center;min-inline-size:22px;block-size:22px;padding:0 6px;background:var(--field);color:var(--on-field);border-radius:999px;font-size:var(--fs-2);font-weight:800}
.modes-on[data-mode="discussion"] .mode-n{background:var(--on-field);color:var(--field)}
.mode-n[hidden]{display:none}
@media(max-width:430px){.mode-d:has(.mode-n:not([hidden])) svg{display:none}.mode-r svg{display:none}}
.mode-share{flex:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:44px;min-height:44px;padding:0 12px;background:none;border:1px solid var(--line);border-radius:999px;color:var(--dim);font:600 var(--fs-4)/1 var(--body);cursor:pointer;white-space:nowrap}
.mode-share:hover{color:var(--ink);border-color:var(--dim)}
.mode-share span{display:none}
.mode-share.said span{display:inline;color:var(--ga)}
@media(min-width:760px){.modes .wrap{padding:8px var(--gutter)}.modes-sw{flex:0 1 27rem}.mode-share{margin-inline-start:auto;border-color:transparent}.mode-share span{display:inline}}
.modes-on[data-mode="record"] #discussion,.modes-on[data-mode="discussion"] #record{display:none}
html.modes-on{scroll-padding-top:128px}
.modes-on .said,.modes-on .talk{scroll-margin-top:128px}

/* the page's question, high on the record, shaped like a box to write in */
.nudge-sec{padding:var(--s4) 0 0}
.nudge{display:grid;gap:var(--s3);max-width:46rem;padding:var(--s4);background:var(--panel);border:1px solid var(--field-lo);border-radius:var(--r2);text-decoration:none;color:var(--ink)}
.nudge:hover{border-color:var(--field)}
/* Right above the ON AIR band the prompt takes the full width of the page, so its right edge lines up with the band's
   button, and it keeps a gap instead of sitting on the band's top line. The count chip sits on its own line under the
   question, so it never squeezes the question to a word a line (31 October 2026, as on the Liberty Politics site). */
.nudge-sec:has(+ .tband){padding-bottom:var(--s5)}
.nudge-sec:has(+ .tband) .nudge,.nudge:has(+ .tband){max-width:none}
.nudge-q{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:8px;row-gap:6px;align-items:start;font-size:1.1rem;line-height:1.4}
.nudge-q svg{margin-top:3px;color:var(--field)}
.nudge-q b{font-weight:700}
.nudge-n{grid-column:2;justify-self:start;padding:3px 9px;background:var(--raise);border-radius:999px;font-size:var(--fs-2);font-weight:700;color:var(--field);white-space:nowrap}
.nudge-n[hidden],.nudge-top[hidden]{display:none}
.nudge-top{display:block;padding:8px 12px;background:var(--bg);border-radius:var(--r);color:var(--dim);font-size:var(--fs-5);line-height:1.5;overflow-wrap:anywhere;text-align:start}
.nudge-top b{color:var(--ink);font-weight:600}
.nudge-in{display:flex;align-items:center;gap:10px;min-height:52px;padding-block:4px;padding-inline:16px 4px;background:var(--bg);border:1px solid var(--line);border-radius:999px;color:var(--dim);font-size:var(--fs-5);line-height:1.35}
.nudge-in>span{flex:1 1 auto;min-width:0}
.nudge.kept .nudge-in>span{color:var(--ink)}
.nudge-in i{flex:none;display:inline-flex;align-items:center;min-height:42px;padding:0 16px;background:var(--field);color:var(--on-field);border-radius:999px;font-style:normal;font-weight:700}
.nudge:hover .nudge-in i{background:var(--field-hi)}
.band-top{margin-top:14px;max-width:44rem;padding:12px 14px;background:var(--raise);border:1px solid var(--field-lo);border-radius:var(--r)}
.band-top[hidden]{display:none}
.band-top blockquote{margin:0;padding:0;border:0;background:none;font:600 1.05rem/1.6 var(--mix);text-align:start;overflow-wrap:anywhere;white-space:pre-line}
.band-top p{margin-top:6px;font-size:var(--fs-4);font-weight:700;color:var(--dim)}

/* the discussion of a page: a way back, what it is about, the box, then the posts */
.disc{padding-top:10px}
.crumb{display:inline-flex;align-items:center;gap:6px;min-height:44px;font-weight:700;text-decoration:none;color:var(--dim)}
.crumb:hover{color:var(--ink)}
.disc-back{margin-bottom:8px}
.disc-col{max-width:46rem}
.disc-head{display:flex;align-items:center;gap:12px}
.disc-head>div{min-width:0}
.disc-eye{font:800 var(--fs-2)/1.4 var(--body);color:var(--dim)}
html[lang="en"] .disc-eye{letter-spacing:.1em;text-transform:uppercase}
.disc-head h2{margin:4px 0 0;font-size:clamp(1.9rem,7vw,2.8rem);overflow-wrap:anywhere;color:var(--field)}
html[lang="fa"] .disc-head h2{font-size:clamp(1.5rem,6vw,2.3rem)}
.disc-all{display:inline-flex;align-items:center;gap:6px;min-height:44px;margin-top:6px;font-weight:700;color:var(--field)}
.talk-lede{margin-top:12px;max-width:62ch;color:var(--dim)}
.fb{margin-top:var(--s4);padding:var(--s4);background:var(--panel);border:1px solid transparent;border-radius:var(--r2)}
.proof{margin:8px 0 0;color:var(--field);font-weight:700;font-size:var(--fs-2)}
/* All discussions: the side starts a reader on people to answer (community.js drawJump), the box to start a thread comes last.
   Brought over from the Liberty Politics stylesheet on 18 October 2026, in this site's tokens and in logical sides for Persian. */
.jump{margin:0 0 var(--s4);padding-bottom:var(--s4);border-bottom:1px solid var(--line)}
.jump-h{margin:0 0 8px;font:700 var(--fs-2)/1.4 var(--body);color:var(--dim)}
html[lang="en"] .jump-h{letter-spacing:.08em;text-transform:uppercase}
.jump-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.jump-list li{padding:10px 12px;background:var(--raise);border-radius:var(--r)}
.jump-who{margin:0;font-size:var(--fs-2);color:var(--dim)}
.jump-t{margin:2px 0 8px;line-height:1.6;overflow-wrap:anywhere}
.jump-b{min-height:44px}
.jump-live{display:block;margin:0 0 12px;padding:10px 12px;border:1px solid var(--red);border-radius:var(--r);color:var(--ink);text-decoration:none}
.jump-live b{display:block;color:var(--field)}
.jump-live b::before{content:'';display:inline-block;width:8px;height:8px;margin-inline-end:8px;border-radius:50%;background:var(--red);vertical-align:middle}
.jump-live span{display:block;font-size:var(--fs-2);color:var(--dim)}
.fb:focus-within{border-color:var(--field-lo)}
.fbform{display:grid;gap:8px}
.fbform fieldset{border:0;margin:0;padding:0;min-width:0}
.fbform>label{display:block;font-weight:700}
.fbform>label#fbmsglab{font-size:1.1rem;line-height:1.5}
.fbform textarea,.reply-f textarea{width:100%;min-height:5.5rem;padding:12px 14px;font:500 1rem/1.6 var(--mix);color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:var(--r);resize:vertical;caret-color:var(--field);text-align:start}
.fbform textarea::placeholder,.reply-f textarea::placeholder{color:var(--dim)}
.fbform input[type=url]{min-height:48px;background:var(--bg)}
.fbform textarea:focus-visible,.fbform input:focus-visible,.reply-f textarea:focus-visible{border-color:var(--field)}
.fb .picks{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.fb .pick{position:relative;display:inline-flex;align-items:center;min-height:44px;padding:0 14px;background:var(--bg);border:1px solid var(--line);border-radius:999px;font-weight:600;font-size:var(--fs-4);cursor:pointer;margin:0}
.fb .pick input{position:absolute;opacity:0;inline-size:1px;block-size:1px;min-height:0;padding:0}
.fb .pick.on,.fb .pick:has(input:checked){background:var(--field);border-color:var(--field);color:var(--on-field)}
.fb .pick:focus-within{outline:3px solid var(--field);outline-offset:2px}
.fbrow{display:grid;gap:8px}
/* hidden means hidden, whatever a rule above says about display */
.fb [hidden],.talk [hidden],.sheet [hidden],.modes [hidden]{display:none!important}
/* An empty box has no letters to take its direction from, so on a Persian page it would open left to right
   and put the full stop of its own hint on the wrong side. Empty, it follows the page; with words in it,
   it follows the words (dir="auto"). */
html[dir="rtl"] textarea[dir="auto"]:placeholder-shown,html[dir="rtl"] input[dir="auto"]:placeholder-shown{direction:rtl}
.fbrow>label{margin-top:10px;font-weight:700}
.fbhint{color:var(--dim);font-size:var(--fs-4);max-width:62ch}
.fbcheck{display:inline-flex;align-items:center;gap:10px;min-height:44px;cursor:pointer}
.fbcheck input{inline-size:20px;block-size:20px;min-height:0;margin:0;padding:0;accent-color:var(--field)}
.fbabout{display:flex;align-items:center;gap:10px;padding:8px 12px;background:var(--bg);border:1px solid var(--field-lo);border-radius:var(--r);font-size:var(--fs-5);overflow-wrap:anywhere}
.fbabout[hidden]{display:none}
.fbabout-t{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;min-width:0}
.fbabout-x{flex:none;margin-inline-start:auto;min-height:44px;padding:0 6px;background:none;border:0;color:var(--dim);font:600 var(--fs-4)/1 var(--body);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.fbabout-x:hover{color:var(--ink)}
.fbsend{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-top:10px}
.fbsend .fbhint{flex:1 1 14rem}
.fbform button[disabled],.reply-f .btn[disabled]{opacity:.6;cursor:default}
.fbcount{color:var(--dim);font-size:var(--fs-4);text-align:end;font-variant-numeric:tabular-nums}
.fbcount.bad{color:var(--gd);font-weight:700}
.fbwho{color:var(--dim);font-size:var(--fs-4)}
.fbnote{min-height:1.5em;font-weight:600;color:var(--ga)}
.fbnote:empty{min-height:0}
.fbnote.bad{color:var(--gd)}
.fbnote a,.fbdone a{color:var(--field);font-weight:700;display:inline-flex;align-items:center;min-height:40px}
.fbdone{display:grid;gap:10px;justify-items:start;margin-top:4px;padding:14px 16px;background:var(--bg);border:1px solid var(--field-lo);border-radius:var(--r)}
.fbdone[hidden]{display:none}
.fbfine{margin-top:14px;color:var(--dim);font-size:var(--fs-4);max-width:62ch}
.fbfine a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink);font-weight:600}
/* the box at rest: the question, a place to type, the button. discussion.js wakes it on the first tap. */
.fb.rest fieldset,.fb.rest .fbsend .fbhint,.fb.rest .fbwho{display:none}

/* what readers say */
.talk{margin-top:24px;scroll-margin-top:84px}
.talk-ctl[hidden]{display:none}
.talk-ctl .chips{display:flex;flex-wrap:nowrap;gap:8px;overflow-x:auto;margin:0 calc(var(--gutter) * -1);padding:0 var(--gutter) 6px;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.talk-ctl .chip{flex:none;min-height:44px;padding:0 14px;font:600 var(--fs-4)/1 var(--mix);color:var(--ink);background:var(--panel);border:1px solid var(--line);border-radius:999px;cursor:pointer;white-space:nowrap}
.talk-ctl .chip[aria-pressed="true"]{background:var(--field);color:var(--on-field);border-color:var(--field)}
/* The same fault a reader reported on libertypolitics.com on 12 October 2026: on a computer the row was cut off.
   From 760px it wraps; narrower, it still slides under a thumb. */
@media(min-width:760px){
  .talk-ctl .chips{flex-wrap:wrap;overflow-x:visible}
}
.chips-gap{flex:none;inline-size:1px;margin:8px 4px;background:var(--line)}
.talk-ctl .chips + .chips{margin-top:8px}
/* All discussions, one card a discussion (community.js groupCard, 31 October 2026; the same as libertypolitics.com). */
.dg{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:12px 16px 14px;scroll-margin-top:180px}
.dg-on{border-color:var(--field)}
/* 4 November 2026 (Armin: "so confusing"): a closed card is ONE tap. Its button (.dg-p) covers the whole card, so the name,
   the count and the words all open it; the name links to its page only once the card is open (community.js groupCard). */
.dg:not(.dg-on):hover{border-color:var(--field)}
.dg:not(.dg-on) .dg-t{padding:2px 0 4px}
.dg:has(.dg-p:focus-visible){outline:2px solid var(--field);outline-offset:2px}
.dg-h{display:flex;flex-wrap:wrap;align-items:center;gap:0 12px}
.dg-t{flex:1 1 12rem;min-width:0;display:inline-block;padding:10px 0;font:700 var(--fs-3, 1.15rem)/1.4 var(--body);color:var(--ink);text-decoration:none;overflow-wrap:anywhere}
a.dg-t:hover{color:var(--field);text-decoration:underline}
.dg-x{flex:none;min-height:44px;padding:0 16px;border:1px solid var(--line);border-radius:999px;background:transparent;color:var(--ink);font:700 var(--fs-2, .95rem)/1 var(--body);cursor:pointer}
.dg-x:hover{border-color:var(--field)}
.dg-m{flex:1 0 100%;margin:0;color:var(--dim);font-size:var(--fs-2, .9rem)}
.dg-p{display:grid;gap:8px;inline-size:100%;margin-top:10px;padding:10px 0 0;text-align:start;background:none;border:0;border-top:1px solid var(--line);border-radius:0;color:var(--dim);font:inherit;line-height:1.6;cursor:pointer}
.dg-p::after{content:'';position:absolute;inset:0;border-radius:var(--r)}
.dg-p:focus-visible{outline:none}
.dg-q{overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.dg-q b{color:var(--ink);font-weight:700}
.dg-go{justify-self:end;font-weight:700;color:var(--field)}
.dg-go::after{content:' →'}
[dir="rtl"] .dg-go::after{content:' ←'}
.dg-l{margin-top:12px}
.dg-l>.vote{background:var(--bg)}
.dg-sum{margin:0 0 10px;color:var(--dim);font-weight:600}
/* All discussions' one picker, Show, beside Newest and Busiest (it took the place of ten chips, 4 November 2026). */
.talk-ctl .chips:has(.talk-show){flex-wrap:wrap;overflow-x:visible;align-items:center}
.talk-show{display:inline-flex;align-items:center;gap:8px;margin-inline-start:auto;color:var(--dim);font:600 var(--fs-2, .92rem)/1 var(--body)}
.talk-show select{min-height:44px;max-width:100%;padding:0 12px;font:600 var(--fs-2, .92rem)/1.2 var(--body);color:var(--ink);background:var(--panel);border:1px solid var(--line);border-radius:999px;cursor:pointer}
.talk-show select:hover{border-color:var(--field)}
.talk-show select option{color:var(--ink);background:var(--panel)}
.dg-more{display:flex;justify-content:center;padding:4px 0}
.votes{display:grid;gap:10px;margin:16px 0 0}
.talk-list{max-width:48rem}
.vote{background:var(--panel);border:1px solid transparent;border-radius:var(--r2);padding:var(--s4)}
.vote .meta{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center;color:var(--dim);font-size:var(--fs-4)}
.tag{display:inline-block;font-size:var(--fs-1);font-weight:700;line-height:1.5;padding:1px 6px;border:1px solid currentColor;border-radius:2px;white-space:nowrap}
.tag.ok{color:var(--ga)}
.said{scroll-margin-top:84px}
.said-head{display:flex;align-items:center;gap:10px}
.said-head .meta{flex:1;min-width:0}
.said .who{display:flex;flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:0 8px;margin-top:0;overflow-wrap:anywhere}
.said .who b{font-size:var(--fs-5);color:var(--ink);font-family:var(--mix)}
/* 16 October 2026: every name and face on a post leads to that profile, Team to the team page (community.js nameOf_, faceLink). */
.who-link{color:inherit;text-decoration:none;padding:13px 0;margin:-13px 0}.who-link:hover,.who-link:focus-visible{text-decoration:underline;text-underline-offset:3px}.av-link{display:inline-grid;place-items:center;flex:none;width:44px;height:44px;margin:-4px;border-radius:50%;text-decoration:none}.replies .av-link{margin:-8px}.tag-link{display:inline-grid;align-items:center;min-height:44px;margin:-10px 0;text-decoration:none}.tag-link:hover .tag,.tag-link:focus-visible .tag{filter:brightness(1.15);text-decoration:underline;text-underline-offset:2px}
.said-sub{white-space:nowrap}
.said .meta .tag{color:var(--dim)}
.said .meta .tag.best{color:var(--field)}
.said .meta .tag.kind-wrong,.said .meta .tag.kind-bug{color:var(--gd)}
.said .meta .tag.kind-idea,.said .meta .tag.kind-source{color:var(--field-hi)}
.said .meta .tag.host{color:var(--on-field);background:var(--field);border-color:var(--field)}
.said .meta .tag.team{color:var(--field);border-color:var(--field)}
.av{flex:none;display:grid;place-items:center;inline-size:36px;block-size:36px;border-radius:50%;overflow:hidden;background:var(--raise);color:var(--ink);font:800 1rem/1 var(--mix)}
.av img{display:block;width:100%;height:100%;object-fit:cover}
.av-0{background:oklch(.40 .07 25)}.av-1{background:oklch(.40 .06 75)}.av-2{background:oklch(.40 .06 150)}
.av-3{background:oklch(.40 .06 205)}.av-4{background:oklch(.40 .07 265)}.av-5{background:oklch(.40 .07 325)}
.av-host{background:var(--bg);border:2px solid var(--field)}
/* Someone on the team: the reader's own letter inside a ring, and the tag in outline. The site itself is the filled one. */
.av-team{box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--field)}
.said blockquote{margin:12px 0 0;padding:0;border:0;background:none;max-width:66ch;font:400 1.05rem/1.7 var(--mix);text-align:start;overflow-wrap:anywhere;white-space:pre-line}
.said .at{font-weight:700;color:var(--field)}
.said-on,.said-link{display:inline-flex;align-items:center;min-height:44px;font-weight:700;color:var(--field);overflow-wrap:anywhere}
.said-link{font-weight:600;margin-top:4px}
.said.own{border-style:dashed;border-color:var(--field-lo)}
.vote .said-about{margin-top:8px;font-size:var(--fs-4);color:var(--dim);overflow-wrap:anywhere}
.vote .said-note{margin-top:12px;font-size:var(--fs-5);font-weight:600}
.vote .said-msg{margin-top:8px;font-size:var(--fs-4);font-weight:600;color:var(--dim)}
.vote .said-msg.bad{color:var(--gd)}
/* translate a post written in the other language */
.tr{display:flex;flex-wrap:wrap;align-items:center;gap:0 10px;margin-top:2px}
.tr-b{display:inline-flex;align-items:center;min-height:44px;font:700 var(--fs-4)/1 var(--mix);color:var(--field);text-decoration:underline;text-underline-offset:3px}
.tr-msg{color:var(--dim);font-size:var(--fs-4)}
.tr-msg:empty{display:none}
/* like, unlike, reply, report */
.said-bar{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:12px}
.vt{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-width:56px;min-height:44px;padding:0 12px;background:var(--bg);border:1px solid var(--line);border-radius:999px;color:var(--ink);font:600 var(--fs-4)/1 var(--body);cursor:pointer}
.vt svg{flex:none}
.vt b{font-weight:700;font-variant-numeric:tabular-nums lining-nums;min-inline-size:1ch;text-align:end}
.vt:hover{border-color:var(--dim)}
.vt-up[aria-pressed="true"]{background:var(--ga);border-color:var(--ga);color:var(--on-grade)}
.vt-down[aria-pressed="true"]{background:var(--gf);border-color:var(--gf);color:var(--on-grade)}
.vt[disabled]{color:var(--dim);cursor:default;opacity:.6}
.vt[disabled]:hover{border-color:var(--line)}
.said-acts{display:flex;align-items:center;flex:1 1 auto;gap:4px}
.said-acts .rp,.said-acts .del-b{margin-inline-start:auto}
@media(max-width:520px){.vt>span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}}
.reply-b,.said-go{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;background:none;border:0;border-radius:999px;color:var(--ink);font:700 var(--fs-4)/1 var(--body);cursor:pointer;text-decoration:none}
.reply-b:hover,.said-go:hover{background:var(--raise)}
.reply-b[aria-expanded="true"]{color:var(--field)}
.rp{position:relative}
.rp-b,.del-b{min-height:44px;padding:0 6px;background:none;border:0;color:var(--dim);font:600 var(--fs-4)/1 var(--body);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.rp-b:hover,.rp-b[aria-expanded="true"],.del-b:hover{color:var(--ink)}
.del-b.armed{color:var(--gf);font-weight:700}
.del-b[disabled]{cursor:default;text-decoration:none}
.rp-m{position:absolute;inset-inline-end:0;top:calc(100% + 2px);z-index:12;display:grid;width:max-content;min-width:13rem;max-width:calc(100vw - 64px);padding:4px;background:var(--raise);border:1px solid var(--line);border-radius:var(--r);box-shadow:0 14px 30px -10px rgba(0,0,0,.75)}
.rp-m[hidden]{display:none}
.rp-m button{min-height:46px;padding:0 12px;text-align:start;background:none;border:0;border-radius:2px;color:var(--ink);font:600 var(--fs-5)/1.4 var(--body);cursor:pointer}
.rp-m button:hover,.rp-m button:focus-visible{background:var(--panel)}
.rp-team{margin:0;padding:8px 12px;max-width:17rem;border-top:1px solid var(--line);color:var(--field);font:600 var(--fs-2)/1.4 var(--body)}
.rp-done{display:inline-flex;align-items:center;min-height:44px;color:var(--dim);font-size:var(--fs-4);font-weight:600}
/* the thread: one thin line down the side, replies as rows on it */
.replies{margin:14px 0 0;padding-inline-start:14px;border-inline-start:1px solid var(--line);display:grid;gap:14px}
.replies .vote{padding:0;background:none;border:0;border-radius:0}
.replies .said.own{padding:10px 12px;border:1px dashed var(--field-lo);border-radius:var(--r)}
.replies .av{inline-size:28px;block-size:28px;font-size:var(--fs-2)}
.replies .said blockquote{margin-top:8px;font-size:1rem}
.replies .said-bar{margin-top:6px}
.replies .vt{min-width:52px;background:none}
/* a reply to the signed-in reader that they have not seen yet: its own colour inside the thread (community.js ryHere) */
.said.ry-new,.replies .said.ry-new{padding:10px 12px;background:rgba(217,180,90,.13);background:color-mix(in srgb,var(--field) 14%,transparent);border:0;border-inline-start:3px solid var(--field);border-radius:var(--r)}
.said .meta .tag.new{color:var(--on-field);background:var(--field-hi);border-color:var(--field-hi)}
.thread-more{display:inline-flex;align-items:center;min-height:44px;margin-block:6px 0;margin-inline:14px 0;padding:0;background:none;border:0;color:var(--field);font:700 var(--fs-4)/1 var(--body);cursor:pointer}
.thread-more:hover{text-decoration:underline;text-underline-offset:3px}
.reply-f{display:grid;gap:10px;margin-top:10px}
.reply-f .btn{min-height:44px;padding:0 16px}
/* waiting, nothing yet, could not load: the same box, so the page does not jump between them */
.vote.sk{min-height:92px}
.vote.sk::before,.vote.sk::after{content:"";display:block;block-size:12px;border-radius:2px;background:var(--raise)}
.vote.sk::before{inline-size:36%}
.vote.sk::after{inline-size:84%;margin-top:16px;box-shadow:0 24px 0 var(--raise)}
.talk-state{display:grid;gap:12px;align-content:center;justify-items:start;min-height:160px;padding:20px 16px;border:1px dashed var(--line);border-radius:var(--r)}
.talk-state p{max-width:44ch;font-weight:600;font-size:1.05rem}
/* a video a reader shared: a plain link until it is tapped */
.tv{margin-top:12px;background:var(--sunk);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.tv-play{position:relative;display:grid;align-content:end;min-height:190px;text-decoration:none;color:var(--ink)}
.tv-youtube .tv-play{aspect-ratio:16/9;min-height:0}
.tv-play img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55}
.tv-go{position:absolute;left:50%;top:42%;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;background:var(--field);box-shadow:0 6px 18px -4px rgba(0,0,0,.7)}
.tv-go::after{content:"";position:absolute;left:25px;top:19px;border-style:solid;border-width:13px 0 13px 21px;border-color:transparent transparent transparent var(--on-field)}
.tv-what{position:relative;display:grid;gap:2px;padding:44px 14px 12px;background:linear-gradient(transparent,rgba(12,12,9,.94) 55%)}
.tv-what b{font-weight:700;overflow-wrap:anywhere}
.tv-what span{color:var(--dim);font-size:var(--fs-4)}
.tv-play:hover .tv-go{background:var(--field-hi)}
.tv iframe{display:block;width:100%;border:0;background:var(--sunk)}
.tv-youtube iframe{aspect-ratio:16/9}
.tv-x iframe{height:560px}
.tv-instagram iframe{height:640px}
/* Same as ../../site/build/site.css: a light frame on a dark page is painted solid white, so an X post
   sat in a white slab with a scrollbar (Armin, 14 Oct 2026). Matching the scheme makes it see-through. */
.tv-x iframe,.tv-instagram iframe{color-scheme:light;background:transparent}
.tv-x.on,.tv-instagram.on{max-width:550px;background:none;border:0}

/* the panel: create an account, sign in, check your email, your account. A real dialog: at the bottom of a
   phone screen, in the middle of a computer screen. */
.sheet{width:100%;max-width:100%;max-height:100%;margin:auto 0 0;padding:0;border:0;background:transparent;color:var(--ink);overflow:visible}
.sheet::backdrop{background:rgba(6,6,4,.78)}
.sheet-in{display:flex;flex-direction:column;max-height:92vh;max-height:92dvh;background:var(--panel);border:1px solid var(--line);border-radius:8px 8px 0 0;box-shadow:0 -18px 44px -12px rgba(0,0,0,.8)}
.sheet-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-block:6px;padding-inline:16px 6px;background:var(--sunk);border-bottom:1px solid var(--line);border-radius:8px 8px 0 0}
.sheet-top h2{font-size:1.8rem;color:var(--field)}
.sheet-top h2:focus{outline:0}
.sheet-x{display:inline-flex;align-items:center;justify-content:center;inline-size:48px;block-size:48px;flex:none;background:none;border:0;border-radius:var(--r);color:var(--ink);cursor:pointer}
.sheet-x:hover{background:var(--raise)}
.sheet-body{display:grid;gap:14px;align-content:start;padding:16px 16px 24px;overflow-y:auto;overscroll-behavior:contain}
@media(min-width:640px){.sheet{width:min(30rem,calc(100% - 32px));margin:auto}.sheet-in{max-height:min(52rem,94vh);border-radius:8px;box-shadow:0 30px 70px -20px rgba(0,0,0,.9)}.sheet-top{border-radius:8px 8px 0 0}.sheet-body{padding:20px 20px 24px}}
.gbtn{width:100%;min-height:52px;gap:12px;background:#fff;border-color:#fff;color:#1F1F1F;font-size:1.05rem}
.gbtn:hover{background:#F1F1EC;border-color:#F1F1EC}
.gbtn svg{flex:none}
.sheet-or{display:flex;align-items:center;gap:12px;color:var(--dim);font-size:var(--fs-4);font-weight:600}
.sheet-or::before,.sheet-or::after{content:"";flex:1;block-size:1px;background:var(--line)}
.sheet-why{padding:10px 12px;background:var(--bg);border:1px solid var(--field-lo);border-radius:var(--r);font-weight:600}
.sheet-lead{font-size:1.1rem;line-height:1.6;font-weight:600}
.sheet-lead b{color:var(--field);overflow-wrap:anywhere}
.sheet-hint{color:var(--dim);font-size:var(--fs-4)}
.sheet-hint.safety{padding:10px 12px;border:1px solid var(--field-lo);border-radius:var(--r);background:var(--bg);color:var(--ink)}
.sheet-form{display:grid;gap:14px}
.sheet-f{display:grid;gap:6px}
.sheet-f label{font-weight:700}
.sheet input[type=text],.sheet input[type=email],.sheet input[type=password],.sheet input[type=url]{display:block;width:100%;min-height:52px;padding:0 14px;font:500 1rem/1.5 var(--mix);color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:var(--r);caret-color:var(--field)}
.sheet input:focus-visible{border-color:var(--field)}
.pw{position:relative}
.sheet .pw input{padding-inline-end:78px}
.pw-eye{position:absolute;inset-inline-end:3px;top:3px;bottom:3px;min-inline-size:66px;background:var(--raise);border:0;border-radius:2px;color:var(--ink);font:700 var(--fs-4)/1 var(--body);cursor:pointer}
html[dir="rtl"] .sheet .pw input{padding-inline:78px 14px}
html[dir="rtl"] .pw-eye{inset-inline:auto 3px}
.pw-eye:hover{background:var(--line)}
.seg{display:grid;grid-template-columns:1fr 1fr;padding:3px;gap:3px;background:var(--bg);border:1px solid var(--line);border-radius:var(--r)}
.seg button{min-height:46px;background:none;border:0;border-radius:2px;color:var(--dim);font:700 var(--fs-5)/1.2 var(--body);cursor:pointer}
.seg button:hover{color:var(--ink)}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--sunk)}
.sheet-check{display:flex;align-items:center;gap:12px;min-height:44px;font-weight:600;cursor:pointer}
.sheet-check input{inline-size:22px;block-size:22px;min-height:0;flex:none;margin:0;padding:0;accent-color:var(--field)}
.sw input{appearance:none;-webkit-appearance:none;position:relative;inline-size:48px;block-size:28px;border-radius:999px;background:var(--line);border:0;cursor:pointer}
.sw input::after{content:"";position:absolute;inset-inline-start:3px;top:3px;inline-size:22px;block-size:22px;border-radius:50%;background:var(--ink)}
.sw input:checked{background:var(--field)}
.sw input:checked::after{transform:translateX(20px);background:var(--on-field)}
html[dir="rtl"] .sw input:checked::after{transform:translateX(-20px)}
.sheet-msg{font-weight:600;color:var(--ga)}
.sheet-msg:empty{display:none}
.sheet-msg.bad{color:var(--gd)}
.sheet-go{width:100%;min-height:52px;font-size:1.05rem}
.sheet .btn[disabled],.mod-list .btn[disabled]{opacity:.6;cursor:default}
.sheet-acts{display:grid;gap:10px}
.sheet-text{display:flex;align-items:center;justify-self:start;min-height:44px;padding:0;background:none;border:0;color:var(--ink);font:600 var(--fs-5)/1.4 var(--body);text-align:start;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.sheet-text:hover{color:var(--field)}
.sheet-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;min-height:44px}
.sheet-k{font-weight:700}
.sheet-v{color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sheet-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 18px;margin-top:8px;padding-top:16px;border-top:1px solid var(--line)}
.danger{color:var(--gf)}
.armed,.btn.armed:hover{padding:0 14px;background:var(--gf);border-color:var(--gf);border-radius:var(--r);color:var(--on-grade);text-decoration:none}
.news-hint{margin-top:-4px}
@media(prefers-reduced-motion:no-preference){.sheet[open] .sheet-in{animation:sheet-up .24s cubic-bezier(.16,1,.3,1)}}
@keyframes sheet-up{from{transform:translateY(18px)}}
@media(prefers-reduced-motion:reduce){.modes-sw::before{transition:none!important}}

/* mod/: for the people who run the site */
.talk-h1{font-size:clamp(2.2rem,8vw,3.4rem);color:var(--field)}
.mod-h{font-size:1.8rem;margin-top:36px}
.mod-hold{margin-top:20px}
.mod-mail{overflow-wrap:anywhere}
.mod-list{max-width:48rem}
.mod-list .row{margin-top:12px}
.mod-list .talk-state{min-height:0}
.mod-csv{display:block;width:100%;max-width:48rem;margin-top:12px;font:500 var(--fs-4)/1.5 ui-monospace,Consolas,monospace}

/* ---- 6 October 2026: the front page draws the result, the header is the Liberty Politics header, and the
   Persian pages speak in the body face at its heaviest. Armin: "It's not intuitive, it's not interesting, it
   doesn't look clean ... The entire Iran Uncensored website just sucks ... significantly improve the entire
   thing." ---- */
/* the header: YouTube as its own mark, the other language as two letters on a narrow phone */
.top nav a.yt{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;min-width:42px;padding:0 6px;font-weight:700;white-space:nowrap}
.top nav a.yt span{display:none}
@media(min-width:1000px){.top nav a.yt span{display:inline}}
.yt-i{flex:none;display:block}
.l-short{display:none}
@media(max-width:459px){.l-long{display:none}.l-short{display:inline}.top nav a.lang{min-width:42px;justify-content:center;padding:0 8px}.top nav a.join,.top nav a.acct{padding:0 10px}.top .wrap{gap:6px}.mark{gap:8px}.mark img{width:36px;height:36px}.mark span{font-size:1.05rem}}
/* the head of the front page: the question, the search, and the whole Congress in one strip */
.hero h1 i{display:block}
.hero .find{margin-top:20px}
.dist{margin-top:20px}
.dist-bar{display:flex;gap:2px;block-size:14px;margin-top:10px;border-radius:7px;overflow:hidden}
.dist-bar i{display:block;min-inline-size:4px}
.dist-doors{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-top:8px}
.dist-d{display:flex;flex-direction:column;align-items:center;gap:6px;min-height:44px;padding:8px 0 10px;background:var(--panel);border:1px solid transparent;border-radius:var(--r);text-decoration:none}
.dist-d:hover{border-color:var(--field);background:var(--raise)}
.dist-d .rng{display:block;inline-size:calc(100% - 6px);padding:5px 0;border-radius:var(--r);color:var(--on-grade);font:800 var(--fs-1)/1.2 var(--body);text-align:center;white-space:nowrap}
.dist-d small{color:var(--dim);font-size:var(--fs-1);line-height:1}
.dist-d b{font:800 1.05rem/1 var(--body)}
.dist-n{margin-top:10px;color:var(--dim);font-size:var(--fs-4)}
/* what I found: a sentence with its number in it, and the share of the Congress it is, drawn. The whole
   sentence is the link to the members it counts (13 October 2026). */
.finds{display:grid;gap:var(--s4)}
@media(min-width:820px){.finds{grid-template-columns:1fr 1fr;gap:var(--s7)}}
.find-a{display:block;padding-block:var(--s1);text-decoration:none}
.find-t{font-size:1.1rem;line-height:1.45;font-weight:600;max-width:34ch}
html[lang="fa"] .find-t{line-height:1.8}
.find-t b{color:var(--field);font-size:1.45em;font-weight:900;line-height:1}
.find-a:hover .find-t{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.meter{display:flex;gap:2px;block-size:8px;margin-top:var(--s2);background:var(--raise);border-radius:4px;overflow:hidden}
.meter i{display:block}
.m-bad{background:var(--gf)}.m-good{background:var(--ga)}
/* one invitation that follows the reader down the page once the discussion is on: the way to the community */
/* 12 October 2026: the bubble says WHEN the show is on (data/whats-on.json, the Liberty Politics site's build/whatson.py).
   One row for the show and one for Discord, each its own link, so it is a small rounded card and no longer a pill.
   A row whose thing is on NOW carries the red dot; the others a quiet ring. Still one bubble, and the cross puts it away. */
.calls{position:fixed;inset-inline-end:10px;bottom:10px;z-index:15;display:flex;align-items:flex-start;max-width:min(calc(100vw - 20px),21rem);background:var(--sunk);color:var(--ink);border:2px solid var(--field);border-radius:14px;box-shadow:0 10px 30px -8px rgba(0,0,0,.65)}
.calls-rows{display:grid;min-width:0;flex:1}
.calls-a{display:flex;align-items:center;gap:10px;min-height:44px;padding-block:4px;padding-inline:12px 2px;color:inherit;text-decoration:none}
.calls-a + .calls-a{border-top:1px solid var(--line)}
.calls-a i{flex:none;inline-size:10px;block-size:10px;border-radius:50%;border:2px solid var(--dim)}
.calls-a.live i{border:0;background:var(--red);box-shadow:0 0 0 4px rgba(218,0,0,.25)}
.calls-a b{display:block;font:800 var(--fs-5)/1.3 var(--body);color:var(--field)}
.calls-a small{display:block;font:600 var(--fs-2)/1.4 var(--body);color:var(--dim)}
.calls-x{flex:none;inline-size:40px;block-size:44px;border:0;background:transparent;color:inherit;font:700 1.4rem/1 var(--body);cursor:pointer;border-start-end-radius:12px}
footer .on-when{display:block;margin-block:2px 8px;font-size:var(--fs-3);color:var(--dim)}
.calls-x:hover,.calls-a:hover b{text-decoration:underline}
.calls.off{display:none}
/* While it would sit on the button that sends a post, it steps aside (build/whatson.js, duck). It keeps its place, so nothing moves. */
.calls.duck{visibility:hidden}
body:has(textarea:focus) .calls,body:has(input:focus) .calls,body:has(.sheet[open]) .calls{display:none}
html.modes-on footer{padding-bottom:96px}
@media print{.calls,.fab,.modes{display:none}}
/* the door: the campaign's own stills, its name, one line */
.door{display:grid;overflow:hidden;background:var(--panel);border:1px solid transparent;border-radius:var(--r2);text-decoration:none}
.door:hover{border-color:var(--field)}
.door .strip{display:grid;grid-template-columns:repeat(5,1fr);gap:2px}
.door .strip img{inline-size:100%;block-size:auto;aspect-ratio:3/4;object-fit:cover}
.door-b{display:grid;gap:var(--s1);padding:var(--s3) var(--s4) var(--s4)}
.door h2{font-size:clamp(1.9rem,7.4vw,2.8rem);color:var(--field)}
html[lang="fa"] .door h2{font-size:clamp(1.5rem,6.4vw,2.3rem)}
.door .txt{color:var(--dim)}
@media(min-width:820px){.door{grid-template-columns:minmax(0,24rem) 1fr;align-items:center}.door-b{padding:var(--s5)}}
.more{display:flex;flex-wrap:wrap;align-items:center;gap:10px 20px}
.more a:not(.btn){display:inline-flex;align-items:center;min-height:44px}

/* ---- 12 October 2026: how to vote (build/vote.py). Plain text and plain links: a date is a fact in the sentence, and
   the chip beside it (the Liberty Politics site's build/vote.js) is the only thing here that knows what day it is. ---- */
.vg h2{margin-top:var(--s6)}
.vg-list{display:grid;gap:10px;margin-top:12px}
.vg-list li{padding-inline-start:var(--s3);border-inline-start:1px solid var(--line)}
.vg time{font-weight:700;color:var(--ink)}
.vg-chip{display:inline-block;padding:1px 8px;border:1px solid var(--field-lo);border-radius:999px;font-size:var(--fs-2);font-weight:700;line-height:1.6;color:var(--field);white-space:nowrap}
.vg-chip.gone{color:var(--dim);border-color:var(--line)}
.vg-chip.now{background:var(--field);border-color:var(--field);color:var(--on-field)}
.vg-open{padding:var(--s3) var(--s4);background:var(--panel);border-radius:var(--r2);font-weight:600}
.vg .src a{overflow-wrap:anywhere}
.vg-rule{font-size:var(--fs-4);color:var(--dim)}
.vg-en{font-size:var(--fs-4);color:var(--dim)}
/* English inside a Persian paragraph (the state's own words, the rule a date was counted from) stands as a block of its own,
   left to right. Set inline it is broken over the lines of a right to left paragraph and read out of order. */
html[lang="fa"] .vg-en span[lang="en"],html[lang="fa"] .vg-rule span[lang="en"]{display:block;direction:ltr;text-align:left;unicode-bidi:isolate;margin-top:4px}
.vg-states{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px;margin-top:12px}
.prose .vg-states a,.vg-states a{display:flex;align-items:center;min-height:44px;font-weight:600;color:var(--ink)}
@media(min-width:720px){.vg-states{grid-template-columns:repeat(4,minmax(0,1fr))}}
.vg-offer{margin-block:14px;max-width:60ch}

/* ---- 14 October 2026: the Missions page (missions/). The markup is the one the Liberty Politics site prints, because
   the same script runs both (../../site/build/quests.js, the contract at its top); these are this site's own styles
   for it: its tokens, every side written as inline-start / inline-end so the Persian page mirrors by itself, and the
   gold where it already is: the headline, the buttons (a chip that is on, "Open mission", Start) and the links. The
   rank's bar, its drawing and the chain's dots are bone white, not gold. A mission is a ROW on a hairline, not a box:
   it becomes a panel only while it is open.
   Nothing here is hidden and then animated in: a part only the script can run (.q-js) is simply not drawn until
   the page's own line has said scripts are on (q-js-on on <html>, set before the chooser is printed). ---- */
.q-js{display:none}
html.q-js-on .q-js:not([hidden]){display:block}
html.q-js-on p.q-chain:not([hidden]){display:flex}
.q-head .wrap,.field.q-head .wrap{padding-top:var(--s5);padding-bottom:var(--s3)}
.q-head .lede{max-width:46ch;margin-top:var(--s2);font-size:1rem;font-weight:500;line-height:1.5;color:var(--dim)}
html[lang="fa"] .q-head .lede{line-height:1.8}
/* the chooser: who first (it decides what is safe to show), then, folded, how much time and what you can do */
.q-pick{display:grid;gap:var(--s3);max-width:46rem}
.q-head .q-pick{margin-top:var(--s4)}
.q-row{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.q-lab{font-weight:700;color:var(--dim);font-size:var(--fs-4);margin-inline-end:2px}
.q-chip{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:0 12px;border:1px solid var(--line);border-radius:999px;background:transparent;color:var(--ink);font:600 var(--fs-4)/1.2 var(--body);text-decoration:none;cursor:pointer;white-space:nowrap}
.q-chip:hover{border-color:var(--field)}
.q-chip[aria-pressed="true"]{background:var(--field);border-color:var(--field);color:var(--on-field)}
.q-chip-in{border-color:var(--dim)}
@media(prefers-reduced-motion:no-preference){.q-chip,.q-m,.way{transition:background-color .15s,border-color .15s,color .15s}}
.q-more{margin-top:var(--s4);max-width:46rem}
.q-more>summary{display:inline-flex;align-items:center;gap:var(--s2);min-height:44px;color:var(--dim);font-weight:600;font-size:var(--fs-4);cursor:pointer;list-style:none}
.q-more>summary::-webkit-details-marker{display:none}
.q-more>summary::after{content:"";width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);margin-top:-4px}
.q-more[open]>summary::after{transform:rotate(225deg);margin-top:4px}
.q-more .q-pick{padding-bottom:var(--s2)}
/* the rank: its drawing, its name, the bar. One of the six drawings is shown: the one #q-rank names (site.js keeps
   data-rank in step with the name quests.js writes; with scripts off it is the first). */
.q-rank{margin-top:var(--s5);max-width:30rem;display:grid;grid-template-columns:52px minmax(0,1fr);gap:var(--s3);align-items:center}
.q-rank-m{display:grid;place-items:center;inline-size:52px;block-size:52px;color:var(--ink)}
.q-rank-m .rk{display:none;inline-size:48px;block-size:48px}
#q-rank[data-rank="0"] .rk-0,#q-rank[data-rank="1"] .rk-1,#q-rank[data-rank="2"] .rk-2,#q-rank[data-rank="3"] .rk-3,#q-rank[data-rank="4"] .rk-4,#q-rank[data-rank="5"] .rk-5{display:block}
.q-rank-b{display:grid;grid-template-columns:1fr auto;gap:2px var(--s3);align-items:baseline}
.q-rank-l{grid-column:1;display:flex;align-items:baseline;gap:var(--s3)}
.q-rank-l b{font:800 1.5rem/1 var(--display);letter-spacing:.02em}
html[lang="en"] .q-rank-l b{text-transform:uppercase}
html[lang="fa"] .q-rank-l b{font-size:1.25rem;font-weight:900;line-height:1.4;letter-spacing:0}
.q-rank-l span{font-weight:700}
.q-rank-n{grid-column:2;grid-row:1;color:var(--dim);font-size:var(--fs-4);text-align:end}
.q-rank-s{display:none;grid-column:1/-1;color:var(--dim);font-size:var(--fs-4);line-height:1.45}
@media(min-width:560px){.q-rank-s{display:block}}
/* the bar is a block, so it starts at the side the page starts on: from the right on a Persian page */
.q-bar{grid-column:1/-1;block-size:6px;margin-top:6px;border-radius:999px;background:var(--raise);overflow:hidden}
.q-bar i{display:block;block-size:100%;inline-size:0;min-inline-size:6px;border-radius:999px;background:var(--ink);transition:width .5s cubic-bezier(.16,1,.3,1)}
/* a reader inside Iran: the safety card. Drawn with scripts off (nobody can choose then), and with scripts on
   only once "Inside Iran" is the chip that is on: site.js marks the page (q-inside), and a browser that knows
   :has() needs no script for it. Two rules, not one list: a browser that does not know :has() drops the whole
   rule it is in. The rank and the ranks are put away for that reader: nothing here earns XP inside Iran. */
.q-safe{padding-top:var(--s4)}
.q-safe-b{max-width:46rem;padding:var(--s4);background:var(--panel);border-radius:var(--r2)}
.q-safe h2{display:flex;align-items:center;gap:var(--s2);font-size:1.4rem}
.q-safe h2 svg{flex:none}
html[lang="fa"] .q-safe h2{font-size:1.15rem}
.q-safe ul{display:grid;gap:var(--s3);margin-top:var(--s3)}
.q-safe li{line-height:1.5;max-width:62ch}
html[lang="fa"] .q-safe li{line-height:1.8}
.q-safe p{margin-top:var(--s2)}
html.q-js-on .q-safe{display:none}
html.q-js-on.q-inside .q-safe{display:block}
html.q-js-on:has([data-q-chip="who:inside"][aria-pressed="true"]) .q-safe{display:block}
html.q-inside #q-rank,html.q-inside #ranks,html.q-inside .q-more{display:none}
html:has([data-q-chip="who:inside"][aria-pressed="true"]) :is(#q-rank,#ranks,.q-more){display:none}
/* the reader's own mission: ONE, big */
.q-yours{padding:var(--s3) 0 var(--s6)}
.q-empty .q-best{display:none}
.q-yours h2,.q-mine h2,.q-top h2,.q-read-h{font-size:var(--h3)}
.q-yours h2{color:var(--dim)}
.q-best{margin-top:var(--s3);max-width:46rem;display:grid;gap:var(--s2)}
/* the three acts */
.q-board{padding-top:0}
.q-act-blk{padding-top:var(--s7)}
.q-act-h{display:grid;grid-template-columns:48px minmax(0,1fr);gap:var(--s4);align-items:start;max-width:46rem}
.act-n{font:900 3.4rem/.8 "Big Shoulders Display","Arial Narrow",sans-serif;color:var(--dim);text-align:center}
html[lang="fa"] .act-n{font:900 2.6rem/1 "Vazirmatn",Tahoma,sans-serif}
.act-n-in{display:grid;place-items:center;block-size:44px;color:var(--ink)}
.act-n-in svg{inline-size:32px;block-size:32px}
.q-act-h h2 + p{margin-top:var(--s2);color:var(--dim);max-width:52ch}
.q-act-links{display:flex;flex-wrap:wrap;gap:0 var(--s5);margin-top:var(--s1)}
.q-sub{margin-top:var(--s6)}
.q-sub h3 + p{margin-top:var(--s1);color:var(--dim)}
.q-chain{align-items:center;gap:var(--s3);margin-top:var(--s3);color:var(--dim);font-weight:700;font-size:var(--fs-4)}
/* a row of dots runs the way the page reads, so on a Persian page the first stage is on the right */
.q-dots{display:flex;gap:5px}
.q-dots i{display:block;inline-size:22px;block-size:6px;border-radius:999px;background:var(--raise)}
.q-dots i.now{background:var(--dim)}
.q-dots i.on{background:var(--ink)}
.q-list{display:grid;margin-top:var(--s4);max-width:46rem;border-top:1px solid var(--line)}
.q-list>li{border-bottom:1px solid var(--line)}
@media(min-width:1000px){
  .q-act-blk .q-list{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--s7);max-width:none;align-items:start}
}
/* one mission: closed, a row; open, what to do */
.q-m{border-radius:var(--r2)}
.q-m[open]{background:var(--panel);margin-block:var(--s2)}
.q-m summary{display:grid;grid-template-columns:40px minmax(0,1fr) 16px;gap:var(--s3);align-items:center;min-height:64px;padding:var(--s3) var(--s1);cursor:pointer;list-style:none;border-radius:var(--r2)}
.q-m[open] summary{padding-inline:var(--s4)}
.q-m summary:hover .q-title{color:var(--field)}
.q-m summary::-webkit-details-marker{display:none}
/* the mark that says a card opens: two sides of a square, turned. Written with right and bottom on purpose: it points down in both directions of reading */
.q-m summary::after{content:"";width:9px;height:9px;border-right:2px solid var(--dim);border-bottom:2px solid var(--dim);transform:rotate(45deg);justify-self:center;margin-top:-4px}
.q-m[open] summary::after{transform:rotate(225deg);margin-top:4px}
.q-ic{position:relative;display:grid;place-items:center;inline-size:40px;block-size:40px;color:var(--ink)}
.q-stage{position:absolute;inset-inline-end:-4px;bottom:-4px;display:grid;place-items:center;min-inline-size:18px;block-size:18px;padding:0 4px;border-radius:999px;background:var(--bg);border:1px solid var(--line);color:var(--ink);font:800 var(--fs-1)/1 var(--body);font-style:normal}
.q-t{display:grid;gap:2px;min-width:0}
.q-title{font-weight:700;font-size:1.0625rem;line-height:1.3}
html[lang="fa"] .q-title{line-height:1.6}
.q-meta{display:flex;flex-wrap:wrap;align-items:center;gap:2px var(--s3);color:var(--dim);font-size:var(--fs-4);font-weight:600}
.q-xp{color:var(--ink);font-weight:800}
.q-out{padding:1px 8px;border:1px solid var(--line);border-radius:999px;font-size:var(--fs-1);color:var(--ink);white-space:nowrap}
.q-until{color:var(--gd)}
.q-state{justify-self:start;padding:3px 9px;border-radius:999px;background:var(--raise);font-size:var(--fs-2);font-weight:700;color:var(--ink)}
.q-state.q-s-accepted{color:var(--ga)}
.q-state.q-s-back{color:var(--gd)}
.q-hook-s{color:var(--dim);font-size:var(--fs-5);line-height:1.45}
html[lang="fa"] .q-hook-s{line-height:1.75}
.q-body{padding:0 var(--s4) var(--s4);display:grid;gap:var(--s3)}
.q-hook{font-size:var(--lede);line-height:1.45;font-weight:600;max-width:58ch}
html[lang="fa"] .q-hook{line-height:1.8}
.q-only{color:var(--dim);font-size:var(--fs-4);font-weight:700}
.q-why{max-width:62ch;color:var(--dim);line-height:1.55}
html[lang="fa"] .q-why{line-height:1.85}
.q-proof b{color:var(--ink)}
.q-why .src a{color:var(--field)}
.q-steps{counter-reset:qs;display:grid;gap:var(--s3);max-width:62ch}
.q-steps li{counter-increment:qs;display:grid;grid-template-columns:28px minmax(0,1fr);gap:var(--s3);line-height:1.5;overflow-wrap:anywhere}
html[lang="fa"] .q-steps li{line-height:1.8}
.q-steps li::before{content:counter(qs);display:grid;place-items:center;inline-size:28px;block-size:28px;border-radius:50%;background:var(--raise);color:var(--ink);font:800 var(--fs-3)/1 var(--body);font-variant-numeric:tabular-nums}
html[lang="fa"] .q-steps li::before{content:counter(qs,persian)}
/* the rules of a gathering, inside its card: the same lines the safety page gives the reasons for */
.q-rules{max-width:62ch;padding:var(--s3) var(--s4);border:1px solid var(--line);border-radius:var(--r2)}
.q-rules-h{font-weight:700}
.q-rules ul,.g-lines{display:grid;gap:var(--s2);margin-top:var(--s2)}
.q-rules li,.g-lines li{position:relative;padding-inline-start:18px;line-height:1.5;color:var(--dim)}
html[lang="fa"] :is(.q-rules li,.g-lines li){line-height:1.8}
.q-rules li::before,.g-lines li::before{content:"";position:absolute;inset-inline-start:2px;top:.62em;inline-size:6px;block-size:6px;border-radius:50%;background:var(--dim)}
.g-lines li{color:var(--ink)}
.q-proof{max-width:62ch;line-height:1.5}
html[lang="fa"] .q-proof{line-height:1.8}
.q-never{max-width:62ch;color:var(--gd);font-weight:600;font-size:var(--fs-5)}
.q-links{display:grid}
.q-links a,.q-guides a{display:inline-flex;align-items:center;min-height:44px;color:var(--field);font-weight:700;line-height:1.35}
.q-act{display:grid;gap:var(--s3)}
.q-btns{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center}
.q-text{min-height:44px;padding:0 6px;background:none;border:0;color:var(--dim);font:600 var(--fs-5)/1.2 var(--body);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.q-text:hover{color:var(--ink)}
.q-say{font-weight:600;color:var(--ink);max-width:60ch;overflow-wrap:anywhere}
.q-say:empty{display:none}
.q-say.bad{color:var(--gd)}
.q-ns{color:var(--dim);font-size:var(--fs-4)}
/* the report: what you did, and the link when the mission asks for one */
.q-form{display:grid;gap:var(--s2);max-width:44rem;padding:var(--s4);background:var(--bg);border-radius:var(--r2)}
.q-form label{font-weight:700}
.q-form textarea,.q-form input{background:var(--panel);font-family:var(--mix);text-align:start}
.q-form textarea{min-height:7rem}
.q-form input[type=url]{direction:ltr}
.q-form textarea:focus,.q-form input:focus{border-color:var(--field)}
.q-form textarea::placeholder,.q-form input::placeholder{color:var(--dim)}
.q-form button[disabled]{opacity:.6;cursor:default}
.q-hint{color:var(--dim);font-size:var(--fs-4);max-width:60ch}
/* the reader's own mission, big: the script copies the card and marks the copy. It is the one box on the page. */
.q-big{background:var(--panel)}
.q-big summary{grid-template-columns:48px minmax(0,1fr) 16px;padding:var(--s4);align-items:start}
.q-big .q-ic{inline-size:48px;block-size:48px}
.q-big .q-ic svg{inline-size:32px;block-size:32px}
.q-big .q-title{font:800 1.75rem/1.02 var(--display);letter-spacing:.01em}
html[lang="en"] .q-big .q-title{text-transform:uppercase}
html[lang="fa"] .q-big .q-title{font-size:1.35rem;font-weight:900;line-height:1.45;letter-spacing:0}
.q-big .q-body .q-hook,.q-small .q-body .q-hook,.q-small .q-hook-s{display:none}
.q-big .q-meta{margin-top:2px}
.q-big summary::before{content:attr(data-q-go);grid-column:2;grid-row:2;justify-self:start;display:inline-flex;align-items:center;min-height:44px;margin-top:var(--s2);padding:0 18px;border-radius:var(--r);background:var(--field);color:var(--on-field);font-weight:700}
.q-big[open] summary::before{display:none}
.q-small{background:var(--panel)}
.q-small summary{padding-inline:var(--s3)}
/* my missions, the ranks, the leaderboard, and what is folded at the foot */
.q-mine{padding:var(--s5) 0}
.q-minelist{display:grid;margin-top:var(--s3);max-width:46rem;border-top:1px solid var(--line)}
.q-mine-a{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px var(--s3);min-height:52px;padding:var(--s2) var(--s1);border-bottom:1px solid var(--line);text-decoration:none}
.q-mine-a:hover b{color:var(--field)}
.q-mine-a b{font-weight:700}
.q-mine-why{margin:6px var(--s1) 0;color:var(--dim);font-size:var(--fs-5);overflow-wrap:anywhere}
.rk{display:block;inline-size:48px;block-size:48px}
.rk-list{display:grid;gap:var(--s5);margin-top:var(--s5)}
@media(min-width:760px){.rk-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s6) var(--s7)}}
@media(min-width:1100px){.rk-list{grid-template-columns:repeat(3,minmax(0,1fr))}}
.rk-list li{display:grid;grid-template-columns:56px minmax(0,1fr);gap:var(--s3);align-items:start}
.rk-box{display:grid;place-items:center;inline-size:56px;block-size:56px;color:var(--ink)}
.rk-h{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3)}
.rk-h b{font:800 1.4rem/1.1 var(--display);letter-spacing:.02em}
html[lang="en"] .rk-h b{text-transform:uppercase}
html[lang="fa"] .rk-h b{font-size:1.2rem;font-weight:900;line-height:1.4;letter-spacing:0}
.rk-h span{color:var(--dim);font-size:var(--fs-4);font-weight:700;white-space:nowrap}
.rk-l{margin-top:2px;color:var(--dim);line-height:1.5;max-width:40ch}
html[lang="fa"] .rk-l{line-height:1.8}
.q-toplist{counter-reset:qt;display:grid;margin-top:var(--s3);max-width:34rem}
.q-toplist li{counter-increment:qt;display:grid;grid-template-columns:2rem minmax(0,1fr) auto auto;gap:var(--s3);align-items:baseline;padding:var(--s3) 0;border-bottom:1px solid var(--line)}
.q-toplist li::before{content:counter(qt);font:800 1.2rem/1 var(--display);color:var(--dim)}
html[lang="fa"] .q-toplist li::before{content:counter(qt,persian)}
.q-toplist b{overflow-wrap:anywhere}
.q-top-l{color:var(--dim);font-size:var(--fs-4)}
.q-top-x{font-weight:800}
.q-read .wrap>*{max-width:46rem}
.q-give p{margin-top:var(--s2);line-height:1.5}.q-give .inl{display:inline-flex;align-items:center;min-height:44px;font-weight:700}
.q-give-w{padding:12px 14px;border:1px solid var(--field);border-radius:var(--r,8px);background:var(--panel)}
.q-fold{margin-top:var(--s6);max-width:46rem;border-block:1px solid var(--line)}
.q-fold>summary{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);min-height:56px;font-weight:700;font-size:1.0625rem;cursor:pointer;list-style:none}
.q-fold>summary::-webkit-details-marker{display:none}
.q-fold>summary::after{content:"";flex:none;width:9px;height:9px;margin-inline-end:4px;border-right:2px solid var(--dim);border-bottom:2px solid var(--dim);transform:rotate(45deg)}
.q-fold[open]>summary::after{transform:rotate(225deg)}
.q-fold-b{padding:0 0 var(--s5);max-width:64ch}
.q-fold-b>p{margin-top:var(--s3);line-height:1.6}
html[lang="fa"] .q-fold-b>p{line-height:1.85}
.q-fold-b>:first-child{margin-top:0}
.q-fold-b h3{margin-top:var(--s5);font-size:1.25rem}
html[lang="fa"] .q-fold-b h3{font-size:1.1rem}
.q-ladder{margin-top:var(--s3)}
.q-ladder li{display:flex;justify-content:space-between;gap:var(--s4);padding:9px 0;border-bottom:1px solid var(--line)}
.q-ladder li:last-child{border-bottom:0}
.q-ladder b{flex:none}
.q-guides{display:grid;margin-top:var(--s2)}
@media(min-width:760px){.q-guides{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--s6)}}

/* ---- 14 October 2026: the calmer look, on every page (projects/brand/community-strategy.md, section 7; his words:
   "The whole website needs to become a lot more beautiful, with a cleaner design, a better user interface, and a lot
   easier to understand what's going on"). One idea a screen, far fewer boxes inside boxes, bigger and calmer type.
   What changed, in one place so it can be read as one decision:
   - the ground and the text are the brand register's own, and the ribbon is a hairline;
   - a list is rows on hairlines (the scorecard's members, the missions, the steps of a guide, the facts of the bloc
     guide); a box is kept for what is typed in, what plays, a post, and the ONE thing a page puts first;
   - a section breathes: 48px above and below on a phone, 72px on a computer, more above a heading than under it;
   - the header and the footer are finished: the footer says who this is, then three short lists by what a reader
     wants to do (do, read, talk), then the small print. ---- */
.ribbon{height:3px}
body{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:var(--sunk)}::-webkit-scrollbar-thumb{background:var(--line);border-radius:5px}
a{text-underline-offset:.2em}
.top{background:var(--bg)}
.top .wrap{min-height:60px}
.mark img{width:40px;height:40px}
.subnav{background:var(--bg);border-bottom:1px solid var(--line);gap:0}
.subnav a{padding:0 12px;font-size:var(--fs-4)}
.subnav a[aria-current="page"]{color:var(--ink);box-shadow:inset 0 -2px 0 var(--field)}
@media(min-width:1240px){.top nav a[aria-current="page"]{color:var(--ink);box-shadow:inset 0 -2px 0 var(--field);border-radius:0}}
.modes{background:var(--bg)}
.field{background:var(--bg)}
.field.band{background:var(--panel)}
.field .wrap{padding-top:var(--s6);padding-bottom:var(--s6)}
.lede{font-size:var(--lede);font-weight:500;line-height:1.45;max-width:40ch}
.sec{padding:40px 0}
.sec h2{margin-bottom:var(--s3)}
.sunk{background:var(--sunk)}
.road-h{max-width:46rem}
.road-h h2{margin:0}
.road-h .sub,.sec .sub{margin-top:var(--s2);color:var(--dim);max-width:52ch}
.road-h .sub a{color:var(--field);font-weight:700;display:inline-flex;align-items:center;min-height:40px}
@media(min-width:900px){.sec{padding:var(--s8) 0}.field .wrap{padding-top:var(--s7);padding-bottom:var(--s7)}}
/* rows on hairlines */
.rows{gap:0;border-top:1px solid var(--line)}
.mrow a{background:none;border:0;border-bottom:1px solid var(--line);border-radius:0;padding:10px var(--s1);min-height:76px}
.mrow a:hover{background:var(--panel);border-color:var(--line)}
@media(min-width:900px){.rows.cols2{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--s7)}}
.measures{gap:var(--s5)}
.measures li{background:none;border-radius:0;padding:var(--s4) 0 0;border-top:1px solid var(--line)}
.asteps{gap:0}
.asteps>li{background:none;border-radius:0;padding:var(--s5) 0;border-bottom:1px solid var(--line);grid-template-columns:40px minmax(0,1fr)}
.asteps>li:first-child{padding-top:0}
.asteps>li>b{display:block;inline-size:auto;block-size:auto;border-radius:0;background:none;color:var(--dim);font:900 2.6rem/.85 "Big Shoulders Display","Arial Narrow",sans-serif;text-align:center}
html[lang="fa"] .asteps>li>b{font:900 2rem/1.2 "Vazirmatn",Tahoma,sans-serif}
.asks li{background:var(--panel)}
.bfacts{gap:0}
.bfacts li,.asteps .bfacts li{background:none;border-radius:0;padding:var(--s4) 0;border-bottom:1px solid var(--line)}
.who div{background:none;border-radius:0;padding:var(--s4) 0;border-bottom:1px solid var(--line)}
.say-item{background:var(--panel)}
.dist-d{background:none;padding:6px 0 4px}
.dist-d:hover{background:none}
.dist-d:hover b{color:var(--field)}
.gets li::before{inline-size:8px;block-size:8px;inset-inline-start:6px;top:.65em;background:var(--dim)}
/* the footer */
footer{background:var(--sunk);border-top:1px solid var(--line);padding:var(--s7) 0 96px;color:var(--dim);font-size:var(--fs-4)}
.foot-top{display:grid;gap:var(--s3);max-width:40rem}
.foot-top .mark{color:var(--ink)}
.foot-top p{line-height:1.6}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5) var(--s4);margin-top:var(--s6)}
.cols>div{grid-column:auto}
.cols>div:last-child{grid-column:1/-1}
@media(min-width:760px){.cols{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s6)}.cols>div:last-child{grid-column:auto}}
.foot-h{font:800 1.15rem/1.2 var(--display);color:var(--ink);letter-spacing:.04em;margin-bottom:var(--s1)}
html[lang="en"] .foot-h{text-transform:uppercase}
html[lang="fa"] .foot-h{font-size:1rem;font-weight:800;letter-spacing:0}
footer li a{text-decoration:none;color:var(--dim)}
footer li a:hover{color:var(--ink);text-decoration:underline}
.fine{margin-top:var(--s6);padding-top:var(--s4);border-top:1px solid var(--line);font-size:var(--fs-2);line-height:1.7;max-width:80ch}
.fine + .fine{margin-top:var(--s2);padding-top:0;border-top:0}

/* ---- the front page: one sentence, three ways in, one line for a reader inside Iran; then one idea a screen ---- */
.hero .wrap{display:grid;gap:var(--s6);padding-top:var(--s3);padding-bottom:var(--s6)}
.hero h1{font-weight:900}
.hero h1 i{display:block;font-style:normal;color:var(--ink)}
.hero .lede{margin-top:var(--s3);max-width:34ch;color:var(--dim)}
.ways{display:grid;margin-top:var(--s3);border-top:1px solid var(--line)}
.ways li{border-bottom:1px solid var(--line)}
.way{display:grid;grid-template-columns:40px minmax(0,1fr) 14px;gap:var(--s3);align-items:center;min-height:68px;padding:var(--s3) var(--s1);text-decoration:none}
.way-ic{position:relative;display:grid;place-items:center;inline-size:40px;block-size:40px;color:var(--ink)}
.way-ic svg{inline-size:28px;block-size:28px}
.way-t{display:grid;gap:2px;min-width:0}
.way-t b{font:800 1.4rem/1.1 var(--display);letter-spacing:.02em;color:var(--field)}
html[lang="en"] .way-t b{text-transform:uppercase}
html[lang="fa"] .way-t b{font-size:1.15rem;font-weight:900;line-height:1.5;letter-spacing:0}
.way-t small{color:var(--dim);font-size:var(--fs-4);line-height:1.4}
html[lang="fa"] .way-t small{line-height:1.65}
.way:hover .way-t b{color:var(--field-hi)}
/* the arrow at the end of a way: two sides of a square, pointing where the page reads to */
.way-go{inline-size:9px;block-size:9px;border-top:2px solid var(--dim);border-inline-end:2px solid var(--dim);transform:rotate(45deg)}
html[dir="rtl"] .way-go{transform:rotate(-45deg)}
/* while a show is on: site.js marks the first way, and its drawing carries the red dot the bubble uses */
.way.live .way-ic::after{content:"";position:absolute;inset-inline-end:2px;top:2px;inline-size:10px;block-size:10px;border-radius:50%;background:var(--red);box-shadow:0 0 0 3px var(--bg)}
.inside-note{display:grid;grid-template-columns:24px minmax(0,1fr);gap:var(--s3);margin-top:var(--s4);color:var(--dim);font-size:var(--fs-4);line-height:1.5}
html[lang="fa"] .inside-note{line-height:1.75}
.inside-note svg{color:var(--ink);margin-top:1px}
.inside-note b{color:var(--ink)}
.inside-note a{display:flex;align-items:center;min-height:40px;color:var(--field);font-weight:700}
.hero-art{margin:0;display:grid;grid-template-columns:72px minmax(0,1fr);gap:var(--s4);align-items:center;color:var(--dim)}
.derafsh{display:block;inline-size:100%;block-size:auto;color:var(--ink);opacity:.86}
.hero-art figcaption{font-size:var(--fs-5);line-height:1.6;max-width:44ch}
html[lang="fa"] .hero-art figcaption{line-height:1.85}
.hero-art.has-pic{grid-template-columns:1fr}
.art{display:block;inline-size:100%;block-size:auto;border-radius:var(--r2);background:var(--panel)}
@media(min-width:900px){
  .hero .wrap{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:var(--s8);align-items:center;padding-top:var(--s7);padding-bottom:var(--s8)}
  .hero .lede{max-width:38ch}
  .hero-art{grid-template-columns:1fr;justify-items:center;gap:var(--s5);text-align:center}
  .derafsh{inline-size:min(100%,15rem)}
  .hero-art.has-pic{text-align:start;justify-items:start}
}
/* the three steps and the six ranks */
.acts3{display:grid;gap:var(--s5);margin-top:var(--s5)}
.acts3 li{display:grid;grid-template-columns:48px minmax(0,1fr);gap:var(--s4);align-items:start}
.acts3 h3{font-size:1.6rem}
html[lang="fa"] .acts3 h3{font-size:1.25rem}
.acts3 p{margin-top:var(--s1);color:var(--dim);max-width:44ch}
@media(min-width:900px){.acts3{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s7)}}
.ranks-row{margin-top:var(--s6);padding-top:var(--s5);border-top:1px solid var(--line)}
.ranks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4) var(--s2)}
.ranks li{display:grid;justify-items:center;gap:var(--s1);text-align:center;color:var(--ink)}
.ranks b{font-size:var(--fs-4);font-weight:700;line-height:1.3}
@media(min-width:560px){.ranks{grid-template-columns:repeat(6,minmax(0,1fr))}}
.ranks-n{margin-top:var(--s4);color:var(--dim);max-width:52ch}
.road .row{margin-top:var(--s5)}
/* the record, as one door */
.record-grid{display:grid;gap:var(--s6);margin-top:var(--s4)}
.record-door .find{margin-top:0}
@media(min-width:900px){.record-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s8);align-items:start}.record-grid .finds{grid-template-columns:1fr;gap:var(--s5)}}

/* ---- the safety page and the host guide: short rules, each with its reason ---- */
.s-jump{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s4)}
.s-sec h2{margin-bottom:0}
.s-rules{display:grid;gap:var(--s6);margin-top:var(--s5)}
/* a rule is a sentence, often a long one: it is set as a sentence, bold, in the text face, never in capitals */
.s-rules h3,html[lang="en"] .s-rules h3{font:700 1.125rem/1.4 var(--body);text-transform:none;letter-spacing:0;max-width:52ch}
html[lang="fa"] .s-rules h3{font:800 1.0625rem/1.75 var(--body)}
.s-why{margin-top:var(--s2);color:var(--dim);max-width:60ch}
.s-fact{margin-top:var(--s3);padding:var(--s3) var(--s4);background:var(--panel);border-radius:var(--r2);font-size:var(--fs-5);line-height:1.55;max-width:60ch}
html[lang="fa"] .s-fact{line-height:1.85}
.sunk .s-fact{background:var(--bg)}
.s-fact .src{margin-top:var(--s1)}
.s-fact .src a{color:var(--field)}
.s-sec>.wrap>.s-fact{margin-top:var(--s4)}
.s-end{margin-top:var(--s6);padding-top:var(--s4);border-top:1px solid var(--line);font-weight:600;max-width:60ch}
.g-steps h3{font-size:1.5rem}
html[lang="fa"] .g-steps h3{font-size:1.2rem}
.g-qs{display:grid;gap:var(--s2);margin-top:var(--s3)}
.g-qs li{padding:var(--s2) var(--s3);background:var(--panel);border-radius:var(--r);font-weight:600}
.g-steps .g-lines{margin-top:var(--s3)}
/* The bubble never steps aside (14 October 2026, evening): it is on screen from the first pixel on every page. */
@media(min-width:900px){
  .hero .lede{font-size:1.375rem}
  .way{min-height:84px;grid-template-columns:48px minmax(0,1fr) 14px;gap:var(--s4)}
  .way-ic{inline-size:48px;block-size:48px}.way-ic svg{inline-size:32px;block-size:32px}
  .way-t b{font-size:1.9rem}
  html[lang="fa"] .way-t b{font-size:1.4rem}
  .way-t small{font-size:1rem}
  .inside-note{font-size:var(--fs-5);max-width:36rem}
  .derafsh{inline-size:min(100%,19rem);stroke-width:1.6}
  .hero-art figcaption{font-size:1rem;max-width:34ch}
  .nudge-sec{padding-top:0}
}
/* ---- the painting (14 October 2026, round two). The first screen of a phone is the headline, the three ways in and the
   line for a reader inside Iran, and nothing else: the painting stands beside the words only from 900px, and on a phone
   a wide cut of it opens the three steps, below the first screen. ---- */
.hero-art{display:none}
.road-art{margin:0 0 var(--s5);display:grid;gap:var(--s3);color:var(--dim)}
.road-art figcaption{font-size:var(--fs-5);line-height:1.6;max-width:52ch}
html[lang="fa"] .road-art figcaption{line-height:1.85}
.road-art .art-wide{aspect-ratio:2/1;inline-size:100%;block-size:auto;object-fit:cover}
.road-art:not(.has-pic){grid-template-columns:64px minmax(0,1fr);align-items:center}
@media(min-width:900px){.hero-art{display:grid}.road-art{display:none}}
/* the first screen of a phone, 375 by 667 (round two): tighter rows, a smaller lede, the same three things */
@media(max-width:899px){
  .hero .wrap{padding-top:var(--s2);padding-bottom:var(--s5)}
  .hero .lede{margin-top:var(--s2);font-size:1rem;line-height:1.45}
  html[lang="fa"] .hero .lede{line-height:1.7}
  .ways{margin-top:var(--s2)}
  .way{min-height:58px;padding-block:var(--s2)}
  .inside-note{margin-top:var(--s3)}
  .inside-note a{min-height:40px}
  .acts3{gap:var(--s4);margin-top:var(--s4)}
  .ranks-row{margin-top:var(--s5);padding-top:var(--s4)}
  .road .row{margin-top:var(--s4)}
}
html[lang="fa"] .hero h1{font-size:clamp(1.6rem,7vw,3.6rem)}
@media(max-width:899px){
  .inside-note a{display:inline-flex;vertical-align:middle;margin-inline-start:4px}
  .hero h1{font-size:clamp(2.25rem,10vw,5rem)}
  html[lang="fa"] .hero h1{font-size:clamp(1.55rem,6.8vw,3.6rem)}
  .modes .wrap{padding-block:4px}
  .top .wrap{min-height:56px}
  .modes{top:57px}      /* 31 Oct 2026: the header is 57px here; at 61px the page showed through a 4px gap under it */
  .subnav a{min-height:42px}
}
@media(max-width:899px){.way{padding-block:6px;min-height:56px}}

/* ---- THE GAME LOOK (14 October 2026, evening). Armin: "I wanted to make it look like a really good video game, like
   Assassin's Creed ... with themes of Shahnameh and with the elegance and the aesthetics of Assassin's Creed." And: "I'm
   afraid that you're going to make it cringe." So: the menu of a cinematic game, and calm. One painter's pictures
   (render.py, AI_PLACE) carry the drama; the type stays big, plain and readable; gold stays on the headline, the
   buttons and the links. Nothing here is a new colour or a new font: every value is a token above, or the ground
   (#0A0A08, Ground a third of the way to black) at a strength. Nothing is hidden to be animated back; the only motion
   is a picture that leans in a little under a pointer. ---- */
.aip{display:block;background:var(--sunk)}
.aip img{display:block;inline-size:100%;block-size:100%;object-fit:cover}
/* a picture behind words: it fills its box, under the words, under a shade */
.aip-bg{position:absolute;inset:0;z-index:-2}

/* the front page: Kaveh raises the banner. On a phone the picture is the top of the head and fades into the ground; the
   headline sits where it fades. From 900px the picture fills the head and the words stand on its right, in both
   languages (Kaveh is on the left of the picture), under a shade that is darkest where the words are. */
.hero-iu{position:relative;isolation:isolate;overflow:hidden;background:var(--bg)}
.hero-iu>.aip-bg{inset:0 0 auto 0;block-size:min(380px,100vw);-webkit-mask-image:linear-gradient(180deg,#000 58%,transparent 100%);mask-image:linear-gradient(180deg,#000 58%,transparent 100%)}
.hero-iu>.aip-bg img{object-position:24% 30%}
.hero-iu::after{content:"";position:absolute;inset:0 0 auto 0;block-size:min(380px,100vw);z-index:-1;background:linear-gradient(180deg,rgba(10,10,8,.18) 0%,rgba(10,10,8,.05) 40%,rgba(10,10,8,.55) 78%,var(--bg) 100%)}
.hero.hero-iu .wrap{display:flex;flex-direction:column;gap:0;padding-top:clamp(170px,50vw,300px);padding-bottom:var(--s6)}
.hero-iu .hero-say{max-inline-size:36rem}
.hero-iu h1{font-weight:900;color:var(--field);letter-spacing:.01em;text-shadow:0 2px 4px rgba(0,0,0,.7),0 0 28px rgba(0,0,0,.85)}
.hero-iu h1 i{display:block;margin-top:.12em;font-style:normal;color:var(--ink)}
html[lang="en"] .hero-iu h1{font-size:clamp(2.6rem,11.5vw,5.4rem);line-height:.92}
html[lang="fa"] .hero-iu h1{font-size:clamp(1.75rem,7.6vw,3.6rem);line-height:1.35}
.hero-iu .lede{margin-top:var(--s3);color:var(--ink);max-inline-size:34ch;text-shadow:0 1px 3px rgba(0,0,0,.8)}
.hero-iu .front-q{margin-top:var(--s2)}
.hero-iu .front-q .fq{margin-top:var(--s4)}
.hero-iu .inside-note{margin-top:var(--s5);max-inline-size:34rem}
.hero-cap{margin-top:var(--s5);max-inline-size:44ch;color:var(--dim);font-size:var(--fs-3);line-height:1.55}
html[lang="fa"] .hero-cap{line-height:1.85}
@media(min-width:900px){
  .hero-iu{min-block-size:min(88vh,880px);display:flex;align-items:center}
  .hero-iu>.aip-bg,.hero-iu::after{inset:0;block-size:auto}
  .hero-iu>.aip-bg{-webkit-mask-image:none;mask-image:none}
  .hero-iu>.aip-bg img{object-position:30% 35%}
  .hero-iu::after{background:linear-gradient(270deg,rgba(10,10,8,.94) 0%,rgba(10,10,8,.86) 30%,rgba(10,10,8,.35) 56%,rgba(10,10,8,0) 76%),linear-gradient(180deg,transparent 80%,var(--bg) 100%)}
  .hero.hero-iu .wrap{inline-size:100%;padding-top:var(--s8);padding-bottom:var(--s8)}
  .hero-iu .hero-say,.hero-iu .hero-cap{margin-left:auto;inline-size:min(36rem,48%)}
  html[lang="en"] .hero-iu h1{font-size:clamp(3.6rem,5.6vw,5.6rem)}
  html[lang="fa"] .hero-iu h1{font-size:clamp(2.4rem,3.6vw,3.6rem)}
  .hero-iu .lede{font-size:1.25rem}
  .hero-cap{font-size:var(--fs-5);max-inline-size:none}
}

/* a section head: a short gold rule over the heading, as a game's menu marks a title. One line, never a flourish. */
.road-h h2::before,.front-acts h2::before,.board-art .mb-front-h h2::before{content:"";display:block;inline-size:36px;block-size:2px;margin-bottom:var(--s3);background:var(--field)}

/* the board of public events, over the crowd with the lion and sun: the picture is a dim ground, never behind a word at
   full strength */
.board-art{position:relative;isolation:isolate;overflow:hidden;background:var(--sunk)}
.board-art>.aip-bg img{object-position:50% 30%;opacity:.55}
.board-art::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,var(--bg) 0%,rgba(10,10,8,.55) 22%,rgba(10,10,8,.72) 70%,var(--bg) 100%)}
.board-art .mb-front{background:transparent;padding:var(--s7) 0}
.board-art .mb-lede{color:var(--ink);text-shadow:0 1px 3px rgba(0,0,0,.8)}
@media(min-width:900px){.board-art .mb-front{padding:var(--s8) 0}}

/* the missions on the front page: the reader's next mission, then the three acts as three pictures. Gather, the main
   mission, is the biggest door. */
.front-acts .you-h{margin-top:var(--s5);color:var(--dim);font:700 var(--fs-3)/1.3 var(--body);letter-spacing:.12em;text-transform:uppercase}
html[lang="fa"] .front-acts .you-h{letter-spacing:0;text-transform:none}
.you-next{margin-top:var(--s2);max-inline-size:46rem}
.q-next{position:relative;display:block;padding:var(--s4) 52px var(--s4) var(--s4);border-radius:var(--r2);background:var(--panel);text-decoration:none;box-shadow:inset 0 0 0 1px rgba(217,180,90,.28)}
html[dir="rtl"] .q-next{padding:var(--s4) var(--s4) var(--s4) 52px}
.q-next:hover{background:var(--raise)}
.q-next::after{content:"";position:absolute;inset-inline-end:22px;top:50%;inline-size:10px;block-size:10px;margin-top:-5px;border-top:2.5px solid var(--field);border-inline-end:2.5px solid var(--field);transform:rotate(45deg)}
html[dir="rtl"] .q-next::after{transform:rotate(-45deg)}
.q-next-t{display:grid;gap:6px}
.q-next b{font:800 clamp(1.6rem,6.5vw,2.2rem)/1.05 var(--display);color:var(--ink)}
html[lang="en"] .q-next b{text-transform:uppercase;letter-spacing:.01em}
html[lang="fa"] .q-next b{font-size:1.3rem;line-height:1.5}
.q-next-h{color:var(--dim);line-height:1.45;max-inline-size:52ch}
.acts{display:grid;gap:var(--s3);margin-top:var(--s5)}
.act-c{position:relative;isolation:isolate;display:block;min-block-size:150px;border-radius:var(--r2);overflow:hidden;text-decoration:none;background:var(--sunk);box-shadow:inset 0 0 0 1px var(--line)}
.act-c::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(10,10,8,.94) 0%,rgba(10,10,8,.8) 50%,rgba(10,10,8,.2) 82%,rgba(10,10,8,0) 100%)}
html[dir="rtl"] .act-c::after{background:linear-gradient(270deg,rgba(10,10,8,.94) 0%,rgba(10,10,8,.8) 50%,rgba(10,10,8,.2) 82%,rgba(10,10,8,0) 100%)}
.act-c .aip-bg img{transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.act-c:hover .aip-bg img{transform:scale(1.04)}
.act-c:hover{box-shadow:inset 0 0 0 1px var(--field)}
.act-t{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:var(--s4);align-content:center;min-block-size:150px;padding:var(--s4) var(--s5)}
.act-t .act-n{grid-row:1/span 3;align-self:center;font:900 3.2rem/1 var(--display);color:var(--field);min-inline-size:1.2em;text-align:center}
.act-t b{align-self:end;font:800 2rem/1 var(--display);color:var(--ink)}
html[lang="en"] .act-t b{text-transform:uppercase;letter-spacing:.02em}
html[lang="fa"] .act-t b{font-size:1.4rem;line-height:1.5}
.act-l{color:var(--ink);font-size:var(--fs-5);line-height:1.4;max-inline-size:32ch}
.act-x{color:var(--field);font-size:var(--fs-3);font-weight:700}
/* THE MAIN MISSION IS THE BIGGEST DOOR: the act of the mission marked "main" (Scout since 18 October 2026) carries act-main
   (front_acts in render.py). Until 19 October 2026 these rules named Gather, the main act of the three-act front page, and a
   fourth act wrapped onto a line of its own. */
.act-main .act-c,.act-main .act-t{min-block-size:200px}
.act-main .act-c{box-shadow:inset 0 0 0 1px rgba(217,180,90,.5)}
html[lang="en"] .act-main .act-t b{font-size:2.5rem}
.you-all{margin-top:var(--s3)}
.you-all a{display:inline-flex;align-items:center;min-block-size:44px;color:var(--field);font-weight:700}
/* the four acts: one under the other on a phone, two by two from 700px, ALL FOUR ON ONE LINE from 1024px (19 October 2026,
   Armin: "the missions need to be in one line"), the main one the widest, every card the same height */
@media(min-width:700px){
  .acts{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4)}
  .act-c,.act-t,.act-main .act-c,.act-main .act-t{min-block-size:300px}
  .act-c::after,html[dir="rtl"] .act-c::after{background:linear-gradient(180deg,rgba(10,10,8,0) 0%,rgba(10,10,8,.05) 38%,rgba(10,10,8,.8) 70%,rgba(10,10,8,.96) 100%)}
  .act-t{grid-template-columns:1fr;align-content:end;row-gap:6px;padding:var(--s5)}
  .act-t .act-n{grid-row:auto;text-align:start;font-size:3.4rem;min-inline-size:0}
}
@media(min-width:1024px){
  .acts{grid-template-columns:minmax(0,1fr) minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr);align-items:stretch}
  .act-li{display:flex}
  .act-li>.act-c{flex:1}
  .act-c,.act-t,.act-main .act-c,.act-main .act-t{min-block-size:360px}
  .act-t{padding:var(--s4) var(--s4) var(--s5)}
  html[lang="en"] .act-t b{font-size:1.75rem}
  html[lang="en"] .act-main .act-t b{font-size:2.4rem}
  html[lang="fa"] .act-t b{font-size:1.25rem}
  .act-l{font-size:var(--fs-4);min-block-size:4.2em}      /* three lines kept for every act's line, so the four names sit on one line (1 Nov 2026) */
}

/* the record, one calm door: a search and a state, nothing else */
.record-door .record-grid{max-inline-size:46rem}
.record-door .find{margin-top:var(--s3)}
@media(min-width:900px){.record-door .record-grid{grid-template-columns:1fr;gap:var(--s3)}}

/* the head of a page with its picture (the Missions page, the host guide, the safety page, About, the two campaigns):
   on a phone the picture is the top of the head and fades into the ground; from 700px it fills the head and the words
   stand at the side the page starts on, under a shade. */
.art-head{position:relative;isolation:isolate;overflow:hidden}
.art-head>.aip-bg{inset:0 0 auto 0;block-size:min(260px,70vw);-webkit-mask-image:linear-gradient(180deg,#000 55%,transparent 100%);mask-image:linear-gradient(180deg,#000 55%,transparent 100%)}
.art-head::after{content:"";position:absolute;inset:0 0 auto 0;block-size:min(260px,70vw);z-index:-1;background:linear-gradient(180deg,rgba(10,10,8,.2) 0%,rgba(10,10,8,.35) 60%,var(--bg) 100%)}
.art-head>.wrap{position:relative;padding-top:clamp(150px,44vw,230px)}
.field.art-head .wrap{padding-top:clamp(150px,44vw,230px)}
.art-head h1{color:var(--field);text-shadow:0 2px 4px rgba(0,0,0,.7),0 0 24px rgba(0,0,0,.85)}
.art-head .lede{color:var(--ink);text-shadow:0 1px 3px rgba(0,0,0,.8)}
@media(min-width:700px){
  .art-head>.aip-bg,.art-head::after{inset:0;block-size:auto}
  .art-head>.aip-bg{-webkit-mask-image:none;mask-image:none}
  .art-head::after{background:linear-gradient(90deg,rgba(10,10,8,.94) 0%,rgba(10,10,8,.8) 36%,rgba(10,10,8,.2) 68%,rgba(10,10,8,0) 100%),linear-gradient(180deg,transparent 78%,var(--bg) 100%)}
  html[dir="rtl"] .art-head::after{background:linear-gradient(270deg,rgba(10,10,8,.94) 0%,rgba(10,10,8,.8) 36%,rgba(10,10,8,.2) 68%,rgba(10,10,8,0) 100%),linear-gradient(180deg,transparent 78%,var(--bg) 100%)}
  .art-head>.wrap,.field.art-head .wrap{padding-top:var(--s8);padding-bottom:var(--s8)}
  .art-head .wrap>*{max-inline-size:40rem}
}

/* the Missions page: each act's name stands over its picture */
.q-act-h.has-pic{max-width:none;position:relative;isolation:isolate;overflow:hidden;min-block-size:150px;align-items:end;padding:var(--s5) var(--s4);border-radius:var(--r2);background:var(--sunk)}
.q-act-h.has-pic::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(10,10,8,.94) 0%,rgba(10,10,8,.78) 55%,rgba(10,10,8,.25) 85%,rgba(10,10,8,.1) 100%)}
html[dir="rtl"] .q-act-h.has-pic::after{background:linear-gradient(270deg,rgba(10,10,8,.94) 0%,rgba(10,10,8,.78) 55%,rgba(10,10,8,.25) 85%,rgba(10,10,8,.1) 100%)}
.q-act-h.has-pic h2{color:var(--ink)}
.q-act-h.has-pic p{color:var(--ink)}
@media(min-width:700px){.q-act-h.has-pic{min-block-size:220px;padding:var(--s6)}}
/* a mission that ticks itself: the tick appears on its drawing once done (quests.js sets data-q-tick-on) */
.q-ic{position:relative}
.q-tick{position:absolute;inset-inline-end:-4px;bottom:-4px;inline-size:18px;block-size:18px;border-radius:50%;background:var(--panel);box-shadow:0 0 0 2px var(--line)}
.q-tick:not([data-q-tick-on]){display:none}      /* 31 Oct 2026: empty, the ring sat on the drawing as a stray circle; it shows once done */
.q-tick[data-q-tick-on]{background:var(--field);box-shadow:none}
.q-tick[data-q-tick-on]::after{content:"";position:absolute;inset-inline-start:6px;top:3px;inline-size:4px;block-size:8px;border:solid var(--on-field);border-width:0 2px 2px 0;transform:rotate(45deg)}
.q-auto{color:var(--dim)}
.q-why b{color:var(--field);font-weight:700}
/* the header holds one more link since the board of public events (14 October 2026, evening): no link breaks over two lines */
.top nav a{white-space:nowrap}
/* 15 Oct 2026: above 1439px the menu took its wide padding back and ran into the mark (Home under "Uncensored" at 1536px, his screenshot). The bar never gets wider than its container, so the tight padding holds at every width from 820px up. */
@media(min-width:820px){.top nav a{padding:10px 7px}.top nav a.yt span{display:none}}
/* the Missions page asks who the reader is on its first screen: its picture is a shorter band on a phone */
@media(max-width:699px){
  .q-head.art-head>.aip-bg,.q-head.art-head::after{block-size:min(190px,52vw)}
  .q-head.art-head>.wrap{padding-top:clamp(92px,27vw,128px)}
}

/* Bug sweep, 14 Oct 2026: the floating bubble covered the last lines of every page on a phone, and the
   Safety link was 34px wide. Room at the foot while the bubble is up, and every footer link a full tap. */
/* 31 Oct 2026: the room is the footer's own, so it is the footer's colour (on the body it was a strip of another shade) */
body:has(#calls:not(.off)):not(:has(footer)){padding-bottom:120px}
body:has(#calls:not(.off)) footer{padding-bottom:136px}      /* the bottom bar's room, in the footer's colour; 216 made the phone front page 5470px (limit 5400) */
footer li a{min-width:44px;justify-content:center}

/* ---- THE VISUAL PASS (14 October 2026, his "significantly improve the way IranUncensored.com looks ... don't make any
   unnecessary changes"). No new colour, font or element: the same tokens, put in order.
   1. The head ends where its words end: no dead dark band under the answers on a computer.
   2. The front question reads as four equal choices, one column on a phone and two on a computer; the first answer
      (the plan, the site's main use) is marked with a gold edge, never filled, because a filled answer is a chosen one.
      (Since 15 October 2026 the head has one gold button only, "Join the fight"; the choice is the first question after
      sign-up, and the answer that says a reader is inside Iran is never offered there.)
   3. The board of public events stands on its picture like the head does: the crowd seen clearly where no word is, a
      deep shade where the words are; on a phone the picture is a band over the heading. It read as dirt at half strength.
   4. One measure on the front page: from 900px each section's heading and its door share one row, so nothing is a
      narrow column with an empty right half, and the three acts below run the same full width.
   5. Chapters: the record is a sunk band between hairlines, and every band's heading carries the same short gold rule. */
@media(min-width:900px){
  .hero-iu{min-block-size:min(84svh,720px)}
  .hero.hero-iu .wrap{padding-top:var(--s7);padding-bottom:var(--s7)}
}
/* the head's one call to action, "Join the fight" (15 October 2026): drawn in members.css for both sites; here it only
   keeps its weight over the painting */
.hero-iu .fq .fq-go{box-shadow:0 8px 30px rgba(0,0,0,.55)}

.board-art{background:var(--bg)}
.board-art>.aip-bg{inset:0 0 auto 0;block-size:min(250px,68vw);background:transparent;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 24%,#000 52%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 24%,#000 52%,transparent 100%)}
.board-art>.aip-bg img{opacity:1;object-position:42% 40%;filter:saturate(.8)}
.board-art::after{inset:0 0 auto 0;block-size:min(250px,68vw);background:linear-gradient(180deg,rgba(10,10,8,.1) 0%,rgba(10,10,8,.4) 100%)}
.board-art .mb-front{padding:clamp(150px,44vw,196px) 0 var(--s7)}
.board-art .mb-front-h h2{text-shadow:0 2px 4px rgba(0,0,0,.7),0 0 24px rgba(0,0,0,.85)}
@media(min-width:900px){
  .board-art{display:flex;align-items:center;min-block-size:460px}
  .board-art>.aip-bg,.board-art::after{inset:0;block-size:auto}
  .board-art>.aip-bg{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 16%,#000 84%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 16%,#000 84%,transparent 100%)}
  .board-art>.aip-bg img{object-position:50% 38%}
  .board-art::after{background:linear-gradient(90deg,rgba(10,10,8,.95) 0%,rgba(10,10,8,.88) 32%,rgba(10,10,8,.4) 58%,rgba(10,10,8,.08) 100%)}
  html[dir="rtl"] .board-art::after{background:linear-gradient(270deg,rgba(10,10,8,.95) 0%,rgba(10,10,8,.88) 32%,rgba(10,10,8,.4) 58%,rgba(10,10,8,.08) 100%)}
  .board-art .mb-front{flex:1;padding:var(--s8) 0}
  .board-art .mb-front .wrap>*{max-inline-size:min(40rem,50%)}
}

@media(min-width:900px){
  .front-acts .wrap,.record-door .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:var(--s8);align-items:end}
  .front-acts .road-h,.record-door .road-h{grid-column:1}
  .front-acts .you-next-w,.record-door .record-grid{grid-column:2}
  .front-acts .acts,.front-acts .you-all{grid-column:1/-1}
  .front-acts .you-h{margin-top:0}
  .front-acts .you-next{max-inline-size:none}
  .record-door .record-grid{max-inline-size:none;margin-top:0}
}
.record-door{background:var(--sunk);border-block:1px solid var(--line)}
.field.band h2::before{content:"";display:block;inline-size:36px;block-size:2px;margin-bottom:var(--s3);background:var(--field)}
/* a link inside a running line keeps its 40px tap as padding, so its line no longer stands taller than the others and a long link wraps like words */
.road-h .sub a,.prose p>a:not([class]){display:inline;padding-block:12px}
/* the search and the state picker are one control: 12px apart on every width, not 42px on a phone */
.record-door .record-grid{gap:var(--s3)}
.record-door .statepick{margin-top:0}
/* The site speaks to you (17 October 2026): a message from the site in its own face, in the corner above the show's
   bubble, drawn by community.js ("the site speaks to you"). A message from someone, so a face and a card, never a
   banner, and fixed, so nothing on the first screen of a page moves under it. Who is speaking and what it may say:
   ../../characters.md, "Every page talks to you". Gone while the discussion is open. Nothing hides and animates in. */
.hi{position:fixed;inset-inline-end:10px;bottom:10px;z-index:15;width:min(calc(100vw - 20px),24rem);background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:16px;box-shadow:0 12px 32px -10px rgba(0,0,0,.7)}
html[data-mode="discussion"] .hi{display:none}
.hi-w{display:grid;grid-template-columns:40px minmax(0,1fr) 40px;gap:10px;align-items:start;padding:12px 4px 12px 12px;max-width:none;margin:0}
[dir="rtl"] .hi-w,html[lang="fa"] .hi-w{padding:12px 12px 12px 4px}
.hi-face{width:40px;height:40px;border-radius:50%;object-fit:cover;background:var(--sunk);border:1px solid var(--line)}
.hi-b{min-width:0}
.hi-who{margin:0;font-weight:700;font-size:.82rem;line-height:1.3;color:var(--field)}
.hi-say{margin:2px 0 0;font-size:.95rem;line-height:1.45;color:var(--ink);overflow-wrap:anywhere}
.hi-q{color:var(--dim)}
html[lang="fa"] .hi-q{quotes:"\00AB" "\00BB"}
.hi-acts{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 0}
.hi-go{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:0 16px;border-radius:999px;border:1px solid var(--field);background:var(--field);color:var(--on-field);font:700 .95rem/1.2 var(--body);text-decoration:none;cursor:pointer}
.hi-go:hover{background:var(--field-hi)}
.hi-go.hi-alt{background:transparent;color:var(--ink);border-color:var(--line)}
.hi-go.hi-alt:hover{border-color:var(--field);background:transparent}
.hi-x{display:grid;place-items:center;width:40px;height:40px;margin:-6px 0 0;padding:0;border:0;border-radius:50%;background:transparent;color:var(--dim);cursor:pointer}
.hi-x:hover{background:var(--raise);color:var(--ink)}
.hi-go:focus-visible,.hi-x:focus-visible{outline:2px solid var(--field);outline-offset:2px}
@media print{.hi{display:none}}

/* ---- 19 October 2026, Armin: "the design is not as elegant as LibertyPolitics. Especially the top of the page just looks so
   messy. The image that you have makes the colors look so messy." What Liberty Politics does and this page did not: ONE calm
   painting at the head with room to breathe, one palette (black and antique gold) and nothing competing with the headline.
   So the head is Damavand at dusk (AI_PLACE in render.py), framed on its peak and its rider, under a lighter shade; the board
   of public events lost its picture (it had a second crowd and a second set of flags right under the head) and is a plain
   band as on Liberty Politics: the heading and its line at the start, the one button at the end. */
.hero-iu>.aip-bg img{object-position:38% 42%}
.hero-iu::after{background:linear-gradient(180deg,rgba(10,10,8,.05) 0%,rgba(10,10,8,0) 40%,rgba(10,10,8,.5) 78%,var(--bg) 100%)}
.board-art{display:block;min-block-size:0;background:var(--bg);border-block-start:1px solid var(--line)}
.board-art::after{content:none}
.board-art .mb-front{padding:var(--s7) 0}
.board-art .mb-front .wrap>*{max-inline-size:none}
.board-art .mb-lede{color:var(--dim);text-shadow:none;max-inline-size:44rem}
.board-art .mb-front-h h2{text-shadow:none}
@media(min-width:900px){
  .hero-iu>.aip-bg img{object-position:30% 50%}
  .hero-iu::after{background:linear-gradient(270deg,rgba(10,10,8,.9) 0%,rgba(10,10,8,.78) 30%,rgba(10,10,8,.25) 56%,rgba(10,10,8,0) 74%),linear-gradient(180deg,transparent 82%,var(--bg) 100%)}
  .board-art{display:block;min-block-size:0}
  .board-art .mb-front{padding:var(--s7) 0}
  .board-art .mb-front .wrap{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:56px;align-items:end}
  .board-art .mb-front .mb-front-h{grid-column:1;grid-row:1}
  .board-art .mb-front .mb-go{grid-column:2;grid-row:1;margin:0;justify-content:flex-end}
  .board-art .mb-front .mb-list{grid-column:1/-1;grid-row:2;margin-top:28px}
}

/* ---------------------------------------------------------------- the invitation to come on the show (19 October 2026)
   render.py team_band(): one slim band at the end of the page's content, above the footer, linking to panel/. Static: no
   animation, not floating, not in the corner. It asks only people outside Iran: the panel is on camera, own face. */
.tband{margin:0;background:var(--sunk);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.tband-w{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s4);padding-top:var(--s3);padding-bottom:var(--s3)}
.tband-on{display:inline-flex;align-items:center;gap:7px;margin-inline-end:6px;vertical-align:2px;font-weight:800;font-size:.8125rem;line-height:1;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);padding:4px 9px;border:1px solid var(--line);border-radius:999px}
:lang(fa) .tband-on{letter-spacing:0}
.tband-on i{width:9px;height:9px;border-radius:50%;background:#C8102E;box-shadow:0 0 0 3px rgba(200,16,46,.25)}
.tband-l{flex:1 1 18rem;margin:0;font-weight:600;font-size:1rem;line-height:1.5}
@media(min-width:760px){.tband-l{font-size:1.125rem}}
.tband-a{display:inline-flex;align-items:center;gap:.3em;min-height:44px;padding:0 18px;border-radius:999px;border:1px solid var(--field);color:var(--field);font-weight:800;text-decoration:none}
.tband-a:hover,.tband-a:focus-visible{background:var(--field);color:var(--on-field);text-decoration:none}
/* 20 October 2026: the band moved up the page (render.py place_band). Inside the Intel Room it sits between the map and the
   list, a box of that column; on a computer a row under both. */
.tband-in{margin:var(--s4) 0;border:1px solid var(--line);border-radius:var(--r2,10px)}
.tband-in .tband-w{padding:var(--s3) var(--s4)}
.ir-main>.tband-in{margin:0}
@media(min-width:1000px){.ir-main:has(>.tband){grid-template-rows:minmax(0,1fr) auto}.ir-main>.tband{grid-column:1/-1;grid-row:2}}
/* THE PILL IN THE HEADER (20 October 2026, render.py nav_go): "Join the panel", on screen without scrolling. Still. */
.subnav a.navgo,.top nav a.navgo{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 13px;margin-inline-end:6px;border:1px solid var(--field);border-radius:999px;background:rgba(217,180,90,.12);color:var(--ink);font-weight:700;white-space:nowrap;text-decoration:none}
.subnav a.navgo:hover,.top nav a.navgo:hover,.subnav a.navgo[aria-current="page"],.top nav a.navgo[aria-current="page"]{background:var(--field);color:var(--on-field)}
.top nav a.navgo{display:none}
/* In the bar the pill is a little tighter, and the bar itself may run to 80rem (the column stays 72rem): with the pill the bar measured 1,122px of links and mark in a 1,120px bar, so it ran over by 2px (20 Oct 2026, measured at 1280 and 1920). */
@media(min-width:1240px){.top nav a.navgo{display:inline-flex;margin-inline-end:2px;padding:0 10px;gap:4px}.top .wrap{max-width:80rem}}

/* the link to the terms beside every box that takes something (build/consent.py, 26 October 2026): a 40px tap target */
.consent-note a{display:inline-flex;align-items:center;min-height:40px}

/* THE PHONE MENU (31 October 2026, the Liberty Politics change of the same day; Armin, with a picture of his phone: "the
   "Join the Panel" button is taking up so much room, and it's really hard to maneuver the menu"). Measured on the live site:
   at 360 and 390px the pill left the seven links a window where one of them was whole, in both languages. Now under 760px
   the strip is the pill and one Menu button (render.py nav_menu) that opens all seven pages at once as tiles; from 760px the
   links slide beside the pill as before and the button stays for the ones that do not fit, until the bar holds them all.
   phone-test.html measures it. Still: no animation. */
.subnav .nav-menu{position:static;flex:none;margin-inline-start:auto}
.nav-menu>summary{display:inline-flex;align-items:center;gap:8px;min-height:40px;margin:5px 0;padding:0 16px;border:1px solid var(--line);border-radius:999px;color:var(--ink);font-weight:700;cursor:pointer;list-style:none;white-space:nowrap}
.nav-menu>summary::-webkit-details-marker{display:none}
.nav-menu[open]>summary{background:var(--ink);border-color:var(--ink);color:var(--sunk)}
.nav-menu-l{position:absolute;inset-inline:8px;top:100%;z-index:30;display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:2px;padding:8px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r2);box-shadow:0 18px 40px -12px rgba(0,0,0,.8);max-height:calc(100dvh - 140px);overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain}
.nav-menu-l a{display:flex;align-items:center;min-height:52px;padding:0 14px;border:1px solid var(--line);border-radius:var(--r);background:rgba(242,241,230,.04);color:var(--ink);font-weight:700;text-decoration:none}
.nav-menu-l a:last-child:nth-child(odd){grid-column:1/-1}
.nav-menu-l a[aria-current="page"]{border-color:var(--field);background:rgba(217,180,90,.12)}
.nav-menu-l a:hover{background:var(--raise)}
.subnav{position:relative}
@media(max-width:759px){.subnav{padding-inline:var(--gutter);gap:8px}.subnav .subnav-s{display:none}.subnav a.navgo{margin-inline-end:0;min-width:0;overflow:hidden;text-overflow:ellipsis}}
@media(min-width:760px){.nav-menu>summary{border-color:transparent;padding:0 12px;color:var(--dim)}}
/* At 1240 to 1299px the bar ran 6px past the screen with all seven links and the pill (measured 31 October 2026): tighter there. */
@media(min-width:1240px) and (max-width:1299px){.top nav a:not(.navgo):not(.yt):not(.lang):not(.acct):not(.iu-support){padding-left:7px;padding-right:7px}}
/* 1 November 2026: on a computer the menu (1,072px measured) left the name 10px from Join the panel at 1440 and ran 6px off
   a 1240 screen. The name never shrinks; from 1240 to 1439 the menu's links are a touch smaller and closer (about 110px
   saved, measured need 1,306px at 1280 before). */
.top .mark{flex:none;margin-inline-end:14px}
@media(min-width:1240px) and (max-width:1439px){
  header.top nav{gap:2px}
  header.top nav a:not(.navgo):not(.yt):not(.lang):not(.acct):not(.iu-support){padding-inline:8px !important;font-size:.875rem}
}
@media(min-width:1240px) and (max-width:1299px){header.top nav a:not(.navgo):not(.yt):not(.lang):not(.acct):not(.iu-support){padding-inline:5px !important}.top .mark{margin-inline-end:8px}}
/* 31 October 2026, the same as Liberty Politics (look.css): a tool's How it works and Stream view doors (their look is
   build/tour.js's, shared) are the height and the size of words of the 44px buttons they stand with. The band's arrow
   keeps its space (gap on .tband-a: the space inside its span is dropped at the start of a flex item). */
.lpt-doors .lpt-how,.lpt-doors .lps-go{min-height:44px;padding:0 16px 0 13px;font-size:.9375rem;font-weight:700}

/* ---- 31 October 2026, visual defects from the audit of the live site ---- */
/* Tools: the ranked list of ideas (and its grey bars while it loads) is as wide as the grid of tools under it, not a 48rem column */
.tk-board .talk-list{max-width:none}
/* Public events: the ready-made kits fill the row they are in, so two kits are never two thirds of a row and a blank third */
@media(min-width:1000px){
  .mb-kit-list:has(>li:only-child){grid-template-columns:minmax(0,1fr)}
  .mb-kit-list:has(>li:nth-child(2):last-child),.mb-kit-list:has(>li:nth-child(4):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* Regime Board: a row of chips that scrolls sideways fades at its end, so it reads as more to the side rather than cut off.
   The fade is tied to the row's own scroll: it is there only when the row can scroll, and it goes as the row reaches its end. */
@property --rg-fade{syntax:"<length>";inherits:false;initial-value:0px}
@keyframes rg-fade{0%,88%{--rg-fade:36px}100%{--rg-fade:0px}}
.rg-fil,.rg-camps,.rg-wars{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - var(--rg-fade)),transparent);mask-image:linear-gradient(to right,#000 calc(100% - var(--rg-fade)),transparent);animation:rg-fade linear both;animation-timeline:scroll(self inline)}
html[dir="rtl"] .rg-fil,html[dir="rtl"] .rg-camps,html[dir="rtl"] .rg-wars{-webkit-mask-image:linear-gradient(to left,#000 calc(100% - var(--rg-fade)),transparent);mask-image:linear-gradient(to left,#000 calc(100% - var(--rg-fade)),transparent)}

/* ---- THE TOOLS IN EVERY MENU (1 November 2026, the parity audit; render.py tools_bar, tools_group, fill_tools_menu). Armin:
   "I don't see them on the homepage of IranUncensored. That's a major failure!" The menus had typed their tools by hand and
   missed the Uprising Simulator; now each lists the register's tools. Own prefix, iutm-.
   In the bar (1240px up) Tools is a menu in the place the Tools link had, a native <details> (render.py tools_bar): it opens
   with scripts off, and site.js closes it on a tap elsewhere and on Escape. The Regime Board left the bar for it, so the bar
   still holds seven items and fits at 1240px. The list opens toward the reading direction, its start under the word. */
.top nav .iutm{display:none;position:relative;flex:none}
@media(min-width:1240px){.top nav .iutm{display:block}}
.top nav .iutm>summary{display:inline-flex;align-items:center;gap:7px;min-height:44px;margin:0;padding:0 12px;border:0;border-radius:var(--r);background:none;color:var(--ink);font-weight:600;font-size:var(--fs-5);cursor:pointer;list-style:none;white-space:nowrap}
.top nav .iutm>summary::-webkit-details-marker{display:none}
.top nav .iutm>summary::after{content:"";width:6px;height:6px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);margin-top:-4px}
.top nav .iutm[open]>summary::after{transform:rotate(225deg);margin-top:3px}
.top nav .iutm>summary:hover,.top nav .iutm[open]>summary{background:var(--raise);color:var(--ink)}
.top nav .iutm>summary.on{color:var(--ink);box-shadow:inset 0 -2px 0 var(--field);border-radius:0}
.iutm-l{position:absolute;inset-inline-start:0;top:100%;z-index:40;display:grid;gap:2px;min-width:15rem;margin-top:4px;padding:6px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r2);box-shadow:0 18px 40px -12px rgba(0,0,0,.8)}
.top nav .iutm-l a{display:flex;align-items:center;min-height:44px;padding:0 12px;border-radius:var(--r);color:var(--ink);font-weight:600;font-size:.9375rem;text-decoration:none;white-space:nowrap;box-shadow:none}
.top nav .iutm-l a:hover{background:var(--raise)}
.top nav .iutm-l a[aria-current="page"]{color:var(--field);box-shadow:none;border-radius:var(--r)}
.top nav .iutm-l a.iutm-x{margin-top:4px;border-top:1px solid var(--line);border-radius:0 0 var(--r) var(--r);color:var(--field);font-weight:700}
@media(min-width:1240px) and (max-width:1439px){.top nav .iutm>summary{padding-inline:8px;font-size:.875rem}}
@media(min-width:1240px) and (max-width:1299px){.top nav .iutm>summary{padding-inline:5px}}
/* In the phone Menu the tools are a group after the bar's links: a heading the width of the Menu, then the tools as tiles. */
.nav-menu-l .iutm-h{grid-column:1/-1;margin:8px 4px 0;font-size:.75rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
html[lang="fa"] .nav-menu-l .iutm-h{letter-spacing:0;font-size:.8125rem}
/* The tools pair up as tiles: the heading is a child of the grid too, so the general rule (the last tile alone spans the row)
   would count it. The bar's links are an even number, so the tools start on an even child: the last spans only when it is alone. */
.nav-menu-l .iutm-h ~ a:last-child:nth-child(odd){grid-column:auto}.nav-menu-l .iutm-h ~ a:last-child:nth-child(even){grid-column:1/-1}

/* People first (4 November 2026): every comment says what it answers, the site's own answers sit folded under the comment
   they answer, and the side of All discussions offers comments worth answering (community.js, row, groupCard, drawJump). */
.said-to{display:flex;flex-direction:column;gap:2px;margin:8px 0 2px;padding:6px 10px;min-height:40px;justify-content:center;border-inline-start:3px solid var(--field);background:var(--raise);border-radius:6px;color:var(--dim);font-size:.85rem;line-height:1.35;text-decoration:none}
.said-to:hover{color:var(--ink)}
.said-to-w{font-weight:700;color:var(--ink)}
.said-to q{quotes:none;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.said-to q::before{content:'\201C'}.said-to q::after{content:'\201D'}
.said.fold{padding:0;background:transparent;border-style:dashed}
.said.fold>:not(.said-fold){display:none}
.said-fold{display:flex;align-items:center;gap:10px;inline-size:100%;min-height:44px;padding:8px 12px;border:0;background:transparent;color:var(--dim);font:600 .88rem/1.3 var(--body);text-align:start;cursor:pointer}
.said-fold-w{flex:1 1 auto;min-width:0}
.said-fold-w::before{content:'';display:inline-block;inline-size:8px;block-size:8px;margin-inline-end:8px;border-radius:50%;background:var(--field);vertical-align:middle}
.said-fold-when{flex:none;font-weight:500}
.said-fold-go{flex:none;color:var(--field);font-weight:700}
.said-fold:hover .said-fold-go{text-decoration:underline}
.said-lit{outline:2px solid var(--field);outline-offset:2px}
.said .meta .tag.xp{color:var(--field);font-weight:700}
.said .meta .tag.newbie{color:var(--ga);font-weight:700}
.reply-here{display:grid;gap:4px;padding:8px 10px;background:var(--raise);border-radius:6px;font-size:.88rem;color:var(--dim)}
.reply-here-w{margin:0}
.reply-here-w b{color:var(--ink)}
.reply-here q{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.dg-k{flex:1 0 100%;margin-top:0;font:700 .75rem/1.2 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.dg-wait{display:inline-block;margin-inline-start:4px;padding:2px 8px;border-radius:999px;background:var(--raise);color:var(--ink);font-weight:700;font-size:.82rem}
.dg-c{display:grid;gap:2px}
.dg-c+.dg-c{padding-top:8px;border-top:1px solid var(--line)}
.dg-who{font-size:.86rem;color:var(--dim)}
.dg-who b{color:var(--ink)}
.dg-to{font-weight:600}
.dg-c .dg-q{color:var(--ink);-webkit-line-clamp:2}
.jump-best{display:grid;gap:4px;margin:0 0 14px;padding:12px;border:1px solid var(--field);border-radius:8px;color:var(--ink);text-decoration:none}
.jump-best:hover{background:var(--raise)}
.jump-best-k{font:700 .75rem/1.3 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--field)}
.jump-best-k::before{content:'';display:inline-block;inline-size:10px;block-size:10px;margin-inline-end:6px;background:var(--field);clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);vertical-align:-1px}
.jump-best-who{font-size:.82rem;color:var(--dim)}
.jump-best-t{font-size:.95rem;line-height:1.45;overflow-wrap:anywhere}
.jump-to{margin:2px 0 0;font-size:.82rem;color:var(--dim)}
.jump-why{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 8px}
.jump-why span{padding:2px 8px;border-radius:999px;background:var(--bg);color:var(--dim);font-size:.78rem;font-weight:700}
.replies>.said.reply{position:relative}
.said .meta>.who{flex-shrink:0;max-width:100%}
html[lang="fa"] .said-to q::before{content:"\00AB"}html[lang="fa"] .said-to q::after{content:"\00BB"}
.said .who>.said-sub{flex-shrink:0}
.replies .said .meta>.who{flex-basis:100%}
/* ---------------------------------------------------------------- support this website (10 November 2026)
   A gold pill in the header, on a row of its own, so the whole phrase stays visible without crowding the measured menu
   (build/donate.py head_iu). Ported from the approved preview (pull request Armishkana/iranuncensored#1), with one change:
   every rule that moves the header is scoped to .top-sup, the class render.py puts on the header ONLY while
   data/donate.json holds a link. With the file empty the header is exactly what it was. Persian uses the same rule
   (inline-end), so the pill sits with the language switch. */
header.top.top-sup .wrap{position:relative;min-height:112px;padding-bottom:52px}
header.top nav a.iu-support{position:absolute;inset-inline-end:var(--gutter);bottom:8px;z-index:2;display:inline-flex;align-items:center;justify-content:center;flex:none;max-width:calc(100% - 2 * var(--gutter));min-height:40px;padding:0 14px;border-radius:999px;background:var(--field);color:var(--on-field);font-weight:800;font-size:.95rem;line-height:1.2;white-space:nowrap;text-decoration:none}
html[lang="fa"] header.top nav a.iu-support{font-family:"Vazirmatn",Tahoma,sans-serif;font-size:.92rem;letter-spacing:0}
header.top nav a.iu-support:hover,header.top nav a.iu-support:focus-visible{background:var(--field-hi);color:var(--on-field);text-decoration:none}
header.top nav a.iu-support:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
header.top-sup~.modes{top:113px}
/* From 1240 to 1439 the menu's links are made smaller and closer with !important (above); the pill keeps its own size. */
@media(min-width:1240px) and (max-width:1439px){
  header.top.top-sup nav a.iu-support:not(.navgo):not(.yt):not(.lang):not(.acct){padding-inline:14px !important;font-size:.95rem}
}
@media(max-width:899px){
  header.top.top-sup .wrap{min-height:104px;padding-bottom:48px}
  header.top nav a.iu-support{bottom:6px;min-height:40px;padding:0 12px;font-size:.875rem}
  html[lang="fa"] header.top nav a.iu-support{font-size:.84rem}
  header.top-sup~.modes{top:105px}
}
html:has(header.top-sup){scroll-padding-top:128px}
footer a.support-foot{color:var(--field);font-weight:800}
/* Two Fourthwall gifts, side by side on the support page, stacked in the dialog. Skool is a smaller text link under them. */
.support-picks{display:grid;gap:12px;margin-top:var(--s5)}
.support-pick{display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-height:44px;padding:16px 18px;border:1px solid var(--line);border-radius:var(--r2);background:var(--panel);color:inherit;text-decoration:none;text-align:start}
.support-pick b{color:var(--field);font:800 1.35rem/1.2 var(--display)}
html[lang="fa"] .support-pick b{font-family:"Vazirmatn",Tahoma,sans-serif;font-weight:800;font-size:1.15rem;line-height:1.35}
.support-pick span{color:var(--dim);font-size:.95rem;line-height:1.45}
.support-pick:hover{border-color:var(--field);text-decoration:none}
.support-pick:focus-visible{outline:3px solid var(--field);outline-offset:2px}
.sheet .support-picks{margin-top:0}
.support-note{margin-top:var(--s4);color:var(--dim);font-size:var(--fs-4);max-width:62ch}
.support-alt{margin-top:var(--s3)}
.support-alt a{display:inline-flex;align-items:center;min-height:44px;color:var(--dim);font-weight:700;font-size:.95rem;text-decoration:underline;text-underline-offset:3px}
html[lang="fa"] .support-alt a{font-family:"Vazirmatn",Tahoma,sans-serif}
.support-alt a:hover{color:var(--field)}
.sheet .support-alt{margin-top:0}
@media(min-width:700px){.field .support-picks{grid-template-columns:1fr 1fr;align-items:stretch}}

/* The share panel (build/share.js): what opens when a reader taps Share. ONE FILE FOR BOTH SITES. Each site's
   render.py adds it to the end of its own site.css, so it is written with the names both stylesheets share
   (--panel --sunk --raise --bg --ink --dim --line --field --on-field --ga --on-grade --r --r2 --body --s1..--s5)
   and with inline-start / inline-end only, so the Persian pages mirror by themselves.
   The panel itself is the sign-in panel's (.sheet .sheet-in .sheet-top .sheet-body): at the foot of a phone's
   screen, in the middle of a computer's. Everything here is what goes inside it.
   The apps are drawn in the site's own ink, not in each app's colours: six logos in six colours would be the
   loudest thing on a site that keeps its one colour for the thing to press. The colour arrives under the
   finger. */
.shr [hidden]{display:none!important}
.shr .sheet-body{gap:var(--s3);padding-block-end:var(--s4)}
.shr-lead{font-weight:600;line-height:1.45;text-wrap:pretty}
/* The card is not clipped (overflow:hidden would let the panel squeeze it shut on a short screen instead of
   scrolling), so the picture rounds its own top corners. */
.shr-card{margin:0;background:var(--sunk);border-radius:var(--r2)}
.shr-pic{display:block;inline-size:100%;block-size:auto;aspect-ratio:1200/630;object-fit:cover;background:var(--raise);border-radius:var(--r2) var(--r2) 0 0}
.shr-meta{display:grid;gap:2px;padding:var(--s3) var(--s4)}
.shr-t{font-weight:700;line-height:1.35;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;overflow-wrap:anywhere}
.shr-h{color:var(--dim);font-size:.85rem;line-height:1.4;text-align:start;unicode-bidi:plaintext}
.shr-copy{display:flex;align-items:stretch;gap:var(--s2)}
.sheet .shr-url{flex:1 1 0;inline-size:auto;min-inline-size:0;color:var(--dim);font-size:.95rem;text-overflow:ellipsis;text-align:left}
.shr-go{flex:none;min-block-size:52px;gap:8px;padding-inline:var(--s4);white-space:nowrap}
.shr-go-i{display:grid;place-items:center;font-style:normal}
.shr-go.ok,.shr-go.ok:hover{background:var(--ga);color:var(--on-grade)}
.shr-say{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.shr-say:not(:empty).shr-say-on{position:static;inline-size:auto;block-size:auto;clip:auto;white-space:normal;font-weight:600}
.shr-apps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(4rem,1fr));gap:var(--s2) var(--s1)}
.shr-app{display:flex;flex-direction:column;align-items:center;gap:6px;inline-size:100%;min-block-size:78px;padding:var(--s1) 2px;background:none;border:0;border-radius:var(--r);color:var(--ink);font:600 .8rem/1.25 var(--body);text-align:center;text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.shr-ic{display:grid;place-items:center;flex:none;inline-size:48px;block-size:48px;border-radius:50%;background:var(--raise);color:var(--ink);font-style:normal;transition:background-color .15s,color .15s,transform .15s cubic-bezier(.16,1,.3,1)}
.shr-app:hover .shr-ic,.shr-app:focus-visible .shr-ic{background:var(--field);color:var(--on-field)}
.shr-app:active .shr-ic{transform:scale(.93)}
.shr-app:focus-visible{outline-offset:-2px}
.shr-after{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s1) var(--s3);padding-block-start:var(--s4);border-block-start:1px solid var(--line);font-weight:600;line-height:1.45}
.shr-after-a{display:inline-flex;align-items:center;min-block-size:44px;color:var(--field);font-weight:700}
.shr-note{color:var(--dim);font-size:.85rem;line-height:1.5}
/* A phone's browser leaves about 650px of height once its own bars are drawn, and the whole panel has to be
   there without scrolling: the picture, the link and every app. So on a short screen the picture stands
   alone (it carries the name and the site already; the title comes back when there is no picture), and it is
   shown whole and a little smaller, never cropped. */
@media(max-height:719px){
  .shr-has-pic .shr-meta{display:none}
  .shr-has-pic{background:none}
  .shr-has-pic .shr-pic{inline-size:auto;max-inline-size:100%;block-size:clamp(120px,27vh,172px);margin-inline:auto;border-radius:var(--r2)}
}
@media(max-height:619px){.shr-has-pic .shr-pic{block-size:clamp(84px,17vh,120px)}}
/* Four to a row on any phone, so eight apps are two even rows and never five and an orphan on a wider phone. */
@media(max-width:639px){.shr-apps{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(min-width:640px){.shr .sheet-body{gap:var(--s4);padding-block-end:var(--s5)}}
@media(prefers-reduced-motion:reduce){.shr-ic{transition:none}}

/* THE PICTURE TO POST (build/shareimg.js, 30 October 2026). Its own sheet (.shot, the share panel's look), the row at
   the top of the share panel (.shr-shot) when the page has a picture, and the "Make a picture" button a tool puts
   beside its Share button (.shot-make). The picture keeps its place while it is being drawn: the box is the picture's
   own shape from the first frame, so nothing jumps when it arrives. */
.shot .sheet-body{gap:var(--s3)}
.shot-fig{position:relative;margin:0 auto;inline-size:auto;block-size:clamp(220px,44vh,560px);aspect-ratio:1080/1350;max-inline-size:100%;background:var(--sunk);border-radius:var(--r2);overflow:hidden}
.shot-fig.is-story{aspect-ratio:1080/1920}
.shot-img{display:block;inline-size:100%;block-size:100%;object-fit:contain}
.shot-fig.is-busy .shot-img,.shot-fig.is-bad .shot-img{visibility:hidden}
.shot-wait{display:none;position:absolute;inset:0;place-items:center;padding:var(--s3);color:var(--dim);font-weight:600;text-align:center}
.shot-fig.is-busy .shot-wait,.shot-fig.is-bad .shot-wait{display:grid}
.shot-sizes{display:flex;gap:var(--s2);justify-content:center}
.shot-size{min-block-size:44px;padding:0 var(--s4);background:none;border:1.5px solid var(--line);border-radius:999px;color:var(--ink);font:600 .95rem/1 var(--body);cursor:pointer}
.shot-size[aria-pressed="true"]{border-color:var(--field);color:var(--field)}
.shot-acts{display:flex;flex-wrap:wrap;gap:var(--s2)}
.shot-acts .btn{flex:1 1 9rem;gap:8px;min-block-size:52px}
.shot-i{display:grid;place-items:center;font-style:normal}
.shot .shr-go{flex:none}
.shot-tip{color:var(--dim);font-size:.92rem;line-height:1.45}
.shot-say{font-weight:600;color:var(--field)}
.shot-say:empty{display:none}
.shr-shot{display:flex;align-items:center;gap:var(--s3);padding:var(--s2);background:var(--sunk);border-radius:var(--r2)}
.shr-shot-pic{flex:none;inline-size:84px;aspect-ratio:1080/1350;padding:0;background:var(--raise);border:0;border-radius:var(--r);overflow:hidden;cursor:zoom-in}
.shr-shot-pic img{display:block;inline-size:100%;block-size:100%;object-fit:cover}
.shr-shot-t{display:grid;gap:var(--s2);min-inline-size:0;justify-items:start}
.shr-shot-l{font-weight:700;line-height:1.35}
.shr-shot-save{min-block-size:48px}
/* on a phone the picture to post takes the place of the link's own picture, so the whole panel still fits */
@media(max-width:639px),(max-height:719px){
  .shr.shr-has-shot .shr-card .shr-pic{display:none}
  .shr.shr-has-shot .shr-card .shr-meta{display:grid}
  .shr.shr-has-shot .shr-card{background:var(--sunk)}
}
.shot-make{gap:8px}
.shot-make svg{flex:none}

/* THE STREAM VIEW (build/stream.js; the tour card and the doors are styled by build/tour.js itself), added to the end of site.css by
   render.py. Each tool's own stream layout is in its own CSS under html.lp-stream (midterms.css, coalition.css, regime.css).
   Nothing here hides content and animates it back. */

/* ---------------------------------------------------------------- the doors and the tour card
   Their look moved into build/tour.js on 1 November 2026 (one home, injected as <style id="lpt-css">, so Iran Uncensored's
   pages wear it too). Only what the stream view does to them is here. */
.lpt-how[hidden],.lps-go[hidden]{display:none}

/* ---------------------------------------------------------------- the stream view: the tool alone, filling the screen */
/* one rem step up on the canvas (18px, not 16), so a tool's smallest words (.75rem) are 13.5px there and 20px on a 1920 x 1080 stream */
html.lp-stream{font-size:18px}
html.lp-stream,html.lp-stream body{overflow:hidden!important;height:100%;background:var(--bg)}
html.lp-stream body{padding:0!important;margin:0!important}
/* everything that is not on the way to the tool goes (dialogs and the tour stay: they are opened from the tool) */
html.lp-stream .lps-path>:not(.lps-path):not(.lps-root):not(.lps-keep):not(dialog){display:none!important}
html.lp-stream .lps-path{display:block!important;position:static!important;transform:none!important;filter:none!important;contain:none!important;content-visibility:visible!important;margin:0!important;padding:0!important;border:0!important;min-height:0!important}
html.lp-stream #calls,html.lp-stream .top,html.lp-stream .modes,html.lp-stream footer{display:none!important}
html.lp-stream .lps-root{position:fixed!important;top:0!important;left:0!important;right:auto!important;bottom:auto!important;width:100vw;height:100vh;max-width:none!important;margin:0!important;border:0!important;border-radius:0!important;box-shadow:none!important;z-index:40;overflow:hidden;background:var(--bg)}
html.lp-stream .lps-root .lpt-doors,html.lp-stream .lps-root .acct-ask{display:none!important}
/* the corner: the site's address, and the way out. Sized with the zoom, so it reads on the stream like the tool does. */
.lps-bar{display:none}
html.lp-stream .lps-bar{display:flex;position:fixed;top:calc(10px * var(--lps-z,1));right:calc(14px * var(--lps-z,1));z-index:60;align-items:center;gap:calc(10px * var(--lps-z,1))}
.lps-mark{font:800 calc(14px * var(--lps-z,1))/1 var(--display);letter-spacing:.02em;color:var(--ink);white-space:nowrap}
.lps-mark b{color:var(--field);font-weight:800}
.lps-x{min-height:max(40px,calc(30px * var(--lps-z,1)));padding:0 calc(12px * var(--lps-z,1));border:1px solid #3a3936;border-radius:999px;background:var(--panel);color:var(--dim);font:700 max(13px,calc(13.5px * var(--lps-z,1)))/1 var(--body);cursor:pointer}
.lps-x:hover{color:var(--ink);border-color:var(--dim)}