/* A sketchbook journal: aged paper, brown ink, and articles pasted in as clippings that
   keep their source's colours and type. Red ink is reserved for marking things read. */
:root {
  --paper: #ece2cb;
  --paper-edge: #dccdab;
  --leaf: #f3ead6;
  --ink: #3a2a1c;
  --ink-2: #5e4a35;
  --faded: #85705a;
  --rule: rgb(58 42 28 / 0.2);
  --red-ink: #8e3b2a;
  --tape-a: rgb(214 186 112 / 0.55);
  --tape-b: rgb(146 168 124 / 0.5);
  --tape-c: rgb(143 169 184 / 0.5);
  --tape-blend: multiply;
  --shadow: rgb(70 48 22 / 0.32);
  --clip-dim: none;

  --hand: "Caveat", "Segoe Print", "Bradley Hand", cursive;
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", Consolas, monospace;

  --reader-size: 20px;
  --gutter: 16px;
  --bar: 60px;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .2 0 0 0 0 .1 0 0 0 .11 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --foxing: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='900'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.008' numOctaves='2' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .3 0 0 0 0 .12 0 0 -1.6 0 .95'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)' opacity='.16'/%3E%3C/svg%3E");
  color-scheme: light;
}

/* At night the journal is dark leather-brown paper; clippings stay as printed, a touch dimmer. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #221b14;
    --paper-edge: #17120d;
    --leaf: #2a221a;
    --ink: #eadfc8;
    --ink-2: #cdbfa4;
    --faded: #9c8b70;
    --rule: rgb(234 223 200 / 0.18);
    --red-ink: #e8957c;
    --tape-a: rgb(214 186 112 / 0.32);
    --tape-b: rgb(146 168 124 / 0.3);
    --tape-c: rgb(143 169 184 / 0.3);
    --tape-blend: normal;
    --shadow: rgb(0 0 0 / 0.6);
    --clip-dim: brightness(0.9);
    --fox: linear-gradient(transparent, transparent);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #221b14;
  --paper-edge: #17120d;
  --leaf: #2a221a;
  --ink: #eadfc8;
  --ink-2: #cdbfa4;
  --faded: #9c8b70;
  --rule: rgb(234 223 200 / 0.18);
  --red-ink: #e8957c;
  --tape-a: rgb(214 186 112 / 0.32);
  --tape-b: rgb(146 168 124 / 0.3);
  --tape-c: rgb(143 169 184 / 0.3);
  --tape-blend: normal;
  --shadow: rgb(0 0 0 / 0.6);
  --clip-dim: brightness(0.9);
  --fox: linear-gradient(transparent, transparent);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100dvh;
  color: var(--ink);
  font: 400 17px/1.45 var(--serif);
  background-color: var(--paper);
  background-image: var(--grain), var(--fox, var(--foxing)), radial-gradient(ellipse at 50% 40%, transparent 55%, var(--paper-edge) 130%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}
button, input, select { font: inherit; color: inherit; }
a { color: inherit; }
:focus-visible { outline: 2px dashed var(--red-ink); outline-offset: 3px; border-radius: 3px; }
[hidden] { display: none !important; }
.hand { font-family: var(--hand); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 18px;
  border: 1.5px solid var(--ink); border-radius: 4px;
  background: transparent; font: 600 16px/1 var(--serif); cursor: pointer; text-decoration: none;
}
.btn:hover { background: var(--rule); }
.btn.primary { background: var(--ink); color: var(--paper); }
.btn.primary:hover { opacity: 0.9; }
.btn.red { border-color: var(--red-ink); color: var(--red-ink); }
.btn:disabled { opacity: 0.5; cursor: default; }
.icon-btn {
  display: inline-grid; place-items: center;
  width: 44px; height: 44px; border: 0; border-radius: 999px;
  background: transparent; cursor: pointer; color: var(--ink-2); text-decoration: none;
}
.icon-btn:hover { background: var(--rule); color: var(--ink); }
.icon-btn svg { width: 22px; height: 22px; }
.icon-btn.on { color: var(--red-ink); }
.linkish { background: none; border: 0; padding: 4px 0; color: var(--ink-2); font: 400 20px/1.2 var(--hand); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; cursor: pointer; }
.linkish.red { color: var(--red-ink); }

/* ---------- the flyleaf (sign in) ---------- */
.gate { min-height: 100dvh; display: grid; place-items: center; padding: 24px var(--gutter); }
.gate form { width: 100%; max-width: 360px; display: grid; gap: 22px; }
.gate h1 { font: 700 46px/1 var(--hand); margin: 0; }
.gate p { margin: 0; color: var(--ink-2); font-style: italic; }
.field { display: grid; gap: 2px; }
.field label { font: 400 21px/1.2 var(--hand); color: var(--faded); }
.input {
  width: 100%; min-height: 48px; padding: 4px 2px;
  border: 0; border-bottom: 1.5px solid var(--ink-2); border-radius: 0; background: transparent;
  font: 500 28px/1.2 var(--hand); color: var(--ink);
}
.input:focus { outline: none; border-bottom-color: var(--red-ink); }
.input.pin { letter-spacing: 0.35em; }
.input.plain { font: 400 18px/1.3 var(--serif); }
.error { color: var(--red-ink); font: 400 20px/1.2 var(--hand); min-height: 1.2em; margin: 0; }

