/* Home prototype, fifth pass (disposable).
   One page of paper. The type goes back to the earliest prototype: one grotesque, Archivo, used
   across its width axis (expanded for the wordmark, normal for everything else), but lighter.
   Shared DNA with RIRRI'S comes from its materials, not its section colours: the reader's paper
   and ink, Geist Mono for labels and dates (RIRRI'S shelf labels and receipts), dashed tear lines,
   the arched window into the world, and each project's own accent. Teal is for links and focus,
   red only on the stamp. No coloured section bands. */
:root {
  --paper: #F5F5F2;
  --sheet: #FFFFFF;
  --ink: #1F2421;
  --muted: #5F6661;
  --faint: #6A706C;
  --hair: rgba(31, 36, 33, .14);
  --hair-2: rgba(31, 36, 33, .07);
  --dash: rgba(31, 36, 33, .28);
  --teal: #1D6B5F;
  --lilac: #B4AED8;
  --red: #B23B30;
  --focus: #1D6B5F;
  --sans: Archivo, "Helvetica Neue", Arial, sans-serif;
  --mono: "Geist Mono", "SF Mono", ui-monospace, Menlo, monospace;
  --lift: 0 1px 0 rgba(31,36,33,.04), 0 0 0 1px var(--hair-2), 0 18px 36px -24px rgba(31,36,33,.28);
}
body { font-family: var(--sans); font-variation-settings: "wdth" 100; font-size: 17.5px; line-height: 1.6; color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; }
a { text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); }
a:hover { text-decoration-color: currentColor; }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 40px; }

/* labels: RIRRI'S shelf-label mono, in sentence case */
.label, .n-kind, .sec-mark { font: 500 12px/1.35 var(--mono); letter-spacing: .02em; color: var(--muted); }

/* sections: one rhythm for the whole page. A mono mark on the rule, then the heading */
.sec { padding: 120px 0 0; }
.sec-rule { display: flex; align-items: baseline; gap: 16px; padding-top: 14px; border-top: 1px solid var(--hair); margin-bottom: 30px; }
.sec-rule .sec-mark + .sec-mark { margin-left: auto; }
.sec-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 44px; }
.sec-head h2 { font-size: clamp(32px, 3.4vw, 44px); line-height: 1.08; font-weight: 520; font-variation-settings: "wdth" 96; letter-spacing: -.022em; }
.sec-head p { margin-top: 10px; color: var(--muted); max-width: 36em; }
.more { font-size: 15.5px; font-weight: 500; white-space: nowrap; color: var(--teal); }

