/* ==================================================================
   Ally Msuo
   1. tokens + reset
   2. topbar
   3. home: hero + cabinet of folders
   4. file page: folder, tab, paper
   5. transitions (folder opening)
   6. responsive
   ================================================================== */

/* ---------- 1. tokens + reset ---------- */

:root {
  --bg: #181818;
  --ink: #f4f2ea;
  --ink-dim: #9c9c96;
  --paper: #f3f1e8;
  --paper-rule: #dad6c7;
  --paper-ink: #1b1b19;
  --paper-ink-dim: #55534c;

  --topbar-h: 46px;
  --page-x: clamp(18px, 4vw, 46px);
  --cab-inset: clamp(18px, 5vw, 64px);   /* tabs and note, inside a full-bleed band */

  --band-h: clamp(40px, 3.9vw, 52px);
  --tab-h: clamp(34px, 3.4vw, 44px);
  --tab-dip: 15px;
  --tab-r: clamp(7px, .9vw, 11px);        /* a tab's top corners */
  --tab-fillet: clamp(8px, 1.1vw, 14px);  /* concave flare where a tab meets its band */

  --dhead-x: clamp(16px, 2.3vw, 30px);

  /* paper geometry, shared by the paper and the folder flap */
  --pl: clamp(14px, 4.4vw, 56px);
  --paper-w: min(940px, 73vw);
  --folder-gap: clamp(12px, 2.6vw, 34px);           /* folder colour right of the paper */
  --folder-r: clamp(7px, .9vw, 11px);               /* folder's top-right corner */
  --folder-w: calc(var(--pl) + var(--paper-w) + var(--folder-gap));
  --paper-t: clamp(12px, 2vw, 26px);
  --hole-x: clamp(20px, 2.7vw, 34px);
  --hole-y: clamp(48px, 6vw, 76px);
  --hole-step: clamp(100px, 11.8vw, 151px);
  --rule-x: clamp(38px, 5.6vw, 72px);

  --ease: cubic-bezier(.65, .02, .28, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);

  --disp: 'Anton', 'Haettenschweiler', 'Arial Narrow', Impact, sans-serif;
  --serif: 'Source Serif 4', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scrollbar-gutter: stable;   /* no shift when scrolling is locked mid-transition */
}

html.is-locked, html.is-locked body { overflow: hidden; }

/* no selecting, no long-press callout, no dragging images off the page.
   fields keep normal behaviour so typing in one still works. */
body {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

input, textarea, select, [contenteditable=""], [contenteditable="true"] {
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}

img { -webkit-user-drag: none; user-drag: none; }

body {
  margin: 0;
  padding-top: var(--topbar-h);
  background: var(--bg);
  color: var(--ink);
  font-family: var(--serif);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

button { font: inherit; color: inherit; }

:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* headings are focused programmatically on navigation so the change of page is
   announced. they aren't tabbable, so they don't need a visible ring. */
[tabindex="-1"]:focus,
[tabindex="-1"]:focus-visible { outline: none; }

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 99;
  background: var(--ink);
  color: #111;
  padding: 10px 14px;
  font-family: var(--mono);
  font-size: 12px;
}
.skip:focus { left: 8px; top: 8px; }

/* ---------- 2. topbar ---------- */

.topbar {
  position: fixed;
  inset: 0 0 auto;
  z-index: 60;
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--page-x);
  background: var(--bg);
  border-bottom: 1px solid rgba(244, 242, 234, .13);
}

.wordmark {
  font-family: var(--disp);
  font-size: 15px;
  letter-spacing: .075em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
}

.topnav {
  position: absolute;
  right: var(--page-x);
  top: 50%;
  transform: translateY(-50%);
}
.topnav a {
  font-size: 14px;
  color: var(--ink);
  text-decoration: none;
  opacity: .92;
}
.topnav a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }

.stage { position: relative; }

/* ---------- 3. home ---------- */

.hero {
  text-align: center;
  padding: clamp(44px, 7.2vw, 96px) var(--page-x) clamp(54px, 7.8vw, 100px);
}

.hero-title {
  margin: 0;
  font-family: var(--disp);
  font-weight: 400;
  font-size: clamp(2.9rem, 10.4vw, 7rem);
  line-height: .94;
  letter-spacing: -.004em;
  text-transform: uppercase;
}

