/* ═══ Attune · the landing ════════════════════════════════════════════════
   The app's system, set at the scale of a page. The rules are the app's:

     RUBRIC (oxblood) - where you act, and where you are now.
     LAPIS            - who is speaking. Provenance, never action.
     SAND             - the furnishing: rules, fleurons, plate outlines.

   The rubricated initial is the affordance: one accent letter opens every
   line you can tap, and nothing that is not tappable ever gets one. The
   passage of Scripture keeps its own illuminated initial, as it does in a
   reading.

   Corners are two values. A rule drawn around content is 2. Anything you
   press, or that lifts off the page, is 4. Nothing is a pill.

   The colours are the app's tokens converted from OKLCH to sRGB, so they
   hold on every browser; the source values are kept beside them.
   ════════════════════════════════════════════════════════════════════════ */

/* Fallback faces cut to EB Garamond's width, so the lines do not re-break when
   the webfont arrives. Measured against the loaded face: EB Garamond sets at
   94% of Times New Roman's width in the regular and 97.5% in the medium, so 95
   stands between the two. Android has no Times; its serif is Noto Serif. */
@font-face{
  font-family:"Attune Serif Fallback";
  src:local("Times New Roman"),local("TimesNewRomanPSMT"),local("Times");
  size-adjust:95%;
}
@font-face{
  font-family:"Attune Serif Fallback Droid";
  src:local("Noto Serif"),local("NotoSerif"),local("NotoSerif-Regular");
  size-adjust:86%;
}

:root{
  color-scheme:light;

  /* MORNING - hues locked: parchment 83, rubric 28, lapis 251 */
  --paper:#f8f3ea;            /* oklch(0.965 0.013 83) */
  --paper-raised:#fffdf9;     /* oklch(0.994 0.005 83) */
  --ink:#2a261f;              /* oklch(0.272 0.014 83)   13.62 on paper */
  --ink-2:#5c564a;            /* oklch(0.455 0.021 83)    6.59 */
  --ink-3:#6e6759;            /* oklch(0.516 0.023 83)    5.07 */
  --ink-4:#a79f92;            /* oklch(0.706 0.021 83)    2.37  figures only, never text */
  --rule:#e1d5be;             /* oklch(0.876 0.033 83) */
  --rule-strong:#cab896;      /* oklch(0.788 0.05 83) */
  --rubric:#912a23;           /* oklch(0.444 0.14 28)     7.42 */
  --rubric-deep:#721d18;      /* oklch(0.371 0.12 28) */
  --rubric-tint:#f5e3e0;      /* oklch(0.929 0.02 28) */
  --lapis:#27507b;            /* oklch(0.423 0.085 251)   7.54 */
  --lapis-tint:#dfe9f4;       /* oklch(0.93 0.018 251) */

  /* the rubric plate */
  --panel-bg:#ddcba9;         /* oklch(0.849 0.05 83)     the plate, the user's design of 2026-10-05 */
  --panel-line:#cab896;       /* oklch(0.788 0.05 83)     decorative by intent */
  --panel-figure:#912a23;     /* oklch(0.444 0.14 28)     the cross */
  --panel-title:#2a261f;      /* oklch(0.272 0.014 83)    9.3 on the plate */
  --panel-head:#5c564a;       /* oklch(0.455 0.021 83)    4.5 on the plate */
  --panel-text:#5c564a;
  /* a button ON the plate is paper, the way a card on the plate is */
  --panel-btn-bg:#fffdf9;
  --panel-btn-bg-deep:#f5e3e0;
  --panel-btn-fg:#2a261f;

  --btn-bg:#912a23;           /* oklch(0.444 0.14 28)     7.42 under its label */
  --btn-bg-deep:#721d18;      /* oklch(0.371 0.12 28) */
  --btn-fg:#f8f3ea;           /* oklch(0.965 0.013 83) */
  /* the colophon band: the button red of the paper you are on, parchment on it */
  --foot-bg:var(--btn-bg);
  --foot-title:#fffdf9;
  --foot-text:#e1d5be;
  --foot-mark:#cab896;
  /* the ink button: the hero's way in since the user's pass of 2026-10-05 */
  --btn-ink-bg:var(--ink);
  --btn-ink-bg-deep:#3a342b;
  --btn-ink-fg:var(--paper);
  /* the ornaments between sections, and the quiet one on a band */
  --ornament:#cab896;
  --ornament-quiet:#e1d5be;

  --bezel:#070605;            /* oklch(0.125 0.005 83) */
  --bezel-ring:#36322b;       /* oklch(0.32 0.014 83) */
  --shadow-lift:0 10px 30px -12px rgba(42,38,31,.3),0 2px 6px rgba(42,38,31,.1);
  --shadow-float:0 18px 44px -14px rgba(42,38,31,.42),0 3px 10px rgba(42,38,31,.14);
  --shadow-device:0 50px 90px -34px rgba(42,38,31,.5),0 18px 36px -18px rgba(42,38,31,.3);
  --veil:rgba(248,243,234,0);
  --img-outline:rgba(0,0,0,.1);

  --serif:"EB Garamond","Attune Serif Fallback","Attune Serif Fallback Droid","Iowan Old Style",Palatino,"Palatino Linotype",Georgia,serif;
  --sans:"Hanken Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;

  --ease:cubic-bezier(.2,0,0,1);
  --wrap:1136px;
  --gutter:clamp(20px,5vw,48px);
  --section:clamp(96px,12.5vw,180px);
  --head-h:68px;
}

/* EVENING - the app names this moment itself. Derived by reversing the
   lightness mapping, not hand-picked; hues stay locked. It follows the
   visitor's system unless the switch in the footer has pinned one. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --paper:#120f0a; --paper-raised:#211e17;
    --ink:#eae3d6; --ink-2:#bcb5a7; --ink-3:#9f978a; --ink-4:#5a554a;
    --rule:#27231c; --rule-strong:#464035;
    --rubric:#d67064; --rubric-deep:#ee8d81; --rubric-tint:#361c19;
    --lapis:#72a9e4; --lapis-tint:#192737;
    --panel-bg:#912a23; --panel-line:#732f28; --panel-figure:#cab896; --panel-title:#eae3d6; --panel-head:#cab896;
    --panel-text:#eae3d6;
    --foot-bg:#361c19; --btn-ink-bg-deep:#d8d0c1; --ornament:#5a554a; --ornament-quiet:#5a554a;
    --panel-btn-bg:#a95046; --panel-btn-bg-deep:#8f3830; --panel-btn-fg:#f8f3ea;
    --btn-bg:#a95046; --btn-bg-deep:#8f3830; --btn-fg:#f8f3ea;
    --bezel:#000; --bezel-ring:#464035;
    --shadow-lift:0 10px 30px -12px rgba(0,0,0,.7),0 2px 6px rgba(0,0,0,.5);
    --shadow-float:0 18px 44px -14px rgba(0,0,0,.8),0 3px 10px rgba(0,0,0,.6);
    --shadow-device:0 50px 90px -34px rgba(0,0,0,.9),0 18px 36px -18px rgba(0,0,0,.7);
    --veil:rgba(18,15,10,0);
    --img-outline:rgba(255,255,255,.1);
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --paper:#120f0a; --paper-raised:#211e17;
  --ink:#eae3d6; --ink-2:#bcb5a7; --ink-3:#9f978a; --ink-4:#5a554a;
  --rule:#27231c; --rule-strong:#464035;
  --rubric:#d67064; --rubric-deep:#ee8d81; --rubric-tint:#361c19;
  --lapis:#72a9e4; --lapis-tint:#192737;
  --panel-bg:#912a23; --panel-line:#732f28; --panel-figure:#cab896; --panel-title:#eae3d6; --panel-head:#cab896;
  --panel-text:#eae3d6;
  --foot-bg:#361c19; --btn-ink-bg-deep:#d8d0c1; --ornament:#5a554a; --ornament-quiet:#5a554a;
  --panel-btn-bg:#a95046; --panel-btn-bg-deep:#8f3830; --panel-btn-fg:#f8f3ea;
  --btn-bg:#a95046; --btn-bg-deep:#8f3830; --btn-fg:#f8f3ea;
  --bezel:#000; --bezel-ring:#464035;
  --shadow-lift:0 10px 30px -12px rgba(0,0,0,.7),0 2px 6px rgba(0,0,0,.5);
  --shadow-float:0 18px 44px -14px rgba(0,0,0,.8),0 3px 10px rgba(0,0,0,.6);
  --shadow-device:0 50px 90px -34px rgba(0,0,0,.9),0 18px 36px -18px rgba(0,0,0,.7);
  --veil:rgba(18,15,10,0);
  --img-outline:rgba(255,255,255,.1);
}

/* ── ground ─────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%;text-size-adjust:100%;
  scroll-behavior:smooth;scroll-padding-top:calc(var(--head-h) + 20px);
  background:var(--paper);
}
body{
  margin:0;min-width:320px;
  background:var(--paper);color:var(--ink);
  font-family:var(--serif);font-size:1.25rem;line-height:1.5;font-weight:400;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;font-kerning:normal;
  -webkit-tap-highlight-color:transparent;
  overflow-x:hidden;overflow-x:clip;
}
h1,h2,h3,h4,p,figure,blockquote,ul,ol,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
img,svg,video{display:block;max-width:100%}
[hidden]{display:none !important}
::selection{background:var(--rubric-tint);color:var(--ink)}
:focus{outline:none}
:focus-visible{outline:2px solid var(--rubric);outline-offset:4px;border-radius:2px}

.wrap{width:min(100% - 2 * var(--gutter),var(--wrap));margin-inline:auto}
/* the page itself stands 48px in on a phone (the user's frames); the masthead keeps the narrow gutter */
main,.foot{--gutter:48px}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.skip{position:absolute;left:var(--gutter);top:-120px;z-index:100;padding:12px 16px;border-radius:4px;background:var(--paper-raised);color:var(--ink)}
.skip:focus{top:12px;box-shadow:var(--shadow-float)}
.sprite{position:absolute;width:0;height:0;overflow:hidden}

