/* ══ A BOOK, READ ON A SCREEN ═══════════════════════════════════════
   Not an article with a serif, and not the dissertation page wearing a
   different hat. This is a novel published one dialogue at a time, and
   almost every decision below follows from one fact about it: the book
   is a RECORD. Myrto types it the day after, unimproved, and its own
   condition is that it goes out where anyone can read it. So the page
   is the record. The numerals are the book's own, the place is part of
   the argument and is set like a dateline, and the reader's position is
   kept as a section and a paragraph rather than a percentage, because
   "you stopped in VII" is where somebody actually was.

   The colour is Kourion at six o'clock: limestone, ink, and the one
   warm oxide the stone goes when the light comes in flat off the sea.
   Deliberately not the sisamos gold. This is a book, not a product of
   the studio that happens to be hosting it. */
:root{
    --paper:#f8f6f1;
    --paper-deep:#f1ede4;
    --ink:#1a1a1c;
    --ink-soft:#57544e;
    --ink-faint:#8b867d;
    --rule:rgba(26,26,28,.14);
    --rule-firm:rgba(26,26,28,.3);
    --mark:#9a4f2c;
    --serif:'EB Garamond',Georgia,'Times New Roman',serif;
    --ui:system-ui,-apple-system,'Segoe UI',sans-serif;
    --measure:33rem;
    --size:20px;
    color-scheme:light;
}
/* NIGHT. A book gets read in bed, which is the one place the paper
   ground is actively hostile. Not an inversion: the ground goes to the
   colour of the room and the ink comes down off white, because pure
   white on black is its own kind of glare. */
html[data-night="1"]{
    --paper:#15140f;
    --paper-deep:#1c1a14;
    --ink:#e4ded0;
    --ink-soft:#a49d8d;
    --ink-faint:#7b7466;
    --rule:rgba(228,222,208,.16);
    --rule-firm:rgba(228,222,208,.34);
    --mark:#d2854f;
    color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
    html{scroll-behavior:auto}
    *{animation:none!important;transition:none!important}
}
body{
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:var(--serif);
    font-size:var(--size);
    line-height:1.68;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
    transition:background .25s ease,color .25s ease;
}

/* ── HOW FAR IN ────────────────────────────────────────────────────
   Two pixels at the top of the window. Not a widget, not a percentage
   in words; the only thing it says is how much is left, which is the
   one thing a reader glances up for. */
.gauge{
    position:fixed;top:0;left:0;height:2px;width:0;
    background:var(--mark);z-index:40;
    transition:width .12s linear;
}

/* ── THE FURNITURE ─────────────────────────────────────────────────
   Two controls, because there are only two things a reader wants to
   change: how big it is and whether it is night. */
.tools{
    position:fixed;top:14px;right:14px;z-index:41;
    display:flex;gap:6px;
    font-family:var(--ui);
    transition:opacity .25s ease,transform .25s ease;
}
/* GONE WHILE READING. On a phone these sit in the bottom corner, which
   is over the text - a permanent obstruction on the one surface whose
   whole job is to be uninterrupted. Reading is scrolling down, so
   scrolling down puts them away and any scroll up brings them back,
   which is the gesture a reader already makes when they want anything
   at all. */
.tools[data-away="1"]{
    opacity:0;pointer-events:none;transform:translateY(6px);
}
.tools button{
    width:34px;height:34px;padding:0;
    display:grid;place-items:center;
    font-family:var(--ui);font-size:.82rem;font-weight:600;
    color:var(--ink-soft);
    background:var(--paper);
    background:color-mix(in srgb,var(--paper) 86%,transparent);
    border:1px solid var(--rule);border-radius:8px;
    cursor:pointer;
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
}
.tools button:hover{color:var(--ink);border-color:var(--rule-firm)}
.tools button:focus-visible{outline:2px solid var(--mark);outline-offset:2px}

/* ── THE SPINE ─────────────────────────────────────────────────────
   The book's own numerals down the left, which is a contents, a
   progress bar and a way to move, all at once and all of them true to
   the form. It only exists where there is room beside the measure; on
   anything narrower the one that matters is in the header instead. */
.spine{
    position:fixed;left:26px;top:50%;transform:translateY(-50%);
    z-index:39;display:none;flex-direction:column;gap:2px;
    font-family:var(--ui);
}
.spine a{
    display:block;padding:3px 7px;min-width:34px;
    font-size:.64rem;font-weight:600;letter-spacing:.09em;
    color:var(--ink-faint);text-decoration:none;text-align:right;
    border-right:2px solid transparent;
    transition:color .18s ease,border-color .18s ease;
}
.spine a:hover{color:var(--ink-soft)}
.spine a[aria-current="true"]{color:var(--mark);border-right-color:var(--mark)}
.spine a:focus-visible{outline:2px solid var(--mark);outline-offset:1px}
@media (min-width:1180px){ .spine{display:flex} }