.hero-sub {
  margin: clamp(12px, 1.6vw, 22px) auto 0;
  max-width: 545px;
  font-size: clamp(14px, 1.25vw, 16px);
  line-height: 1.62;
  color: var(--ink-dim);
}

/* the cabinet fills the window: bands run edge to edge and the bottom folder
   grows to the foot of the viewport, so no page background shows through */
.view-home {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - var(--topbar-h));
  min-height: calc(100dvh - var(--topbar-h));
}

/* The cabinet stretches to the foot of the window, but its rows stay in normal
   block flow. They must not be flex items: a folder body opens by animating
   height, and inside a flex item that measurement can collapse.
   The leftover space below the last row is filled by the cabinet itself, in
   that row's colour, painted in the content box so the tab overhang above the
   first band stays page-dark. */
.cabinet {
  flex: 1 0 auto;
  padding-top: calc(var(--tab-h) - var(--tab-dip));
  background:
    linear-gradient(var(--last-c, transparent), var(--last-c, transparent))
    content-box no-repeat;
}

.folder { position: relative; background: var(--c); }

.folder:last-child .folder-note {
  padding-bottom: 24px;
}

/* Tall narrow screens (iPad portrait): docking the cabinet stops the last-row
   colour from becoming a huge empty field under the folders. Leftover height
   sits between hero and cabinet instead. */
@media (min-height: 900px) and (max-width: 1024px) {
  .cabinet {
    flex: 0 0 auto;
    margin-top: auto;
    background: none;
  }
  .folder:last-child {
    padding-bottom: clamp(24px, 3.5vh, 48px);
  }
}

/* The row of name tabs that sits above (and behind) the band. The gap clears
   two fillets, since each tab flares outside its own box, and the strip is
   padded by one fillet so those flares survive the scroll clip. A row with
   more titles than the window can hold scrolls sideways rather than shrinking
   its tabs or wrapping into the row above. */
.folder-tabs {
  position: absolute;
  left: calc(var(--cab-inset) - var(--tab-fillet));
  right: 0;
  bottom: calc(100% - var(--tab-dip));
  z-index: 1;
  display: flex;
  gap: calc(var(--tab-fillet) * 2 + 5px);
  padding: 7px var(--tab-fillet) 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  /* The strip runs the full width so it can scroll, and it hangs over the band
     of the row above. Only the tabs themselves may take pointer events, or the
     empty part of the strip swallows clicks meant for that band's toggle.
     Dragging a tab still scrolls the strip, since the strip is its scroll
     parent regardless of this. */
  pointer-events: none;
}
.folder-tabs::-webkit-scrollbar { display: none; }

/* only rows that really overflow fade out at the right edge */
.folder-tabs.is-scrollable {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 42px), #0000);
  mask-image: linear-gradient(to right, #000 calc(100% - 42px), #0000);
}

.file-tab {
  position: relative;
  pointer-events: auto;
  flex: 0 0 auto;
  min-width: 0;
  height: calc(var(--tab-h) + var(--tab-dip));
  padding: 0 clamp(12px, 1.7vw, 23px) var(--tab-dip);
  display: flex;
  align-items: center;
  border: 0;
  border-radius: var(--tab-r) var(--tab-r) 0 0;
  background: var(--c);
  color: var(--tc);
  font-family: var(--serif);
  font-size: clamp(13px, 1.6vw, 21px);
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: transform .28s var(--ease), filter .28s var(--ease);
}
.file-tab > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The flares. Each is a block of tab colour sitting just outside the tab, with
   a quarter disc carved out of its outer corner, so the tab's vertical side
   curves into the band's top edge instead of meeting it at a right angle. The
   carve is tangent to the side at the top and to the band at the bottom. Both
   blocks run past the band's edge so the join survives sub-pixel rounding. */
