@font-face {
  font-family:'Stack Sans Headline';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('/assets/fonts/stack-400.ttf') format('truetype');
}
@font-face {
  font-family:'Stack Sans Headline';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('/assets/fonts/stack-500.ttf') format('truetype');
}
@font-face {
  font-family:'Stack Sans Headline';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('/assets/fonts/stack-600.ttf') format('truetype');
}
/* Site typography: Stack Sans Headline is the default face in at most three weights (400, 500, 600).
   It has no italic, so Scoutie Sans carries every italic on the site and nothing else, in two weights
   (400 for running italic, 700 for a book title, which is always a cite). No face ever exposes more than
   three weights. Sizes vary freely. */
@font-face {
  font-family:'Scoutie Sans';
  font-style:italic;
  font-weight:400;
  font-display:swap;
  src:url('/assets/fonts/scoutie-italic.ttf') format('truetype');
}
@font-face {
  font-family:'Scoutie Sans';
  font-style:italic;
  font-weight:700;
  font-display:swap;
  src:url('/assets/fonts/scoutie-italic.ttf') format('truetype');
}
:root {--canvas:#D4A373;--ink:#1b1b22;--paper:#f1e6d1;--card-w:180px;--card-h:238px;--reader-w:260px;--radius-surface: 26px;color-scheme:light;font-family:'Stack Sans Headline',sans-serif;font-weight:400;color:var(--ink);background:var(--canvas)}
* {box-sizing:border-box}
body {margin:0;min-width:280px;min-height:100svh;background:var(--canvas);isolation:isolate}
body::before {content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 50% 44%,#f6dfb77a,transparent 55%),radial-gradient(ellipse at 8% 88%,#70472525,transparent 40%);filter:blur(35px)}
button,a {color:inherit;-webkit-tap-highlight-color:transparent}
/* A book title, wherever it appears, is a cite in the italic face at the title weight, in caps. Both faces
   share a .7em cap height, so caps at .86em stand at .6em, just above the .56em x-height of the Stack text
   around them, with a little tracking. The title reads as a title without looming over its line. The weight
   is the heavy one, near Stack's 600 in stroke, so the title stands beside the name and survives the card
   texture's minification inside the wallet. On its own
   card the title sits a step smaller (.8em). Inside a sentence it rises to .92em so the caps reach the
   ascenders of the words around it. */
cite {font-family:'Scoutie Sans',sans-serif;font-style:italic;font-weight:700;text-transform:uppercase;font-size:.86em;letter-spacing:.035em}
.card-tab cite {font-size:.8em}
.card-copy cite {font-size:.92em}
button {font:inherit;cursor:pointer}
button:focus-visible,a:focus-visible,.keyboard canvas:focus-visible {outline:2px solid var(--ink);outline-offset:4px}
/* The browser's own ring would otherwise take over when the keyboard mark is absent. */
canvas:focus-visible {outline:none}
[hidden] {display:none!important}
.masthead {text-align:center;padding:30px 20px 0;position:relative;z-index:1;pointer-events:none}
.masthead h1 {font-size:22px;letter-spacing:.07em;font-weight:600;margin:0 auto}
.masthead p {font-size:14px;margin:7px auto 0}
.experience {max-width:1200px;margin:auto;position:relative}
.stage {height:clamp(520px,78svh,850px);position:relative}
/* The canvas runs 60px above the stage, under the masthead, and 90px below it, under the footer, so
   neither the open wallet nor its shadow is ever cut off. The camera is offset by half the difference so
   the wallet keeps its place in the stage. */
.stage canvas {position:absolute;top:-60px;left:0;height:calc(100% + 150px)}
canvas {display:block;width:100%;touch-action:none;cursor:grab;outline-offset:-5px!important}
canvas:active {cursor:grabbing}
.reader {position:absolute;left:76%;top:50%;width:var(--reader-w);transform:translate(-50%,-50%);pointer-events:none}
.reader:empty {display:none}
.keyboard-nav {position:absolute;bottom:15px;left:50%;transform:translateX(-50%);display:flex;gap:12px;clip-path:inset(50%);width:1px;height:1px;overflow:hidden}
.keyboard-nav:focus-within {clip-path:none;width:auto;height:auto;overflow:visible}
.keyboard-nav a {background:var(--paper);border:1px solid #1b1b2244;border-radius:999px;padding:8px 14px;text-decoration:none}
/* The footer sits over the bottom of the stage, so the wallet's shadow falls past it as it would on paper. */
footer {text-align:center;font-size:12px;padding:0 20px 24px;position:relative;pointer-events:none}
footer p {margin:14px auto 0}
/* The masthead and footer pass pointer input through to the canvas beneath them. Only the text lines opt back
   in, shrunk to their own width, so the words can be selected and copied while a drag beside them still
   reaches the wallet. */
.masthead h1,.masthead p,footer p {width:fit-content;pointer-events:auto}
/* The brandmark in the ink of the cards, 30 by 35 at its own ratio, as wide as a small pill and no wider. */
.brandmark {display:block;margin:0 auto;width:30px;height:35px}
/* On the apps page the brandmark is the way home. Padding canceled by an equal negative margin
   lifts the target to 44 by 45 without moving the mark. */
.brandmark-link {display:block;width:fit-content;margin:-5px auto;padding:5px 7px;pointer-events:auto}
.sr-only {position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* A link drawn on a page's face is a real anchor laid over the projected face while that face shows. */
.page-link {position:absolute;display:block;z-index:1}
.fallback {display:flex;justify-content:center;gap:24px;padding:24px}
ul.fallback {margin:0;list-style:none;font-size:27px;font-weight:600}
.paper {width:var(--card-w);height:var(--card-h);position:relative;display:flex;flex-direction:column;background:var(--paper);border-radius:var(--radius-surface);box-shadow:0 0 0 1px #a99a7870,1px 2px 3px #28180845;overflow:hidden;isolation:isolate;color:var(--ink)}
/* Every card is the same stock: the Bond Echo paper with a fine turbulence grain. Only the rub differs,
   a thin darkening at the edges each card wears against its pocket. */
.paper::before {content:'';position:absolute;inset:0;pointer-events:none;z-index:-1;background:url('/assets/paper-grain.svg')}
.card-0::before {background:url('/assets/paper-grain.svg'),radial-gradient(circle at 0 100%,#865c3530,transparent 9%),radial-gradient(circle at 100% 6%,#8d603126,transparent 7%)}
.card-1::before {background:url('/assets/paper-grain.svg'),radial-gradient(circle at 8% 0,#81573030,transparent 9%),linear-gradient(129deg,transparent 88%,#9f764820 89%,#fff8 90%,transparent 91%)}
.card-2::before {background:url('/assets/paper-grain.svg'),radial-gradient(circle at 100% 100%,#79634132,transparent 9%),radial-gradient(circle at 0 42%,#8a603020,transparent 5%)}
.card-tab {display:block;text-align:left;padding:8px 12px;width:100%;min-height:36px;border:0;background:none;font-weight:500;font-size:14px;flex:none;cursor:grab;touch-action:none}
.card-tab:focus-visible {outline-offset:-4px}
.card-detail {visibility:hidden;padding:0 22px 14px;display:flex;flex:1;min-height:0;flex-direction:column}
.reader .paper {width:var(--reader-w);height:calc(var(--reader-w) * 238 / 180);pointer-events:auto;box-shadow:0 0 0 1px #a99a7870,4px 15px 22px #492b2240}
.reader .card-tab {font-size:22px;padding:18px 22px 12px;min-height:58px}
.reader .card-detail {visibility:visible}
.card-copy {font-size:16px;line-height:1.5;margin:20px 0 auto}
.byline {font-size:14px;margin:12px 0 0}
/* Subtitle ink on the paper, 6.1:1 against var(--paper). */
.quote {font-family:'Scoutie Sans',sans-serif;font-style:italic;font-size:14px;font-weight:400;line-height:1.45;color:#52526C;margin-top:14px}
.app-list {display:grid;gap:8px;margin:14px 0 auto;background:none}
.app-list>div {display:flex;align-items:center;gap:12px}
.app-list img {width:40px;height:40px;object-fit:contain}
.app-list span {font-size:27px;font-weight:600;line-height:1.2}
/* App accents on paper. The canon accents (amate #FF3355, cobre #006ACC, desata #00AC5C) belong to the apps'
   dark canvases. On the off white paper each app wears its paper value, the same three the card faces use. */
.amate {color:#D10023}
.cobre {color:#0059ac}
.desata {color:#00713C}
/* The icons were drawn for dark canvases. On the paper each casts a soft shadow, in proportion to its size. */
.app-list img {filter:drop-shadow(0 2px 3px #28190a4d)}
/* The navigation line of a card (RL, 2026-09-08, the convention for every card that navigates): one word
   in small caps anchored to the visit glyph at the right, caps at 13px in the heavy weight with a little
   tracking, 8px off the glyph, on a rule. The whole row stays the target. */
.visit {display:flex;justify-content:flex-end;align-items:center;text-decoration:none;font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;border-top:1px solid #1b1b2238;min-height:44px;margin-top:16px;gap:8px}
.visit svg,.return-card svg {width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;flex:none}
.return-card {align-self:flex-start;margin-left:-8px;padding:8px;border:0;background:none;min-height:36px;min-width:36px;display:grid;place-items:center}

/* The reader card starts where the pulled card sits on the canvas and settles into place. Every motion
   on the page lives inside this one preference boundary. */
.reader .paper {transform-origin:0 0}
.reader .paper.leaving {pointer-events:none}
@media(prefers-reduced-motion:no-preference) {
  .reader .paper {transition:transform .46s cubic-bezier(.2,0,0,1),opacity .3s ease-out}
}
@media(max-width:700px) {.reader {left:50%;top:53%}.masthead {padding-top:24px}.stage {height:clamp(520px,78svh,780px)}}
/* On a phone the apps page's desk is a column of three slots, one card each, and the page scrolls from
   card to card as the reader likes, never snapped: a snap fought the page end and stepped the scroll.
   A slot is 70svh, the card stands 85 percent of it (deck.js), so the next card's top rim shows under
   the card in view. The peek, a sticky strip at the bottom of the stage, blurs that rim whole: its mask
   ramps in over the top 30 percent, above the rim. A 150px tail below the last slot is the peek's
   resting place, so the last card scrolls clear of it. A vertical swipe on the canvas scrolls, a
   horizontal drag turns a card. The deck lays each card at the center of its slot. Wider, the slots and
   the peek do not exist. */
.slot,.peek {display:none}
@media(max-width:700px) {
  .slots {--slot:clamp(460px,70svh,700px);--peek:150px}
  .slots .stage {height:calc(3 * var(--slot) + var(--peek));display:flex;flex-direction:column;justify-content:flex-end}
  .slots canvas {touch-action:pan-y}
  .slot {display:block;position:absolute;top:0;left:0;width:100%;height:var(--slot);pointer-events:none}
  .slot:nth-of-type(2) {top:var(--slot)}
  .slot:nth-of-type(3) {top:calc(2 * var(--slot))}
  .peek {display:block;position:sticky;bottom:0;height:var(--peek);pointer-events:none;z-index:1;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);-webkit-mask-image:linear-gradient(transparent,#000 30%);mask-image:linear-gradient(transparent,#000 30%)}
}
@media(max-width:360px) {:root {--reader-w:250px}}

.keyboard-nav.unavailable {clip-path:none;width:auto;height:auto;overflow:visible}