:root{
  /* reader chrome: deep blue, the pages themselves stay on house paper */
  --ink:#050A14;
  --forest:#0A1326;
  --forest-2:#182A52;
  --gold:#C6A15B;
  --gold-soft:#E4CE9B;
  --cream:#E9EFFA;
  --paper:#FBF8F1;
  --mist:#7B8CAB;
  --glow:#3E7BFF;
  --glow-2:#3FD2E8;
  --rail-w:52px;
  --gap:clamp(6px,0.7vw,12px);
  --ser:"Playfair Display",Georgia,serif;
  --sans:"Inter",Helvetica,Arial,sans-serif;
  --mono:"JetBrains Mono",Menlo,monospace;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--ink);
  color:var(--cream);
  font-family:var(--sans);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* masthead ------------------------------------------------------- */
.masthead{
  display:flex;align-items:center;gap:22px;
  padding:9px 18px;
  background:linear-gradient(180deg,#0C1730 0%,var(--forest) 100%);
  border-bottom:1px solid rgba(62,123,255,.22);
  box-shadow:0 1px 0 rgba(63,210,232,.10);
  flex:0 0 auto;position:relative;z-index:6;
}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none;color:inherit}
.brand-mark{height:22px;width:auto;display:block}
.brand-sub{
  font-family:var(--mono);font-size:10.5px;letter-spacing:4px;color:var(--gold);
  text-transform:uppercase;padding-left:14px;border-left:1px solid rgba(198,161,91,.4);
}
.masthead-strap{min-width:0;padding-left:22px;border-left:1px solid rgba(62,123,255,.28)}
.masthead-kicker{
  margin:0;font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold);white-space:nowrap;
}
.masthead-head{
  margin:5px 0 0;font-size:16px;font-weight:700;letter-spacing:.055em;
  text-transform:uppercase;color:var(--cream);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;
}
.masthead-actions{margin-left:auto;display:flex;align-items:center;gap:8px}
.ghost-btn{padding:8px 14px;border:1px solid rgba(245,240,230,.25);border-radius:2px;font-size:13.5px}
.ghost-btn{border-color:rgba(123,140,171,.4)}
.ghost-btn:hover{border-color:var(--glow-2);color:var(--glow-2);box-shadow:0 0 14px rgba(63,210,232,.2)}
.solid-btn{padding:9px 16px;background:var(--gold);color:var(--ink);font-size:13.5px;
  font-weight:600;text-decoration:none;border-radius:2px;border:0;cursor:pointer}
.solid-btn:hover{background:var(--gold-soft)}

/* spread ticks --------------------------------------------------- */
.ticks{display:flex;gap:2px;padding:0 22px 0;background:var(--forest);flex:0 0 auto;position:relative;z-index:6}
.tick{flex:1;height:5px;background:rgba(123,140,171,.22);transition:background .18s,box-shadow .18s}
.tick:hover{background:rgba(63,210,232,.6)}
.tick[aria-selected="true"]{background:var(--gold);box-shadow:0 0 10px rgba(198,161,91,.55)}

