/* The look: the book John's pictures came out of. The pictures are pen and watercolour on cream paper, as in the
   picture books of about 1900 to 1915, so the page is that same paper, the words are in brown ink, and the stage
   is a plate set into the page with a ruled border. Every colour here is taken from the pictures: the paper is
   their ground, the ink their line, the green the leprechaun's coat, the gold the ragwort. Red is kept for one
   thing, the ribbon that marks the line being read, as Tom's garter marks the boliaun.
   The site has two pictures of its own, painted like the rest: the stage curtain, and a wee branch of apple
   blossom, its mark. The branch is always set on the plate's paper, by day and by lamplight: it was cut from
   cream, and a sliver of that cream is still between some of its leaves.
   Two typefaces. The words are in Libre Caslon Text: Caslon is what those books were set in. The titles are in
   IM Fell English, cut by hand in the 1680s, whose uneven edge sits well beside a pen line. (Its italic is kept
   for the second language and for sounds lettered on the stage. Of the Fell types this one sets a hyphen and a
   capital W cleanly: French Canon runs its hyphen into the next letter.) */
@font-face{font-family:"Libre Caslon Text";font-style:normal;font-weight:400;font-display:swap;src:url("/assets/fonts/libre-caslon-text-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Libre Caslon Text";font-style:italic;font-weight:400;font-display:swap;src:url("/assets/fonts/libre-caslon-text-latin-400-italic.woff2") format("woff2")}
@font-face{font-family:"Libre Caslon Text";font-style:normal;font-weight:700;font-display:swap;src:url("/assets/fonts/libre-caslon-text-latin-700-normal.woff2") format("woff2")}
@font-face{font-family:"IM Fell English";font-style:normal;font-weight:400;font-display:swap;src:url("/assets/fonts/im-fell-english-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"IM Fell English";font-style:italic;font-weight:400;font-display:swap;src:url("/assets/fonts/im-fell-english-latin-400-italic.woff2") format("woff2")}

/* Layout: the plate at the top of the page, with the words under it (beside it, in a wide window). */
:root{
  /* the plate: the same by day and by lamplight, because the pictures are */
  --plate-paper:#FCF4DF; --plate-ink:#2A1C0D; --plate-soft:#6A5433; --plate-rule:#A8946A; --cloth:#686725; --ribbon:#D54631;
  /* the page */
  --paper:#FCF4DF; --ink:#2A1C0D; --ink-soft:#6A5433; --rule:#D9C9A0; --rule-strong:#A8946A;
  --moss:#44552A; --on-moss:#FCF4DF; --gold:#E3B93B; --gold-dim:#C9AE63;
  --read:"Libre Caslon Text","Iowan Old Style","Palatino Linotype","Book Antiqua",Georgia,serif; --bill:"IM Fell English","Libre Caslon Text","Iowan Old Style",Georgia,serif;
  --gutter:0px;
}
/* By lamplight: the same book in a dark room. The plate stays as it was painted. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){--paper:#231A10; --ink:#F3E8CC; --ink-soft:#C3B38D; --rule:#4B3B25; --rule-strong:#7A6645; --moss:#C2CF86; --on-moss:#231A10; --gold:#E3B93B; --gold-dim:#8F7A3C; color-scheme:dark}
}
:root[data-theme="dark"]{--paper:#231A10; --ink:#F3E8CC; --ink-soft:#C3B38D; --rule:#4B3B25; --rule-strong:#7A6645; --moss:#C2CF86; --on-moss:#231A10; --gold:#E3B93B; --gold-dim:#8F7A3C; color-scheme:dark}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
html,body{margin:0;min-height:100%}
html.js,html.js body{height:100%}
body{background:var(--paper);color:var(--ink);font-family:var(--read);font-size:112.5%;line-height:1.55}
button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.book:focus-visible{outline:3px solid var(--ink);outline-offset:-3px}
[hidden]{display:none !important}
.sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- the tale in plain words: what a reader without scripts gets ---------- */
#story{max-width:42rem;margin:0 auto;padding:1.5rem 1.25rem 4rem;min-height:100vh}
#story h1{font-family:var(--bill);font-weight:400;font-size:clamp(2.1rem,1.5rem + 3.4vw,3.4rem);line-height:1.05;margin:.5rem 0 1.2rem;color:var(--ink)}
#story h1 span{display:block}
#story h1 span + span{font-size:.62em;font-style:italic;margin-top:.3em;color:var(--ink-soft)}
#story h2,#grownups h2{font-family:var(--bill);font-weight:400;font-size:1.65rem;line-height:1.15;margin:2.6rem 0 .7rem;color:var(--ink)}
/* a page's title in the second language: under the first, in italic */
#story h2 .sep{display:none}
#story h2 span + span[lang]{display:block;font-size:.72em;font-style:italic;color:var(--ink-soft);margin-top:.15em}
#story figure{margin:0 0 1.1rem}
/* a plate: the picture, an ink line round it, a strip of bare paper, and a second, fainter line */
#story img{display:block;width:100%;height:auto;border:1.5px solid var(--plate-ink);outline:1px solid var(--rule-strong);outline-offset:4px;margin:6px 0 10px}
#story ol{list-style:none;margin:0;padding:0}
#story li{margin:0 0 .8rem}
#story li p{margin:0;font-size:1.25rem;line-height:1.5}
#story li p + p{font-size:1rem;font-style:italic;color:var(--ink-soft)}
#story .home{color:var(--ink);font-family:var(--bill);font-size:1.15rem;text-decoration-thickness:1px;text-underline-offset:.2em}
/* The shelf. First the site's bookplate: its mark, the wee branch, over its two names, on the plate's paper.
   Then its tales, set out as a book lists its contents. */
.bookplate{background:var(--plate-paper);border:1.5px solid var(--plate-ink);outline:1px solid var(--rule-strong);outline-offset:4px;margin:6px 5px 2rem;padding:1.5rem 1rem 1.6rem;text-align:center}
#story .device{border:0;outline:0;margin:0 auto;width:min(22rem,78%)}
#story .bookplate h1{color:var(--plate-ink);margin:.9rem 0 0}
#story .bookplate h1 span + span{color:var(--plate-soft)}
.about{font-size:1.15rem;line-height:1.5;text-align:center;text-wrap:balance;margin:0 auto 1.8rem;max-width:30rem}
#story .tales{border-top:1px solid var(--rule)}
#story .tales li{margin:0;border-bottom:1px solid var(--rule)}
.tales a{display:block;padding:.95rem .3rem 1rem;color:var(--ink);text-decoration:none}
.tales span{display:block}
.tales .tt{font-family:var(--bill);font-size:1.6rem;line-height:1.15}
.tales .tg{font-style:italic;color:var(--ink-soft);margin-top:.2rem}
.tales a:hover .tt{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}
.notice{font-size:.95rem;font-style:italic;color:var(--ink-soft);border-left:3px solid var(--gold-dim);padding:.1rem 0 .1rem .75rem;margin:1rem 0}

#grownups{font-size:1rem;line-height:1.6;color:var(--ink)}
#grownups h3{font-style:italic;font-weight:400;font-size:1.1rem;margin:1.3rem 0 .2rem;color:var(--ink-soft)}
#grownups p{margin:.4rem 0}
#grownups ul{margin:.3rem 0;padding-left:1.2rem}
#grownups li{margin:.2rem 0}
#grownups a{color:inherit}
#grownups details{margin-top:1.2rem;border-top:1px solid var(--rule);padding-top:.8rem}
#grownups summary{cursor:pointer;font-family:var(--bill);font-size:1.15rem}
#grownups .old p{margin:.7rem 0}
/* The corner is written once in each language. The plain page shows both; the theatre shows the reader's. */
.js #grownups .sep{display:none}
.theatre[data-lang="en"] #grownups [lang="ga"],.theatre[data-lang="ga"] #grownups [lang="en"]:not(details){display:none}

/* ---------- the theatre ---------- */
.js body{overflow:hidden}
.theatre{height:100%;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr) auto;padding-inline:var(--gutter)}
/* the running head: the tale's name, and the two languages */
.bar{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.35rem max(.9rem - var(--gutter),0px) .45rem;color:var(--ink)}
.shelf{font-family:var(--bill);font-size:1.2rem;line-height:1.1;color:var(--ink);text-decoration:none;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.shelf:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}
.langs{display:flex;flex:none;gap:.15rem}
.langs button{border:0;background:none;color:var(--ink-soft);font-family:var(--bill);font-size:1.08rem;line-height:1;padding:.5rem .55rem;min-height:2.2rem;border-bottom:2px solid transparent}
.langs button[aria-pressed="true"]{color:var(--ink);border-bottom-color:var(--ink)}

.house{min-width:0}
/* The plate. Its ink line is drawn inside its own edge, so that it is whole on a phone, where the plate is as wide as the window. */
.stage{position:relative;aspect-ratio:3/2;width:100%;max-width:min(100%,calc((100vh - 17rem) * 1.5));max-width:min(100%,calc((100dvh - 17rem) * 1.5));margin:0 auto;overflow:hidden;background:var(--plate-paper);
  container-type:size;user-select:none;-webkit-user-select:none;touch-action:pan-y}
.stage::after{content:"";position:absolute;inset:0;z-index:30;pointer-events:none;border:1.5px solid var(--plate-ink)}
.stage.bare::after{content:none}      /* for tools/stills.js: a still is the picture alone, and the page that shows it rules its own line */
.stage.bare{box-shadow:none}
.scene,.saying{position:absolute;inset:0;pointer-events:none}
.saying{z-index:15}      /* over every figure, under the curtain */
.backdrop{position:absolute;left:0;top:0;height:100%;max-width:none;display:block}
.actor{position:absolute;transform:translate(-50%,-100%)}
.flip,.pose,.swinger{position:absolute;inset:0;transform-origin:50% 100%}
.drawing{position:absolute;inset:0;width:100%;height:100%;display:block}
.tied{position:absolute;display:block}
.carried{position:absolute}
/* A page played at evening: the cut-outs were painted in daylight, so the stage lights them to match its backdrop. */
.scene[data-light="evening"] .actor{filter:sepia(.34) saturate(1.3) brightness(.9)}
/* A page played at night: out of doors under the moon ("night"), or indoors by a low fire ("fireside"). The stage
   dims the cut-outs to match. No hue is turned, so that the one red thing of a tale stays red. A figure the
   staging marks "lit" stands in a light of its own (robbers at their candles, seen through a window) and is left
   as it was painted. */
.scene[data-light="night"] .actor{filter:brightness(.64) saturate(.72)}
.scene[data-light="fireside"] .actor{filter:sepia(.3) saturate(1.05) brightness(.7)}
.scene .actor.lit{filter:none}
/* a sound written on the picture, as a pen would letter it */
.saying span{position:absolute;opacity:0;white-space:nowrap;font-family:var(--bill);font-style:italic;font-size:5cqw;line-height:1;color:var(--plate-ink);
  -webkit-text-stroke:1.1cqw var(--plate-paper);paint-order:stroke fill;       /* a paper edge, so the word reads over a busy hedge */
  text-shadow:0 0 1.4cqw var(--plate-paper)}

/* The curtain. It is John's painting of a green cloth, cut in two where its halves meet: the player hangs a
   half in each leaf and says how wide each is. If the painting is not there, the leaves are plain paper, ruled
   where they meet, with faint pencil lines for folds. */
.curtain{position:absolute;top:0;bottom:0;width:50.5%;z-index:20;transition:transform .5s cubic-bezier(.6,0,.3,1);
  background:var(--plate-paper) repeating-linear-gradient(90deg,transparent 0 12.2%,rgba(42,28,13,.09) 12.2% 12.6%,transparent 12.6% 20%)}
.curtain.left{left:0;transform:translateX(-101%);border-right:.3cqw solid var(--plate-ink)}
.curtain.right{right:0;transform:translateX(101%);border-left:.3cqw solid var(--plate-ink)}
.curtain.painted{border:0;background:var(--cloth)}      /* the cloth's own green, should the painting be slow to arrive */
.curtain.painted img{position:absolute;inset:0;width:100%;height:100%;display:block}
.stage.shut .curtain{transform:none}
/* the title, lettered over the top third of the cover */
.card{position:absolute;left:5%;right:5%;top:5%;z-index:25;text-align:center;pointer-events:none}
.card .big{display:block;font-family:var(--bill);font-size:8.6cqw;line-height:1.02;color:var(--plate-ink);text-wrap:balance;
  text-shadow:0 0 .7cqw var(--plate-paper),0 0 .7cqw var(--plate-paper),0 0 1.6cqw var(--plate-paper)}
/* "The End", as a book's last page has it: a card of the plate's paper on the closed curtain, with the wee
   branch under the words for a tailpiece. (Without the branch: the words between two short rules.) */
[data-view="end"] .card{top:0;bottom:0;display:grid;place-items:center}
.bill{display:block;background:var(--plate-paper);border:.3cqw solid var(--plate-ink);padding:2.6cqw 5.5cqw 3.4cqw;
  box-shadow:inset 0 0 0 .9cqw var(--plate-paper),inset 0 0 0 1.1cqw var(--plate-rule)}
.bill .big{font-size:10cqw;text-shadow:none}
.bill .device{display:block;width:38cqw;height:auto;margin:1.4cqw auto 0}
[data-view="end"] .card > .big{font-size:11cqw;text-shadow:none;background:var(--plate-paper);padding:0 3cqw}
[data-view="end"] .card > .big::before,[data-view="end"] .card > .big::after{content:"";display:block;width:16cqw;height:.3cqw;margin:2.6cqw auto;background:var(--plate-ink)}

/* A rehearsal: plain labelled boxes stand where the pictures will go. They are not pictures. */
.standin{display:grid;place-items:center;border:.3cqw dashed color-mix(in srgb,var(--plate-ink) 60%,transparent);background:color-mix(in srgb,var(--plate-ink) 5%,transparent);border-radius:.6cqw;color:var(--plate-ink);
  font-size:2.2cqw;line-height:1.15;text-align:center}
.standin span{background:color-mix(in srgb,var(--plate-paper) 85%,transparent);border-radius:.4cqw;padding:.1cqw .7cqw}
.standin.ribbon{border:0;background:var(--ribbon);border-radius:0;clip-path:inset(24% 0 round .4cqw)}      /* a band, where the bow will be */
.backdrop.standin{border:0;border-radius:0;place-items:start;padding:1.6cqw 2.2cqw;font-size:2.3cqw;font-style:italic;color:color-mix(in srgb,var(--plate-ink) 70%,transparent);
  background:repeating-linear-gradient(115deg,var(--plate-paper) 0 5.6cqw,color-mix(in srgb,var(--plate-paper) 90%,var(--plate-ink)) 5.6cqw 5.8cqw)}

[data-view="cover"] .backdrop.standin{place-items:end start}

/* one mark for each page: a ring of ink, filled with gold once the page has been read */
.lights{display:flex;justify-content:center;gap:.7rem;list-style:none;margin:0;padding:.75rem 0 .6rem}
.lights li{width:.62rem;height:.62rem;border-radius:50%;border:1.5px solid var(--rule-strong)}
.lights .lit{background:var(--gold-dim);border-color:var(--ink-soft)}
.lights .now{background:var(--gold);border-color:var(--ink);transform:scale(1.3)}

.book{color:var(--ink);overflow-y:auto;overscroll-behavior:contain;padding:.4rem 1.2rem 1.25rem}
.book > *{max-width:35rem;margin-left:auto;margin-right:auto}
.phead{display:flex;align-items:baseline;justify-content:space-between;gap:.75rem;margin-bottom:.5rem}
.ptitle{font-family:var(--bill);font-weight:400;font-size:clamp(1.45rem,1.15rem + 1.5vw,2.05rem);line-height:1.12;margin:0;color:var(--ink)}
[data-view="cover"] .ptitle,[data-view="end"] .ptitle{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.both{flex:none;background:none;border:0;border-bottom:1px solid var(--rule-strong);padding:.35rem .1rem .2rem;font-style:italic;font-size:.9rem;line-height:1.2;color:var(--ink-soft);min-height:2.2rem}
.both[aria-pressed="true"]{border-bottom-color:var(--ink);color:var(--ink)}
.note{font-size:.92rem;font-style:italic;line-height:1.4;color:var(--ink-soft);border-left:3px solid var(--gold-dim);padding:.1rem 0 .1rem .7rem;margin-top:0;margin-bottom:.9rem}

.lines{list-style:none;padding:0;margin-top:0;margin-bottom:0}
.line{position:relative;padding:.26rem 0 .26rem 1.15rem;font-size:clamp(1.18rem,1.02rem + .6vw,1.42rem);line-height:1.48;cursor:pointer}
.line p{margin:0}
.line .also{display:none;font-size:.8em;font-style:italic;color:var(--ink-soft);margin-top:.1rem}
.bothlangs .line .also,.line.open .also{display:block}
[data-mode="listen"] .line{color:var(--ink-soft)}
[data-mode="listen"] .line.now,[data-mode="listen"] .line.done{color:var(--ink)}
.line.now::before{content:"";position:absolute;left:0;top:.5em;width:.5rem;height:1.2em;background:var(--ribbon);clip-path:polygon(0 0,100% 0,100% 100%,50% 80%,0 100%)}

/* the two ways in, on the cover: labels of paper with a ruled edge, the first of them in the green of the leprechaun's coat */
.choices{display:flex;flex-direction:column;align-items:flex-start;gap:.8rem;margin-top:.5rem}
.choice{font-family:var(--bill);font-size:1.4rem;line-height:1.15;text-align:left;padding:.75rem 1.3rem .8rem;border-radius:3px;border:1.5px solid var(--ink);background:none;color:var(--ink);min-width:min(100%,16rem);
  box-shadow:inset 0 0 0 3px var(--paper),inset 0 0 0 4px var(--rule-strong)}
.choice.primary{background:var(--moss);border-color:var(--moss);color:var(--on-moss);box-shadow:inset 0 0 0 3px var(--moss),inset 0 0 0 4px color-mix(in srgb,var(--on-moss) 55%,transparent)}
.choices #grownups{align-self:stretch;margin-top:.8rem}

.turn{display:flex;align-items:center;justify-content:center;gap:1.1rem;border-top:1px solid var(--rule);padding:.55rem .75rem calc(.55rem + env(safe-area-inset-bottom))}
.turnb{display:grid;place-items:center;width:3.3rem;height:3.3rem;border-radius:50%;border:1.5px solid var(--ink);background:none;color:var(--ink)}
.turnb svg{width:1.6rem;height:1.6rem;display:block}
.turnb.next{width:3.8rem;height:3.8rem;background:var(--moss);border-color:var(--moss);color:var(--on-moss)}
.turnb:disabled{opacity:.35;cursor:default}

/* A wide window: the plate at the left, the words beside it. */
@media (min-aspect-ratio:5/4) and (min-width:700px){
  .theatre{grid-template-columns:minmax(0,1.6fr) minmax(17rem,1fr);grid-template-rows:auto minmax(0,1fr) auto;column-gap:1.4rem}
  .bar{grid-column:1 / -1;padding-inline:max(1.2rem - var(--gutter),0px)}
  .house{grid-column:1;grid-row:2 / 4;display:flex;flex-direction:column;justify-content:center;padding-left:max(1.2rem - var(--gutter),0px);padding-bottom:.5rem}
  .stage{max-width:min(100%,calc((100vh - 6.5rem) * 1.5));max-width:min(100%,calc((100dvh - 6.5rem) * 1.5));
    box-shadow:0 0 0 5px var(--paper),0 0 0 6px var(--rule-strong)}      /* room for the plate's second, fainter line */
  .book{grid-column:2;grid-row:2;padding-top:1rem;border-left:1px solid var(--rule)}
  .turn{grid-column:2;grid-row:3;border-left:1px solid var(--rule)}
}

@media (prefers-reduced-motion:reduce){ .curtain{transition:none} }
@media print{ .theatre{display:none} #story{display:block !important} }