@font-face { font-family: "Grandstander"; src: url(../fonts/grandstander.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Literata"; src: url(../fonts/literata.woff2) format("woff2"); font-weight: 200 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Literata"; src: url(../fonts/literata-italic.woff2) format("woff2"); font-weight: 200 900; font-style: italic; font-display: swap; }
@font-face { font-family: "DM Mono"; src: url(../fonts/dm-mono-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "DM Mono"; src: url(../fonts/dm-mono-500.woff2) format("woff2"); font-weight: 500; font-display: swap; }

/* Layout: one narrow reading column, a dryer-porthole picture on top, choices as tags below, endings printed as garment care labels. */
:root {
  --bg: #E9EEF1;        /* rinse-water blue-white */
  --card: #F7F9FA;
  --fg: #232637;
  --muted: #5C6274;
  --line: #C9D1D8;
  --teal: #177E80;
  --mustard: #D99A1B;
  --red: #CF4535;
  --pim: #9C8BD3;
  --focus: #177E80;
  --a-ink: #232637; --a-paper: #F4F1EA; --a-shade: #D6DCE2; --a-teal: #1F8E90; --a-mustard: #E6A92A;
  --a-red: #D4473A; --a-pim: #A797DA; --a-warm: #F6D58A; --a-cool: #8FB3CF;
  --display: "Grandstander", "Trebuchet MS", system-ui, sans-serif;
  --body: "Literata", Georgia, "Times New Roman", serif;
  --mono: "DM Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: #161925; --card: #1F2333; --fg: #ECE8DF; --muted: #A3A7B8; --line: #343A4F;
  --teal: #4FC2BF; --mustard: #F0B940; --red: #F06F5E; --pim: #B9AAEE; --focus: #4FC2BF;
  --a-ink: #ECE8DF; --a-paper: #252A3C; --a-shade: #353C53; --a-teal: #3AAFAD; --a-mustard: #E9B23A;
  --a-red: #E8604F; --a-pim: #A898E0; --a-warm: #8C6B2E; --a-cool: #3E5878;
  color-scheme: dark;
} }
:root[data-theme="dark"] {
  --bg: #161925; --card: #1F2333; --fg: #ECE8DF; --muted: #A3A7B8; --line: #343A4F;
  --teal: #4FC2BF; --mustard: #F0B940; --red: #F06F5E; --pim: #B9AAEE; --focus: #4FC2BF;
  --a-ink: #ECE8DF; --a-paper: #252A3C; --a-shade: #353C53; --a-teal: #3AAFAD; --a-mustard: #E9B23A;
  --a-red: #E8604F; --a-pim: #A898E0; --a-warm: #8C6B2E; --a-cool: #3E5878;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { background: var(--bg); color: var(--fg); }
body { font-family: var(--body); font-size: 1.075rem; line-height: 1.62; padding-inline: 16px; padding-block: 0 3rem; }
.wrap { max-width: 34rem; margin: 0 auto; display: flex; flex-direction: column; gap: 1.25rem; }

/* top bar */
.bar { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; background: var(--bg); display: flex; align-items: center; gap: .5rem; padding-block: .7rem; border-bottom: 2px dashed var(--line); }
.brand { font-family: var(--display); font-weight: 800; font-size: 1.15rem; letter-spacing: .01em; margin-right: auto; display: flex; align-items: center; gap: .45rem; white-space: nowrap; }
.brand .stripes { width: 1.6rem; height: .9rem; border-radius: .45rem; background: repeating-linear-gradient(90deg, var(--teal) 0 .3rem, var(--mustard) .3rem .6rem); border: 2px solid var(--fg); }
.tbtn { font: 500 .78rem/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--fg); background: transparent; border: 2px solid var(--fg); border-radius: 999px; padding: .5rem .7rem; cursor: pointer; white-space: nowrap; }
.tbtn:hover { background: var(--fg); color: var(--bg); }
.tbtn:disabled { opacity: .35; cursor: default; background: transparent; color: var(--fg); }
button:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

/* porthole picture */
.porthole { position: relative; border-radius: 2.2rem; border: 4px solid var(--fg); background: var(--a-paper); overflow: hidden; box-shadow: 0 0 0 7px var(--card), 0 0 0 9px var(--line); margin: 9px; }
.porthole svg { display: block; width: 100%; height: auto; }
.porthole::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(140deg, rgba(255,255,255,.22), rgba(255,255,255,0) 38%); }