/* ── type ───────────────────────────────────────────────────────────────── */
.display{
  font-weight:500;font-size:clamp(2.6rem,.9rem + 7vw,4.6rem);line-height:1;
  letter-spacing:-.02em;color:var(--ink);
}
.h2{
  font-weight:500;font-size:clamp(2.05rem,1.36rem + 2.7vw,3.3rem);line-height:1.07;
  letter-spacing:-.014em;color:var(--ink);text-wrap:balance;
}
.h3{font-weight:500;font-size:1.5rem;line-height:1.2;letter-spacing:-.004em;color:var(--ink);text-wrap:balance}
.lead{font-size:clamp(1.3rem,1.17rem + .52vw,1.55rem);line-height:1.42;color:var(--ink-2);text-wrap:pretty}
.copy{color:var(--ink-2);text-wrap:pretty}
/* THE VERSAL. A three-line initial opens each reader's words, as the
   illuminator's did: the grade above the one-line initial on a tappable
   line, and beside the Scripture's own. Where the browser can set an initial letter to the lines
   it does; elsewhere the letter floats and is sized to three of them. */
.versal::first-letter{
  float:left;margin:.08em .09em 0 0;font-size:3.9em;line-height:.74;
  font-weight:500;color:var(--rubric);
}
@supports (initial-letter:3) or (-webkit-initial-letter:3){
  .versal::first-letter{float:none;margin:0 .09em 0 0;font-size:inherit;line-height:inherit;-webkit-initial-letter:3;initial-letter:3}
}
/* on a heading the initial drops two lines: the measure is short and the
   letter already large */
.versal--head::first-letter{margin:.05em .07em 0 0;font-size:2.4em;line-height:.8}
@supports (initial-letter:2) or (-webkit-initial-letter:2){
  .versal--head::first-letter{margin:0 .07em 0 0;font-size:inherit;line-height:inherit;-webkit-initial-letter:2;initial-letter:2}
}
/* on a phone the readers' initials drop two lines, not three: the measure is
   short (the user, 2026-10-05: "reduce the drop caps on mobile") */
@media (max-width:759px){
  .versal:not(.versal--head)::first-letter{margin:.06em .09em 0 0;font-size:2.5em;line-height:.78}
  @supports (initial-letter:2) or (-webkit-initial-letter:2){
    .versal:not(.versal--head)::first-letter{margin:0 .09em 0 0;font-size:inherit;line-height:inherit;-webkit-initial-letter:2;initial-letter:2}
  }
}
/* the divine name, as the King James sets it */
.sc{font-variant-caps:all-small-caps;letter-spacing:.05em}
.eyebrow{
  font-family:var(--sans);font-size:.6875rem;font-weight:500;line-height:1.3;
  letter-spacing:.24em;text-transform:uppercase;color:var(--ink-3);
}
.eyebrow--src{color:var(--lapis)}
/* THE AFFORDANCE. Only on lines that can be tapped. */
.ini{font-weight:500;color:var(--rubric)}
/* provenance takes the lapis */
.cite{font-style:italic;font-size:1rem;line-height:1.6;color:var(--lapis);font-variant-numeric:oldstyle-nums}

/* ── the furnishing ─────────────────────────────────────────────────────── */
.fleuron,.tailpiece{display:flex;align-items:center;justify-content:center;width:100%;height:16px;color:var(--rule-strong)}
.fleuron svg{width:140px;height:16px}
.tailpiece svg{width:40px;height:16px}
.fleuron--wide svg{width:min(100%,280px)}
/* the ornament between sections, the user's pick of 2026-10-05; quiet on a band */
.ornament{display:flex;align-items:center;justify-content:center;width:100%;height:31px;color:var(--ornament)}
.ornament svg{width:30px;height:31px}
.ornament--quiet{color:var(--ornament-quiet)}
/* a raised band under a run of sections */
.band{background:var(--paper-raised)}

/* ── filled button ──────────────────────────────────────────────────────── */
.btn{
  -webkit-appearance:none;appearance:none;border:0;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:52px;padding:0 26px;border-radius:4px;
  background:var(--btn-bg);color:var(--btn-fg);
  font-family:var(--sans);font-size:.75rem;font-weight:600;line-height:1.2;
  letter-spacing:.2em;text-transform:uppercase;text-align:center;white-space:nowrap;
  box-shadow:var(--shadow-lift);
  -webkit-user-select:none;user-select:none;touch-action:manipulation;
  transition-property:background-color,scale;transition-duration:.18s,.15s;transition-timing-function:ease,ease-out;
}
@media (hover:hover){.btn:hover{background:var(--btn-bg-deep)}}
.btn:active{background:var(--btn-bg-deep);scale:.96}
.btn:focus-visible{outline-offset:3px;border-radius:4px}
.btn--sm{min-height:40px;padding:0 16px;font-size:.6875rem;letter-spacing:.22em;box-shadow:none}
.btn--panel{background:var(--panel-btn-bg);color:var(--panel-btn-fg);box-shadow:0 10px 30px -14px rgba(0,0,0,.5)}
.btn--ink{background:var(--btn-ink-bg);color:var(--btn-ink-fg)}
@media (hover:hover){.btn--ink:hover{background:var(--btn-ink-bg-deep)}}
.btn--ink:active{background:var(--btn-ink-bg-deep)}
@media (hover:hover){.btn--panel:hover{background:var(--panel-btn-bg-deep)}}
.btn--panel:active{background:var(--panel-btn-bg-deep)}
.btn--panel:focus-visible{outline-color:var(--panel-title)}

/* the quiet action: the italic, with its initial */
.quiet{
  position:relative;display:inline-flex;align-items:center;gap:8px;padding:8px 0;
  font-size:1.19rem;font-style:italic;line-height:1.3;color:var(--ink-2);cursor:pointer;
  background:none;border:0;
  transition-property:color,opacity,scale;transition-duration:.18s,.18s,.15s;
}
.quiet::after{content:"";position:absolute;inset:-4px -8px}
.quiet .ini{font-style:italic}
.quiet > span{display:inline-block}
@media (hover:hover){.quiet:hover{color:var(--ink)}}
.quiet:active{opacity:.6;scale:.96}
.quiet .ic{width:20px;height:20px;color:var(--ink-3)}

.ic{width:24px;height:24px;flex:0 0 auto;color:inherit}

/* the pair of stores. Side by side where there is room; one over the other on
   a phone, both as buttons (the user, 2026-10-05: the quiet "Also for" line that
   stood in for the other store on a phone went). */
.stores{display:flex;flex-wrap:wrap;align-items:center;gap:12px;max-width:31.5rem}
/* the two are one choice, so they are one width: side by side they share the
   row, and where the row is too short each takes a row of its own */
.stores .btn{flex:1 1 0;padding-inline:20px}
.stores .quiet{flex:0 0 auto}
/* on a phone they stand one over the other at the plate's full width, as the frames have them */
@media (max-width:519px){.stores{flex-direction:column;align-items:stretch;max-width:none}.stores .btn{width:100%}}

/* the one way in, wherever else it stands: a single button that leads to the
   stores below, or on a phone straight to the visitor's own */
.cta{display:flex;width:100%}
.cta .btn{min-width:16rem}
@media (max-width:479px){.cta .btn{width:100%}}

/* ── arrival ────────────────────────────────────────────────────────────────
   The app's own entrance: ten pixels of rise out of a little blur, staggered
   at ninety milliseconds. The hero plays it on load; everything below plays
   it once, when it is scrolled to. Without the script nothing is hidden. */
