/* Tinct about page: overrides layered on the v20 build. Loaded after index.*.css. */

/* Ground. The v20 build paints the root canvas, the scrolling story container (.journey.story-root) and the
   scene handoffs in the green of the reader-era design (#132b27) while the bookshelf story is dark brown. The sticky
   stage is 100svh tall, so wherever the visible viewport is taller than the small viewport (iOS Safari with the
   toolbar collapsed, the area behind a translucent toolbar, rubber-band over-scroll) the container's green showed as
   a band. Every layer under the story is now the story's own ground; the <meta name=theme-color> in about.html
   (patch-about-story.mjs) tells Safari the same colour for its toolbars. */
html,body,.journey.story-root[data-bookshelf=true]{background:#191411}
.journey.story-root[data-bookshelf=true]{transition:none}
.journey[data-scene=introducing],.journey[data-scene=reading-cases]{background:#191411}

/* Floating pill: "Escape" until the reveal has been seen, then "Start reading". Hidden over the hero. */
.floating-read{position:fixed;top:22px;right:24px;z-index:60;color:#f6f1e7;background:rgba(25,20,17,.72);border:1px solid rgba(246,241,231,.28);border-radius:999px;padding:10px 18px;font:italic 16px/1 TinctSerif,Georgia,serif;text-decoration:none;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:0;pointer-events:none}
.floating-read .cta-read{display:none}
html[data-tinct-reveal=seen] .floating-read .cta-escape{display:none}
html[data-tinct-reveal=seen] .floating-read .cta-read{display:inline}
.floating-read:hover{background:rgba(25,20,17,.94);border-color:rgba(246,241,231,.55)}
html[data-tinct-footer=visible] .floating-read{opacity:0!important;pointer-events:none!important;transition:opacity .25s}
@supports (animation-timeline:scroll()){
  .floating-read{animation:tinct-cta-reveal linear both;animation-timeline:scroll(root);animation-range:70vh 120vh}
}
@keyframes tinct-cta-reveal{from{opacity:0;pointer-events:none}to{opacity:1;pointer-events:auto}}
@supports not (animation-timeline:scroll()){.floating-read{opacity:1;pointer-events:auto;top:auto;bottom:22px}}
/* Phones: the pill sits at the bottom, centred, above Safari's toolbar. about-v21.js hides it while the closing
   section's own Start reading button or the footer is on screen. */
@media (max-width:760px){.floating-read{top:auto;bottom:calc(14px + env(safe-area-inset-bottom,0px));right:auto;left:50%;transform:translateX(-50%);padding:11px 22px;font-size:16px;white-space:nowrap}}

/* Footer */
.about-footer{background:#191411;color:#b9ae94;border-top:1px solid rgba(246,241,231,.12);padding:34px 5vw 44px;display:flex;flex-wrap:wrap;align-items:center;gap:18px 32px;font:14px/1.4 TinctSerif,Georgia,serif}
.about-footer-mark{color:#f6f1e7;font:500 26px/1 TinctSerif,Georgia,serif;letter-spacing:-1px}
.about-footer nav{display:flex;flex-wrap:wrap;gap:8px 26px;margin-left:auto}
.about-footer a{color:#d8cfb8;text-decoration:none;border-bottom:1px solid rgba(216,207,184,.35);padding-bottom:2px}
.about-footer a:hover{color:#f6f1e7;border-bottom-color:#f6f1e7}

/* Type: the story speaks in the serif, never in the mono UI voice. */
.reading-leaf footer{font:12px/1.3 TinctSerif,Georgia,serif}
.reader-page-count,.device-progress{font-family:TinctSerif,Georgia,serif}
.recap-time{letter-spacing:0;text-transform:none;color:#b2bdb9;font:italic 15px/1.4 TinctSerif,Georgia,serif;display:block}
.book-character>small{letter-spacing:0;color:#67765b;font:italic 14px/1.3 TinctSerif,Georgia,serif}
.edition-gesture span{font:italic 13px TinctSerif,Georgia,serif}

/* Reveal: "Introducing Tinct." with the product beside it, placed before the demonstrations. */
.reading-brand{background:#191411;flex-direction:row;justify-content:space-between;align-items:center;gap:0;padding:0 4vw;text-align:left}
.reading-brand .brand-copy{width:36vw;flex:none}
.reading-brand .tinct-introduction{color:#f6f1e7;margin:0 0 18px;font:400 clamp(24px,2.4vw,38px)/1.2 TinctSerif,Georgia,serif}
.reading-brand .tinct-promise{color:#dcc5a3;margin:0;font:400 clamp(36px,4.2vw,66px)/1.08 TinctSerif,Georgia,serif}
.reading-brand .brand-devices{width:58vw;flex:none;position:relative}
.reading-brand .brand-devices .journey-visual{width:100%;max-width:none;height:min(74vh,640px);transform:none;scale:1;flex:none;overflow:visible;-webkit-mask-image:none;mask-image:none}
.brand-ensemble{width:100%;height:100%;max-width:none;margin:0;position:relative!important}
.brand-ensemble .device-canvas{-webkit-mask-image:none;mask-image:none}
.brand-ensemble .device-canvas>img{width:1536px;height:1024px;max-height:none;border-radius:0;-webkit-mask-image:none;mask-image:none;box-shadow:none;transform:none}
.reading-brand .brand-ensemble .brand-screen{width:100%!important;height:100%!important;max-height:none;object-fit:cover;object-position:top;display:block;transform:none;box-shadow:none;border-radius:0}
@media (max-width:1024px){
  .reading-brand{flex-direction:column;justify-content:center;gap:10px;padding:0 24px}
  .reading-brand .brand-copy,.reading-brand .brand-devices{width:100%}
  .reading-brand .brand-devices .journey-visual{height:40svh}
  .reading-brand .tinct-promise{font-size:34px}
}

/* Overview ("And a great book asks more of you"): the passage sits on the left page, the right page
   recedes, and each question appears over it beside the line it belongs to. One highlight at a time. */
.reading-journey[data-beat=overview] .reading-right-leaf{right:auto;left:0;background:linear-gradient(90deg,#ede4ce 90%,#d1c6af);border-radius:3px 0 0 3px}
.reading-journey[data-beat=overview] .reading-left-leaf{left:auto;right:0;background:linear-gradient(90deg,#cfc2a9,#eee5cf 6%);border-radius:0 5px 5px 0}
.reading-journey[data-beat=overview] .reading-left-leaf .preceding-page{filter:blur(3px);opacity:.28}
.reading-journey[data-beat=overview] .reading-left-leaf header,
.reading-journey[data-beat=overview] .reading-left-leaf footer{opacity:.35}
.reading-journey .passage-context{background:none;border-left:0;margin:0 0 1em;padding:0;font:inherit}
/* Recap: the book leaves while the days count, then the card arrives on its own. */
.reading-journey[data-beat=return] .reading-book{opacity:calc(1 - var(--gone,0))}
mark.ask-mark,span.ask-mark{color:inherit;background-color:rgba(255,226,120,var(--k,0));-webkit-box-decoration-break:clone;box-decoration-break:clone;padding:0 .12em;margin:0 -.12em;border-radius:3px}
@media (min-width:1025px){
  .reading-journey[data-beat=overview] .book-overview-questions p{left:55%;right:4%;background:#fffdf5;color:#2a2620;border:0;border-left:5px solid #f4dd6e;border-radius:4px 14px 14px 4px;padding:14px 18px;box-shadow:0 16px 40px #00000040;font:italic clamp(20px,1.7vw,26px)/1.3 TinctSerif,Georgia,serif;text-align:left}
  .reading-journey[data-beat=overview] .book-overview-questions p:first-child{top:15%}
  .reading-journey[data-beat=overview] .book-overview-questions p:nth-child(2){top:40%}
  .reading-journey[data-beat=overview] .book-overview-questions p:nth-child(3){top:26%}
}

/* Talk to the book: everything but the quote recedes. The panel follows the Talk concept:
   ink dots on paper, a Playfair status word, Garamond labels, round controls, no accent colour. */
.reading-journey[data-beat=voice] .reading-passage>*:not(:has(.word-target)){filter:blur(2.2px);opacity:.38}
.reading-journey[data-beat=voice] .word-target{background:rgba(255,226,120,.95)}
.reading-journey[data-beat=voice] .book-conversation{background:#ece7db;color:#0b0b0b;border-radius:18px;box-shadow:0 26px 70px #0008;padding:52px 20px 24px;text-align:center;display:grid;grid-template-columns:1fr 1fr 1fr;grid-template-areas:"o o o" "s s s" "q q q" "a a a" "m t e";align-content:center;justify-items:center;gap:12px 10px;font-family:'EB Garamond',TinctSerif,Georgia,serif;min-height:clamp(420px,60vh,600px)}
.reading-journey[data-beat=voice] .book-conversation::before{content:"Hamlet, Act I, Scene IV";position:absolute;top:18px;left:22px;font:italic 14px/1.2 'EB Garamond',TinctSerif,Georgia,serif;color:#6a6256}
.reading-journey[data-beat=voice] .book-conversation::after{content:"● Connected";position:absolute;top:18px;right:22px;font:14px/1.2 'EB Garamond',TinctSerif,Georgia,serif;color:#6a6256}
.reading-journey[data-beat=voice] .conversation-orbit{grid-area:o;width:min(200px,42%);aspect-ratio:1;height:auto;border:0;margin:0 auto 6px;display:block;position:relative}
.reading-journey[data-beat=voice] .conversation-orbit>span{display:none}
.reading-journey[data-beat=voice] .conversation-orbit canvas{width:100%;height:100%;display:block}
.reading-journey[data-beat=voice] .book-conversation h3{grid-area:s;margin:0;color:#0b0b0b;font:400 clamp(26px,2.2vw,34px)/1.15 'Playfair Display',TinctSerif,Georgia,serif;letter-spacing:-.01em}
.reading-journey[data-beat=voice] .book-conversation .book-question{grid-area:q;margin:0;max-width:300px;color:#6a6256;font:italic clamp(15px,1.25vw,18px)/1.45 'EB Garamond',TinctSerif,Georgia,serif}
.reading-journey[data-beat=voice] .book-conversation>p:not(.book-question){grid-area:a;margin:0;max-width:320px;color:#0b0b0b;font:clamp(15px,1.2vw,18px)/1.45 'EB Garamond',TinctSerif,Georgia,serif}
.reading-journey[data-beat=voice] .book-conversation button{grid-area:t;margin:8px 0 0;flex-direction:column;gap:7px;color:#6a6256;font:13px/1 'EB Garamond',TinctSerif,Georgia,serif;text-decoration:none}
.reading-journey[data-beat=voice] .book-conversation button svg{width:40px;height:40px;padding:11px;box-sizing:border-box;border:1px solid #c8c0ae;border-radius:50%;color:#0b0b0b}
.talk-side{margin-top:8px;display:flex;flex-direction:column;align-items:center;gap:7px;color:#6a6256;font:13px/1 'EB Garamond',TinctSerif,Georgia,serif;pointer-events:none}
.talk-side.talk-mute{grid-area:m;justify-self:end}
.talk-side.talk-end{grid-area:e;justify-self:start}
.talk-side i{width:40px;height:40px;border-radius:50%;border:1px solid #c8c0ae;display:grid;place-items:center;font-style:normal}
.talk-side.talk-end i{background:#0b0b0b;border-color:#0b0b0b}
.talk-side svg{width:16px;height:16px}
.reading-journey[data-beat=voice] .book-conversation:not(:has(.conversation-orbit)) .talk-side{display:none}
.reading-journey[data-beat=voice] .book-conversation:not(:has(.conversation-orbit)){grid-template-areas:"s s s" "q q q" "a a a" "t t t"}

@media (max-width:1024px){
  /* Phones and portrait tablets share one layout: a single page filling the lower half, narration resting just above it. */
  .reading-left-leaf{display:none}
  .reading-right-leaf{width:100%;border-radius:5px}
  .reading-book,.reading-narration{transform:none!important}
  /* The page is pinned to the bottom of the scene above the pill; the narration ends a fixed gap above the page (wider than the headline's 25px entry slide).
     Everything is in % of the scene (the small viewport) or px: the old page height in vh was the *large* viewport
     on iOS Safari, so with the toolbar showing the page rose over the headline's last line. The page's text scales
     with the page (container units) so the passage still fits on a short screen. */
  .reading-journey{--page-h:min(58%,640px);--page-foot:calc(60px + env(safe-area-inset-bottom,0px))}
  .reading-narration{width:auto;margin:0;left:24px;right:24px;top:auto;bottom:calc(var(--page-foot) + var(--page-h) + 32px)}
  .reading-problem{font-size:clamp(20px,2.6vw,26px)}
  .reading-narration h2{margin-top:12px;font-size:clamp(34px,5vw,48px)}
  .reading-detail{margin-top:12px;font-size:clamp(17px,2.2vw,21px)}
  .reading-object-stage{width:92vw;right:4vw;top:auto;bottom:var(--page-foot);height:var(--page-h);transform:none!important;container-type:size}
  .reading-passage{font-size:clamp(11px,3cqh,16px)}
  .book-conversation,.book-character{width:87%}
  .shelf-stage{top:60%;width:118vw;right:-9vw}
  /* The page turns into the conversation at the same size instead of sharing the width with it. */
  .reading-journey[data-beat=voice] .reading-object-stage{width:92vw;height:var(--page-h);top:auto;bottom:var(--page-foot);right:4vw}
  .reading-journey[data-beat=voice] .reading-book{width:100%;transform:perspective(1100px) rotateY(calc(var(--reveal,0) * -95deg))!important;transform-origin:0 50%;opacity:calc(1 - var(--reveal,0))}
  /* The Talk panel scales with the page it turns into (container units), so its controls stay inside it on a short screen. */
  .reading-journey[data-beat=voice] .book-conversation{width:100%;left:0;right:0;top:0;min-height:100%;max-height:100%;box-sizing:border-box;overflow:hidden;padding:calc(34px + 2.4cqh) 16px 16px;gap:min(8px,1.6cqh) 10px}
  .reading-journey[data-beat=voice] .conversation-orbit{width:min(200px,42%,26cqh)}
  .reading-journey[data-beat=voice] .book-conversation h3{font-size:clamp(20px,6cqh,34px)}
  .reading-journey[data-beat=voice] .book-conversation .book-question,.reading-journey[data-beat=voice] .book-conversation>p:not(.book-question){font-size:clamp(13px,3.4cqh,18px)}
  .reading-journey[data-beat=voice] .book-conversation button svg,.reading-journey[data-beat=voice] .talk-side i{width:min(40px,9cqh);height:min(40px,9cqh)}
}

/* Language ("Swipe for another edition"): one full page, no highlights, no pill, edition named in the page header. */
.reading-journey[data-beat=language] .word-target{background:0 0}
.reading-journey[data-beat=language] .edition-gesture{display:none}
.reading-journey[data-beat=language] .reading-left-leaf{visibility:hidden}
.reading-journey[data-beat=language] .reading-right-leaf{width:100%;border-radius:5px;background:#eee5cf}
.reading-journey[data-beat=language] .reading-book-cover,
.reading-journey[data-beat=language] .reading-book-leaves{display:none}
.reading-journey[data-beat=language] .reading-object-stage{width:34vw;right:14vw}
@media (max-width:1024px){.reading-journey[data-beat=language] .reading-object-stage{width:92vw;right:4vw}}
.edition-name{margin-left:auto;color:#1f4a5c;font-style:italic;white-space:nowrap;transition:opacity .45s}

/* Character ("Click a name"): the page recedes around the name. */
.reading-journey[data-beat=character] .reading-right-leaf .reading-passage,
.reading-journey[data-beat=character] .reading-right-leaf .reading-passage h3{color:#a39c8a}
.reading-journey[data-beat=character] .inline-character{color:#27251e}

/* Transitions: the book fades out at the end of a beat, the audio scene fades in. */
.reading-journey .reading-object-stage{opacity:calc(1 - var(--exit,0))}
.audio-journey-frame{background:#191411}
@keyframes tinct-frame-in{from{opacity:0}to{opacity:1}}

/* Reveal animation: words settle in, screens light one after another, a slow sweep of light crosses the set. */
.promise-word{display:inline-block;margin-right:.27em;will-change:transform,opacity}
.brand-sweep{position:absolute;inset:-12% -25%;pointer-events:none;background:linear-gradient(100deg,transparent 42%,rgba(246,241,231,.16) 50%,transparent 58%);mix-blend-mode:screen}
/* The lit screens are pre-rendered layers (scripts/render-about-reveal-screens.mjs) over the device photo. */
.brand-ensemble .device-canvas>img.lit-screen{position:absolute;top:0;left:0}

/* Phones and tablets: the questions sit on the page as small cards beside the line they ask about. */
@media (max-width:1024px){
  .book-overview-questions p{left:auto;right:-2%;max-width:64%;background:#fffdf5;color:#2a2620;border:0;border-left:5px solid #f4dd6e;border-radius:4px 12px 12px 4px;padding:10px 14px;box-shadow:0 12px 30px #00000040;font:italic clamp(16px,2.3vw,22px)/1.3 TinctSerif,Georgia,serif;text-align:left}
  .book-overview-questions p:first-child{top:11%}
  .book-overview-questions p:nth-child(2){top:46%}
  .book-overview-questions p:nth-child(3){top:24%}
}
/* Round 2 (2026-09-11, Anders): a question must never sit on the text it asks about. On phones and
   portrait tablets the page gives up a little height and the question cards move into a band of their
   own between the narration and the page's top edge; the narration steps up to make room. */
@media (max-width:1024px){
  .reading-journey[data-beat=overview] .reading-narration{bottom:calc(var(--page-foot) + var(--page-h) + 84px)}
  .reading-journey[data-beat=overview] .reading-passage{font-size:clamp(10px,3cqh,16px)}
  .book-overview-questions p{top:auto!important;bottom:calc(100% + 6px);left:auto;right:0;max-width:82%;font-size:clamp(15px,2.2vw,20px)}
}
/* Round 2: on phones the bottom pill is the button, on every scene. The closing section's inline button
   sat mid-screen above the covers, so it steps aside there; the footer's link stays. */
@media (max-width:760px){.final-read-link{display:none}}

/* The AI chapter runs longer so the Hamlet post can be read before the avalanche. */
.story-root[data-bookshelf=true] .journey-steps #chapter-ai{height:210svh;min-height:210svh}
/* The shelf behind the closing covers keeps a little warmth and colour instead of fading to grey. */
.story-root[data-bookshelf=true] .scene-frame[data-scene=invitation] .closing-shelf-backdrop{filter:saturate(.8) brightness(1.15);opacity:calc(.4 * (1 - .5 * clamp(0,(var(--scene-progress) - .12) / .65,1)))}