/*
  the reading pages. one stylesheet for all 28 pieces in /writing.
  in the light this is a page of the printed programme: cream paper, ink,
  archivo condensed heads, courier prime text, a double rule under the head.
  in the dark it is the hall: black ground, projected white, subtitle yellow.
  nothing here is decorative. no cards, no shadows, no gradients, no icons.
*/

:root{
  --paper:#efe7d6;--ink:#16110d;--ink-2:#4b4136;--dust:#8a7f6a;--rule:#cfc4ab;--red:#c8102e;
  --black:#050403;--white:#f3ead8;--sub:#ffd84a;

  --ground:var(--paper);
  --text:var(--ink);
  --quiet:var(--ink-2);
  --hair:var(--rule);
  --heavy:var(--ink);
  --label:var(--red);
  --underline:var(--dust);
  --focus:var(--ink);

  --display:"Archivo","Rozha One","Noto Naskh Arabic","Helvetica Neue",Arial,sans-serif;
  --voice:"Courier Prime","Noto Sans Devanagari","Noto Naskh Arabic","Courier New",ui-monospace,monospace;
  --hindi:"Noto Sans Devanagari","Courier Prime",sans-serif;
  --hindi-display:"Rozha One","Noto Sans Devanagari",serif;
  --urdu:"Noto Naskh Arabic","Courier Prime",serif;

  --col:700px;
  --gutter:22px;
  --strip:44px;
  color-scheme:light dark;
}

@media (prefers-color-scheme:dark){
  :root{
    --ground:var(--black);
    --text:var(--white);
    --quiet:#a89e8a;
    --hair:#2b2620;
    --heavy:var(--white);
    --label:var(--sub);
    --underline:var(--dust);
    --focus:var(--sub);
  }
}

*,*::before,*::after{box-sizing:border-box}
html{background:var(--ground);-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--strip) + 16px)}
body{
  margin:0;min-height:100vh;overflow-x:hidden;
  background:var(--ground);color:var(--text);
  font:17px/1.7 var(--voice);
  font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
::selection{background:var(--sub);color:var(--ink)}

a{color:inherit;text-decoration:underline;text-decoration-color:var(--underline);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{text-decoration-color:currentColor}
button{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer;border-radius:0;-webkit-appearance:none;appearance:none}
:focus{outline:none}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px}

/* the top strip: the running head of the page */
#topbar{
  position:sticky;top:0;z-index:50;
  background:var(--ground);
  border-bottom:1px solid var(--hair);
  font-size:12.5px;line-height:1;letter-spacing:.04em;text-transform:lowercase;
  color:var(--quiet);
}
#topbar .strip-in{
  max-width:var(--col);margin:0 auto;height:var(--strip);
  padding:0 max(var(--gutter),env(safe-area-inset-right)) 0 max(var(--gutter),env(safe-area-inset-left));
  display:flex;align-items:center;gap:18px;
}
#topbar .path{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:.7em;white-space:nowrap}
#topbar a{flex:none;text-decoration:none;padding:8px 3px;margin:0 -3px;color:var(--text)}
#topbar a:hover{text-decoration:underline;text-decoration-color:currentColor;text-decoration-thickness:1px}
#topbar .sep{flex:none;color:var(--dust)}
#topbar .here{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:4px 0;color:var(--quiet)}
#topbar .here [lang]{font:inherit}
#share-btn{
  flex:none;min-width:9ch;text-align:right;
  padding:8px 3px;margin:0 -3px;letter-spacing:inherit;text-transform:inherit;
  color:var(--text);white-space:nowrap;
}
#share-btn:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
#topbar :focus-visible{outline-offset:0}
#share-btn.done{color:var(--label);text-decoration:none}

/* the page */
main{
  max-width:var(--col);margin:0 auto;
  padding:clamp(44px,9vh,92px) max(var(--gutter),env(safe-area-inset-right)) 96px max(var(--gutter),env(safe-area-inset-left));
}

.head{margin:0 0 clamp(34px,6vh,54px);padding:0 0 clamp(22px,3.4vh,30px);border-bottom:3px double var(--heavy)}

/* kind and year, the red label */
.subtitle{
  display:block;margin:0 0 14px;
  font:700 11px/1 var(--voice);letter-spacing:.14em;text-transform:uppercase;
  color:var(--label);
  font-variant-numeric:tabular-nums;
}
.subtitle .tag{margin-right:1.6em}

