/* Dionysian Dreams · the pages
   One system: three-column header grid, essay bottom-left, title huge at the bottom.
   Two states, like the equinox: day = paper, night = after sunset in Berlin (set by sky.js). */
:root{--paper:#e9e6df;--ink:#151514;--soft:#65625b;--red:#b3261e;--rule:rgba(21,21,20,.16);
  --pad:clamp(16px,2.6vw,36px);--gap:clamp(16px,3vw,48px);--small:clamp(13px,1.15vw,16px);
  box-sizing:border-box}
:root[data-state="night"]{--paper:#0e0e0d;--ink:#eeebe4;--soft:#8a877f;--rule:rgba(238,235,228,.18)}
*,*::before,*::after{box-sizing:inherit}
html{background:var(--paper);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);overflow-x:clip;
  font-family:'Schibsted Grotesk','Helvetica Neue',Arial,sans-serif;font-size:var(--small);line-height:1.32;
  padding:env(safe-area-inset-top,0) env(safe-area-inset-right,0) env(safe-area-inset-bottom,0) env(safe-area-inset-left,0);
  -webkit-tap-highlight-color:transparent;transition:background-color 1s,color 1s}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0;padding:0}
ul,ol{list-style:none}
.soft{color:var(--soft)}
.greek{font-family:'GFS Didot',Didot,serif;font-size:1.08em}
a{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--red)}
a:focus-visible,button:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:1px}
.skip{position:absolute;left:var(--pad);top:-60px;background:var(--ink);color:var(--paper);padding:8px 12px;z-index:9;text-decoration:none}
.skip:focus{top:8px}

/* first sheet: header + stage fill exactly one screen */
.fold{height:100vh;height:100svh;min-height:540px;display:grid;grid-template-columns:minmax(0,1fr);
  grid-template-rows:auto minmax(0,1fr);padding:var(--pad);padding-bottom:0}
.info{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap)}
.info h2{font-size:inherit;font-weight:500;margin-bottom:.9em}
.info h2 a{text-decoration:none}
/* menu: a tight list, same rhythm as the text lists beside it (same on home, rooms and The Descent) */
.info nav a{text-decoration:none}
.info nav a{color:var(--soft)}
.info nav a:hover{color:var(--red)}
.info nav a[aria-current="page"]{color:var(--ink);font-weight:500}
.info nav .gap{margin-top:.9em}
.info .links{margin-top:.9em}
/* actions: links and buttons look and measure the same everywhere */
.info .links a,.act{display:inline-block;padding:5px 0;color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.info .links a[aria-current="page"]{text-decoration:none;color:var(--soft)}
button.act{background:none;border:0;font:inherit;letter-spacing:inherit;cursor:pointer}
.locked{color:var(--soft)!important;text-decoration:none!important;cursor:default}

.stage{position:relative;container-type:size;min-height:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--gap);
  align-content:end;padding-top:clamp(10px,2.2vh,28px)}
.essay{grid-column:1 / span 2;font-weight:400;letter-spacing:-.02em;line-height:1.16;max-width:26ch;
  font-size:clamp(20px,min(2.6vw,6cqh),38px);margin-bottom:clamp(14px,6cqh,64px)}
.essay em{font-style:italic}
.essay sup,.row sup{font-size:.5em;vertical-align:.75em;line-height:0;letter-spacing:0}
.title{grid-column:1 / -1;font-weight:500;letter-spacing:-.055em;line-height:.8;white-space:nowrap;
  font-size:min(20vw,34cqh);padding-bottom:.2em;margin-left:var(--bearing,-.077em)}

/* below the fold: what the room holds */
.index{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap);
  padding:clamp(40px,9vh,110px) var(--pad) clamp(40px,8vh,96px);border-top:1px solid var(--rule)}
.index h2{font-size:inherit;font-weight:500}
.index .lede{color:var(--soft);margin-top:.9em;max-width:34ch}
.rows{grid-column:2 / -1}
.row{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:var(--gap);align-items:baseline;
  padding:clamp(12px,1.6vw,20px) 0;border-bottom:1px solid var(--rule)}
.row:first-child{padding-top:0}
.row .t{font-size:clamp(20px,2.3vw,34px);letter-spacing:-.02em;line-height:1.1}
.row .t a{text-decoration-thickness:1px;text-underline-offset:.14em}
.row .when{color:var(--soft);white-space:nowrap}
.row .note{grid-column:1 / -1;color:var(--soft);margin-top:.35em;max-width:56ch}