/* ---------- the journal ---------- */
.topbar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 2px;
  height: calc(var(--bar) + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 8px 0 var(--gutter);
  background: color-mix(in srgb, var(--paper) 90%, transparent);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rule);
}
.wordmark { flex: 1; margin: 0; font: 700 32px/1 var(--hand); text-decoration: none; white-space: nowrap; }
.search {
  flex: 1; min-height: 40px; border: 0; border-bottom: 1.5px solid var(--ink-2);
  padding: 0 4px; background: transparent; font: 500 24px/1 var(--hand);
}
.search:focus { outline: none; border-bottom-color: var(--red-ink); }

/* Section tabs on a phone: handwritten words, the open one underlined by hand. */
.shelves {
  display: flex; gap: 22px; overflow-x: auto; scrollbar-width: none;
  padding: 10px var(--gutter) 6px; border-bottom: 1px solid var(--rule);
}
.shelves::-webkit-scrollbar { display: none; }
.shelf {
  flex: none; display: inline-flex; align-items: baseline; gap: 4px; min-height: 40px; padding: 4px 0;
  font: 500 23px/1.3 var(--hand); color: var(--faded); text-decoration: none; white-space: nowrap;
  background: none; border: 0; cursor: pointer;
}
.shelf .n { font-size: 16px; }
.shelf[aria-current="page"] {
  color: var(--ink);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 8' preserveAspectRatio='none'%3E%3Cpath d='M1 5 Q 25 2 50 4.5 T 99 3.5' fill='none' stroke='%238e3b2a' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") bottom / 100% 8px no-repeat;
}
.shelf.add { color: var(--faded); }

.layout { display: block; }
.side { display: none; }
.main { max-width: 720px; margin: 0 auto; padding: 0 0 110px; }

.view-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 22px var(--gutter) 4px; }
.view-head h2 { margin: 0; font: 700 44px/1 var(--hand); overflow-wrap: anywhere; }
.view-head .date { font: 400 20px/1.2 var(--hand); color: var(--faded); white-space: nowrap; }
.view-tools { display: flex; gap: 2px; align-items: center; padding: 0 var(--gutter) 6px; justify-content: flex-end; }
.toggle { display: flex; gap: 14px; margin-right: auto; }
.toggle button { background: none; border: 0; padding: 4px 0; cursor: pointer; font: 500 21px/1.2 var(--hand); color: var(--faded); }
.toggle button[aria-pressed="true"] { color: var(--ink); text-decoration: underline; text-decoration-color: var(--red-ink); text-underline-offset: 5px; }

