/* A case file (25 October 2026, brief in docs/upgrade-2026-10-25/case-files/BRIEF-case-file-layout.md): the file taken out
   of the home page's book. It opens on its own cover, the black cloth with a foil label, the need in white and the yellow
   band with the client pressed into it; scrolling the first screen opens the cover outwards on its spine (casefile.js)
   and the title page under it has the result inked as it clears. Inside, the file is a paper sheet on a darker desk, each part
   with a yellow index tab, its key line inked as it is read, and its photographs clipped on as evidence prints that
   develop. It closes on its back cover, with the next file pressed into the band. Without motion (reduced motion, Pause,
   no script) the cover simply sits above the title page. Entrances in reveal.js, ink and prints in develop.js. */

body.file-page { --desk: #CBC2AF; --paper: #FBF8F0; --cloth: #151515; --ff-serif: 'Marcellus', 'Times New Roman', serif; --bronze-ink: #6E4B21;
  --fc-pw: min(100%, calc(var(--max-w) - 2 * var(--gutter))); --fc-inset: clamp(16px, 3vh, 32px); --fc-sq: 4px; --fc-pad: clamp(24px, 5vw, 72px); --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .36 0 0 0 0 .26 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23g)'/%3E%3C/svg%3E"); background: var(--desk); }
.file { padding-top: var(--nav-h); }

/* ── the cover: a cloth board the size of the title page, lying over it on the desk (Iain, 25 October 2026: it opened
   inwards, and the page behind it did not match the cover). With motion it opens outwards as the home page's book does: the
   free edge lifts towards the reader, passes upright and folds away to the left, showing the inside of the board ── */
.fc { position: relative; }
.fc-cover { position: relative; width: var(--fc-pw); margin: var(--fc-inset) auto 0; min-height: 76svh; color: #F4F1EA; display: flex; }
.fc-face { position: relative; flex: 1; overflow: hidden; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; }
.fc-inside { display: none; }
.fc-front { box-shadow: 0 2px 3px rgba(20, 14, 4, .3), 18px 40px 70px -28px rgba(20, 14, 4, .6);
  background: linear-gradient(90deg, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0) 2.2%, rgba(255, 255, 255, .05) 2.9%, rgba(0, 0, 0, 0) 3.6%), radial-gradient(120% 90% at 30% 30%, rgba(255, 255, 255, .05), rgba(0, 0, 0, .35)), var(--cloth) url(img/home/cloth-tile.webp) 0 0 / 512px; }
.fc-text { position: relative; z-index: 1; width: 100%; box-sizing: border-box; padding: clamp(40px, 7vh, 88px) var(--fc-pad) calc(clamp(40px, 7vh, 88px) + 17%); }
.fc-text .fc-label { font: 400 16px / 1.45 var(--ff-serif); letter-spacing: .16em; margin-bottom: 26px; }
/* the archive's mark (Iain, 25 October 2026: the archive framing): the accession line in the museum's serif, foiled in its
   bronze. The foil sits on each word, since the entrance splits the label into words that rise on their own layers; its
   darkest stop is a shade lighter than the museum bronze, so the thin serif holds on the cloth. The accession number never
   breaks across a line */
