/* ============ THE READING ROOM — Analog Research, typed on a sheet that sits on a dark desk ============
   Fraunces for the headline, a typewriter face for the text, Space Mono for the stamps.
   The carriage at the top travels as you read; four typewriter keys set size, paper and link. */

html{scroll-padding-top:5rem}
body.reading{background:var(--void)}

.skip{position:absolute;left:1rem;top:-4rem;z-index:100;background:var(--amber);color:var(--void);
  font-family:var(--mono);font-size:.65rem;letter-spacing:.16em;text-transform:uppercase;
  padding:.7rem 1rem;border-radius:6px;text-decoration:none;transition:top .2s}
.skip:focus{top:1rem}

/* ---- the top rail (shared look with the Player page) ---- */
.pnav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;
  gap:1rem;padding:.9rem clamp(1.4rem,8vw,8rem);
  background:linear-gradient(180deg,rgba(13,12,8,.94) 0%,rgba(13,12,8,.8) 60%,rgba(13,12,8,0) 100%)}
.pnav .brand{display:inline-flex;align-items:baseline;gap:.55rem;text-decoration:none}
.pnav .brand img{height:22px;width:auto}
.pnav .brand span{font-family:var(--mono);font-size:11px;letter-spacing:.35em;font-weight:700;color:var(--amber);text-transform:uppercase}
.pnav nav{display:flex;align-items:center;gap:clamp(.9rem,2vw,1.8rem)}
.pnav nav a:not(.btn){font-family:var(--mono);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--cream-dim);text-decoration:none;transition:color .3s}
.pnav nav a:not(.btn):hover{color:var(--amber)}
.btn.sm{padding:.6rem 1rem;font-size:.6rem}
@media(max-width:760px){.pnav nav a:not(.btn){display:none}}

/* ---- the carriage: a rail across the top, the carriage moves as you read ---- */
.carriage{position:fixed;top:0;left:0;right:0;height:4px;z-index:70;background:linear-gradient(180deg,#4a463c,#22201a)}
.carriage::before{content:"";position:absolute;left:0;top:0;bottom:0;width:calc(var(--p,0) * 100%);
  background:linear-gradient(90deg,rgba(224,122,40,0),rgba(224,122,40,.75))}
.carriage::after{content:"";position:absolute;top:-3px;left:calc(var(--p,0) * (100% - 14px));width:14px;height:10px;border-radius:2px;
  background:linear-gradient(180deg,var(--metal-1),var(--metal-3));box-shadow:0 1px 3px rgba(0,0,0,.6)}
.carriage.done::after{background:var(--amber);box-shadow:0 0 10px rgba(224,122,40,.8)}

/* ---- the desk and the sheet ---- */
.desk{padding:7rem clamp(1rem,5vw,4rem) 4rem;display:flex;flex-direction:column;align-items:center}
.typesheet{position:relative;width:min(100%,760px);color:var(--ink);border-radius:2px;
  padding:clamp(2rem,6vw,4.4rem) clamp(1.4rem,7vw,5rem) clamp(2.4rem,6vw,4rem);
  background:
    radial-gradient(ellipse at 18% 0%,rgba(255,255,255,.4),transparent 55%),
    radial-gradient(ellipse at 90% 100%,rgba(120,90,40,.08),transparent 60%),
    linear-gradient(180deg,var(--paper),var(--paper-lo));
  box-shadow:0 30px 80px rgba(0,0,0,.55),inset 0 16px 18px -16px rgba(0,0,0,.22)}

.ts-meta{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;font-family:var(--mono);font-size:.56rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--amber-deep);border-bottom:1px solid var(--ledger-line);padding-bottom:.9rem}
.ts-title{font-family:var(--serif);font-weight:300;font-size:clamp(2.1rem,5.2vw,3.5rem);line-height:1.08;
  letter-spacing:-.015em;margin-top:1.8rem;color:var(--ink)}
.ts-title .tcaret{display:inline-block;width:.42em;height:.82em;margin-left:.08em;vertical-align:-.06em;background:var(--amber);
  animation:blinkc 1s steps(1) infinite}
.ts-dek{font-family:var(--serif);font-size:clamp(1.08rem,1.8vw,1.28rem);line-height:1.45;color:var(--ink-soft);margin-top:1.2rem}
.ts-by{display:flex;justify-content:space-between;gap:1rem;font-family:var(--mono);font-size:.56rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-soft);margin:2rem 0 2.4rem;padding:.8rem 0;
  border-top:1px dashed rgba(26,24,19,.22);border-bottom:1px dashed rgba(26,24,19,.22)}

