@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)}
.visit {display:flex;justify-content:space-between;align-items:center;text-decoration:none;font-size:16px;font-weight:500;border-top:1px solid #1b1b2238;min-height:44px;margin-top:16px;gap:10px}
.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)}}
@media(max-width:360px) {:root {--reader-w:250px}}

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