/* DRAFT, not approved, not released.
   Newsletters page (/newsletters/) and the interest signup shared with /academy/. Load after academy.css.
   The colours and fonts are the theme's existing values, named once here as --hvda-* tokens:
   gold is for reading emphasis, plum is for actions. */
:root{
  --hvda-accent:#80276b;
  --hvda-accent-rgb:128,39,107;
  --hvda-accent-lit:#9a3481;
  --hvda-page:#190b16;
  --hvda-strip:#210d1c;
  --hvda-ivory:#f2ede6;
  --hvda-ivory-rgb:242,237,230;
  --hvda-gold:#e09a55;
  --hvda-gold-rgb:224,154,85;
  --hvda-warn:#efb87f;
  --hvda-font-display:'Instrument Serif',serif;
  --hvda-font-body:'Space Grotesk',system-ui,sans-serif;
}

/* Interest signup: one form, used on both pages. The narrow single column is the default. */
.interest-signup{margin:0}
.interest-signup .interest-account{margin:0 0 22px;color:rgba(var(--hvda-ivory-rgb),.74);font-size:14.5px;line-height:1.6}
.interest-intro{margin:0 0 22px;color:rgba(var(--hvda-ivory-rgb),.78);font-size:16px;line-height:1.6}
.interest-intro a,.interest-account a,.interest-privacy a,.newsletters-after-text a{display:inline-block;margin:-12px;padding:12px;color:var(--hvda-gold);text-decoration:underline;text-decoration-color:rgba(var(--hvda-gold-rgb),.5);text-decoration-thickness:1px;text-underline-offset:4px;transition:text-decoration-color .25s}
.interest-intro a:hover,.interest-account a:hover,.interest-privacy a:hover,.newsletters-after-text a:hover{text-decoration-color:var(--hvda-gold)}
.interest-intro a:focus-visible,.interest-account a:focus-visible,.interest-privacy a:focus-visible,.newsletters-after-text a:focus-visible{outline:2px solid var(--hvda-gold);outline-offset:-9px;border-radius:12px}

.interest-choice{min-width:0;margin:0;padding:0;border:0}
.interest-choice legend{float:left;width:100%;box-sizing:border-box;margin:0 0 14px;padding:0;color:rgba(var(--hvda-ivory-rgb),.8);font-size:14.5px;line-height:1.5}
.interest-choice legend + *{clear:left}
.interest-list{border-bottom:1px solid rgba(var(--hvda-ivory-rgb),.1)}
.interest-row{position:relative;display:grid;grid-template-columns:24px minmax(0,1fr);gap:4px 16px;align-items:start;min-height:44px;box-sizing:border-box;padding:18px 12px 19px 4px;border-top:1px solid rgba(var(--hvda-ivory-rgb),.1);transition:background .25s}
.interest-row:hover,.interest-row:focus-within{background:rgba(var(--hvda-gold-rgb),.045)}
.interest-row:has(.interest-check:checked){background:rgba(var(--hvda-accent-rgb),.2)}
.interest-signup-member .interest-row{grid-template-columns:minmax(0,1fr);padding-left:0}
.interest-signup-member .interest-row:hover{background:none}

/* A real checkbox, restyled. The tick is white on plum and the box keeps a light border,
   so the ticked state never depends on plum against the dark page. */