@keyframes riseIn{
  from{opacity:0;transform:translateY(10px);filter:blur(4px)}
  to{opacity:1;transform:none;filter:blur(0)}
}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.rise{animation:riseIn .62s var(--ease) both;animation-delay:calc(var(--i,0) * 90ms + 60ms)}
.js [data-reveal]{opacity:0;transform:translateY(10px);filter:blur(4px)}
.js [data-reveal].is-in{
  opacity:1;transform:none;filter:blur(0);
  transition-property:opacity,transform,filter;transition-duration:.62s;transition-timing-function:var(--ease);
  transition-delay:calc(var(--i,0) * 90ms);
}
@media (prefers-reduced-motion:reduce){
  .rise{animation:none}
  .js [data-reveal]{opacity:1;transform:none;filter:none}
}

/* ── masthead ───────────────────────────────────────────────────────────────
   It stays, with a drawn line under it, as the frames have it since the
   user's design of 2026-10-05. */
.head{position:sticky;top:0;z-index:50;background:var(--paper)}
.head::after{content:"";position:absolute;left:0;right:0;top:100%;height:1px;pointer-events:none;background:var(--rule-strong)}
.head-row{display:flex;align-items:center;justify-content:space-between;gap:20px;height:var(--head-h)}
.wordmark{font-size:1.625rem;font-weight:600;line-height:1;letter-spacing:.01em;color:var(--ink)}
.head-nav{display:none;align-items:center;gap:clamp(18px,2.7vw,36px);font-size:1.125rem;line-height:1.2}
.head-nav a{position:relative;padding:10px 0;color:var(--ink-2);white-space:nowrap;transition:color .18s ease}
/* where you are now takes the rubric */
.head-nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:4px;height:1px;background:var(--rubric);
  transform:scaleX(0);transform-origin:0 50%;transition:transform .3s var(--ease);
}
.head-nav a[aria-current="true"]{color:var(--ink)}
.head-nav a[aria-current="true"]::after{transform:scaleX(1)}
@media (hover:hover){.head-nav a:hover{color:var(--ink)}}
@media (min-width:920px){.head-nav{display:flex}}
/* the masthead's way in, on every screen since 2026-10-05 (the user: the bar at
   the foot went). It is a slot at the end of the row that holds no width while
   the hero's own button is on screen, so the sun and moon stand at the edge;
   once that button has scrolled away the slot opens, and "Get the app" slides
   in from the edge, moving the sun and moon aside. It closes again while the
   closing section is in view, so one way in is on screen at a time. */
.head-cta{display:grid;grid-template-columns:1fr;margin-left:var(--head-gap)}
/* the clip; the padding keeps the focus ring inside it */
.head-cta-in{min-width:0;overflow:hidden;padding:6px;margin:-6px}
.js .head-cta{
  grid-template-columns:0fr;margin-left:0;opacity:0;visibility:hidden;
  transition:grid-template-columns .42s var(--ease),margin-left .42s var(--ease),opacity .3s ease,visibility 0s linear .42s;
}
.js .head-cta.is-on{
  grid-template-columns:1fr;margin-left:var(--head-gap);opacity:1;visibility:visible;
  transition:grid-template-columns .42s var(--ease),margin-left .42s var(--ease),opacity .3s ease .08s,visibility 0s;
}
@media (prefers-reduced-motion:reduce){.js .head-cta,.js .head-cta.is-on{transition:none}}

/* THE PLATE'S TOP EDGE. The cross rests ON the rule: its crossbar and the
   rule are the same line, as on the app's home. Here it opens the page. */
.platetop{display:flex;align-items:flex-start;height:53px;color:var(--rubric)}
.platetop i{flex:1 1 0;min-width:0;height:1px;margin-top:17px;background:var(--rule-strong)}
.platetop span{flex:0 0 56px;display:flex;justify-content:center}
.platetop svg{width:32px;height:53px;opacity:.9}

/* ── hero ───────────────────────────────────────────────────────────────── */
.hero{display:flex;flex-direction:column;padding-block:48px;border-bottom:1px solid var(--rule-strong)}
.hero > .wrap{display:flex;flex-direction:column;justify-content:center;flex:1 1 auto}
.hero-grid{display:grid;gap:clamp(44px,7vw,72px);align-items:center}
/* the cross stands in the headline, between "the" and "Word" */
.h1-cross{display:inline-block;width:.43em;height:.7em;margin:0 .05em;vertical-align:-.08em;color:var(--rubric)}
/* the hero's lead, larger and on a short measure, as the frame sets it */
.lead--hero{font-size:clamp(1.3rem,.9rem + 1.6vw,2rem);line-height:1.2;letter-spacing:-.01em;text-wrap:balance}
.hero-copy{container-type:inline-size;display:flex;flex-direction:column;align-items:flex-start}
.hero-copy .eyebrow{margin-bottom:clamp(18px,2.4vw,26px)}
/* sized to its column, so "The Word answers." always holds one line */
@supports (font-size:1cqw){.hero-copy .display{font-size:clamp(2.5rem,12.3cqw,5.5rem)}}
.hero-copy .lead{margin-top:clamp(20px,2.6vw,30px);max-width:31rem}
@media (min-width:760px){.hero-copy .lead--hero{max-width:13.4em}}
/* the claim the rest of the page stands on, in the page's own ink */
.hero-copy .lead--claim{margin-top:.5em;color:var(--ink)}
.hero-copy .cta{margin-top:clamp(28px,3.4vw,40px)}
.hero-note{margin-top:16px;font-size:1.0625rem;font-style:italic;line-height:1.4;color:var(--ink-3)}
/* the phone, and Pause centred 22px under it (the phone carries 9px of margin for its shadow) */
.hero-device{display:flex;flex-direction:column;align-items:center;gap:13px;min-width:0}
.hero-device .device{--w:min(72vw,284px)}
@media (min-width:1000px){
  .hero{padding-block:36px;min-height:calc(100vh - var(--head-h) - 1px)}
  @supports (height:100svh){.hero{min-height:calc(100svh - var(--head-h) - 1px)}}
  .hero-grid{grid-template-columns:minmax(0,1.14fr) minmax(0,.86fr);gap:clamp(32px,5vw,80px)}
  .hero-device .device{--w:clamp(250px,min(27vw,calc((100vh - 232px) * .4613)),344px)}
  @supports (height:100svh){
    .hero-device .device{--w:clamp(250px,min(27vw,calc((100svh - 232px) * .4613)),344px)}
  }
}

/* the code for the other hand: a desktop visitor cannot install, but their
   phone is on the desk */
.scan{display:none;align-items:center;gap:16px;margin-top:clamp(26px,3vw,36px)}
.scan-code{
  flex:0 0 auto;width:92px;height:92px;padding:8px;border-radius:4px;
  background:#fffdf9;color:#2a261f;border:1px solid var(--rule);
}
.scan-code svg{width:100%;height:100%}
.scan p{max-width:13.5rem;font-size:1.0625rem;font-style:italic;line-height:1.35;color:var(--ink-3)}
@media (min-width:900px) and (hover:hover){.scan{display:flex}}
html[data-os] .scan{display:none}

/* ── the device ─────────────────────────────────────────────────────────────
   393 x 852, the iPhone the app is drawn on, at whatever width it is given:
   every measure inside is the app's own number times --px. The screen holds
   the film when there is one, and a stand-in drawn from the app until then. */
.device{--w:300px;--px:calc(var(--w) / 393);position:relative;flex:none;width:var(--w);margin:calc(12.5 * var(--px))}
.device-body{
  position:relative;width:100%;aspect-ratio:393 / 852;border-radius:calc(54 * var(--px));
  background:var(--paper);
  box-shadow:0 0 0 calc(11 * var(--px)) var(--bezel),0 0 0 calc(12.5 * var(--px)) var(--bezel-ring),var(--shadow-device);
}
.device-screen{position:absolute;inset:0;overflow:hidden;border-radius:inherit;background:var(--paper);isolation:isolate}
.device-island{
  position:absolute;z-index:6;top:calc(11 * var(--px));left:50%;transform:translateX(-50%);
  width:calc(125 * var(--px));height:calc(37 * var(--px));border-radius:calc(19 * var(--px));background:var(--bezel);
}
.device-homebar{
  position:absolute;z-index:6;left:50%;bottom:calc(8 * var(--px));transform:translateX(-50%);
  width:calc(139 * var(--px));height:calc(5 * var(--px));border-radius:calc(3 * var(--px));
  background:var(--ink);opacity:.34;
}
.device-video{position:absolute;inset:0;z-index:4;width:100%;height:100%;object-fit:cover;background:var(--paper)}
.device.has-video .demo,.device.has-video .device-homebar{display:none}
.device-ctl{font-size:1.0625rem}
.device-ctl [data-when]{display:none}
.device-ctl[data-paused="false"] [data-when="playing"],.device-ctl[data-paused="true"] [data-when="paused"]{display:inline}