/* ---------- clippings ---------- */
.list { list-style: none; margin: 0; padding: 12px var(--gutter) 0; display: grid; gap: 34px; }
.entry { position: relative; transform: rotate(var(--rot, 0deg)) translateX(var(--nudge, 0)); transition: opacity 0.25s, transform 0.25s; }
.entry.leaving { opacity: 0; transform: rotate(var(--rot, 0deg)) translateX(40px); }
.entry .paste { position: relative; filter: drop-shadow(0 1px 1px var(--shadow)) drop-shadow(0 8px 10px color-mix(in srgb, var(--shadow) 45%, transparent)); }
.clip {
  --c-bg: #f7f2e5; --c-fg: #221d16; --c-accent: #7a2e1f; --c-head: var(--serif); --c-body: var(--serif);
  position: relative; display: grid; grid-template-columns: 1fr auto; gap: 6px 14px;
  padding: 20px 18px 18px; background: var(--c-bg); color: var(--c-fg);
  clip-path: polygon(1px 2px, 18% 0, 47% 2px, 76% 0, calc(100% - 1px) 3px, 100% 34%, calc(100% - 2px) 71%, calc(100% - 1px) calc(100% - 2px), 64% 100%, 31% calc(100% - 2px), 1px 100%, 0 63%);
  filter: var(--clip-dim);
}
.clip a.open { position: absolute; inset: 0; z-index: 1; }
.clip .masthead {
  grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; min-width: 0;
  padding-bottom: 8px; border-bottom: 1px solid color-mix(in srgb, var(--c-fg) 18%, transparent);
  font: 700 11px/1.2 var(--c-head); letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-accent);
}
.clip .masthead span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clip .favicon { width: 16px; height: 16px; border-radius: 3px; flex: none; }
.clip h3 { grid-column: 1; margin: 2px 0 0; font: 700 21px/1.22 var(--c-head); letter-spacing: -0.01em; overflow-wrap: anywhere; }
.clip .excerpt {
  grid-column: 1; margin: 0; font: 400 15.5px/1.45 var(--c-body); opacity: 0.85;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.clip .photo { grid-column: 2; grid-row: 2 / span 2; width: 92px; height: 92px; object-fit: cover; align-self: start; margin-top: 4px; filter: sepia(0.15); }
.clip.sans { --c-head-fallback: var(--sans); }
.tape {
  position: absolute; z-index: 2; top: -11px; left: 50%; width: 92px; height: 24px;
  transform: translateX(-50%) rotate(var(--tape-rot, -3deg));
  background: var(--tape, var(--tape-a)); mix-blend-mode: var(--tape-blend);
  clip-path: polygon(0 8%, 4% 0, 8% 10%, 12% 0, 100% 0, 96% 12%, 100% 26%, 96% 40%, 100% 55%, 96% 70%, 100% 85%, 97% 100%, 0 100%, 4% 85%, 0 70%, 4% 55%, 0 40%, 4% 25%);
}
.entry.is-read .clip { filter: var(--clip-dim) saturate(0.55); }
.entry.is-read .clip h3 { opacity: 0.75; }
.readmark {
  position: absolute; z-index: 3; right: 6px; top: -18px; transform: rotate(-6deg);
  font: 700 26px/1 var(--hand); color: var(--red-ink); pointer-events: none;
}
.caption { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0 2px; margin-top: 6px; padding-left: 2px; }
.caption .note { flex: 1 1 150px; font: 400 20px/1.2 var(--hand); color: var(--ink-2); }
.caption .note .folder { color: var(--red-ink); }
.caption .icon-btn { width: 42px; height: 42px; }
.caption .icon-btn svg { width: 20px; height: 20px; }

/* A post from X keeps X's card: avatar, name, handle, rounded media. */
.clip.tweet { grid-template-columns: 1fr; gap: 8px; padding: 16px 16px 14px; font-family: var(--c-body); }
.tw-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.tw-head .avatar { width: 40px; height: 40px; border-radius: 50%; flex: none; }
.tw-head div { min-width: 0; }
.tw-head b { display: block; font: 700 15px/1.25 var(--c-head); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tw-head span { display: block; font: 400 14px/1.25 var(--c-body); opacity: 0.6; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tw-head .x { margin-left: auto; font-size: 18px; opacity: 1; flex: none; }
.tw-head.big { margin-bottom: 18px; }
.tw-head.big .avatar { width: 48px; height: 48px; }
.tw-head.big b { font-size: 17px; }
.tw-body {
  margin: 0; font: 400 16px/1.42 var(--c-body); white-space: pre-line; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 9; -webkit-box-orient: vertical; overflow: hidden;
}
.clip.tweet .shot { width: 100%; max-height: 280px; object-fit: cover; border-radius: 14px; border: 1px solid rgb(0 0 0 / 0.08); }
.clip.tweet .masthead { display: none; }
.prose .tw-text { white-space: normal; }
.prose .tw-post img, .prose .tw-quote img { border-radius: 14px; margin: 12px 0; border: 1px solid rgb(0 0 0 / 0.08); }
.prose .tw-quote { border: 1px solid color-mix(in srgb, var(--c-fg) 18%, transparent); border-radius: 14px; padding: 12px 16px; margin: 16px 0; font-size: 0.88em; }
.prose .tw-who { margin-bottom: 6px; }
.prose .tw-who span { opacity: 0.6; }
.prose .tw-video a { font-weight: 700; text-decoration: none; }
.sheet-page.tweet { font-family: var(--c-body); }
.sheet-page.tweet .prose { font-family: var(--c-body); line-height: 1.5; }

/* A Google Doc is a white page with the familiar blue mark in the corner. */
.clip.doc { border-top: 4px solid #4285f4; }

.empty { padding: 48px var(--gutter); text-align: center; color: var(--ink-2); }
.empty h3 { color: var(--ink); font: 700 34px/1.1 var(--hand); margin: 0 0 8px; }
.empty p { margin: 0 auto 18px; max-width: 34ch; font-style: italic; }
.more { display: flex; justify-content: center; padding: 28px; }
.loading { padding: 64px var(--gutter); text-align: center; color: var(--faded); font: 400 24px/1.2 var(--hand); }

.fab {
  position: fixed; right: max(var(--gutter), env(safe-area-inset-right)); bottom: calc(20px + env(safe-area-inset-bottom));
  z-index: 20; width: 60px; height: 60px; border-radius: 50%; border: 0;
  display: grid; place-items: center; cursor: pointer;
  background: var(--ink); color: var(--paper); box-shadow: 0 6px 18px var(--shadow);
}
.fab svg { width: 26px; height: 26px; }

/* ---------- reading a clipping ---------- */
.reader-bar .spacer { flex: 1; }
.progress {
  position: fixed; left: 0; top: calc(var(--bar) + env(safe-area-inset-top) - 2px); z-index: 11;
  height: 2px; width: 100%; transform-origin: 0 50%; transform: scaleX(0); background: var(--red-ink);
}
.reading { max-width: 760px; margin: 0 auto; padding: 18px 10px 0; }
.reading .margin-note { font: 400 21px/1.3 var(--hand); color: var(--ink-2); padding: 4px 8px 16px; transform: rotate(-1deg); }
.reading .margin-note a { color: var(--red-ink); text-decoration: none; }
.source-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; padding: 0 8px 22px; }
.source-line a {
  display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; min-height: 36px;
  font: 400 15px/1.3 var(--serif); color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 3px;
}
.source-line a span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.source-line a svg { flex: none; }
.source-line a:hover { color: var(--ink); text-decoration-color: currentColor; }
.source-line button {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px;
  border: 1.5px solid var(--ink-2); border-radius: 4px; background: transparent; cursor: pointer;
  font: 600 14px/1 var(--serif); color: var(--ink-2);
}
.source-line button:hover { color: var(--ink); border-color: var(--ink); }
.source-line a.share {
  min-height: 36px; padding: 0 12px; border: 1.5px solid currentColor; border-radius: 4px;
  font: 600 14px/1 var(--serif); text-decoration: none;
}
.whatsapp, .source-line a.whatsapp { color: #1f8f4e; }
:root[data-theme="dark"] .whatsapp { color: #4fd18a; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .whatsapp { color: #4fd18a; } }
/* WhatsApp sharing is for phones; on a computer the copy button covers it. */
@media (hover: hover) and (pointer: fine) { .whatsapp { display: none !important; } }
.reading .paste { position: relative; filter: drop-shadow(0 1px 1px var(--shadow)) drop-shadow(0 10px 14px color-mix(in srgb, var(--shadow) 45%, transparent)); }
.reading .tape { top: -12px; left: 28px; transform: rotate(-38deg); width: 84px; }
.reading .tape.r { left: auto; right: 28px; transform: rotate(36deg); }
.sheet-page {
  display: block; padding: 34px 22px 40px;
  clip-path: polygon(1px 2px, 30% 0, 62% 3px, calc(100% - 1px) 0, 100% 50%, calc(100% - 2px) calc(100% - 2px), 52% 100%, 0 calc(100% - 3px), 1px 48%);
}
.sheet-page .masthead { padding-bottom: 12px; margin-bottom: 22px; font-size: 12px; }
.sheet-page .masthead a { color: inherit; text-decoration: none; position: relative; z-index: 1; }
.sheet-page h1 { font: 700 clamp(28px, 6.4vw, 40px)/1.12 var(--c-head); letter-spacing: -0.02em; margin: 0 0 10px; overflow-wrap: anywhere; }
.sheet-page .byline { font: italic 400 16px/1.4 var(--c-body); opacity: 0.75; margin: 0 0 26px; }

.prose { font: 400 var(--reader-size)/1.65 var(--c-body); overflow-wrap: break-word; }
.prose > * { max-width: 100%; }
.prose p, .prose ul, .prose ol, .prose blockquote, .prose pre, .prose figure, .prose table { margin: 0 0 1.05em; }
.prose h1, .prose h2, .prose h3, .prose h4 { font-family: var(--c-head); line-height: 1.25; margin: 1.6em 0 0.6em; }
.prose h2 { font-size: 1.28em; }
.prose h3, .prose h4 { font-size: 1.08em; }
.prose a { color: var(--c-accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.prose img, .prose video { display: block; max-width: 100%; height: auto; margin: 0 auto; }
.prose figure { margin-left: 0; margin-right: 0; }
.prose figcaption { font-size: 0.75em; opacity: 0.7; margin-top: 8px; }
.prose blockquote { border-left: 3px solid var(--c-accent); margin-left: 0; padding-left: 18px; font-style: italic; }
.prose pre { font: 14px/1.5 var(--mono); background: color-mix(in srgb, var(--c-fg) 6%, transparent); padding: 14px; overflow-x: auto; }
.prose code { font-family: var(--mono); font-size: 0.82em; }
.prose table { display: block; overflow-x: auto; border-collapse: collapse; font-size: 0.8em; }
.prose td, .prose th { border: 1px solid color-mix(in srgb, var(--c-fg) 20%, transparent); padding: 6px 10px; }
.prose hr { border: 0; border-top: 1px solid color-mix(in srgb, var(--c-fg) 20%, transparent); margin: 2em 0; }

.no-reader { text-align: center; padding: 8px 0; }
.no-reader p { margin: 0 0 16px; font: 400 22px/1.3 var(--hand); }

/* The last page: where the reader's red-ink note gets written. */
.endnote { max-width: 760px; margin: 0 auto 130px; padding: 34px var(--gutter) 0; display: grid; justify-items: center; gap: 16px; text-align: center; }
.endnote .fin { font: 400 24px/1 var(--hand); color: var(--faded); }
.inkmark { margin: 0; font: 700 46px/1 var(--hand); color: var(--red-ink); transform: rotate(-4deg); white-space: nowrap; }
.inkmark small { display: block; font-size: 24px; font-weight: 500; margin-top: 4px; }
.inkmark.writing { animation: write 1.3s cubic-bezier(0.6, 0.1, 0.4, 1) both; }
@keyframes write {
  from { clip-path: inset(-20% 100% -20% 0); }
  to { clip-path: inset(-20% -5% -20% 0); }
}
.endnote .row { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }

/* ---------- slips: dialogs and messages ---------- */
dialog#sheet {
  border: 0; padding: 0; width: min(440px, 100vw); max-height: 85dvh;
  margin: auto auto 0; border-radius: 6px 6px 0 0;
  background: var(--leaf) var(--grain); color: var(--ink);
  box-shadow: 0 -8px 40px var(--shadow);
}
dialog#sheet::backdrop { background: rgb(30 20 10 / 0.45); }
.sheet-body { padding: 22px var(--gutter) calc(20px + env(safe-area-inset-bottom)); display: grid; gap: 12px; }
.sheet-body h3 { margin: 0; font: 700 32px/1.05 var(--hand); }
.sheet-body p { margin: 0; color: var(--ink-2); font-style: italic; }
.sheet-actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.choices { list-style: none; margin: 0 calc(var(--gutter) * -1); padding: 0; max-height: 50dvh; overflow-y: auto; }
.choices button {
  width: 100%; display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 var(--gutter);
  background: none; border: 0; border-top: 1px solid var(--rule); cursor: pointer; text-align: left;
  font: 500 23px/1.2 var(--hand);
}
.choices button:hover { background: var(--rule); }
.choices button[aria-current="true"]::after { content: "✓"; margin-left: auto; color: var(--red-ink); font-weight: 700; }
.choices .danger { color: var(--red-ink); }

#toast {
  position: fixed; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom)); z-index: 50;
  transform: translateX(-50%) rotate(-1deg); max-width: calc(100vw - 32px);
  display: flex; align-items: center; gap: 14px; padding: 10px 12px 10px 18px; min-height: 48px;
  background: var(--leaf) var(--grain); color: var(--ink); box-shadow: 0 6px 18px var(--shadow);
  font: 500 22px/1.2 var(--hand);
}
#toast button { background: none; border: 0; color: var(--red-ink); font: inherit; font-weight: 700; cursor: pointer; padding: 6px 8px; text-decoration: underline; }

/* ---------- save slip, settings ---------- */
.saved { min-height: 100dvh; display: grid; place-items: center; padding: 24px var(--gutter); text-align: center; }
.saved .box { display: grid; gap: 14px; justify-items: center; max-width: 380px; }
.saved h2 { margin: 0; font: 600 20px/1.35 var(--serif); overflow-wrap: anywhere; }
.saved .status { font: 400 22px/1.2 var(--hand); color: var(--faded); }
.settings { padding: 8px var(--gutter) 40px; display: grid; gap: 30px; }
.settings section { display: grid; gap: 10px; }
.settings h3 { margin: 0; font: 700 30px/1.1 var(--hand); }
.settings p, .settings ol { margin: 0; color: var(--ink-2); }
.settings ol { padding-left: 20px; display: grid; gap: 6px; }
.settings .label { font: 400 20px/1 var(--hand); color: var(--faded); margin-top: 4px; }
.bookmarklet {
  justify-self: start; display: inline-flex; padding: 10px 18px; transform: rotate(-1.5deg);
  background: var(--tape-a); color: var(--ink); font: 700 22px/1 var(--hand); text-decoration: none; cursor: grab;
}
.seg { display: inline-flex; gap: 16px; justify-self: start; flex-wrap: wrap; }
.seg button { border: 0; background: none; padding: 4px 0; cursor: pointer; font: 500 22px/1.2 var(--hand); color: var(--faded); }
.seg button[aria-pressed="true"] { color: var(--ink); text-decoration: underline; text-decoration-color: var(--red-ink); text-underline-offset: 5px; }

/* ---------- a two-page spread on wide screens ---------- */
@media (min-width: 900px) {
  .shelves { display: none; }
  .layout { display: grid; grid-template-columns: 280px minmax(0, 1fr); max-width: 1120px; margin: 0 auto; }
  .side {
    display: block; position: sticky; top: calc(var(--bar) + 12px); align-self: start;
    padding: 26px 28px 26px 12px; min-height: calc(100dvh - var(--bar) - 24px);
    background: linear-gradient(to left, rgb(60 40 20 / 0.12), transparent 26px);
    border-right: 1px solid var(--rule);
  }
  .side h2 { margin: 0 0 10px; font: 700 34px/1 var(--hand); }
  .side nav { display: grid; }
  .side a, .side button.add {
    display: flex; align-items: baseline; gap: 6px; padding: 5px 4px;
    font: 500 23px/1.25 var(--hand); text-decoration: none; color: var(--ink-2);
    background: none; border: 0; cursor: pointer; text-align: left; width: 100%;
  }
  .side a .leader { flex: 1; border-bottom: 2px dotted var(--rule); transform: translateY(-5px); min-width: 12px; }
  .side a .n { font-size: 20px; color: var(--faded); }
  .side a:hover { color: var(--ink); }
  .side a[aria-current="page"] { color: var(--red-ink); }
  .side .label { font: 400 18px/1 var(--hand); color: var(--faded); padding: 18px 4px 4px; border-top: 1px solid var(--rule); margin-top: 12px; }
  .side button.add { color: var(--faded); font-size: 21px; }
  .main { padding: 8px 12px 80px 36px; margin: 0; max-width: none; }
  .list { padding-right: 24px; gap: 40px; max-width: 720px; }
  .view-head, .view-tools { max-width: 744px; }
  dialog#sheet { margin: auto; border-radius: 6px; }
  .fab { display: none; }
  #toast { bottom: 28px; }
  .sheet-page { padding: 48px 56px 56px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}