/* Dionysian Dreams · v2 (19 Oct 2026), loaded after site.css on the pages it changes.
   The colour layer. By day the pages stay ink on paper; colour marks the ways in: a small figure, cut from a museum painting,
   stands on the hairline of each story row and of each door on home. Under the lamp, the big picture on the stage is one of
   those figures in colour, the same figure that leads to the page. Red stays the hand's only. Credits: assets/cutouts/index.json */

/* menu: the plain word beside our own name, a step lighter */
.info nav .plain{font-size:.86em}
.info h2 a.turn{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}

/* the stage: the free room above the essay holds the lamp's colour figure, so it can never sit on the words */
.stage.has-cut{grid-template-rows:minmax(0,1fr) auto auto}
.stage.has-cut>.essay{grid-row:2}
.stage.has-cut>.title{grid-row:3}
.stage-cut{grid-column:2 / -1;grid-row:1 / span 2;min-height:0;margin:0 calc(-1 * var(--pad)) clamp(10px,3cqh,32px) 0;pointer-events:none;
  display:grid;grid-template-rows:minmax(0,1fr) auto;justify-items:end}
.stage-cut img{display:block;width:100%;height:100%;min-height:0;object-fit:contain;object-position:right bottom}
.stage-cut figcaption{color:var(--soft);font-size:12px;line-height:1.3;margin:.6em var(--pad) 0 0;max-width:30ch;text-align:right}
/* pages whose stage also holds hidden lines (About, The Coven, The letter): they keep the first two columns */
.stage.has-cut .field{grid-template-columns:repeat(3,minmax(0,1fr))}
.stage.has-cut .field>*{grid-column:auto}
@media (max-width:700px){
  .stage-cut{grid-column:1 / -1;grid-row:1;justify-items:end;margin-right:-16px}
  .stage-cut img{width:62%;justify-self:end}
  .stage-cut figcaption{display:none}
  /* phones: the hidden lines take the left of the free room, the figure the right */
  .stage.has-cut .field{grid-template-columns:minmax(0,1fr);right:auto;width:38%}
  .stage.has-cut .field>:nth-child(n+2){display:none}
  .stage.has-cut .field>*{max-width:none}
}

/* rows that lead somewhere carry their figure, standing on the row's hairline */
.row.has-fig{grid-template-columns:minmax(0,1fr) auto auto;align-items:end}
.row .fig{grid-column:3;grid-row:1 / span 2;align-self:end;display:block;height:clamp(64px,6.4vw,96px);width:auto;
  margin:-8px 0 calc(-1 * clamp(12px,1.6vw,20px)) 0;pointer-events:none}
.row.has-fig .t,.row.has-fig .when{align-self:end}
.row.has-fig .when{padding-bottom:.15em}
@media (max-width:700px){
  .row.has-fig{grid-template-columns:minmax(0,1fr) auto;column-gap:14px}
  .row.has-fig .t{grid-column:1;grid-row:1}
  .row.has-fig .when{grid-column:1;grid-row:2;white-space:normal}
  .row .fig{grid-column:2;grid-row:1 / span 2;height:76px;margin-bottom:-14px}
  .list-first .row .fig{margin-bottom:-16px}
}

/* Stories, Essays: the ink prints beside "soon" rows stay inside their own row, so two never meet */
.row:has(.plate){position:relative}
.row .secret .plate{top:clamp(10px,1.4vw,18px);bottom:clamp(10px,1.4vw,18px);height:auto;align-items:flex-end}
.row .secret .plate .dk{height:100%;max-height:clamp(130px,14.5vw,230px)}

/* Words: the draw, in the open */
.drawbox{margin-top:clamp(18px,3vh,32px);display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:16px;align-items:center;max-width:34ch}
.drawbox .minicard{width:58px;aspect-ratio:2/3;background:#0e0e0d;color:#eeebe4;position:relative;overflow:hidden;container-type:inline-size;border:0;padding:0;cursor:pointer;display:block}
.drawbox .minicard span{position:absolute;left:4cqw;top:52cqw;font:400 140cqw/1 'Manufacturing Consent',serif}
.drawbox .act{font-size:clamp(18px,1.6vw,22px);padding:2px 0}
.drawbox .how{display:block;color:var(--soft);margin-top:.35em}
.wotw{margin-top:clamp(16px,2.6vh,28px);max-width:34ch}
.wotw .soft{display:block}
.index .lede+.drawbox{margin-top:clamp(18px,3vh,32px)}
@media (max-width:700px){.drawbox{max-width:none}}

/* Stories on a phone: the list is the page, so the stage keeps only its title (as before) */
@media (max-width:700px){.list-first .stage-cut{display:none}}

/* very short phones (iPhone SE): the stage has room for one hidden line, not two, before it reaches the essay */
@media (max-width:700px) and (max-height:600px){.field p>span+span{display:none}}

/* a hidden button stays hidden: .act sets display, which beat the hidden attribute ("Back to this season’s word" showed on load) */
#ask [hidden],.askdlg [hidden]{display:none!important}