/* =========================================================================
   1732 Studios — the living edition
   A faithful HTML/CSS recreation of the ReaderView, re-skinnable into any of
   the six books. Book palette arrives as --bk-* custom props (set in JS).
   ========================================================================= */

/* device-scoped theme defaults (overwritten inline per book) */
.device {
  --bk-paper:#F5F0E4; --bk-ink:#1E1A19; --bk-sec:#73675C; --bk-accent:#731F2E;
  --bk-face:"Source Serif 4", serif; --bk-weight:400;
  position: relative;
  overflow: hidden;
  flex: none; min-height: 0;
  background: linear-gradient(150deg, #2c3036, #14161a 62%);
  box-shadow:
    0 1px 0 rgba(255,255,255,.12) inset,
    0 0 0 1px rgba(0,0,0,.5),
    0 2px 1px rgba(0,0,0,.22),
    0 44px 72px -26px rgba(20,24,18,.52),
    0 18px 34px -16px rgba(20,24,18,.34);
  transition: width .4s ease, aspect-ratio .4s ease;
}
.device::after { /* metallic edge highlight */
  content:""; position:absolute; inset:0; border-radius: inherit; pointer-events:none;
  box-shadow: 0 0 0 1px rgba(255,255,255,.05) inset;
}
/* side buttons */
.device::before {
  content:""; position:absolute; left:-2px; top:22%; width:3px; height:8%;
  border-radius: 2px 0 0 2px; background:#0d0f12;
  box-shadow: 0 5.5em 0 #0d0f12, 0 8em 0 #0d0f12;
}

/* iPhone */
.device--iphone { width: clamp(258px, 30vw, 312px); aspect-ratio: 9 / 19.3; border-radius: 13.5% / 6.4%; padding: 9px; }
/* iPad */
.device--ipad   { width: min(560px, 94%); aspect-ratio: 1.41 / 1; border-radius: 4.2% / 6%; padding: 13px; }

.screen {
  position: relative; height: 100%; width: 100%; min-height: 0; overflow: hidden;
  background: var(--bk-paper); color: var(--bk-ink);
  display: flex; flex-direction: column;
  transition: background-color .5s ease, color .5s ease;
}
.device--iphone .screen { border-radius: 8% / 4.2%; }
.device--ipad .screen { border-radius: 2.4% / 3.4%; }

/* dynamic island (iphone) / camera (ipad) */
.island { position:absolute; top:9px; left:50%; transform:translateX(-50%); width:32%; height:18px; background:#000; border-radius:99px; z-index:6; }
.device--ipad .island { width:7px; height:7px; top:50%; left:7px; transform:translateY(-50%); background:#0b0b0c; box-shadow:0 0 0 1px rgba(255,255,255,.05); }

/* status bar */
.statusbar { display:flex; align-items:center; justify-content:space-between; padding: 13px 22px 4px; font-family: var(--font-read); font-size:.72rem; font-weight:600; color: var(--bk-ink); letter-spacing:.01em; }
.device--ipad .statusbar { padding: 10px 26px 4px 30px; }
.statusbar .sigs { display:flex; align-items:center; gap:5px; }
.statusbar .sigs svg { height:11px; width:auto; color: var(--bk-ink); }

/* nav bar */
.rnav { display:flex; align-items:center; justify-content:space-between; padding: 6px 16px 10px; border-bottom:1px solid color-mix(in srgb, var(--bk-ink) 12%, transparent); }
.device--ipad .rnav { padding: 6px 26px 12px; }
.rnav .back { color: var(--bk-accent); font-size:1.25rem; line-height:1; display:flex; align-items:center; gap:.2rem; }
.rnav .back span { font-family: var(--font-read); font-size:.7rem; letter-spacing:.02em; }
.rnav .title { font-family: var(--font-read); font-size:.6rem; letter-spacing:.22em; text-transform:uppercase; color: color-mix(in srgb, var(--bk-ink) 78%, transparent); }
.rnav .notes { display:flex; gap:3px; color: var(--bk-sec); }
.rnav .notes i { width:4px; height:13px; border:1px solid currentColor; border-radius:1px; display:block; opacity:.8; }
.rnav .notes i:nth-child(2){ height:9px; align-self:center; }

/* reading surface (scrolls) */
.reader { flex:1; min-height:0; overflow-y:auto; overflow-x:hidden; padding: clamp(14px, 2.4vw, 26px) clamp(16px, 2.4vw, 30px) 8px; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.reader::-webkit-scrollbar{ display:none; }

/* title-page header */
.tp { text-align:center; padding: clamp(10px,2vw,22px) 0 clamp(12px,2vw,20px); }
.tp__eyebrow { font-family: var(--font-read); font-size:.58rem; letter-spacing:.26em; text-transform:uppercase; color: var(--bk-accent); }
.tp__rule { width:44px; height:2px; background: var(--bk-accent); margin: 12px auto 14px; opacity:.85; }
.tp__title { font-family: var(--bk-face); font-weight: var(--bk-weight); color: var(--bk-ink); font-size: clamp(1.55rem, 1.2rem + 1.6vw, 2.15rem); line-height:1.08; letter-spacing:.005em; }
.tp__author { font-family: var(--font-read); font-style:italic; color: var(--bk-sec); font-size:.84rem; margin-top:.55rem; }
.tp__orn { color: var(--bk-accent); font-size:1.05rem; margin-top:.7rem; opacity:.9; }
[data-book="arlt"] .tp__title { text-transform:uppercase; letter-spacing:.01em; font-size: clamp(1.5rem,1.1rem+1.5vw,2rem); }
[data-book="havelaar"] .tp__title { font-size: clamp(1.4rem,1.1rem+1.4vw,1.92rem); }
[data-book="kierkegaard"] .tp__title { font-size: clamp(1.7rem,1.3rem+1.8vw,2.4rem); }
[data-book="karamazov"] .tp__title,[data-book="rilke"] .tp__title { font-size: clamp(1.5rem,1.15rem+1.5vw,2.05rem); }

/* segments (iphone: stacked) */
.segs { display:flex; flex-direction:column; gap: clamp(12px,1.6vw,18px); padding-bottom: 70px; }
.seg { padding: 6px 10px; border-radius: 7px; margin-inline:-6px; transition: background-color .5s ease; }
.seg__s { font-family: var(--font-read); font-size: clamp(.96rem,.92rem+.2vw,1.06rem); line-height:1.5; color: var(--bk-ink); }
.seg__t { font-family: var(--font-read); font-size: clamp(.82rem,.8rem+.12vw,.9rem); line-height:1.42; color: var(--bk-sec); margin-top:3px; }
.seg.is-active { background: color-mix(in srgb, var(--bk-accent) 15%, transparent); }
[data-book="arlt"] .seg__s, [data-book="havelaar"] .seg__s, [data-book="karamazov"] .seg__s { font-size: clamp(.9rem,.86rem+.18vw,1rem); }

/* iPad two-column split */
.device--ipad .tp { padding: 6px 0 10px; }
.device--ipad .tp__rule { margin: 8px auto 9px; }
.device--ipad .tp__title { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.75rem); }
.device--ipad .tp__author { margin-top: .35rem; }
.device--ipad .tp__orn { margin-top: .4rem; font-size: .95rem; }
.device--ipad .segs { padding-bottom: 56px; }
.device--ipad .segs { display:grid; grid-template-columns:1fr 1fr; gap: clamp(10px,1.4vw,16px) clamp(26px,3.5vw,46px); align-items:baseline; }
.device--ipad .seg { display:contents; }
.device--ipad .seg__s { grid-column:1; }
.device--ipad .seg__t { grid-column:2; margin-top:0; }
.device--ipad .seg.is-active { background:transparent; }      /* contents box can't paint; skip */
.split-rule { display:none; }
.device--ipad .split-rule { display:block; position:absolute; top:30%; bottom:14%; left:50%; width:1px; background: color-mix(in srgb, var(--bk-ink) 10%, transparent); }

/* read-aloud control (pinned) */
.audio { position:absolute; left:0; right:0; bottom:0; display:flex; align-items:center; gap:12px; padding: 12px clamp(18px,2.4vw,30px) calc(12px + env(safe-area-inset-bottom)); background: linear-gradient(to top, var(--bk-paper) 62%, transparent); }
.audio__btn { flex:none; width:34px; height:34px; border-radius:50%; border:1.5px solid var(--bk-accent); color: var(--bk-accent); display:grid; place-items:center; transition: background-color .2s, color .2s; }
.audio__btn svg { width:13px; height:13px; }
.audio__btn:hover { background: var(--bk-accent); color: var(--bk-paper); }
.audio__track { flex:1; height:2px; background: color-mix(in srgb, var(--bk-ink) 14%, transparent); border-radius:2px; overflow:hidden; }
.audio__fill { height:100%; width:18%; background: var(--bk-accent); transition: width .4s linear; }
.audio__pho { font-family: var(--font-read); font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color: var(--bk-sec); }

/* =========================================================================
   Catalogue selector (six tabs under the device)
   ========================================================================= */
.selector { display:flex; flex-wrap:wrap; justify-content:center; gap:6px; max-width:560px; }
.tab {
  display:flex; flex-direction:column; align-items:flex-start; gap:2px;
  padding:.5rem .8rem; border:1px solid var(--hairline); border-radius: var(--radius);
  background: var(--paper-raised); transition: border-color .25s, transform .2s, background-color .25s;
  min-width: 0;
}
.tab b { font-family: var(--font-display); font-weight:400; font-size:1rem; color: var(--ink); line-height:1; }
.tab span { font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; color: var(--sepia); }
.tab i { width:18px; height:2px; background: var(--tab-accent); display:block; margin-top:3px; opacity:0; transition: opacity .25s; border-radius:2px; }
.tab:hover { transform: translateY(-2px); border-color: var(--hairline-bold); }
.tab[aria-pressed="true"] { border-color: var(--tab-accent); background: var(--paper); }
.tab[aria-pressed="true"] i { opacity:1; }

/* form toggle (iPhone / iPad) */
.formtoggle { display:inline-flex; border:1px solid var(--hairline-bold); border-radius:100px; padding:3px; gap:2px; }
.formtoggle button { font-size:var(--t-label); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); padding:.35rem .85rem; border-radius:100px; transition: background-color .25s, color .25s; }
.formtoggle button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }

.stage__caption { font-size:var(--t-small); color:var(--sepia); text-align:center; max-width:30rem; }
.stage__caption b { color: var(--ink-soft); font-weight:400; font-style:italic; }

/* =========================================================================
   Mobile carousel — the page becomes the edition (≤600px)
   ========================================================================= */
.editions { display:none; }
@media (max-width: 600px) {
  .hero__stage { display:none; }      /* hide framed device on phones */
  .editions {
    display:flex; gap:0; overflow-x:auto; scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch; scrollbar-width:none;
    margin-inline: calc(var(--pad-x) * -1); padding-inline: 0;
  }
  .editions::-webkit-scrollbar{ display:none; }
  .ed {
    scroll-snap-align:center; flex:0 0 86%; margin-inline:2%;
    background: var(--bk-paper); color: var(--bk-ink);
    border:1px solid color-mix(in srgb, var(--bk-ink) 14%, transparent); border-radius:16px;
    padding: 26px 22px 22px; display:flex; flex-direction:column; min-height:62vh;
    box-shadow: 0 18px 40px -22px var(--shadow-deep);
  }
  .ed:first-child { margin-left: var(--pad-x); }
  .ed:last-child  { margin-right: var(--pad-x); }
  .ed__eyebrow { font-family:var(--font-read); font-size:.6rem; letter-spacing:.24em; text-transform:uppercase; color:var(--bk-accent); text-align:center; }
  .ed__rule { width:44px; height:2px; background:var(--bk-accent); margin:12px auto 14px; }
  .ed__title { font-family:var(--bk-face); font-weight:var(--bk-weight); font-size:1.9rem; line-height:1.08; text-align:center; color:var(--bk-ink); }
  .ed[data-book="arlt"] .ed__title { text-transform:uppercase; }
  .ed__author { font-family:var(--font-read); font-style:italic; color:var(--bk-sec); text-align:center; font-size:.86rem; margin-top:.5rem; }
  .ed__orn { color:var(--bk-accent); text-align:center; margin:.6rem 0 1.1rem; }
  .ed__seg { margin: 0 -8px .7rem; padding: 4px 8px; border-radius: 7px; transition: background-color .4s ease; }
  .ed__seg.is-active { background: color-mix(in srgb, var(--bk-accent) 15%, transparent); }
  .ed__s { font-family:var(--font-read); font-size:1rem; line-height:1.5; color:var(--bk-ink); }
  .ed__t { font-family:var(--font-read); font-size:.85rem; line-height:1.42; color:var(--bk-sec); margin-top:3px; }
  .ed__audio { display:flex; align-items:center; gap:10px; margin-top:.6rem; padding-top:.9rem; border-top:1px solid color-mix(in srgb, var(--bk-ink) 12%, transparent); }
  .ed__play { flex:none; width:34px; height:34px; border-radius:50%; border:1.5px solid var(--bk-accent); color:var(--bk-accent); background:none; display:grid; place-items:center; cursor:pointer; }
  .ed__play svg { width:13px; height:13px; }
  .ed__play:active { background:var(--bk-accent); color:var(--bk-paper); }
  .ed__track { flex:1; height:2px; background:color-mix(in srgb, var(--bk-ink) 14%, transparent); border-radius:2px; overflow:hidden; }
  .ed__fill { height:100%; width:0; background:var(--bk-accent); transition:width .3s linear; }
  .ed__listen { font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color:var(--bk-sec); }
  .ed__foot { margin-top:auto; padding-top:1rem; display:flex; align-items:center; justify-content:space-between; }
  .ed__lang { font-size:.6rem; letter-spacing:.18em; text-transform:uppercase; color:var(--bk-sec); }
  .ed__go { font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--bk-accent); display:inline-flex; gap:.4rem; }
  .editions__dots { display:flex; justify-content:center; gap:7px; margin-top:1rem; }
  .editions__dots i { width:6px; height:6px; border-radius:50%; background:var(--hairline-bold); transition:background-color .25s, transform .25s; }
  .editions__dots i.on { background: var(--ink); transform:scale(1.25); }
}

/* respect reduced motion on device transitions */
@media (prefers-reduced-motion: reduce) {
  .device, .screen, .seg, .audio__fill { transition: none; }
}