.interest-check{-webkit-appearance:none;appearance:none;display:grid;place-content:center;grid-area:1 / 1 / 3 / 2;box-sizing:border-box;width:24px;height:24px;margin:3px 0 0;border:1.5px solid rgba(var(--hvda-ivory-rgb),.62);border-radius:6px;background:var(--hvda-page);cursor:pointer;transition:background .2s,border-color .2s}
.interest-check::before{content:"";width:13px;height:13px;background:#fff;clip-path:polygon(14% 44%,0 65%,50% 100%,100% 16%,80% 0,43% 62%);transform:scale(0);transition:transform .15s ease-out}
.interest-check:checked{border-color:var(--hvda-ivory);background:linear-gradient(180deg,var(--hvda-accent-lit),var(--hvda-accent))}
.interest-check:checked::before{transform:scale(1)}
.interest-check:focus-visible{outline:2px solid var(--hvda-gold);outline-offset:3px}

.interest-signup .interest-name{display:block;grid-area:1 / -2 / 2 / -1;margin:0;color:var(--hvda-ivory);font:400 25px/1.2 var(--hvda-font-display);letter-spacing:0}
.interest-signup label.interest-name{cursor:pointer}
.interest-signup label.interest-name::after{content:"";position:absolute;inset:0}
.interest-note{grid-area:2 / -2 / 3 / -1;margin:0;color:rgba(var(--hvda-ivory-rgb),.68);font-size:14.5px;font-weight:300;line-height:1.6}
.interest-hint{margin:0;padding:16px 0 0;border-top:1px solid rgba(var(--hvda-ivory-rgb),.1);color:rgba(var(--hvda-ivory-rgb),.62);font-size:13.5px;line-height:1.6}
.interest-choice-error{margin:14px 0 0;color:var(--hvda-warn);font-size:14px;line-height:1.6}
.interest-choice-error:empty{display:none}

.interest-action{margin-top:28px}
.interest-volume{margin:0 0 20px;color:rgba(var(--hvda-ivory-rgb),.82);font-size:14.5px;line-height:1.6}
.interest-signup .academy-button:focus-visible{outline:2px solid var(--hvda-gold);outline-offset:3px}
.interest-signup .academy-signup-success{padding:14px 16px;border:1px solid rgba(var(--hvda-gold-rgb),.4);border-radius:8px}
.interest-signup .academy-signup-success:focus-visible{outline:2px solid var(--hvda-gold);outline-offset:2px}
.interest-privacy{margin:16px 0 0;color:rgba(var(--hvda-ivory-rgb),.6);font-size:13px;line-height:1.6}

/* Newsletters page */
.newsletters-main{display:block;min-width:0}
.newsletters-wrap{width:min(1100px,88vw);margin:0 auto}
.newsletters-top{padding:150px 0 112px;background:radial-gradient(circle at 82% 10%,rgba(155,55,128,.22) 0%,rgba(155,55,128,.07) 30%,transparent 58%)}
.newsletters-top .brief-hero{margin-bottom:60px}
.newsletters-week{padding:104px 0 110px;background:var(--hvda-strip);border-top:1px solid rgba(var(--hvda-ivory-rgb),.07);border-bottom:1px solid rgba(var(--hvda-ivory-rgb),.07)}
.newsletters-week h2,.newsletters-after h2{max-width:820px;margin:0;font:400 clamp(34px,4.6vw,58px)/1.06 var(--hvda-font-display);text-wrap:balance}
.newsletters-week h2 em,.newsletters-after h2 em{color:var(--hvda-gold)}

/* Five workdays: four short editions and a taller Friday. Decorative, hidden from assistive technology. */
.newsletters-rail{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;align-items:end;max-width:900px;margin:54px 0 30px}
.newsletters-rail span{display:block;color:rgba(var(--hvda-ivory-rgb),.6);font:500 11px/1 ui-monospace,Menlo,monospace;letter-spacing:.12em;text-transform:uppercase}
.newsletters-rail span::before{content:"";display:block;height:10px;margin-bottom:12px;border-radius:2px;background:rgba(var(--hvda-gold-rgb),.46)}
.newsletters-rail span:last-child{color:var(--hvda-gold)}
.newsletters-rail span:last-child::before{height:68px;background:linear-gradient(180deg,var(--hvda-gold),rgba(var(--hvda-gold-rgb),.5))}
.newsletters-rhythm{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:30px 56px;max-width:900px}
.newsletters-rhythm h3{margin:0 0 8px;font:400 27px/1.15 var(--hvda-font-display)}
.newsletters-rhythm p{margin:0;color:rgba(var(--hvda-ivory-rgb),.68);font-size:15.5px;font-weight:300;line-height:1.7}

.newsletters-after{padding:104px 0 10px}
.newsletters-after-text{max-width:680px;margin-top:30px}
.newsletters-after-text p{margin:0 0 18px;color:rgba(var(--hvda-ivory-rgb),.74);font-size:17px;font-weight:300;line-height:1.72}

/* Wide screens: the four newsletters on the left, the subscribe panel on the right. */
@media (min-width:980px){
  .newsletters-chooser .interest-signup{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(320px,.9fr);column-gap:72px;align-items:start}
  .newsletters-chooser .interest-account{grid-column:1 / -1}
  .newsletters-chooser .interest-action{margin-top:0;padding:30px;border:1px solid rgba(var(--hvda-gold-rgb),.4);border-radius:14px;background:rgba(25,11,22,.64)}
  .newsletters-chooser .interest-name{font-size:30px}
  .newsletters-chooser .interest-note{font-size:15px}
  .newsletters-chooser .interest-row{padding:22px 16px 23px 6px;column-gap:20px}
  .newsletters-chooser .interest-signup-member .interest-row{padding-left:0}
  .newsletters-chooser .interest-check{margin-top:6px}
  .newsletters-chooser .academy-button{width:100%;box-sizing:border-box}
}
/* The subscribe panel stays in view while the list scrolls past, when the window is tall enough to hold it. */
@media (min-width:980px) and (min-height:640px){
  .newsletters-chooser .interest-action{position:sticky;top:104px}
}
@media (max-width:760px){
  .newsletters-top{padding:110px 0 84px}
  .newsletters-top .brief-hero{margin-bottom:44px}
  .newsletters-week{padding:80px 0 84px}
  .newsletters-rail{gap:7px;margin:44px 0 26px}
  .newsletters-rail span{font-size:10px;letter-spacing:.08em}
  .newsletters-rhythm{grid-template-columns:minmax(0,1fr)}
  .newsletters-after{padding-top:80px}
}
@media (prefers-reduced-motion:reduce){
  .interest-row,.interest-check,.interest-check::before,.interest-intro a,.interest-account a,.interest-privacy a,.newsletters-after-text a{transition:none}
}
@media (forced-colors:active){
  .interest-check{-webkit-appearance:auto;appearance:auto;display:inline-block}
  .interest-check::before{display:none}
}