/* ── THE CHAPTER'S TITLE PAGE ──────────────────────────────────────
   Five things, in the order a book uses. The PLACE is one of them and
   is set like a dateline, because in this book the place argues back:
   every dialogue is somewhere real, chosen for what it does to the
   argument, and burying that under the title would be losing it. */
.head{
    max-width:var(--measure);
    margin:0 auto;padding:clamp(56px,11vh,110px) 22px clamp(28px,5vh,48px);
    text-align:center;
}
.book{
    font-family:var(--ui);
    font-size:.64rem;font-weight:600;letter-spacing:.3em;text-transform:uppercase;
    color:var(--mark);margin:0 0 clamp(26px,6vh,52px);
}
.chapter{
    font-family:var(--ui);
    font-size:.68rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
    color:var(--ink-faint);margin:0 0 .7rem;
}
h1{
    margin:0;font-weight:500;
    font-size:clamp(2.1rem,6.5vw,3.1rem);line-height:1.12;
    letter-spacing:-.012em;
}
.dateline{
    margin:1.5rem 0 0;font-style:italic;
    font-size:1.02rem;line-height:1.5;color:var(--ink-soft);
}
.dateline span{display:block}
.asks{
    margin:1.7rem auto 0;padding-top:1.4rem;max-width:26rem;
    border-top:1px solid var(--rule);
    font-size:1.14rem;font-style:italic;color:var(--ink);
}
.facts{
    margin:1.5rem 0 0;font-family:var(--ui);
    font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
    color:var(--ink-faint);
}

/* ── THE RECORD ────────────────────────────────────────────────────*/
main{
    max-width:var(--measure);
    margin:0 auto;padding:0 22px clamp(60px,12vh,120px);
}
.dl{margin:0;padding:clamp(30px,6vh,54px) 0 0;position:relative}
/* The numeral is the section's whole heading. The book gives its parts
   no names, only numbers, and inventing titles for them would be
   editing the manuscript. */
.numeral{
    margin:0 0 1.5rem;text-align:center;
    font-family:var(--ui);font-weight:600;
    font-size:.7rem;letter-spacing:.24em;
    color:var(--ink-faint);
}
.numeral span{
    display:inline-block;padding:0 .8rem;
    position:relative;
}
.numeral span::before,.numeral span::after{
    content:"";position:absolute;top:50%;width:26px;height:1px;
    background:var(--rule-firm);
}
.numeral span::before{right:100%}
.numeral span::after{left:100%}
.dl p{
    margin:0 0 1.15rem;
    text-align:justify;hyphens:auto;
    text-wrap:pretty;
}
.dl p:last-child{margin-bottom:0}
/* The opening initial, once, at the very top of the chapter: the oldest
   signal there is that what follows is a piece of writing. */
#s1 p:first-of-type::first-letter{
    float:left;font-size:3.4em;line-height:.82;
    padding:.06em .1em 0 0;color:var(--mark);font-weight:500;
}
em{font-style:italic}

/* WHERE YOU STOPPED, marked in the margin rather than announced in a
   banner. A reader coming back wants the place, not a dialogue box
   telling them about the place. It fades out once it has been passed,
   because after that it is answering a question nobody is asking. */
.mark{
    position:absolute;left:-20px;width:3px;border-radius:2px;
    background:var(--mark);opacity:.85;
    transition:opacity .5s ease;
}
.mark[data-passed="1"]{opacity:0}
@media (max-width:700px){ .mark{left:-12px;width:2px} }

/* ── WHAT COMES NEXT ───────────────────────────────────────────────*/
.after{
    max-width:var(--measure);margin:0 auto;
    padding:clamp(40px,8vh,72px) 22px clamp(56px,10vh,96px);
    border-top:1px solid var(--rule);
    text-align:center;
}
.after .chapter{margin-bottom:1rem}
.after h2{
    margin:0;font-weight:500;font-size:1.7rem;line-height:1.2;
}
.after .dateline{margin-top:1rem;font-size:.98rem}
/* ── LISTENING ──────────────────────────────────────────────────────
   A bar at the foot of the page, and the paragraph being spoken marked
   in the text. The marker is a rule in the margin rather than a
   highlight: a block of colour behind prose is a textbook, and this is
   a novel. It uses the same oxide as the bookmark, because it is the
   same idea - "you are here" - arriving by a different route. */