.where { font: 500 .74rem/1.2 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); display: flex; gap: .75rem; flex-wrap: wrap; }
.where b { color: var(--teal); font-weight: 500; }
.where { align-items: center; }
.deck { margin-left: auto; display: flex; gap: .4rem; }
.pill { font: 500 .68rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); background: transparent; border: 1.5px solid var(--line); border-radius: 999px; padding: .4rem .6rem; cursor: pointer; }
.pill:hover { border-color: var(--fg); color: var(--fg); }
.pill[aria-pressed="true"] { color: var(--bg); background: var(--teal); border-color: var(--teal); }
.pill:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.story { font-size: var(--story-size, 1.075rem); }
h1.ptitle:focus { outline: none; }
h1.ptitle { font-family: var(--display); font-weight: 800; font-size: clamp(1.7rem, 6vw, 2.2rem); line-height: 1.1; margin: 0; text-wrap: balance; }
.story p { margin: 0 0 1em; }
.story p:last-child { margin-bottom: 0; }
.story em { font-style: italic; }

/* choices as sock tags */
.choices { display: flex; flex-direction: column; gap: .7rem; list-style: none; margin: 0; padding: 0; }
.choice { width: 100%; text-align: left; display: flex; align-items: center; gap: .8rem; font: 600 1.02rem/1.3 var(--body); color: var(--fg); background: var(--card); border: 2px solid var(--fg); border-radius: 1rem; padding: .85rem 1rem; cursor: pointer; transition: transform .12s ease, background .12s ease; }
.choice .num { flex: none; font: 500 .8rem/1 var(--mono); width: 1.8rem; height: 1.8rem; display: grid; place-items: center; border-radius: 50%; background: var(--fg); color: var(--bg); }
.choice:hover { transform: translateX(4px); background: color-mix(in srgb, var(--mustard) 18%, var(--card)); }
.choice:active { transform: translateX(4px) scale(.99); }