/* ---------------- header ---------------- */
html { scroll-padding-top: 84px; }
.masthead { position: sticky; top: 0; z-index: 50; background: transparent; box-shadow: 0 1px 0 transparent; transition: background .25s, box-shadow .25s; }
.masthead.is-stuck { background: color-mix(in srgb, var(--paper) 90%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 1px 0 var(--hair); }
.top { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 16px 40px; }
.mark { font-size: 19px; font-weight: 700; font-variation-settings: "wdth" 125; letter-spacing: .01em; text-decoration: none; }
.nav { display: flex; align-items: center; gap: 26px; font-size: 15.5px; }
.nav a { text-decoration: none; }
.nav > a:not(.pill):hover { text-decoration: underline; text-decoration-color: currentColor; }
.pill { display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; padding: 6px 14px 7px; font-weight: 500; box-shadow: inset 0 0 0 1px var(--hair); }
.pill:hover { background: var(--sheet); }
.pill-world { padding: 3px 14px 3px 3px; background: var(--sheet); box-shadow: var(--lift); }
.pill-world img { width: 28px; height: 28px; border-radius: 999px; object-fit: cover; }
.arrow { font-family: var(--mono); font-size: .9em; }

/* ---------------- 1. the cover ----------------
   The first screen is a cover page: RIRRI'S evening sky, greyed and softened, behind the masthead,
   fading back to the paper before the notebook starts. The window is the one object on it. */
:root { --mast: 68px; }
.cover { margin-top: calc(-1 * var(--mast)); padding: var(--mast) 0 40px;
  background:
    radial-gradient(52% 58% at 79% 40%, rgba(180, 174, 216, .42), rgba(180, 174, 216, 0) 70%),
    linear-gradient(180deg, #E6E4EE 0%, #EAE9F0 52%, #F0EFF1 78%, var(--paper) 100%); }
.intro { display: grid; grid-template-columns: minmax(0, 1fr) 392px; gap: 96px; align-items: center; min-height: calc(min(100svh, 940px) - var(--mast) - 40px); padding: 40px 0 56px; }

.statement { font-weight: 420; color: var(--ink); }
.st-name { display: block; font-size: clamp(54px, 8.2vw, 122px); line-height: .94; font-weight: 540; font-variation-settings: "wdth" 112; letter-spacing: -.045em; }
.st-line { display: block; margin-top: 26px; max-width: 18.5em; font-size: clamp(25px, 2.75vw, 37px); line-height: 1.2; font-variation-settings: "wdth" 96; letter-spacing: -.02em; text-wrap: balance; }
.st-mark { --u: 100%; background: linear-gradient(var(--teal), var(--teal)) no-repeat 0 94% / var(--u) 2px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.lede { margin-top: 28px; max-width: 31em; font-size: 17.5px; line-height: 1.6; color: var(--muted); }
.thinking { margin-top: 36px; max-width: 40em; padding-top: 12px; border-top: 1px dashed var(--dash); font-size: 15.5px; line-height: 1.6; }
.thinking .label { display: block; margin-bottom: 4px; }
.think-list, .think-list li { display: inline; }
.think-list li + li::before { content: " / "; color: var(--faint); }

/* the window into RIRRI'S: a white arched frame on a sill, with weather on the glass */
.intro-world { position: relative; }
.window { display: block; text-decoration: none; }
.window .frame { position: relative; display: block; aspect-ratio: 4 / 5; border-radius: 999px 999px 4px 4px; overflow: hidden; background: var(--lilac); isolation: isolate;
  box-shadow: 0 0 0 10px var(--sheet), 0 0 0 11px var(--hair-2), 0 34px 60px -30px rgba(52, 44, 84, .45); }
.window .pane { position: absolute; inset: -5%; display: block; will-change: transform; }
.window .pane img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; transition: scale .9s cubic-bezier(.22,1,.36,1); }
.window:hover .pane img { scale: 1.03; }
.window .rain { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .5; mix-blend-mode: screen;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='160'%3E%3Cg stroke='white' stroke-width='1' stroke-linecap='round' opacity='.55'%3E%3Cpath d='M12 8l-3 16M58 40l-3 14M96 18l-3 15M30 92l-3 15M80 104l-3 13M110 70l-3 14M44 136l-3 14'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='130'%3E%3Cg stroke='white' stroke-width='.8' stroke-linecap='round' opacity='.4'%3E%3Cpath d='M20 20l-2 10M64 58l-2 11M40 100l-2 10M82 12l-2 9'/%3E%3C/g%3E%3C/svg%3E");
  animation: rain 0.75s linear infinite; }
@keyframes rain { from { background-position: 0 0, 0 0; } to { background-position: -30px 160px, -20px 130px; } }
.window .glass { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(118deg, rgba(255,255,255,.2) 0 16%, rgba(255,255,255,0) 30%), linear-gradient(0deg, rgba(31,36,33,.12), rgba(31,36,33,0) 26%); }
.window.is-off .rain { animation-play-state: paused; }
.window .sill { display: block; height: 12px; margin: 10px -26px 0; border-radius: 2px; background: linear-gradient(var(--sheet), #E9E8EC); box-shadow: 0 1px 0 var(--hair), 0 16px 22px -14px rgba(52, 44, 84, .35); }
.window .w-title { display: flex; justify-content: space-between; gap: 12px; margin-top: 22px; font-size: 19px; font-weight: 560; }
.window .w-sub { display: block; margin-top: 2px; color: var(--muted); font-size: 15px; line-height: 1.45; }
.window:hover .w-title span:first-child { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* stickers: six flat, colour-blocked die-cut stickers drawn inline, spread over the cover as one canvas.
   Size steps: one anchor (the bow), two medium (moon, flower), three small (star, persimmon, cup).
   Protected: the headline, the intro paragraph, the window and its caption. Everything else is open,
   and stickers may touch the cover's edges. Each keeps clear space around it, so it can later carry
   its own small hover detail. The bow and moon live in the window column, placed against the arch. */
.cover { overflow-x: clip; }
.cover > .wrap { position: relative; }
.stickers { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.die-defs { position: absolute; }
.sticker { position: absolute; z-index: 2; display: block; width: var(--w); rotate: var(--r, 0deg); pointer-events: auto; }
.sticker svg { display: block; width: 100%; height: auto; overflow: visible;
  filter: drop-shadow(0 1px 1px rgba(52, 44, 84, .14)) drop-shadow(0 8px 10px rgba(52, 44, 84, .16));
  transition: translate .35s cubic-bezier(.34, 1.56, .64, 1), rotate .35s cubic-bezier(.34, 1.56, .64, 1), filter .35s; }
.sticker:hover svg { translate: 0 -4px; rotate: 5deg; filter: drop-shadow(0 1px 1px rgba(52, 44, 84, .12)) drop-shadow(0 14px 14px rgba(52, 44, 84, .18)); }
.s-bow:hover svg, .s-fruit:hover svg { rotate: -5deg; }
.sticker { --anchor: 150px; --medium: 94px; --small: 58px; }

/* two columns: anchor bottom right, under the caption; moon past the arch's crown; flower in the
   bottom-left corner; the three small ones run down the middle gap and along the bottom */
.s-bow    { --w: var(--anchor); right: -22px; top: calc(100% + 16px); }
.s-moon   { --w: 88px; left: calc(100% - 50px); top: -36px; }
.s-flower { --w: var(--medium); left: 10px; bottom: -26px; }
.s-star   { --w: var(--small);  left: calc(100% - 600px); top: 11%; }
.s-fruit  { --w: var(--small);  left: calc(100% - 518px); top: 58%; }
.s-cup    { --w: var(--small);  left: 44%; bottom: 6px; }
@media (max-width: 1100px) { .s-moon { left: calc(100% - 66px); } }
@media (min-width: 1440px) { .s-flower { left: -56px; bottom: -6px; } .s-moon { --w: var(--medium); left: calc(100% - 30px); top: -58px; } }

/* stacked layout: type on top, the window below on the left; stickers use the open right side */
@media (max-width: 980px) {
  .sticker { --anchor: 128px; --medium: 84px; --small: 52px; }
  .s-bow    { right: auto; left: calc(100% + clamp(40px, 100vw - 610px, 200px)); top: 60%; }
  .s-moon   { --w: var(--medium); left: calc(100% + 56px); top: 6%; }
  .s-flower { left: auto; right: 4%; bottom: auto; top: 0; }
  .s-star   { left: auto; right: 30%; top: 4%; }
  .s-fruit  { left: auto; right: 6%; top: 27%; }
  .s-cup    { left: auto; right: 34%; bottom: 3%; }
}
@media (max-width: 760px) {
  .s-fruit { display: none; }
}
/* tablet portrait: type and a smaller window side by side again (layout below). The star sits after the
   name, the moon on the arch's shoulder, the bow under the caption, flower and cup along the bottom */
@media (min-width: 768px) and (max-width: 980px) {
  .s-bow    { left: auto; right: -14px; top: calc(100% + 14px); }
  .s-moon   { left: calc(100% - 44px); top: -34px; }
  .s-flower { right: auto; left: 6px; top: auto; bottom: -40px; }
  .s-star   { right: auto; left: calc(40px + 40vw); top: 22px; }
  .s-fruit  { display: none; }
  .s-cup    { right: auto; left: 46%; bottom: -10px; }
}
@media (max-width: 640px) {
  /* scrolled down, the masthead slides away and comes back on the way up (masthead.js) */
  .masthead { transition: background .25s, box-shadow .25s, translate .28s cubic-bezier(.2, .8, .2, 1); }
  .masthead.is-away { translate: 0 -100%; }
  .sticker { --anchor: 84px; --medium: 58px; --small: 44px; }
  .s-bow    { left: auto; right: -12px; top: calc(100% + 12px); }
  .s-moon   { --w: var(--medium); left: auto; right: -18px; top: -26px; }
  .s-flower { right: 8px; top: 0; }
  .s-star   { right: 2%; top: 17%; }
  .s-fruit, .s-cup { display: none; }
}
@media (prefers-reduced-motion: reduce) { .sticker svg { transition: none; } }

/* the entrance, once per visit: only the window and the stickers wait for it (JS, motion allowed) */
html.hero-intro .window, html.hero-intro .sticker { visibility: hidden; }
html.hero-intro .st-mark { --u: 0%; } /* the words are there from the first frame; only the underline draws */
@media (prefers-reduced-motion: reduce) { .window .rain { animation: none; } }

/* ---------------- 2. this week in my notebook ---------------- */
.collection { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: start; }
.n-kind { display: flex; gap: 10px; }
.n-kind span { color: var(--faint); }
.n-from { margin-top: 14px; font-size: 14.5px; color: var(--muted); }
.n-from a { color: var(--ink); }
.note-title { font-weight: 560; font-variation-settings: "wdth" 96; letter-spacing: -.015em; text-wrap: pretty; }

/* lead: a sheet of ruled notebook paper */
/* lead: a notebook page, with the margin line in RIRRI'S evening lilac */
.n-lead { grid-column: 1 / 8; grid-row: 1 / 3; background: var(--sheet); padding: 32px 40px 34px 64px; box-shadow: var(--lift);
  background-image: linear-gradient(90deg, transparent 39px, var(--lilac) 39px, var(--lilac) 40px, transparent 40px); }
.n-lead h3 { font-size: clamp(28px, 2.7vw, 36px); line-height: 1.14; margin: 14px 0 22px; max-width: 18em; }
.n-lead p:not(.n-kind):not(.n-from) { max-width: 36em; font-size: 17px; line-height: 1.7; }
.n-lead p:not(.n-kind) + p:not(.n-from) { margin-top: 12px; }

/* image note */
.n-image { grid-column: 8 / 13; background: var(--sheet); box-shadow: var(--lift); }
.n-image figure { aspect-ratio: 4 / 3; overflow: hidden; background: #e9eae6; }
.n-image img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 46%; }
.n-pad { padding: 20px 24px 22px; }
.n-image h3 { font-size: 22px; line-height: 1.22; margin: 10px 0 8px; }
.n-image p:not(.n-from):not(.n-kind) { font-size: 16px; color: var(--muted); line-height: 1.55; }

/* changed my mind: a torn slip, crossed out in pen */
.n-turn { grid-column: 1 / 5; background: var(--sheet); padding: 28px 26px 26px; transform: rotate(-1.2deg); box-shadow: 0 14px 28px -20px rgba(31,36,33,.35);
  clip-path: polygon(0 3%, 6% 0, 14% 2%, 24% 0, 36% 3%, 50% 0, 63% 2%, 76% 0, 88% 3%, 100% 0, 100% 100%, 0 100%); }
.n-turn .was { margin-top: 12px; font-size: 16.5px; color: var(--faint); }
.n-turn .was s { text-decoration-color: var(--teal); text-decoration-thickness: 2px; }
.n-turn .now-think { margin-top: 6px; font-size: 22px; line-height: 1.25; }

/* also this week: lines straight on the page */
.n-more { grid-column: 5 / 8; padding-top: 6px; }
.n-more li { padding: 14px 0; border-bottom: 1px dashed var(--dash); }
.n-more .m-title { font-size: 18px; line-height: 1.3; }
.n-more .n-from { margin-top: 4px; }

/* quote: no card, just the words */
.n-quote { grid-column: 8 / 13; padding: 22px 4px 0 0; border-top: 2px solid var(--ink); }
.n-quote blockquote { margin: 0; font-size: clamp(28px, 2.6vw, 34px); line-height: 1.12; font-weight: 440; font-variation-settings: "wdth" 92; letter-spacing: -.025em; }
.n-quote blockquote::before { content: "“"; color: var(--teal); }
.n-quote blockquote::after { content: "”"; color: var(--teal); }
.n-quote p:not(.n-from) { margin-top: 14px; font-size: 16px; color: var(--muted); max-width: 30em; }

/* the week rail: a quiet margin beside the collection, ticks level with each row of notes */
.week { position: relative; display: grid; grid-template-columns: 84px minmax(0, 1fr); }
.week-rail { position: relative; border-left: 1px solid var(--hair); margin-left: 4px; }
.wr-tick { position: absolute; left: 0; padding-left: 12px; font: 500 11.5px/1.3 var(--mono); color: var(--faint); white-space: nowrap; }
.wr-tick[data-tick="lead"] { color: var(--ink); }
.wr-tick::before { content: ""; position: absolute; left: -4px; top: 4px; width: 7px; height: 7px; border-radius: 50%; background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--muted); }
.wr-tick[data-tick="lead"]::before { background: var(--ink); box-shadow: none; }

/* note cards open the reader: the title link stretches over its card; "Learned from" links stay on top */
.n-lead, .n-image, .n-quote, .n-more li { position: relative; }
.n-open { color: inherit; text-decoration: none; }
.n-open::after { content: ""; position: absolute; inset: 0; z-index: 1; cursor: pointer; }
.n-open:focus-visible { outline: none; }
.n-open:focus-visible::after { outline: 2px solid var(--focus); outline-offset: 4px; }
.n-from a { position: relative; z-index: 2; }
.n-lead, .n-image { transition: box-shadow .3s, transform .3s cubic-bezier(.22,1,.36,1); }
.n-lead:hover, .n-image:hover { transform: translateY(-2px); box-shadow: 0 1px 0 rgba(31,36,33,.04), 0 0 0 1px var(--hair-2), 0 26px 44px -26px rgba(31,36,33,.36); }
.n-lead:hover .n-open, .n-image:hover .n-open, .n-turn:hover .n-open, .n-quote:hover .n-open, .n-more li:hover .n-open { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: var(--hair); }

/* the note reader: one sheet of the same notebook paper, over a dimmed Home */
html.is-reading { overflow: hidden; }
html { scrollbar-gutter: stable; }
.note-reader { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 72px 16px 64px; border: 0; background: transparent; overflow-y: auto; overscroll-behavior: contain; }
.note-reader::backdrop { background: transparent; }
.nr-dim { position: fixed; inset: 0; background: rgba(31, 36, 33, .34); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.nr-sheet { position: relative; max-width: 700px; margin: 0 auto; background: var(--sheet); color: var(--ink); padding: 40px 56px 44px 84px; box-shadow: 0 30px 70px -30px rgba(31,36,33,.5), 0 0 0 1px var(--hair-2);
  background-image: linear-gradient(90deg, transparent 51px, var(--lilac) 51px, var(--lilac) 52px, transparent 52px); }
.nr-close { position: absolute; top: 18px; right: 18px; display: inline-flex; align-items: center; gap: 8px; border: 0; border-radius: 999px; padding: 7px 10px 7px 14px; background: none; box-shadow: inset 0 0 0 1px var(--hair); font: 500 14px/1 var(--sans); color: var(--ink); cursor: pointer; }
.nr-close:hover { box-shadow: inset 0 0 0 1px var(--ink); }
.nr-close kbd { font: 500 11px/1 var(--mono); color: var(--muted); border: 1px solid var(--hair); border-radius: 4px; padding: 3px 5px; }
.nr-fig { margin: 22px 0 0; aspect-ratio: 16 / 10; overflow: hidden; background: #e9eae6; }
.nr-fig img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 46%; }
.nr-was { margin-top: 22px; font-size: 17px; color: var(--faint); }
.nr-was s { text-decoration-color: var(--teal); text-decoration-thickness: 2px; }
.nr-title { margin: 18px 0 22px; max-width: 18em; font-size: clamp(28px, 3.2vw, 38px); line-height: 1.14; font-weight: 560; font-variation-settings: "wdth" 96; letter-spacing: -.02em; text-wrap: pretty; }
.nr-title:focus { outline: none; }
.nr-text p { font-size: 18px; line-height: 1.7; max-width: 34em; }
.nr-text p + p { margin-top: 14px; }
.nr-from { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 20px; margin-top: 30px; padding-top: 14px; border-top: 1px dashed var(--dash); font-size: 15px; color: var(--muted); }
.nr-from a { color: var(--teal); }

.toast { position: fixed; left: 50%; bottom: 24px; z-index: 60; translate: -50% 12px; max-width: calc(100% - 32px); padding: 10px 16px; border-radius: 999px; background: var(--ink); color: var(--paper); font-size: 14.5px; opacity: 0; pointer-events: none; transition: opacity .2s, translate .3s cubic-bezier(.22,1,.36,1); }
.toast.is-on { opacity: 1; translate: -50% 0; }

/* ---------------- 3. work: the sample room ----------------
   A different room in the same house: a linen wall, a pale ash closet with a steel rail between
   two wooden sockets, and a shelf the light falls on. Drawn, not photographed. */
.room {
  --wood: #DDD5C8; --wood-lit: #E9E3D9; --wood-edge: #BDB2A1; --grain: rgba(110, 92, 66, .1);
  --linen: #E9EAE6; --cloth: #E1E2DD;
  margin-top: 128px; padding: 52px 0 40px; position: relative;
  background:
    repeating-linear-gradient(0deg, rgba(31,36,33,.022) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(31,36,33,.018) 0 1px, transparent 1px 4px),
    var(--linen);
  box-shadow: inset 0 10px 0 var(--wood), inset 0 11px 0 var(--wood-edge);   /* the picture-rail moulding: where the room begins */
}
.room .sec-rule { border-top-color: rgba(31,36,33,.18); }
.closet { position: relative; max-width: 1264px; margin: 0 auto; padding: 0 32px; }
.closet::before, .closet::after { /* the jambs */
  content: ""; position: absolute; top: 0; bottom: 0; width: 32px; z-index: 2;
  background: repeating-linear-gradient(90deg, transparent 0 5px, var(--grain) 5px 6px, transparent 6px 13px, var(--grain) 13px 14px), linear-gradient(90deg, var(--wood-lit), var(--wood) 60%, var(--wood-edge));
}
.closet::before { left: 0; }
.closet::after { right: 0; transform: scaleX(-1); }
.opening {
  position: relative; padding-top: 34px;
  border-top: 26px solid var(--wood);                                    /* the cornice */
  background:
    linear-gradient(rgba(31,36,33,.13), transparent 70px),               /* shade under the cornice */
    linear-gradient(90deg, rgba(31,36,33,.07), transparent 90px, transparent calc(100% - 90px), rgba(31,36,33,.07)),
    repeating-linear-gradient(0deg, rgba(31,36,33,.03) 0 1px, transparent 1px 3px),
    var(--cloth);
  box-shadow: inset 0 1px 0 var(--wood-edge);
}
.closet > .opening { border-image: linear-gradient(var(--wood-lit), var(--wood) 70%, var(--wood-edge)) 1; }
.opening::before, .opening::after { /* wooden sockets holding the rail */
  content: ""; position: absolute; top: 52px; width: 18px; height: 26px; border-radius: 3px; z-index: 3;
  background: linear-gradient(var(--wood-lit), var(--wood-edge)); box-shadow: 0 2px 3px rgba(31,36,33,.2);
}
.opening::before { left: 6px; } .opening::after { right: 6px; }
.closet .rail { width: auto; margin-left: 0; height: 404px; }
.shelf { position: relative; height: 34px; z-index: 1;
  background: linear-gradient(var(--wood-lit) 0 9px, var(--wood-edge) 9px 10px, var(--wood) 10px calc(100% - 1px), var(--wood-edge) calc(100% - 1px));
  box-shadow: 0 22px 26px -18px rgba(31,36,33,.35); }
.shelf::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 26px; background: linear-gradient(transparent, rgba(31,36,33,.1)); pointer-events: none; }
.room [data-rack-caption] { margin-top: 30px; }
.room .list { margin-top: 0; padding: 8px 40px 28px; border-top: 0; }
.room .list li a { border-bottom-color: rgba(31,36,33,.1); }
.view-toggle { display: inline-flex; border-radius: 999px; padding: 3px; flex-shrink: 0; box-shadow: inset 0 0 0 1px var(--hair); }
.view-toggle button { font: 500 14px/1 var(--sans); border: 0; background: none; color: var(--muted); padding: 8px 15px; border-radius: 999px; cursor: pointer; }
.view-toggle button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.rod { background: linear-gradient(#fbfbfa, #b9bec1 55%, #8a9094); box-shadow: 0 2px 4px rgba(31,36,33,.18); }
.garment { --hanger: #8f9599; }
.front { background: var(--sheet); }
.front::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: var(--accent); }
.piece { filter: drop-shadow(0 18px 16px rgba(31,36,33,.2)); }
.type-cover { font-size: 21px; font-weight: 640; font-variation-settings: "wdth" 112; color: var(--accent); line-height: 1.1; }
.side { background: var(--accent); color: #fff; font: 500 10.5px/1 var(--mono); letter-spacing: .12em; }
.tag { background: var(--sheet); color: var(--ink); font: 500 11.5px/1.2 var(--mono); padding: 4px 9px 5px; border-radius: 2px; border-top: 3px solid var(--accent); box-shadow: 0 6px 14px -6px rgba(31,36,33,.4); }
[data-rack-caption] { text-align: center; min-height: 124px; }
.cap-title { font-size: 28px; line-height: 1.15; font-weight: 560; font-variation-settings: "wdth" 96; letter-spacing: -.018em; }
.cap-title a { color: var(--ink); text-decoration: none; }
.cap-sum { margin-top: 4px; color: var(--muted); }
.cap-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 24px; margin-top: 10px; font: 500 12.5px/1.5 var(--mono); color: var(--muted); }
.cap-meta a { color: var(--teal); }
.list { margin-top: 10px; }
.list li a { display: grid; grid-template-columns: 250px minmax(0, 1fr) 150px; gap: 6px 32px; padding: 14px 0; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--hair-2); }
.list li a:hover .li-title { text-decoration: underline; }
.li-title { font-weight: 560; box-shadow: inset 0 -2px 0 var(--accent); justify-self: start; }
.li-sum { color: var(--muted); }
.li-meta { color: var(--muted); font: 500 12.5px/1.9 var(--mono); text-align: right; }

/* recent updates: till receipts, as on RIRRI'S counter */
.updates { padding-top: 88px; }
.updates-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 22px; }
.updates-head h3 { font-size: 22px; font-weight: 560; letter-spacing: -.012em; }
.receipts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; align-items: start; }
.receipt { background: var(--sheet); padding: 16px 18px 22px; box-shadow: 0 10px 22px -18px rgba(31,36,33,.4), 0 0 0 1px var(--hair-2);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 7px), 95% 100%, 90% calc(100% - 7px), 85% 100%, 80% calc(100% - 7px), 75% 100%, 70% calc(100% - 7px), 65% 100%, 60% calc(100% - 7px), 55% 100%, 50% calc(100% - 7px), 45% 100%, 40% calc(100% - 7px), 35% 100%, 30% calc(100% - 7px), 25% 100%, 20% calc(100% - 7px), 15% 100%, 10% calc(100% - 7px), 5% 100%, 0 calc(100% - 7px)); }
.receipt:nth-child(2) { margin-top: 18px; }
.receipt:nth-child(4) { margin-top: 8px; }
.rc-top { display: flex; justify-content: space-between; gap: 8px; padding-bottom: 8px; border-bottom: 1px dashed var(--dash); font: 500 12px/1.4 var(--mono); color: var(--muted); }
.rc-top span:last-child { color: var(--ink); }
.rc-text { padding: 10px 0; font-size: 15.5px; line-height: 1.45; }
.rc-foot { padding-top: 8px; border-top: 1px dashed var(--dash); font: 500 12px/1.4 var(--mono); }
.rc-foot a { color: var(--teal); }

/* ---------------- 4. contact me: a postcard on the same paper ---------------- */
.contact { padding-bottom: 120px; }
.postcard { max-width: 1000px; margin: 0 auto; background: var(--sheet); display: grid; grid-template-columns: 1.1fr 1px .9fr; gap: 0 48px; padding: 50px 54px 52px; position: relative; box-shadow: var(--lift); }
.postcard .divider { background: var(--hair); }
.postcard h2 { font-size: clamp(40px, 4.6vw, 60px); line-height: 1; font-weight: 480; font-variation-settings: "wdth" 96; letter-spacing: -.03em; }
.postcard .msg { margin-top: 18px; max-width: 24em; font-size: 18px; line-height: 1.55; color: var(--muted); }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.btn { display: inline-block; padding: 11px 20px 12px; border-radius: 999px; font-weight: 500; font-size: 15.5px; text-decoration: none; }
.btn-primary { background: var(--ink); color: var(--paper); }
.btn-primary:hover { background: #2A302C; }
.btn-plain { box-shadow: inset 0 0 0 1px var(--hair); color: var(--ink); }
.btn-plain:hover { box-shadow: inset 0 0 0 1px var(--ink); }
.address { padding-top: 92px; }
.address p { padding: 10px 0; border-bottom: 1px dashed var(--dash); }
.address a { color: var(--ink); }
.address .email { font-size: 22px; font-weight: 560; letter-spacing: -.01em; }
.stamp { position: absolute; top: 30px; right: 34px; width: 66px; height: 80px; display: grid; place-items: center; background: var(--red); color: #fff;
  font: 500 10.5px/1.3 var(--mono); letter-spacing: .08em; text-align: center; outline: 2px dotted var(--sheet); outline-offset: -6px; transform: rotate(3deg); }
.contact-more { text-align: center; margin-top: 28px; color: var(--muted); font-size: 15.5px; }
.contact-more a { color: var(--teal); }

/* footer */
.foot { border-top: 1px solid var(--hair); font: 500 12.5px/1.5 var(--mono); color: var(--muted); padding: 22px 0 40px; }
.foot .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; }
.foot nav { display: flex; flex-wrap: wrap; gap: 20px; }
.foot a { color: var(--ink); text-decoration: none; }
.foot a:hover { text-decoration: underline; }

@media (max-width: 1080px) { .nav { gap: 16px; font-size: 15px; } }
@media (max-width: 767px), (prefers-reduced-motion: reduce) { .opening::before, .opening::after { display: none; } .opening { padding-top: 20px; } }
@media (max-width: 980px) {
  .top { flex-wrap: wrap; row-gap: 10px; }
  .intro { grid-template-columns: 1fr; gap: 56px; min-height: 0; padding-top: 40px; }
  .intro-world { max-width: 360px; }
  .n-lead { grid-column: 1 / -1; grid-row: auto; }
  .n-image, .n-quote, .n-turn, .n-more { grid-column: span 6; }
  .receipts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .postcard { grid-template-columns: 1fr; }
  .postcard .divider { display: none; }
  .address { padding-top: 26px; }
}
/* tablet portrait: the statement and a smaller arch side by side, so the notebook starts on the first screen */
@media (min-width: 768px) and (max-width: 980px) {
  .intro { grid-template-columns: minmax(0, 1fr) clamp(228px, 31vw, 288px); gap: 44px; align-items: start; padding: 36px 0 72px; }
  .intro-world { max-width: none; margin-top: 10px; }
}
@media (max-width: 640px) {
  .wrap { padding: 0 18px; }
  .top { padding: 12px 18px 10px; }
  html { scroll-padding-top: 104px; }
  .nav { width: 100%; flex-wrap: nowrap; gap: 16px; overflow-x: auto; scrollbar-width: none; margin: 0 -18px; padding: 2px 18px 4px; width: calc(100% + 36px); }
  .nav::-webkit-scrollbar { display: none; }
  .nav a { flex-shrink: 0; }
  .top { position: relative; }
  .nav .pill-world { position: absolute; top: 8px; right: 18px; }
  .week { grid-template-columns: 1fr; }
  .week-rail { display: none; }
  .room { margin-top: 88px; padding-top: 40px; }
  .note-reader { padding: 56px 10px 32px; }
  .nr-sheet { padding: 56px 22px 30px 40px; background-image: linear-gradient(90deg, transparent 23px, var(--lilac) 23px, var(--lilac) 24px, transparent 24px); }
  .nr-close { top: 12px; right: 12px; }
  .closet { padding: 0 14px; }
  .closet::before, .closet::after { width: 14px; }
  .opening { border-top-width: 16px; }
  .room .list { padding: 4px 16px 20px; }
  .sec { padding-top: 88px; }
  :root { --mast: 104px; }
  .st-name { font-variation-settings: "wdth" 100; }
  .intro-world { max-width: 300px; margin: 0 10px; }
  .window .sill { margin: 8px -8px 0; }
  .lede { font-size: 17px; }
  .sec-head { flex-direction: column; align-items: flex-start; }
  .updates-head { flex-direction: column; gap: 4px; }
  .collection { gap: 20px; }
  .n-image, .n-quote, .n-turn, .n-more { grid-column: 1 / -1; }
  .n-lead { padding: 26px 22px 28px 40px; background-image: linear-gradient(90deg, transparent 23px, var(--lilac) 23px, var(--lilac) 24px, transparent 24px); }
  .receipts { grid-template-columns: 1fr; }
  .receipt:nth-child(n) { margin-top: 0; }
  .list li a { grid-template-columns: 1fr; gap: 2px; }
  .li-meta { text-align: left; }
  .contact { padding-bottom: 80px; }
  .postcard { padding: 34px 22px 30px; }
  .stamp { width: 52px; height: 64px; top: 18px; right: 18px; font-size: 9.5px; }
}