.file-tab::before,
.file-tab::after {
  content: '';
  position: absolute;
  bottom: -1px;
  width: var(--tab-fillet);
  height: calc(var(--tab-fillet) + var(--tab-dip) + 1px);
  pointer-events: none;
}
.file-tab::before {
  left: calc(-1 * var(--tab-fillet));
  background: radial-gradient(circle var(--tab-fillet) at 0 0,
    #0000 calc(100% - .7px), var(--c) 100%);
}
.file-tab::after {
  right: calc(-1 * var(--tab-fillet));
  background: radial-gradient(circle var(--tab-fillet) at 100% 0,
    #0000 calc(100% - .7px), var(--c) 100%);
}

.file-tab:hover { transform: translateY(-5px); filter: brightness(1.08); }
.file-tab:active { transform: translateY(-1px); }

.folder-bar {
  position: relative;
  z-index: 2;
  margin: 0;
  height: var(--band-h);
  background: var(--c);
  font-weight: 400;
}

.folder-toggle {
  width: 100%;
  height: 100%;
  padding: 0 clamp(16px, 3.6vw, 46px);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--tc);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .07em;
  text-align: right;
}

.chev {
  flex: none;
  width: 10px;
  height: 7px;
  transform: rotate(90deg);
  transition: transform .38s var(--ease);
}
.folder.is-open .chev { transform: rotate(0deg); }

/* The body's height is driven from script: 0, then the measured height of its
   content, then auto once the transition ends. The pure-CSS 0fr → 1fr grid
   trick mis-sized this row depending on the layout above it, which left the
   note offset and clipped. A measured pixel height can't do that. */
.folder-body {
  position: relative;
  z-index: 2;
  height: 0;
  overflow: hidden;
  background: var(--c);
  transition: height .45s var(--ease);
}

/* Sit close under the band, and keep clear space at the foot. The next row's
   tabs hang up into this padding by (tab-h - tab-dip), so that much is added
   back or the last line looks cut off by them. */
.folder-note {
  padding:
    4px
    clamp(20px, 4vw, 46px)
    calc(var(--tab-h) - var(--tab-dip) + 24px)
    var(--cab-inset);
  max-width: 88ch;
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.82;
  color: var(--tc);
  opacity: 0;
  transition: opacity .3s var(--ease);
}
.folder.is-open .folder-note { opacity: .96; transition-delay: .14s; }
.folder-note p { margin: 0; }
.folder-note p + p { margin-top: 1.6em; }

/* ---------- 4. file page ---------- */

.dhead { padding: clamp(30px, 5.4vw, 70px) var(--dhead-x) clamp(26px, 3.7vw, 48px); }

/* which kind of page this is: privacy policy, support, how to play */
.dkicker {
  margin: clamp(10px, 1.3vw, 17px) 0 0;
  font-family: var(--mono);
  font-size: clamp(10px, .95vw, 12.5px);
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

.dtitle {
  margin: 0;
  font-family: var(--disp);
  font-weight: 400;
  font-size: clamp(2.2rem, 7.5vw, 6rem);
  line-height: .92;
  letter-spacing: -.004em;
  text-transform: uppercase;
}

/* the folder is an object, not a full-bleed field: it runs off the left edge
   and stops short of the right one so the tab can stick out past its edge.
   Height to the foot of the viewport is set in fillFolder() — iPad Safari
   won't reliably distribute leftover space from min-height/100dvh alone. */
.dfolder {
  position: relative;
  width: var(--folder-w);
  min-height: 62vh;
  background: var(--c);
  border-radius: 0 var(--folder-r) 0 0;
  padding-bottom: clamp(40px, 6vh, 72px);
}

/* Tall narrow screens: a CSS fallback before script runs. Prefer svh so iPad
   doesn't size against the large viewport and leave a scrollable dark gap. */
@media (min-height: 900px) and (max-width: 1024px) {
  .dfolder {
    min-height: calc(100vh - var(--topbar-h) - 12rem);
    min-height: calc(100svh - var(--topbar-h) - 12rem);
  }
}

/* The tab bulges out of the folder's right edge: a rounded trapezoid whose
   sloped edges peel away from the edge through a concave fillet, the way a
   real file tab does. Drawn with clip-path: path(), so the geometry is fixed
   px per breakpoint (curves can't be scaled non-uniformly without distorting).

   Two things keep the join clean. The path is inset 4px so its left strip is
   buried inside the folder rather than butting against it, and the shape
   starts just below the folder's top-right radius, where that corner has
   finished curving and the edge is vertical again. Start it any higher and the
   corner and the fillet cross, which leaves a sharp spike. */
/* The tab sits in a slot pinned to the folder's right edge. The slot clips it,
   so animating the slot's width slides the tab out of that edge (and back into
   it) with no distortion to the shape or the label. The folder and its tab are
   separate elements, but they never move independently. */
.dtab-slot {
  --tab-w: 50px;    /* 46px of tab + 4px buried in the folder */
  --tab-h: 300px;
  /* the straight run between the sloped ends: the only part a name can use */
  --tab-run: 220px;
  --tab-path: path("M0,0 L4,0 C4,23.6 17,38 33,38 A17,17 0 0 1 50,55 L50,245 A17,17 0 0 1 33,262 C17,262 4,276.4 4,300 L0,300 Z");

  position: absolute;
  top: calc(var(--folder-r) + 2px);
  left: calc(100% - 4px);
  width: var(--tab-w);
  height: var(--tab-h);
  overflow: hidden;
}

.dtab {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--tab-w);
  height: var(--tab-h);
  /* the left 4px is buried in the folder, so pad it back to centre the name on
     the visible part of the tab */
  padding: 12px 0 12px 4px;
  /* vertical writing mode flips the flex axes: the main axis runs top to
     bottom, so justify-content centres the name along the tab's length */
  display: flex;
  justify-content: center;
  align-items: center;
  white-space: nowrap;
  border: 0;
  background: var(--c);
  color: var(--tc);
  cursor: pointer;
  clip-path: var(--tab-path);
  font-family: var(--serif);
  /* the starting size. fitTab() in app.js steps it down if the name runs
     longer than the tab, since only measurement knows the real text length */
  font-size: clamp(14px, 1.7vw, 21px);
  letter-spacing: .01em;
  text-decoration: none;
  writing-mode: vertical-rl;
  text-orientation: mixed;
}
.dtab:hover { filter: brightness(1.08); }

@media (max-width: 1199px) {
  .dtab-slot {
    --tab-w: 42px;
    --tab-h: 250px;
    --tab-run: 186px;
    --tab-path: path("M0,0 L4,0 C4,18.6 14.8,30 28,30 A14,14 0 0 1 42,44 L42,206 A14,14 0 0 1 28,220 C14.8,220 4,231.4 4,250 L0,250 Z");
  }
}

@media (max-width: 899px) {
  .dtab-slot {
    --tab-w: 36px;
    --tab-h: 210px;
    --tab-run: 156px;
    --tab-path: path("M0,0 L4,0 C4,15.5 13,25 24,25 A12,12 0 0 1 36,37 L36,173 A12,12 0 0 1 24,185 C13,185 4,194.5 4,210 L0,210 Z");
  }
}

.dfolder-in {
  position: relative;
  padding-top: var(--paper-t);
  perspective: 1700px;
  perspective-origin: 40% 0;
}

.paper {
  /* the folder's colour, darkened enough to stay legible on the paper */
  --c-ink: var(--c);
  --c-ink: color-mix(in srgb, var(--c) 68%, #101008);

  position: relative;
  z-index: 1;
  width: var(--paper-w);
  margin-left: var(--pl);
  background-color: var(--paper);
  background-image:
    radial-gradient(circle clamp(5px, .55vw, 7px) at var(--hole-x) var(--hole-y), var(--c) 98%, transparent 100%),
    linear-gradient(var(--paper-rule), var(--paper-rule));
  background-size: 100% var(--hole-step), 1px 100%;
  background-position: 0 0, var(--rule-x) 0;
  background-repeat: repeat-y, no-repeat;
  color: var(--paper-ink);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .18);
}

/* paper grain */
.paper::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: multiply;
  opacity: .06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

.paper-in {
  position: relative;
  display: grid;
  grid-template-columns: clamp(130px, 15.8vw, 202px) minmax(0, 1fr);
  gap: 0 clamp(26px, 6.5vw, 83px);
  padding:
    clamp(40px, 6.3vw, 81px)
    clamp(24px, 6.4vw, 82px)
    clamp(56px, 7vw, 92px)
    clamp(52px, 8.1vw, 104px);
}

.meta {
  font-family: var(--mono);
  font-size: clamp(10.5px, 1vw, 12.8px);
  line-height: 1.66;
  color: var(--paper-ink-dim);
}
.meta-row + .meta-row { margin-top: 1.6em; }
.meta-k { display: block; font-weight: 600; color: var(--paper-ink); }

.prose { font-size: clamp(16px, 1.64vw, 21px); line-height: 1.43; }
.prose p { margin: 0; }
.prose p + p { margin-top: 1.5em; }
.prose a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.prose a:hover { text-decoration-thickness: 2px; }

/* essays run as continuous prose: drop cap, indented turns */
.prose--essay p + p { text-indent: 1.9em; }
.prose--essay > p:first-child::first-letter {
  float: left;
  font-size: 5.6em;
  line-height: .74;
  padding: .04em .06em 0 0;
}

/* documents are structured: a lead, a marked summary, then ruled sections */
.prose-lead {
  font-size: 1.12em;
  line-height: 1.34;
  font-style: italic;
  color: #3a3833;
}

.prose-h {
  margin: 2em 0 .7em;
  padding-top: .95em;
  border-top: 1px solid var(--paper-rule);
  font-family: var(--mono);
  font-size: .58em;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--paper-ink);
}
.prose-h:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