/* the title card. the size steps are fractions of the column, so a title breaks the same way on a phone and on a desk */
.head{container-type:inline-size}
h1{
  margin:0 0 0 -.03em;
  font-family:var(--display);font-stretch:62%;font-variation-settings:"wdth" 62;font-weight:900;
  text-transform:uppercase;letter-spacing:-.01em;line-height:.88;
  font-size:clamp(46px,12.8vw,95px);
  font-size:min(14.5cqw,95px);
  text-wrap:balance;
  font-synthesis:none;
}
h1.t-0{font-size:clamp(80px,23vw,170px);font-size:min(26cqw,170px);line-height:.82}
h1.t-1{font-size:clamp(68px,19.5vw,144px);font-size:min(22cqw,144px);line-height:.84}
h1.t-2{font-size:clamp(56px,16vw,118px);font-size:min(18cqw,118px);line-height:.84}
h1.t-4{font-size:clamp(42px,11.4vw,84px);font-size:min(12.8cqw,84px);line-height:.89}
h1.t-5{font-size:clamp(36px,9.8vw,72px);font-size:min(11cqw,72px);line-height:.9}
h1.t-line{font-size:clamp(36px,9.6vw,71px);font-size:min(10.9cqw,71px);line-height:1.1;white-space:nowrap}
h1 [lang]{font-family:inherit}
h1 .ph{white-space:nowrap}

/* the text. courier prime, the face screenplays are typed in */
.writing-content{font-size:17px;line-height:1.7;max-width:62ch;overflow-wrap:break-word}
.writing-content p{margin:0 0 1.35em;text-wrap:pretty;hanging-punctuation:first}
.writing-content p:last-child{margin-bottom:0}
.writing-content a:hover{text-decoration-color:currentColor}

/* poems sit a little right of the essay margin. a line is a line, a stanza break is a blank line */
.poem .writing-content{line-height:1.85;padding-left:clamp(0px,7vw,56px);max-width:none}
.poem-line{display:block;padding-left:2ch;text-indent:-2ch}
.poem-break{height:1.85em}

/* on a desk a long line of verse may run a little past the measure rather than be broken */
@media (min-width:780px){
  .poem .writing-content{margin-right:-40px}
  .poem .writing-content[dir="rtl"]{margin-right:0;margin-left:-40px}
}

/* the other two scripts */
[lang="hi"]{font-family:var(--hindi)}
[lang="ur"]{font-family:var(--urdu)}
.writing-content[lang="hi"]{font-size:19px;line-height:2.1}
.writing-content[lang="hi"] .poem-break{height:2.1em}
.writing-content[lang="ur"]{font-size:21px;line-height:2.3}
.writing-content[lang="ur"] .poem-break{height:2.3em}
.writing-content[dir="rtl"] .poem-line,.writing-content [dir="rtl"]{text-align:right}
.poem .writing-content[dir="rtl"]{padding-left:0;padding-right:clamp(0px,7vw,56px)}

/* the way out */
.end{
  display:flex;flex-wrap:nowrap;justify-content:space-between;align-items:baseline;gap:18px;
  margin:clamp(56px,10vh,88px) 0 0;padding:18px 0 0;
  border-top:3px double var(--heavy);
  font-size:14px;line-height:1.4;white-space:nowrap;
}
.end a{padding:6px 0}
footer{margin:26px 0 0;font-size:12px;line-height:1.4;letter-spacing:.04em;color:var(--quiet);overflow-wrap:anywhere}

/* only seen when the clipboard says no: the url, so it can be copied by hand */
#toast{
  position:fixed;z-index:95;left:16px;right:16px;bottom:max(28px,env(safe-area-inset-bottom));
  width:fit-content;max-width:calc(100% - 32px);margin:0 auto;
  background:var(--text);color:var(--ground);
  font-size:12.5px;line-height:1.4;letter-spacing:.02em;padding:9px 14px;
  overflow-wrap:anywhere;
  opacity:0;visibility:hidden;transition:opacity .12s linear,visibility 0s linear .12s;
  user-select:all;-webkit-user-select:all;
}
#toast.show{opacity:1;visibility:visible;transition:opacity .12s linear}

/* phones */
@media (max-width:520px){
  :root{--gutter:20px;--strip:42px}
  #topbar{font-size:12px}
  #topbar .strip-in{gap:12px}
  #topbar .path{gap:.55em}
  main{padding-top:40px;padding-bottom:72px}
  .writing-content{font-size:16px}
  .writing-content[lang="hi"]{font-size:18px}
  .poem .writing-content{padding-left:0}
  .end{font-size:13.5px}
}

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

/* paper, for real */
@media print{
  :root{
    --ground:#fff;--text:#000;--quiet:#333;--hair:#999;--heavy:#000;--label:var(--red);--underline:#999;
    color-scheme:light;
  }
  @page{margin:22mm 20mm}
  html,body{background:#fff;color:#000}
  body{font-size:11.5pt;line-height:1.6;min-height:0}
  #topbar,.end,#toast{display:none!important}
  main{max-width:none;padding:0}
  h1,h1.t-0,h1.t-1,h1.t-2,h1.t-4,h1.t-5{font-size:40pt;line-height:.9}
  h1.t-line{font-size:30pt}
  .writing-content,.writing-content[lang="hi"]{font-size:11.5pt}
  .writing-content p{orphans:3;widows:3}
  .poem .writing-content{padding-left:10mm}
  .poem-line{break-inside:avoid}
  .head{break-after:avoid}
  footer{margin-top:14mm;color:#333}
  a{text-decoration:none}
}