/* The bar's own height, published, because two other things have to get out
   of its way: the page's last line, and - on a phone, where they live in the
   bottom corner - the reading tools. Both used to carry their own arithmetic,
   and the tools' copy was simply missing: A-, A+, night and the note were drawn
   ON TOP of the player, at z-index 41 against its 40, so the thing that had
   just been opened was behind the buttons that opened it. */
:root{--bar-h:3.2rem}
.listen{
    position:fixed;left:0;right:0;bottom:0;z-index:40;
    display:none;align-items:center;gap:.6rem;
    padding:.55rem max(.8rem,env(safe-area-inset-left))
            calc(.55rem + env(safe-area-inset-bottom))
            max(.8rem,env(safe-area-inset-right));
    background:var(--paper-deep);
    border-top:1px solid var(--rule);
    font-family:var(--ui);
    /* The bar is furniture, not paper: it does not take the book's measure. */
    box-shadow:0 -6px 20px rgba(0,0,0,.08);
}
.listen[data-open="1"]{display:flex}
.listen button{
    flex:0 0 auto;width:2.1rem;height:2.1rem;padding:0;
    display:flex;align-items:center;justify-content:center;
    font-size:.95rem;line-height:1;
    color:var(--ink-soft);background:transparent;
    border:1px solid var(--rule);border-radius:50%;cursor:pointer;
}
.listen button:hover{color:var(--ink);border-color:var(--rule-firm)}
.listen button:focus-visible{outline:2px solid var(--mark);outline-offset:2px}
.listen-play{color:var(--mark)!important;border-color:var(--mark)!important}
.listen-time{
    flex:0 0 auto;font-size:.76rem;color:var(--ink-faint);
    font-variant-numeric:tabular-nums;min-width:3.2em;text-align:right;
}
.listen-seek{
    flex:1 1 auto;min-width:0;height:1.6rem;margin:0;
    -webkit-appearance:none;appearance:none;background:transparent;cursor:pointer;
}
.listen-seek::-webkit-slider-runnable-track{
    height:3px;border-radius:2px;background:var(--rule-firm);
}
.listen-seek::-moz-range-track{height:3px;border-radius:2px;background:var(--rule-firm)}
.listen-seek::-webkit-slider-thumb{
    -webkit-appearance:none;appearance:none;margin-top:-5px;
    width:13px;height:13px;border-radius:50%;background:var(--mark);border:0;
}
.listen-seek::-moz-range-thumb{
    width:13px;height:13px;border-radius:50%;background:var(--mark);border:0;
}
.listen-seek:focus-visible{outline:2px solid var(--mark);outline-offset:2px}

/* The two skips read as one control either side of play, so they are set
   lighter than the glyphs that mean something else. */
.listen-skip span{font-size:1.15rem;line-height:1}
.listen-again span{font-size:1.05rem;line-height:1}

/* Room for the bar, so the last line of a section is never under it. */
body[data-listening="1"]{padding-bottom:calc(var(--bar-h) + 1.4rem)}

/* The paragraph being spoken. A rule in the margin on a wide screen and a
   short one above the line on a narrow one, where there is no margin to
   put anything in. */
.dl p[data-speaking]{position:relative}
.dl p[data-speaking]::before{
    content:"";position:absolute;
    left:-1.1rem;top:.35em;bottom:.35em;width:2px;
    background:var(--mark);border-radius:1px;
}
@media (max-width:42rem){
    .dl p[data-speaking]::before{
        left:0;top:-.5em;bottom:auto;width:1.6rem;height:2px;
    }
}
/* Tapping a paragraph seeks there, but only while the player is open, so
   the cursor only says so then. */
body[data-listening="1"] .dl p{cursor:pointer}

/* Being told when the next chapter lands. Quiet: it sits under the purchase
   band and must not compete with it. */
.tell{margin:2rem auto 0;max-width:28rem;text-align:center}
.tell-go{
    font-family:var(--ui);font-size:.84rem;font-weight:600;letter-spacing:.02em;
    color:var(--ink-soft);background:transparent;
    border:1px solid var(--rule);border-radius:999px;
    padding:.6rem 1.1rem;cursor:pointer;
    transition:color .15s,border-color .15s;
}
.tell-go:hover{color:var(--ink);border-color:var(--rule-firm)}
.tell-go:focus-visible{outline:2px solid var(--mark);outline-offset:2px}
.tell-go[disabled]{opacity:.55;cursor:default}
.tell-go[data-on="1"]{color:var(--mark);border-color:var(--mark)}
.tell-msg{
    margin:.7rem 0 0;font-family:var(--ui);font-size:.78rem;line-height:1.5;
    color:var(--ink-soft);
}

/* The line that says whether the next chapter EXISTS. It is the strongest
   sentence on the band when it is true, so it is not small print. */