/* THE STAND-IN: the app's own screens, and a walk through them in three acts:
   a question asked and answered; Spiritual Direction opened and a state of
   heart chosen; the Voices opened and a chapter read from the Library. */
.demo{position:absolute;inset:0;font-size:calc(19 * var(--px));line-height:1.35;color:var(--ink);-webkit-user-select:none;user-select:none}
.dm-scr{
  position:absolute;inset:0;display:flex;flex-direction:column;
  padding:calc(83 * var(--px)) calc(24 * var(--px)) calc(58 * var(--px));
  background:var(--paper);opacity:0;visibility:hidden;
  transition:opacity .18s ease-in,visibility 0s linear .18s;
}
.demo[data-state="home"] .dm-home,.demo[data-state="typing"] .dm-home,.demo[data-state="sent"] .dm-home,
.demo[data-state="seek"] .dm-seek,.demo[data-state="read"] .dm-read,
.demo[data-state="sd0"] [data-chooser="sd0"],.demo[data-state="sd1"] [data-chooser="sd1"],
.demo[data-state="ask"] .dm-ask,.demo[data-state="lib"] .dm-lib,.demo[data-state="ch"] .dm-ch{
  opacity:1;visibility:visible;transition:opacity .15s ease-out,visibility 0s;
}
.demo .ic{width:calc(24 * var(--px));height:calc(24 * var(--px))}
.demo .ini{font-weight:500;color:var(--rubric)}