.prose-key,
.prose-list { margin: 0; padding: 0; list-style: none; }
.prose-key li,
.prose-list li { position: relative; padding-left: 1.5em; }
.prose-key li + li,
.prose-list li + li { margin-top: .38em; }

/* the summary block: a rule of colour, set in the folder's own hue */
.prose-key {
  margin-top: 1.5em;
  padding: .1em 0 0;
  font-weight: 600;
}
.prose-key li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .52em;
  width: .62em;
  height: .34em;
  border: solid var(--c-ink);
  border-width: 0 0 2px 2px;
  transform: rotate(-45deg);
}

.prose-list { margin-top: 1.1em; }
.prose-list li::before {
  content: '';
  position: absolute;
  left: .16em;
  top: .58em;
  width: .3em;
  height: .3em;
  border-radius: 50%;
  background: var(--paper-ink-dim);
}

.prose-key + *,
.prose-list + * { margin-top: 1.5em; }

/* a sub-heading inside a section, e.g. one troubleshooting case */
.prose-h3 {
  margin: 1.5em 0 .25em;
  font-size: 1em;
  font-weight: 600;
  line-height: 1.3;
}
.prose-h3 + p { margin-top: 0; }

/* short factual tags, set in mono like the rest of the labelling */
.prose-pills {
  display: flex;
  flex-wrap: wrap;
  gap: .5em;
  margin: 1.2em 0 0;
  padding: 0;
  list-style: none;
}
.prose-pills li {
  padding: .3em .7em;
  border: 1px solid var(--paper-rule);
  border-radius: 100px;
  font-family: var(--mono);
  font-size: .52em;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--paper-ink-dim);
}