/* glossary: the headword hangs at the left, the entry sits beside it */
.entry{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:var(--gap);padding:clamp(20px,2.4vw,32px) 0;border-bottom:1px solid var(--rule);scroll-margin-top:24px}
.entry:first-child{padding-top:0}
.entry:focus{outline:none}
.entry .g{font-family:'GFS Didot',Didot,serif;font-size:clamp(26px,3vw,44px);line-height:1.05;display:block}
.entry .tr{color:var(--soft);display:block;margin-top:.3em}
.entry p{font-size:clamp(17px,1.55vw,22px);letter-spacing:-.01em;line-height:1.3;max-width:40ch}
.entry .src{color:var(--soft);font-size:var(--small);letter-spacing:0;margin-top:.8em;max-width:none}
.entry .flags{grid-column:1 / -1;display:flex;flex-wrap:wrap;align-items:baseline;gap:.3em .8em;margin-bottom:.7em;font-size:var(--small);letter-spacing:0}
.entry .flag{color:var(--soft)}
.entry .flag.pick{background:var(--ink);color:var(--paper);padding:0 .4em}
.entry .flags .act{padding:0;font-size:inherit}
/* the word of the season is the one exception: full width, big, and marked by the hand with a red crayon line drawn in once */
.entry.season{grid-template-columns:minmax(0,1fr);row-gap:clamp(16px,2vw,28px);padding-bottom:clamp(32px,5vw,72px)}
.entry.season .flags{margin-bottom:0}
.entry.season .flag:first-child:not(.pick){color:var(--ink);font-weight:500}
.entry.season .g{font-size:clamp(52px,8.5vw,132px);line-height:1;display:inline-block;position:relative}
.entry.season .tr{font-size:clamp(17px,1.55vw,22px);margin-top:1em}
.entry.season p{font-size:clamp(20px,2vw,28px);max-width:36ch}
.entry.season .src{font-size:var(--small);max-width:none}
/* the hand's mark: a real crayon stroke on a canvas, the same broken wax as the torch pages */
.crayon{position:absolute;left:0;bottom:-.24em;pointer-events:none;transition:opacity .35s}
.crayon.out{opacity:0}
.entry.season .g{transition:opacity .5s,transform .5s cubic-bezier(.22,1,.36,1)}
.entry.season.landing .g{opacity:0;transform:translateY(8px)}
@media (prefers-reduced-motion:reduce){.crayon,.entry.season .g{transition:none}}
/* the controls stay in view while the list is read */
#words>div:first-child{position:sticky;top:var(--pad);align-self:start}
/* the end of the page: the wordmark alone, cut open by the bottom edge like the D mark */
.end{border-top:1px solid var(--rule);padding:clamp(36px,7vh,80px) var(--pad) 0;overflow:hidden}
.endrow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap);align-items:start}
.sky{grid-column:1 / span 2;columns:2;column-gap:var(--gap)}
.sky li{break-inside:avoid;margin-bottom:.35em}
.endrow .ends{grid-column:3}
.ends{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:0 var(--gap)}
.end-word{font-weight:500;letter-spacing:-.055em;line-height:.8;white-space:nowrap;font-size:min(20vw,220px);
  margin:.3em 0 0 -.077em;transform:translateY(.19em)}
/* the lamp: press and hold on any room and night falls; the .lit lines are found inside the light (assets/lamp.js).
   They are real text, only unlit: --lamp is 0 by day and rises to 1 as night falls. */