/* care label ending */
.label { background: var(--card); border: 2px solid var(--fg); border-radius: .4rem; padding: 1.1rem 1.1rem 1rem; display: flex; flex-direction: column; gap: .7rem; position: relative; font-family: var(--mono); }
.label::before { content: ""; position: absolute; left: 50%; top: -.55rem; width: 3.5rem; height: 1rem; transform: translateX(-50%); border: 2px solid var(--fg); border-bottom: 0; border-radius: .5rem .5rem 0 0; background: var(--bg); }
.label .kicker { font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); display: flex; justify-content: space-between; gap: .5rem; flex-wrap: wrap; }
.label .ename { font-family: var(--display); font-weight: 800; font-size: 1.6rem; line-height: 1.1; text-wrap: balance; }
.label .kind { display: inline-block; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; padding: .25rem .55rem; border-radius: 999px; border: 2px solid currentColor; }
.kind-good { color: var(--teal); } .kind-bittersweet { color: var(--pim); } .kind-bad { color: var(--red); } .kind-weird { color: var(--mustard); }
.care { display: flex; gap: .6rem; align-items: center; color: var(--fg); }
.care svg { width: 1.9rem; height: 1.9rem; }
.label .fine { font-size: .74rem; color: var(--muted); line-height: 1.5; }
.label .route { font-size: .72rem; line-height: 1.6; color: var(--fg); border-top: 2px dashed var(--line); padding-top: .6rem; overflow-wrap: anywhere; }
.label .route b { font-weight: 500; color: var(--muted); letter-spacing: .1em; text-transform: uppercase; margin-right: .35rem; }
.copyline { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.copyline .copied { font: 500 .72rem/1 var(--mono); color: var(--teal); letter-spacing: .08em; }
.endbtns { display: flex; gap: .6rem; flex-wrap: wrap; }
.endbtns .choice { flex: 1 1 12rem; justify-content: center; }

/* lost and found */
.lf { position: fixed; inset: 0; z-index: 20; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(4px); overflow-y: auto; padding-inline: 16px; padding-block: calc(env(safe-area-inset-top, 0px) + 1.2rem) 2rem; }
.lf .inner { max-width: 34rem; margin: 0 auto; display: flex; flex-direction: column; gap: 1rem; }
.lf h2 { font-family: var(--display); font-weight: 800; font-size: 1.7rem; margin: 0; }
.lf .sub { font: 500 .78rem/1.5 var(--mono); letter-spacing: .06em; color: var(--muted); margin: 0; }
.meter { height: .9rem; border: 2px solid var(--fg); border-radius: 999px; overflow: hidden; background: var(--card); }
.meter i { display: block; height: 100%; background: repeating-linear-gradient(90deg, var(--teal) 0 .5rem, var(--mustard) .5rem 1rem); }
.tags { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: .6rem; list-style: none; margin: 0; padding: 0; }
.tag { border: 2px solid var(--fg); border-radius: .4rem; background: var(--card); padding: .6rem .7rem; min-width: 0; display: flex; flex-direction: column; gap: .3rem; }
.tag .t { font-family: var(--display); font-weight: 800; font-size: 1rem; line-height: 1.15; overflow-wrap: anywhere; }
.tag .k { font: 500 .66rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.tag.missing { border-style: dashed; background: transparent; color: var(--muted); }
.tag.missing .t { font-family: var(--mono); font-weight: 500; letter-spacing: .2em; }
.lf .row { display: flex; gap: .6rem; flex-wrap: wrap; }


/* cover */
.cover { display: flex; flex-direction: column; gap: 1.1rem; }
.cover h1 { font-family: var(--display); font-weight: 800; font-size: clamp(2.6rem, 13vw, 3.8rem); line-height: .95; margin: 0; letter-spacing: -.01em; }
.cover h1 span { color: var(--teal); }
.cover .tagline { font-size: 1.15rem; margin: 0; max-width: 30rem; }
.cover .specs { font: 500 .74rem/1.6 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); border-block: 2px dashed var(--line); padding-block: .6rem; display: flex; gap: .4rem 1.2rem; flex-wrap: wrap; }
.cover .choice.primary { background: var(--fg); color: var(--bg); justify-content: center; font-family: var(--display); font-weight: 800; font-size: 1.2rem; }
.cover .choice.primary:hover { background: var(--teal); color: var(--bg); }
.cover .hint { font: 400 .74rem/1.5 var(--mono); color: var(--muted); margin: 0; }
/* celebration */
.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 30; overflow: hidden; }
.confetti i { position: absolute; top: -2rem; width: .8rem; height: 1.3rem; border-radius: .2rem .2rem .5rem .5rem; animation: fall linear forwards; }
@keyframes fall { to { transform: translateY(110vh) rotate(540deg); } }
@media (prefers-reduced-motion: reduce) { .confetti { display: none; } }
.maph { font: 500 .78rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: .4rem 0 0; }
.map { display: flex; flex-direction: column; gap: .7rem; }
.map .reg { display: flex; flex-direction: column; gap: .35rem; }
.map .rn { font: 500 .7rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.map .dots { display: flex; flex-wrap: wrap; gap: 5px; }
.map .dots span { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--line); }
.map .dots span.v { background: var(--teal); border-color: var(--teal); }
.map .dots span.e { border-radius: 2px; }
.map .dots span.e.v { background: var(--mustard); border-color: var(--mustard); }
.foot { font: 400 .72rem/1.5 var(--mono); color: var(--muted); letter-spacing: .04em; text-align: center; }
.fade { animation: tumble .45s ease both; }
@keyframes tumble { from { opacity: .25; transform: translateY(6px) rotate(-.4deg); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .fade { animation: none; } .choice { transition: none; } }

/* the line back to the drawer: on the cover and in the Found panel, never over a page of the story */
.jd-foot { font: 400 .78rem/1.4 var(--mono); letter-spacing: .04em; color: var(--muted); text-align: center; display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap; }
.jd-foot a { color: inherit; text-decoration: none; border-radius: 2px; }
.jd-foot a:hover, .jd-foot a:focus-visible { text-decoration: underline; text-underline-offset: 3px; color: var(--fg); }
.jd-foot a:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }

/* site-only: the Artifact viewer supplies its own page reset and safe-area padding, so its copy drops this block */
:root { color-scheme: light; }
html, body { margin: 0; }
body { padding-top: env(safe-area-inset-top, 0px); padding-bottom: calc(3rem + env(safe-area-inset-bottom, 0px)); }
img { max-width: 100%; }
[hidden] { display: none !important; }
.noscript { max-width: 34rem; margin: 3rem auto; font: 1.1rem/1.5 var(--body); }
/* end site-only */