/* questions stay folded until asked, like the folders themselves */
.prose-faq { margin-top: 1.2em; border-top: 1px solid var(--paper-rule); }
.prose-faq details { border-bottom: 1px solid var(--paper-rule); }
.prose-faq summary {
  padding: .62em 1.6em .62em 0;
  position: relative;
  cursor: pointer;
  font-weight: 600;
  line-height: 1.34;
  list-style: none;
}
.prose-faq summary::-webkit-details-marker { display: none; }
.prose-faq summary::after {
  content: '';
  position: absolute;
  right: .3em;
  top: 1.05em;
  width: .42em;
  height: .42em;
  border: solid var(--c-ink);
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
  transition: transform .25s var(--ease);
}
.prose-faq details[open] summary::after { transform: rotate(-135deg); }
.prose-faq summary:hover { color: var(--c-ink); }
.prose-faq-body { padding: 0 1.6em .9em 0; }
.prose-faq-body > p { margin: 0; }
.prose-faq-body > * + * { margin-top: .9em; }

/* guide sections are longer than an FAQ answer, so their summaries carry more
   weight and their bodies get room to breathe */
.prose-faq--guide summary { padding: .85em 1.6em .85em 0; font-size: 1.02em; }
.prose-faq--guide summary::after { top: 1.3em; }
.prose-faq--guide .prose-faq-body { padding-bottom: 1.4em; }

.prose-h4 {
  margin: 0;
  font-family: var(--mono);
  font-size: .56em;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--paper-ink-dim);
}
.prose-h4 + * { margin-top: .5em !important; }

.prose-ol { margin: 0; padding-left: 1.4em; }
.prose-ol li + li { margin-top: .38em; }

/* a pulled-out note: the thing to remember from a section */
.prose-callout {
  display: flex;
  gap: .7em;
  margin-top: 1.5em;
  padding: .9em 1.1em;
  border-left: 3px solid var(--c-ink);
  background: rgba(0, 0, 0, .035);
}
.prose-callout i { font-style: normal; line-height: 1.4; }
.prose-callout p { margin: 0; }

/* the summary line at the end of a guide section */
.prose-loop {
  padding: .8em 1em;
  border: 1px solid var(--paper-rule);
  background: rgba(0, 0, 0, .025);
  font-size: .94em;
}
.prose-loop b {
  display: block;
  margin-bottom: .25em;
  font-family: var(--mono);
  font-size: .58em;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--c-ink);
}