.lit{opacity:var(--lamp,0);color:var(--ink)}
.lit .src{display:block;font-size:.78em;margin-top:.3em;opacity:.75}
.lit .g{font-family:'GFS Didot',Didot,serif;font-size:1.3em;display:block;margin-bottom:.1em}
.info .c3 .lit{margin-top:.9em}
[data-sky="turn"]{font-variant-numeric:tabular-nums}
.index .lit{margin-top:1.4em;max-width:30ch}
.row .secret{grid-column:1 / -1;margin-top:.7em;max-width:52ch;font-size:var(--small)}
.row .secret>span{display:block}
.row .secret>span+span{margin-top:.5em}
.lit .ask{color:var(--soft)}
.field p>span{display:block}
.field p>span+span{margin-top:.4em}
@media (max-height:760px){.field .ask{display:none}}   /* on a short screen the stage has room for the fact and the advice, not the invitation */
@media (max-height:600px){.field>:nth-child(n+2){display:none}}
.field{position:absolute;left:0;right:0;top:clamp(6px,3cqh,36px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(24px,5cqh,56px) var(--gap);font-size:clamp(15px,1.35vw,20px);line-height:1.28;pointer-events:none}
.field>*{max-width:24ch}
.ink{position:absolute;left:0;top:0;width:100%;pointer-events:none;z-index:40;mix-blend-mode:multiply}
:root[data-state="night"] .ink{mix-blend-mode:normal}
.lamp{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:50}
.lamp-on,.lamp-on *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.hint{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;background:none;border:0;padding:0;font:inherit;color:var(--soft);cursor:pointer}
.hint:focus{position:static;width:auto;height:auto;overflow:visible;clip:auto;display:block;margin-top:.9em;min-height:24px}   /* the switch shows only to the keyboard */
@media (forced-colors:active),(prefers-contrast:more){.lit{opacity:1}}
@media print{.lit,.lamp,.ink{display:none}}

/* plain reading pages (about, legal) */
.prose{grid-column:2 / -1;max-width:62ch;font-size:clamp(16px,1.3vw,19px);line-height:1.45}
.prose h2,.prose h3{font-size:inherit;font-weight:500;margin:2em 0 .5em}
.prose p+p{margin-top:.9em}
.prose .todo{background:var(--ink);color:var(--paper);padding:0 .3em}

.notes{margin:0;padding:0 var(--pad) clamp(28px,5vh,56px);color:var(--soft);font-size:clamp(13px,1vw,14px)}

html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* paper tooth, day only */
.tooth{position:fixed;inset:0;pointer-events:none;z-index:4;opacity:.35;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5  0 0 0 0 .48  0 0 0 0 .44  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
:root[data-state="night"] .tooth{display:none}

/* fingers need more room than cursors */
@media (pointer:coarse){#draw{min-height:44px;margin-right:1.1em;display:inline-flex;align-items:center}.info nav a,.info h2 a{display:inline-block;padding:6px 0}.info .links a,.act{padding:8px 0}}
@media (max-width:700px){
  .info{grid-template-columns:1fr 1fr}
  .info .c3{grid-column:1 / -1}
  /* phones: the menu runs as one wrapped row under the name, so the header takes a third of the screen, not two thirds */
  .info>div:first-child{display:contents}
  .info>div:first-child>h2{grid-column:1;grid-row:1}
  .info>div:nth-child(2){grid-column:2;grid-row:1}
  .info nav{grid-column:1 / -1;grid-row:2}
  .info nav ul{display:flex;flex-wrap:wrap;column-gap:1.1em}
  .info nav .gap{margin-top:0}
  .info .c3{grid-row:3}
  .essay{grid-column:1 / -1}
  .title{font-size:min(24vw,30cqh,calc((100vw - 2 * var(--pad)) / var(--w,1)))}   /* phones: the whole word fits (--w is its width in em, set per page); only the wordmark is cut by the edge */
  .endrow{grid-template-columns:minmax(0,1fr)}
  .sky{grid-column:1;columns:1}
  .endrow .ends{grid-column:1;justify-content:flex-start}
  .field{grid-template-columns:repeat(2,minmax(0,1fr))}
  .field>:nth-child(n+3){display:none}
  .index{grid-template-columns:minmax(0,1fr)}
  .entry{grid-template-columns:minmax(0,1fr);row-gap:.8em}
  #words>div:first-child{position:static}
  .rows,.prose{grid-column:1 / -1}
  .row{grid-template-columns:minmax(0,1fr)}
  .row .when{margin-top:.25em}
}
@media (prefers-reduced-motion:reduce){body{transition:none}}

/* phones on their side: short and wide, so the menu runs as a row and the countdown keeps the right column */
@media (max-height:500px) and (min-width:701px){
  .info>div:first-child{display:contents}
  .info>div:first-child>h2{grid-column:1;grid-row:1}
  .info>div:nth-child(2){grid-column:2;grid-row:1}
  .info nav{grid-column:1 / 3;grid-row:2}
  .info nav ul{display:flex;flex-wrap:wrap;column-gap:1.1em}
  .info nav .gap{margin-top:0}
  .info .c3{grid-column:3;grid-row:1 / 3}
}