@font-face { font-family: 'Montserrat'; font-style: normal; font-display: swap; font-weight: 500; src:url(/fonts/montserrat-cyrillic-ext-500-normal.woff2) format("woff2"); unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-display: swap; font-weight: 500; src:url(/fonts/montserrat-cyrillic-500-normal.woff2) format("woff2"); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-display: swap; font-weight: 500; src:url(/fonts/montserrat-latin-ext-500-normal.woff2) format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-display: swap; font-weight: 500; src:url(/fonts/montserrat-latin-500-normal.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-display: swap; font-weight: 600; src:url(/fonts/montserrat-cyrillic-ext-600-normal.woff2) format("woff2"); unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-display: swap; font-weight: 600; src:url(/fonts/montserrat-cyrillic-600-normal.woff2) format("woff2"); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-display: swap; font-weight: 600; src:url(/fonts/montserrat-latin-ext-600-normal.woff2) format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-display: swap; font-weight: 600; src:url(/fonts/montserrat-latin-600-normal.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-display: swap; font-weight: 700; src:url(/fonts/montserrat-cyrillic-ext-700-normal.woff2) format("woff2"); unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-display: swap; font-weight: 700; src:url(/fonts/montserrat-cyrillic-700-normal.woff2) format("woff2"); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-display: swap; font-weight: 700; src:url(/fonts/montserrat-latin-ext-700-normal.woff2) format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-display: swap; font-weight: 700; src:url(/fonts/montserrat-latin-700-normal.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-display: swap; font-weight: 800; src:url(/fonts/montserrat-cyrillic-ext-800-normal.woff2) format("woff2"); unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-display: swap; font-weight: 800; src:url(/fonts/montserrat-cyrillic-800-normal.woff2) format("woff2"); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-display: swap; font-weight: 800; src:url(/fonts/montserrat-latin-ext-800-normal.woff2) format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-display: swap; font-weight: 800; src:url(/fonts/montserrat-latin-800-normal.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Newsreader'; font-style: normal; font-display: swap; font-weight: 400; src:url(/fonts/newsreader-latin-ext-400-normal.woff2) format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Newsreader'; font-style: normal; font-display: swap; font-weight: 400; src:url(/fonts/newsreader-latin-400-normal.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Newsreader'; font-style: normal; font-display: swap; font-weight: 500; src:url(/fonts/newsreader-latin-ext-500-normal.woff2) format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Newsreader'; font-style: normal; font-display: swap; font-weight: 500; src:url(/fonts/newsreader-latin-500-normal.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Newsreader'; font-style: italic; font-display: swap; font-weight: 400; src:url(/fonts/newsreader-latin-ext-400-italic.woff2) format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Newsreader'; font-style: italic; font-display: swap; font-weight: 400; src:url(/fonts/newsreader-latin-400-italic.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Literata'; font-style: normal; font-display: swap; font-weight: 400; src:url(/fonts/literata-cyrillic-ext-400-normal.woff2) format("woff2"); size-adjust:86%; unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; }
@font-face { font-family: 'Literata'; font-style: normal; font-display: swap; font-weight: 400; src:url(/fonts/literata-cyrillic-400-normal.woff2) format("woff2"); size-adjust:86%; unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: 'Literata'; font-style: normal; font-display: swap; font-weight: 500; src:url(/fonts/literata-cyrillic-ext-500-normal.woff2) format("woff2"); size-adjust:86%; unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; }
@font-face { font-family: 'Literata'; font-style: normal; font-display: swap; font-weight: 500; src:url(/fonts/literata-cyrillic-500-normal.woff2) format("woff2"); size-adjust:86%; unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: 'Literata'; font-style: normal; font-display: swap; font-weight: 700; src:url(/fonts/literata-cyrillic-ext-700-normal.woff2) format("woff2"); size-adjust:86%; unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; }
@font-face { font-family: 'Literata'; font-style: normal; font-display: swap; font-weight: 700; src:url(/fonts/literata-cyrillic-700-normal.woff2) format("woff2"); size-adjust:86%; unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: 'Literata'; font-style: italic; font-display: swap; font-weight: 400; src:url(/fonts/literata-cyrillic-ext-400-italic.woff2) format("woff2"); size-adjust:86%; unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; }
@font-face { font-family: 'Literata'; font-style: italic; font-display: swap; font-weight: 400; src:url(/fonts/literata-cyrillic-400-italic.woff2) format("woff2"); size-adjust:86%; unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: 'Shrikhand'; font-style: normal; font-display: swap; font-weight: 400; src:url(/fonts/shrikhand-latin-ext-400-normal.woff2) format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Shrikhand'; font-style: normal; font-display: swap; font-weight: 400; src:url(/fonts/shrikhand-latin-400-normal.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }


/* Layout: sticky issue nav (tabs + RU/EN switch); full-width colour bands (cover, article heads) over a 1100px column;
   home = cover + 3x3 card grid; articles = text column with a margin aside; "Hoy" = playing card + horoscope; diary = notebook spread. */
:root{
  --bg:#F5F5F1; --paper:#FFFFFF; --ink:#16161A; --muted:#5C5C66; --line:#D8D8D1;
  --accent:#4F5FB5; --accent-ink:#FFFFFF;
  --lemon:#F2E48C; --green:#3B7D62; --orange:#E8A07E; --lilac:#CFC4EE; --blue:#4F5FB5;
  --on-lemon:#16161A; --on-green:#FFFFFF; --on-orange:#16161A; --on-lilac:#16161A; --on-blue:#FFFFFF;
  --fixed-ink:#16161A; --fixed-white:#FFFFFF; --card-red:#D8322B; --stain:#7A5236;
  --font-display:'Montserrat','Helvetica Neue',Arial,sans-serif;
  --font-text:'Newsreader','Literata',Georgia,'Times New Roman',serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#121214; --paper:#1C1C20; --ink:#F2F1EA; --muted:#A5A5AF; --line:#34343A;
    --accent:#9AA6FF; --accent-ink:#121214; color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#121214; --paper:#1C1C20; --ink:#F2F1EA; --muted:#A5A5AF; --line:#34343A;
  --accent:#9AA6FF; --accent-ink:#121214; color-scheme:dark;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-text);line-height:1.5;-webkit-text-size-adjust:100%}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);background:var(--bg);z-index:30}
button{font:inherit;color:inherit;cursor:pointer}
textarea,input{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.in{max-width:1100px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.pad{padding-block:1.6rem 3rem}

.rc-cafe{--rc:var(--orange);--on:var(--on-orange)}
.rc-viajes{--rc:var(--green);--on:var(--on-green)}
.rc-gente{--rc:var(--lilac);--on:var(--on-lilac)}
.rc-cultura{--rc:var(--lemon);--on:var(--on-lemon)}
.rc-libros{--rc:var(--blue);--on:var(--on-blue)}

/* nav */











/* cover */
.cover{background:var(--green);color:var(--on-green)}
.cover .in{padding-block:2.2rem 2.6rem}
.cover-row{display:flex;flex-wrap:wrap;gap:1.6rem;align-items:flex-end;justify-content:space-between}
.cover-text{min-width:0;flex:1 1 320px}
.kicker{font:600 .8rem var(--font-display);letter-spacing:0;text-transform:none;margin:0 0 .6rem}
.logo{font:600 clamp(1.5rem,7.6vw,4.6rem)/1 var(--font-display);letter-spacing:.2em;color:var(--lemon);margin:.2rem 0 .9rem;white-space:nowrap}
.tagline{font:500 clamp(.95rem,2.4vw,1.2rem) var(--font-display);letter-spacing:.04em;margin:0 0 1rem}
.intro{font:500 .95rem/1.6 var(--font-display);max-width:50ch;margin:0;opacity:.95}
.sticker{width:116px;height:116px;border-radius:50%;background:var(--blue);color:var(--fixed-white);display:grid;place-content:center;text-align:center;font:700 .68rem/1.3 var(--font-display);letter-spacing:.1em;text-transform:uppercase;transform:rotate(-8deg);flex:none}
.sticker b{display:block;font-size:1.6rem;letter-spacing:0;line-height:1.1}
.sec{font:600 .8rem var(--font-display);letter-spacing:0;text-transform:none;margin:0 0 1rem}
.secrow{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.6rem 1.2rem;margin-bottom:1rem}
.secrow .sec{margin:0}

/* cards */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:14px}
.card{display:flex;flex-direction:column;align-items:flex-start;gap:.35rem;text-align:left;border:0;border-radius:6px;padding:1.1rem 1.1rem 1.2rem;min-height:230px;background:var(--rc);color:var(--on);transition:transform .15s}
.card:hover{transform:translateY(-3px)}
.art{width:64px;height:64px;color:var(--on);align-self:flex-end;margin-bottom:auto;flex:none}
.art *{fill:currentColor}
.art .cut{fill:var(--rc)}
.art .ray{fill:none;stroke:currentColor;stroke-width:4;stroke-linecap:round}
.art .st{fill:none;stroke:var(--rc);stroke-width:3;stroke-linecap:round}
.lab{font:600 .8rem var(--font-display);letter-spacing:0;text-transform:none}
.lab i{font-style:normal;opacity:.8;letter-spacing:.06em;text-transform:none;margin-left:.4em}
.ct{font:700 1.4rem/1.15 var(--font-display);text-wrap:balance}
.cr{font:500 .9rem var(--font-display);opacity:1}
.cm{font:600 .72rem var(--font-display);letter-spacing:.06em;opacity:1}
.card.plain{background:var(--paper);color:var(--ink);border:2px solid var(--ink)}
.bigch{width:64px;height:64px;border-radius:50%;background:var(--lemon);color:var(--on-lemon);display:grid;place-content:center;font:800 1.7rem/1 var(--font-display);align-self:flex-end;margin-bottom:auto}

/* bands */
.band{background:var(--rc);color:var(--on)}
.band .in{padding-block:1.6rem 2rem}
.bt{font:800 clamp(1.8rem,6vw,3.4rem)/1.05 var(--font-display);margin:0;text-wrap:balance}
.bs{font:500 1rem var(--font-display);margin:.6rem 0 0;opacity:1}
.back{display:none;background:none;border:2px solid currentColor;border-radius:999px;padding:.3rem .85rem;font:600 .78rem var(--font-display);margin-bottom:1.1rem}

/* buttons, controls */



.seg{display:inline-flex;border:2px solid var(--ink);border-radius:999px;overflow:hidden}
.seg :is(button,a[data-a]){border:0;background:none;padding:.4rem .95rem;font:700 .78rem var(--font-display)}
.seg [aria-pressed="true"]{background:var(--ink);color:var(--bg)}
.seg.sm :is(button,a[data-a]){padding:.2rem .65rem;font-size:.7rem}
.tools{display:flex;flex-wrap:wrap;gap:.7rem 1.2rem;align-items:center;margin-bottom:1.4rem}
.lv{display:flex;gap:.6rem;align-items:center}
.lvl{font:600 .8rem var(--font-display);letter-spacing:0;text-transform:none;color:var(--muted)}

/* reader */
.rgrid{display:grid;grid-template-columns:minmax(0,1fr);gap:2rem}
@media (min-width:960px){.rgrid{grid-template-columns:minmax(0,680px) minmax(0,1fr);gap:3rem}}
.para{margin-bottom:1.5rem}
.es{font:400 clamp(1.15rem,1.05rem + .5vw,1.35rem)/1.65 var(--font-text);margin:0;max-width:65ch}
.tr{font:500 .92rem/1.6 var(--font-display);color:var(--muted);margin:.5rem 0 0;max-width:65ch}
.mode-es .tr{display:none}
.mode-tr .es{display:none}
.mode-tr .tr{font-size:1.05rem;color:var(--ink);margin:0}
.plabel{font:600 .8rem var(--font-display);letter-spacing:0;text-transform:none;margin:0 0 .35rem;color:var(--muted)}
.w{background:color-mix(in srgb,var(--rc) 32%,var(--paper));border:0;border-bottom:2px dotted var(--ink);border-radius:2px;padding:0 .12em;font:inherit;color:inherit}
.w.saved{border-bottom-style:solid}
.box{border:2px solid var(--ink);border-radius:6px;padding:1rem;background:var(--paper);margin-bottom:14px}
.box h3{font:600 .8rem var(--font-display);letter-spacing:0;text-transform:none;margin:0 0 .8rem}
.box.gram{background:var(--lemon);color:var(--on-lemon);border-color:var(--fixed-ink)}
.box.gram .btn{background:var(--fixed-ink);color:var(--fixed-white);border-color:var(--fixed-ink)}
.box ul{margin:0 0 .9rem;padding-left:1.1rem;font:500 .88rem/1.55 var(--font-display)}
.chip{display:flex;justify-content:space-between;align-items:center;gap:.6rem;width:100%;text-align:left;border:1.5px solid var(--line);background:none;border-radius:6px;padding:.5rem .7rem;margin-bottom:.4rem}
.chip .cw{display:flex;flex-direction:column;gap:.1rem;min-width:0}
.chip b{font:700 .9rem var(--font-display)}
.chip em{font:500 .8rem var(--font-display);font-style:normal;color:var(--muted)}
.chip .mk{font:700 1rem var(--font-display)}
.chip.saved{border-color:var(--ink);background:color-mix(in srgb,var(--rc) 28%,var(--paper))}
.pes{font:400 1.2rem/1.5 var(--font-text);margin:0 0 .5rem}
.pru{font:500 .88rem/1.55 var(--font-display);color:var(--muted);margin:0 0 .9rem}
.nextrow{margin-top:2rem}



/* grammar */
.rules{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;margin-bottom:2.2rem}
@media (min-width:900px){.rules{grid-template-columns:repeat(2,minmax(0,1fr))}.rule.wide{grid-column:1 / -1}}
.rule{border:2px solid var(--ink);border-radius:6px;background:var(--paper);padding:1.2rem;min-width:0}
.rule h3{font:800 1.5rem/1.15 var(--font-display);margin:0 0 .6rem}
.rule p{font:500 .92rem/1.6 var(--font-display);margin:0 0 .8rem}
.rule .ex-line{font:400 1.1rem/1.5 var(--font-text);margin:0 0 .3rem}
.rule .ex-line small{display:block;font:500 .8rem var(--font-display);color:var(--muted)}
.tbl{overflow-x:auto;margin:0 0 .9rem}
.tbl table{border-collapse:collapse;font:500 .86rem var(--font-display);min-width:100%}
.tbl th,.tbl td{border-bottom:1px solid var(--line);padding:.35rem .7rem;text-align:left;white-space:nowrap}
.tbl th{font-weight:700;color:var(--muted)}
.tag{display:inline-block;background:var(--lemon);color:var(--on-lemon);font:600 .8rem var(--font-display);letter-spacing:0;text-transform:none;padding:.2rem .6rem;border-radius:999px;margin-bottom:.7rem}
.exg{font:600 .8rem var(--font-display);letter-spacing:0;text-transform:none;margin:1.4rem 0 .8rem}
.exq{margin-bottom:1.3rem}
.exq p{font:400 1.2rem/1.5 var(--font-text);margin:0 0 .6rem}
.opts{display:flex;flex-wrap:wrap;gap:.5rem}




.why{font:500 .88rem/1.55 var(--font-display);color:var(--muted);margin:.6rem 0 0}
.score{font:700 .95rem var(--font-display);margin:1.2rem 0 .8rem}

/* vocab */
.vtools{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;margin-bottom:1.2rem}
.addform{display:grid;grid-template-columns:minmax(0,1fr);gap:.6rem;margin-bottom:1.6rem}
@media (min-width:700px){.addform{grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto}}
.field{border:2px solid var(--ink);background:var(--paper);border-radius:6px;padding:.55rem .8rem;min-width:0;font:500 .95rem var(--font-display)}
.vrow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.1rem .8rem;padding:.85rem 0;border-bottom:1px solid var(--line);align-items:center}
.vrow .v1{font:700 1.05rem var(--font-display)}
.vrow .v2{font:500 .92rem var(--font-display);color:var(--muted)}
.vrow .v3{font:500 .72rem var(--font-display);color:var(--muted);letter-spacing:.04em}
.vrow .del{grid-row:1 / span 3;grid-column:2;border:1.5px solid var(--line);background:none;border-radius:50%;width:2rem;height:2rem;font:700 .9rem var(--font-display)}
.empty{font:500 .95rem/1.6 var(--font-display);color:var(--muted);border:2px dashed var(--line);border-radius:6px;padding:1.4rem}
.flash{display:block;width:100%;min-height:200px;border:2px solid var(--ink);border-radius:6px;background:var(--paper);padding:1.4rem;text-align:center}
.flash .f1{font:800 clamp(1.8rem,6vw,2.8rem) var(--font-display);overflow-wrap:anywhere}
.flash .f2{font:500 1.15rem var(--font-display);margin-top:.8rem;color:var(--muted)}
.flash .f3{font:500 .8rem var(--font-display);margin-top:.5rem;color:var(--muted)}
.cnt{font:600 .8rem var(--font-display);letter-spacing:0;text-transform:none;margin:0 0 .8rem}
.rbtns{display:flex;gap:.6rem;margin-top:1rem;flex-wrap:wrap}

/* hoy: card + horoscope */
.cardrow{display:grid;grid-template-columns:minmax(0,1fr);gap:1.6rem;margin-bottom:2.6rem}
@media (min-width:900px){.cardrow{grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:2.6rem}}
.pcard{--cc:var(--fixed-ink);display:block;position:relative;width:min(100%,240px);aspect-ratio:5 / 7;border:3px solid var(--fixed-ink);border-radius:14px;background:var(--fixed-white);color:var(--cc);padding:0;font-family:var(--font-display)}
.pcard.red{--cc:var(--card-red)}
.pcard .c1{position:absolute;top:10px;left:12px;display:flex;flex-direction:column;align-items:center;gap:2px;line-height:1}
.pcard .c1 b{font:800 1.5rem/1 var(--font-display)}
.pcard .c1 i{font-style:normal;font-size:1.3rem}
.pcard .c2{top:auto;left:auto;bottom:10px;right:12px;transform:rotate(180deg)}
.pcard .big{position:absolute;inset:0;display:grid;place-content:center;font-size:5.5rem;line-height:1}
.pcard.flipside{background:repeating-linear-gradient(45deg,var(--blue) 0 10px,color-mix(in srgb,var(--blue) 80%,white) 10px 20px)}
.pcard.flipside .qm{display:grid;place-content:center;height:100%;font:800 3.4rem var(--font-display);color:var(--lemon)}
.cname{font:800 1.4rem/1.15 var(--font-display);margin:1rem 0 .2rem}
.cnru{font:500 .92rem var(--font-display);color:var(--muted);margin:0}
.hint{font:500 .85rem/1.55 var(--font-display);color:var(--muted);margin:.8rem 0 0}
.sign-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:.8rem}
.sign-head .sec{margin:0}
.sign-head .row-arrows{display:flex;gap:.4rem}
.signs{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:4px;padding:4px 4px 10px;margin:0 -4px 1.4rem;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 18px,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(90deg,transparent 0,#000 18px,#000 calc(100% - 36px),transparent);scroll-behavior:smooth}
.signs::-webkit-scrollbar{display:none}
.signs .sign{flex:0 0 108px;scroll-snap-align:start;padding:.75rem .3rem .65rem;border-radius:12px;transition:transform .15s}
.signs .sign:hover{transform:translateY(-2px)}
@media(max-width:560px){.signs .sign{flex-basis:92px}}
@media(prefers-reduced-motion:reduce){.signs{scroll-behavior:auto}.signs .sign{transition:none}}
.sign{border:2px solid var(--ink);background:var(--paper);border-radius:6px;padding:.55rem .3rem;text-align:center;display:flex;flex-direction:column;gap:.1rem;align-items:center}
.sign .sy{font-size:1.5rem;line-height:1.1}
.sign .sn{font:700 .74rem var(--font-display)}
.sign .sd{font:500 .62rem var(--font-display);color:var(--muted)}
.sign[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
.sign[aria-pressed="true"] .sd{color:inherit;opacity:.8}
.rhead{display:flex;flex-wrap:wrap;align-items:baseline;gap:.2rem 1rem;margin-bottom:1.2rem}
.rhead h3{font:800 1.8rem/1.1 var(--font-display);margin:0}
.rhead>span{font:500 .85rem var(--font-display);color:var(--muted)}
.luck{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin-top:1rem}
.luck div{border:2px solid var(--ink);border-radius:6px;padding:.6rem .8rem;background:var(--paper)}
.luck small{display:block;font:600 .75rem var(--font-display);color:var(--muted);margin-bottom:.15rem}
.luck b{font:800 1.1rem var(--font-display)}

/* timeline */
.tls{display:grid;gap:0;max-width:760px}
.tl{display:grid;grid-template-columns:7.5rem minmax(0,1fr);gap:1rem;padding:.8rem 0;border-bottom:1px solid var(--line)}
.tl b{font:800 1rem var(--font-display)}
.tl span{font:400 1.1rem/1.45 var(--font-text);display:block}
.tl small{font:500 .8rem/1.5 var(--font-display);color:var(--muted);display:block;margin-top:.15rem}

/* diary */
.ptop{background:var(--rc);color:var(--on)}
.ptop .in{padding-block:1.6rem 1.8rem}
.ptop .pes{font:500 clamp(1.3rem,3.6vw,2rem)/1.3 var(--font-display);margin:0 0 .6rem;text-wrap:balance}
.ptop .pru{color:inherit;opacity:.9;margin:0 0 .9rem}
.ptop .btn{background:none;color:inherit;border-color:currentColor;margin-right:.5rem}
.spread{display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
@media (min-width:860px){.spread{grid-template-columns:repeat(2,minmax(0,1fr))}}
.page{background:var(--paper);border:2px solid var(--ink);border-radius:6px;padding:1.1rem;min-width:0}
.page h3{font:600 .8rem var(--font-display);letter-spacing:0;text-transform:none;margin:0 0 .8rem}
#draft{width:100%;min-height:280px;resize:vertical;border:0;background-color:transparent;color:var(--ink);font:400 1.05rem/1.7rem var(--font-display);padding:0;background-image:repeating-linear-gradient(transparent,transparent calc(1.7rem - 1px),var(--line) calc(1.7rem - 1px),var(--line) 1.7rem);background-attachment:local}
#draft:focus{outline:none}
.fb{white-space:pre-wrap;font:500 .95rem/1.65 var(--font-display);min-height:6rem}
.page .row{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:.9rem}

.foot{border-top:2px solid var(--ink);margin-top:1rem}
.foot .in{padding-block:1.4rem 2rem;font:500 .78rem/1.6 var(--font-display);color:var(--muted);letter-spacing:.04em}

@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* ===== v3: merged site ===== */


.logo{white-space:normal;letter-spacing:.04em;font-size:clamp(1.9rem,8.4vw,4.4rem);line-height:1.02}
.tagline{font-style:italic}
html[data-lang="fr"] .cover{background:#3B2347;color:#F6EEF7}
html[data-lang="fr"] .logo{color:#E9A547}
html[data-lang="fr"] .sticker{background:#E9A547;color:#2B1A33}
.rowbtns{display:flex;flex-wrap:wrap;gap:.6rem}
.card.issue{min-height:250px}
.nbig{font:800 3.6rem/1 var(--font-display);align-self:flex-end;margin-bottom:auto;letter-spacing:-.02em}
.card.book{min-height:0;gap:.5rem}
.card.book .thumb{width:100%;margin-bottom:.4rem}
.thumb svg,.plate svg{width:100%;height:auto;display:block;border:2px solid var(--fixed-ink);border-radius:6px;background:#E8C89E}
.plate{margin:0 0 1.4rem}
.plate figcaption{font:600 .78rem var(--font-display);color:var(--muted);margin-top:.4rem}
.t{cursor:pointer;border-radius:3px}
.t:hover{background:color-mix(in srgb,var(--rc,var(--lemon)) 26%,transparent)}
.qs{margin:0;padding-left:1.2rem}.qs li{margin-bottom:1rem}.qs .pes{font-size:1.1rem}


.spk{border:1.5px solid var(--line);background:none;border-radius:50%;width:1.9rem;height:1.9rem;margin-left:.4rem;font-size:.85rem;line-height:1;vertical-align:middle;padding:0}
.spk.on-dark{border-color:var(--bg);color:var(--bg);width:2.3rem;height:2.3rem;margin:0}

/* lessons */
.lcol{max-width:760px}
.lbody .lp{font:500 1rem/1.65 var(--font-display);margin:0 0 .9rem}
.lcol .tbl td{white-space:normal;vertical-align:top}.lcol .tbl td small{display:block;color:var(--muted)}
.frx{font:700 1rem var(--font-display)}

/* exercises */
.excol{max-width:760px}
.qp{font:400 1.2rem/1.5 var(--font-text);margin:0 0 .6rem}
.frw{font:800 1.3rem var(--font-display)}
.revtag{display:inline-block;background:var(--lilac);color:var(--on-lilac);font:600 .8rem var(--font-display);letter-spacing:0;text-transform:none;border-radius:999px;padding:.15rem .6rem;margin-bottom:.5rem}
.sign-pl{display:inline-block;margin:.2rem 0 .8rem;padding:.55rem 1.2rem;border-radius:6px;font:800 1.3rem var(--font-display);letter-spacing:.08em;text-transform:uppercase;box-shadow:inset 0 0 0 3px rgba(255,255,255,.85)}
.k-blue{background:#1F4E9C;color:#fff}.k-green{background:#1E8A4D;color:#fff}.k-red{background:#C8372D;color:#fff}
.k-ban{background:#fff;color:#C8372D;box-shadow:inset 0 0 0 3px #C8372D;border:1px solid #C8372D}
.k-board{background:#2B2B33;color:#F5F5F1;font-family:'Newsreader',Georgia,serif;font-weight:500;letter-spacing:.04em}
.ordru{font:500 1rem var(--font-display);margin:0 0 .6rem;color:var(--muted)}
.ordrow{min-height:3rem;border-bottom:2px solid var(--ink);display:flex;flex-wrap:wrap;gap:.4rem;padding:.4rem 0;margin-bottom:.8rem}
.ordph{color:var(--muted);font:500 .85rem var(--font-display);align-self:center}
.ordbank{display:flex;flex-wrap:wrap;gap:.5rem}



.prows{display:grid;gap:14px}
.prow{background:var(--rc);color:var(--on);border-radius:6px;padding:1rem 1.1rem;display:grid;gap:.7rem}
.prow .ph b{font:800 1.8rem var(--font-display);margin-right:.8rem}.prow .ph span{font:600 .9rem var(--font-display)}
.prow .pb{display:flex;flex-wrap:wrap;gap:.6rem}.prow .pn{margin:0;font:600 .8rem var(--font-display)}

/* crossword */
.cwwrap{display:grid;grid-template-columns:minmax(0,1fr);gap:2rem}
@media (min-width:900px){.cwwrap{grid-template-columns:minmax(0,auto) minmax(0,1fr);gap:3rem}}
.cwg{--cs:min(40px,calc((100vw - 34px - (var(--cols) - 1) * 2px) / var(--cols)));display:grid;grid-template-columns:repeat(var(--cols),var(--cs));grid-auto-rows:var(--cs);gap:2px;width:max-content;max-width:100%}
.cwc{position:relative;background:var(--paper);border:2px solid var(--ink);display:grid;place-content:center;font:800 calc(var(--cs) * .5) var(--font-display);cursor:pointer;user-select:none}
.cwc i{position:absolute;top:1px;left:3px;font:700 calc(var(--cs) * .27) var(--font-display);font-style:normal;color:var(--muted)}
.cwc.hl{background:color-mix(in srgb,var(--lemon) 70%,var(--paper));color:var(--on-lemon)}.cwc.hl i{color:inherit}
.cwc.sel{background:var(--lemon);color:var(--on-lemon);outline:3px solid var(--accent);outline-offset:-3px;z-index:1}.cwc.sel i{color:inherit}
.cwc.bad{background:var(--orange);color:var(--on-orange)}
.cwin{position:fixed;left:-120px;top:0;width:60px;height:30px;opacity:0;font-size:16px}
.cwact{font:600 .95rem/1.4 var(--font-display);min-height:2.8rem;margin:0 0 .6rem}.cwact small,.clue small{color:var(--muted);font-weight:500}
.cwl{list-style:none;padding:0;margin:0}
.clue{display:block;width:100%;text-align:left;border:0;background:none;padding:.4rem .5rem;border-radius:6px;font:500 .92rem/1.4 var(--font-display)}
.clue b{margin-right:.3rem}
.clue.on{background:color-mix(in srgb,var(--lemon) 55%,var(--paper));color:var(--fixed-ink)}.clue.on small{color:inherit}

/* deck and playing card */
.deck{position:relative;display:block;width:min(100%,240px);aspect-ratio:5 / 7;background:none;border:0;padding:0}
.deck .dk{position:absolute;inset:0;display:block;transition:transform .2s}
.deck .dk svg{width:100%;height:100%;display:block;filter:drop-shadow(0 2px 3px rgba(0,0,0,.25))}
.dk.d3{transform:translate(9px,9px)}.dk.d2{transform:translate(4px,4px)}
.deck:hover .dk.d1{transform:translateY(-8px) rotate(-3deg)}
.pc{width:min(100%,240px)}
.pc svg{width:100%;height:auto;display:block;filter:drop-shadow(0 3px 6px rgba(0,0,0,.25))}
@keyframes dropin{0%{transform:translate(-50px,-140px) rotate(-16deg) scale(.88);opacity:0}55%{transform:translate(0,12px) rotate(3deg);opacity:1}100%{transform:none;opacity:1}}
.pc.drop{animation:dropin .75s cubic-bezier(.2,.8,.3,1)}

/* vocabulary details */
.vrow .more{grid-column:1;justify-self:start;border:0;background:none;padding:.1rem 0;font:700 .72rem var(--font-display);color:var(--accent);letter-spacing:.04em}
.vdet{grid-column:1 / -1;font:500 .9rem/1.5 var(--font-display);background:var(--paper);border:1px solid var(--line);border-radius:6px;padding:.7rem .9rem;margin-top:.4rem}
.vdet h4{font:600 .8rem var(--font-display);letter-spacing:0;text-transform:none;margin:.5rem 0 .25rem;color:var(--muted)}
.vdet ul{margin:0;padding-left:1.1rem}.vdet small{display:block;color:var(--muted)}.vdet .pos{margin:0;color:var(--muted);font-style:italic}

/* card of the day: face-down fan, turn over, hide again */
.cardpick{margin:0 auto 2.4rem;max-width:560px}
.fan{position:relative;height:clamp(200px,52vw,300px);margin:0 auto 1rem;width:min(100%,520px)}
.fc{position:absolute;left:50%;bottom:0;width:clamp(100px,26vw,160px);aspect-ratio:5/7;padding:0;border:0;background:none;cursor:pointer;transform-origin:50% 140%;transition:transform .25s cubic-bezier(.2,.8,.3,1)}
.fc .fcb{display:block;width:100%;height:100%}
.fc :is(svg,img.playing-card){width:100%;height:100%;display:block;filter:drop-shadow(0 3px 5px rgba(0,0,0,.28))}
.fc0{transform:translateX(-50%) translateX(-140%) rotate(-24deg)}
.fc1{transform:translateX(-50%) translateX(-70%) rotate(-12deg)}
.fc2{transform:translateX(-50%) rotate(0)}
.fc3{transform:translateX(-50%) translateX(70%) rotate(12deg)}
.fc4{transform:translateX(-50%) translateX(140%) rotate(24deg)}
.fc:hover,.fc:focus-visible{translate:0 -14px}
.fc:focus-visible{outline:3px solid var(--ink);outline-offset:4px;border-radius:12px}
.flipc{display:block;width:min(100%,240px);aspect-ratio:5/7;padding:0;border:0;background:none;cursor:pointer;perspective:900px;margin:0 auto}
.flin{display:block;position:relative;width:100%;height:100%;transition:transform .7s cubic-bezier(.3,.7,.2,1);transform-style:preserve-3d}
.flipc.down .flin{transform:rotateY(180deg)}
.flipc.turning .flin{animation:turnup 1s cubic-bezier(.3,.7,.2,1)}
.fl-b,.fl-f{position:absolute;inset:0;display:block;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.fl-b{transform:rotateY(180deg)}
.fl-b :is(svg,img.playing-card),.fl-f :is(svg,img.playing-card){width:100%;height:100%;display:block;filter:drop-shadow(0 3px 6px rgba(0,0,0,.25))}
@keyframes turnup{0%{transform:translateY(-30px) rotateY(180deg) scale(.9)}60%{transform:translateY(6px) rotateY(0) scale(1.03)}100%{transform:none}}
#cardInfo{transition:opacity .35s,filter .35s}
#cardInfo.late{animation:fadein .5s .8s both}
#cardInfo.hid{opacity:.12;filter:blur(5px);pointer-events:none;user-select:none}
@keyframes fadein{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.flin,.fc{transition:none}.flipc.turning .flin,#cardInfo.late{animation:none}}

.ans{margin-top:.7rem}
.ans textarea{width:100%;min-height:5.5rem;font:inherit;padding:.7rem .8rem;border:2px solid var(--ink);border-radius:10px;background:var(--paper);color:var(--ink);resize:vertical}
.ans .row{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.5rem}
.fbl{list-style:none;margin:.7rem 0 0;padding:0;display:grid;gap:.35rem}
.fbl li{padding:.45rem .65rem;border-radius:8px;border:1.5px solid var(--ink);background:var(--paper);font-size:.95rem}
.fbl li.err{background:#FFD9D0;color:#2a0d05}.fbl li.ok{background:#DDF3DA;color:#10300c}.fbl li.tip{background:#FFF1B8;color:#33290a}
.fb .fbl{margin-top:0}

.acct{margin-left:.4rem;border:2px solid var(--ink);background:var(--paper);color:var(--ink);border-radius:999px;padding:.25rem .8rem;font:700 .8rem var(--font-display);cursor:pointer}
.modal{position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.45);display:grid;place-items:center;padding:16px}
.modal[hidden]{display:none}
.mbox{background:var(--paper);color:var(--ink);border:2px solid var(--ink);border-radius:14px;padding:1.4rem;width:min(100%,400px);max-height:90vh;overflow:auto}
.mbox h2{margin:0 0 .8rem;font:800 1.4rem var(--font-display)}
.mbox label{display:block;font-size:.85rem;margin:.6rem 0 0}
.mbox input{display:block;width:100%;margin-top:.2rem;padding:.6rem .7rem;font:inherit;border:2px solid var(--ink);border-radius:8px;background:#fff;color:#111}
.mbox textarea{display:block;width:100%;margin-top:.2rem;padding:.6rem .7rem;font:inherit;border:2px solid var(--ink);border-radius:8px;background:#fff;color:#111;resize:vertical}
.fbk-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.mbox .row{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:1rem}
.lnk{background:none;border:0;padding:0;color:inherit;text-decoration:underline;cursor:pointer;font:inherit}

/* ---- readability redesign: one column, quiet translations, drawer behind a coffee mug ---- */
.col{max-width:680px;margin:0 auto}
.reader .para{margin-bottom:1.6rem}
.reader .es{font-size:1.18rem;line-height:1.75}
.ptr{display:inline-block;margin:.3rem 0 0;border:0;background:none;padding:.1rem 0;font:600 .8rem var(--font-display);letter-spacing:0;text-transform:none;color:var(--muted);border-bottom:1px dotted var(--muted)}
.ptr[aria-expanded="true"]{color:var(--ink)}
.mode-both .ptr,.mode-tr .ptr{display:none}
.mode-es .tr{display:none}
.mode-es .para.open .tr{display:block;padding-left:.8rem;border-left:3px solid var(--rc,var(--line))}
.mode-both .tr{font-size:.86rem;opacity:.85}
.box.fich{background:transparent;border:0;border-left:3px solid var(--rc);border-radius:0;padding:.2rem 0 .2rem .9rem;margin-bottom:1.4rem}
.box.fich p{margin:0;font-size:.9rem}
.subbar{background:var(--bg);border-bottom:1px solid var(--line)}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:.15rem .1rem;padding-top:.6rem;font:600 .78rem var(--font-display)}
.crumbs :is(button,a[data-a]){background:none;border:0;padding:.2rem .35rem;color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.crumbs i{font-style:normal;color:var(--muted);padding:0 .1rem}
.crumbs span{padding:.2rem .35rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:60vw}
.isub{display:flex;gap:.2rem;overflow-x:auto;scrollbar-width:none;padding:.35rem 0 .5rem}
.isub::-webkit-scrollbar{display:none}
.isub :is(button,a[data-a]){border:2px solid transparent;border-radius:999px;background:none;padding:.3rem .85rem;font:700 .78rem var(--font-display);white-space:nowrap}
.isub [aria-selected="true"]{background:var(--ink);color:var(--bg)}
.isub :is(button,a[data-a]):not([aria-selected="true"]){border-color:var(--line)}
/* map */
.espwrap{display:grid;grid-template-columns:minmax(0,1fr);gap:2rem}
@media (min-width:900px){.espwrap{grid-template-columns:minmax(0,420px) minmax(0,1fr);align-items:start}}
.mapfig{margin:0}
.smap{width:100%;height:auto;display:block}
.mp{stroke:var(--paper);stroke-width:1.2;transition:filter .15s}
.mp.on{fill:var(--green);cursor:pointer}
.mp.wait{fill:var(--lilac);cursor:help}
.mp:hover,.mp:focus-visible{filter:brightness(.92)}
.mapfig figcaption{font:600 .78rem var(--font-display);display:flex;flex-wrap:wrap;gap:.3rem .6rem;align-items:center;margin-top:.6rem}
.lg{display:inline-block;width:14px;height:14px;border-radius:3px;margin-left:.5rem;border:1px solid var(--ink)}
.lg.on{background:var(--green)}.lg.wait{background:var(--lilac)}
.lockmsg{flex-basis:100%;margin:.2rem 0 0;min-height:1.3em;font:500 .85rem var(--font-display);color:var(--muted)}
.grid.g2{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.card.lock{opacity:.7;border-style:dashed}
.fold{border:2px solid var(--ink);border-radius:6px;padding:.7rem 1rem;background:var(--paper)}
.fold summary{font:600 .8rem var(--font-display);letter-spacing:0;text-transform:none;cursor:pointer}
@media (prefers-reduced-motion:reduce){.drawer{transition:none}}
.card.lock{background:var(--paper);color:var(--ink);border:2px dashed var(--muted);opacity:1}
.card.lock .bigch{background:var(--bg);color:var(--ink)}
@media (min-width:900px){.espwrap{grid-template-columns:minmax(0,500px) minmax(0,1fr)}}
.mapfig{position:sticky;top:90px}

/* inline blocks */
.blk{margin:2.2rem 0 0}
.bh{font:600 .8rem var(--font-display);letter-spacing:0;text-transform:none;margin:0 0 .9rem;padding-bottom:.5rem;border-bottom:2px solid var(--ink)}
.chips{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:.5rem}
.gl{margin:0 0 1rem;padding-left:1.1rem;font:500 .92rem/1.6 var(--font-display)}
.drow{margin-top:1rem}
.fold.ring{margin-top:1rem}
.fold.ring summary{list-style:none;display:flex;align-items:center;gap:.7rem;letter-spacing:0}
.fold.ring summary::-webkit-details-marker{display:none}
.fold.ring summary::before{content:"";flex:none;width:26px;height:26px;border-radius:50%;border:3px solid var(--stain);box-shadow:inset 0 0 0 3px var(--paper),inset 0 0 0 5px rgba(122,82,54,.35);opacity:.8}
.fold.ring summary::after{content:"+";margin-left:auto;font:700 1.3rem var(--font-display)}
.fold.ring[open] summary::after{content:"–"}
.foldin{padding-top:1rem}
.eart{margin:0 0 1.2rem}
.eimg{display:block;width:min(260px,60vw);height:auto;border-radius:6px}



/* ===== v4: flat magazine headers, top navigation, issue strip with cups ===== */
:root{--hh:57px;--disc:#F5F5F1}
/* header: flat rubric colour, illustration in a round paper sticker */
.bwrap{display:flex;align-items:center;gap:2rem}
.btext{flex:1;min-width:0}
.bfig{flex:none;width:188px;height:188px;border-radius:50%;background:var(--disc);border:2px solid var(--fixed-ink);display:grid;place-items:center;overflow:hidden}
.bfig img{width:86%;height:86%;object-fit:contain}
/* cards: illustration in the same round sticker as the other cards' discs */
.cdisc{flex:none;width:92px;height:92px;border-radius:50%;background:var(--disc);border:2px solid var(--fixed-ink);display:grid;place-items:center;overflow:hidden;align-self:flex-end;margin-bottom:auto}
.cdisc img{width:84%;height:84%;object-fit:contain}
/* top navigation */





/* full-screen menu (phones / narrow windows) */


.mlab{font:600 .8rem var(--font-display);letter-spacing:0;text-transform:none;opacity:1}
.ftog{display:flex;align-items:center;gap:.6rem;margin-top:.8rem}
/* issue strip: cups + sections of the current issue, stays at the top */
.istrip{position:sticky;top:var(--hh);z-index:15;background:var(--bg);border-bottom:2px solid var(--ink)}
.istrip .in{display:flex;align-items:center;gap:1rem 2rem;padding-block:.45rem;flex-wrap:wrap}
.cups{display:flex;gap:.2rem}
.cup{display:flex;flex-direction:column;align-items:center;gap:0;border:0;background:none;padding:.15rem .45rem;border-radius:10px;font:700 .68rem var(--font-display);letter-spacing:.08em;color:var(--muted)}
.cup:hover{background:rgba(0,0,0,.05)}
.cup.on{color:var(--ink);background:color-mix(in srgb,var(--rc) 30%,transparent)}
.cupi{width:34px;height:34px;display:block}
.cupo{fill:none;stroke:var(--ink);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.cupf{fill:var(--stain)}
.itabs{display:flex;gap:.3rem;overflow-x:auto;scrollbar-width:none;flex:1 1 auto}
.itabs::-webkit-scrollbar{display:none}
.itab{border:2px solid var(--ink);background:none;border-radius:999px;padding:.32rem .9rem;font:700 .8rem var(--font-display);white-space:nowrap;color:var(--ink)}
.itab[aria-current="page"]{background:var(--ink);color:var(--bg)}

@media (max-width:700px){
  
  .bwrap{align-items:flex-start;gap:1rem}
  .bfig{width:92px;height:92px;margin-top:.2rem}
  .cdisc{width:76px;height:76px}
  .istrip .in{gap:.5rem;padding-inline:8px;flex-wrap:nowrap}
  .cups{gap:0;flex:none}.cup{padding:.1rem .25rem;font-size:.6rem}
  .cupi{width:24px;height:24px}
  .itab{padding:.28rem .7rem;font-size:.76rem}
}
/* region page: "a fact for a sip of coffee" card at the side */
.rlay{display:grid;grid-template-columns:minmax(0,680px) 290px;gap:3rem;justify-content:center;align-items:start}
.rlay>.col{margin:0;grid-column:1;grid-row:1}
.sip{grid-column:2;grid-row:1;position:sticky;top:calc(var(--hh) + 1.5rem);background:var(--disc);color:var(--fixed-ink);border:2px solid var(--fixed-ink);border-radius:10px;padding:1.1rem 1.1rem 1.2rem;overflow:hidden}
.sipring{position:absolute;right:-26px;top:-26px;width:96px;height:96px;border-radius:50%;border:7px solid var(--stain);opacity:.22;box-shadow:inset 0 0 0 4px rgba(122,82,54,.25)}
.sipk{margin:0;font:600 .8rem var(--font-display);letter-spacing:0;text-transform:none}
.sipt{margin:.1rem 0 .9rem;font:italic 500 .95rem var(--font-text);color:#5b5b60}
.sipd{margin:0;display:grid;gap:.15rem}
.sipd dt{font:600 .8rem var(--font-display);letter-spacing:0;text-transform:none;color:#6b6b70;margin-top:.55rem}
.sipd dt:first-child{margin-top:0}
.sipd dd{margin:0;font:600 .92rem/1.4 var(--font-display)}
.sipf{margin-top:1rem;background:var(--rc);color:var(--on);border-radius:8px;padding:.8rem .9rem}
.sipf p{margin:0;font:500 .95rem/1.45 var(--font-text)}
.sipf .sipfl{font:600 .8rem var(--font-display);letter-spacing:0;text-transform:none;margin-bottom:.35rem}
@media (max-width:1079px){
  .rlay{display:block}
  .sip{position:relative;top:auto;max-width:680px;margin:0 auto 1.6rem}
  .rlay>.col{margin:0 auto}
}
.spk[hidden]{display:none}
/* cover: topic strapline and a one-line issue number in the sticker */
.topics{display:flex;flex-wrap:wrap;gap:.4rem;margin:1.1rem 0 0}
.topic{background:var(--rc);color:var(--on);border:2px solid var(--fixed-ink);border-radius:999px;padding:.2rem .75rem;font:700 .74rem var(--font-display);letter-spacing:.08em;text-transform:lowercase}
.sticker b{font-size:2rem;letter-spacing:-.01em;line-height:1;margin-bottom:.25rem;white-space:nowrap}
.topic{background:var(--disc);color:var(--fixed-ink);display:inline-flex;align-items:center;gap:.4rem}
.topic::before{content:"";width:.6rem;height:.6rem;border-radius:50%;background:var(--rc);border:1.5px solid var(--fixed-ink)}
@media (max-width:700px){.cover-row{align-items:center}.sticker{width:96px;height:96px;margin:-.4rem 0 0 auto;font-size:.56rem;letter-spacing:.06em}.sticker b{font-size:1.6rem}}

/* Language editions: cool olive/cherry (ES), blue/butter yellow (FR).
   Shared tokens also style existing lessons, exercises and issue navigation. */
:root{
 --bg:#FFFFFF;--paper:#FFFFFF;--disc:#FFFFFF;--ink:#292526;--muted:#626063;--line:#DAD9D5;
 --edition:#6E7B37;--edition-ink:#FFFFFF;--edition-accent:#792C43;--edition-accent-ink:#FFFFFF;
 --accent:var(--edition-accent);--accent-ink:#FFFFFF;
 --green:#6E7B37;--lemon:#EFF0D9;--orange:#F5D9DC;--lilac:#C8D9A3;--blue:#792C43;
 /* every band colour is at least dE 15 from white and from each other: no two near-identical tints touch */
 --on-green:#FFFFFF;--on-lemon:#292526;--on-orange:#292526;--on-lilac:#292526;--on-blue:#FFFFFF;
 --fixed-ink:#292526;--card-red:#792C43;
}
html[data-lang="fr"]{
 --edition:#C1DBE8;--edition-ink:#43302E;--edition-accent:#FFF1B5;--edition-accent-ink:#43302E;
 --accent:#43302E;--accent-ink:#FFFFFF;--ink:#43302E;
 --green:#C1DBE8;--lemon:#FFF1B5;--orange:#FFF1B5;--lilac:#FBE6CF;--blue:#86AFCB;
 --on-green:#43302E;--on-lemon:#43302E;--on-orange:#43302E;--on-lilac:#43302E;--on-blue:#43302E;
 --card-red:#43302E;
}
/* Preserve the existing dark-mode preference; no automatic nocturnal feature. */
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#18191A;--paper:#222325;--disc:#222325;--ink:#F4F2ED;--muted:#B8B5B3;--line:#454548;--accent:#E0B3C0;--accent-ink:#292526}html[data-lang="fr"]:not([data-theme="light"]){--ink:#F4F2ED;--accent:#C1DBE8}}
:root[data-theme="dark"]{--bg:#18191A;--paper:#222325;--disc:#222325;--ink:#F4F2ED;--muted:#B8B5B3;--line:#454548;--accent:#E0B3C0;--accent-ink:#292526}
html[data-lang="fr"][data-theme="dark"]{--ink:#F4F2ED;--accent:#C1DBE8}
.cover,html[data-lang="fr"] .cover{background:var(--edition);color:var(--edition-ink)}
.cover .logo,html[data-lang="fr"] .cover .logo{color:inherit}
.sticker,html[data-lang="fr"] .sticker{background:var(--edition-accent);color:var(--edition-accent-ink)}
.mag-note{border:0;padding-top:3.25rem;min-width:0}
.mag-note-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:.8rem}
.mag-note-head h2{margin:.5rem 0 0}
.mag-label{margin:0}
.mag-book{width:160px;height:145px;flex:0 0 160px;object-fit:contain;filter:url(#mag-book-es);transform:translateY(-16px) rotate(-5deg)}
.mag-cup img{width:100%;height:100%;object-fit:contain;filter:url(#mag-cup-es)}
html[data-lang="fr"] .mag-book{filter:url(#mag-book-fr)}
html[data-lang="fr"] .mag-cup img{filter:url(#mag-cup-fr)}
.mag-note-copy{font:400 var(--mag-body,1.25rem)/1.45 var(--font-text);margin:1rem 0;max-width:34ch}
.mag-stage{height:290px;position:relative;display:grid;place-items:center;margin-top:1rem}
.mag-ring{position:absolute;width:280px;height:280px;object-fit:contain;opacity:0;transition:opacity .3s;pointer-events:none}
.mag-fact{position:relative;font:400 var(--mag-body,1.25rem)/1.3 var(--font-text);text-align:center;max-width:185px;margin:0}
.mag-fact[hidden]{display:none}
.mag-cup{position:absolute;inset:0;margin:auto;width:225px;height:225px;background:none;border:0;padding:0;transition:transform .4s}
.mag-note.is-open .mag-cup{transform:translate(95px,-90px) rotate(12deg) scale(.42)}
.mag-note.is-open .mag-ring{opacity:1}
.mag-cup-label{display:block;margin:.5rem auto 0;padding:.4rem 0;background:none;border:0;text-decoration:underline;text-underline-offset:4px;font:500 .75rem/1.5 var(--font-display)}
.mag-note .note-link{font:500 .75rem/1.5 var(--font-display)}

#issue-texts{scroll-margin-top:100px}
@media(prefers-reduced-motion:reduce){.mag-cup,.mag-ring{transition:none}}
/* Keep the initial fan of five cards inside narrow screens. */
@media(max-width:600px){.fan{height:clamp(160px,45vw,230px)}.fc{width:min(18vw,90px)}}

/* A small archive shelf; hover/focus previews and a tap-accessible results drawer. */
.shelf-hint{font:500 .8rem/1.5 var(--font-display);color:var(--muted);max-width:640px;margin:0 0 2.6rem}
.shelf{position:relative;max-width:760px;margin:0 auto 2rem;padding-top:1.7rem}
.shelf-rail{display:flex;align-items:flex-end;justify-content:center;gap:18px;padding:0 20px}
.shelf-volume{position:relative;flex:0 1 140px;min-width:0}
.spine{display:flex;flex-direction:column;align-items:center;justify-content:space-between;width:100%;height:254px;padding:18px 12px;background:var(--rc);color:var(--on);border:0;border-radius:2px 6px 0 0;box-shadow:none;transition:transform .18s}
.shelf-volume:nth-child(2) .spine{height:275px}
.shelf-volume:nth-child(3) .spine{height:263px}
.spine:hover,.spine:focus-visible,.spine[aria-expanded="true"]{transform:translateY(-9px)}
.spine-number{font:700 1.2rem var(--font-display)}
.spine-title{writing-mode:vertical-rl;transform:rotate(180deg);font:500 1.65rem/1.1 var(--font-text);max-height:175px}
.spine-date{font:600 .58rem var(--font-display);letter-spacing:.04em}
.shelf-preview{position:absolute;z-index:5;bottom:calc(100% + 16px);left:50%;transform:translate(-50%,5px);width:260px;max-width:calc(100vw - 40px);background:var(--paper);color:var(--ink);border:1px solid var(--line);padding:16px;box-shadow:0 5px 18px #00000012;opacity:0;visibility:hidden;transition:opacity .15s,transform .15s}
.shelf-preview b{font:600 .8rem var(--font-display)}.shelf-preview p{font:400 1rem/1.4 var(--font-text);margin:.6rem 0 0}
.shelf-volume:first-child .shelf-preview{left:0;transform:translateY(5px)}
.shelf-volume:last-child .shelf-preview{left:auto;right:0;transform:translateY(5px)}
.shelf-volume:hover .shelf-preview,.shelf-volume:focus-within .shelf-preview{opacity:1;visibility:visible;transform:translate(-50%,0)}
.shelf-volume:first-child:hover .shelf-preview,.shelf-volume:first-child:focus-within .shelf-preview,.shelf-volume:last-child:hover .shelf-preview,.shelf-volume:last-child:focus-within .shelf-preview{transform:translateY(0)}
.shelf-ledge{height:5px;border:0;background:#DAD1C1;margin-top:0;box-shadow:none}
.shelf-selection{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,350px);gap:3rem;max-width:850px;margin:2.5rem auto 0;align-items:start}
.shelf-selection h3{font:500 2.2rem/1.1 var(--font-text);margin:.6rem 0 1rem}.shelf-selection p{font-size:1.2rem;line-height:1.45}
.receipt{max-width:355px;width:100%;margin:3rem auto;padding:27px 24px 24px;background:var(--paper);color:var(--ink);border:1px solid var(--line);border-bottom:0;position:relative;box-shadow:3px 5px 0 #00000005;font:400 .75rem/1.6 var(--font-display)}
.receipt::after{content:"";height:8px;position:absolute;left:-1px;right:-1px;top:100%;background:linear-gradient(135deg,var(--paper) 25%,transparent 25%) -4px 0/8px 8px,linear-gradient(225deg,var(--paper) 25%,transparent 25%) -4px 0/8px 8px}
.receipt .rc-brand{text-align:center;font:600 .72rem var(--font-display);text-transform:uppercase;letter-spacing:.1em;margin:0 0 .7rem}
.receipt h3{text-align:center;font:500 1.55rem var(--font-text);margin:0}
.receipt .rc-theme{text-align:center;font-size:.67rem;margin:.5rem 0 1.2rem}
.receipt dl{margin:0;padding:1rem 0;border-block:1px dashed var(--muted)}
.receipt dl>div{display:flex;justify-content:space-between;gap:1rem;margin:.5rem 0}.receipt dt{max-width:65%}.receipt dd{margin:0;text-align:right;white-space:nowrap}
.rc-total{display:flex;justify-content:space-between;gap:1rem;padding:1rem 0;border-bottom:1px dashed var(--muted)}.rc-total strong{font-size:1.3rem}
.receipt .rc-note{font:400 .66rem/1.5 var(--font-display);color:var(--muted);margin:1rem 0}
.receipt .rc-thanks{text-align:center;font:italic 400 1.15rem var(--font-text);margin:1.4rem 0 .8rem}
.rc-barcode{height:30px;max-width:180px;margin:auto;background:repeating-linear-gradient(90deg,var(--ink) 0 1px,transparent 1px 3px,var(--ink) 3px 6px,transparent 6px 8px,var(--ink) 8px 10px,transparent 10px 14px)}
.receipt .rc-number{text-align:center;font-size:.65rem;letter-spacing:.3em;margin:.3rem 0 0}
.shelf-selection .receipt{margin:0}
.region-note{grid-column:2;grid-row:1;min-width:0;position:sticky;top:calc(var(--hh) + 1.5rem)}
.region-note h2{font:500 1.6rem var(--font-text);margin:1.7rem 0 .5rem}
.region-details{margin:1rem 0;display:grid;gap:.35rem}.region-details dt{font:600 .8rem var(--font-display);text-transform:none;letter-spacing:0;margin-top:.6rem;color:var(--muted)}.region-details dd{margin:0;font:400 1.1rem/1.4 var(--font-text)}
.region-note .mag-stage{margin-top:.5rem}.region-note .mag-fact{font-size:1.1rem;max-width:185px;line-height:1.25}
.region-note.is-open .mag-cup{transform:translate(80px,-95px) rotate(12deg) scale(.4)}
@media(max-width:1079px){.region-note{position:relative;top:auto;max-width:680px;margin:0 auto 2rem}}
@media(max-width:700px){
 .shelf-rail{gap:12px;padding:0 12px}.shelf-volume{flex-basis:100px}.spine{height:245px;padding:14px 8px}.spine-title{font-size:1.25rem;max-height:175px}.spine-number{font-size:1rem}.spine-date{font-size:.53rem}
 .shelf-volume:nth-child(2) .spine{height:260px}.shelf-volume:nth-child(3) .spine{height:250px}.shelf-selection{grid-template-columns:1fr;gap:1.5rem}.shelf-selection .receipt{margin:0 auto}.shelf-preview{width:240px}
}
@media(hover:none){.shelf-preview{display:none}}
@media(prefers-reduced-motion:reduce){.spine,.shelf-preview{transition:none}}
/* A rose marker clearly identifies the active page in the Spanish edition. */
html[data-lang="es"] .itab[aria-current="page"],html[data-lang="es"] .cup.on,html[data-lang="es"] .isub [aria-selected="true"]{background:#DDA7B9;color:#3F1728;border-color:#DDA7B9}
.culture-group{margin:0 0 2.6rem}.espwrap~.culture-group{margin-top:2.6rem}.culture-source{font:400 .75rem/1.5 var(--font-display);color:var(--muted);margin:2rem 0}.culture-source a{text-underline-offset:3px;color:var(--accent)}.note-link{text-align:center;font:500 .75rem var(--font-display);margin:1.5rem 0 0}
.culture-group .grid{grid-template-columns:repeat(auto-fill,minmax(min(250px,100%),1fr))}
.region-note .mag-fact{font-size:1rem;line-height:1.25;max-width:175px}

/* One site navigation; a quiet location line replaces duplicate issue tabs. */
.issue-location{border-bottom:1px solid var(--line);background:var(--bg)}
.issue-location .in{display:flex;align-items:center;gap:.8rem;padding-block:.65rem;font:500 .72rem var(--font-display);color:var(--muted)}
.issue-location :is(button,a[data-a]){border:0;background:none;padding:0;color:var(--accent);font:600 .72rem var(--font-display)}
.issue-actions{display:flex;flex-wrap:wrap;gap:.7rem;margin:1.7rem 0}
.issue-archive{margin-top:4rem;padding-top:2.5rem;border-top:1px solid var(--line)}
.rc-edition{--rc:var(--edition);--on:var(--edition-ink)}
.rc-practice{--rc:#E58FAB;--on:#3F1728}
html[data-lang="fr"] .rc-practice{--rc:#FFE774;--on:#43302E}
.grammar-topic{max-width:950px}.grammar-topic .rules{grid-template-columns:minmax(0,1fr)}

/* Global navigation above; an intentionally closed, modal issue drawer. */
:root{--sw:400px;--active-pink:#DDA7B9;--active-pink-ink:#3F1728}









.side{position:fixed;left:0;top:0;bottom:0;width:min(var(--sw),90vw);z-index:81;background:var(--edition);color:var(--edition-ink);overflow-y:auto;padding:0;overscroll-behavior:contain;transform:translateX(-100%);visibility:hidden;transition:transform .2s ease}
body.sideon .side{transform:none;visibility:visible}
.side-toolbar{display:flex;align-items:center;justify-content:space-between;padding:14px 24px;background:var(--edition-accent);color:var(--on-blue);font:500 .75rem/1.5 var(--font-display)}
.side-toolbar button{width:42px;height:42px;border:1px solid currentColor;border-radius:50%;background:none;font:400 1.8rem/1 var(--font-text);color:inherit}
.side-issue-head{display:block;width:100%;padding:8px 28px 28px;text-align:left;border:0;background:var(--edition-accent);color:var(--on-blue)}
.side-issue-head span{display:block;font:500 .8rem/1.5 var(--font-display)}
.side-issue-head strong{display:block;max-width:17ch;margin-top:.75rem;font:500 2rem/1.1 var(--font-text)}
html[data-lang="fr"] .side-toolbar,html[data-lang="fr"] .side-issue-head{background:var(--ink);color:var(--lemon)}
.sgroup{padding:12px 20px 24px}
.si,.side summary{display:block;width:100%;text-align:left;background:none;color:inherit;border:0;border-radius:0;padding:18px 8px;font:500 1.65rem/1.15 var(--font-text);white-space:normal}
.side summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:1rem;cursor:pointer}
.side summary::-webkit-details-marker{display:none}
.side summary::after{content:'+';font:400 1.65rem/1 var(--font-text)}
.side details[open]>summary::after{content:'−'}
.side-nested{padding:0 0 12px}.side-nested .si{font:500 .85rem/1.45 var(--font-display);padding:12px 8px}
.si:hover,.side summary:hover{background:#ffffff18}
.side .si[aria-current="page"],.side-lessons[data-current="true"]>summary{background:var(--active-pink);color:var(--active-pink-ink)}
.issue-list{padding:12px 20px;background:var(--lemon);color:var(--on-lemon)}
.issue-list>summary{font-size:1.4rem}



.sback{display:none}
body.sideon{overflow:hidden}
body.sideon .sback{display:block;position:fixed;inset:0;z-index:80;background:rgba(24,22,23,.64)}

@media(max-width:899px){
 
 
 
 
 
 
 
 
 .side-toolbar{padding:10px 20px}.side-issue-head{padding:10px 28px 24px}.side-issue-head strong{font-size:1.8rem}
 .si,.side summary{font-size:1.5rem;padding-block:16px}
}
/* The cover contains one number, one title and a direct reading action. */
.magazine-cover{background:var(--lemon);color:var(--on-lemon)}
html[data-lang="fr"] .magazine-cover{background:var(--green);color:var(--on-green)}
.magazine-cover .in{padding:32px clamp(24px,4vw,56px);max-width:1200px}
.cover-layout{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:2rem;align-items:center}
.cover-heading{min-width:0}.cover-date{margin:0 0 .5rem;font:500 .75rem/1.5 var(--font-display)}
.mag-issue-number{color:var(--edition-accent);margin:0}
html[data-lang="fr"] .mag-issue-number{color:var(--lemon)}
.mag-issue-number span{display:block;font:400 1.15rem/1 'Shrikhand',serif;margin-bottom:.4rem}
.mag-issue-number b{display:block;font:400 clamp(100px,15vw,190px)/1.05 'Shrikhand',serif;letter-spacing:-.06em;-webkit-text-stroke:1.5px var(--fixed-ink);text-shadow:3px 3px 0 var(--fixed-ink),6px 6px 0 var(--fixed-ink)}
.cover-title{min-width:0}.mag-title.bt,.mag-title.logo{margin:0;max-width:14ch;font:500 clamp(1.8rem,3vw,2.8rem)/1.1 var(--font-text);letter-spacing:-.02em;text-wrap:balance;white-space:normal}
.cover-read{display:inline-flex;gap:1.5rem;align-items:center;margin-top:1.5rem;padding:.4rem 0;border:0;border-bottom:1px solid currentColor;background:none;color:inherit;font:600 .75rem/1.5 var(--font-display)}
.cover-read span{font-size:1.25rem}
.mag-note-copy{font:400 1.25rem/1.45 var(--font-text)}

@media(max-width:700px){.cover-layout{grid-template-columns:144px minmax(0,1fr);gap:1rem}.mag-issue-number b{font-size:92px;text-shadow:2px 2px 0 var(--fixed-ink),4px 4px 0 var(--fixed-ink);-webkit-text-stroke:1px var(--fixed-ink)}.mag-issue-number span{font-size:.9rem}.mag-title.bt,.mag-title.logo{font-size:1.9rem}.magazine-cover .in{padding:24px 20px}.cover-read{margin-top:1rem}}
@media(max-width:380px){.cover-layout{grid-template-columns:116px minmax(0,1fr);column-gap:12px}.mag-issue-number b{font-size:78px}.mag-title.bt,.mag-title.logo{font-size:1.65rem}}
@media(prefers-reduced-motion:reduce){.side{transition:none}}

/* On a narrow drawer use two continuous colour fields, without extra bands. */
@media(max-width:899px){
 
 
 
 .side .issue-list{background:none;color:inherit;padding-top:4px}
 .side .issue-list>summary{font-size:1.5rem}
 
}

/* Site destinations stay visible; the labelled contents control opens only an issue. */









.side{background:var(--paper);color:var(--ink)}
.side .issue-list{background:none;color:inherit;padding-top:4px}
.side .side-lessons>summary{background:none;color:inherit}
.side .si[aria-current="page"]{background:var(--active-pink);color:var(--active-pink-ink)}
.si:hover,.side summary:hover{background:color-mix(in srgb,var(--ink) 5%,transparent)}




.cwprint{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1rem;margin-top:1.4rem;padding-top:1.2rem;border-top:1px solid var(--line)}.cwprint span{font:500 .75rem/1.4 var(--font-display);color:var(--muted)}a.btn{text-decoration:none;color:inherit}
/* columns: the whole magazine at a glance */
.card.wide{grid-column:span 2}
@media(max-width:700px){.card.wide{grid-column:auto}}
.card.toc .ct{font-size:1.6rem;margin-bottom:.6rem}
.toc-list{list-style:none;margin:0 0 .8rem;padding:0;columns:2;column-gap:2rem;width:100%;counter-reset:toc}
.toc-list li{break-inside:avoid;display:flex;gap:.7rem;align-items:baseline;padding:.45rem 0;border-top:1px solid color-mix(in srgb,currentColor 25%,transparent);font:400 1.05rem/1.3 var(--font-text)}
.toc-list i{font:700 .7rem var(--font-display);font-style:normal;opacity:1;min-width:2.2em}
.toc-go{margin-top:auto;font:700 .8rem var(--font-display);text-decoration:underline;text-underline-offset:4px}
@media(max-width:700px){.toc-list{columns:1}}
.all-start{margin:0 0 2.5rem}
.all-issue{margin:0 0 3.2rem}
.all-head{display:flex;align-items:flex-end;gap:1.2rem;border-bottom:2px solid var(--ink);padding-bottom:.8rem;margin-bottom:1rem}
.all-head>b{font:400 4.2rem/.8 'Shrikhand',serif;color:var(--edition-accent)}
.all-head h2{margin:.2rem 0 0;font:500 1.8rem/1.1 var(--font-text)}
.all-head .btn{margin-left:auto}
@media(max-width:700px){.all-head{flex-wrap:wrap}.all-head>b{font-size:3rem}.all-head .btn{margin-left:0}}
.scene-img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border:2px solid var(--fixed-ink);border-radius:6px;background:#fff}
.book-cast{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:1.6rem;align-items:center;margin:0 0 2rem;background:#fff;color:var(--fixed-ink);border:2px solid var(--fixed-ink);border-radius:8px;padding:1rem 1.4rem}
.book-cast img{width:100%;height:auto;display:block}
.book-cast h3{font:600 .8rem var(--font-display);letter-spacing:0;text-transform:none;margin:0 0 .6rem}
.book-cast p{font:400 1.05rem/1.45 var(--font-text);margin:0 0 .5rem}
.book-cast.portrait{grid-template-columns:minmax(0,220px) minmax(0,1fr)}
.extra-fig{float:right;width:min(34%,210px);margin:.2rem 0 1rem 1.4rem;shape-outside:margin-box}
.extra-fig img{width:100%;height:auto;display:block}
@media(max-width:700px){.book-cast,.book-cast.portrait{grid-template-columns:1fr}.book-cast.portrait img{max-width:200px;margin:0 auto}.extra-fig{width:38%}}
.reader .es,.reader .tr{white-space:pre-line}.bk-gram{margin:-.4rem 0 1rem}

/* ===== vocabulary: deck of cards ===== */
.vplay{display:grid;grid-template-columns:minmax(0,1fr);gap:1.4rem 2.4rem;align-items:center;border:2px solid var(--ink);border-radius:18px;background:var(--paper);padding:1.4rem;margin-bottom:1.8rem}
@media(min-width:760px){.vplay{grid-template-columns:200px minmax(0,1fr);padding:1.8rem 2rem}}
.vplay-deck{position:relative;width:150px;height:190px;margin:0 auto}
.vplay-deck span{position:absolute;inset:0;border:2px solid var(--ink);border-radius:14px;background:var(--paper)}
.vplay-deck .c3{background:var(--lilac);transform:rotate(-9deg) translate(-10px,4px)}
.vplay-deck .c2{background:var(--lemon);transform:rotate(6deg) translate(10px,2px)}
.vplay-deck .c1{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.2rem;background:var(--green);color:var(--on-green);transition:transform .25s}
.vplay:hover .vplay-deck .c1{transform:translateY(-4px) rotate(-1.5deg)}
.vplay-deck .c1 b{font:400 3.6rem/1 'Shrikhand',var(--font-display)}
.vplay-deck .c1 i{font:600 .78rem var(--font-display);font-style:normal;opacity:.9}
.vplay-deck.empty .c1{background:var(--paper);color:var(--muted)}
.vplay-h{font:800 1.5rem/1.1 var(--font-display);margin:0 0 1rem}
.vopt{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1rem;margin-bottom:.8rem}
.vopt-l{font:600 .82rem var(--font-display);color:var(--muted);min-width:8.5rem}
.vseg{flex-wrap:wrap;border-radius:14px;max-width:100%}
.vseg button{padding:.5rem .9rem;font-size:.8rem;min-height:40px}
.vseg small{font-size:.72rem;opacity:.7;margin-left:.15em}
@media(max-width:560px){.vopt{flex-direction:column;align-items:stretch;gap:.4rem}.vseg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%}.vseg button{padding:.45rem .3rem;line-height:1.2}.vseg small{display:block;margin:0}
.vplay-deck{width:110px;height:140px}.vplay-deck .c1 b{font-size:2.6rem}.vplay-h{text-align:center}.vopt-row{justify-content:center}}
.vopt-row{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center;margin-top:1.1rem}
.vtoggle{border:2px dashed var(--ink);background:none;border-radius:999px;padding:.55rem 1.05rem;font:700 .8rem var(--font-display);min-height:44px}
.vtoggle[aria-pressed="true"]{border-style:solid;background:var(--lemon);color:var(--on-lemon)}
.vgo{padding:.7rem 1.6rem;font-size:.9rem;min-height:48px}
.vplay .hint{margin:.8rem 0 0}
.vround{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;background:var(--lemon);color:var(--on-lemon);border-radius:18px;padding:1.1rem 1.4rem;margin-bottom:1.2rem}
.vround h3{font:800 1.2rem var(--font-display);margin:0}
.vround p{font:500 .9rem var(--font-display);margin:.2rem 0 0}


.vsec-h{display:flex;align-items:center;gap:.6rem;font:800 1.35rem var(--font-display);margin:0 0 1rem}
























.vstage{max-width:560px;margin:0 auto}
.vtop{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.6rem 1rem;margin-bottom:1.4rem}
.vleft{font:700 .95rem var(--font-display);margin:0}
.vtop-acts{display:flex;gap:.5rem}
.vdeck{position:relative;height:clamp(260px,52vw,320px);margin:0 auto 1rem;perspective:1200px}
.vghost,.vcard{position:absolute;inset:0;border:2px solid var(--ink);border-radius:20px}
.vghost{background:var(--paper);transition:transform .3s}
.vghost.g1{background:var(--lemon);transform:rotate(2.5deg) translate(6px,6px)}
.vghost.g2{background:var(--lilac);transform:rotate(-3deg) translate(-6px,10px)}
.vghost.g3{background:var(--orange);transform:rotate(4deg) translate(10px,14px)}
.vdeck.b0 .vghost{display:none}.vdeck.b1 .g2,.vdeck.b1 .g3{display:none}.vdeck.b2 .g3{display:none}
.vdeck.shake .vghost.g1{animation:vsh1 .55s ease}.vdeck.shake .vghost.g2{animation:vsh2 .55s ease}.vdeck.shake .vghost.g3{animation:vsh1 .55s ease reverse}.vdeck.shake .vcard{animation:vsh0 .55s ease}
@keyframes vsh0{30%{transform:translateX(-26px) rotate(-6deg)}65%{transform:translateX(18px) rotate(4deg)}}
@keyframes vsh1{35%{transform:translateX(40px) rotate(12deg)}70%{transform:translateX(-14px) rotate(-3deg)}}
@keyframes vsh2{35%{transform:translateX(-44px) rotate(-14deg)}70%{transform:translateX(16px) rotate(5deg)}}
.vcard{display:block;width:100%;padding:0;background:none;color:inherit;font:inherit;text-align:center;cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none;transform-style:preserve-3d;transition:transform .45s cubic-bezier(.2,.8,.2,1),border-color .15s;border:0}
.vcard:active{cursor:grabbing}
.vface{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;padding:1.4rem 1.4rem 1.6rem;border:2px solid var(--ink);border-radius:20px;background:var(--paper);backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:0 10px 24px -14px rgba(0,0,0,.35)}
.vback{background:var(--green);color:var(--on-green);transform:rotateY(180deg)}
.vcard.on{transform:rotateY(180deg)}
.vlab{position:absolute;top:14px;left:18px;right:18px;text-align:left;font:600 .72rem var(--font-display);opacity:.7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vask{font:500 .9rem var(--font-display);color:var(--muted)}
.vword{font:800 clamp(1.7rem,7vw,2.6rem)/1.12 var(--font-display);overflow-wrap:anywhere;text-wrap:balance}
.vback .vword{font-size:clamp(1.5rem,6vw,2.2rem)}
.vtap{position:absolute;bottom:14px;font:500 .75rem var(--font-display);color:var(--muted)}
.vex{font:400 italic 1rem/1.45 var(--font-text);max-width:34ch;opacity:.95}
.vsrc{font:600 .72rem var(--font-display);opacity:.8}
.vstamp{position:absolute;top:18px;font:800 1rem var(--font-display);padding:.25rem .7rem;border:3px solid currentColor;border-radius:8px;opacity:0;transition:opacity .12s;pointer-events:none;z-index:2}
.vs-r{left:18px;color:var(--green);transform:rotate(-8deg)}
.vs-l{right:18px;color:var(--accent);transform:rotate(8deg)}
.vcard.on .vs-r{left:auto;right:18px;transform:rotateY(180deg) rotate(-8deg)}
.vcard.on .vs-l{right:auto;left:18px;transform:rotateY(180deg) rotate(8deg)}
.vcard.on .vs-l{color:var(--on-green)}
.vcard.on .vs-r{color:var(--on-green)}
.vcard.lean-r .vs-r,.vcard.lean-l .vs-l{opacity:1}
.vcard.out-r{transform:translateX(130%) rotate(18deg)!important;opacity:0;transition:transform .24s ease-in,opacity .24s ease-in}
.vcard.out-l{transform:translateX(-130%) rotate(-18deg)!important;opacity:0;transition:transform .24s ease-in,opacity .24s ease-in}
.vcard.on.out-r{transform:translateX(130%) rotate(18deg) rotateY(180deg)!important}
.vcard.on.out-l{transform:translateX(-130%) rotate(-18deg) rotateY(180deg)!important}
.vspk{display:flex;justify-content:center;margin-bottom:.6rem}
.vpiles{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:2rem}
.vpile{display:flex;align-items:center;gap:.8rem;min-height:88px;border:2px solid var(--ink);border-radius:18px;padding:.8rem 1rem;font:inherit;text-align:left;transition:transform .15s,box-shadow .15s;box-shadow:0 4px 0 var(--ink)}
.vpile:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}
.vpile.again{background:var(--orange);color:var(--on-orange)}
.vpile.know{background:var(--green);color:var(--on-green);justify-content:flex-end;text-align:right}
.vpile.hot{transform:scale(1.04);box-shadow:0 8px 0 var(--ink)}
.vpile.hit{transform:scale(.97)}
.vp-stack{position:relative;flex:none;width:42px;height:54px;border:2px solid var(--ink);border-radius:8px;background:var(--paper);color:var(--ink);display:grid;place-content:center;box-shadow:3px -3px 0 -1px var(--paper),3px -3px 0 1px var(--ink)}
.vp-stack b{font:400 1.4rem/1 'Shrikhand',var(--font-display)}
.vp-txt{display:flex;flex-direction:column;gap:.15rem;min-width:0}
.vp-t{font:800 1.15rem/1.1 var(--font-display)}
.vp-s{font:500 .75rem/1.3 var(--font-display);opacity:.85}
.vkeys{text-align:center;margin-top:1rem}
@media(hover:none){.vk-kb{display:none}}
@media(max-width:480px){.vpile{flex-direction:column;justify-content:center!important;text-align:center!important;gap:.4rem;min-height:110px}.vpile.know{flex-direction:column-reverse}.vtop-acts .btn{padding:.45rem .8rem}}
@media(prefers-reduced-motion:reduce){.vcard,.vghost,.vtile,.vpile,.vplay-deck .c1{transition:none}.vdeck.shake *{animation:none!important}}

/* horoscope: plain labels, translation on hover / tap */
.hbox h3.hlab{font:800 1.15rem/1.2 var(--font-display);letter-spacing:0;text-transform:none;margin:0 0 .5rem}
.tip{position:relative;display:inline;border:0;background:none;padding:0;font:inherit;color:inherit;cursor:help;text-decoration:underline dotted 2px;text-decoration-color:color-mix(in srgb,currentColor 45%,transparent);text-underline-offset:.22em}
.tipb{position:absolute;left:-.3rem;bottom:calc(100% + 8px);transform:translateY(4px);white-space:nowrap;background:var(--ink);color:var(--bg);font:600 .8rem/1.2 var(--font-display);letter-spacing:0;text-transform:none;padding:.4rem .65rem;border-radius:8px;opacity:0;pointer-events:none;transition:opacity .12s,transform .12s;z-index:5}
.tipb::after{content:"";position:absolute;left:1rem;top:100%;border:5px solid transparent;border-top-color:var(--ink)}
.tip:hover .tipb,.tip:focus-visible .tipb,.tip.on .tipb{opacity:1;transform:none}
.rhead h3 .tip{text-decoration-thickness:2px}
@media(prefers-reduced-motion:reduce){.tipb{transition:none}}

/* ===== mini doodles (CSS masks: the line takes the colour of the surface) ===== */
.dood{display:block;background:currentColor;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain}
.card .cdood{flex:none;width:108px;height:96px;align-self:flex-end;margin:-.2rem -.2rem auto 0;color:var(--on);transition:transform .25s}
.card:hover .cdood{transform:rotate(-6deg) scale(1.06)}
@media(max-width:700px){.card .cdood{width:84px;height:76px}}
.bfig.isdood{border:0;border-radius:0;background:none;overflow:visible;width:200px;height:180px}
.bfig.isdood .bdood{width:100%;height:100%;color:var(--on);transform:rotate(-4deg)}
@media(max-width:700px){.bfig.isdood{width:96px;height:88px}}
.flow-fig .bdood{width:150px;height:130px;color:var(--on)}
.fold.ring.hasdood summary::before{display:none}
.fdood{flex:none;width:34px;height:30px;color:var(--ink)}
.col{position:relative}
.mdood,.wdood{display:none}
@media(min-width:1180px){
  .mdood{display:block;position:absolute;top:0;bottom:0;left:calc(100% + 3.5rem);width:170px;pointer-events:none}
  .mdood-i{position:sticky;top:calc(var(--hh) + 4rem);width:170px;height:150px;color:var(--ink);opacity:.9;transform:rotate(-7deg)}
  .blk.hasdood{position:relative}
  .wdood{display:block;position:absolute;right:calc(100% + 3.5rem);top:-.6rem;width:120px;height:96px;color:var(--accent);transform:rotate(6deg)}
}
@media(prefers-reduced-motion:reduce){.card .cdood{transition:none}}
.flow-fig:has(.dood){border:0;border-radius:0;background:none;overflow:visible;width:150px;height:130px}
.flow-fig .bdood{width:100%;height:100%;transform:rotate(-4deg)}
@media(max-width:700px){.flow-fig:has(.dood){width:84px;height:76px}}
@media(min-width:1180px){.band .bfig.isdood{display:none}.mdood{width:200px}.mdood-i{width:200px;height:176px}}

/* French lesson and culture pages keep their small motif in the heading. */
.band:has(.frdood) .bfig.isdood{display:block}

/* word popover: opens right next to the tapped word */
.pop{position:absolute;z-index:45;width:340px;background:var(--paper);color:var(--ink);border:2px solid var(--ink);border-radius:14px;padding:.8rem .9rem .85rem 1rem;box-shadow:0 12px 30px -14px rgba(0,0,0,.45);animation:pop-in .14s ease-out}
.pop.above{animation-name:pop-in-up}
@keyframes pop-in{from{opacity:0;transform:translateY(-4px)}}
@keyframes pop-in-up{from{opacity:0;transform:translateY(4px)}}
.pop-arrow{position:absolute;left:var(--ax,50%);top:-9px;width:14px;height:14px;margin-left:-7px;background:var(--paper);border-left:2px solid var(--ink);border-top:2px solid var(--ink);transform:rotate(45deg)}
.pop.above .pop-arrow{top:auto;bottom:-9px;transform:rotate(225deg)}
.pop.docked{position:fixed;left:12px!important;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));top:auto!important;width:auto!important;max-width:420px;margin:0 auto}
.pop.docked .pop-arrow{display:none}
.pop-top{display:flex;align-items:flex-start;gap:.6rem}
.pop .sh-w{min-width:0;flex:1}
.pop .sw{font:800 1.2rem/1.2 var(--font-display);overflow-wrap:anywhere}
.pop .str{font:400 1.05rem/1.35 var(--font-text);margin-top:.15rem}
.pop .str:empty{display:none}
.pop .x{flex:none;width:30px;height:30px;margin:-.35rem -.45rem 0 0;border:0;background:none;border-radius:50%;font:700 1.1rem/1 var(--font-display);color:var(--muted)}
.pop .x:hover{background:var(--line);color:var(--ink)}
.pop .acts{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin-top:.7rem}
.pop .save{border:2px solid var(--accent);background:var(--accent);color:var(--accent-ink);border-radius:999px;padding:.4rem .9rem;min-height:36px;font:700 .8rem var(--font-display)}
.pop .save.on{background:none;color:var(--accent)}
.pop .save:disabled{opacity:.5;cursor:default}
.pop .more,.pop .look{border:0;background:none;padding:.4rem .2rem;min-height:36px;font:700 .78rem var(--font-display);color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.pop .sh-body{max-height:min(40vh,260px);overflow:auto;margin-top:.7rem;padding-top:.6rem;border-top:1px solid var(--line);font:500 .85rem/1.5 var(--font-display)}
.pop .sh-body h4{font:700 .75rem var(--font-display);margin:.5rem 0 .25rem;color:var(--muted)}
.pop .sh-body ul{margin:0;padding-left:1.1rem}.pop .sh-body li{margin-bottom:.3rem}
.pop .sh-body small{display:block;color:var(--muted)}.pop .sh-body .pos{margin:0 0 .2rem;color:var(--muted);font-style:italic}
.t.lk-on,.w.lk-on{background:var(--lemon);color:var(--on-lemon);border-radius:3px;box-shadow:0 0 0 2px var(--lemon)}
@media(prefers-reduced-motion:reduce){.pop{animation:none}}
/* France: official region shapes, native links and a matching numbered card list. */
.france-regions{margin-bottom:2.5rem;gap:2.25rem}
.fr-region-list{min-width:0}.fr-region-group .ct{overflow-wrap:anywhere}
.fr-mapfig{top:calc(var(--hh,70px) + 16px)}
.fr-mapfig .hint{font-size:.9rem;margin:0 0 .4rem}
.fr-map{overflow:visible}
.fr-region-link{outline:none}
.fr-region-link path{fill:#C4DCE5;stroke:var(--paper);stroke-width:1.6;stroke-linejoin:round;transition:fill .15s}
.fr-region-link:hover path,.fr-region-link:focus-visible path{fill:#E8C989;stroke:var(--ink);stroke-width:2.5}
.fr-map-number{font:700 15px var(--font-display);fill:var(--fixed-ink);pointer-events:none;dominant-baseline:middle;paint-order:stroke;stroke:#C4DCE5;stroke-width:2px}
.fr-mapfig figcaption{font:400 .78rem/1.5 var(--font-display);color:var(--muted)}
.fr-map-credit{font:400 .68rem/1.5 var(--font-display);margin:.5rem 0 0}.fr-map-credit a{color:var(--muted);text-underline-offset:3px}
@media(max-width:899px){.fr-mapfig{position:static;max-width:580px;width:100%;margin:auto}.france-regions{gap:2rem}}
@media(prefers-reduced-motion:reduce){.fr-region-link path{transition:none}}

.fr-overseas-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.5rem;margin-bottom:1rem}
.fr-inset-link{display:flex;flex-direction:column;text-decoration:none;color:var(--ink);border:1px solid var(--line);border-radius:8px;overflow:hidden}
.fr-inset-link svg{width:100%;height:72px;display:block;flex-shrink:0}
.fr-inset-link span{padding:.25rem .3rem .5rem;font:500 .66rem/1.4 var(--font-display);text-align:center;overflow-wrap:anywhere}
.fr-inset-link:hover,.fr-inset-link:focus-visible{border-color:var(--ink)}
.fr-insets-title{font:600 .8rem var(--font-display);margin:.5rem 0 .75rem}
.fr-map-number{font-size:18px}
@media(max-width:599px){.fr-overseas-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.fr-inset-link span{font-size:.75rem}.fr-inset-link svg{height:90px}}

@media(min-width:900px){.fr-map{max-height:calc(100svh - 400px);min-height:220px}}

/* French regions waiting for an issue */
.fr-mapfig{--fr-open:#7FB2C6;--fr-wait:color-mix(in srgb,var(--line) 70%,var(--paper))}
.fr-region-link:not(.fr-locked) path{fill:var(--fr-open)}
.fr-region-link:not(.fr-locked) .fr-map-number{stroke:var(--fr-open)}
.fr-locked{cursor:help}
.fr-region-link.fr-locked path,.fr-inset-link.fr-locked svg path{fill:var(--fr-wait)}
.fr-region-link.fr-locked:hover path,.fr-region-link.fr-locked:focus-visible path{fill:var(--fr-wait);filter:brightness(.94);stroke:var(--paper);stroke-width:1.6}
.fr-region-link.fr-locked .fr-map-number{stroke:var(--fr-wait);opacity:.55}
:is(button,a).fr-inset-link{background:none;padding:0;font:inherit;text-align:center;width:100%;color:var(--muted)}
.fr-inset-link:not(.fr-locked) svg path{fill:var(--fr-open)}
.fr-legend{display:flex;flex-wrap:wrap;gap:.3rem 1rem;align-items:center;margin-bottom:.3rem}
.fr-legend .lg{margin:0 .35rem 0 0;vertical-align:-2px}
.lg.fr-lg.on{background:var(--fr-open)}.lg.fr-lg.wait{background:var(--fr-wait)}

/* archive spines: fat issue numbers, like the cover */
.spine-number{display:flex;align-items:flex-start;gap:.08em;font:400 2.6rem/1 'Shrikhand',var(--font-display);letter-spacing:-.02em}
.spine-number small{font:400 .8rem/1 'Shrikhand',var(--font-display);margin-top:.35em}
@media(max-width:700px){.spine-number{font-size:2.1rem}}

/* Spain: Canaries as a separate inset under the peninsula map */
.es-insets{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,200px));gap:.6rem}
.es-inset{display:flex;flex-direction:column;background:var(--paper);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ink) 12%,transparent);border-radius:8px;overflow:hidden;padding:.5rem .4rem .2rem}
.es-inset .smap{height:64px}
.es-inset span{padding:.25rem .3rem .4rem;font:500 .72rem/1.4 var(--font-display);text-align:center;color:var(--ink)}
.es-inset.es-locked span{color:var(--muted)}

/* Lightbulb hints: optional explanations behind a small bulb */
.htip{position:relative;display:inline-flex;vertical-align:middle;margin-left:.35rem;font:400 .85rem/1.45 var(--font-display);letter-spacing:0;text-transform:none}
.htip-b{display:inline-grid;place-items:center;width:28px;height:28px;padding:0;border:0;border-radius:50%;background:transparent;color:color-mix(in srgb,currentColor 55%,transparent);cursor:help;transition:background .15s,color .15s}
.htip-b:hover,.htip-b:focus-visible,.htip.on .htip-b{background:color-mix(in srgb,#FFE774 70%,transparent);color:var(--fixed-ink,#2b2422)}
.htip-p{position:absolute;z-index:40;top:calc(100% + 6px);left:-8px;width:max-content;max-width:min(300px,80vw);padding:.6rem .8rem;border-radius:10px;background:var(--fixed-ink,#2b2422);color:#fff;font:400 .85rem/1.45 var(--font-display);text-align:left;box-shadow:0 8px 24px rgba(0,0,0,.18);display:none;transform:translate(var(--dx,0px),0)}
@keyframes htipIn{from{opacity:0;margin-top:-4px}to{opacity:1;margin-top:0}}
.htip.on .htip-p,.htip-b:focus-visible+.htip-p{display:block;animation:htipIn .15s ease-out}
@media (hover:hover) and (pointer:fine){.htip:hover .htip-p{display:block;animation:htipIn .15s ease-out}}
.hint-row{display:flex;justify-content:flex-end;margin:.2rem 0}
.vkeys{display:flex;justify-content:center;margin-top:.4rem}
.addform .htip{align-self:center;justify-self:start;margin:0}
@media (min-width:700px){.addform:has(.htip){grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto auto}}
.tools .htip{align-self:center}
.map-credit{font-size:.75rem}
@media print{.htip{display:none}}
@media (prefers-reduced-motion:reduce){.htip-p{animation:none!important}}

/* ---------- feedback: quick reactions (corner) + footer button + dialog; same surfaces as the rest of the site ---------- */
.rx-bar{display:flex;align-items:center;gap:3px;padding:3px;background:var(--paper);border-radius:12px;box-shadow:0 6px 22px color-mix(in srgb,var(--ink) 12%,transparent)}
.rx-l{font:600 .8rem var(--font-display);letter-spacing:0;text-transform:none;color:var(--muted);padding:0 .45rem 0 .55rem;white-space:nowrap}
.rx-b,.rx-chip{display:grid;place-items:center;width:38px;height:38px;padding:6px;border:0;border-radius:9px;background:none;cursor:pointer;transition:background .15s}
.rx-b:hover{background:var(--surface-control,#eee)}
.rx-b.on{background:var(--surface-selected,#eee)}
.rx-b:focus-visible,.rx-chip:focus-visible,.rx-min:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.rx-i{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none}
.rx-ask{max-width:min(78vw,300px);padding:.65rem .9rem;background:var(--paper);color:var(--ink);border-radius:12px;box-shadow:0 6px 22px color-mix(in srgb,var(--ink) 12%,transparent);font:500 .8rem/1.45 var(--font-display);animation:rx-in .25s ease-out}
.rx-more{font-weight:700;text-underline-offset:3px}
@keyframes rx-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.fbk-cta{margin-left:auto;display:inline-flex;align-items:center;gap:.5rem;padding:.3rem 1rem .3rem .3rem}
.fbk-cta img{width:28px;height:28px;padding:2px;border-radius:50%;background:#fff;object-fit:contain}
.fbk-cta span{white-space:nowrap}
@media (max-width:560px){.ftog{flex-wrap:wrap;row-gap:.8rem}.fbk-cta{order:9;margin-left:0}}

.fbk-rx{display:flex;gap:.4rem;border:0;padding:0;margin:.4rem 0 0}
.fbk-rx legend{font-size:.85rem;padding:0;margin-bottom:.35rem}
.fbk-rxo{flex:1;display:flex!important;flex-direction:column;align-items:center;gap:.15rem;margin:0!important;padding:.5rem .3rem;border-radius:10px;background:var(--surface-control,#eee);cursor:pointer;font:600 .72rem var(--font-display)!important;text-align:center;transition:background .15s}
.fbk-rxo:hover{background:var(--surface-selected,#eee)}
.fbk-rxo input{position:absolute;opacity:0;width:1px;height:1px}
.fbk-rxo .rx-i{width:40px;height:40px}
.fbk-rxo:has(input:checked){background:var(--surface-selected,#eee);box-shadow:inset 0 0 0 2px var(--accent)}
.fbk-rxo:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
.fbk-done{text-align:center}
.fbk-done img{width:140px;height:140px;object-fit:contain;margin:0 auto .2rem;display:block}
.fbk-done .row{justify-content:center}
#fbk{cursor:pointer}#fbk .mbox{cursor:auto}

/* line doodles are black on transparent: flip them to light lines in dark mode */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .rx-i{filter:invert(1)}}
:root[data-theme="dark"] .rx-i{filter:invert(1)}
@media (prefers-reduced-motion:reduce){.rx,.rx-b,.fbk-rxo{transition:none}.rx-ask{animation:none}}

/* ---------- privacy / about pages ---------- */
.legal-in{max-width:720px;padding-block:2.5rem 3.5rem}
.legal h1{font:800 clamp(1.8rem,5vw,2.6rem)/1.1 var(--font-display);margin:0 0 1.4rem}
.legal h2{font:700 1.05rem/1.3 var(--font-display);margin:2rem 0 .5rem}
.legal p,.legal li{font-size:1.06rem;line-height:1.6}
.legal p{margin:0 0 .8rem}
.legal a{color:inherit;text-underline-offset:3px}
.legal-lead{font-size:1.2rem!important;padding:1rem 1.2rem;border-radius:12px;background:var(--surface-soft,#f4f4f4)}
.legal-list{padding-left:1.1rem;margin:0}.legal-list li{margin-bottom:.5rem}
.legal-date{margin-top:2rem!important;font:500 .8rem var(--font-display)!important;color:var(--muted)}
.foot-links{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;margin-top:.5rem}
.foot-links a{color:inherit;text-underline-offset:4px}

/* Navigation links retain the existing button/card presentation. */
:where(a[data-a]){color:inherit;text-decoration:none;cursor:pointer;box-sizing:border-box}
a[data-a]:focus-visible{outline:2px solid currentColor;outline-offset:3px}

/* Guided learning UI: use the same display type for instructions and responses.
   Editorial reading pages explicitly keep the site's text face. */
.learning-ui{font-family:var(--font-display)}
.learning-ui :is(h1,h2,h3,button,input,textarea){font-family:inherit}
.learning-ui :is(h1,h2){font-weight:700}
.learning-ui :is(.btn,.tile){min-height:44px}
.learning-ui .field{font-size:max(16px,1rem)}
.ui-arrow{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.opt-row{display:flex;align-items:center;gap:15px;width:100%;padding:15px;text-align:left;border-radius:10px;font-weight:500;font-size:14px;line-height:1.5;min-height:48px}
.feedback{font:500 13px/1.7 var(--font-display);padding:12px;border-radius:10px}
/* lookup: the set phrase around the tapped word, and a phrase the reader selected */
.pop .sh-ph{margin-top:.65rem;padding-top:.55rem;border-top:1px solid var(--line)}
.pop .sh-phh{margin:0 0 .3rem;font:600 .72rem var(--font-display);color:var(--muted)}
.pop .sh-phr{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin:.15rem 0;font:400 .98rem/1.35 var(--font-text)}
.pop .sh-phr b{font:700 .95rem var(--font-display)}
.pop .sh-phs{flex:none;width:2rem;height:2rem;border-radius:50%;border:1px solid var(--line);background:none;color:var(--ink);font:700 1rem var(--font-display)}
.pop .sh-phs.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.pop .sh-trin{display:block;width:100%;margin-top:.35rem;border:0;border-bottom:1px solid var(--line);background:none;padding:.3rem 0;font:400 1rem var(--font-text);color:var(--ink);outline:none}
.pop .sh-trin:focus{border-color:var(--ink)}
.phpick{position:absolute;z-index:60;border:0;border-radius:99px;padding:.45rem .9rem;background:var(--ink);color:var(--bg);font:600 .82rem var(--font-display);box-shadow:0 4px 14px rgba(0,0,0,.18)}
.pop .sh-trin[hidden],.pop .sh-ph[hidden],.phpick[hidden]{display:none}
/* grammar textbook: table of contents */
.gtoc{list-style:none;padding:0;margin:0;display:grid;gap:.6rem;max-width:760px}
.gtoc-row{width:100%;display:flex;align-items:center;gap:1rem;text-align:left;border:2px solid var(--ink);border-radius:8px;background:var(--paper);padding:.8rem 1rem;color:var(--ink)}
.gtoc-row:hover{background:var(--line)}
.gtoc-row .fat-n{flex:none;min-width:3.2rem;font:400 1.5rem/1 'Shrikhand',var(--font-display)}
.gtoc-row>span{flex:1;min-width:0;display:flex;flex-direction:column;gap:.15rem}
.gtoc-t{font:800 1.05rem/1.25 var(--font-display)}
.gtoc-row small{font:500 .85rem var(--font-display);color:var(--muted)}
.gtoc-row em{flex:none;font:600 .78rem var(--font-display);font-style:normal;color:var(--muted)}
@media(max-width:520px){.gtoc-row em{display:none}}
/* a country map can show regions that have no page yet as a quiet background (the USA before every state is written) */
.fr-region-bg path{fill:color-mix(in srgb,var(--line) 45%,var(--paper));stroke:var(--paper);stroke-width:1}

/* English edition: navy, brick red and cream (American print), with the same contrast rules as Spanish and French */
html[data-lang="en"]{
 --edition:#1F3F7A;--edition-ink:#FFFFFF;--edition-accent:#B4432D;--edition-accent-ink:#FFFFFF;
 --accent:#1F3F7A;--accent-ink:#FFFFFF;--ink:#1E2533;
 --green:#1F3F7A;--lemon:#F3E6C4;--orange:#F4D6CC;--lilac:#C9D8EE;--blue:#B4432D;
 --on-green:#FFFFFF;--on-lemon:#1E2533;--on-orange:#1E2533;--on-lilac:#1E2533;--on-blue:#FFFFFF;
 --card-red:#B4432D;
}
html[data-lang="en"] .rc-practice{--rc:#9FBFE6;--on:#1E2533}
html[data-lang="en"]{--active-pink:#C9D8EE;--active-pink-ink:#14284F}
html[data-lang="en"] .mag-cup img{filter:url(#mag-cup-en)}
html[data-lang="en"] .mag-book{filter:url(#mag-book-en)}
html[data-lang="en"] .rd-hint{border-left-color:var(--green);background:color-mix(in srgb,var(--lilac) 30%,var(--bg))}
@media(prefers-color-scheme:dark){html[data-lang="en"]:not([data-theme="light"]){--ink:#F4F2ED;--accent:#A9C4E8;--accent-ink:#14284F}}
html[data-lang="en"][data-theme="dark"]{--ink:#F4F2ED;--accent:#A9C4E8;--accent-ink:#14284F}
/* the reader's place in the magazine and the newest issue, above the cover */
.my-issue{border-bottom:1px solid var(--line);background:var(--bg)}
.my-issue .in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.6rem 1.4rem;padding-block:.75rem}
.my-where{margin:0;font:500 .9rem/1.45 var(--font-display);color:var(--ink);max-width:62ch}
.my-new{border:1px solid var(--line);background:var(--paper);color:var(--ink);border-radius:999px;padding:.45rem .95rem;font:700 .82rem var(--font-display);cursor:pointer;text-align:left}
.my-new:hover,.my-new:focus-visible{border-color:var(--ink)}
.my-new-k{display:inline-block;background:var(--active-pink);color:var(--active-pink-ink);border-radius:999px;padding:.05rem .5rem;margin-right:.35rem;font-size:.72rem}

/* Shared button, answer and tile geometry and states. Contextual layout stays in its owner stylesheet. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.35em;vertical-align:middle;text-align:center;border:2px solid var(--ink);background:var(--paper);color:var(--ink);border-radius:999px;padding:.5rem 1.05rem;font:700 .8rem/1.35 var(--font-display)}
.btn.pri{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.opt{border:2px solid var(--ink);background:var(--paper);border-radius:999px;padding:.4rem 1rem;font:700 .85rem var(--font-display)}
.opt.ok{background:var(--green);border-color:var(--green);color:var(--fixed-white)}
.opt.bad{background:var(--orange);border-color:var(--orange);color:var(--on-orange)}
.tile{border:2px solid var(--ink);background:var(--paper);border-radius:6px;padding:.4rem .8rem;font:700 .95rem var(--font-display)}
.tile.on{background:var(--lemon);color:var(--on-lemon)}
.tile.ok{background:var(--green);color:#fff;border-color:var(--green)}.tile.bad{background:var(--orange);color:var(--on-orange);border-color:var(--orange)}
/* Three kinds of buttons, three looks:
   answers  = the content you choose (outlined cards, set in the reading face)
   actions  = do something (filled accent for the main step, quiet pill for the rest)
   utility  = reset / start again (text with an icon, no box) */
@media screen{
  .opt {background:var(--paper);color:var(--ink);border-radius:12px;padding:.5rem 1.05rem;
    box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--ink) 18%,transparent);
    font:500 1.05rem/1.3 var(--font-text);transition:box-shadow .15s,background .15s}
  .opt:not(:disabled):hover {box-shadow:inset 0 0 0 2px var(--accent);background:color-mix(in srgb,var(--accent) 5%,var(--paper))}
  .opt.ok {box-shadow:none;background:var(--green);color:var(--on-green)}
  .opt.bad {box-shadow:none;background:var(--orange);color:var(--on-orange)}
  .btn:not(.pri):not(.ghost) {background:transparent;box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--ink) 22%,transparent)}
  .btn:not(.pri):not(.ghost):hover {background:var(--surface-selected);box-shadow:none}
  .btn.pri {box-shadow:none}
  .btn.ghost {background:none;padding:.5rem .2rem;color:var(--muted);font-weight:600;text-decoration:underline;text-decoration-color:color-mix(in srgb,currentColor 35%,transparent);text-underline-offset:4px}
  .btn.ghost:hover {background:none;color:var(--ink)}
}


.opt.dim{opacity:1;color:var(--muted);background:none;border-color:var(--line)}
.btn[disabled]{opacity:1;color:var(--muted);border-color:var(--line);cursor:default}

/* A cover has its own readable foreground, including in dark mode. */
.a0-cover .btn.ghost,.a0-cover .btn.ghost:hover{color:inherit}

/* Subtle coffee wisps and brief feedback never block reading or input. */
/* Two loose pencil wisps, fading as they leave the coffee. */
.ritual-steam{position:absolute;left:29%;top:-17%;width:45%;height:70%;overflow:visible;pointer-events:none;color:var(--stain);opacity:.85;transition:opacity .3s ease;mask-image:linear-gradient(to top,transparent 2%,#000 18%,#000 58%,transparent 96%)}
.cover-coffee .ritual-steam{color:var(--fixed-ink)}
.steam-wisp{transform-box:fill-box;transform-origin:50% 100%;animation:ritual-steam 6.8s ease-in-out infinite}
.steam-wisp-two{animation-duration:8.2s;animation-delay:-3.4s}
.steam-ribbon{fill:currentColor;opacity:.12}
.steam-pencil{fill:none;stroke:currentColor;stroke-width:1.1;stroke-linecap:round;opacity:.35}
.ritual-arrive .mag-cup img{animation:ritual-set-down 560ms ease-out both}
@media(hover:hover){.mag-cup:hover .ritual-steam{opacity:1}.mag-cup:hover .steam-pencil{stroke-width:1.35}}
.mag-cup:focus-visible .ritual-steam{opacity:1}
.is-open .ritual-steam{opacity:0;visibility:hidden;transition:opacity .2s ease,visibility 0s .2s}
.is-open .steam-wisp{animation-play-state:paused}
.cwg{position:relative}
.ritual-pencil{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:2}
.ritual-pencil path{fill:none;stroke:var(--ink);stroke-width:1.7;stroke-linecap:round;opacity:.7;stroke-dasharray:1;stroke-dashoffset:0;animation:ritual-draw 520ms ease-out both;vector-effect:non-scaling-stroke}
.ritual-sound{font:500 .75rem/1.5 var(--font-display);background:none;border:0;color:inherit;padding:.6rem 0;min-height:44px;text-decoration:underline;text-underline-offset:4px}
.ritual-sound{margin-left:.75rem}
@keyframes ritual-set-down{0%{transform:translateY(-18px) rotate(-2deg)}70%{transform:translateY(2px) rotate(.5deg)}100%{transform:none}}
@keyframes ritual-steam{0%{opacity:0;transform:translate(-2px,12px) scale(.88,.92) rotate(-4deg)}25%{opacity:.8}60%{opacity:.65;transform:translate(3px,-5px) scale(1.03,1.05) rotate(3deg)}100%{opacity:0;transform:translate(-3px,-24px) scale(1.12,1.12) rotate(-2deg)}}
@keyframes ritual-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@media(prefers-reduced-motion:reduce){.ritual-arrive .mag-cup img,.steam-wisp,.ritual-pencil path{animation:none}.ritual-steam{display:none}}

.ritual-pencil path.ritual-restored{animation:none}


/* The same fact cup sits on the right of every issue heading. */
.magazine-cover .cover-layout{grid-template-columns:minmax(140px,.65fr) minmax(180px,1fr) 270px;gap:clamp(16px,3vw,40px)}
.cover-coffee.mag-note{padding:0;width:270px;justify-self:end;align-self:center;color:var(--fixed-ink)}
.cover-coffee .mag-stage{height:245px;margin:0}
.cover-coffee .mag-cup{width:220px;height:220px}
.cover-coffee .mag-ring{width:240px;height:240px}
.cover-coffee .mag-fact{font-size:1rem;line-height:1.25;max-width:162px}
.cover-coffee.is-open .mag-cup{transform:translate(85px,-78px) rotate(12deg) scale(.35)}
.cover-coffee .mag-cup-label{color:inherit;margin:0;min-height:32px}
.cover-receipt{display:block;margin-top:1.5rem;padding:.5rem 0;border:0;border-bottom:1px solid currentColor;background:none;color:inherit;font:500 .8rem/1.5 var(--font-display)}
.issue-intro{max-width:60ch;font:400 1.2rem/1.5 var(--font-text);margin:0 0 2rem}
.receipt{scroll-margin-top:calc(var(--hh,100px) + 24px)}
@media(min-width:701px) and (max-width:999px){.magazine-cover .cover-layout{grid-template-columns:140px minmax(160px,1fr) 230px;gap:16px}.cover-coffee.mag-note{width:230px}.magazine-cover .mag-issue-number b{font-size:126px}}
@media(max-width:700px){
 .magazine-cover .cover-layout{grid-template-columns:116px minmax(0,1fr);gap:12px}
 .magazine-cover .mag-issue-number b{font-size:78px}
 .cover-coffee.mag-note{grid-column:1/-1;justify-self:center;width:250px}
 .cover-coffee .mag-stage{height:210px}.cover-coffee .mag-cup{width:190px;height:190px}.cover-coffee .mag-ring{width:210px;height:210px}
 .cover-coffee .mag-fact{font-size:.95rem;max-width:145px}.cover-coffee.is-open .mag-cup{transform:translate(78px,-65px) rotate(12deg) scale(.35)}
 .cover-receipt{margin-top:.75rem}.magazine-cover .in{padding-block:20px}
}
/* Masthead: the issue number fills the whole band and hangs a little below it. */
.magazine-cover{position:relative;overflow:visible}
.magazine-cover .cover-layout{grid-template-columns:auto minmax(17rem,1fr) 240px;align-items:center;column-gap:clamp(20px,3vw,44px)}
.magazine-cover .cover-heading{align-self:stretch;display:flex;align-items:center;position:relative;z-index:2}
.magazine-cover .mag-issue-number{display:flex;align-items:flex-start;gap:.12em;margin:0 0 -26px}
/* the title gets a real line length; a two-digit number never squeezes it */
.magazine-cover .mag-title.bt,.magazine-cover .mag-title.logo{max-width:20ch}
.magazine-cover .mag-issue-number span{font-size:1.3rem;margin:.55rem 0 0}
.magazine-cover .mag-issue-number b{font-size:clamp(150px,15vw,230px);line-height:.86;letter-spacing:-.07em;text-shadow:4px 4px 0 var(--fixed-ink),8px 8px 0 var(--fixed-ink);-webkit-text-stroke:2px var(--fixed-ink)}
.magazine-cover .cover-date{margin:0 0 .9rem}
.magazine-cover+*{position:relative}
.magazine-cover~.in{padding-top:clamp(40px,4vw,56px)}
.cover-coffee .mag-cup-label{margin:0 auto;text-align:center}
@media(min-width:701px) and (max-width:999px){.magazine-cover .cover-layout{grid-template-columns:auto minmax(14rem,1fr) 200px}.magazine-cover .mag-issue-number b{font-size:128px}.cover-coffee.mag-note{width:200px}}
@media(max-width:700px){
 .magazine-cover .cover-layout{grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:end}
 .magazine-cover .cover-title{grid-row:1;grid-column:1/-1;padding:0 0 4px}
 .magazine-cover .cover-heading{grid-row:2;grid-column:1;align-items:flex-end}
 .magazine-cover .mag-issue-number{margin:0 0 -20px}
 .magazine-cover .mag-issue-number span{font-size:.95rem;margin-top:.5rem}
 .magazine-cover .mag-issue-number b{font-size:clamp(120px,36vw,160px);text-shadow:2px 2px 0 var(--fixed-ink),5px 5px 0 var(--fixed-ink);-webkit-text-stroke:1.2px var(--fixed-ink)}
 .cover-coffee.mag-note{grid-column:2;grid-row:2;width:100%;justify-self:center;align-self:center}
 .cover-coffee .mag-stage{height:140px}.cover-coffee .mag-cup{width:128px;height:128px}.cover-coffee .mag-ring{width:136px;height:136px}
 .cover-coffee .mag-fact{font-size:.76rem;line-height:1.18;max-width:108px}.cover-coffee.is-open .mag-cup{transform:translate(48px,-42px) rotate(12deg) scale(.35)}
 .cover-coffee .mag-cup-label{font-size:.7rem;white-space:nowrap}
}
.magazine-cover .mag-issue-number b{margin-right:.12em}
/* Archive: even books on the shelf */
.shelf-volume:nth-child(n) .spine{height:300px}
.shelf-volume{flex:0 1 128px}
.spine{padding:20px 10px 16px;border-radius:2px 2px 0 0}
.spine-title{font-size:1.35rem;line-height:1.05;max-height:214px}
.spine:hover,.spine:focus-visible{transform:translateY(-6px)}
.spine[aria-expanded="true"]{transform:translateY(-12px)}
@media(max-width:700px){.shelf-volume:nth-child(n) .spine{height:260px}.spine-title{font-size:1.15rem;max-height:180px}}
/* Language you are learning: reads as a choice of course, not as the site language */
.learn{display:inline-flex;align-items:baseline;gap:.45rem;white-space:nowrap}
.learn-lab{font:600 .8rem/1 var(--font-display);letter-spacing:0;text-transform:none;color:var(--muted)}
.learn :is(button,a[data-a]){border:0;background:none;padding:.2rem 0;font:italic 400 1.1rem/1.1 var(--font-text);color:var(--muted);text-decoration:none}
.learn :is(button,a[data-a])[aria-pressed="true"]{color:var(--ink);text-decoration:underline;text-decoration-color:var(--edition-accent);text-decoration-thickness:2px;text-underline-offset:5px}
.learn :is(button,a[data-a]):hover{color:var(--ink)}
.learn-sep{color:var(--muted);font:400 1rem var(--font-text)}
@media(max-width:380px){.learn-lab{display:none}}
/* Contents drawer slides in from the right, next to its button */
.side{left:auto;right:0;transform:translateX(100%)}
body.sideon .side{transform:none}

html[data-lang="fr"] .learn :is(button,a[data-a])[aria-pressed="true"]{text-decoration-color:var(--ink)}
/* ---------- the whole issue in one scroll ---------- */













@keyframes flow-nudge{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}
.flow{margin-top:3rem;border-top:3px solid var(--ink)}
.magazine-cover+.flow{margin-top:0;border-top:0}
.flow.flow-in{animation:flow-open .5s ease-out}
.flow{scroll-margin-top:var(--hh,68px)}
@keyframes flow-open{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.flow-part{scroll-margin-top:calc(var(--hh,68px) + 48px)}
.flow-head{background:var(--rc);color:var(--on)}
.flow-head .in{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding-block:2rem}
.flow-h{font:700 clamp(1.8rem,4vw,3rem)/1.05 var(--font-display);margin:.3rem 0 .4rem;letter-spacing:-.01em}
.flow-head .bs{margin:0;max-width:60ch}
.flow-fig{flex:none;width:120px;height:120px;border-radius:50%;overflow:hidden;background:var(--paper);border:2px solid var(--fixed-ink)}
.flow-fig img{width:100%;height:100%;object-fit:contain}
.flow-seen{display:block;height:1px}
.flow-end{background:var(--rc);color:var(--on);text-align:center}
.flow-end .in{padding-block:3rem;display:flex;flex-direction:column;align-items:center;gap:1.5rem}
.flow-end-t{font:500 2rem/1.1 var(--font-text);margin:0}
.flow-end .receipt{margin:0;color:var(--ink)}
@media(max-width:700px){.flow-head .in{padding-block:1.4rem}.flow-fig{width:76px;height:76px}}
@media(prefers-reduced-motion:reduce){.flow-arrow,.flow.flow-in{animation:none}}
html[data-lang="fr"] /* flow: level switch at the top, vertical rail on the side */
.flow-tools{display:flex;align-items:center;gap:1rem;padding-block:1.4rem}
.magazine-cover+.flow .flow-tools{padding-top:clamp(70px,7vw,100px)}
.flow-tools-l{font:600 .8rem var(--font-display);letter-spacing:0;text-transform:none;color:var(--muted)}
.flow-tools:empty{padding:0;height:clamp(40px,5vw,70px)}
.flow-part{scroll-margin-top:calc(var(--hh,68px) + 8px)}
.flow-rail{position:fixed;z-index:40;right:clamp(10px,2vw,28px);top:50%;transform:translate(14px,-50%);opacity:0;visibility:hidden;transition:opacity .25s,transform .25s,visibility .25s;display:flex;flex-direction:column;align-items:center;gap:14px;padding:14px 8px;background:color-mix(in srgb,var(--bg) 88%,transparent);border:1.5px solid var(--ink);border-radius:999px;box-shadow:0 6px 20px #0000001a;--p:0}
.flow-rail.on{opacity:1;visibility:visible;transform:translate(0,-50%)}
.flow-rail ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;position:relative;z-index:1}
.rail-track{position:absolute;left:50%;top:22px;bottom:66px;width:3px;margin-left:-1.5px;background:var(--line);border-radius:3px;overflow:hidden}
.rail-fill{position:absolute;inset:0;background:var(--edition-accent);transform-origin:top;transform:scaleY(var(--p))}
.flow-rail button{position:relative;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;border:1.5px solid var(--ink);background:var(--paper);color:var(--ink);padding:0;cursor:pointer}
.flow-rail i{font:700 .6rem var(--font-display);font-style:normal}
.flow-rail button.cur{background:var(--edition-accent);border-color:var(--edition-accent);color:var(--bg)}
html[data-lang="fr"] .flow-rail button.cur{background:var(--ink);border-color:var(--ink)}
.rail-fold{margin-top:6px;background:var(--ink)!important;color:var(--bg)!important;font:700 .9rem var(--font-display)}
.rail-lab{position:absolute;right:calc(100% + 12px);top:50%;transform:translate(6px,-50%);white-space:nowrap;background:var(--ink);color:var(--bg);font:600 .72rem var(--font-display);padding:.35rem .7rem;border-radius:999px;opacity:0;pointer-events:none;transition:opacity .15s,transform .15s}
.flow-rail button:hover .rail-lab,.flow-rail button:focus-visible .rail-lab,.flow-rail button.cur .rail-lab.peek{opacity:1;transform:translate(0,-50%)}
@media(max-width:700px){.flow-rail{right:6px;gap:10px;padding:10px 5px}.flow-rail ol{gap:8px}.flow-rail button{width:26px;height:26px}.rail-track{top:18px;bottom:56px}}
@media(hover:none){.rail-lab{display:none}}
@media(prefers-reduced-motion:reduce){.flow-rail,.rail-lab{transition:none}}
/* all texts: each issue is one scrollable row */
.all-row{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(280px,calc(50% - 7px));gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:10px;scrollbar-width:thin;scrollbar-color:var(--ink) transparent}
.all-row>*{scroll-snap-align:start}
.all-row::-webkit-scrollbar{height:6px}.all-row::-webkit-scrollbar-thumb{background:var(--ink);border-radius:6px}
@media(max-width:700px){.all-row{grid-auto-columns:86%}}
.all-row{grid-auto-columns:calc(50% - 7px)}
@media(max-width:700px){.all-row{grid-auto-columns:86%}.flow .in{padding-right:46px}.flow-rail{right:4px;padding:8px 4px}.flow-rail button{width:24px;height:24px}.flow-rail i{font-size:.55rem}}
html[data-lang="fr"] .all-head>b{color:var(--ink)}
.row-arrows{display:none;margin-left:auto;gap:.4rem}
.has-more .row-arrows{display:flex}
.rowbtn{width:38px;height:38px;border-radius:50%;border:2px solid var(--ink);background:var(--paper);color:var(--ink);font:700 1rem var(--font-display)}
.rowbtn:hover{background:var(--ink);color:var(--bg)}
.has-more .all-row{-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)}
.has-more .all-row.at-end{-webkit-mask-image:none;mask-image:none}
.all-book .all-row{grid-auto-columns:calc((100% - 28px)/3)}@media(max-width:900px){.all-book .all-row{grid-auto-columns:calc(50% - 7px)}}@media(max-width:700px){.all-book .all-row{grid-auto-columns:78%}}

/* The big cover number is decoration: it may hang over the next block, but never catches clicks */
.magazine-cover .mag-issue-number,.magazine-cover .mag-issue-number *{pointer-events:none}
/* Opened issue: the level row sits on the same soft grey as the closed "pull the cup" block, no white gap */
.magazine-cover+.flow .flow-tools{background:var(--surface-soft,#f5f5f5);max-width:none;padding-top:clamp(64px,6vw,90px);padding-inline:max(16px,calc((100% - var(--maxw,1068px))/2))}
/* Header language switch in the same face as the menu */
.learn{align-items:center;gap:.4rem}
.learn-lab{font:500 .85rem/1 var(--font-display);letter-spacing:0;text-transform:none}
.learn :is(button,a[data-a]){font:600 .85rem/1.2 var(--font-display);padding:.2rem 0}
.learn-sep{font:400 .85rem var(--font-display)}
.learn :is(button,a[data-a])[aria-pressed="true"]{text-underline-offset:6px}
/* Contents drawer: fat issue number like the cover */
.side-issue-head .sih-n{display:flex;align-items:flex-start;gap:.08em;margin-top:.4rem;font:400 3.2rem/1 'Shrikhand',var(--font-display);letter-spacing:-.02em}
.side-issue-head .sih-n small{font:400 1rem/1 'Shrikhand',var(--font-display);margin-top:.4em}
.side-issue-head .sih-n b{font:inherit}
.magazine-cover+.flow .flow-tools:empty{height:auto;padding-bottom:0}
/* the level row continues the cover colour */
.magazine-cover+.flow .flow-tools{background:var(--lemon)}
html[data-lang="fr"] .magazine-cover+.flow .flow-tools{background:var(--green)}

/* Numbers everywhere in the cover face (Shrikhand). The webfont only carries digits, N and º,
   so letters in the same element fall back to the menu face. */
.prow .ph b{font:400 2.2rem/1 'Shrikhand',var(--font-display);letter-spacing:-.01em}
.bigch{font-family:'Shrikhand',var(--font-display);font-weight:400}
.flow-rail i{font:400 .78rem/1 'Shrikhand',var(--font-display)}
.fr-map-number{font-family:'Shrikhand',var(--font-display);font-weight:400}
.issue-location :is(button,a[data-a]){font-family:'Shrikhand',var(--font-display);font-weight:400}
.fat-n{font-family:'Shrikhand',var(--font-display);font-weight:400;letter-spacing:-.01em}

/* Region cards: number, capital, name, status */
.regcard{min-height:0}
.regcard .reg-n{font-size:2.6rem;line-height:1;margin-bottom:auto;padding-bottom:1.6rem;color:inherit}
.regcard.lock .reg-n{opacity:.35}
.regcard .cm{display:inline-flex;align-items:center;gap:.35rem}
.regcard .lock-i{flex:none}
.card.lock.regcard{border:0}
.es-map-number{font:400 14px 'Shrikhand',var(--font-display);fill:var(--fixed-ink);dominant-baseline:middle;pointer-events:none;paint-order:stroke;stroke:var(--paper);stroke-width:2.5px;opacity:.55}
.es-map-number.on{opacity:1;fill:var(--fixed-white,#fff);stroke:var(--green)}
.es-inset .es-map-number{font-size:12px}

/* Two heading levels across the site:
   label   = small spaced capitals (.sec, .exg, .bh, inset titles) — names a block
   heading = the reading serif — says what the block is about */
.vsec-h,.vplay-h{font:500 1.7rem/1.15 var(--font-text);letter-spacing:-.005em}

.fr-insets-title{font:600 .8rem var(--font-display);letter-spacing:0;text-transform:none;margin:.9rem 0 .7rem;color:var(--ink)}
.home-sections .lab{letter-spacing:0;text-transform:none}

/* Article: one illustration, in the heading band, like every other page */
@media(min-width:1180px){.band .bfig.isdood{display:block}.mdood,.wdood{display:none}}

/* Short pages: footer sits at the bottom of the window, not in the middle */
body{min-height:100svh;display:flex;flex-direction:column}
body>main,#app{flex:1 0 auto}

/* Grammar topics: tabs, jump to the exercises, previous / next */
.gtabs{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 1.4rem}
.gtab{display:inline-flex;align-items:center;gap:.55rem;border:0;border-radius:12px;padding:.45rem .9rem .45rem .6rem;background:var(--surface-soft,#f4f4f4);color:var(--ink);font:600 .85rem/1.2 var(--font-display);text-align:left}
.gtab b{font-size:1.25rem;line-height:1}
.gtab:hover{background:var(--surface-selected)}
.gtab.on{background:var(--rc,var(--accent));color:var(--on,#fff)}
.grammar-topic .gtab.on{background:#E58FAB;color:#3F1728}
.g-jump{margin-left:auto}
.grammar-topic #gpr{margin-top:2rem}
#gpr{scroll-margin-top:calc(var(--hh,70px) + 16px)}
.g-next{margin-top:2rem;flex-wrap:wrap}

/* ---------- phone: a compact header that steps aside while you read ---------- */
@media(max-width:899px){
 
 
 
 
 
 
 
 
 body.reading-down .istrip{top:0}
 /* the side rail and the reactions corner rest while you scroll down, come back when you scroll up */
 body .flow .in{padding-right:16px}
 body .flow-rail{right:6px;padding:8px 4px;gap:8px}
 body .flow-rail ol{gap:6px}
 body .flow-rail button{width:26px;height:26px}
 body.reading-down .flow-rail.on{opacity:0;visibility:hidden;transform:translate(14px,-50%)}
}


/* ---------- phone review fixes ---------- */
@media(max-width:700px){
 /* grammar tables: wrap inside the card instead of being cut off */
 .rule .tbl{overflow-x:visible}
 .rule .tbl table{table-layout:fixed;width:100%}
 .rule .tbl th,.rule .tbl td{white-space:normal;vertical-align:top;padding-inline:.5rem;overflow-wrap:anywhere}
 /* carousels are swiped on a phone: no arrow buttons */
 .row-arrows,.has-more .row-arrows,.sign-head .row-arrows{display:none!important}
 .all-head{align-items:center}
 /* topic cards: number in the corner, no tall empty block */
 .card:has(>.bigch){min-height:0;position:relative;padding-right:76px}
 .card>.bigch{position:absolute;top:1rem;right:1rem;width:48px;height:48px;font-size:1.25rem;margin:0}
 /* one navigation row on text pages: the contents link in the header is enough */
 body.has-issue .issue-location{display:none}
 /* map numbers readable */
 .es-map-number{font-size:18px;opacity:.75}
 .es-inset .es-map-number{font-size:15px}
}

.v-empty{margin-bottom:1.2rem}

/* ---------- French + desktop review fixes ---------- */
.nw{white-space:nowrap}
/* small yellow details are lost on the light-blue French cover: use ink for them */
html[data-lang="fr"] .magazine-cover .mag-issue-number span{color:var(--fixed-ink)}



/* France: the lock next to an overseas region is an icon, not a picture */
.fr-inset-link span .lock-i{width:12px;height:12px;display:inline-block;vertical-align:-1px;flex-shrink:0}
.fr-region-link.fr-locked .fr-map-number{opacity:.75}
@media(max-width:700px){.fr-map-number{font-size:22px}}
/* topic cards everywhere: number in the corner instead of a tall empty block */
.card:has(>.bigch){min-height:0;position:relative;padding-right:84px;justify-content:flex-end}
.card>.bigch{position:absolute;top:1rem;right:1rem;width:52px;height:52px;font-size:1.35rem;margin:0}
/* contents link: arrow right after the text, one underline */


/* region page on a phone: a smaller cup above the text */
@media(max-width:899px){
 .region-note .mag-stage{height:180px}
 .region-note .mag-cup{width:150px;height:150px}
 .region-note .mag-ring{width:170px;height:170px}
}



/* ---------- dark theme readability (device setting or the footer switch) ---------- */
.theme-btn{font:500 .75rem/1.5 var(--font-display);background:none;border:0;color:inherit;padding:.6rem 0;min-height:44px;text-decoration:underline;text-underline-offset:4px;margin-left:.75rem;cursor:pointer}
@media(max-width:560px){.theme-btn{margin-left:0}}
@media (prefers-color-scheme:dark){
:root:not([data-theme="light"]) .mark .mk{background:#F4F2ED;border-radius:50%;padding:2px}
:root:not([data-theme="light"]) .region-note .mag-cup{background:#F4F2ED;border-radius:50%;box-shadow:0 0 0 8px #F4F2ED}
:root:not([data-theme="light"]) .region-note .mag-ring{opacity:.35}
:root:not([data-theme="light"]) .es-map-number{stroke:none}
:root:not([data-theme="light"]) .es-map-number.on{fill:#fff}
:root:not([data-theme="light"]) .fr-region-link.fr-locked .fr-map-number{fill:#F4F2ED;stroke:none;opacity:.8}
:root:not([data-theme="light"]) .fr-inset-link.fr-locked svg path{fill:#4a4a50}
:root:not([data-theme="light"]) .all-head>b,html[data-lang="fr"]:not([data-theme="light"]) .all-head>b{color:var(--accent)}
:root:not([data-theme="light"]) .cwc{background:#26272A;border-color:#5A5A62}
:root:not([data-theme="light"]) .cwc.hl{background:#5E5636;color:#FFF6CF}
:root:not([data-theme="light"]) .cwc.sel{background:var(--lemon);color:var(--on-lemon)}
}

:root[data-theme="dark"] .region-note .mag-cup{background:#F4F2ED;border-radius:50%;box-shadow:0 0 0 8px #F4F2ED}
:root[data-theme="dark"] .region-note .mag-ring{opacity:.35}
:root[data-theme="dark"] .es-map-number{stroke:none}
:root[data-theme="dark"] .es-map-number.on{fill:#fff}
:root[data-theme="dark"] .fr-region-link.fr-locked .fr-map-number{fill:#F4F2ED;stroke:none;opacity:.8}
:root[data-theme="dark"] .fr-inset-link.fr-locked svg path{fill:#4a4a50}
:root[data-theme="dark"] .all-head>b,html[data-lang="fr"][data-theme="dark"] .all-head>b{color:var(--accent)}
:root[data-theme="dark"] .cwc{background:#26272A;border-color:#5A5A62}
:root[data-theme="dark"] .cwc.hl{background:#5E5636;color:#FFF6CF}
:root[data-theme="dark"] .cwc.sel{background:var(--lemon);color:var(--on-lemon)}
/* "Lift the cup" sits right under the cup, not floating below the stage */
@media(min-width:701px){.cover-coffee .mag-stage{height:224px}}
.cover-coffee .mag-cup-label{margin-top:-6px}

.coffee-fact-source{display:block;width:fit-content;margin:.35rem auto 0;font:500 .65rem/1.2 var(--font-display);color:inherit;text-underline-offset:2px}
/* At narrow widths the cup is below the oversized number; leave room for its overhang. */
@media(max-width:380px){.magazine-cover .cover-coffee.mag-note{margin-top:32px}}

/* «Слово к кофе»: board, keyboard and result. Colours come from the edition palette, not from any other game. */
.gz{--gz-y:var(--edition,var(--green));--gz-y-ink:var(--edition-ink,#fff);--gz-p:var(--active-pink,#DDA7B9);--gz-p-ink:var(--active-pink-ink,#3F1728);--gz-n:#8C8A86;--gz-n-ink:#fff;
  max-width:440px;margin:0 auto;display:flex;flex-direction:column;align-items:stretch;gap:.7rem;font-family:var(--font-display)}
.gz-page{padding-top:.4rem}
.gz-h{margin:0;text-align:center;font:800 clamp(1.5rem,6vw,2.1rem)/1.1 var(--font-display);color:var(--ink)}
.gz-sub{margin:.3rem auto .8rem;max-width:30rem;text-align:center;color:var(--muted);font:500 .92rem/1.4 var(--font-display)}
.gz-top{display:flex;align-items:center;justify-content:center;gap:.4rem;color:var(--muted);font-size:.9rem}
.gz-hint-b{display:inline-flex;align-items:center;gap:.3rem;padding:.3rem .7rem;border:1.5px solid var(--line);border-radius:99px;background:var(--paper);color:var(--ink);font:600 .85rem var(--font-display);cursor:pointer}
.gz-hint-b svg{width:1rem;height:1rem}
.gz-top{flex-wrap:wrap}
.gz-clues{list-style:none;margin:0;padding:0;display:grid;gap:.3rem;justify-items:center;text-align:center}
.gz-clue{font:500 .95rem/1.35 var(--font-display);color:var(--ink);max-width:26rem}
.gz-clue-emoji{font-size:1.9rem;line-height:1}
.gz-clue-tr{color:var(--muted)}
.gz-board{display:grid;gap:6px;justify-content:center}
.gz-row{--gz-w:min(320px,calc(100vw - 48px),calc((100svh - 340px) * .833));display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;width:var(--gz-w)}
.gz-tight .gz-row{--gz-w:min(320px,calc(100vw - 48px),calc((100svh - 490px) * .833))}
/* explicit height and flex, not aspect-ratio and grid: Safari sized the row before the ratio and left the letter at the top */
.gz-t{height:calc((var(--gz-w) - 24px) / 5);display:flex;align-items:center;justify-content:center;border:2px solid var(--line);border-radius:50%;background:var(--paper);
  font-size:clamp(1.25rem,6vw,1.7rem);font-weight:800;text-transform:uppercase;color:var(--ink);line-height:1}
.gz-in{border-color:var(--ink);animation:gz-pop .12s ease-out}
.gz-y{background:var(--gz-y);border-color:var(--gz-y);color:var(--gz-y-ink)}
.gz-p{background:var(--gz-p);border-color:var(--gz-p);color:var(--gz-p-ink)}
.gz-n{background:var(--gz-n);border-color:var(--gz-n);color:var(--gz-n-ink)}
.gz-new .gz-t{animation:gz-land .35s ease-out both;animation-delay:calc(var(--i) * 70ms)}
.gz-shake{animation:gz-shake .3s ease-in-out}
.gz-msg{min-height:1.3em;margin:0;text-align:center;font-weight:600;color:var(--ink)}
.gz-kb{display:grid;gap:6px;user-select:none;-webkit-user-select:none}
.gz-kr{display:flex;gap:4px;justify-content:center}
.gz-k{flex:1 1 0;min-width:0;max-width:42px;height:clamp(42px,6.2svh,52px);padding:0;border:1.5px solid var(--line);border-radius:10px;background:var(--paper);color:var(--ink);
  font:700 1rem var(--font-display);text-transform:uppercase;cursor:pointer;touch-action:manipulation}
/* keyboard keys repeat the board colours; absent letters are greyed out so they are not typed again */
.gz-k.gz-y{background:var(--gz-y);border-color:var(--gz-y);color:var(--gz-y-ink)}
.gz-k.gz-p{background:var(--gz-p);border-color:var(--gz-p);color:var(--gz-p-ink)}
.gz-k.gz-n{background:var(--gz-n);border-color:var(--gz-n);color:var(--gz-n-ink);opacity:.55}
.gz-k:active{transform:translateY(1px)}
.gz-k.gz-wide{flex:1.6 1 0;max-width:68px;font-size:.78rem;text-transform:none}
.gz-res{text-align:center;display:grid;gap:.5rem}
.gz-res-h{margin:0;font-weight:700}
.gz-ans{margin:0;font-family:var(--font-text);font-size:1.15rem}
.gz-ans b{font-family:var(--font-display);font-size:1.4rem}
.gz-stats{margin:0;color:var(--muted);font-size:.9rem}
.gz-acts{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center}
.gz-how{font-family:var(--font-display);font-size:.92rem;color:var(--muted)}
.gz-how summary{cursor:pointer;font-family:var(--font-display);font-weight:600;color:var(--ink)}
@keyframes gz-pop{from{transform:scale(.88)}to{transform:scale(1)}}
@keyframes gz-land{from{transform:rotateX(90deg)}to{transform:rotateX(0)}}
@keyframes gz-shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
@media (prefers-reduced-motion:reduce){.gz-in,.gz-new .gz-t,.gz-shake{animation:none}}

/* Colour fields: shared surfaces and spacing, with the existing typography intact.
   Keep illustration strokes, map outlines, crossword structure and focus rings. */
@media screen{
  :root {
    --surface-soft:color-mix(in srgb,var(--ink) 4%,var(--paper));
    --surface-control:color-mix(in srgb,var(--ink) 7%,var(--paper));
    --surface-practice:color-mix(in srgb,var(--green) 12%,var(--paper));
    --surface-word:color-mix(in srgb,var(--blue) 8%,var(--paper));
    --surface-selected:color-mix(in srgb,var(--accent) 14%,var(--paper));
    --surface-edge:color-mix(in srgb,var(--ink) 22%,var(--paper));
    --surface-shadow:0 8px 28px color-mix(in srgb,var(--fixed-ink) 10%,transparent);
  }

  .learning-row{border:0;border-radius:12px;background:var(--surface-soft);color:var(--ink);font-family:inherit;cursor:pointer}
  .learning-row:hover{background:var(--surface-selected)}
  .learning-row:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
  .feedback.ok{background:var(--surface-practice);color:var(--ink)}
  .feedback.bad{background:color-mix(in srgb,var(--orange) 16%,var(--paper));color:var(--ink)}

  /* Section rhythm replaces full-width rules throughout the site. */
  .nav,.istrip,.subbar,.issue-location,.foot,.flow-pull,.flow,
  .all-head,.bh,.issue-archive,.vsec-learned,.cwprint,
  .ordrow,.vrow,.tl,.sh-body,.pop .sh-body,.receipt,.receipt dl,.rc-total,
  .toc-list li {border:0}
  hr {border:0;height:0;margin:2.5rem 0}
  .foot {margin-top:3rem;padding-top:1.5rem;background:var(--surface-soft)}
  .issue-archive {margin-top:4rem;padding-top:0}
  .all-head {margin-bottom:1.5rem;padding-bottom:0}
  .all-issue+.all-issue,.culture-group+.culture-group {margin-top:3.5rem}
  .bh {padding-bottom:0;margin-bottom:1.25rem}
  .blk+.blk {margin-top:2.75rem}
  
  .cwprint {margin-top:2rem;padding-top:0}
  .tl {padding-block:1.1rem}
  .toc-list li {padding-block:.7rem}
  .tbl th,.tbl td {border:0;padding-block:.65rem}
  .tbl tbody tr:nth-child(even) {background:var(--surface-soft)}
  .receipt {box-shadow:none;background:var(--surface-soft);border-radius:10px 10px 0 0}
  .receipt::after {left:0;right:0;background:linear-gradient(135deg,var(--surface-soft) 25%,transparent 25%) -4px 0/8px 8px,linear-gradient(225deg,var(--surface-soft) 25%,transparent 25%) -4px 0/8px 8px}
  .receipt dl {padding-block:1.3rem}
  .receipt dl>div {margin-block:.8rem}
  .rc-total {padding-top:.5rem}

  /* Panels separate by colour, never by an ink outline. */
  .box,.rule,.fold,.empty,.flash,.page,.vdet,.fbl li,
  .card.plain,.card.lock,.sip,.luck div,.sign,.book-cast,
  .bfig,.cdisc,.flow-fig,.fr-inset-link,.topic {border:0;box-shadow:none}
  .box,.rule,.fold,.empty,.flash,.page,.vdet,.fbl li,.card.plain,
  .card.lock,.luck div,.sign {background:var(--surface-soft);color:var(--ink)}
  .box,.rule,.fold,.page,.book-cast {border-radius:12px}
  .box,.rule {padding:1.4rem}
  .box.gram {background:var(--surface-practice);color:var(--ink)}
  .box.fich {border:0;background:var(--surface-soft);padding:1.2rem;border-radius:12px}
  .fold {padding:1rem 1.2rem}
  .empty {padding:1.5rem}
  .book-cast {background:var(--surface-soft);color:var(--ink);padding:1.5rem}
  .thumb svg,.plate svg,.scene-img {border:0;border-radius:8px}
  .fr-inset-link {background:var(--surface-soft)}
  .fr-inset-link:hover {background:var(--surface-selected)}
  .topic::before,.lg {border:0}
  .topic {background:var(--surface-selected);color:var(--ink)}
  
  .flow {margin-top:3.5rem}
  .magazine-cover+.flow {margin-top:0}
  .flow-fig {background:var(--surface-soft)}

  /* Controls retain their labels, states, hit targets and type sizes. */
  .btn,.back,.opt,.tile,.field,.ans textarea,.mbox input,.mbox textarea,.acct,
  .spk,.sheet .save,.sheet .x,.sheet .look,.side-toolbar button,
  .itab,.isub :is(button,a[data-a]),.vrow .del,.vtoggle,.rowbtn {border:0;box-shadow:none}
  .btn,.back,.acct,.itab,.isub :is(button,a[data-a]):not([aria-selected="true"]),
  .spk,.vrow .del,.vtoggle,.rowbtn {background:var(--surface-control);color:var(--ink)}
  .btn.pri,.sheet .save {background:var(--accent);color:var(--accent-ink)}
  .btn:not(.pri):hover,.back:hover,.acct:hover,.vtoggle:hover,.rowbtn:hover,
  .itab:hover,.isub :is(button,a[data-a]):hover {background:var(--surface-selected);color:var(--ink)}
  .field,.ans textarea,.mbox input,.mbox textarea {background:var(--surface-soft);color:var(--ink);border-radius:10px}
  .field::placeholder,.ans textarea::placeholder,.mbox input::placeholder {color:var(--muted);opacity:1}
  .seg {border:0;background:var(--surface-soft);padding:3px;gap:3px;border-radius:12px}
  .seg :is(button,a[data-a]) {border-radius:9px}
  .seg :is(button,a[data-a])[aria-pressed="true"],.vtoggle[aria-pressed="true"] {background:var(--surface-selected);color:var(--ink)}
  .seg :is(button,a[data-a]):hover {background:var(--surface-control)}
  .opt,.tile {background:var(--surface-control);color:var(--ink)}
  .tile.on {background:var(--surface-selected);color:var(--ink)}
  .opt.ok,.tile.ok {background:var(--green);color:var(--on-green)}
  .opt.bad,.tile.bad {background:var(--orange);color:var(--on-orange)}
  .ordrow {padding:.75rem;border-radius:10px;background:var(--surface-soft)}
  .chip {border:0;background:var(--surface-soft);border-radius:10px;padding:.75rem .9rem}
  .chip.saved {background:var(--surface-selected)}
  .w,.w.saved,.ptr {border:0}
  .w {background:var(--surface-selected)}
  .w.saved {background:color-mix(in srgb,var(--green) 32%,var(--paper))}
  .cover-receipt,.cover-read,.issue-toggle {border:0;text-decoration:underline;text-underline-offset:5px}
  .sheet {border:0}
  .sheet .x,.sheet .look {background:color-mix(in srgb,currentColor 12%,transparent);color:inherit}
  .mbox,.pop,.pop-arrow {border:0}
  .mbox,.pop,.shelf-preview {border:0;box-shadow:var(--surface-shadow)}
  
  
  .pop-arrow {box-shadow:none}
  .pop .save {border:0}
  .side-toolbar button {background:color-mix(in srgb,currentColor 10%,transparent)}
  

  /* Vocabulary: the selected colour-field direction, including the review deck. */
  .vplay {border:0;background:var(--surface-practice);border-radius:14px;box-shadow:none;padding:1.8rem 2rem}
  .vplay-deck span,.vghost,.vface,.vpile,.vp-stack,.vstamp {border:0}
  .vplay-deck .c1 {box-shadow:none}
  .vplay .seg {background:var(--paper)}
  
  
  
  
  
  .vghost,.vface {box-shadow:none}
  .vfront {background:var(--surface-word)}
  .vstamp {background:var(--surface-selected)}
  .vpile,.vpile:active,.vpile.hot,.vpile.hit {box-shadow:none}
  .vpile.again {background:var(--surface-selected);color:var(--ink)}
  .vpile.know {background:var(--surface-practice);color:var(--ink)}
  .vp-stack {background:var(--paper);color:var(--ink);box-shadow:none}
  
  

  /* Reading, writing and long flows use calm, continuous fields. */
  #draft {background-image:none;padding:.5rem;border-radius:8px}
  #draft:focus-visible {outline:3px solid var(--accent);outline-offset:3px}
  .flow-rail {border:0;box-shadow:var(--surface-shadow);background:var(--paper)}
  .flow-rail button {border:0;background:var(--surface-control);color:var(--ink)}
  .flow-rail button.cur {background:var(--accent);color:var(--accent-ink)}
  html[data-lang="fr"] .flow-rail button.cur {background:var(--accent);color:var(--accent-ink)}
  .rail-track {background:var(--surface-control)}
  .all-row {scrollbar-color:var(--muted) transparent}
  .all-row::-webkit-scrollbar-thumb {background:var(--muted)}
  .pcard {border:0}
  .shelf-preview {border-radius:10px}

  /* Cell boundaries convey the puzzle; they are structural, rather than dividers. */
  .cwc {border:1px solid var(--surface-edge)}
  .cwc.sel {outline:3px solid var(--accent)}
  @media(max-width:600px){
    .vplay {padding:1.4rem 1.1rem}
    
    .box,.rule,.book-cast {padding:1.2rem}
    .foot {margin-top:2.5rem}
    .vseg {gap:3px}
  }
  @media(max-width:380px){
    .cover-coffee.mag-note {grid-column:1/-1;grid-row:3;width:100%;justify-self:center}
  }
}

/* Margosha mascot: sits on the bottom edge of the page band, paws over the line */
.has-mascot{position:relative;z-index:1}
.has-mascot .in{position:relative}
.mascot{position:absolute;right:16px;bottom:-22px;height:auto;pointer-events:none;user-select:none;filter:drop-shadow(0 2px 0 rgba(0,0,0,.06))}
.mascot-practice{width:150px;bottom:-18px;transform:rotate(3deg)}
.band.has-mascot .in{min-height:180px;box-sizing:border-box}
.mascot-diary{width:230px;bottom:-26px}
.has-mascot .btext,.has-mascot .pes,.has-mascot .pru{max-width:calc(100% - 250px)}
.band.has-mascot .bt,.band.has-mascot .bs{max-width:calc(100% - 200px)}
@media (max-width:700px){
  .mascot-practice{width:92px;bottom:-12px;right:8px}
  .band.has-mascot .in{min-height:0}
  .mascot-diary{width:128px;bottom:-14px;right:4px}
  .has-mascot .pes,.has-mascot .pru{max-width:none}
  .band.has-mascot .bt,.band.has-mascot .bs{max-width:calc(100% - 100px)}
  .ptop.has-mascot .in{padding-bottom:2.6rem}
}
@media print{.mascot{display:none}}

/* Header language switch: a small segmented control, the same pattern as the level switch */
.learn{gap:0;padding:3px;border-radius:12px;background:var(--surface-soft)}
.learn-lab,.learn-sep{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.learn :is(button,a[data-a]){padding:.32rem .75rem;border-radius:9px;font:600 .8rem/1.2 var(--font-display);color:var(--muted);text-decoration:none}
.learn :is(button,a[data-a])[aria-pressed="true"]{background:var(--paper);color:var(--ink);text-decoration:none;box-shadow:0 1px 3px color-mix(in srgb,var(--fixed-ink) 14%,transparent)}
html[data-lang="fr"] .learn :is(button,a[data-a])[aria-pressed="true"]{text-decoration:none}
.learn :is(button,a[data-a]):not([aria-pressed="true"]):hover{color:var(--ink)}
/* language picker: one pill with the current language, a short menu on tap */
.langpick{position:relative}
.langpick summary{list-style:none;display:inline-flex;align-items:center;gap:.35rem;padding:.38rem .7rem .38rem .8rem;border-radius:999px;background:var(--surface-soft);font:600 .82rem/1.2 var(--font-display);color:var(--ink);cursor:pointer;white-space:nowrap}
.langpick summary::-webkit-details-marker{display:none}
.langpick summary svg{width:12px;height:12px;transition:transform .15s}
.langpick[open] summary svg{transform:rotate(180deg)}
.lang-menu{position:absolute;right:0;top:calc(100% + 6px);z-index:60;min-width:190px;padding:6px;border-radius:14px;background:var(--paper);box-shadow:0 10px 30px color-mix(in srgb,var(--fixed-ink) 16%,transparent),0 0 0 1px color-mix(in srgb,var(--fixed-ink) 8%,transparent);display:grid;gap:2px}
.lang-menu-h{font:500 .72rem/1 var(--font-display);color:var(--muted);padding:.5rem .7rem .35rem}
.lang-opt{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;width:100%;border:0;background:none;padding:.6rem .7rem;border-radius:9px;font:600 .9rem/1.2 var(--font-display);color:var(--ink);text-decoration:none;text-align:left;cursor:pointer}
.lang-opt small{font:500 .75rem/1 var(--font-display);color:var(--muted)}
.lang-opt:hover{background:var(--surface-soft)}
.lang-opt[aria-current="true"]{background:var(--surface-soft)}

/* Secondary pills take their ring from the text colour, so they read on dark rows too */
@media screen{
  .btn:not(.pri):not(.ghost) {box-shadow:inset 0 0 0 1.5px color-mix(in srgb,currentColor 30%,transparent)}
  .prow .btn:not(.pri) {color:inherit}
  .prow .btn:not(.pri):hover {background:color-mix(in srgb,currentColor 12%,transparent)}
}
/* Region cards on phones: number on the left, text on the right */
@media (max-width:700px){
  .regcard{display:grid;grid-template-columns:auto 1fr;column-gap:1rem;align-items:center;align-content:center;min-height:0}
  .regcard .reg-n{grid-row:1 / span 3;padding:0;margin:0;font-size:2.4rem;min-width:2.9ch}
  .regcard .lab,.regcard .ct,.regcard .cm{grid-column:2}
  .addform .htip{justify-self:end;margin-top:-.3rem}
}

/* ---------- past-tense trainer ---------- */
.pd-wrap{max-width:680px}
.pd-filt{display:flex;flex-wrap:wrap;gap:.4rem;margin:0 0 1.2rem}
.pd-filt{gap:.1rem .2rem}
.pd-chip{border:0;background:none;border-radius:6px;padding:.25rem .5rem;font:500 .8rem var(--font-display);color:var(--muted)}
.pd-chip[aria-pressed="true"]{background:var(--line);color:var(--ink)}
.pd-top{display:flex;justify-content:flex-end;font:600 .78rem var(--font-display);color:var(--muted);margin-bottom:.35rem}
.pd-cnt{font:600 .78rem var(--font-display);color:var(--muted)}
.pd-bar{height:3px;border-radius:99px;background:var(--line);overflow:hidden;margin-bottom:2rem}
.pd-bar i{display:block;height:100%;background:var(--ink);transition:width .25s}
.pd-card{padding:0}
.pd-tags{font:500 .8rem var(--font-display);color:var(--muted);margin:0 0 .5rem}
.pd-verb{margin:0}
.pd-verb b{font:700 clamp(2rem,8vw,2.6rem)/1.05 var(--font-display)}
.pd-tr{font:500 .9rem var(--font-display);color:var(--muted);margin:.25rem 0 0}
.pd-per{font:600 1.15rem var(--font-display);margin:1.4rem 0 .9rem;color:#B8315F}
.pd-q{font:500 .9rem var(--font-display);color:var(--muted);margin:.4rem 0 .7rem}
.pd-sent{font:400 clamp(1.25rem,4.2vw,1.5rem)/1.5 var(--font-text);margin:0 0 .3rem}
.pd-gap{display:inline-block;min-width:4.5em;border-bottom:2px solid var(--ink);margin:0 .15em;vertical-align:-.1em}
.pd-fill{font-family:var(--font-display);font-size:.92em;padding:0 .3em;border-radius:5px}
.pd-fill.ok{background:var(--green);color:var(--on-green)}
.pd-fill.bad{background:var(--orange);color:var(--on-orange)}
.pd-fill.fix{background:var(--lemon);color:var(--on-lemon)}
.pd-form{display:flex;align-items:center;border-bottom:2px solid var(--ink);margin-top:.3rem}
.pd-form:focus-within{border-color:#B8315F}
.pd-in{flex:1;min-width:0;font:600 1.5rem var(--font-display);padding:.4rem 0;border:0;background:none;color:var(--ink);outline:none}
.pd-in:focus-visible{outline:none}
.pd-in.ok{color:var(--green)}
.pd-in.bad{text-decoration:line-through;text-decoration-thickness:2px;color:var(--muted)}
.pd-form:has(.pd-in.ok){border-color:var(--green)}
.pd-form:has(.pd-in.bad){border-color:var(--orange)}
.pd-go{flex:none;width:2.4rem;height:2.4rem;border:0;border-radius:50%;background:var(--ink);color:var(--bg);font:700 1.1rem var(--font-display)}
.pd-acc{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-top:.6rem}
.pd-keys{display:flex;gap:.15rem}
.pd-key{min-width:2.1rem;height:2.1rem;border:0;border-radius:6px;background:none;color:var(--muted);font:600 1.05rem var(--font-display)}
.pd-key:hover{background:var(--line);color:var(--ink)}
.pd-idk{border:0;background:none;font:500 .82rem var(--font-display);color:var(--muted);padding:.3rem 0}
.pd-idk:hover{color:var(--ink)}
.pd-opts .opt{font-size:1rem;padding:.55rem 1.2rem}
.pd-fb{margin-top:1.1rem}
.pd-res{font:700 1.05rem var(--font-display);margin:0}
.pd-res.ok{color:var(--green)}
.pd-res b{font-size:1.15em}
.pd-alt{font-weight:500;color:var(--muted);font-size:.85rem}
.pd-rule{display:flex;align-items:center;gap:.3rem}
.pd-next{margin-top:1.1rem}
/* Forms trainer (irregular verbs): verb, labelled fields, feedback */
.fm-count{font:600 .78rem var(--font-display);color:var(--muted)}
.fm-q{display:flex;align-items:baseline;flex-wrap:wrap;gap:.2rem .6rem;margin:.2rem 0 1.1rem}
.fm-q b{font:700 clamp(2rem,8vw,2.6rem)/1.05 var(--font-display)}
.fm-tr{font:500 .95rem var(--font-display);color:var(--muted)}
.fm-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.9rem 1rem;align-items:end;max-width:520px}
.fm-l{display:flex;flex-direction:column;gap:.3rem;min-width:0}
.fm-l>span{font:600 .8rem var(--font-display);color:var(--muted)}
.fm-l .field{width:100%;box-sizing:border-box;font:600 1.15rem var(--font-display)}
.fm-form .btn{grid-column:1/-1;justify-self:start}
.fm-fb{display:flex;flex-direction:column;gap:.55rem;margin-top:1.2rem;padding:.9rem 1rem;border-radius:12px;background:var(--paper);border-left:4px solid var(--green);max-width:520px}
.fm-fb.wrong{border-left-color:var(--orange)}
.fm-fb>b{font:700 1.05rem var(--font-display);color:var(--green)}
.fm-fb.wrong>b{color:var(--ink)}
.fm-row{display:flex;flex-wrap:wrap;align-items:center;gap:.3rem;font:700 1.2rem var(--font-display)}
.fm-row>span+span::before{content:"—";margin-right:.3rem;font-weight:400;color:var(--muted)}
.fm-tip{font:400 1rem/1.5 var(--font-text)}
.fm-fb+.rowbtns{margin-top:1.1rem}
.pd-next:focus-visible{outline:none}
.pd-done{text-align:left}
.pd-big{font:400 3.6rem/1 'Shrikhand',var(--font-display);margin:0}
.pd-big span{font-size:.5em;color:var(--muted)}
.pd-mist{list-style:none;padding:0;margin:.4rem 0 1.2rem;font:400 1.05rem/1.5 var(--font-text)}
.pd-mist li{padding:.45rem 0;border-bottom:1px solid var(--line)}
.pd-mist b{font-family:var(--font-display)}
.pd-mt{font:500 .72rem var(--font-display);color:var(--muted)}
.pd-clean{font:600 1rem var(--font-display);margin:1rem 0}
.pd-ref{max-width:900px;display:grid;gap:.8rem}
.pd-fold summary{letter-spacing:.06em;text-transform:none;font-size:.95rem}
.pd-ruletext{font:500 .92rem/1.55 var(--font-display);margin:0 0 1rem;max-width:62ch}
.pd-vgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,290px),1fr));gap:12px}
.pd-vc{border:1.5px solid var(--line);border-radius:10px;padding:.7rem .8rem}
.pd-vh{margin:0 0 .45rem}
.pd-vh b{font:700 1.05rem var(--font-display)}
.pd-vh span{font:500 .78rem var(--font-display);color:var(--muted)}
.pd-conj{display:grid;grid-template-columns:1fr 1fr;gap:.15rem .8rem;font:500 .95rem/1.45 var(--font-display)}
.pd-cf{display:flex;gap:.4rem;align-items:baseline;min-width:0}
.pd-cf i{font-style:normal;font-size:.66rem;color:var(--muted);width:4.4em;flex:none}
.pd-cf b{color:#B8315F}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .pd-per,:root:not([data-theme="light"]) .pd-form:focus-within{color:#F2A3BD;border-color:#F2A3BD}}
:root[data-theme="dark"] .pd-per{color:#F2A3BD}
.pd-hab{max-width:420px;margin-bottom:1rem}
.pd-sub{font:700 .85rem var(--font-display);margin:1.1rem 0 .5rem}
.pd-plist{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,200px),1fr));gap:.2rem 1rem;font:500 .95rem var(--font-display)}
.pd-plist li{display:flex;justify-content:space-between;border-bottom:1px solid var(--line);padding:.3rem 0}
.pd-plist span{color:var(--muted)}
.pd-when{margin:0;padding-left:1.1rem;font:500 .92rem/1.6 var(--font-display)}
.pd-when li{margin-bottom:.5rem}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .pd-cf b{color:#F2A3BD}}
:root[data-theme="dark"] .pd-cf b{color:#F2A3BD}


/* trainer focus mode: no nav, no issue bar, no footer, no floating widget — the exercise gets the screen */
body.pd-focus .nav,body.pd-focus .foot,body.pd-focus .rx,body.pd-focus .issue-location,body.pd-focus .side,body.pd-focus .sback{display:none!important}
body.pd-focus #app{min-height:100vh}
.pd-focusin{padding-top:max(14px,env(safe-area-inset-top,0px));padding-bottom:3rem}
.pd-head{display:flex;align-items:center;flex-wrap:wrap;gap:.2rem .6rem;margin-bottom:.8rem}
.pd-x{width:2.2rem;height:2.2rem;margin-left:-.45rem;border:0;border-radius:50%;background:none;font:500 1.1rem var(--font-display);color:var(--muted)}
.pd-x:hover{background:var(--line);color:var(--ink)}
.pd-ht{margin:0;flex:1;min-width:0;font:600 .9rem var(--font-display);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pd-gd{flex-basis:100%;order:3}
.pd-gd summary{display:inline-block;cursor:pointer;font:500 .8rem var(--font-display);color:var(--muted);list-style:none}
.pd-gd summary::-webkit-details-marker{display:none}
.pd-gd summary::after{content:' ⌄'}
.pd-gd[open] summary::after{content:' ⌃'}
.pd-gd .pd-filt{margin:.5rem 0 .4rem}

/* explanation after an answer */
.pd-exp{margin-top:.9rem}
.pd-lbl{display:block;font:500 .74rem var(--font-display);color:var(--muted);margin-bottom:.15rem}
.pd-formula{margin:0 0 .5rem;font:600 1.15rem var(--font-display)}
.pd-st{color:var(--ink)}
.pd-st.odd{color:#B8315F}
.pd-en{color:var(--muted)}
.pd-formula .pd-en{color:var(--ink);text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:4px}
.pd-watch{font:500 .9rem/1.5 var(--font-display);margin:0 0 .8rem}
.pd-tbl{background:var(--bg);border-radius:10px;padding:.6rem .7rem;max-width:420px}
.pd-tbl .pd-cf{padding:.1rem .3rem;border-radius:6px}
.pd-tbl .pd-cf.cur{background:var(--paper);box-shadow:0 0 0 1.5px var(--ink)}
.pd-tbl .pd-cf .pd-en{color:var(--ink)}
.pd-famtxt{font:500 .86rem/1.55 var(--font-display);color:var(--muted);margin:.8rem 0 0;max-width:60ch}
.pd-famtxt .pd-lbl{margin-bottom:.1rem}
.pd-expd{margin-top:.6rem}
.pd-expd summary{cursor:pointer;font:500 .82rem var(--font-display);color:var(--muted);list-style:none}
.pd-expd summary::-webkit-details-marker{display:none}
.pd-expd summary::after{content:' ⌄'}
.pd-expd[open] summary::after{content:' ⌃'}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .pd-st.odd{color:#F2A3BD}}
:root[data-theme="dark"] .pd-st.odd{color:#F2A3BD}
.pd-cue{background:none;color:inherit;text-decoration:underline;text-decoration-color:#B8315F;text-decoration-thickness:2px;text-underline-offset:4px}
.pd-tense{font:600 .95rem var(--font-display);margin:.6rem 0 .5rem}
.pd-ctxexp .pd-exp{margin-top:.4rem}
/* ---------- levels: chip, first-visit strip, level page, placement test ---------- */
.lvchip{border:0;background:var(--active-pink);color:var(--active-pink-ink);border-radius:999px;padding:.12rem .6rem;font:800 .8rem var(--font-display);letter-spacing:.02em;vertical-align:middle;cursor:pointer}
.lvchip:hover{filter:brightness(.96)}
.lv{gap:.35rem}
.lv-strip{background:var(--paper);border-bottom:1px solid var(--line)}
.lv-strip .in{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1rem;padding-top:.8rem;padding-bottom:.8rem}
.lv-strip p{margin:0;font:600 .95rem var(--font-display)}
.lv-strip-b{display:flex;flex-wrap:wrap;gap:.5rem}
.lv-now{display:flex;align-items:center;gap:.45rem;font:600 .95rem var(--font-display);margin:0 0 1.2rem}
.lv-soon{color:var(--muted);margin:0 0 1rem}
.lvgrid{margin-bottom:1rem}
.lvcard .bigch{font-size:1.5rem}
.lvcard.on{outline:3px solid var(--active-pink);outline-offset:2px}
.lvcard .cr{font-size:.9rem;line-height:1.45}
.lv-why{max-width:62ch;font:500 .95rem/1.55 var(--font-display)}
.lv-adapt{font:600 .9rem var(--font-display);color:var(--green);margin:-.4rem 0 1rem}
.book-cast-text p{max-width:62ch;line-height:1.55;margin:0}
.pt{max-width:720px}
.pt-top{margin-bottom:1rem}
.pt-h{margin:.2rem 0 .6rem}
.pt-sub{max-width:60ch;font:500 .95rem/1.55 var(--font-display)}
.pt-progress{height:4px;background:var(--line);border-radius:4px;overflow:hidden;margin:0 0 1.2rem}
.pt-progress span{display:block;height:100%;background:var(--active-pink);transition:width .3s}
.pt-list{padding-left:1.4rem;margin:0}
.pt-q{margin:0 0 1.5rem}
.pt-q .qp{margin:0 0 .55rem;line-height:1.5}
.pt-o{display:flex;flex-wrap:wrap;gap:.45rem}
.pt-opt[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
.pt-res{display:flex;gap:1.4rem;align-items:center;margin:.4rem 0 1rem}
.pt-lv{font:400 clamp(3.4rem,12vw,5.5rem)/1 'Shrikhand',var(--font-display);color:var(--active-pink-ink)}
.pt-desc{margin:0 0 .4rem;line-height:1.5}
.pt-n{margin:0;font:600 .9rem var(--font-display);color:var(--muted)}
.pt-note{max-width:60ch;line-height:1.5}
.pt-review{padding-left:1.3rem}
.pt-review li{margin-bottom:1rem}
.pt-rv{margin:.2rem 0;font-size:.92rem}
.pt-rv .bad s{color:var(--orange)}
.pt-rv .ok b{color:var(--green)}
@media (max-width:560px){.pt-res{flex-direction:column;align-items:flex-start;gap:.4rem}}
.card.lvtest{min-height:0}
.lvtestrow{margin-bottom:1rem}
.lvcard .ct::first-letter{text-transform:uppercase}
.lvbar{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem .55rem;font:500 .85rem var(--font-display);color:var(--muted)}
.lvbar-t{color:var(--ink);font-weight:600}
.lvbar .lvchip{cursor:default}
.lvbar-go{font:600 .85rem var(--font-display)}
.lv-auto{max-width:62ch;color:var(--muted);font:500 .95rem/1.5 var(--font-display);margin:-.6rem 0 1.2rem}
/* translation tag at the end of a paragraph: quiet until you need it */
.reader .ptr,.para .ptr{display:inline-block;margin:0 0 0 .4rem;padding:0 .32rem;border:1px solid var(--line);border-radius:5px;background:none;font:600 .66rem/1.5 var(--font-display);letter-spacing:.04em;text-transform:lowercase;color:var(--muted);opacity:.7;vertical-align:.15em;cursor:pointer}
.para .ptr:hover,.para .ptr:focus-visible{opacity:1;color:var(--ink);border-color:var(--muted)}
.para .ptr[aria-expanded="true"]{opacity:1;background:var(--line);color:var(--ink)}
/* close button in drills: the cross sits in the middle of its circle */
.pd-x{display:grid;place-items:center;flex:0 0 auto;padding:0;line-height:0}
/* level choice inside the language menu */
.langpick summary .lp-lv{font:800 .72rem var(--font-display);background:var(--active-pink);color:var(--active-pink-ink);border-radius:999px;padding:.05rem .45rem;margin-left:.1rem}
.lp-levels{display:flex;gap:.35rem;padding:.1rem .75rem .5rem}
.lp-lvb{flex:1;border:1px solid var(--line);background:none;border-radius:8px;padding:.35rem 0;font:700 .82rem var(--font-display);color:var(--ink);cursor:pointer}
.lp-lvb:hover{background:var(--line)}
.lp-lvb[aria-current="true"]{background:var(--active-pink);border-color:var(--active-pink);color:var(--active-pink-ink)}
.lp-lvb.soon{color:var(--muted);border-style:dashed}
.lp-test{display:block;width:100%;text-align:left;border:0;background:none;padding:.15rem .75rem .7rem;font:500 .8rem var(--font-display);color:var(--muted);text-decoration:underline;cursor:pointer}
.lp-test:hover{color:var(--ink)}
/* practice rows: issue number + theme first, the date quietly on the right */
.prow .ph{display:flex;align-items:baseline;gap:.2rem .6rem;flex-wrap:wrap}
.prow .ph .ph-t{font:700 1rem var(--font-display)}
.prow .ph .ph-d{margin-left:auto;font:500 .78rem var(--font-display);opacity:.7}
.prow{position:relative}
.prow .ph{padding-right:5.6rem}
.prow .ph .ph-d{position:absolute;top:1.15rem;right:1.1rem;margin:0}
@media (max-width:560px){.prow .ph .ph-t{flex-basis:100%}}
/* ---------- teacher handouts ---------- */
.ho-link{display:inline-block;font:600 .82rem var(--font-display);color:var(--muted)}
.ho-link:hover{color:var(--ink)}
.tools .ho-link{margin-left:auto}
.ho-teach .ho-how{max-width:62ch;line-height:1.55;color:var(--muted);margin:0 0 1.6rem}
.ho-group{margin-bottom:1.8rem}
.ho-list{list-style:none;margin:.6rem 0 0;padding:0;border-top:1px solid var(--line)}
.ho-row{display:flex;align-items:baseline;gap:.4rem 1rem;width:100%;padding:.7rem .2rem;border:0;border-bottom:1px solid var(--line);background:none;text-align:left;color:var(--ink);text-decoration:none;font:600 1rem var(--font-display);cursor:pointer}
.ho-row small{font:500 .82rem var(--font-display);color:var(--muted)}
.ho-row em{margin-left:auto;font:600 .82rem var(--font-display);font-style:normal;color:var(--muted)}
.ho-row:hover em{color:var(--ink)}
.ho-wrap{padding:max(14px,env(safe-area-inset-top,0px)) 16px 3rem;background:var(--line);min-height:100vh}
.ho-tools{position:sticky;top:0;z-index:5;display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1.2rem;max-width:210mm;margin:0 auto 1rem;padding:.6rem .8rem;background:var(--bg);border-radius:12px;font:500 .85rem var(--font-display)}
.ho-tools .btn{margin-left:auto}
.ho-sws{display:flex;align-items:center;gap:.3rem}
.ho-sws>span{color:var(--muted);margin-right:.2rem}
.ho-sw{border:1px solid var(--line);background:none;border-radius:999px;padding:.25rem .7rem;font:600 .8rem var(--font-display);color:var(--ink);cursor:pointer}
.ho-sw[aria-pressed="true"]{background:var(--active-pink);border-color:var(--active-pink);color:var(--active-pink-ink)}
.ho-pages{display:flex;flex-direction:column;align-items:center;gap:1.2rem}
/* the sheet itself is always black on white, like paper */
.ho-sheet{width:100%;max-width:210mm;min-height:200mm;box-sizing:border-box;padding:14mm 15mm;background:#fff;color:#1d1d1f;box-shadow:0 1px 8px rgba(0,0,0,.12);font:400 11.5pt/1.5 var(--font-text)}
.ho-sheet h1,.ho-sheet h2,.ho-sheet h3,.ho-head,.ho-kicker,.ho-sub,.ho-bank{font-family:var(--font-display)}
.ho-head{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;font-size:8.5pt;color:#555;border-bottom:1px solid #ccc;padding-bottom:2.5mm;margin-bottom:6mm}
.ho-who{display:flex;align-items:flex-end;gap:2mm}
.ho-who i{display:inline-block;width:38mm;border-bottom:1px solid #999;height:4mm}
.ho-who i:last-child{width:22mm}
.ho-kicker{margin:0;font-size:8pt;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#777}
.ho-title{margin:1mm 0 1mm;font:800 22pt/1.1 var(--font-display);color:#1d1d1f}
.ho-sub{margin:0 0 5mm;font-size:10pt;color:#555}
.ho-task{margin-top:6mm;break-inside:avoid-page}
.ho-task h3{display:flex;align-items:center;gap:2.5mm;margin:0 0 2.5mm;font:700 11pt var(--font-display);color:#1d1d1f}
.ho-task h3 span{display:inline-grid;place-items:center;width:6mm;height:6mm;border-radius:50%;background:#1d1d1f;color:#fff;font-size:8.5pt}
.ho-text .ho-p{display:flex;gap:3mm;margin:0 0 2.5mm}
.ho-text .ho-p p{margin:0}
.ho-text.compact .ho-p{margin-bottom:1mm}
.ho-pn{flex:0 0 4mm;font:700 8pt/2 var(--font-display);color:#999}
.ho-p{flex-wrap:wrap}
.ho-p p:first-of-type{flex:1}
.ho-tr{flex-basis:100%;margin:.5mm 0 0 7mm!important;font-size:9pt;color:#666;font-style:italic}
.ho-match{display:grid;grid-template-columns:1fr 1fr;gap:2mm 8mm}
.ho-match ol,.ho-match ul{margin:0;padding-left:6mm}
.ho-match ul{list-style:none;padding-left:0}
.ho-match li{margin-bottom:1.6mm}
.ho-match ol li{display:flex;align-items:flex-end;gap:2mm}
.ho-blank-s{display:inline-block;width:12mm;border-bottom:1px solid #777;height:1em;margin:0 1mm}
.ho-match .ho-blank-s{margin-left:auto}
.ho-bank{border:1px solid #bbb;border-radius:2mm;padding:2mm 3mm;font-size:10pt;font-weight:600;text-align:center;margin:0 0 3mm}
.ho-bank span{margin:0 2.5mm;color:#aaa;font-weight:400}
.ho-gaps,.ho-mc,.ho-keylist{margin:0;padding-left:6mm}
.ho-gaps li{margin-bottom:2.2mm}
.ho-blank{display:inline-block;width:26mm;border-bottom:1px solid #777;height:1em;margin:0 1mm}
.ho-mc li{margin-bottom:3mm}
.ho-mc p{margin:0}
.ho-opts{display:flex;flex-wrap:wrap;gap:1mm 7mm;margin-top:1mm!important;font-size:10.5pt}
.ho-opts b{font-family:var(--font-display);font-size:9pt}
.ho-gram{margin:0;padding-left:5mm}
.ho-gram li{margin-bottom:1.5mm}
.ho-prompt{margin:0 0 2mm}
.ho-lines i{display:block;height:8.5mm;border-bottom:1px solid #bbb}
.ho-rule .tbl table{border-collapse:collapse;font-size:10pt;margin:2mm 0}
.ho-rule .tbl td,.ho-rule .tbl th{border:1px solid #ccc;padding:1mm 2.5mm;text-align:left}
.ho-rule p{margin:0 0 2mm}
.ho-rule .ex-line small{display:block;color:#666;font-size:9pt}
.ho-keypage h2{font:800 15pt var(--font-display);margin:1mm 0 4mm}
.ho-keys{padding-left:0;list-style:none;margin:0}
.ho-keys>li{margin-bottom:3mm;line-height:1.55}
.ho-keylist li{margin-bottom:1.2mm}
.ho-keylist span{color:#666;font-size:9.5pt}
@media (max-width:640px){.ho-sheet{padding:8mm 6mm;font-size:10.5pt}.ho-match{grid-template-columns:1fr}.ho-head{flex-direction:column;align-items:flex-start}}
@media print{
 @page{size:A4;margin:13mm 14mm}
 body.ho-mode{background:#fff!important}
 body.ho-mode .ho-tools,body.ho-mode .sheet,body.ho-mode .rx,body.ho-mode .fbk,body.ho-mode .nav,body.ho-mode .foot{display:none!important}
 body.ho-mode .ho-wrap{padding:0;background:none;min-height:0}
 body.ho-mode .ho-pages{display:block}
 body.ho-mode .ho-sheet{max-width:none;min-height:0;padding:0;box-shadow:none}
 body.ho-mode .ho-sheet-key{break-before:page}
}
.ho-task{break-inside:auto}
.ho-task h3{break-after:avoid}
.ho-mc li,.ho-gaps li,.ho-order li,.ho-match,.ho-bank{break-inside:avoid}
.ho-hint{color:#777;font-size:9.5pt}
.ho-order{margin:0;padding-left:6mm}
.ho-order li{margin-bottom:3mm}
.ho-order p{margin:0 0 1mm}
.ho-order span{color:#aaa;margin:0 1mm}
.ho-line{display:block;height:7mm;border-bottom:1px solid #bbb}
/* level row in the language menu: one quiet line of small tabs, no boxes */
.lp-levels{display:flex;align-items:center;gap:.1rem;padding:0 .6rem .55rem .75rem;margin-top:-.15rem}
.lp-lvb{flex:0 0 auto;border:0;background:none;border-radius:999px;padding:.18rem .5rem;font:700 .76rem var(--font-display);color:var(--muted)}
.lp-lvb:hover{background:var(--line);color:var(--ink)}
.lp-lvb[aria-current="true"]{background:var(--active-pink);color:var(--active-pink-ink)}
.lp-lvb.soon{border:0;opacity:.45}
.lp-levels .lp-test{display:inline;width:auto;margin-left:auto;padding:.18rem .2rem;font:500 .74rem var(--font-display);color:var(--muted);text-decoration:none}
.lp-levels .lp-test:hover{color:var(--ink);text-decoration:underline}
/* manual sublevel switch: two halves of one pill, the current one pink */
.lvsub{display:inline-flex;border:1.5px solid var(--active-pink);border-radius:999px;overflow:hidden;vertical-align:middle}
.lvsub-b{border:0;background:transparent;color:var(--ink);font:800 .8rem var(--font-display);letter-spacing:.02em;padding:.16rem .62rem;cursor:pointer;line-height:1.3}
.lvsub-b+.lvsub-b{border-left:1.5px solid var(--active-pink)}
.lvsub-b[aria-pressed="true"]{background:var(--active-pink);color:var(--active-pink-ink)}
.lvsub-b:not([aria-pressed="true"]):hover{background:color-mix(in srgb,var(--active-pink) 25%,transparent)}
.lvsub-b:focus-visible{outline:2px solid var(--ink);outline-offset:-3px}
.lvsub.big .lvsub-b{font-size:1rem;padding:.45rem 1rem;display:flex;flex-direction:column;align-items:center;gap:.05rem}
.lvsub.big small{font:600 .72rem var(--font-display);letter-spacing:0;opacity:.85}
.lv-now{flex-wrap:wrap}
/* trainer: the two groups on the practice page */
.pd-gh{font:600 .95rem var(--font-display);margin:1.6rem 0 .7rem;display:flex;flex-wrap:wrap;align-items:baseline;gap:.15rem .5rem}
.pd-gh span{font-weight:500;font-size:.82rem;color:var(--muted)}
.pd-gh-in{margin-top:1.1rem}
.pd-lvh{margin-top:1.4rem}
/* trainer: tappable sentence and its translation */
.pd-sent .t{border-radius:3px}
.pd-trb{display:inline-block;margin:0 0 0 .45rem;padding:0 .32rem;border:1px solid var(--line);border-radius:5px;background:none;font:600 .66rem/1.5 var(--font-display);letter-spacing:.04em;text-transform:lowercase;color:var(--muted);vertical-align:.25em}
.pd-trb:hover,.pd-trb:focus-visible{color:var(--ink);border-color:var(--muted)}
.pd-trb[aria-expanded="true"]{background:var(--line);color:var(--ink)}
.pd-trs{display:none;font:500 .95rem/1.45 var(--font-display);color:var(--muted);margin:.1rem 0 .4rem;padding-left:.7rem;border-left:3px solid var(--line)}
.pd-sb.open .pd-trs{display:block}
.pd-verb .t{border-radius:6px}
.pd-jumps{display:flex;flex-wrap:wrap;gap:.4rem;margin:-.2rem 0 .4rem}
.pd-jump{border:1px solid var(--line);background:none;border-radius:99px;padding:.3rem .8rem;font:600 .8rem var(--font-display);color:var(--ink)}
.pd-jump:hover,.pd-jump:focus-visible{border-color:var(--muted)}
.pd-gh{scroll-margin-top:5rem}
/* trainer: the rule above the cards */
.pd-rulebox{margin:0 0 1.2rem;border:1px solid var(--line);border-radius:12px;padding:0}
.pd-rulebox summary{cursor:pointer;list-style:none;padding:.65rem .9rem;font:700 .9rem var(--font-display);display:flex;justify-content:space-between;align-items:center}
.pd-rulebox summary::-webkit-details-marker{display:none}
.pd-rulebox summary::after{content:'+';font-weight:600;color:var(--muted)}
.pd-rulebox[open] summary::after{content:'−'}
.pd-rulein{padding:0 .9rem .8rem;font:400 1rem/1.5 var(--font-text)}
.pd-rulein p{margin:0 0 .5rem}
.pd-rulet{list-style:none;padding:0;margin:.6rem 0 0;border-top:1px solid var(--line)}
.pd-rulet li{display:flex;flex-wrap:wrap;gap:.1rem .7rem;align-items:baseline;padding:.45rem 0;border-bottom:1px solid var(--line)}
.pd-rulet b{font:600 .95rem var(--font-display)}
.pd-rulet span{font:500 .82rem var(--font-display);color:var(--muted)}

/* home: what the magazine is + questions (also sent as FAQPage data) */
.home-about{padding-top:0}
.home-about>*{max-width:44rem}
.home-pitch{font-size:1.05rem;line-height:1.6;margin:.4rem 0 1rem}
.home-faq{display:grid;gap:8px}
.home-faq .foldin p{margin:0}
/* issues built around one grammar unit: a line on the cover, highlighted forms in the texts, a "you can now" summary */
.cover-focus{margin:14px 0 0;font:500 14px/1.5 var(--font-display);max-width:34ch}
.cover-focus .cf-k{display:block;font-size:12px;opacity:.75}
.cover-focus b{display:block;font-size:17px;font-weight:700}
.cover-focus .cf-can{display:block;margin-top:4px;opacity:.85}
.t.gf{background:linear-gradient(transparent 62%,color-mix(in srgb,var(--accent) 22%,transparent) 62%);border-radius:2px}
.focus-done{margin:22px 0 6px;padding:16px 18px;border-radius:12px;background:var(--surface-control,rgba(0,0,0,.04));font-family:var(--font-display)}
.focus-done h3{margin:0 0 8px;font:700 15px/1.3 var(--font-display)}
.focus-done ul{list-style:none;margin:0;padding:0}
.focus-done li{margin:6px 0;font:500 14px/1.5 var(--font-display)}
.focus-done li span{display:inline-block;width:1.4em;font-weight:700}
.focus-done.is-done li span{color:var(--green,#2E8A4C)}
.focus-done .hint{margin:8px 0 0;font-size:12.5px}

/* Sources under a magazine article */
.art-src{margin:1.1rem 0 .4rem;padding-top:.7rem;border-top:1px solid var(--line);font:500 .74rem/1.5 var(--font-display);color:var(--muted)}
.art-src-h{margin:0 0 .3rem;font-weight:700;color:var(--ink)}
.art-src ul{margin:0;padding:0;list-style:none}
.art-src li{margin:.15rem 0;overflow-wrap:anywhere}
.art-src a{color:inherit;text-underline-offset:2px}

/* Short interface notes are set in the interface font, not the reading serif */
p.pn{font:500 .95rem/1.5 var(--font-display);color:var(--muted);max-width:62ch}
.prow .pn{color:inherit}

/* Word lists: the bar above the deck, the "own list" form and the Word menu cards.
   Colour by kind: core = selected pink, talk = practice green, topic = word blue (same surfaces as the rest of the site). */
.wl{margin-bottom:1.6rem}









.wl-head-acts{display:flex;gap:1rem}
.wl-form{display:grid;gap:.75rem;margin-top:1.1rem;padding:1.3rem;border-radius:14px;background:var(--surface-soft,#f6f6f6)}
.wl-l{display:grid;gap:.35rem;font:700 .8rem var(--font-display)}
.wl-l .field{font:400 1rem var(--font-text)}
.wl-l textarea{min-height:8.5rem;resize:vertical}
.wl-note{margin:-.3rem 0 0;font-size:.85rem;color:var(--muted)}
.wl-file{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .8rem;font:700 .8rem var(--font-display)}
.wl-fname{font:400 .85rem var(--font-text);color:var(--muted)}
.wl-pick{position:relative;cursor:pointer}
.wl-pick input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%}
.wl-pick:focus-within{outline:2px solid var(--accent);outline-offset:2px}
.wl-form-row{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}
.wl-count{margin-right:auto;font:600 .85rem var(--font-display);color:var(--muted)}
.wl-lv{display:flex;align-items:center;gap:.8rem;margin-bottom:2rem}
.wl-sec+.wl-sec{margin-top:2.8rem}
.wl-sec .vsec-h{margin-bottom:1rem}
.wl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.wl-card{display:flex;flex-direction:column;gap:.35rem;border-radius:14px;padding:1.2rem 1.25rem;background:var(--surface-word,#eef)}
.wl-card.k-core{background:var(--surface-selected,#f5d9dc)}
.wl-card.k-talk{background:var(--surface-practice,#e3edcf)}
.wl-card h3{margin:0;font:800 1.2rem/1.2 var(--font-display)}
.wl-ti{margin:0;color:var(--muted);font-size:.92rem}
.wl-prev{margin:.35rem 0 0;font-style:italic}
.wl-all summary{cursor:pointer;font:700 .78rem var(--font-display);margin-top:.3rem;list-style:none}
.wl-all summary::-webkit-details-marker{display:none}
.wl-all summary::before{content:'+ '}
.wl-all[open] summary::before{content:'− '}
.wl-all summary small{font-weight:600;opacity:.6}
.wl-all ul{list-style:none;margin:.6rem 0 0;padding:0;display:grid;gap:.3rem;font-size:.92rem;max-height:18rem;overflow:auto}
.wl-all li{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:.6rem}
.wl-all li span{color:var(--muted)}
.wl-card-acts{margin-top:auto;padding-top:.8rem;display:flex;align-items:center;gap:.7rem;flex-wrap:wrap}
.wl-ok{font:600 .8rem var(--font-display);color:var(--muted)}
@media (max-width:520px){.wl-form{padding:1rem}}

/* ==========================================================================
   Vocabulary page: review block, list picker, add-words panel, one-line word list
   ========================================================================== */

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* review block: small deck + one button; settings fold away */
.vplay{grid-template-columns:auto minmax(0,1fr)!important;gap:1.1rem 1.6rem;align-items:center;padding:1.2rem 1.4rem}
.vplay-deck{width:84px;height:108px;margin:0}
.vplay-deck .c1 b{font-size:2.1rem}
.vplay-h{font:500 1.45rem/1.15 var(--font-text);margin:0 0 .5rem;text-align:left}
.vstat{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem .7rem;font:500 .8rem/1.3 var(--font-display);color:var(--muted)}
.vbar{flex:0 0 160px;max-width:100%;height:6px;border-radius:999px;background:color-mix(in srgb,var(--ink) 10%,transparent);overflow:hidden}
.vbar i{display:block;height:100%;border-radius:inherit;background:var(--green)}
.vplay .vopt-row{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1rem;margin-top:.9rem;justify-content:flex-start}
.vopts{flex:1 1 auto;min-width:0}
.vopts>summary{display:inline-flex;align-items:center;gap:.4rem;cursor:pointer;list-style:none;font:500 .82rem/1.3 var(--font-display);color:var(--muted);padding:.4rem 0}
.vopts>summary::-webkit-details-marker{display:none}
.vopts>summary::after{content:'';width:.36em;height:.36em;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-.15em) rotate(45deg)}
.vopts[open]>summary::after{transform:translateY(.1em) rotate(-135deg)}
.vopts-in{padding-top:.6rem}
.vplay-none{grid-column:1/-1;margin:0;font:500 .82rem var(--font-display);color:var(--muted)}
@media(max-width:560px){
  .vplay{padding:1rem 1rem 1.1rem;gap:.8rem 1rem}
  .vplay-deck{width:64px;height:84px}.vplay-deck .c1 b{font-size:1.6rem}
  .vplay-h{font-size:1.25rem}
  .vopts{flex-basis:100%}
}

/* list picker + add */
.wl{margin:1.6rem 0 0}
.wl-bar{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1rem}
.wl-sel{flex:1 1 220px;max-width:360px}
.wl-head-acts{display:flex;gap:1rem;font-size:.85rem}
.wl-addbtn{margin-left:auto}
.wl-addbtn[aria-expanded="true"]{background:var(--ink);color:var(--bg)}
.wl-sub{margin:.4rem 0 0;font:500 .82rem var(--font-display);color:var(--muted)}
.vsel select{width:100%;appearance:none;-webkit-appearance:none;border:1px solid var(--line);border-radius:10px;background:var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5' fill='none' stroke='%23777' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right .7rem center;
  color:var(--ink);padding:.6rem 2rem .6rem .8rem;font:600 .85rem/1.2 var(--font-display);cursor:pointer}
.vsel select:focus-visible{outline:2px solid var(--accent);outline-offset:1px}

.vadd{margin-top:1rem;border:1px solid var(--line);border-radius:14px;padding:.4rem 1rem 1rem;background:var(--paper)}
.vadd-tabs{display:flex;gap:1.2rem;border-bottom:1px solid var(--line);margin-bottom:1rem;overflow-x:auto}
.vadd-tabs button{border:0;background:none;padding:.7rem 0;font:600 .85rem var(--font-display);color:var(--muted);white-space:nowrap;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px}
.vadd-tabs [aria-selected="true"]{color:var(--ink);border-bottom-color:var(--edition-accent)}
.vadd-note{margin:0 0 .8rem;font:500 .85rem/1.45 var(--font-display);color:var(--muted)}
.vadd .addform{margin-bottom:.4rem}
.vadd .wl-form{border:0;padding:0;background:none;margin:0}

/* search + filters */
.vlist{margin-top:1.8rem}
.vtools{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center}
.vsearch{flex:1 1 260px;position:relative;display:block}
.vsearch svg{position:absolute;left:.8rem;top:50%;width:18px;height:18px;transform:translateY(-50%);fill:none;stroke:var(--muted);stroke-width:1.8;stroke-linecap:round;pointer-events:none}
.vsearch input{width:100%;border:1px solid var(--line);border-radius:10px;background:var(--paper);color:var(--ink);padding:.62rem .8rem .62rem 2.4rem;font:500 .95rem var(--font-display)}
.vsearch input:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.vfilters{display:flex;gap:.6rem;flex:0 1 auto}
.vfilters .vsel{min-width:9.5rem}
@media(max-width:560px){.vfilters{flex:1 1 100%}.vfilters .vsel{flex:1;min-width:0}}
.vcount{margin:1.2rem 0 .3rem;font:500 .78rem var(--font-display);color:var(--muted)}
.vnone{margin:1.6rem 0;font:500 .95rem var(--font-display);color:var(--muted)}

/* one line per word */
.vrows{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.vli{border-bottom:1px solid var(--line)}
.vrow{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"es st" "tr st";align-items:center;column-gap:.8rem;width:100%;min-height:52px;
  padding:.55rem .25rem;border:0;background:none;color:var(--ink);text-align:left;cursor:pointer}
.vrow:hover{background:color-mix(in srgb,var(--ink) 3%,transparent)}
.vrow:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;border-radius:6px}
.vr-es{grid-area:es;font:700 1rem/1.3 var(--font-display);overflow-wrap:anywhere}
.vr-tr{grid-area:tr;font:400 .98rem/1.35 var(--font-text);color:var(--muted);overflow-wrap:anywhere}
.vr-src{display:none}
.vr-st{grid-area:st;display:flex;align-items:center;gap:.45rem;font:500 .72rem var(--font-display);color:var(--muted);white-space:nowrap}
.vr-st i{width:8px;height:8px;border-radius:50%;background:var(--green)}
.vr-st.due i{background:var(--edition-accent)}
.vli.open .vrow{background:color-mix(in srgb,var(--ink) 3%,transparent)}
.vli .vdet{margin:0 0 .8rem;border-radius:10px}
.vdet-foot{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1rem;margin-top:.4rem}
.vdet-meta{font:500 .78rem var(--font-display);color:var(--muted);margin-right:auto}
.vdel{color:var(--muted)}.vdel:hover{color:var(--ink)}
.vmore-btn{display:block;margin:1.2rem auto 0}
.vmore-btn small{opacity:.6;font-weight:500;margin-left:.3rem}
@media(min-width:760px){
  .vrow{grid-template-columns:minmax(0,1.1fr) minmax(0,1.5fr) minmax(0,.9fr) 9.5rem;grid-template-areas:"es tr src st";min-height:46px}
  .vr-src{display:block;grid-area:src;font:500 .78rem var(--font-display);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}
/* ---- list chips (replace the select): the week's list first, scroll sideways when there are many ---- */
.wl-chips{display:flex;gap:.45rem;overflow-x:auto;scrollbar-width:none;padding:.1rem 0 .3rem;margin:0 -16px;padding-inline:16px;scroll-padding-inline:16px}
.wl-chips::-webkit-scrollbar{display:none}
.wl-chip{flex:0 0 auto;border:1.5px solid var(--line);background:var(--bg);color:var(--ink);border-radius:999px;padding:.38rem .8rem;font:600 .85rem var(--font-display);cursor:pointer;white-space:nowrap}
.wl-chip small{font-weight:700;color:var(--muted);margin-left:.15rem}
.wl-chip.auto{border-color:color-mix(in srgb,var(--edition-accent) 55%,var(--line))}
.wl-chip[aria-pressed="true"]{background:var(--edition-accent);border-color:var(--edition-accent);color:var(--edition-accent-ink,#fff)}
.wl-chip[aria-pressed="true"] small{color:inherit;opacity:.85}
.wl-chip:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.wl-acthead{display:flex;flex-wrap:wrap;align-items:baseline;gap:.3rem 1rem;margin-top:.35rem}
.wl-acthead .wl-sub{margin:0;flex:1 1 240px}
/* ---- quick add: always visible, the one obvious way in ---- */
.vquick{margin-top:1rem;border:1.5px solid color-mix(in srgb,var(--edition-accent) 40%,var(--line));border-radius:14px;padding:.9rem 1rem 1rem;background:var(--paper)}
.vq-form{display:grid;grid-template-columns:minmax(0,1fr);gap:.5rem}
@media (min-width:700px){.vq-form{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) auto}}
.vq-form .btn{white-space:nowrap}
.vq-note{margin:.5rem 0 0;font:500 .8rem/1.4 var(--font-display);color:var(--muted)}
.vq-more{margin-top:.55rem;font:600 .85rem var(--font-display)}
.vquick .vadd{margin-top:.7rem;background:var(--bg)}
.vq-ready{display:flex;flex-direction:column;gap:.15rem;width:100%;text-align:left;margin-top:.9rem;border:0;border-top:1px solid var(--line);background:none;padding:.8rem 0 0;cursor:pointer;color:var(--ink)}
.vq-ready-t{font:700 .95rem var(--font-display)}
.vq-ready-s{font:500 .82rem/1.4 var(--font-display);color:var(--muted)}
.vq-ready:hover .vq-ready-t{text-decoration:underline}
/* ---- word details: fix the translation, put the word in a list ---- */
.vr-notr{color:var(--ink);font:600 .82rem var(--font-display);text-decoration:underline dotted;text-underline-offset:3px}
.vtr-form{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .6rem;margin:0 0 .5rem}
.vtr-l{font:600 .78rem var(--font-display);color:var(--muted)}
.vtr-form .field{flex:1 1 180px;min-width:0;padding:.4rem .6rem;border:1px solid var(--line);background:var(--bg)}
.vtr-form .btn{padding:.35rem .8rem}
.vlists{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem 1rem;margin:.5rem 0 .2rem;font:500 .8rem var(--font-display);color:var(--muted)}
.vlists b{color:var(--ink);font-weight:600}
.vlists-put select{font-size:.82rem;padding:.3rem 1.8rem .3rem .6rem}
.wl-head-acts .lnk{font:600 .85rem var(--font-display)}
/* word list pages */
.vpager{display:flex;justify-content:center;align-items:center;gap:4px;margin:1.4rem 0 0;flex-wrap:wrap}
.vpager button{min-width:38px;height:38px;padding:0 8px;border:1px solid var(--line);border-radius:999px;background:transparent;color:var(--ink);font:600 .85rem var(--font-display);cursor:pointer}
.vpager button:hover:not(:disabled){border-color:var(--ink)}
.vpager button[aria-current="page"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.vpager button:disabled{opacity:.3;cursor:default}
.vpg-gap{padding:0 4px;color:var(--muted)}

/* ==========================================================================
   Shell: header, bottom tab bar (phones), toast.
   The only place these are styled — older header rules were removed from style.css.
   ========================================================================== */

/* ---------- toast ---------- */
.toast{position:fixed;left:50%;bottom:calc(16px + var(--tabbar-h,0px) + env(safe-area-inset-bottom,0px));z-index:120;
  display:flex;align-items:center;gap:1rem;max-width:min(92vw,460px);padding:.7rem .8rem .7rem 1.1rem;border-radius:12px;
  background:var(--ink);color:var(--bg);font:500 .9rem/1.35 var(--font-display);
  transform:translate(-50%,12px);opacity:0;pointer-events:none;transition:opacity .18s,transform .18s}
.toast.on{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.toast span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.toast-act{flex:none;border:0;background:none;color:inherit;font:700 .9rem var(--font-display);text-decoration:underline;text-underline-offset:3px;padding:.3rem .4rem;cursor:pointer}
@media(prefers-reduced-motion:reduce){.toast{transition:none}}

/* ---------- header: one row everywhere ---------- */
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--bg);border-bottom:1px solid var(--line);transition:transform .25s ease}
.nav .in{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:1.25rem;max-width:none;min-height:60px;padding:0 24px}
.nav-r{display:flex;align-items:center;justify-content:flex-end;gap:1.25rem;min-width:0}
.mark{display:flex;align-items:center;gap:.6rem;background:none;border:0;padding:0;color:var(--ink);
  font:700 .7rem/1.2 var(--font-display);letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;cursor:pointer}
.mk{width:30px;height:30px;flex:none}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .mark .mk{background:#F4F2ED;border-radius:50%;padding:2px}}
:root[data-theme="dark"] .mark .mk{background:#F4F2ED;border-radius:50%;padding:2px}
#topSections{flex:1;min-width:0}
.tabs{display:flex;justify-content:center;flex-wrap:nowrap;gap:1.3rem}
.tab{border:0;background:none;padding:.5rem 0;color:var(--ink);font:500 .78rem/1.4 var(--font-display);white-space:nowrap;cursor:pointer}
.tab[aria-current="page"]{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:8px;text-decoration-color:var(--edition-accent)}
html[data-lang="fr"] .tab[aria-current="page"]{text-decoration-color:var(--ink)}
.tab .n{display:inline-block;margin-left:.35em;padding:0 .45em;border-radius:999px;background:var(--active-pink,#DDA7B9);color:var(--active-pink-ink,#3F1728);font:700 .64rem/1.5 var(--font-display);vertical-align:.1em}
.tog{display:flex;align-items:center;gap:.5rem;flex:none}
.issue-toggle{display:inline-flex;visibility:hidden;align-items:center;gap:.4rem;flex:none;border:0;background:none;padding:.5rem 0;color:var(--ink);font:600 .78rem/1.4 var(--font-display);font-variant-numeric:tabular-nums;cursor:pointer;white-space:nowrap}
body.has-issue .issue-toggle{visibility:visible}
.issue-toggle::after{content:'';width:.38em;height:.38em;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:translateY(-.15em) rotate(45deg)}
@media(min-width:900px) and (max-width:1240px){.mark{font-size:0;letter-spacing:0;gap:0}.tabs{gap:1rem}.nav .in,.nav-r{gap:1rem}}

/* ---------- phones: one header row: icon, Magazine / Practice / Words / More, language ---------- */
.tabbar,.more-sheet,.lp-code{display:none}
@media(max-width:899px){
  :root{--tabbar-h:0px}
  .nav .in{display:flex;min-height:52px;padding:0 8px 0 10px;gap:4px}
  .mark{flex:none;font-size:0;letter-spacing:0;gap:0}
  .mk{width:28px;height:28px}
  #topSections,.nav .issue-toggle,.nav .acct{display:none!important}
  .nav-r{flex:none;margin-left:auto}
  .langpick .lp-name{display:none}.langpick .lp-code{display:inline}
  .nav .langpick summary{padding:.34rem .5rem;gap:.25rem}.nav .langpick summary svg{display:none}
  body.reading-down .nav{transform:translateY(-110%)}

  .tabbar{display:flex;flex:1 1 auto;min-width:0;justify-content:space-between;padding:0 2px}
  .tb{display:flex;align-items:center;gap:3px;min-height:44px;padding:0 4px;border:0;background:none;color:var(--muted);
    font:600 .76rem/1 var(--font-display);white-space:nowrap;cursor:pointer;-webkit-tap-highlight-color:transparent}
  .tb-i{display:contents}
  .tb svg{display:none}
  .tb[data-a="moretog"] .tb-l::after{content:'';display:inline-block;width:.34em;height:.34em;margin-left:.35em;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-.2em) rotate(45deg)}
  .tb[aria-current="page"] .tb-l,.tb[data-current="true"]:not([aria-expanded="true"]) .tb-l{color:var(--ink);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:7px;text-decoration-color:var(--edition-accent)}
  .tb[aria-current="page"],.tb[data-current="true"],.tb[aria-expanded="true"]{color:var(--ink)}
  html[data-lang="fr"] .tb .tb-l{text-decoration-color:var(--ink)}
  .tb-n{order:2;min-width:16px;height:16px;padding:0 4px;border-radius:999px;background:var(--active-pink,#DDA7B9);color:var(--active-pink-ink,#3F1728);font:700 .58rem/16px var(--font-display);text-align:center}
  .tb:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;border-radius:8px}

  .more-sheet:not([hidden]){display:block;position:fixed;top:var(--hh,52px);left:0;right:0;bottom:0;z-index:58}
  .more-back{position:absolute;inset:0;background:rgba(24,22,23,.4)}
  .more-panel{position:absolute;left:0;right:0;top:0;max-height:calc(100vh - 120px);overflow-y:auto;
    padding:4px 16px 16px;background:var(--bg);border-radius:0 0 16px 16px;box-shadow:0 8px 30px rgba(0,0,0,.12)}
  .more-list{display:flex;flex-direction:column}
  .more-it{display:block;width:100%;text-align:left;border:0;border-bottom:1px solid var(--line);background:none;color:var(--ink);padding:14px 4px;font:500 1.05rem/1.3 var(--font-display);cursor:pointer}
  .more-it[aria-current="page"],.more-it[data-a="sidetog"]{font-weight:700}
  .more-set{display:flex;flex-direction:column;gap:.8rem;padding-top:14px}
  .more-set .mtog:empty{display:none}
  .more-row{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem}
  .more-row .fbk-cta{margin-left:0}
  body.more-on{overflow:hidden}
}
@media(max-width:400px){
  .nav .langpick .lp-lv{display:none}
  .tb-n{min-width:7px;width:7px;height:7px;padding:0;font-size:0;align-self:flex-start;margin-top:12px}
}
@media(max-width:350px){.tb{padding:0 2px;font-size:.7rem}.nav .in{padding:0 6px;gap:2px}}
@media(prefers-reduced-motion:reduce){.nav,.tabbar{transition:none}}

/* ---------- page reactions: a quiet row above the footer ---------- */
.rx{display:flex;flex-direction:column;align-items:center;gap:8px;padding:2.5rem 16px 1.5rem}
.rx[hidden]{display:none}
.rx-bar{box-shadow:none;background:none}

/* ---------- home: the issue's contents under the cover ---------- */
.issue-contents .in{padding-top:1.6rem;padding-bottom:2rem}
.ic-h{margin:0 0 .6rem;font:500 1.45rem/1.2 var(--font-text)}
.ic-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.ic-list li{border-bottom:1px solid var(--line)}
.ic-row{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"k m" "t m";column-gap:1rem;width:100%;padding:.85rem .2rem;border:0;background:none;color:var(--ink);text-align:left;cursor:pointer}
.ic-row:hover{background:color-mix(in srgb,var(--ink) 3%,transparent)}
.ic-row:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;border-radius:6px}
.ic-k{grid-area:k;font:500 .76rem/1.3 var(--font-display);color:var(--muted)}
.ic-t{grid-area:t;font:700 1.08rem/1.3 var(--font-display)}
.ic-t small{display:block;margin-top:.15rem;font:500 .9rem/1.35 var(--font-display);color:var(--muted)}
.ic-m{grid-area:m;align-self:center;font:600 1rem var(--font-display);color:var(--muted)}
.ic-row.done .ic-m{color:var(--green)}
.ic-all{margin-top:1.2rem}
@media(min-width:760px){
  .ic-row{grid-template-columns:11rem minmax(0,1fr) auto;grid-template-areas:"k t m";align-items:baseline}
}
.home-cols{grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}
@media(max-width:700px){
  .home-cols .card{display:grid;grid-template-columns:minmax(0,1fr) 56px;grid-template-areas:"lab fig" "ct fig" "cr fig";align-items:center;column-gap:1rem;min-height:0;padding:1rem 1.1rem}
  .home-cols .card>.cdood,.home-cols .card>.art,.home-cols .card>.bigch,.home-cols .card>.cdisc{grid-area:fig;width:56px;height:56px;margin:0;align-self:center}
  .home-cols .card .lab{grid-area:lab}.home-cols .card .ct{grid-area:ct;font-size:1.15rem}.home-cols .card .cr{grid-area:cr}
  .home-cols .card .meta{display:none}
}
/* the big issue number hangs below the cover: leave it room */
.magazine-cover+.issue-contents .in{padding-top:clamp(40px,4vw,56px)}
@media(max-width:700px){.magazine-cover+.issue-contents .in{padding-top:40px}}

/* ---------- reading pages: level + print in one compact block ---------- */
.tools{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:.3rem 1rem}
.tools .lvbar{gap:.25rem .5rem}
.tools .lvbar-n{order:3;flex-basis:100%;font-size:.8rem}
.tools .lvbar-go{order:2}
.tools .ho-link{margin:0;padding-top:.15rem;white-space:nowrap}
.lv-strip .lv-hello{flex-basis:100%;font:500 1rem/1.45 var(--font-display);color:var(--ink);max-width:62ch}

/* ---------- footer: same white as the page, set off by one line (no near-white grey band) ---------- */
.foot{background:var(--bg)!important;border-top:1px solid var(--line);margin-top:0!important}

/* ==========================================================================
   Colour rules (from the colour audit, 23 Oct):
   1. text on a coloured surface takes that surface's own ink (--on), never the page ink;
   2. dark theme: no dark surface (burgundy) on the near-black page: it turns rose with dark ink;
   3. quiet text stays readable (AA 4.5:1): no opacity fades on words.
   ========================================================================== */
.reader .ptr,.para .ptr{opacity:1;color:var(--muted)}
.lp-lvb.soon{opacity:1;color:var(--muted);text-decoration:line-through;text-decoration-thickness:1px}

.flow-end .btn{color:var(--on);border-color:currentColor;background:none}
.flow-end .btn.pri{background:var(--on);color:var(--rc);border-color:var(--on)}
.prow .ph .ph-d{opacity:1;color:inherit}
@media(prefers-color-scheme:dark){
  :root:not([data-theme="light"]):not([data-lang="fr"]):not([data-lang="en"]){--blue:#E0B3C0;--on-blue:#292526;--edition-accent:#E0B3C0;--edition-accent-ink:#292526;--card-red:#E0B3C0}
  html[data-lang="fr"]:not([data-theme="light"]) .side-toolbar,html[data-lang="fr"]:not([data-theme="light"]) .side-issue-head{background:#43302E;color:#FFF1B5}
}
:root[data-theme="dark"]:not([data-lang="fr"]):not([data-lang="en"]){--blue:#E0B3C0;--on-blue:#292526;--edition-accent:#E0B3C0;--edition-accent-ink:#292526;--card-red:#E0B3C0}
html[data-lang="fr"][data-theme="dark"] .side-toolbar,html[data-lang="fr"][data-theme="dark"] .side-issue-head{background:#43302E;color:#FFF1B5}
/* the big issue number keeps its 3D outline, but in deep burgundy, not black: no black on burgundy */
html:not([data-lang="fr"]):not([data-lang="en"]) .mag-issue-number{--fixed-ink:#3F1728}
html[data-lang="en"] .mag-issue-number{--fixed-ink:#14284F}
/* the opened issue starts on the cover colour: its text takes the cover's ink in both themes */
.magazine-cover+.flow .flow-tools{color:var(--on-lemon)}
.magazine-cover+.flow .flow-tools :is(.lvbar,.lvbar-t,.lvbar-n,.lvbar-go,.lnk){color:inherit}
.magazine-cover+.flow .flow-tools .lvbar-n{opacity:1}
html[data-lang="fr"] .magazine-cover+.flow .flow-tools{color:var(--on-green)}
/* flashcards: small labels at full strength */
.vlab,.vsrc{opacity:1}


/* ---------- quiet "what is this / how to use it" lines ---------- */
.rd-hint{margin:0 0 1.2rem;padding:.6rem .85rem;border-left:3px solid var(--active-pink,#DDA7B9);background:color-mix(in srgb,var(--active-pink,#DDA7B9) 14%,var(--bg));
  font:500 .85rem/1.45 var(--font-display);color:var(--ink);border-radius:0 8px 8px 0;max-width:62ch}
html[data-lang="fr"] .rd-hint{border-left-color:var(--lemon);background:color-mix(in srgb,var(--lemon) 35%,var(--bg))}
.ptop .d-what{font:500 .85rem/1.45 var(--font-display);letter-spacing:0;text-transform:none;opacity:1;max-width:46ch}
.more-it small{display:block;margin-top:2px;font:400 .82rem/1.35 var(--font-display);color:var(--muted)}

/* ---------- back: one control, same place and look on every page ---------- */
.backbar{background:var(--bg)}
.backbar .in{display:flex;align-items:center;min-height:44px}
.backbtn{display:inline-flex;align-items:center;gap:.35rem;max-width:100%;margin-left:-.35rem;padding:.4rem .6rem .4rem .35rem;border:0;border-radius:999px;background:none;
  color:var(--muted);font:600 .85rem/1.2 var(--font-display);cursor:pointer;text-align:left}
.backbtn span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.backbtn svg{flex:none;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.backbtn:hover{color:var(--ink);background:color-mix(in srgb,var(--ink) 6%,transparent)}
.backbtn:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
/* older one-off back controls give way to it */
.back,.pd-x,.pt-back,.issue-location{display:none!important}
.pt-top:not(:has(> :not(.pt-back))){display:none}

/* archive shelf with five or more volumes: previews never leave the screen, spines stay readable */
.shelf-volume:nth-child(-n+2) .shelf-preview{left:0;transform:translateY(5px)}
.shelf-volume:nth-last-child(-n+2) .shelf-preview{left:auto;right:0;transform:translateY(5px)}
.shelf-volume:nth-child(-n+2):is(:hover,:focus-within) .shelf-preview,.shelf-volume:nth-last-child(-n+2):is(:hover,:focus-within) .shelf-preview{transform:none}
.shelf-volume:nth-child(4) .spine{height:268px}.shelf-volume:nth-child(5) .spine{height:280px}
@media(max-width:700px){
  .shelf-rail{gap:8px;padding:0 4px}
  .shelf-volume:nth-child(4) .spine{height:255px}.shelf-volume:nth-child(5) .spine{height:266px}
  .spine{padding:12px 4px}.spine-title{font-size:1.05rem}
}
@media(max-width:360px){.shelf-rail{gap:6px;padding:0}.spine-title{font-size:.95rem}}

/* ---------- reference pages: one reading rhythm (review 24 Oct) ----------
   Explanations in the sans, Spanish in the serif, everywhere — prose, examples and tables.
   A rule line sits close to its example; a clear gap separates one rule+example from the next. */
.rule p{margin:0 0 .4rem}
.rule .ex-line{margin:0 0 1.15rem}
.rule .ex-line+.ex-line{margin-top:-.55rem}
.rule .ex-line small{margin-top:.1rem}
.rule .rsub{font:700 1rem/1.3 var(--font-display);margin:1.6rem 0 .7rem}
.rule p+p{margin-top:.9rem}
.rule .tbl,.lcol .tbl{margin:.8rem 0 1.3rem}
.rule .tbl table,.lcol .tbl table{width:auto;min-width:0;max-width:100%;border-collapse:collapse}
.rule .tbl th,.rule .tbl td,.lcol .tbl th,.lcol .tbl td{padding:.42rem 2rem .42rem 0;border:0;border-bottom:1px solid var(--line);background:none;vertical-align:top}
.rule .tbl th,.lcol .tbl th{font:700 .82rem/1.3 var(--font-display);color:var(--ink);border-bottom:1.5px solid var(--ink);padding-top:0}
.rule .tbl td{font:400 1.05rem/1.35 var(--font-text)}
.rule .tbl tr:last-child td,.lcol .tbl tr:last-child td{border-bottom:0}
.rule .tbl tr:nth-child(even){background:none}
.rule .tbl table:has(th:first-child:empty) td:first-child{font:500 .82rem/1.6 var(--font-display);color:var(--muted)}
.tbl .u{display:block;font:500 .74rem/1.3 var(--font-display);color:var(--muted);margin-bottom:.15rem}
@media(max-width:700px){
 .rule .tbl table{width:100%}
 .rule .tbl th,.rule .tbl td{padding-right:.8rem}
}
@media print{.tbl .u{display:block;font-size:8pt;color:#666}}

/* Archive as a row of slim magazines: only the issue you are on and the one under the pointer open up */
.shelf-rail{gap:6px;justify-content:center}
.shelf-volume{flex:0 1 52px;min-width:30px;transition:flex-basis .25s ease}
.shelf-volume.is-here,.shelf-volume.is-open{flex-basis:150px}
@media(hover:hover){.shelf-volume:hover,.shelf-volume:focus-within{flex-basis:150px}}
.shelf-volume:nth-child(n) .spine{height:280px;padding:16px 6px 14px;transform:none}
.shelf-volume:nth-child(2n) .spine{height:268px}
.shelf-volume:nth-child(3n) .spine{height:290px}
.spine{overflow:hidden;justify-content:flex-start;gap:14px}
.spine .spine-number{font-size:1.25rem;transition:font-size .25s ease}
.spine .spine-number small{font-size:.5rem}
.spine .spine-title{font-size:1rem;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-height:200px;flex:1 1 auto;min-height:0;transition:font-size .25s ease}
.spine .spine-date{opacity:0;white-space:nowrap;transition:opacity .2s}
.shelf-volume.is-here .spine,.shelf-volume.is-open .spine{justify-content:space-between}
.shelf-volume.is-here .spine-number,.shelf-volume.is-open .spine-number{font-size:2.6rem}
.shelf-volume.is-here .spine-number small,.shelf-volume.is-open .spine-number small{font-size:.8rem}
.shelf-volume.is-here .spine-title,.shelf-volume.is-open .spine-title{font-size:1.5rem;white-space:normal;max-height:190px;flex:0 1 auto}
.shelf-volume.is-here .spine-date,.shelf-volume.is-open .spine-date{opacity:1}
.shelf-volume.is-open .spine{transform:translateY(-10px)}
@media(hover:hover){
  .shelf-volume:hover .spine,.shelf-volume:focus-within .spine{justify-content:space-between}
  .shelf-volume:hover .spine-number,.shelf-volume:focus-within .spine-number{font-size:2.6rem}
  .shelf-volume:hover .spine-number small,.shelf-volume:focus-within .spine-number small{font-size:.8rem}
  .shelf-volume:hover .spine-title,.shelf-volume:focus-within .spine-title{font-size:1.5rem;white-space:normal;max-height:190px;flex:0 1 auto}
  .shelf-volume:hover .spine-date,.shelf-volume:focus-within .spine-date{opacity:1}
}
@media(max-width:700px){
  .shelf-rail{gap:5px;padding:0}
  .shelf-volume{flex-basis:42px}
  .shelf-volume.is-here,.shelf-volume.is-open{flex-basis:118px}
  .shelf-volume:nth-child(n) .spine{height:240px}
  .shelf-volume.is-here .spine-number,.shelf-volume.is-open .spine-number{font-size:2rem}
  .shelf-volume.is-here .spine-title,.shelf-volume.is-open .spine-title{font-size:1.2rem;max-height:160px}
}
@media(prefers-reduced-motion:reduce){.shelf-volume,.spine .spine-number,.spine .spine-title{transition:none}}

/* diary: special letters, the topic's words and rule */
.akeys{display:flex;flex-wrap:wrap;gap:4px;margin:0 0 .6rem}
.akey{min-width:34px;height:34px;padding:0 6px;border:1px solid var(--line);border-radius:8px;background:var(--paper);color:var(--ink);font:500 1rem var(--font-text);cursor:pointer}
.akey:hover{border-color:var(--ink)}
.akey:active{transform:translateY(1px)}
.fb{min-height:0;margin-top:1rem}
.fb:empty{display:none}
.dkit-head{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin:0 0 .4rem}
.dkit-head h4{margin:0;font:700 .95rem var(--font-display)}
.dkit-head .lnk{font:600 .8rem var(--font-display);white-space:nowrap}
.dkit-head .lnk:disabled{opacity:.5;cursor:default;text-decoration:none}
.dwords{list-style:none;margin:0 0 1.4rem;padding:0;border-top:1px solid var(--line)}
.dw{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;align-items:center;gap:.8rem;padding:.42rem 0;border-bottom:1px solid var(--line)}
.dw-es{font:600 1rem/1.4 var(--font-display);overflow-wrap:anywhere}
.dw-tr{font:400 .88rem/1.3 var(--font-display);color:var(--muted)}
.dw-add{width:30px;height:30px;border-radius:50%;border:1px solid var(--ink);background:transparent;color:var(--ink);font:600 1rem/1 var(--font-display);cursor:pointer}
.dw-add.on{background:var(--ink);color:var(--paper)}
.drule h4{font:600 1.05rem/1.4 var(--font-display);margin:.2rem 0 .4rem}
.drule p{font-family:var(--font-display);margin:.3rem 0 .6rem;font-size:.98rem;line-height:1.5}
.drule .ex-line{padding-left:.8rem;border-left:3px solid color-mix(in srgb,var(--accent) 45%,transparent)}
.drule .ex-line small{display:block;color:var(--muted);font-size:.85rem}
@media(max-width:520px){.dw{grid-template-columns:minmax(0,1fr) auto;row-gap:0}.dw-tr{grid-column:1;grid-row:2}.dw-add{grid-row:1/3;grid-column:2}}
/* with slim spines the "what it was about" note sits centred above the whole shelf, so it never leaves the screen */
.shelf-rail{position:relative}
.shelf-volume{position:static}
.shelf-volume:nth-child(n) .shelf-preview{left:50%;right:auto;transform:translate(-50%,5px)}
.shelf-volume:nth-child(n):is(:hover,:focus-within) .shelf-preview{transform:translate(-50%,0)}

/* practice: four ways in, before everything else */
.phub{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0 0 2.6rem}
.ptile{display:grid;grid-template-rows:auto auto 1fr;align-content:start;gap:.25rem;text-align:left;padding:1rem 1rem 1.1rem;min-height:132px;border:0;border-radius:12px;background:var(--rc);color:var(--on);cursor:pointer;transition:transform .15s}
.ptile:hover{transform:translateY(-3px)}
.ptile:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.ptile-big{font:400 1.7rem/1 'Shrikhand',var(--font-display);margin-bottom:.5rem}
.ptile-t{font:700 1.05rem/1.2 var(--font-display)}
.ptile-s{font:500 .82rem/1.35 var(--font-display);opacity:1}
#p-issues,#p-gram,#p-pd,#p-more{scroll-margin-top:calc(var(--hh,64px) + 16px)}
@media(max-width:860px){.phub{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:380px){.ptile{min-height:112px;padding:.85rem}.ptile-big{font-size:1.4rem}}
@media(prefers-reduced-motion:reduce){.ptile{transition:none}}
/* fun */
.fun-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}

/* Diary vocabulary stays optional; native details supports keyboard and screen readers. */
.dwords-panel{margin:0 0 1.4rem}
.dwords-panel>summary{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:44px;cursor:pointer;list-style:none;font:700 .95rem/1.4 var(--font-display)}
.dwords-panel>summary::-webkit-details-marker{display:none}
.dwords-panel>summary::after{content:'⌄';font-size:1.25rem;transition:transform .15s}
.dwords-panel[open]>summary::after{transform:rotate(180deg)}
.dwords-panel>summary:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:4px}
.dwords-panel .dkit-head{justify-content:flex-end;margin:.35rem 0 .6rem}
.dwords-panel .dwords{margin-bottom:0}

.entry-guide p{font-weight:400;line-height:1.5;max-width:62ch}.entry-guide h2{margin:0}.entry-guide .lnk{align-self:center}

/* Keep diary actions clear of its illustration, including wrapped translations. */
.diary-actions{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;max-width:calc(100% - 250px)}
.ptop .diary-actions .btn{margin:0}
@media(max-width:700px){
 .diary-actions{max-width:calc(100% - 140px)}
 /* Catalogue illustrations sit beside the copy instead of reserving an empty row. */
 .lesson-catalog .card{display:grid;grid-template-columns:minmax(0,1fr) 64px;gap:.4rem 16px;min-height:180px;align-content:center}
 .lesson-catalog .card>:is(.cdood,.bigch,.art,.cdisc){grid-column:2;grid-row:1/5;width:64px;height:64px;margin:0;align-self:center}
 .lesson-catalog .card>:is(.lab,.ct,.cr,.cm){grid-column:1;min-width:0}
}

/* Optional rule guide sits beside the questions, in normal document flow. */
.practice-guide{margin:0 0 1.8rem}.practice-guide .fold{margin:0}.practice-guide .foldin{padding-top:.4rem}
.practice-guide-note{font:400 .9rem/1.6 var(--font-display);color:var(--muted);margin:0 0 1.2rem}
.practice-rule{padding:1.1rem 0;border-top:1px solid var(--line)}
.practice-rule h3{font:700 1.1rem/1.35 var(--font-display);margin:0 0 .6rem}
.practice-rule p{font:400 .95rem/1.65 var(--font-display);margin:.5rem 0}
.practice-rule-example>span{display:block}.practice-rule-example>span[lang]{font-weight:600}
.practice-rule-example>span+span{font-size:.88rem;color:var(--muted);margin-top:.2rem}
.practice-rule :is(p,li){overflow-wrap:break-word}
.numgrid-wrap{margin:1.6rem 0 1.4rem}
.numgrid{list-style:none;margin:.6rem 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));gap:0 1.6rem}
.numgrid li{display:flex;gap:.9rem;align-items:baseline;padding:.38rem 0;border-bottom:1px solid var(--line)}
.numgrid b{font:700 1rem/1.3 var(--font-display);min-width:1.8rem}
.numgrid span{font:400 1.02rem/1.35 var(--font-text)}
@media print{.numgrid{grid-template-columns:repeat(3,1fr)}}

/* A0 owns its course layout. Typography, controls, panels and answer states
   come from the shared learning-ui, box, opt, tile, field and feedback components. */
.a0-cover{background:var(--lemon);color:var(--on-lemon);padding:50px 0 32px}
.a0-eyebrow{font:600 13px/1.5 var(--font-display);letter-spacing:0;margin:0 0 16px}
.a0-cover-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:42px;align-items:center}
.a0-cover h1{font-size:clamp(54px,7vw,90px);line-height:1.05;letter-spacing:-.04em;margin:12px 0 24px}
.a0-intro{font-size:17px;line-height:1.7;max-width:560px}.a0-cover .rowbtns{margin-top:26px}
.a0-progress-label{display:flex;justify-content:space-between;font-size:12px;margin:38px 0 8px}
.a0-progress{display:block;width:100%;height:5px;accent-color:var(--ink);border:0}
.a0-progress::-webkit-progress-bar{background:color-mix(in srgb,currentColor 15%,transparent)}.a0-progress::-webkit-progress-value{background:var(--ink)}
.a0-weeks{padding-top:34px;padding-bottom:60px}.a0-how{font-size:14px;line-height:1.8;max-width:740px;margin-bottom:40px}
.a0-week{margin-bottom:42px}.a0-week-heading{display:flex;align-items:center;gap:22px;margin-bottom:17px}
.a0-week-number{font-size:48px;font-weight:500;line-height:1;color:var(--muted)}
.a0-week-heading>div{min-width:0;flex:1}.a0-week-heading .a0-eyebrow{margin-bottom:3px}
.a0-week-heading h2{font-size:clamp(24px,3vw,32px);line-height:1.2;margin:0}
.a0-days{display:grid;gap:8px}
.a0-day{width:100%;display:grid;grid-template-columns:38px minmax(0,1fr) auto;align-items:center;gap:16px;text-align:left;padding:20px 16px}
.a0-day-number{font-size:24px;font-weight:500;line-height:1}.a0-day strong{display:block;font-size:15px;line-height:1.5}
.a0-day small{display:block;font-size:12px;line-height:1.6;margin-top:4px;color:var(--muted)}
.a0-day-tag{display:flex;align-items:center;gap:14px;font-size:11px;white-space:nowrap}.a0-day.is-done .a0-day-number{font-size:20px}
.a0-source-note{margin-top:50px}.a0-source-note h2{font-size:26px;margin:0 0 12px}.a0-source-note p{font-size:13px;line-height:1.8}.a0-source-note summary{cursor:pointer;font-size:12px}
.a0-route-strip{font-size:11px;padding:9px 0}.a0-route-strip .in{display:flex;justify-content:space-between}
.a0-side-label{display:block;font-size:14px;margin:18px 14px}.a0-side-week{margin:10px 8px}.a0-side-week summary{cursor:pointer;font-size:12px;padding:10px 6px}.a0-side-week .si{line-height:1.5}
.a0-lesson{max-width:850px;padding-top:24px;padding-bottom:50px}.a0-lesson-top{display:flex;gap:20px;align-items:center;justify-content:flex-end;font-size:10px;letter-spacing:.06em}.a0-lesson-top .lnk{font-size:12px;letter-spacing:0}
.a0-lesson-head{display:grid;grid-template-columns:minmax(0,1fr) 120px;gap:24px;align-items:center;margin:38px 0}
.a0-lesson-head h1{font-size:clamp(34px,5vw,54px);line-height:1.12;letter-spacing:-.035em;margin:10px 0 18px}
.a0-lesson-heading-copy>p:last-child{font-size:16px;line-height:1.6}.a0-lesson h2{font-size:26px;line-height:1.3;margin:0 0 14px}
.a0-recall{margin-bottom:38px}.a0-recall>b{font-size:12px}.a0-recall p{font-size:22px;margin:12px 0}
.a0-phrases>p,.a0-note p,.a0-own>p{font-size:14px;line-height:1.8}
.a0-phrase{padding:24px 0;display:flex;justify-content:space-between;gap:20px;align-items:flex-start}
.a0-es{font-size:27px;font-weight:500;line-height:1.4;margin:0 0 10px;overflow-wrap:anywhere}
.a0-phrase details{font-size:13px;line-height:1.7}.a0-phrase summary,.a0-transcript summary,.a0-own summary{cursor:pointer;text-decoration:underline;text-underline-offset:3px;font-size:12px}.a0-phrase details p{margin-bottom:0}
.a0-listen{display:flex;gap:12px;flex-wrap:wrap;align-items:center;flex-shrink:0}.a0-listen .btn{font-size:11px;padding:9px 12px}
.a0-audio-status{min-height:20px;font-size:12px}.a0-note{margin:34px 0}.a0-note h2{font-size:23px}
.a0-practice{margin:40px 0}.a0-question{padding:25px 0}.a0-question h3{font-size:14px;font-weight:600;line-height:1.6;margin:0 0 20px}.a0-question h3>span{font-weight:400;color:var(--muted);margin-right:10px}
.a0-options{display:grid;gap:9px;margin-top:18px}.a0-opt-letter{font-size:11px;opacity:.65;min-width:15px}
.a0-transcript{margin-top:12px}.a0-transcript p{font-size:22px;line-height:1.5}
.a0-order-model{font-size:13px;line-height:1.7}.a0-order-model b{font-weight:500}.a0-answer-line{align-items:center;min-height:55px;margin:15px 0;font-size:16px;line-height:1.6;overflow-wrap:anywhere}
.a0-word-bank{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:15px}.a0-word-bank .tile{min-height:44px}.a0-word-bank .tile:disabled{opacity:.35}
.a0-own details{margin:18px 0}.a0-own details .a0-es{margin-top:14px}.a0-own label:not(.a0-self){display:block;font-size:12px;margin:24px 0 10px}
.a0-own textarea{display:block;width:100%;line-height:1.6;resize:vertical;box-sizing:border-box}
.a0-self{display:flex;align-items:center;gap:12px;font-size:13px;line-height:1.6;margin-top:18px}.a0-self input{width:19px;height:19px;accent-color:var(--ink);flex-shrink:0}
.a0-finish{padding:25px 0}.a0-finish p{font-size:14px;line-height:1.8}
.a0-day-nav{display:flex;justify-content:space-between;gap:15px;padding-top:22px}.a0-graduation{padding:25px 0}
.a0-map{margin:25px 0;text-align:center}.a0-map figcaption{font-size:12px;line-height:1.7;margin-bottom:18px}.a0-map-places{display:grid;grid-template-columns:1fr 45px 1fr;gap:12px;align-items:center;font-size:24px}
.a0-map-places>span:not(.a0-street){padding:20px 7px;background:var(--surface-control);border-radius:10px}.a0-street{font-size:38px}.a0-you{display:inline-block;padding:8px 20px;margin-top:15px;font-size:12px}
.a0-save{display:block;margin-top:12px;font-size:11px;min-height:30px}
.a0-art{display:block;height:auto;object-fit:contain;user-select:none;-webkit-user-drag:none}.a0-cover-art{margin:0;justify-self:center;width:100%;max-width:350px}.a0-hero-art{width:100%}.a0-week-art{width:96px;flex:none;margin-left:auto}.a0-lesson-art{width:120px}
@media(max-width:680px){
 .a0-cover{padding-top:30px}.a0-cover-grid{grid-template-columns:minmax(0,1.6fr) minmax(96px,1fr);gap:12px 16px}
 .a0-cover-copy{display:contents}.a0-cover h1{grid-column:1;grid-row:1;font-size:clamp(34px,9vw,52px);margin:8px 0 12px}.a0-cover-art{grid-column:2;grid-row:1;max-width:170px}
 .a0-cover .a0-intro,.a0-cover .rowbtns{grid-column:1/-1}.a0-intro{font-size:15px}.a0-cover .rowbtns{margin-top:8px}
 .a0-day{grid-template-columns:28px minmax(0,1fr) 22px;gap:12px;padding:16px 12px}.a0-day-number{font-size:20px}.a0-day strong{font-size:14px}
 .a0-day-tag{display:contents;font-size:10px}.a0-day-duration{grid-column:2;grid-row:2}.a0-day-tag .ui-arrow{grid-column:3;grid-row:1/3}.a0-day-copy{grid-column:2;grid-row:1}.a0-day-number{grid-column:1;grid-row:1}
 .a0-week-heading{gap:12px}.a0-week-number{font-size:36px}.a0-week-art{width:64px}.a0-week-heading h2{font-size:22px}
 .a0-phrase{display:block}.a0-phrase .a0-listen{margin-top:14px}.a0-es{font-size:25px}.a0-lesson-top{align-items:flex-start}
 .a0-lesson-head{grid-template-columns:minmax(0,1fr) 78px;gap:14px;margin-top:30px}.a0-lesson-art{width:78px}.a0-lesson-head h1{font-size:clamp(29px,7vw,40px)}.a0-lesson-heading-copy>p:last-child{font-size:15px}
 .a0-map-places{font-size:20px;gap:6px;grid-template-columns:1fr 25px 1fr}
}

.a0-listen .lnk{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:8px 4px;text-underline-offset:3px}
/* courses without still lifes (English for now): the cover copy takes the full width */
.a0-cover-grid.no-art{grid-template-columns:minmax(0,1fr)}
@media (max-width:680px){.a0-cover-grid.no-art{grid-template-columns:minmax(0,1fr)}}
/* the story moment that opens a lesson */
.a0-scene{font-size:15px;line-height:1.75;margin:0 0 30px;padding-left:14px;border-left:3px solid var(--accent,currentColor);max-width:60ch}
/* reading sound by sound */
.a0-read{margin:34px 0}.a0-read h2{font-size:23px}.a0-read>p{font-size:14px;line-height:1.8}
.a0-read-words{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0 6px}
.a0-read-word{min-height:48px;min-width:64px;font-size:20px;text-transform:none}
/* English keeps its porcelain blue: no cream cover */
html[data-lang="en"] .a0-cover{background:var(--lilac);color:var(--on-lilac)}
/* French ink is a lighter chocolate: keep the option letters readable */
html[data-lang="fr"] .a0-opt-letter{opacity:.85}

/* Limited story illustrations stay beside the scene, outside the exercises. */
.a0-story-scene.has-art{display:grid;grid-template-columns:minmax(0,1fr) 180px;align-items:center;gap:24px;margin-bottom:30px}
.a0-story-scene.has-art .a0-scene{margin-bottom:0}
.a0-story-art{margin:0;width:180px;justify-self:end}
.a0-story-img{display:block;width:100%;height:auto;max-height:190px;object-fit:contain}
@media(max-width:680px){.a0-story-scene.has-art{grid-template-columns:minmax(0,1fr) 100px;gap:12px}.a0-story-art{width:100px}.a0-story-img{max-height:120px}}

/* Catalan alone: the senyera's red/yellow, within the shared magazine layout. */
html[data-lang="ca"]{--bg:#FFF8E6;--paper:#FFFBF0;--edition:#FFD633;--edition-ink:#57231F;--edition-accent:#B3262A;--edition-accent-ink:#FFF9E9;--accent:#B3262A;--accent-ink:#FFF9E9;--green:#FFD633;--lemon:#FFE99B;--orange:#F6C49C;--lilac:#F5DCAB;--blue:#B3262A;--on-green:#57231F;--on-lemon:#57231F;--on-orange:#57231F;--on-lilac:#57231F;--on-blue:#FFF9E9;--card-red:#B3262A;--fixed-ink:#57231F}
html[data-lang="ca"][data-theme="light"]{--bg:#FFF8E6;--paper:#FFFBF0;--ink:#57231F;--muted:#79604C;--line:#DDC8A9}
html[data-lang="ca"] .a0-cover{background:var(--edition);color:var(--edition-ink)}
html[data-lang="ca"] .a0-cover,html[data-lang="ca"] .magazine-cover{position:relative}
html[data-lang="ca"] .a0-cover:after,html[data-lang="ca"] .magazine-cover:after{content:'';position:absolute;bottom:0;left:0;right:0;height:10px;background:repeating-linear-gradient(to bottom,#FFD633 0 1.11px,#B3262A 1.11px 2.22px);pointer-events:none}
html[data-lang="ca"] .a0-week-number{font-family:Shrikhand,serif;color:#B3262A}
html[data-lang="ca"] .mag-issue-number{--fixed-ink:#B3262A}
html[data-lang="ca"] .rc-practice{--rc:var(--lemon);--on:var(--on-lemon)}
html[data-lang="ca"] .mag-cup img{filter:sepia(.8) saturate(2)}
html[data-lang="ca"] .a0-hero-art{max-height:320px}
html[data-lang="ca"] .a0-cover h1{font-size:clamp(43px,5.4vw,69px)}
html[data-lang="ca"] .scene-img{object-fit:cover;background:transparent}
html[data-lang="ca"] .a0-opt-letter{opacity:.85}
@media(max-width:680px){html[data-lang="ca"] .a0-cover h1{font-size:clamp(30px,7.5vw,44px)}html[data-lang="ca"] .a0-cover-grid{grid-template-columns:minmax(0,1.5fr) minmax(90px,1fr)}}

/* Story art is shown beside the narrative, once per lesson. */
html[data-lang="ca"] .a0-lesson-head .a0-lesson-art{display:none}
html[data-lang="ca"] .a0-lesson-head{grid-template-columns:1fr}
@media(max-width:680px){html[data-lang="ca"] .a0-story-scene.has-art{grid-template-columns:1fr}html[data-lang="ca"] .a0-story-art{width:min(100%,300px);justify-self:center}html[data-lang="ca"] .a0-story-img{max-height:210px}}

/* Dark theme: the senyera red is too dark on near-black; use the yellow, and give the active crossword clue a solid light ground. */
html[data-lang="ca"][data-theme="dark"] .a0-week-number{color:#FFD633}
html[data-lang="ca"][data-theme="dark"] .clue.on{background:var(--lemon)}
@media(prefers-color-scheme:dark){html[data-lang="ca"]:not([data-theme="light"]) .a0-week-number{color:#FFD633}html[data-lang="ca"]:not([data-theme="light"]) .clue.on{background:var(--lemon)}}