/* stage ---------------------------------------------------------- */
.stage{
  flex:1 1 auto;position:relative;display:flex;align-items:stretch;
  min-height:0;isolation:isolate;
  background:
    radial-gradient(105% 70% at 50% -8%,rgba(62,123,255,.20) 0%,transparent 62%),
    radial-gradient(70% 55% at 88% 112%,rgba(63,210,232,.12) 0%,transparent 66%),
    linear-gradient(180deg,#081026 0%,#050A14 58%,#03060E 100%);
}
/* futuristic shell: a flat grid above, a receding floor plane below */
.stage-fx{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.stage-fx::before{
  content:"";position:absolute;left:-30%;right:-30%;bottom:-14%;height:62%;
  background-image:
    repeating-linear-gradient(90deg,rgba(110,170,255,.30) 0 1px,transparent 1px 76px),
    repeating-linear-gradient(0deg,rgba(110,170,255,.24) 0 1px,transparent 1px 76px);
  transform:perspective(560px) rotateX(76deg);
  transform-origin:50% 100%;
  -webkit-mask-image:linear-gradient(to top,#000 4%,transparent 72%);
  mask-image:linear-gradient(to top,#000 4%,transparent 72%);
}
.stage::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:
    repeating-linear-gradient(90deg,rgba(120,160,255,.085) 0 1px,transparent 1px 76px),
    repeating-linear-gradient(0deg,rgba(120,160,255,.06) 0 1px,transparent 1px 76px);
  -webkit-mask-image:radial-gradient(76% 66% at 50% 46%,transparent 26%,#000 100%);
  mask-image:radial-gradient(76% 66% at 50% 46%,transparent 26%,#000 100%);
}
/* horizon line with a little bloom */
.stage::after{
  content:"";position:absolute;left:0;right:0;top:38%;height:2px;z-index:0;pointer-events:none;
  background:linear-gradient(90deg,transparent 6%,rgba(63,210,232,.55) 50%,transparent 94%);
  box-shadow:0 0 26px 6px rgba(63,210,232,.18);
  opacity:.6;
}
.rail{
  width:var(--rail-w);flex:0 0 var(--rail-w);position:relative;z-index:4;
  display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:16px 0;background:linear-gradient(180deg,var(--forest),#070E1E);
  border-right:1px solid rgba(62,123,255,.2);
}
.rail-btn{width:36px;height:36px;display:grid;place-items:center;border-radius:2px;color:var(--gold-soft)}
.rail-btn svg{width:20px;height:20px;fill:currentColor}
.rail-btn:hover{background:rgba(62,123,255,.18);color:var(--glow-2)}
.rail-btn[aria-pressed="true"]{background:var(--gold);color:var(--ink)}

.spread-wrap{
  flex:1 1 auto;min-width:0;display:grid;place-items:center;position:relative;z-index:2;
  padding:var(--gap) 50px;overflow:hidden;
}
.spread{
  display:flex;gap:2px;align-items:stretch;
  /* box-shadow on the leaves is far cheaper than drop-shadow on the spread */
  transition:transform .28s ease, opacity .18s ease;
}
.spread.turning-next{transform:translateX(-14px);opacity:.35}
.spread.turning-prev{transform:translateX(14px);opacity:.35}
.leaf{background:var(--paper);position:relative;line-height:0;
  box-shadow:0 24px 50px -18px rgba(0,0,0,.7);contain:paint}
.leaf svg{display:block;height:100%;width:auto}
.leaf-blank{background:transparent;box-shadow:none}
.leaf::after{
  content:"";position:absolute;inset:0;pointer-events:none;
}
.leaf-left::after{background:linear-gradient(to left,rgba(0,0,0,.16),transparent 5%)}
.leaf-right::after{background:linear-gradient(to right,rgba(0,0,0,.16),transparent 5%)}

/* zoom */
body[data-zoom="on"] .spread-wrap{overflow:auto;place-items:start center;cursor:grab}
body[data-zoom="on"] .spread-wrap.dragging{cursor:grabbing}
body[data-zoom="on"] .spread{filter:none}

/* arrows */
.arrow{
  position:absolute;top:50%;transform:translateY(-50%);z-index:5;
  width:38px;height:70px;display:grid;place-items:center;color:var(--gold-soft);
  background:rgba(8,16,38,.86);border:1px solid rgba(62,123,255,.32);
}
.arrow svg{width:22px;height:22px;fill:currentColor}
.arrow:hover{background:var(--gold);color:var(--ink)}
.arrow[disabled]{opacity:.22;pointer-events:none}
.arrow-prev{left:calc(var(--rail-w) + 4px)}
.arrow-next{right:4px}

/* share strip ---------------------------------------------------- */
.share-strip{
  flex:0 0 auto;display:flex;align-items:center;gap:18px;position:relative;z-index:6;
  padding:7px 18px;background:linear-gradient(180deg,var(--forest),#070E1E);
  border-top:1px solid rgba(62,123,255,.22);
}
.page-readout{margin:0;font-family:var(--mono);font-size:12.5px;color:var(--gold-soft)}
.share-actions{margin-left:auto;display:flex;gap:6px}
.share-btn{display:flex;align-items:center;gap:8px;padding:8px 14px;font-size:13px;color:var(--cream);border-radius:2px}
.share-btn svg{width:16px;height:16px;fill:currentColor}
.share-btn{text-decoration:none}
.share-btn:hover{background:rgba(62,123,255,.18);color:var(--glow-2)}

/* overlays ------------------------------------------------------- */
.overlay{position:fixed;inset:0;z-index:40;background:rgba(4,8,20,.96);display:grid;place-items:center;padding:24px}
.overlay[hidden]{display:none}
.toast[hidden]{display:none}
.overlay-panel{
  width:min(1180px,100%);max-height:88vh;overflow:auto;
  background:linear-gradient(180deg,#0C1730,#070E1E);
  border:1px solid rgba(62,123,255,.28);padding:26px 30px 34px;
}
.overlay-panel-narrow{width:min(660px,100%)}
.overlay-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.overlay-head h2{margin:0;font-family:var(--ser);font-size:28px;font-weight:700}
.close-btn{font-size:30px;line-height:1;color:var(--gold-soft);padding:0 6px}
.close-btn:hover{color:var(--gold)}

.section-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.chip{padding:7px 13px;border:1px solid rgba(62,123,255,.34);font-size:12.5px;color:var(--gold-soft);border-radius:2px}
.chip:hover{background:var(--gold);color:var(--ink);border-color:var(--gold)}

.thumb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:16px}
.thumb{display:flex;flex-direction:column;gap:7px;text-align:left;padding:0}
.thumb-frame{background:var(--paper);border:1px solid transparent;line-height:0;aspect-ratio:1240/1754;overflow:hidden}
.thumb-frame svg{width:100%;height:100%;display:block}
.thumb:hover .thumb-frame{border-color:var(--gold)}
.thumb[aria-current="true"] .thumb-frame{border-color:var(--gold);box-shadow:0 0 0 2px var(--gold)}
.thumb-cap{font-family:var(--mono);font-size:11px;color:var(--gold-soft)}

.search-input{
  width:100%;padding:14px 16px;background:#040814;color:var(--cream);
  border:1px solid rgba(62,123,255,.32);font-size:16px;font-family:var(--sans);border-radius:2px;
}
.search-results{margin-top:18px;display:flex;flex-direction:column;gap:2px}
.result{text-align:left;padding:14px 14px;border-left:2px solid transparent;background:rgba(120,160,255,.05)}
.result:hover{border-left-color:var(--glow-2);background:rgba(62,123,255,.14)}
.result-title{font-size:15.5px;font-weight:600;margin:0 0 4px}
.result-meta{font-family:var(--mono);font-size:11.5px;color:var(--gold-soft);margin:0 0 6px}
.result-snippet{margin:0;font-size:13.5px;color:rgba(245,240,230,.72);line-height:1.5}
.result-snippet mark{background:var(--gold);color:var(--ink);padding:0 2px}
.empty-note{margin:22px 2px;font-size:14px;color:var(--mist)}

.toast{
  position:fixed;left:50%;bottom:84px;transform:translateX(-50%);z-index:60;
  background:var(--gold);color:var(--ink);padding:11px 20px;font-size:13.5px;font-weight:600;border-radius:2px;
}

/* responsive ----------------------------------------------------- */
@media (max-width:900px){
  :root{--rail-w:52px}
  .masthead{padding:11px 14px;gap:12px}
  .masthead-strap{display:none}
  .ghost-btn{padding:7px 10px;font-size:12.5px}
  .spread-wrap{padding:10px 44px}
  .arrow{width:34px;height:60px}
  .share-btn span{display:none}
  .page-readout{font-size:11.5px}
}
@media (max-width:700px){
  :root{--rail-w:0px}
  .brand-mark{height:20px}
  .rail{display:none}
  .brand-name{font-size:19px}
  .spread-wrap{padding:8px 6px}
  .arrow{width:30px;height:54px;background:rgba(8,16,38,.78)}
  .arrow-prev{left:0}
  .arrow-next{right:0}
  .share-strip{padding:8px 12px;gap:8px}
  .share-btn{padding:8px 10px}
}
@media (max-width:520px){
  .solid-btn{display:none}
}
@media (prefers-reduced-motion:reduce){
  .spread{transition:none}
  .stage-fx::before{animation:none}
}

/* raster page images (imported PDF issues) */
.leaf img{display:block;height:100%;width:auto}
.thumb-frame img{width:100%;height:100%;object-fit:cover;display:block}

/* ported chapter modules ----------------------------------------- */
.leaf .live-frame{border:0;display:block;transform-origin:top left;background:var(--ink)}
.leaf .live-open{
  position:absolute;left:50%;bottom:10px;z-index:3;transform:translateX(-50%);
  display:inline-flex;align-items:center;gap:8px;line-height:1;white-space:nowrap;
  padding:9px 16px 9px 13px;background:rgba(5,10,20,.86);color:var(--gold-soft);
  border:1px solid rgba(198,161,91,.55);border-radius:999px;
  font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.02em;
  box-shadow:0 10px 24px -10px rgba(0,0,0,.8);transition:background .15s,color .15s}
.leaf .live-open.is-quiet{opacity:0;transform:translate(-50%,6px);
  transition:opacity .18s ease,transform .18s ease,background .15s,color .15s}
.leaf:hover .live-open.is-quiet,.leaf .live-open.is-quiet:focus-visible{opacity:1;transform:translateX(-50%)}
@media (hover:none){.leaf .live-open.is-quiet{opacity:1;transform:translateX(-50%)}}
.leaf .live-open svg{width:14px;height:14px;fill:currentColor;flex:none}
.leaf .live-open:hover,.leaf .live-open:focus-visible{background:var(--gold);color:var(--ink);border-color:var(--gold)}
.leaf:has(.live-frame)::after{display:none}

.live-overlay{position:fixed;inset:0;z-index:70;background:rgba(4,8,20,.96);display:flex;flex-direction:column}
.live-scroll{flex:1 1 auto;min-height:0;overflow:auto;display:flex;justify-content:center;
  align-items:center;padding:28px;outline:0;-webkit-overflow-scrolling:touch;
  scroll-behavior:auto;overscroll-behavior:contain}
/* a sheet wider than the screen must not be squeezed by the flex centring */
.live-scroll > .live-sheet{margin:auto}
@media (max-width:700px){.live-scroll{padding:14px}}
.live-overlay.is-width .live-scroll{align-items:flex-start}
.live-sheet{position:relative;flex:none;overflow:hidden;background:var(--ink);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.95),0 0 0 1px rgba(62,123,255,.25)}
.live-sheet iframe{position:absolute;left:0;top:0;border:0;transform-origin:0 0;display:block}
.live-bar{flex:none;display:flex;align-items:center;gap:16px;padding:12px 20px;background:linear-gradient(180deg,#0C1730,var(--forest));border-bottom:1px solid rgba(62,123,255,.3)}
.live-bar-title{font-family:var(--ser);font-size:19px;font-weight:700;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.live-bar-note{font-family:var(--mono);font-size:11.5px;color:var(--gold-soft);white-space:nowrap}
.live-fit{margin-left:auto;display:flex;border:1px solid rgba(62,123,255,.4);border-radius:2px;overflow:hidden}
.live-fit button{padding:8px 14px;font-size:13px;color:var(--mist)}
.live-fit button[aria-pressed="true"]{background:rgba(198,161,91,.16);color:var(--gold-soft)}
.live-fit + .live-close{margin-left:0}
@media (max-width:700px){.live-bar-note{display:none}.live-fit button{padding:8px 10px}}
.live-close{margin-left:auto;padding:8px 16px;border:1px solid rgba(62,123,255,.4);font-size:13px;color:var(--gold-soft);border-radius:2px}
.live-close:hover{background:var(--gold);color:var(--ink);border-color:var(--gold)}
.thumb-live .thumb-frame{position:relative;background:var(--ink)}
.thumb-live .thumb-frame::after{
  content:"Live";position:absolute;left:6px;top:6px;
  font-family:var(--mono);font-size:9px;letter-spacing:.12em;
  padding:2px 5px;background:var(--gold);color:var(--ink);
}


/* subscribe ------------------------------------------------------------------ */
.sub-intro{margin:0 0 22px;font-size:14.5px;line-height:1.6;color:rgba(233,239,250,.78)}
.sub-form{display:flex;flex-direction:column;gap:14px}
/* display:flex beats the hidden attribute, so the form stayed on the screen
   under its own confirmation. The same applied to the subscribe form. */
.sub-form[hidden],.sub-done[hidden]{display:none}
.sub-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.sub-field{display:flex;flex-direction:column;gap:6px;min-width:0}
.sub-field span{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold-soft)}
.sub-field input{
  width:100%;padding:12px 14px;background:#040814;color:var(--cream);
  border:1px solid rgba(62,123,255,.32);font-family:var(--sans);font-size:15px;border-radius:2px;
}
.sub-field input:focus{outline:none;border-color:var(--glow-2);box-shadow:0 0 0 3px rgba(63,210,232,.15)}
.sub-field input:user-invalid{border-color:#C1704F}
.sub-hp{position:absolute;left:-9999px}
.sub-submit{
  margin-top:6px;padding:14px 18px;background:var(--gold);color:var(--ink);
  font-size:14.5px;font-weight:600;border-radius:2px;
}
.sub-submit:hover{background:var(--gold-soft)}
.sub-submit[disabled]{opacity:.5;pointer-events:none}
.sub-note{margin:2px 0 0;font-size:12.5px;line-height:1.55;color:var(--mist)}
.sub-error{margin:0;font-size:13px;color:#E28C6C}
.sub-done{padding:26px 0 10px}
.sub-done-h{margin:0 0 8px;font-family:var(--ser);font-size:28px;font-weight:700;color:var(--gold-bright)}

/* a frame page fades in rather than flashing white */
.leaf.is-loading{background:var(--forest)}
.leaf.is-loading .live-frame{opacity:0}
.leaf .live-frame{opacity:1;transition:opacity .22s ease}
.leaf.is-loading::before{
  content:"";position:absolute;inset:0;z-index:2;
  background:linear-gradient(100deg,transparent 20%,rgba(198,161,91,.10) 50%,transparent 80%);
  background-size:220% 100%;animation:leafShimmer 1.1s linear infinite;
}
@keyframes leafShimmer{from{background-position:120% 0}to{background-position:-120% 0}}
@media (prefers-reduced-motion:reduce){.leaf.is-loading::before{animation:none}}

/* panning a zoomed page must not be swallowed by the iframe */
body[data-zoom="on"] .live-frame{pointer-events:none}

/* shortcuts ------------------------------------------------------------------ */
.keys{display:grid;grid-template-columns:auto 1fr;gap:12px 22px;margin:0 0 22px;align-items:center}
.keys dt{display:flex;gap:6px}
.keys dd{margin:0;font-size:14.5px;color:rgba(233,239,250,.8)}
kbd{
  font-family:var(--mono);font-size:12px;padding:5px 9px;color:var(--gold-soft);
  border:1px solid rgba(62,123,255,.36);border-bottom-width:2px;border-radius:3px;
  background:#040814;min-width:30px;text-align:center;display:inline-block;
}


/* tick preview --------------------------------------------------------------- */
.tick-preview{
  position:absolute;top:8px;z-index:20;pointer-events:none;
  display:flex;flex-direction:column;gap:7px;width:132px;
  transform:translateX(-50%);
}
.tick-preview[hidden]{display:none}
.tick-preview__frame{
  display:block;aspect-ratio:1240/1754;background:var(--forest);overflow:hidden;
  border:1px solid rgba(198,161,91,.55);box-shadow:0 16px 34px rgba(0,0,0,.6);
}
.tick-preview__frame img{width:100%;height:100%;object-fit:cover;display:block}
.tick-preview__cap{
  font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gold-soft);text-align:center;text-shadow:0 1px 6px rgba(0,0,0,.8);
}

/* progress ------------------------------------------------------------------- */
.progress{position:absolute;left:0;right:0;top:0;height:2px;background:rgba(123,140,171,.2)}
.progress span{display:block;height:100%;width:0;background:var(--gold);
  box-shadow:0 0 10px rgba(198,161,91,.6);transition:width .25s ease}

/* resume --------------------------------------------------------------------- */
.resume{
  position:fixed;left:50%;bottom:78px;transform:translateX(-50%);z-index:55;
  display:flex;align-items:center;gap:16px;padding:12px 14px 12px 20px;
  background:linear-gradient(180deg,#0C1730,#070E1E);
  border:1px solid rgba(198,161,91,.45);border-radius:2px;
  box-shadow:0 18px 40px rgba(0,0,0,.55);
}
.resume[hidden]{display:none}
.resume__t{font-size:13.5px;color:var(--cream)}
.resume__t b{font-family:var(--mono);color:var(--gold)}
.resume__go{padding:8px 14px;background:var(--gold);color:var(--ink);font-size:12.5px;
  font-weight:600;border-radius:2px}
.resume__x{font-size:20px;line-height:1;color:var(--mist);padding:0 4px}
.resume__x:hover{color:var(--gold)}
@media (max-width:700px){.resume{bottom:70px;left:12px;right:12px;transform:none}}

/* reading gate ---------------------------------------------------------------- */
.gate{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:32px;
  background:rgba(3,7,16,.94)}
.gate[hidden]{display:none}
.gate-card{display:grid;grid-template-columns:320px 1fr;width:min(880px,100%);
  max-height:92vh;overflow:auto;
  background:linear-gradient(168deg,#0D1930,#070E1E);
  border:1px solid rgba(62,123,255,.30);
  box-shadow:0 60px 120px -40px rgba(0,0,0,.95)}
/* show the cover whole: cropping it cuts the masthead off, which is the one
   thing the gate is trading on */
.gate-cover{background:linear-gradient(160deg,#0A1428,#05090F);display:grid;
  place-items:center;padding:26px}
.gate-cover img{max-width:100%;max-height:100%;width:auto;height:auto;display:block;
  box-shadow:0 22px 50px -18px rgba(0,0,0,.9);border:1px solid rgba(62,123,255,.22)}
.gate-body{padding:36px 40px 34px}
.gate-eb{margin:0 0 12px;font-family:var(--mono);font-size:10px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--gold)}
.gate-h{margin:0;font-family:var(--ser);font-size:36px;line-height:1.06;font-weight:700;
  color:var(--cream)}
.gate-p{margin:14px 0 22px;font-size:14.5px;line-height:1.65;color:rgba(233,239,250,.76)}
.gate-later{display:block;margin:14px auto 0;padding:6px 4px;font-size:12.5px;
  color:var(--mist);background:none;border:0;border-bottom:1px solid rgba(123,140,171,.4);
  cursor:pointer}
.gate-later:hover{color:var(--gold-soft);border-bottom-color:var(--gold)}
.gate-done{padding:30px 0 8px;text-align:center}
@media (max-width:760px){
  .gate-card{grid-template-columns:1fr}
  .gate-cover{height:180px}
  .gate-body{padding:26px 24px}
}

/* pre-launch -------------------------------------------------------------------
   Before launch time the reader is the launch page: the live cover, the clock
   and the list. The magazine chrome stays out of sight until it has an issue. */
.launch[hidden]{display:none}
body.is-prelaunch{overflow:auto;height:auto;min-height:100%}
body.is-prelaunch .ticks,body.is-prelaunch .stage,body.is-prelaunch .share-strip,
body.is-prelaunch .masthead-actions,body.is-prelaunch .resume{display:none!important}
.launch{position:relative;min-height:calc(100vh - 64px);display:flex;align-items:center;
  padding:clamp(28px,5vh,64px) clamp(20px,5vw,72px);
  background:
    radial-gradient(60% 50% at 30% 40%,rgba(62,123,255,.14),transparent 70%),
    radial-gradient(40% 40% at 80% 90%,rgba(198,161,91,.08),transparent 70%)}
.launch-inner{width:100%;max-width:1180px;margin:0 auto;display:grid;
  grid-template-columns:minmax(260px,420px) 1fr;gap:clamp(32px,5vw,76px);align-items:center}
.launch-cover{position:relative;width:100%}
.launch-sheet{position:relative;overflow:hidden;background:var(--paper);
  box-shadow:0 50px 90px -30px rgba(0,0,0,.9),0 0 0 1px rgba(62,123,255,.25),
    0 0 80px -10px rgba(62,123,255,.25)}
.launch-sheet iframe{position:absolute;left:0;top:0;border:0;transform-origin:0 0;
  pointer-events:none;display:block}
.launch-h{margin:0;font-family:var(--ser);font-weight:700;font-size:clamp(40px,5.2vw,68px);
  line-height:1;letter-spacing:-.02em;color:var(--cream)}
.launch-lede{margin:18px 0 0;max-width:46ch;text-wrap:pretty;font-size:17px;line-height:1.6;color:rgba(233,239,250,.8)}
.launch-clock{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:30px 0 0;
  max-width:520px}
.launch-clock div{padding:16px 10px 12px;text-align:center;
  background:linear-gradient(180deg,rgba(24,42,82,.55),rgba(10,19,38,.7));
  border:1px solid rgba(62,123,255,.28)}
.launch-clock b{display:block;font-family:var(--ser);font-weight:700;font-size:clamp(34px,4vw,52px);
  line-height:1;color:var(--gold);font-variant-numeric:tabular-nums}
.launch-clock span{display:block;margin-top:8px;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--mist)}
.launch-when{margin:14px 0 0;font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--gold-soft)}
.launch-lines{list-style:none;margin:30px 0 0;padding:0;max-width:540px;
  border-top:1px solid rgba(62,123,255,.22)}
.launch-lines li{padding:11px 0 11px 22px;position:relative;font-size:15px;line-height:1.5;
  color:rgba(233,239,250,.86);border-bottom:1px solid rgba(62,123,255,.14)}
.launch-lines li::before{content:"";position:absolute;left:2px;top:19px;width:8px;height:8px;
  background:var(--gold)}
.launch-lines li b{font-weight:600;color:var(--cream)}
.launch-form{margin-top:28px;max-width:540px}
.launch-done{margin-top:28px;max-width:540px;padding:22px 24px;border:1px solid rgba(198,161,91,.4);
  background:rgba(198,161,91,.06)}
.launch-done[hidden],.launch-form[hidden]{display:none}
.launch-done-h{margin:0;font-family:var(--ser);font-weight:700;font-size:26px;color:var(--cream)}
.launch-done-p{margin:8px 0 16px;font-size:15px;line-height:1.55;color:rgba(233,239,250,.8)}
.launch-follow{display:inline-block;margin-top:20px;font-size:13px;color:var(--mist);
  text-decoration:none;border-bottom:1px solid rgba(123,140,171,.4)}
.launch-follow:hover{color:var(--gold-soft);border-bottom-color:var(--gold)}
@media (max-width:860px){
  .launch{align-items:flex-start}
  .launch-inner{grid-template-columns:1fr}
  .launch-cover{width:100%;max-width:300px;margin:0 auto}
  .launch-body{order:-1}
  .launch-h{text-align:left}
}
@media (max-width:520px){
  .launch-clock{gap:8px}
  .launch-clock div{padding:12px 4px 10px}
  .sub-row{grid-template-columns:1fr}
}

/* the enquiry panel borrows the subscribe form's furniture */
.sub-field textarea{width:100%;padding:12px 14px;background:#040814;color:var(--cream);
  border:1px solid rgba(62,123,255,.32);font-family:var(--sans);font-size:15px;
  border-radius:2px;resize:vertical;min-height:76px}
.sub-field textarea:focus{outline:0;border-color:var(--gold)}
.sub-field span i{font-style:normal;text-transform:none;letter-spacing:.04em;
  color:var(--mist);margin-left:6px}

/* Article mode: the page's own copy in one column, for a phone --------------
   The spreads are the magazine; this is the way in when the screen is 390px
   wide and a spread would have to be panned. */
.article-panel{box-sizing:border-box;max-width:720px;width:min(94vw,720px);max-height:88vh;
  display:flex;flex-direction:column;margin:auto;padding:26px 28px 22px}
.article-panel *{max-width:100%;overflow-wrap:anywhere}
.article-body{width:100%;box-sizing:border-box}
.article-meta{margin:6px 0 0;font-family:var(--mono);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--mist)}
.article-body{overflow:auto;padding:22px 2px 6px;-webkit-overflow-scrolling:touch}
.article-body h2{margin:0 0 4px;font-family:var(--ser);font-size:30px;line-height:1.14;
  color:var(--cream)}
.article-body h3{margin:26px 0 0;font-family:var(--ser);font-size:21px;line-height:1.2;
  color:var(--gold)}
.article-body p{margin:14px 0 0;font-size:18px;line-height:1.66;color:rgba(244,239,230,.9)}
.article-body li{margin:10px 0 0 18px;font-size:18px;line-height:1.6;
  color:rgba(244,239,230,.9)}
.article-body blockquote{margin:18px 0 0;padding-left:16px;border-left:2px solid var(--gold);
  font-family:var(--ser);font-size:21px;line-height:1.4;color:var(--cream)}
.share-btn--read{display:none}
@media (max-width:820px){
  .share-btn--read{display:inline-flex}
  /* on a phone the article is the screen, not a panel floating on it. The
     overlay is a grid, so the panel has to be told to fill both tracks. */
  /* display must not override the hidden attribute, or the closed overlay
     still covers the page and swallows every tap */
  #articleOverlay:not([hidden]){padding:0;display:block;overflow:hidden}
  #articleOverlay:not([hidden]) .article-panel{position:fixed;left:0;right:0;top:0;bottom:0;
    width:100vw;max-width:100vw;height:100%;max-height:none;border:0;border-radius:0;
    padding:16px 18px 8px;margin:0;overflow:hidden;
    background:linear-gradient(180deg,#0C1730,#070E1E)}
  .article-body{padding:16px 0 28px}
  .article-body h2{font-size:26px}
  .article-body p,.article-body li{font-size:17px;line-height:1.62}
}

/* Quieter ground, quieter furniture -----------------------------------------
   The grid behind the spread was competing with the pages, and the zoom, full
   screen and reading controls were three overlapping invitations to do the
   same thing. The rail keeps them; the page keeps the attention. */
.stage-grid,.bg-grid,.stage::before{opacity:.28!important}
.rail-btn,.tool-btn{opacity:.55;transition:opacity .15s ease}
.rail-btn:hover,.tool-btn:hover,.rail-btn:focus-visible,.tool-btn:focus-visible{opacity:1}
.fullsize-cta{backdrop-filter:blur(2px)}

/* single-field sign-up: the email takes the row rather than a half column */
.sub-row--one{grid-template-columns:1fr !important}
.sub-row--one .sub-field input{width:100%}

/* a way out: the reader is a room inside the site, not a separate building */
.mast-back{display:inline-flex;align-items:center;gap:9px;flex:none;
  padding:7px 12px 7px 9px;border:1px solid rgba(245,240,230,.2);border-radius:2px;
  text-decoration:none;color:rgba(233,239,250,.78);
  font-family:var(--mono,"JetBrains Mono",monospace);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  transition:color .22s,border-color .22s,background .22s}
.mast-back:hover{color:var(--cream);border-color:rgba(200,169,110,.55);background:rgba(200,169,110,.08)}
.mast-back svg{width:14px;height:14px;flex:none}
@media (max-width:900px){.mast-back span{display:none}.mast-back{padding:7px 9px}}

/* A page turn keeps the spread you are reading until the next one has painted,
   so the reader never shows an empty page. The incoming spread is staged
   behind it and revealed with a short fade. */
.spread-stage{position:absolute;left:-30000px;top:0;display:flex;gap:2px;
  align-items:stretch;pointer-events:none;opacity:0}
.spread.is-fresh > .leaf{animation:leafIn .24s ease both}
@keyframes leafIn{from{opacity:.45}to{opacity:1}}



/* A way out that reads as a way out: the text link stays, and a reader looking
   for a corner cross finds one there. */
.gate-card{position:relative}
.gate-x{position:absolute;top:10px;right:12px;z-index:4;width:38px;height:38px;
  display:grid;place-items:center;border:1px solid rgba(244,239,230,.26);border-radius:50%;
  background:rgba(8,24,20,.55);color:rgba(244,239,230,.82);font-size:22px;line-height:1;
  cursor:pointer;transition:.2s}
.gate-x:hover{color:#F4EFE6;border-color:rgba(244,239,230,.55);background:rgba(8,24,20,.85)}

/* Phones. The page rail drew a fixed 12px button per page, so sixty pages
   needed 840px; buttons carry a min-width and padding by default, which
   stopped flex from shrinking them. And the masthead needed ~417px on a
   390px screen. */
.ticks{min-width:0;overflow:hidden}
.tick{min-width:0;padding:0;border:0}
@media (max-width:480px){
  .masthead{gap:8px;padding:9px 10px}
  .brand{min-width:0}
  .brand-mark{width:112px;height:auto}
  .brand-sub{font-size:9.5px;letter-spacing:.18em}
  .masthead-actions{gap:6px}
  .ghost-btn{padding:6px 9px;font-size:12px}
  .mast-back{padding:6px 7px}
}
@media (max-width:360px){
  .brand-sub{display:none}
}

/* the deadline, in the house gold, so it reads as a date to act on */
.ku{color:#E0C089}

/* The deadline on phones. The masthead label that carries it on desktop is
   hidden below 900px, and phones are where most readers arrive from LinkedIn. */
.mob-deadline{display:none}
@media (max-width:900px){
  .mob-deadline{display:block;padding:6px 12px;text-align:center;
    font-family:"JetBrains Mono",Menlo,monospace;font-size:10px;letter-spacing:.16em;
    text-transform:uppercase;color:rgba(233,239,250,.62);
    background:var(--forest);border-bottom:1px solid rgba(62,123,255,.18)}
  .mob-deadline b{font-weight:500;color:#E0C089}
}

/* 320px phones: Issue 02's wider furniture has to clip rather than push the
   page sideways (ew-320) */
@media (max-width:360px){
  html,body{max-width:100vw;overflow-x:hidden}
  .stage,.spread,.sheet{max-width:100vw}
  .ticks,.bar,.mast{min-width:0;overflow:hidden}
}

/* The cover has nothing to read at full size, and on phones the button sat over
   the cover line: no open button on page 1. */
.live-open[data-open-live="1"]{display:none!important}