.give-waiting{margin:0 0 14px;color:var(--mark);font-weight:500}
.after p.note{
    margin:1.6rem auto 0;max-width:28rem;
    font-size:1rem;line-height:1.6;color:var(--ink-soft);
}
.btn{
    display:inline-block;margin-top:1.6rem;
    font-family:var(--ui);font-size:.86rem;font-weight:600;
    letter-spacing:.02em;
    padding:.8rem 1.5rem;border-radius:9px;cursor:pointer;
    border:1px solid var(--mark);
    background:var(--mark);color:var(--paper);
    text-decoration:none;
}
.btn:hover{filter:brightness(1.08)}
.btn:focus-visible{outline:2px solid var(--mark);outline-offset:3px}
.home{
    display:block;margin-top:2rem;
    font-family:var(--ui);font-size:.78rem;
    color:var(--ink-faint);text-decoration:none;
}
.home:hover{color:var(--ink-soft)}
.home:focus-visible{outline:2px solid var(--mark);outline-offset:3px}

@media (max-width:700px){
    :root{--size:19px}
    .dl p{text-align:left;hyphens:manual}
    .tools{top:auto;bottom:calc(12px + env(safe-area-inset-bottom));right:12px}
    /* Above the bar once there is one. The bar is the full width of the foot,
       so there is nowhere sideways to go. */
    body[data-listening="1"] .tools{
        bottom:calc(12px + var(--bar-h) + env(safe-area-inset-bottom));
    }
}

/* ── THE WAY BACK OUT ──────────────────────────────────────
   The same chip that is welded into the bottom-left corner of sisamos.net,
   research.sisamos.net and gg.sisamos.net. bubble.js promotes it to a liquid
   skin; without the script it is simply a dark chip with one rounded corner,
   which is the whole design at rest.

   It stays dark on the paper deliberately. A reader recognises it from the
   other sites, and a chip that matched the sheet would stop reading as a way
   out of it. */
.corner-bubble{
    cursor:pointer;
    position:fixed;
    bottom:0;
    left:0;
    z-index:38;
    transform-origin:bottom left;
    border-radius:0 20px 0 0;
    font-family:var(--ui);
    font-size:.78rem;letter-spacing:.02em;
    padding:10px 20px 10px 16px;
    padding-left:max(16px, env(safe-area-inset-left, 0px));
    padding-bottom:max(10px, env(safe-area-inset-bottom, 0px));
    color:#fdfffc;
    background-color:rgba(0,0,0,.55);
    box-shadow:inset 0 0 0 1px rgba(253,255,252,.08),
               inset 0 14px 26px -14px rgba(253,255,252,.07);
    transition:transform .72s cubic-bezier(.22,1.4,.36,1),
               border-radius .72s cubic-bezier(.22,1.4,.36,1),
               background-color .4s ease,
               box-shadow .4s ease,
               opacity .3s ease;
}
/* The chip shows a pointer over all of it, so all of it has to be the link.
   .corner-bubble is fixed, so it is the containing block. */
.corner-bubble a::after{content:"";position:absolute;inset:0}
.corner-bubble a{color:#fdfffc;text-decoration:none}
.corner-bubble a:focus-visible{outline:2px solid var(--mark);outline-offset:3px;border-radius:4px}
.corner-bubble.is-near{
    will-change:transform, border-radius;
    transition:transform .17s ease-out,
               border-radius .17s ease-out,
               background-color .4s ease,
               box-shadow .4s ease;
    background-color:rgba(0,0,0,.68);
    box-shadow:inset 0 0 0 1px rgba(197,131,53,.3),
               inset 0 14px 26px -14px rgba(253,255,252,.1);
}
/* Once the skin is up it carries the fill and the rim, and the chip's own box
   has to stop painting or the two composite into a dark rectangle. */
.corner-bubble.has-skin{background-color:transparent;box-shadow:none}
.bubble-skin{position:absolute;pointer-events:none;z-index:-1;overflow:visible}
.bubble-body{position:static}
.bubble-skin path{
    fill:rgba(0,0,0,.55);
    stroke:rgba(253,255,252,.08);
    stroke-width:1;
    transition:fill .4s ease, stroke .4s ease;
}
.corner-bubble.is-near .bubble-skin path{
    fill:rgba(0,0,0,.68);
    stroke:rgba(197,131,53,.3);
}
/* The player owns the foot of the screen while it is open, and the chip is
   welded to a corner the bar has taken. It cannot move - being welded is the
   whole of its design - so it steps aside instead, and comes back when the
   player is closed. */
body[data-listening="1"] .corner-bubble{opacity:0;pointer-events:none}
@media print{
    .gauge,.tools,.spine,.mark,.after,.listen,.corner-bubble{display:none}
    body{background:#fff;color:#000;font-size:11pt}
}