.file-page .fc-label, .file-page .fc-label .k { color: transparent; background: linear-gradient(104deg, #bf8f55 0%, #ebc994 34%, #c69662 52%, #f4d8a8 70%, #bf8f55 100%) 0 0 / 220% 100%; -webkit-background-clip: text; background-clip: text; }
.file-page .fc-label .kw { background: none; }
.fc-label .nw { white-space: nowrap; }
.fc-text h1 { font-family: var(--ff-display); font-weight: 700; font-size: clamp(42px, 5.4vw, 88px); line-height: .98; letter-spacing: -.035em; margin: 0; max-width: 14em; text-wrap: balance; color: #F4F1EA; }
.fc-sum { font-size: clamp(17px, 1.35vw, 20px); line-height: 1.5; color: #B3AFA6; max-width: 34em; margin: 28px 0 0; }
/* the band, with the client pressed into it */
.fc-band { position: absolute; left: 0; right: 0; bottom: 10%; height: clamp(64px, 12%, 110px); display: flex; align-items: center; box-shadow: 0 1px 0 rgba(255, 255, 255, .06), 0 -1px 0 rgba(0, 0, 0, .5);
  background: #F2B01E url(img/home/band-tile.webp) 0 50% / auto 100% repeat-x; }
.fc-band span { width: 100%; padding: 0 var(--fc-pad); box-sizing: border-box; font: 800 clamp(13px, 1.3vw, 17px) / 1.4 var(--ff-display); letter-spacing: .3em; text-transform: uppercase;
  color: #4A2F00; text-shadow: 0 1px 0 rgba(255, 232, 160, .6), 0 -1px 0 rgba(70, 36, 0, .3); }   /* pressed in, but dark enough to read (about 6:1) */

/* ── the title page, under the cover ── */
.fc-title { position: relative; background: var(--desk); padding-top: var(--fc-inset); }
.fc-page { max-width: var(--fc-pw); margin: 0 auto; box-sizing: border-box; padding: clamp(48px, 8vh, 96px) var(--fc-pad); background: var(--paper) var(--grain); box-shadow: 0 0 0 1px rgba(60, 45, 20, .1), 0 2px 3px rgba(40, 30, 10, .16);
  display: flex; flex-direction: column; justify-content: center; align-items: flex-end; text-align: right; }   /* on the right: the side the swinging cover uncovers first */
/* the accession stamp: the archive's mark on the title page, in the museum's serif and bronze ink, a double rule round it,
   pressed as the cover clears (casefile.js) */
.fc-stamp { display: inline-grid; gap: 5px; margin-bottom: clamp(22px, 4vh, 36px); padding: 13px 18px 14px; border: 1.5px solid var(--bronze-ink); box-shadow: inset 0 0 0 3px var(--paper), inset 0 0 0 4px var(--bronze-ink);
  color: var(--bronze-ink); font-family: var(--ff-serif); text-align: left; transform: rotate(-1.5deg); mix-blend-mode: multiply; }
.fc-stamp-k { font-size: 12px; line-height: 1.3; letter-spacing: .2em; text-transform: uppercase; }
.fc-stamp-n { font-size: clamp(26px, 2.2vw, 32px); line-height: 1.05; letter-spacing: .02em; }
.fc-stamp-w { font-size: 13px; line-height: 1.3; letter-spacing: .06em; }
@media (prefers-reduced-motion: no-preference) {
  .fc-live .fc-stamp { opacity: 0; transform: rotate(-1.5deg) scale(1.14); }
  .fc-live .fc-stamp.stamp-go { opacity: 1; transform: rotate(-1.5deg); transition: opacity .16s ease-out, transform .28s cubic-bezier(.22, 1, .36, 1); }
}
.file-result { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: end; gap: clamp(20px, 4vh, 40px); }
.file-result .fig { font-family: var(--ff-display); font-weight: 800; font-size: clamp(64px, 7.4vw, 124px); line-height: .95; letter-spacing: -.05em; display: inline-block; white-space: nowrap; }
.file-result .lab { display: block; margin: 14px 0 0 auto; font-size: clamp(16px, 1.3vw, 19px); line-height: 1.45; color: var(--ink-mid); max-width: 26em; }
.file-note { margin: clamp(24px, 4vh, 40px) 0 0; padding-top: 14px; border-top: 1px solid var(--divider); max-width: 30em; font-size: 14px; line-height: 1.5; color: var(--ink-mid); }
.fc-title::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(20, 14, 4, .5), rgba(20, 14, 4, .1)); opacity: var(--lift, 0); }

/* motion on (casefile.js sets fc-live): the board pins for 0.7 of a screen over the title page and opens outwards on its
   spine, 0 to 180deg; the reader's eye is at the middle of the screen, so the lifting edge grows a little and then folds
   away off the left, never over the page. The board stands a few pixels proud of the page, as a book's boards do */
.fc-live .fc { height: calc(170svh - var(--nav-h)); }   /* the travel is height, not padding: a sticky box only moves within its parent's content box */
.fc-live .fc-stage { position: sticky; top: var(--nav-h); height: calc(100svh - var(--nav-h)); overflow: hidden; perspective: 2400px; perspective-origin: 50% 45%; }
.fc-live .fc-title { position: absolute; inset: 0; display: flex; padding: var(--fc-inset) 0; box-sizing: border-box; }
.fc-live .fc-page { flex: 1; width: 100%; }
.fc-live .fc-cover { position: absolute; top: calc(var(--fc-inset) - var(--fc-sq)); bottom: calc(var(--fc-inset) - var(--fc-sq)); left: calc((100% - var(--fc-pw)) / 2);
  width: calc(var(--fc-pw) + var(--fc-sq) * 1.5); margin: 0; min-height: 0; z-index: 2; transform-origin: 0 50%; transform-style: preserve-3d; will-change: transform; }
.fc-live .fc-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.fc-live .fc-front { transform: translateZ(0); }   /* Safari: a face needs a transform of its own, or its children leave the depth order */
/* the inside of the board, as on the home page's book: the cloth turned in at the edges, then the yellow endpaper */
.fc-live .fc-inside { display: block; transform: rotateY(180deg); background-color: #F2B01E; box-shadow: inset 0 0 0 14px #161616, inset 0 0 0 15px rgba(0, 0, 0, .35);
  background-image: linear-gradient(270deg, rgba(90, 50, 0, .28), rgba(90, 50, 0, 0) 14%), radial-gradient(rgba(120, 72, 0, .3) 0 1.1px, transparent 1.5px) 0 0 / 44px 44px; }
@media (prefers-reduced-motion: no-preference) {
  .rv-on .fc-band { clip-path: inset(0 100% 0 0); animation: fc-wipe .9s cubic-bezier(.16, 1, .3, 1) .15s forwards; }
  .rv-on .fc-label .k { animation: kin-rise 900ms cubic-bezier(.22, 1, .36, 1) var(--d, 0ms) both, fc-sheen 1.8s cubic-bezier(.22, 1, .36, 1) .6s both; }
}
@keyframes fc-wipe { to { clip-path: inset(0 0 0 0); } }
@keyframes fc-sheen { from { background-position: 100% 0; } to { background-position: 0 0; } }

/* ── the sheet: the file itself, paper on the desk (not .sheet, which home-bold.css uses) ── */
.file-sheet { position: relative; max-width: calc(var(--max-w) - 2 * var(--gutter)); margin: 0 auto clamp(56px, 7vw, 104px); background: var(--paper) var(--grain);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 0 0 1px rgba(60, 45, 20, .1), 0 2px 3px rgba(40, 30, 10, .16), 18px 40px 70px -28px rgba(40, 30, 10, .55); }
.file-sheet::before, .file-sheet::after { content: ''; position: absolute; left: 6px; right: -6px; bottom: -6px; height: 100%; background: #F4F0E6; z-index: -1; box-shadow: 0 1px 2px rgba(40, 30, 10, .1); }
.file-sheet::after { left: 12px; right: -12px; bottom: -12px; background: #EEE9DD; z-index: -2; }
.file-front { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 72px); padding: clamp(40px, 5vw, 72px) clamp(24px, 5vw, 72px) 0; align-items: start; }

/* the index card */
.file-card { margin: 0; border-top: 2px solid var(--ink); }
.file-card > div { display: grid; grid-template-columns: 8.5em minmax(0, 1fr); gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--divider); font-size: 14px; line-height: 1.45; }
.file-card dt { font: 500 11px / 1.9 var(--ff-body); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-mid); }
.file-card dd { margin: 0; color: var(--ink); font-weight: 600; font-size: 15px; }

/* evidence prints: mounted, clipped to the sheet, a degree off square */
.file-print { position: relative; margin: 0; background: #fff; padding: 12px 12px 0; box-shadow: 0 1px 2px rgba(40, 30, 10, .18), 0 10px 24px -12px rgba(40, 30, 10, .35); transform: rotate(-.6deg); }
.file-part .file-print { transform: rotate(.5deg); }
.file-print::before { content: ''; position: absolute; top: -28px; left: 34px; width: 28px; height: 84px; z-index: 2; pointer-events: none; filter: drop-shadow(1px 2px 1px rgba(30, 20, 0, .3));
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='66' viewBox='0 0 22 66' fill='none' stroke-linecap='round'%3E%3Cpath d='M15 18V52a6 6 0 0 1-12 0V9a5 5 0 0 1 10 0v40a2 2 0 0 1-4 0V20' stroke='%23585a5f' stroke-width='2.6'/%3E%3Cpath d='M15 18V52a6 6 0 0 1-12 0V9a5 5 0 0 1 10 0v40a2 2 0 0 1-4 0V20' stroke='%23d8dade' stroke-width='.9' transform='translate(-.6 -.6)'/%3E%3C/svg%3E") no-repeat center / contain; }
.file-print .dev { aspect-ratio: 3 / 2; }
.file-print .dev.wide { aspect-ratio: 2.2 / 1; }
.file-print video { display: block; width: 100%; aspect-ratio: 16 / 9; background: #0A0A0A; }
.file-print figcaption { display: flex; justify-content: space-between; gap: 12px; padding: 10px 2px 12px; font: 500 11px / 1.4 var(--ff-body); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-mid); }
.file-print figcaption b { color: var(--ink); font-weight: 600; }

/* the file in seven parts: a contents list that follows, and each part with its tab on the sheet's edge */
.file-body { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: clamp(32px, 5vw, 80px); padding: clamp(40px, 5vw, 72px) clamp(24px, 5vw, 72px) clamp(48px, 6vw, 88px); }
.file-index { position: sticky; top: calc(var(--nav-h) + 32px); align-self: start; }
.file-index ol { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.file-index a { display: flex; gap: 12px; align-items: baseline; min-height: 44px; box-sizing: border-box; padding: 11px 0; border-bottom: 1px solid var(--divider); font-size: 14px; color: var(--ink-mid); text-decoration: none; transition: color .2s ease; }
.file-index a span { font-family: var(--ff-display); font-weight: 700; font-size: 13px; min-width: 1.8em; padding: 0 .1em; }
.file-index a:hover { color: var(--ink); }
.file-index a[aria-current="true"] { color: var(--ink); font-weight: 600; }
.file-index a[aria-current="true"] span { background: linear-gradient(transparent 58%, var(--gold) 58%, var(--gold) 94%, transparent 94%); }
.file-parts { min-width: 0; }   /* fills the column, so each part's tab can reach the sheet's edge; the measure is set on the text */
.file-part h2 { max-width: 20em; }
.file-part { position: relative; padding: 44px 0 48px; border-top: 1px solid var(--divider); scroll-margin-top: calc(var(--nav-h) + 12px); }
.file-part p { font-size: clamp(17px, 1.3vw, 19px); line-height: 1.65; color: var(--ink); margin: 16px 0 0; max-width: 36em; }
.file-part h2 { font-family: var(--ff-display); font-weight: 700; font-size: clamp(30px, 3vw, 46px); line-height: 1.06; letter-spacing: -.025em; margin: 14px 0 0; text-wrap: balance; }
.file-part .file-print { margin-top: 40px; }
.file-figs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin: 22px 0 6px; }
.file-figs .fig { font: 800 clamp(52px, 5.6vw, 88px) / 1 var(--ff-display); letter-spacing: -.045em; white-space: nowrap; }
.file-figs .lab { display: block; margin-top: 10px; font-size: 15px; line-height: 1.45; color: var(--ink-mid); }
.file-lesson p { font-family: var(--ff-display); font-weight: 700; font-size: clamp(26px, 2.4vw, 36px); line-height: 1.22; letter-spacing: -.018em; }
/* the tab: a yellow divider standing proud of the sheet's right edge, sliding out as its part arrives */
.file-tab { position: absolute; top: 44px; right: calc(-1 * clamp(24px, 5vw, 72px) - 34px); width: 34px; height: 76px; overflow: hidden; pointer-events: none; }
.file-tab span { position: absolute; inset: 0; display: grid; place-items: center; background: var(--gold); border-radius: 0 3px 3px 0; box-shadow: 2px 2px 6px -2px rgba(40, 30, 10, .35);
  font: 800 13px / 1 var(--ff-display); letter-spacing: .04em; color: var(--ink); writing-mode: vertical-rl; }
@media (prefers-reduced-motion: no-preference) {
  .rv-on .file-tab span { transform: translateX(-100%); transition: transform .7s cubic-bezier(.16, 1, .3, 1) .15s; }
  .rv-on .rv-go > .file-tab span { transform: none; }
}

/* ── the back cover: the next file's own cover, its need in white and its client pressed into the band ── */
/* a board on the desk too, the width of the file, so the stack closes the way it opened */
.fc-back { position: relative; width: var(--fc-pw); box-sizing: border-box; margin: 0 auto clamp(56px, 7vw, 104px); color: #F4F1EA; padding: clamp(48px, 9svh, 96px) 0 clamp(40px, 8svh, 80px); overflow: hidden;
  box-shadow: 0 2px 3px rgba(20, 14, 4, .3), 18px 40px 70px -28px rgba(20, 14, 4, .6);
  background: radial-gradient(120% 90% at 30% 30%, rgba(255, 255, 255, .05), rgba(0, 0, 0, .35)), var(--cloth) url(img/home/cloth-tile.webp) 0 0 / 512px; }
.fc-back-all { width: 100%; padding: 0 var(--fc-pad); box-sizing: border-box; display: flex; align-items: center; min-height: 44px; font-size: 15px; font-weight: 500; color: #C9C5BC; text-decoration: none; }
.fc-back-all:hover { color: #fff; }
.fc-next { display: block; margin-top: clamp(24px, 5svh, 48px); text-decoration: none; color: inherit; }
.fc-next-text { display: block; padding: 0 var(--fc-pad) clamp(36px, 7svh, 72px); box-sizing: border-box; }
.fc-next .fc-label { display: block; margin-bottom: 18px; font: 400 16px / 1.45 var(--ff-serif); letter-spacing: .16em; text-transform: uppercase; }
.fc-next-need { display: block; max-width: 16em; font: 700 clamp(30px, 3.6vw, 56px) / 1.02 var(--ff-display); letter-spacing: -.03em; color: #F4F1EA; transition: color .2s ease; text-wrap: balance; }
.fc-next-need i { font-style: normal; display: inline-block; transition: transform .2s cubic-bezier(.2, .8, .2, 1); }
.fc-next:hover .fc-next-need { color: #fff; }
@media (hover: hover) and (pointer: fine) { .fc-next:hover .fc-next-need i { transform: translateX(6px); } }
.fc-next .fc-band { position: relative; bottom: auto; height: clamp(64px, 11svh, 104px); }   /* a set height: the cover's percentage means nothing out here */

/* ── phones ── */
@media (max-width: 900px) {
  body.file-page { --fc-pw: 100%; --fc-inset: 0px; --fc-sq: 0px; --fc-pad: var(--gutter); }   /* a phone shows the page edge to edge, so the board is too */
  .fc-live .fc-stage { perspective: 1300px; }
  .fc-front, .fc-back, .fc-page { box-shadow: none; }
  .fc-back { margin-bottom: 0; }
  .fc-text { padding-bottom: calc(40px + 22%); }
  .fc-text .fc-label .nw { display: block; }   /* the accession number on its own line in either font: the fallback fits on one line where
                                                 Marcellus wraps to two, and the swap pushed the headline down (layout shift 0.2) */
  .fc-band { bottom: 8%; height: 64px; }
  .fc-band span { letter-spacing: .18em; }   /* a long client name wraps to 2 lines on a phone */
  .fc-page { padding: 40px var(--gutter); }
  .file-result .fig { font-size: clamp(56px, 17vw, 96px); }
  .file-sheet { max-width: none; margin-bottom: 0; box-shadow: none; }
  .file-sheet::before, .file-sheet::after { display: none; }
  .file-front { grid-template-columns: minmax(0, 1fr); padding: 32px var(--gutter) 0; }
  .file-print { padding: 8px 8px 0; }
  .file-body { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 16px var(--gutter) 40px; }
  .file-index { display: none; }
  .file-tab { right: calc(-1 * var(--gutter)); width: 18px; height: 54px; top: 34px; }
  .file-tab span { font-size: 11px; border-radius: 2px 0 0 2px; }
  .fc-page { align-items: flex-start; text-align: left; }
  .file-result { justify-items: start; }
  .file-result .lab { margin-left: 0; }
  .file-part { padding: 34px 0 38px; }
  .file-figs { grid-template-columns: minmax(0, 1fr); gap: 20px; }

}
@media (max-height: 500px) and (min-aspect-ratio: 1/1) { .fc-text h1 { font-size: 34px; } .fc-sum { display: none; } .file-result .fig { font-size: 72px; } }

/* the nav takes the cloth while it sits over a cover (casefile.js sets .on-cloth); over the paper it is the site's own */
body.file-page .nav { transition: background-color .35s ease, border-color .35s ease, box-shadow .35s ease; }
body.file-page .nav.on-cloth { background: rgba(21, 21, 21, .82); border-bottom-color: rgba(255, 255, 255, .07); box-shadow: none; }
body.file-page .nav.on-cloth .nav-brand, body.file-page .nav.on-cloth .nav-links a { color: #E9E5DC; }
body.file-page .nav.on-cloth .nav-brand:hover, body.file-page .nav.on-cloth .nav-links a:hover { color: var(--gold); }
body.file-page .nav.on-cloth .nav-avail { color: #E9E5DC; background: rgba(242, 176, 30, .12); border-color: rgba(242, 176, 30, .38); }
body.file-page .nav.on-cloth .nav-hamburger span { background: #E9E5DC; }