/* the typed text */
.ts-body{font-family:'Courier Prime',var(--mono);font-weight:400;font-size:calc(1.04rem * var(--fs,1));line-height:1.78;color:#3b362c}
.ts-body p + p,.ts-body p + .point,.ts-body .point + .point,.ts-body .point + p{margin-top:1.15em}
.ts-body h2{display:flex;align-items:center;gap:.6rem;margin:2.6em 0 1em;font-family:var(--mono);font-weight:400;
  font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:var(--amber-deep);text-shadow:none}
.ts-body h2::before{content:"▮";color:var(--amber)}
.ts-body blockquote{margin:2em 0;padding:.15em 0 .15em 1.2em;border-left:2px solid var(--amber);
  font-family:var(--serif);font-size:calc(1.45rem * var(--fs,1));line-height:1.3;color:var(--ink);text-shadow:none}
.ts-body .point .pt{display:block;font-family:var(--serif);font-size:calc(1.12rem * var(--fs,1));line-height:1.35;color:var(--ink);
  text-shadow:none;margin-bottom:.25em}
.ts-body a{color:var(--amber-deep);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.ts-body a:hover{color:var(--ink)}

/* margin notes: pinned slips beside the sheet on wide screens, boxed in the text elsewhere */
.ts-body .note{display:block;margin:1.8em 0;padding:1rem 1.1rem;border:1px dashed rgba(26,24,19,.28);border-radius:2px;
  font-family:var(--mono);font-size:.66rem;line-height:1.7;letter-spacing:.04em;color:var(--ink-soft);text-shadow:none}
.ts-body .note b{display:block;font-weight:400;font-size:.54rem;letter-spacing:.2em;text-transform:uppercase;color:var(--amber-deep);margin-bottom:.4rem}
@media(min-width:1240px){
  .ts-body .note{float:right;clear:right;width:190px;margin:.2em -294px 1em 0;border:0;
    background:#fbf6e9;transform:rotate(1.4deg);box-shadow:0 10px 24px rgba(0,0,0,.4)}
}

.ts-end{margin-top:3rem;text-align:center;font-family:var(--mono);font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-soft)}
.ts-end .blk{color:var(--amber);animation:blinkc 1.1s steps(1) infinite}

/* ---- four typewriter keys: smaller, larger, night paper, copy link ---- */
.ts-tools{position:fixed;left:clamp(.8rem,2.4vw,2rem);bottom:clamp(.8rem,3vh,2rem);z-index:40;display:flex;flex-direction:column;gap:.6rem}
.key{width:40px;height:40px;border-radius:50%;cursor:pointer;display:grid;place-items:center;
  background:radial-gradient(circle at 50% 35%,#3a362c,#14130e 70%);border:2px solid #8d867c;color:var(--cream);
  font-family:var(--mono);font-size:.62rem;letter-spacing:.02em;
  box-shadow:0 3px 0 #0a0907,0 6px 14px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.12);transition:transform .08s,box-shadow .08s,color .2s,border-color .2s}
.key:hover{color:var(--amber)}
.key:active{transform:translateY(2px);box-shadow:0 1px 0 #0a0907,0 3px 8px rgba(0,0,0,.5)}
.key:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
.key[aria-pressed="true"],.key.ok{border-color:var(--amber);color:var(--amber)}
@media(max-width:760px){
  .ts-tools{position:static;flex-direction:row;justify-content:flex-end;width:min(100%,760px);margin:0 0 .9rem}
  .key{width:36px;height:36px}
}

/* ---- night paper ---- */
body.night .typesheet{background:linear-gradient(180deg,#1f1c16,#17150f);color:var(--cream);
  box-shadow:0 30px 80px rgba(0,0,0,.6),inset 0 0 0 1px rgba(237,231,214,.06)}
body.night .ts-title,body.night .ts-body blockquote,body.night .ts-body .point .pt{color:var(--cream)}
body.night .ts-dek,body.night .ts-by,body.night .ts-end{color:var(--cream-dim)}
body.night .ts-by{border-color:rgba(237,231,214,.16)}
body.night .ts-meta{border-color:rgba(237,231,214,.12);color:var(--amber)}
body.night .ts-body{color:#d8d0bc;text-shadow:none}
body.night .ts-body h2,body.night .ts-body a{color:var(--amber)}
body.night .ts-body a:hover{color:var(--cream)}
body.night .ts-body .note{color:var(--cream-dim);border-color:rgba(237,231,214,.2)}
@media(min-width:1240px){body.night .ts-body .note{background:#2a261e}}
body.night .ts-body .note b{color:var(--amber)}

/* ---- the contents page ---- */
.toc{list-style:none;margin-top:2.4rem;border-top:1px dashed rgba(26,24,19,.22)}
.toc-row{display:grid;grid-template-columns:3.2rem minmax(0,1fr) auto;gap:.4rem 1.2rem;align-items:baseline;
  padding:1.3rem 0;border-bottom:1px dashed rgba(26,24,19,.22);text-decoration:none;color:inherit;transition:background .25s}
.toc-row:hover{background:rgba(224,122,40,.06)}
.toc-row:focus-visible{outline:2px solid var(--amber);outline-offset:4px}
.toc-no{font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;color:var(--amber-deep)}
.toc-main{display:grid;gap:.35rem}
.toc-t{font-family:var(--serif);font-size:clamp(1.3rem,2.4vw,1.7rem);line-height:1.15;color:var(--ink);transition:color .25s}
.toc-row:hover .toc-t{color:var(--amber-deep)}
.toc-d{font-family:'Courier Prime',var(--mono);font-size:.9rem;line-height:1.6;color:#4a443a}
.toc-m{font-family:var(--mono);font-size:.54rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft);white-space:nowrap}
body.night .toc,body.night .toc-row{border-color:rgba(237,231,214,.16)}
body.night .toc-t{color:var(--cream)}
body.night .toc-d{color:var(--cream-dim)}
@media(max-width:560px){.toc-row{grid-template-columns:2.2rem minmax(0,1fr)}.toc-m{grid-column:2}}

/* ---- after the sheet: more from the desk, and the subscribe line ---- */
.more{width:min(100%,760px);margin-top:3.4rem;display:grid;gap:1.4rem}
.more-k{font-family:var(--mono);font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;color:var(--cream-faint)}
.more-discs{--d:150px;gap:1.2rem;overflow:visible;margin:0;padding:.2rem 0 .6rem}
.more-discs .disc + .disc{margin-left:0}
.more .research-capture{margin-top:.6rem;max-width:none}

.rd-foot{padding-top:2.4rem;border-top:0}
.rd-foot .fine{margin-top:0}

@media(max-width:760px){
  .desk{padding:5.4rem .7rem 3rem}
  .typesheet{padding:2rem 1.3rem 2.4rem}
  .ts-body{font-size:calc(.98rem * var(--fs,1))}
  .more{padding:0 .5rem}
  .more-discs{--d:136px}
}