/* home */
.dm-hdr{display:flex;align-items:center;justify-content:space-between;flex:0 0 auto;height:calc(24 * var(--px))}
.dm-wordmark{font-size:calc(24 * var(--px));font-weight:600;line-height:1;letter-spacing:.01em}
.dm-acts{display:flex;gap:calc(24 * var(--px));color:var(--ink-3)}
.dm-crossroom{position:relative;flex:0 1 calc(107 * var(--px));min-height:calc(32 * var(--px))}
.dm-cross{position:absolute;left:50%;bottom:calc(-30.7 * var(--px));transform:translateX(-50%);color:var(--rubric);opacity:.9}
.dm-cross svg{width:calc(26.67 * var(--px));height:calc(44.17 * var(--px))}
.dm-plate{position:relative;flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
.dm-plate::before,.dm-plate::after{content:"";position:absolute;top:0;bottom:calc(12 * var(--px));width:1px;background:var(--rule-strong)}
.dm-plate::before{left:0}
.dm-plate::after{right:0}
.dm-platetop,.dm-nav{display:flex;align-items:center;flex:0 0 auto}
.dm-platetop i,.dm-nav i{flex:1 1 0;min-width:0;height:1px;background:var(--rule-strong)}
.dm-platetop b{flex:0 0 calc(48 * var(--px))}
/* the three doors of the mode the app is in; switching modes crosses them */
.dm-doorsbox{position:relative;flex:1 1 auto;min-height:0}
.dm-doors{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;opacity:0;transition:opacity .25s ease}
.demo[data-mode="word"] [data-doors="word"],.demo[data-mode="voices"] [data-doors="voices"]{opacity:1}
.dm-door{flex:0 1 calc(84 * var(--px));min-height:calc(48 * var(--px));display:flex;align-items:center;justify-content:center;font-size:calc(20 * var(--px));line-height:1.2}
/* a tap: the tint behind the words, as the app presses */
.dm-door > span,.dm-opt > span{padding:calc(4 * var(--px)) calc(10 * var(--px));border-radius:calc(4 * var(--px));transition:background-color .15s ease}
.dm-door.is-pressed > span,.dm-opt.is-pressed > span,.dm-work.is-pressed{background:var(--rubric-tint)}
.dm-fleuron{flex:0 0 auto;display:flex;justify-content:center;height:calc(16 * var(--px));color:var(--rule-strong)}
.dm-fleuron svg{width:calc(140 * var(--px));height:calc(16 * var(--px))}
.dm-nav{gap:calc(20 * var(--px))}
.dm-navset{display:flex;align-items:center;gap:calc(24 * var(--px));color:var(--ink-4)}
.dm-navset > span{display:flex;border-radius:calc(4 * var(--px));transition:color .2s ease,background-color .2s ease,box-shadow .2s ease}
.demo[data-mode="word"] [data-nav="word"],.demo[data-mode="voices"] [data-nav="voices"],.dm-navset > .is-pressed{color:var(--rubric);background:var(--rubric-tint);box-shadow:0 0 0 calc(6 * var(--px)) var(--rubric-tint)}
.dm-navlabel{flex:0 0 auto;margin-top:calc(10 * var(--px));font-size:calc(20 * var(--px));font-weight:500;line-height:1.3;text-align:center;color:var(--rubric)}
.dm-navlabel span{display:none}
.demo[data-mode="word"] [data-label="word"],.demo[data-mode="voices"] [data-label="voices"]{display:inline}
.dm-field{flex:0 0 auto;display:flex;align-items:flex-end;margin-top:calc(57 * var(--px));padding-bottom:calc(12 * var(--px));border-bottom:1px solid var(--rule);transition:border-color .22s ease}
.demo[data-state="typing"] .dm-field,.demo[data-state="sent"] .dm-field{border-bottom-color:var(--rubric)}
.dm-field-text{position:relative;flex:1 1 auto;min-width:0;min-height:calc(26 * var(--px))}
.dm-ph{color:var(--ink-2)}
.dm-typed{color:var(--ink)}
.demo[data-state="typing"] .dm-ph,.demo[data-state="sent"] .dm-ph{display:none}
.dm-caret{
  display:inline-block;width:calc(2 * var(--px));height:calc(22 * var(--px));margin:0 calc(1 * var(--px)) calc(-4 * var(--px)) 0;
  border-radius:1px;background:var(--rubric);animation:caretBlink 1.7s ease-in-out infinite;
}
.demo[data-state="typing"] .dm-caret{animation:none;margin-left:calc(1 * var(--px))}
@keyframes caretBlink{0%,100%{opacity:1}50%{opacity:.18}}
.dm-trail{position:relative;flex:0 0 auto;width:calc(36 * var(--px));height:calc(26 * var(--px));margin-left:calc(12 * var(--px))}
.dm-trail > *{
  position:absolute;inset:calc(-5 * var(--px)) 0;display:flex;align-items:center;justify-content:center;
  transition-property:opacity,scale,filter;transition-duration:.3s;transition-timing-function:var(--ease);
}
.dm-mic{color:var(--ink-3)}
.dm-send{background:var(--btn-bg);color:var(--btn-fg);border-radius:calc(4 * var(--px));box-shadow:var(--shadow-lift);opacity:0;scale:.25;filter:blur(4px)}
.demo[data-state="typing"] .dm-send,.demo[data-state="sent"] .dm-send{opacity:1;scale:1;filter:blur(0)}
.demo[data-state="typing"] .dm-mic,.demo[data-state="sent"] .dm-mic{opacity:0;scale:.25;filter:blur(4px)}
.demo[data-state="sent"] .dm-send{scale:.92;background:var(--btn-bg-deep)}

/* seeking */
.dm-bar{display:flex;align-items:center;justify-content:space-between;flex:0 0 auto;height:calc(24 * var(--px));color:var(--ink-2)}
.dm-bar span{display:flex;gap:calc(20 * var(--px))}
.dm-seekmid{flex:1 1 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(20 * var(--px))}
.dm-seekmid p{font-size:calc(20 * var(--px));font-weight:500;line-height:1.3}
.dm-seekbar{width:calc(64 * var(--px));height:calc(2 * var(--px));border-radius:2px;background:var(--rule);overflow:hidden}
.dm-seekbar i{display:block;width:40%;height:100%;border-radius:2px;background:var(--rubric)}
.demo[data-state="seek"] .dm-seekbar i{animation:seekRun 1.15s cubic-bezier(.5,0,.5,1) infinite}
@keyframes seekRun{0%{transform:translateX(-110%)}100%{transform:translateX(280%)}}

/* THE READING, as the app opens it: on the words. What was asked is a scroll
   above the first line and is not on the screen; the first line stands at
   132, the rail at 139 beside it, and the way on to the next passage is at
   the foot - the fleuron at 733, the hint under it, 22 above the device's. */
.dm-read{padding-bottom:calc(22 * var(--px))}
.dm-col{position:relative;flex:1 1 auto;min-height:0;width:calc(270 * var(--px));margin-inline:auto;display:flex;flex-direction:column}
.dm-word{position:relative;flex:0 0 auto;display:flex;flex-direction:column;gap:calc(26 * var(--px));margin-top:calc(25 * var(--px))}
.dm-block{display:flex;flex-direction:column;gap:calc(12 * var(--px))}
.dm-scripture{font-size:calc(19 * var(--px));font-weight:500;line-height:1.46;text-align:justify;-webkit-hyphens:auto;hyphens:auto}
.dm-scripture::first-letter{font-size:calc(36 * var(--px));line-height:0;color:var(--rubric)}
.dm-cite{align-self:flex-start;font-size:calc(15.5 * var(--px));font-style:italic;line-height:1.6;color:var(--lapis);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:.5px}
.dm-vx{display:grid;grid-template-columns:minmax(0,1fr) calc(20 * var(--px));column-gap:calc(12 * var(--px));row-gap:calc(3 * var(--px));padding:calc(13 * var(--px)) 0 calc(12 * var(--px));border-top:1px solid var(--rule)}
.dm-vx:last-child{padding-bottom:0}
.dm-vx-t{font-size:calc(15 * var(--px));line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.dm-vx-n{grid-column:1;font-size:calc(15 * var(--px));font-style:italic;line-height:1.56;color:var(--ink-3)}
.dm-vx .ic{grid-column:2;grid-row:1;width:calc(20 * var(--px));height:calc(20 * var(--px));color:var(--ink-2)}
.dm-rail{position:absolute;top:calc(7 * var(--px));right:calc(-39.5 * var(--px));width:calc(4 * var(--px));display:flex;flex-direction:column;gap:calc(8 * var(--px))}
.dm-rail i{height:calc(60 * var(--px));border-radius:2px;background:var(--rule-strong)}
.dm-rail i:first-child{background:var(--rubric)}
.dm-end{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:calc(40 * var(--px));margin-top:auto;padding-top:calc(36 * var(--px))}
.dm-end .dm-fleuron{width:100%}
.dm-hint{display:flex;flex-direction:column;align-items:center;gap:calc(6 * var(--px));font-size:calc(15 * var(--px));line-height:1;color:var(--rubric);white-space:nowrap}
.dm-hint .ic{width:calc(20 * var(--px));height:calc(20 * var(--px));color:var(--rubric)}
/* the reading's arrival, as the app plays it: the passage, where it is from,
   the voices, then the way on - and the rail last, by itself */
@keyframes revealDown{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.demo.is-live[data-state="read"] :is(.dm-scripture,.dm-cite,.dm-vxs,.dm-end,.dm-rail){animation:revealDown 2s var(--ease) backwards}
.demo.is-live[data-state="read"] .dm-cite{animation-delay:.2s}
.demo.is-live[data-state="read"] .dm-vxs{animation-delay:.4s}
.demo.is-live[data-state="read"] .dm-end{animation-delay:.6s}
.demo.is-live[data-state="read"] .dm-rail{animation-name:fadeIn;animation-timing-function:ease;animation-delay:.8s}

/* THE CHOOSERS, as the app lists a choice: an eyebrow over a rule, the choices
   down the middle with a leaf between, the tailpiece, and the field for a
   choice of one's own at the foot */
.dm-eyebrow{flex:0 0 auto;margin-top:calc(34 * var(--px));font-family:var(--sans);font-size:calc(11 * var(--px));font-weight:600;line-height:1.3;letter-spacing:.24em;text-transform:uppercase;text-align:center;color:var(--ink-3)}
.dm-rule{flex:0 0 auto;display:block;height:1px;margin-top:calc(16 * var(--px));background:var(--rule)}
.dm-opts{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;justify-content:center;padding-block:calc(12 * var(--px))}
.dm-opt{flex:0 1 calc(72 * var(--px));min-height:calc(44 * var(--px));display:flex;align-items:center;justify-content:center;font-size:calc(20 * var(--px));line-height:1.2}
.dm-tail{flex:0 0 auto;display:flex;justify-content:center;height:calc(16 * var(--px));color:var(--rule-strong)}
.dm-tail svg{width:calc(40 * var(--px));height:calc(16 * var(--px))}
.dm-chooser .dm-field,.dm-ask .dm-field{margin-top:calc(26 * var(--px))}
.dm-field--bar .dm-ph{color:var(--ink-2)}
.dm-fieldbar{flex:0 0 auto;width:calc(2 * var(--px));height:calc(22 * var(--px));margin:0 calc(10 * var(--px)) calc(2 * var(--px)) 0;border-radius:1px;background:var(--rubric)}
.dm-ask .dm-q{flex:0 0 auto;margin-top:calc(70 * var(--px));font-size:calc(40 * var(--px));font-weight:600;line-height:1.1;letter-spacing:-.01em;text-wrap:balance}
.dm-askacts{display:flex;justify-content:space-between;align-items:center;margin-top:calc(24 * var(--px));font-size:calc(17 * var(--px));font-style:italic;line-height:1.3;color:var(--ink-3)}
.dm-askacts > span{display:flex;align-items:center;gap:calc(8 * var(--px));padding:calc(4 * var(--px)) calc(8 * var(--px));margin-inline:calc(-8 * var(--px));border-radius:calc(4 * var(--px));transition:background-color .15s ease,color .15s ease}
.dm-askacts .ic{width:calc(16 * var(--px));height:calc(16 * var(--px))}
.dm-askacts [data-skip].is-pressed{background:var(--rubric-tint);color:var(--rubric)}
.dm-ask .dm-field{margin-top:auto}

/* THE LIBRARY, as the app keeps it: the rubric panel with what is being read
   now, the teachers in a strip, and every work under them. The column scrolls
   to show how far the list goes. */
.dm-lib{padding:0;overflow:hidden}
.dm-libcol{display:flex;flex-direction:column;translate:0 calc(var(--lib-scroll,0) * var(--px));transition:translate 2.4s var(--ease)}
.dm-libpanel{flex:0 0 auto;padding:calc(70 * var(--px)) calc(12 * var(--px)) calc(12 * var(--px));background:var(--panel-bg);color:var(--panel-title)}
.dm-libframe{position:relative;border:1px solid var(--panel-line);padding:calc(26 * var(--px)) calc(12 * var(--px)) calc(12 * var(--px))}
.dm-libhead{position:absolute;top:calc(-8 * var(--px));left:50%;translate:-50% 0;padding:0 calc(8 * var(--px));background:var(--panel-bg);font-family:var(--sans);font-size:calc(11 * var(--px));font-weight:600;line-height:1.3;letter-spacing:.24em;text-transform:uppercase;color:var(--panel-head)}
.dm-libback{color:var(--panel-head)}
.dm-libnow{margin-top:calc(18 * var(--px));font-family:var(--sans);font-size:calc(11 * var(--px));font-weight:600;line-height:1.3;letter-spacing:.24em;text-transform:uppercase;color:var(--panel-title)}
.dm-now{display:grid;grid-template-columns:calc(52 * var(--px)) minmax(0,1fr);column-gap:calc(16 * var(--px));margin-top:calc(14 * var(--px));padding:calc(14 * var(--px)) calc(16 * var(--px)) calc(16 * var(--px)) calc(14 * var(--px));border-radius:calc(4 * var(--px));background:var(--paper-raised);color:var(--ink)}
.dm-now img{width:calc(52 * var(--px));height:calc(72 * var(--px));object-fit:cover;border-radius:calc(2 * var(--px))}
.dm-now-body{display:flex;flex-direction:column;justify-content:center;gap:calc(8 * var(--px));min-width:0}
.dm-now-row{display:flex;justify-content:space-between;align-items:baseline;gap:calc(12 * var(--px))}
.dm-now-t{font-size:calc(22 * var(--px));line-height:1.2}
.dm-now-go{font-size:calc(17 * var(--px));font-style:italic;color:var(--rubric)}
.dm-now-m{font-family:var(--sans);font-size:calc(11 * var(--px));font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--lapis)}
.dm-now-bar{display:block;height:calc(3 * var(--px));border-radius:2px;background:var(--rule)}
.dm-now-bar i{display:block;width:23%;height:100%;border-radius:2px;background:var(--rubric)}
.dm-strip{flex:0 0 auto;display:flex;gap:calc(18 * var(--px));padding:calc(30 * var(--px)) 0 0 calc(24 * var(--px));overflow:hidden}
.dm-chip{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:calc(10 * var(--px));width:calc(62 * var(--px));font-size:calc(15 * var(--px));line-height:1.2;color:var(--ink-2);white-space:nowrap}
.dm-chip img{width:calc(62 * var(--px));height:calc(62 * var(--px));object-fit:cover;border-radius:calc(4 * var(--px))}
.dm-chipbox{display:flex;align-items:center;justify-content:center;width:calc(62 * var(--px));height:calc(62 * var(--px));border:1px solid var(--rubric);border-radius:calc(4 * var(--px));color:var(--rubric)}
.dm-chip--all{color:var(--ink)}
.dm-works{flex:0 0 auto;display:flex;flex-direction:column;padding:calc(20 * var(--px)) calc(24 * var(--px)) 0}
.dm-work{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:calc(16 * var(--px));align-items:center;padding:calc(20 * var(--px)) calc(8 * var(--px));margin-inline:calc(-8 * var(--px));border-bottom:1px solid var(--rule);border-radius:calc(4 * var(--px));transition:background-color .15s ease}
.dm-work-body{display:flex;flex-direction:column;gap:calc(4 * var(--px));min-width:0}
.dm-work-t{font-size:calc(20 * var(--px));line-height:1.2}
.dm-work-d{font-size:calc(15 * var(--px));font-style:italic;line-height:1.4;color:var(--ink-3)}
.dm-work-n{font-family:var(--sans);font-size:calc(11 * var(--px));font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--lapis);white-space:nowrap}

/* A CHAPTER, as the app opens a daily reading: the work, the day, the words
   cut to fit with Expand, the tailpiece, and the way on. */
.dm-chcol{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;width:calc(270 * var(--px));margin-inline:auto}
.dm-ch-title{margin-top:calc(44 * var(--px));font-size:calc(22 * var(--px));line-height:1.25;text-align:center;text-wrap:balance}
.dm-ch-eyebrow{margin-top:calc(14 * var(--px));font-family:var(--sans);font-size:calc(11 * var(--px));font-weight:600;line-height:1.6;letter-spacing:.24em;text-transform:uppercase;text-align:center;color:var(--rubric)}
.dm-ch-p{margin-top:calc(20 * var(--px));font-size:calc(19 * var(--px));line-height:1.46;text-wrap:pretty}
.dm-ch-p + .dm-ch-p{margin-top:calc(12 * var(--px))}
.dm-ch-cite{display:flex;justify-content:space-between;align-items:flex-end;gap:calc(16 * var(--px));margin-top:calc(26 * var(--px));font-size:calc(15.5 * var(--px));font-style:italic;line-height:1.5;color:var(--lapis)}
.dm-ch-cite > span:first-child{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:.5px}
.dm-ch-expand{display:flex;align-items:center;gap:calc(4 * var(--px));color:var(--ink-2);white-space:nowrap}
.dm-ch-expand .ic{width:calc(18 * var(--px));height:calc(18 * var(--px))}
.dm-ch .dm-tail{margin-top:calc(34 * var(--px))}
.dm-ch-next{display:flex;align-items:center;justify-content:center;height:calc(52 * var(--px));margin-top:calc(44 * var(--px));border-radius:calc(4 * var(--px));background:var(--btn-bg);color:var(--btn-fg);font-family:var(--sans);font-size:calc(12 * var(--px));font-weight:600;letter-spacing:.2em;text-transform:uppercase;box-shadow:var(--shadow-lift)}
.demo.is-live[data-state="ch"] :is(.dm-ch-title,.dm-ch-eyebrow,.dm-ch-p,.dm-ch-cite,.dm-ch .dm-tail,.dm-ch-next){animation:revealDown 1.6s var(--ease) backwards}
.demo.is-live[data-state="ch"] .dm-ch-eyebrow{animation-delay:.1s}
.demo.is-live[data-state="ch"] .dm-ch-p{animation-delay:.2s}
.demo.is-live[data-state="ch"] .dm-ch-p + .dm-ch-p{animation-delay:.3s}
.demo.is-live[data-state="ch"] .dm-ch-cite{animation-delay:.4s}
.demo.is-live[data-state="ch"] .dm-ch .dm-tail{animation-delay:.5s}
.demo.is-live[data-state="ch"] .dm-ch-next{animation-delay:.6s}
@media (prefers-reduced-motion:reduce){
  .dm-caret,.dm-seekbar i{animation:none !important}
  .demo.is-live[data-state="read"] :is(.dm-scripture,.dm-cite,.dm-vxs,.dm-end,.dm-rail),
  .demo.is-live[data-state="ch"] :is(.dm-ch-title,.dm-ch-eyebrow,.dm-ch-p,.dm-ch-cite,.dm-ch .dm-tail,.dm-ch-next){animation:none}
  .dm-libcol{transition:none}
}

/* ── sections ───────────────────────────────────────────────────────────── */
.section{padding-block:var(--section)}
.section-head{display:flex;flex-direction:column;align-items:flex-start;gap:18px;max-width:43rem}
.section-head--center{align-items:center;text-align:center;margin-inline:auto}
.section-head .lead{margin-top:4px}
/* a rule that breaks for a leaf: the page's paragraph mark */
.break{display:flex;justify-content:center}

/* why */
.why-col{max-width:49rem;margin-inline:auto;display:flex;flex-direction:column;align-items:center;gap:28px;text-align:center}
.why-say{
  font-size:clamp(1.62rem,1.18rem + 1.95vw,2.5rem);font-weight:400;line-height:1.2;letter-spacing:-.01em;
  color:var(--ink);text-wrap:balance;
}
.why-col .copy{max-width:37rem;font-size:clamp(1.25rem,1.18rem + .3vw,1.375rem);line-height:1.46}

/* how */
.how-grid{display:grid;gap:clamp(44px,6vw,80px);align-items:start}
@media (min-width:960px){.how-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.how-ask,.how-copy{display:flex;flex-direction:column;align-items:flex-start;gap:22px}
.how-ask .lead,.how-copy .lead{margin:0}
/* the app's claim in the rubric, as the frame sets it */
.h2--rubric{color:var(--rubric)}
.steps{display:grid;gap:20px;margin-top:38px}
.step{display:grid;grid-template-columns:2.5rem minmax(0,1fr);column-gap:4px;align-items:baseline}
.step-n{font-size:1.19rem;font-style:italic;color:var(--ink-3);font-variant-numeric:oldstyle-nums}
.step h3{font-size:1.44rem;font-weight:500;line-height:1.2;color:var(--ink)}
.step p{grid-column:2;margin-top:4px;font-size:1.19rem;line-height:1.42;color:var(--ink-2);text-wrap:pretty}
.how-cta{display:flex;flex-direction:column;align-items:center;gap:18px;margin-top:clamp(44px,6vw,72px);text-align:center}
.how-cta p{font-size:clamp(1.5rem,1.3rem + .9vw,1.9rem);font-weight:500;line-height:1.2;color:var(--ink)}
.how-cta .cta{justify-content:center}

.contrast{display:flex;flex-direction:column}
.contrast-row{display:grid;gap:6px 24px;padding:22px 0;border-top:1px solid var(--rule)}
.contrast-row:last-child{border-bottom:1px solid var(--rule)}
@media (min-width:560px){.contrast-row{grid-template-columns:8.6rem minmax(0,1fr);align-items:baseline}}
.contrast-who{font-family:var(--sans);font-size:.6875rem;font-weight:500;line-height:1.3;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-3)}
.contrast-what{font-size:clamp(1.25rem,1.16rem + .4vw,1.44rem);line-height:1.32;color:var(--ink-3);text-wrap:pretty}
.contrast-row--us{border-top-color:var(--rule-strong)}
.contrast-row--us .contrast-who{color:var(--rubric);font-weight:600}
.contrast-row--us .contrast-what{font-size:clamp(1.44rem,1.28rem + .7vw,1.75rem);font-weight:500;line-height:1.24;color:var(--ink)}
.gains{display:grid;gap:40px clamp(28px,4vw,56px);margin-top:clamp(56px,7.5vw,96px)}
@media (min-width:620px){.gains{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:960px){.gains{grid-template-columns:repeat(3,minmax(0,1fr))}}
.gain{display:flex;flex-direction:column;gap:10px;padding-top:22px;border-top:1px solid var(--rule-strong)}
/* each advantage carries one of the marks at the end of its title line */
.gain-h{display:flex;align-items:center;justify-content:space-between;gap:10px}
.gain-mark{flex:0 0 auto;color:var(--rule-strong)}
.gain p{font-size:1.19rem;line-height:1.45;color:var(--ink-2);text-wrap:pretty}

/* THE PLATES. The app's home is a plate whose top edge is broken by what is
   mounted on it. Three of them here, one for each source. */
.plates{display:grid;gap:60px clamp(20px,2.6vw,32px);margin-top:clamp(64px,8vw,92px)}
@media (min-width:900px){.plates{grid-template-columns:repeat(3,minmax(0,1fr))}}
.plate{
  position:relative;display:flex;flex-direction:column;padding:38px clamp(18px,2.4vw,28px) 30px;
  border:1px solid var(--rule-strong);border-top:0;border-radius:0 0 2px 2px;
}
.plate-top{position:absolute;left:-1px;right:-1px;top:0;display:flex;align-items:center;transform:translateY(-50%)}
.plate-top i{flex:1 1 0;height:1px;background:var(--rule-strong)}
.plate-top span{flex:0 0 auto;display:flex;padding-inline:14px;color:var(--rubric)}
.plate-top .ic{width:28px;height:28px}
.plate-name{font-size:1.6rem;font-weight:500;line-height:1.2;text-align:center;color:var(--ink)}
.doors{display:flex;flex-direction:column;margin-top:14px}
.door{display:flex;flex-direction:column;align-items:center;gap:6px;padding:22px 0;text-align:center}
.door:last-child{padding-bottom:6px}
.door h4{font-size:1.3rem;font-weight:500;line-height:1.2;color:var(--ink)}
.door p{max-width:19rem;font-size:1.0625rem;line-height:1.42;color:var(--ink-3);text-wrap:pretty}

/* the voices */
.voices-h{max-width:none}
.voices-grid{display:grid;gap:clamp(44px,6vw,86px);align-items:start;margin-top:clamp(36px,4vw,56px)}
@media (min-width:960px){.voices-grid{grid-template-columns:minmax(0,.415fr) minmax(0,.585fr)}}
.voices-copy .copy{max-width:27rem;font-size:1.25rem;line-height:1.5}
.voices-copy .copy + .copy{margin-top:22px}
.faces{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;max-width:26rem;margin-top:38px}
.face{display:flex;flex-direction:column;align-items:center;gap:10px;min-width:0}
.face img{width:min(100%,64px);height:auto;aspect-ratio:1;border-radius:4px;object-fit:cover;background:var(--paper-raised);outline:1px solid var(--img-outline);outline-offset:-1px}
.face span{font-size:.94rem;font-style:italic;line-height:1.2;text-align:center;color:var(--ink-3)}
.roster{display:grid;column-gap:clamp(28px,4vw,48px);border-top:1px solid var(--rule)}
@media (min-width:520px){.roster{grid-template-columns:repeat(2,minmax(0,1fr))}}
.roster li{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding:12px 0;border-bottom:1px solid var(--rule)}
/* the last row carries no rule under it */
.roster li:last-child{border-bottom:0}
@media (min-width:520px){.roster li:nth-last-child(2){border-bottom:0}}
.roster-name{font-size:1.25rem;line-height:1.25;color:var(--ink)}
.roster-date{flex:0 0 auto;font-size:1rem;line-height:1.25;color:var(--ink-3);font-variant-numeric:oldstyle-nums;white-space:nowrap}

/* the first readers */
.quotes{display:grid;gap:44px clamp(28px,4vw,52px);margin-top:clamp(44px,6vw,68px)}
@media (min-width:900px){.quotes{grid-template-columns:repeat(3,minmax(0,1fr))}}
.quote{display:flex;flex-direction:column;gap:18px;padding-top:24px;border-top:1px solid var(--rule-strong)}
.quote p{font-size:1.25rem;line-height:1.48;color:var(--ink);text-wrap:pretty;text-indent:-.42em}
.quote footer{margin-top:auto;font-size:1.0625rem;font-style:italic;color:var(--lapis)}

/* questions */
.faq{max-width:49rem;margin:clamp(36px,5vw,56px) auto 0}
.faq details{border-bottom:1px solid var(--rule)}
.faq details:first-of-type{border-top:1px solid var(--rule)}
.faq summary{
  display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 2px;cursor:pointer;list-style:none;
  font-size:clamp(1.3rem,1.22rem + .35vw,1.44rem);font-weight:500;line-height:1.25;color:var(--ink);
  transition:color .18s ease;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary .ic{width:20px;height:20px;color:var(--ink-2);transition:rotate .3s var(--ease)}
.faq details[open] summary .ic{rotate:180deg}
.faq summary:focus-visible{outline-offset:-2px}
.faq-a{padding:0 44px 26px 2px;font-size:1.22rem;line-height:1.5;color:var(--ink-2);text-wrap:pretty}
@supports (interpolate-size:allow-keywords){
  .faq details{interpolate-size:allow-keywords}
  .faq details::details-content{height:0;overflow:clip;transition:height .34s var(--ease),content-visibility .34s allow-discrete}
  .faq details[open]::details-content{height:auto}
  @media (prefers-reduced-motion:reduce){.faq details::details-content{transition:none}}
}

/* THE RUBRIC PLATE. In the app it carries the most prominent thing on the
   screen; here it carries the way in. Its header rides on the outline, and
   the outline recedes into the plate rather than ruling it. */
.panel{background:var(--panel-bg);color:var(--panel-title);padding:96px 48px}
@media (min-width:760px){.panel{padding:20px}}
.panel-frame{
  position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:clamp(60px,8vw,104px) clamp(18px,6vw,72px) clamp(52px,7vw,88px);
  border:1px solid var(--panel-line);border-radius:2px;
}
.panel-head{
  position:absolute;top:0;left:50%;transform:translate(-50%,-50%);padding:0 12px;background:var(--panel-bg);white-space:nowrap;
  font-family:var(--sans);font-size:.6875rem;font-weight:500;line-height:1;letter-spacing:.24em;text-transform:uppercase;color:var(--panel-head);
}
.panel-cross{color:var(--panel-figure)}
.panel-cross svg{width:30px;height:50px}
.panel-verse{
  margin-top:clamp(28px,4vw,44px);max-width:21ch;
  font-size:clamp(1.85rem,1.18rem + 3vw,3.3rem);font-weight:500;line-height:1.14;letter-spacing:-.014em;text-wrap:balance;
}
@media (min-width:780px){
  .panel-verse{max-width:none;font-size:clamp(2.1rem,.9rem + 2.9vw,3.2rem)}
  .panel-verse span{display:block}
}
.panel-cite{margin-top:18px;font-size:1.125rem;font-style:italic;color:var(--panel-head);font-variant-numeric:oldstyle-nums}
.panel .stores{justify-content:center;margin-top:clamp(36px,5vw,52px);width:100%}
.panel .quiet{color:var(--panel-text)}
.panel .quiet .ini{color:inherit;font-weight:600}
.panel-offer{margin-top:22px;font-size:1.19rem;line-height:1.4;color:var(--panel-text);text-wrap:balance}
.panel .scan{margin-top:clamp(34px,4vw,46px);text-align:left}
.panel .scan p{color:var(--panel-text)}
.panel .scan-code{border-color:transparent}
.panel :focus-visible{outline-color:var(--panel-title)}

/* ── foot ───────────────────────────────────────────────────────────────── */
.foot{padding-block:56px;background:var(--foot-bg);color:var(--foot-text)}
@media (min-width:760px){.foot{padding-block:64px 48px}}
.foot .wordmark{color:var(--foot-title)}
.foot .tailpiece{color:var(--foot-mark)}
.foot :focus-visible{outline-color:var(--foot-title)}
.foot-row{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:28px 48px}
.foot-brand p{margin-top:8px;font-size:1.0625rem;font-style:italic;color:var(--foot-text)}
.foot-links{display:flex;flex-wrap:wrap;gap:6px 30px;font-size:1.125rem;line-height:1.3}
.foot-links a{position:relative;padding:8px 0;color:var(--foot-text);transition:color .18s ease}
.foot-links .ini{color:var(--foot-title)}
@media (hover:hover){.foot-links a:hover{color:var(--foot-title)}}
/* the colophon: the page ends as a chapter does, tapering to the tailpiece,
   and the line under it says who made it */
.foot-base{
  display:flex;flex-direction:column;align-items:center;gap:18px;
  margin-top:clamp(34px,4.6vw,52px);text-align:center;
}
.foot-legal{max-width:46rem;font-family:var(--sans);font-size:.75rem;font-weight:500;line-height:1.65;letter-spacing:.01em;color:var(--foot-text);text-wrap:balance}
/* morning and evening: the app's two papers, and the switch between them,
   in the masthead as two plain icons; the paper you are on takes the rubric */
.theme{display:none;align-items:center}
.js .theme{display:inline-flex}
.theme button{
  -webkit-appearance:none;appearance:none;background:none;border:0;padding:0;cursor:pointer;position:relative;
  display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:4px;
  color:var(--rule-strong);transition-property:color,scale;transition-duration:.18s,.15s;transition-timing-function:ease,ease-out;
}
/* filled shapes rather than thin strokes, so they stay sharp at 16px; drawn
   on a 24 grid, as on oklch.fyi, the user's choice; site.js nudges the row
   onto the pixel grid */
.theme button svg{width:16px;height:16px}
.theme button::after{content:"";position:absolute;inset:-4px}
.theme button[aria-pressed="true"]{color:var(--rubric)}
@media (hover:hover){.theme button:not([aria-pressed="true"]):hover{color:var(--ink-2)}}
.theme button:active{scale:.96}

/* the stagger: a place in the order, for .rise and [data-reveal] alike */
.d1{--i:1}.d2{--i:2}.d3{--i:3}.d4{--i:4}.d5{--i:5}.d6{--i:6}

/* ── the other pages ────────────────────────────────────────────────────────
   Privacy, Terms, For partners, and the page that is not there. The same
   paper, type and furnishing; nothing here that the landing does not have. */
.head-side{--head-gap:clamp(14px,2.4vw,28px);display:flex;align-items:center;gap:var(--head-gap)}
.head-side--cta{gap:0}
.head-side .quiet{font-size:1.125rem}

/* a document: one column, set to be read */
.doc{padding-block:clamp(28px,5vw,64px) var(--section)}
.doc-col{max-width:44rem;margin-inline:auto}
.doc-head{display:flex;flex-direction:column;gap:16px;padding-bottom:clamp(28px,4vw,40px);margin-bottom:clamp(8px,2vw,20px);border-bottom:1px solid var(--rule)}
.doc-body h2{margin-top:2.1em;font-size:1.5rem;font-weight:500;line-height:1.25;letter-spacing:-.004em;color:var(--ink);text-wrap:balance}
.doc-body p,.doc-body li{margin-top:.8em;font-size:1.19rem;line-height:1.56;color:var(--ink-2);text-wrap:pretty}
.doc-body ul{margin-top:.2em;padding-left:1.25em;list-style:disc}
.doc-body li{padding-left:.2em}
.doc-body li::marker{color:var(--rule-strong)}
.doc-body strong{font-weight:500;color:var(--ink)}
.doc-body a,.prose-link{
  color:var(--ink);text-decoration:underline;text-decoration-color:var(--rubric);
  text-decoration-thickness:1px;text-underline-offset:3px;transition:color .18s ease;
}
@media (hover:hover){.doc-body a:hover,.prose-link:hover{color:var(--rubric)}}
.doc .tailpiece{margin-top:clamp(48px,7vw,80px)}

/* for partners */
.p-hero{padding-block:clamp(22px,3.4vw,40px) clamp(56px,8vw,104px)}
.p-hero-col{display:flex;flex-direction:column;align-items:flex-start;max-width:47rem;margin-top:clamp(28px,5vw,60px)}
.p-hero-col .display{margin-top:clamp(18px,2.4vw,26px);font-size:clamp(2.8rem,1.1rem + 7.4vw,5.6rem)}
.p-hero-col .lead{margin-top:clamp(22px,2.8vw,32px);max-width:39rem}
.p-hero-col .btn{margin-top:clamp(28px,3.4vw,40px)}
.p-wide{max-width:50rem}
.p-grid{display:grid;gap:clamp(44px,6vw,88px);align-items:start;margin-top:clamp(40px,5vw,60px)}
@media (min-width:960px){.p-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}}
.p-grid .steps{margin-top:0;gap:28px}
.p-grid .step{grid-template-columns:4.6rem minmax(0,1fr)}
.p-grid .step-n{font-family:var(--sans);font-size:.6875rem;font-style:normal;font-weight:500;letter-spacing:.24em;text-transform:uppercase}
.p-tech{
  display:flex;flex-direction:column;gap:16px;padding:clamp(26px,3.6vw,40px);
  background:var(--paper-raised);border:1px solid var(--rule);border-radius:4px;box-shadow:var(--shadow-lift);
}
.p-tech p:not(.eyebrow){font-size:1.19rem;line-height:1.5;color:var(--ink-2);text-wrap:pretty}
.p-tech strong{font-weight:500;color:var(--ink)}
/* a rule drawn around content is 2 */
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.tag{
  padding:9px 12px;border:1px solid var(--rule-strong);border-radius:2px;
  font-family:var(--sans);font-size:.6875rem;font-weight:500;line-height:1;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2);
}
.gains--two{margin-top:clamp(40px,5vw,60px)}
@media (min-width:960px){.gains--two{grid-template-columns:repeat(2,minmax(0,1fr))}}
.gains--flush{margin-top:clamp(40px,5vw,60px)}
.p-team{display:flex;flex-direction:column;gap:18px;max-width:46rem;margin-top:clamp(28px,4vw,40px)}
.p-team p{font-size:1.22rem;line-height:1.55;color:var(--ink-2);text-wrap:pretty}
.p-team strong{font-weight:500;color:var(--ink)}
.panel-title{
  margin-top:clamp(28px,4vw,44px);max-width:24ch;font-size:clamp(1.85rem,1.2rem + 2.7vw,3rem);font-weight:500;line-height:1.14;letter-spacing:-.014em;text-wrap:balance;
}
.panel-copy{max-width:39rem;margin-top:22px;font-size:1.22rem;line-height:1.5;color:var(--panel-text);text-wrap:pretty}
.panel .btn{margin-top:clamp(30px,4vw,40px)}
.panel .stores .btn{margin-top:0}
.panel-mail{margin-top:20px;font-size:1.125rem;font-style:italic;color:var(--panel-head)}
.panel-mail a{text-decoration:underline;text-decoration-thickness:.5px;text-underline-offset:3px}
.section--tight{padding-top:0}

/* the request: a sheet of the raised paper over the page */
.sheet{
  width:min(100% - 32px,30rem);max-height:calc(100dvh - 32px);margin:auto;padding:0;overflow:auto;
  background:var(--paper-raised);color:var(--ink);border:1px solid var(--rule);border-radius:4px;box-shadow:var(--shadow-float);
}
.sheet::backdrop{background:rgba(42,38,31,.42)}
.sheet[open]{animation:riseIn .34s var(--ease) both}
.sheet-body{position:relative;display:flex;flex-direction:column;padding:clamp(28px,5vw,40px)}
.sheet-x{
  -webkit-appearance:none;appearance:none;background:none;border:0;cursor:pointer;
  position:absolute;top:14px;right:14px;display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:4px;color:var(--ink-2);
  transition-property:opacity,scale;transition-duration:.18s,.15s;
}
.sheet-x:active{opacity:.55;scale:.96}
.sheet h2{padding-right:36px;font-size:1.75rem;font-weight:500;line-height:1.2;color:var(--ink)}
.sheet-sub{margin-top:8px;font-size:1.125rem;line-height:1.45;color:var(--ink-2)}
.fields{display:flex;flex-direction:column;gap:22px;margin-top:26px}
/* THE FIELD, as the app draws it: a line under the words, and the rubric when
   it is the one being written in */
.fld{display:flex;flex-direction:column;gap:8px}
.fld input{
  -webkit-appearance:none;appearance:none;width:100%;padding:2px 0 10px;border:0;border-bottom:1px solid var(--rule-strong);border-radius:0;
  background:none;color:var(--ink);font-family:var(--serif);font-size:1.25rem;line-height:1.35;caret-color:var(--rubric);
  transition:border-color .22s ease;
}
.fld input:focus{outline:none;border-bottom-color:var(--rubric);box-shadow:0 1px 0 var(--rubric)}
.fld input:-webkit-autofill{-webkit-text-fill-color:var(--ink);box-shadow:0 0 0 40px var(--paper-raised) inset}
.sheet .btn{width:100%;margin-top:30px}
.sheet .btn[disabled]{opacity:.7;cursor:default}
.sheet-note{margin-top:18px;text-align:center;font-size:1.0625rem;font-style:italic;color:var(--ink-3)}
.sheet-done{display:flex;flex-direction:column;align-items:center;gap:22px;padding-block:18px 6px;text-align:center}
.sheet-done p{font-size:1.3rem;line-height:1.4;color:var(--ink);text-wrap:balance}
@media (prefers-reduced-motion:reduce){.sheet[open]{animation:none}}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .sheet::backdrop{background:rgba(0,0,0,.62)}}
:root[data-theme="dark"] .sheet::backdrop{background:rgba(0,0,0,.62)}

/* not here */
.lost{display:flex;flex-direction:column;align-items:center;gap:22px;min-height:min(70vh,640px);justify-content:center;padding-block:var(--section);text-align:center}
.lost .platetop{width:min(100%,280px);margin-bottom:10px}
.lost .lead{max-width:30rem}
.lost .btn{margin-top:10px}

/* ── the old site's blocks ──────────────────────────────────────────────────
   The landing carries the copy of the site it replaces, and a few of that
   copy's blocks need settings of their own. */
/* three qualities in a row: Relevant, Faithful, Insightful */
.gains--trio{margin-top:clamp(48px,6.5vw,80px)}
@media (min-width:620px){.gains--trio{grid-template-columns:minmax(0,1fr)}}
@media (min-width:760px){.gains--trio{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* a line that stands alone between two sections */
.section--quiet{padding-block:clamp(96px,8.8vw,127px)}
.roster-head{margin-bottom:14px}
.quote--plain p{text-indent:0}
.cta--center{justify-content:center;margin-top:clamp(28px,3.6vw,42px)}
/* a short lead is broken into even lines rather than left with a stub */
.lead--even{text-wrap:balance}