.dback {
  display: inline-block;
  margin: clamp(26px, 5vh, 52px) 0 0 var(--pl);
  padding: 10px 0;
  border: 0;
  background: none;
  cursor: pointer;
  color: var(--tc);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .07em;
  text-decoration: none;
  opacity: .9;
}
.dback:hover { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }

/* the cover that swings open to reveal the paper */
.flap {
  position: absolute;
  z-index: 2;
  top: var(--paper-t);
  left: var(--pl);
  width: var(--paper-w);
  height: max(460px, calc(100vh - 210px));
  background: var(--c);
  transform-origin: 50% 100%;
  transform: rotateX(-104deg);
  opacity: 0;
  pointer-events: none;
  backface-visibility: hidden;
  transition:
    transform .66s cubic-bezier(.42, 0, .2, 1),
    opacity .22s linear .4s;
}
.flap::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, .1), rgba(0, 0, 0, .16));
}

/* ---------- 5. transitions ---------- */

/* the colour panel that pulls out of the cabinet band as the page unloads */
.fx-panel {
  position: fixed;
  z-index: 45;
  border-radius: 4px 4px 0 0;
  pointer-events: none;
  transition:
    top .56s var(--ease),
    left .56s var(--ease),
    width .56s var(--ease),
    height .56s var(--ease),
    border-radius .56s var(--ease),
    opacity .26s linear;
}

/* home: leaving / arriving */
.view-home .hero,
.view-home .folder {
  transition:
    opacity .42s var(--ease),
    transform .5s var(--ease);
  transition-delay: calc(var(--i, 0) * 45ms);
}
.view-home.is-exiting .hero { opacity: 0; transform: translateY(-16px); }
.view-home.is-exiting .folder { opacity: 0; transform: translateY(30px); }

/* A content page arrives with its folder shut and opens it. The shut state is
   held by html.pre-open, which a one-line script in the page's head adds, so
   with scripting off the page simply renders open. Dropping the class plays the
   opening: the cover swings down, the paper rises, the tab slides out. */
.view-file .dtitle,
.view-file .dkicker,
.view-file .dback { transition: opacity .5s var(--ease) .1s, transform .6s var(--ease) .1s; }
.view-file .dkicker { transition-delay: .18s; }
.view-file .dtab-slot { transition: width .44s var(--ease-out) .1s; }
.view-file .paper { transition: opacity .4s linear .12s, transform .66s var(--ease-out) .1s; }

.pre-open .view-file .dtitle,
.pre-open .view-file .dkicker,
.pre-open .view-file .dback { opacity: 0; transform: translateY(18px); }
.pre-open .view-file .dtab-slot { width: 4px; }
.pre-open .view-file .paper { opacity: 0; transform: translateY(48px) scale(.985); }
.pre-open .view-file .flap { transform: rotateX(0deg); opacity: 1; }

.pre-open .view-file .dtitle,
.pre-open .view-file .dkicker,
.pre-open .view-file .dback,
.pre-open .view-file .dtab-slot,
.pre-open .view-file .paper,
.pre-open .view-file .flap { transition: none; }

/* ---------- 6. responsive ---------- */

@media (max-width: 860px) {
  /* keep room to the right of the folder for the tab to stick out into */
  :root { --paper-w: calc(100vw - var(--pl) - 62px); }
}

@media (max-width: 720px) {
  /* the next row's tabs hang over the bottom of each band, so on narrow
     screens the category label moves up out of their way */
  :root { --tab-dip: 12px; --band-h: 54px; }
  .file-tab { font-size: 13px; padding: 0 11px var(--tab-dip); }
  .folder-toggle {
    align-items: flex-start;
    padding: 6px 12px 0;
    font-size: 9px;
    letter-spacing: .03em;
  }
  .folder-toggle > span { white-space: nowrap; }
  .chev { margin-top: 1px; }
  .folder-note {
    padding:
      4px
      18px
      calc(var(--tab-h) - var(--tab-dip) + 20px)
      var(--cab-inset);
    font-size: 10.5px;
    line-height: 1.75;
  }

  .paper-in { display: block; padding: 34px 22px 48px 48px; }
  .meta { margin-bottom: 28px; }
  .meta-row + .meta-row { margin-top: 1.2em; }
  .prose p:first-child::first-letter { font-size: 4.2em; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .flap { display: none; }
}