:root {
  --ink: #0a0a0a;
  --paper: #fff;
  --sheet-black: #000;     /* the About sheet on the home page */
  --fibre: #ebe7df;        /* the white paper core showing along a torn edge */
  --fibre-shade: #cfcac1;  /* the same rim on a white sheet, a shade darker so it reads */
  --rip-h: 64px;
  --serif: "Instrument Serif", "Times New Roman", serif;
  --mono: "Geist Mono", ui-monospace, monospace;
  --fs: 16vw;            /* display size; home.js sets it so the widest hero line spans the viewport */
  --gap: 10px;           /* corner inset */
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
/* Lenis (smooth scroll) — its recommended base rules */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 11px/1 var(--mono);
  text-transform: uppercase;
  overflow-x: clip;
}
a { color: inherit; text-decoration: none; }
img, video { display: block; width: 100%; height: 100%; object-fit: cover; }
button { font: inherit; text-transform: inherit; border: 0; cursor: pointer; }
[hidden] { display: none !important; } /* author display rules (grid/flex) must not resurrect hidden elements */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
::selection { background: var(--ink); color: var(--paper); }

/* ---------- chips: the one UI element ---------- */
.chip {
  display: inline-block;
  background: var(--ink);
  color: var(--paper);
  padding: 4px 6px 3px;
  font: 400 11px/1.1 var(--mono);
  letter-spacing: .02em;
  white-space: nowrap;
}
.chip.b { font-weight: 600; }
.chip.o { background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); } /* outlined = secondary info */
a.chip, button.chip, .chip { transition: background-color .35s cubic-bezier(.2, .8, .2, 1), color .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s cubic-bezier(.2, .8, .2, 1); } /* every chip state change eases */
a.chip:hover, button.chip:hover { background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.chip-row { display: flex; gap: 4px; }
.live i { display: inline-block; width: 6px; height: 6px; margin: 0 6px 1px 0; border-radius: 50%; background: #3ddc84; animation: blink 1.6s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }

.corner { position: fixed; z-index: 20; display: flex; flex-direction: column; gap: 4px; transition: transform .8s cubic-bezier(.2, .8, .2, 1), opacity .6s; }
.tl { top: var(--gap); left: var(--gap); align-items: flex-start; }
.tr { top: var(--gap); right: var(--gap); align-items: flex-end; }
.bl { bottom: var(--gap); left: var(--gap); }
.br { bottom: var(--gap); right: var(--gap); }

.label { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }

/* ---------- display type ---------- */
.line, .fit {
  font-family: var(--serif);
  font-weight: 400;
  line-height: .8;
  letter-spacing: -.01em;
  white-space: nowrap;
}
em { font-style: italic; }

/* ---------- black frame (hero video, work tiles, studio, case) ---------- */
.frame { margin: 0; background: var(--ink); overflow: hidden; }
.reel-cap { position: absolute; left: 0; top: 100%; margin-top: 4px; }

/* ---------- hero ---------- */
.hero { position: relative; height: 100svh; overflow-x: clip; } /* no vertical clip: the mask fades the words, so there is never a hard cut */
.words {
  position: absolute; inset: 0; display: flex; justify-content: center; will-change: transform, filter, opacity;
  /* lines dissolve into the paper at the top and bottom instead of being sliced off */
  -webkit-mask-image: linear-gradient(transparent, #000 16%, #000 76%, transparent);
          mask-image: linear-gradient(transparent, #000 16%, #000 76%, transparent);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; /* anything outside the box is invisible */
}
.words-track { text-align: center; will-change: transform; }
.line { display: block; font-size: var(--fs); padding-top: .02em; }
.hero-frame { /* the showreel; clicking it opens the screening room */
  overflow: visible; cursor: pointer;
  position: absolute; left: 50%; top: 50%; z-index: 1;
  width: min(46vw, 78svh); aspect-ratio: 16 / 9;
  transform: translate(-50%, -50%);
}

/* ---------- work: staggered grid ---------- */
.work { position: relative; padding: 22vh 0 14vh; display: flex; flex-direction: column; align-items: center; gap: 3vh; }
.grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 clamp(16px, 2.4vw, 40px); align-items: start;
  width: 100%; padding: 6vh clamp(140px, 12vw, 220px) 0; /* side room keeps tiles clear of the fixed corner chips */
}
.col { display: flex; flex-direction: column; gap: 14vh; }
.col:nth-child(2) { padding-top: 26vh; }
.col:nth-child(3) { padding-top: 9vh; }
.tile { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; width: var(--w); }
.col:nth-child(2) .tile:nth-child(odd), .col:nth-child(3) .tile:nth-child(even) { align-self: flex-end; }
.tile .frame { position: relative; width: 100%; margin-bottom: 4px; }
.tile video { position: absolute; inset: 0; opacity: 0; transition: opacity .3s; }
.tile.playing video { opacity: 1; }
.tile .idx { position: absolute; top: 6px; left: 6px; }
.tile:hover .chip.b { background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }

/* ---------- statements (work heading, case text) ---------- */
.statement {
  margin: 0; max-width: 16ch; text-align: center;
  font: 400 calc(var(--fs) * .62)/.86 var(--serif); letter-spacing: -.01em;
}
.statement.small { max-width: 30ch; font-size: clamp(26px, 3.6vw, 58px); line-height: .95; }

/* ---------- Work pins while the About sheet tears up over it ---------- */
.tear { position: relative; overflow-x: clip; } /* Work scales to 1.06× under the sheet; clip (not hidden) keeps sticky working */
.tear > .work { position: sticky; top: var(--work-pin, 0px); transform-origin: 50% 100%; will-change: transform; }

/* ---------- torn edge (shared by About and Contact) ---------- */
.rip { position: absolute; left: 0; bottom: 100%; width: 100%; height: var(--rip-h); display: block; margin-bottom: -1px; pointer-events: none; }
.about .rip-edge { fill: var(--sheet-black); }
.about .rip-fibre { fill: var(--fibre-shade); } /* greyer core so it reads against the white page */
.about .rip { filter: drop-shadow(0 -5px 7px rgb(0 0 0 / .22)); } /* the sheet lies on top of Work */
.contact .rip-edge { fill: var(--paper); }
.contact .rip-fibre { fill: var(--fibre); }
.footer .rip-edge { fill: var(--paper); }      /* on dark pages the footer tears up over the black */
.footer .rip-fibre { fill: var(--fibre); }
.dark-page .footer { padding-top: 12vh; color: var(--ink); }

/* ---------- about: the black sheet (after caora.ie) ---------- */
.about {
  position: relative; z-index: 2; background: var(--sheet-black); color: var(--paper); overflow-x: clip;
  --pad: clamp(16px, 4vw, 64px);
  padding: 4vh 0 16vh;
}
.about .mini {          /* Caora's tiny bold mono notes */
  margin: 0; max-width: 34ch;
  font: 600 11px/1.35 var(--mono); letter-spacing: .02em;
}
.about .big {           /* Caora's huge uppercase serif paragraphs */
  margin: 0; max-width: 21ch;
  font: 400 clamp(40px, 6vw, 108px)/.86 var(--serif); letter-spacing: -.01em;
}
.blur-in { filter: blur(14px); opacity: .15; transition: filter 1.2s cubic-bezier(.2, .8, .2, 1), opacity 1.2s; }
.blur-in.in { filter: none; opacity: 1; }

/* A · intro */
.a-intro { padding: 0 var(--pad); display: flex; flex-direction: column; gap: 5vh; }
.a-intro .mini { margin-left: clamp(130px, 12vw, 200px); } /* clear of the top-left corner chips */
.a-intro-row { display: flex; align-items: flex-end; gap: clamp(12px, 2vw, 28px); padding-left: clamp(60px, 16vw, 300px); }
.a-intro-row .big { max-width: 19ch; }
.cutout { width: clamp(90px, 10vw, 170px); height: auto; flex: none; }

/* shared horizontal marquees (driven by site.js) */
.marquee-x { display: inline-flex; white-space: nowrap; will-change: transform; }
.marquee-x i { padding: 0 .22em; font-style: normal; }
.studio-track { font: 400 clamp(110px, 19vw, 340px)/.86 var(--serif); }

/* E · the studio */
.a-studio { margin-top: 30vh; }
.studio-band { overflow: hidden; transform: rotate(-4deg); padding: 3vh 0; margin: 0 -5vw; }
.studio-addr { margin: 4vh 0 10vh var(--pad) !important; }
.studio-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(24px, 4vw, 72px); padding: 0 var(--pad) 0 0; }
.studio-media { position: sticky; top: 8vh; align-self: start; aspect-ratio: 4 / 5; }
.directions { list-style: none; margin: 0; padding: 10vh 0 6vh; display: flex; flex-direction: column; gap: 22vh; }
.directions li { display: flex; align-items: flex-start; gap: clamp(16px, 3vw, 48px); }
.directions .num { font: 400 clamp(120px, 16vw, 280px)/.72 var(--serif); min-width: .6em; }
.directions .mini { max-width: 30ch; padding-top: .6em; }

/* ---------- contact: the white sheet ---------- */
.contact { position: relative; z-index: 3; background: var(--paper); overflow-x: clip; padding: 14vh 0 10vh; display: flex; flex-direction: column; align-items: center; gap: 6vh; }
.marquee { display: block; width: 100%; overflow: hidden; transform: rotate(-4deg); padding: 3vh 0; }
.marquee-track { font: 400 clamp(90px, 15vw, 260px)/.9 var(--serif); }
/* hover: the moving marquee leans into a slant (a real italic swap would jump) */
.marquee-track > span, .marquee-track > i { display: inline-block; transition: transform .7s cubic-bezier(.2, .8, .2, 1); }
.marquee:hover .marquee-track > span { transform: skewX(-11deg); }

/* ---------- footer: the star of the showreel ---------- */
.footer { position: relative; z-index: 3; background: var(--paper); display: flex; flex-direction: column; align-items: center; gap: 4vh; padding: 6vh var(--gap) 52px; }
.footer-fig { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.lady { width: min(46vw, 440px); height: auto; }
.footer-fig figcaption { white-space: normal; max-width: 36ch; text-align: center; } /* long caption wraps on phones */
.footer-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }

/* corner chips flip to white while they sit over the black sheet */
.corner.inv .chip { background: var(--paper); color: var(--ink); }
.corner.inv a.chip:hover { background: var(--ink); color: var(--paper); box-shadow: inset 0 0 0 1px var(--paper); }

/* ---------- paper rip: loader + page transitions (shapes + timing in site.js) ---------- */
.rip-fx { position: fixed; inset: 0; z-index: 60; overflow: hidden; visibility: hidden; pointer-events: none; } /* rotating halves must not widen the page on phones */
.rip-fx.on { visibility: visible; pointer-events: auto; }
.rip-fx.boot { background: var(--ink); } /* black from the very first paint, before site.js draws the halves */
.rip-piece { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; will-change: transform; }
.rip-fx.tearing .rip-piece { filter: drop-shadow(0 0 22px rgb(0 0 0 / .35)); } /* shadow only once the halves separate */
.rip-piece rect { fill: var(--ink); }
.rip-word { fill: var(--paper); font-family: var(--serif); text-anchor: middle; letter-spacing: -.01em; }
.rip-sub { fill: var(--paper); font: 400 11px var(--mono); text-anchor: middle; letter-spacing: .08em; } /* loader caption under the counter */
.rip-rim { fill: var(--fibre); opacity: 0; } /* torn white core, only visible once the sheet starts to tear */

.is-loading { overflow: hidden; }
.is-loading .corner { opacity: 0; transform: translateY(-12px); } /* drop in after the loader; never parked off-screen (that widens phones) */
.is-loading .bl, .is-loading .br { transform: translateY(12px); }

/* ---------- case panel ---------- */
.case {
  position: fixed; inset: 0; z-index: 30; background: var(--paper);
  overflow-y: auto; overscroll-behavior: contain;
}
.case-inner { min-height: 100%; padding: 64px var(--gap) 80px; display: flex; flex-direction: column; align-items: center; gap: 5vh; }
.case .close { position: fixed; top: var(--gap); right: var(--gap); z-index: 1; }
.case-title { margin: 0; text-align: center; }
.case-frame { width: min(70vw, 1000px); aspect-ratio: 4 / 3; }


/* ---------- the screening room (home.js) ---------- */
.hero-frame:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.hero-frame video { transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.hero-frame:hover video { transform: scale(1.03); }
.room {
  position: fixed; inset: 0; z-index: 40; background: #050505; color: var(--paper);
  display: grid; grid-template-rows: auto 1fr auto auto; justify-items: center; gap: 2.4vh; padding: var(--gap) var(--gap) 3vh;
}
.room .chip { background: var(--paper); color: var(--ink); }
.room .chip.o { background: transparent; color: var(--paper); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .45); }
.room button.chip:hover { background: var(--ink); color: var(--paper); box-shadow: inset 0 0 0 1px var(--paper); }
.room-top { width: 100%; display: flex; justify-content: space-between; align-items: flex-start; gap: 6px; }
.room-tc { font-variant-numeric: tabular-nums; }
/* the screen: a projected image — soft light spill, flicker, moving grain */
.screen {
  position: relative; align-self: center; margin: 0; width: min(88vw, 128svh); aspect-ratio: 16 / 9; background: #000; overflow: hidden;
  box-shadow: 0 0 0 1px rgb(255 255 255 / .06), 0 0 90px 10px rgb(255 248 230 / .10), 0 0 260px 40px rgb(255 248 230 / .05);
  animation: projector 3.2s steps(1) infinite;
}
@keyframes projector { 0%, 100% { filter: brightness(1); } 37% { filter: brightness(.95); } 38% { filter: brightness(1.04); } 71% { filter: brightness(.97); } }
.screen video { position: absolute; inset: 0; }
.grain {
  position: absolute; inset: -50%; pointer-events: none; opacity: .14; mix-blend-mode: overlay;
  background: 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='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain .5s steps(4) infinite;
}
@keyframes grain { 0% { transform: translate(0, 0); } 25% { transform: translate(-6%, 4%); } 50% { transform: translate(4%, -6%); } 75% { transform: translate(-3%, -2%); } }
.screen-hit { position: absolute; inset: 0; background: none; cursor: pointer; }
.room.paused .screen::after { content: "Paused"; position: absolute; left: 50%; top: 50%; translate: -50% -50%; font: 400 clamp(40px, 7vw, 110px)/1 var(--serif); text-transform: uppercase; }
/* academy leader countdown */
.leader { position: absolute; inset: 0; display: grid; place-items: center; background: #1c1c1c; z-index: 1; }
.leader > * { grid-area: 1 / 1; }
.leader .sweep { width: 52%; aspect-ratio: 1; border-radius: 50%; border: 2px solid var(--paper); background: conic-gradient(rgb(255 255 255 / .22) var(--a, 0turn), transparent 0); }
.leader.tick .sweep { animation: sweep .8s linear forwards; }
@property --a { syntax: '<angle>'; inherits: false; initial-value: 0turn; }
@keyframes sweep { to { --a: 1turn; } }
.leader .cross { width: 100%; height: 100%; opacity: .45; background: linear-gradient(var(--paper), var(--paper)) center / 100% 1px no-repeat, linear-gradient(var(--paper), var(--paper)) center / 1px 100% no-repeat; }
.leader .num { font: 400 clamp(90px, 22vh, 240px)/1 var(--serif); }
/* chapter rail: the playing chip is inverted and fills as it plays */
.rail { list-style: none; margin: 0; padding: 0 0 2px; display: flex; gap: 4px; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.rail button { position: relative; display: flex; gap: 8px; overflow: hidden; }
.rail button b { font-weight: 400; }
.rail button i { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: currentColor; transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }
.rail button.on { background: var(--paper); color: var(--ink); box-shadow: none; }
.room-hint { margin: 0; color: rgb(255 255 255 / .5); }

/* ---------- shared page pieces ---------- */
.tr a[aria-current="page"] { background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); } /* you are here */
.corner.inv .tr a[aria-current="page"], .tr.inv a[aria-current="page"] { background: var(--ink); color: var(--paper); box-shadow: inset 0 0 0 1px var(--paper); }
.more { margin-top: 12vh; }
.about-more { align-self: flex-start; margin-left: clamp(60px, 16vw, 300px); background: var(--paper); color: var(--ink); }
.about-more:hover { background: var(--sheet-black) !important; color: var(--paper) !important; box-shadow: inset 0 0 0 1px var(--paper) !important; }

/* dark pages (archive, about): black desk, chips flip to white */
.dark-page { background: var(--ink); color: var(--paper); }
.dark-page main .chip { background: var(--paper); color: var(--ink); }
.dark-page main .chip.o { background: transparent; color: var(--paper); box-shadow: inset 0 0 0 1px var(--paper); }
.dark-page main a.chip:hover, .dark-page main button.chip:hover { background: var(--ink); color: var(--paper); box-shadow: inset 0 0 0 1px var(--paper); }
/* …but chips printed on paper (the call sheet) stay ink-on-paper */
.dark-page .sheet .chip { background: var(--ink); color: var(--paper); box-shadow: none; }
.dark-page .sheet .chip.o { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.dark-page .sheet a.chip:hover, .dark-page .sheet button.chip:hover { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.mini { font: 600 11px/1.35 var(--mono); letter-spacing: .02em; }

/* the big "next reel" link at the end of every inner page */
.next-page { display: flex; flex-direction: column; align-items: center; gap: 2vh; padding: 18vh var(--gap) 22vh; }
.next-link { position: relative; display: inline-block; font: 400 clamp(64px, 14vw, 240px)/.85 var(--serif); }
/* hover: upright and italic copies cross-fade with a slight slant (font-style itself can't animate) */
.ital-up, .ital-it { display: inline-block; transition: opacity .5s cubic-bezier(.2, .8, .2, 1), transform .7s cubic-bezier(.2, .8, .2, 1), filter .5s; }
.ital-it { position: absolute; inset: 0; text-align: center; white-space: nowrap; font-style: italic; opacity: 0; transform: skewX(9deg); filter: blur(3px); }
.next-link:hover .ital-up, .next-link:focus-visible .ital-up { opacity: 0; transform: skewX(-9deg); filter: blur(3px); }
.next-link:hover .ital-it, .next-link:focus-visible .ital-it { opacity: 1; transform: none; filter: none; }

/* ---------- WORK: the index — the hero turned into a film list ---------- */
.index { position: relative; }
.index-stage { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.index-head { position: absolute; z-index: 2; top: var(--gap); left: 50%; translate: -50% 0; }
.index-words {
  position: absolute; inset: 0;
  -webkit-mask-image: linear-gradient(transparent, #000 20%, #000 80%, transparent); mask-image: linear-gradient(transparent, #000 20%, #000 80%, transparent);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.index-track { list-style: none; margin: 0; padding: 0; position: absolute; left: 0; right: 0; top: 50%; will-change: transform; }
.index-track li { display: flex; justify-content: center; }
.index-line { position: relative; display: block; font: 400 var(--ifs, 14vw)/.8 var(--serif); letter-spacing: -.01em; white-space: nowrap; padding-top: .02em; }
.index-line.on .ital-up { opacity: 0; transform: skewX(-9deg); filter: blur(3px); }
.index-line.on .ital-it { opacity: 1; transform: none; filter: none; }
.index-frame { position: absolute; z-index: 1; left: 50%; top: 50%; translate: -50% -50%; width: min(38vw, 60svh); aspect-ratio: 4 / 3; overflow: visible; }
.index-frame video { position: absolute; inset: 0; }
.index-cap { position: absolute; left: 0; top: 100%; margin-top: 4px; display: flex; flex-wrap: wrap; gap: 4px; }
.index-hint { position: absolute; left: 50%; bottom: 6vh; translate: -50% 0; }

/* ---------- ARCHIVE: torn scraps on a black desk ---------- */
.page-archive { padding: 13vh clamp(16px, 4vw, 64px) 0; }
.archive-head { display: flex; flex-direction: column; align-items: center; gap: 2vh; text-align: center; }
.archive-head h1 { margin: 0; color: var(--paper); }
.archive-note { max-width: 46ch; margin: 0; color: rgb(255 255 255 / .75); }
.desk { position: relative; list-style: none; margin: 8vh 0 0; padding: 0; }
.scrap {
  position: absolute; left: 0; top: 0; width: clamp(200px, 17vw, 250px);
  transform: translate(var(--x, 0), var(--y, 0)) rotate(var(--r, 0deg));
  filter: drop-shadow(0 8px 12px rgb(0 0 0 / .45));
  cursor: grab; touch-action: none; user-select: none;
}
.scrap.lifted { cursor: grabbing; filter: drop-shadow(0 22px 26px rgb(0 0 0 / .6)); }
.scrap.lifted .paper { transform: scale(1.04); }
.desk.settling .scrap { transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
.paper { background: #f1eee7; color: var(--ink); clip-path: var(--clip); padding: 26px 18px 30px; transition: transform .2s; }
.tape { position: absolute; z-index: 1; top: -8px; left: 50%; width: 70px; height: 20px; translate: -50% 0; rotate: -4deg; background: rgb(236 230 214 / .82); box-shadow: 0 1px 2px rgb(0 0 0 / .2); }
.scrap-top { display: flex; justify-content: space-between; margin: 0; font: 600 10px/1 var(--mono); }
/* the glimpse: a small print of the film, undeveloped until you hover / pick it up (stays developed after) */
.print { margin: 12px 0 0; aspect-ratio: 4 / 3; background: #e9e4d8; padding: 5px 5px 14px; box-shadow: 0 1px 3px rgb(0 0 0 / .25); rotate: -1.2deg; }
.scrap:nth-child(even) .print { rotate: 1.4deg; }
.print img { filter: sepia(.55) contrast(.35) brightness(1.75) blur(2.5px); opacity: .55; transition: filter 1.4s cubic-bezier(.3, .6, .2, 1), opacity 1.2s; pointer-events: none; }
.scrap:hover .print img, .scrap.lifted .print img, .scrap.developed .print img { filter: none; opacity: 1; }
.scrap-title { margin: 14px 0 10px; font: 400 clamp(32px, 2.9vw, 44px)/.86 var(--serif); }
.scrap-meta { margin: 0; font: 400 10px/1.4 var(--mono); }
.scrap-note { margin: 12px 0 0; font: italic 400 17px/1.15 var(--serif); text-transform: none; border-top: 1px solid rgb(0 0 0 / .25); padding-top: 10px; }

/* ---------- ABOUT: the call sheet ---------- */
.page-about { padding: 16vh var(--gap) 0; display: flex; flex-direction: column; align-items: center; overflow-x: clip; } /* the stamp waits at 1.9× before it lands */
.sheet {
  position: relative; width: min(860px, 92vw); background: #f4f1ea; color: var(--ink);
  padding: clamp(28px, 5vw, 64px); rotate: -1.2deg; box-shadow: 0 30px 60px rgb(0 0 0 / .55);
}
.sheet-photo { position: absolute; top: -46px; right: 6%; width: clamp(110px, 15vw, 170px); height: auto; rotate: 4deg; filter: drop-shadow(0 6px 8px rgb(0 0 0 / .35)); }
.clip { position: absolute; top: -58px; right: calc(6% + clamp(40px, 6vw, 70px)); width: 18px; height: 64px; border: 3px solid #8d8d8d; border-radius: 10px; rotate: 4deg; }
.mono-row { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin: 0; padding-bottom: 6px; border-bottom: 1px solid var(--ink); font: 600 11px/1 var(--mono); }
.sheet-title { margin: 18px 0; max-width: 70%; font: 400 clamp(60px, 10vw, 140px)/.82 var(--serif); }
.sheet-table { width: 100%; border-collapse: collapse; margin: 4vh 0 0; }
.sheet-table th { width: 26%; padding: 11px 12px 11px 0; text-align: left; vertical-align: top; font: 600 11px/1.2 var(--mono); border-top: 1px solid var(--ink); }
.sheet-table td { padding: 8px 0; font: 400 clamp(17px, 1.6vw, 21px)/1.25 var(--serif); text-transform: none; border-top: 1px solid var(--ink); }
.sheet-sec { margin-top: 5vh; }
.sheet h2 { display: inline-block; margin: 0 0 12px; padding: 4px 6px 3px; background: var(--ink); color: var(--paper); font: 600 11px/1.1 var(--mono); letter-spacing: .04em; }
.sheet-copy { margin: 0; max-width: 40ch; font: 400 clamp(20px, 2.2vw, 28px)/1.18 var(--serif); text-transform: none; }
.sheet-list { list-style: none; margin: 0; padding: 0; }
.sheet-list li { display: grid; grid-template-columns: 1.5fr 1fr auto; align-items: baseline; gap: 12px; padding: 9px 0; border-top: 1px solid rgb(0 0 0 / .2); font: 400 11px/1 var(--mono); }
.sheet-list li span:first-child { font: 400 clamp(20px, 2vw, 26px)/1 var(--serif); }
.sheet-list.tight li { grid-template-columns: 1fr auto; }
.sheet-list.tight li span:first-child { font-size: clamp(18px, 1.7vw, 22px); }
.sheet-sec.two { display: grid; grid-template-columns: 1fr 1fr; gap: 5vw; }
.rules { margin: 0; padding-left: 1.3em; font: 400 clamp(19px, 1.9vw, 24px)/1.3 var(--serif); text-transform: none; }
.sheet-foot { position: relative; margin-top: 6vh; }
.label.left { justify-content: flex-start; margin-top: 2.4vh; }
.stamp {
  position: absolute; right: 2%; bottom: -14px; width: 132px; height: 132px; display: grid; place-content: center; text-align: center;
  border: 3px solid var(--ink); border-radius: 50%; font: 400 30px/.9 var(--serif); mix-blend-mode: multiply;
}
.stamp small { font: 600 9px/1 var(--mono); }
.stamp.blur-in { filter: none; opacity: 0; transform: rotate(-14deg) scale(1.9); }  /* thumps down when the wrap comes into view */
.stamp.blur-in.in { opacity: .8; transform: rotate(-14deg) scale(1); transition: transform .35s cubic-bezier(.3, 1.6, .5, 1), opacity .15s; }
.sheet-tear { position: absolute; left: 0; top: 100%; width: 100%; height: 28px; display: block; }
.sheet-tear path { fill: #f4f1ea; }

/* ---------- small screens ---------- */
@media (max-width: 700px) {
  :root { --gap: 8px; }
  .chip { font-size: 10px; }
  .tl .chip:nth-child(3), .tl .chip-row { display: none; }
  .hero-frame { width: 78vw; }
  .grid { display: flex; flex-direction: column; gap: 8vh; padding: 4vh var(--gap) 0; }
  .col { display: contents; } /* tiles keep project order (01–06) on phones */
  .hover-only { display: none; }
  .tile, .col:nth-child(n) .tile:nth-child(n) { width: 100%; align-self: auto; }
  :root { --rip-h: 40px; }
  .a-intro .mini { margin-left: 0; margin-top: 8vh; }
  .a-intro-row { flex-direction: column; align-items: flex-start; padding-left: 0; }
  .studio-grid { grid-template-columns: 1fr; padding: 0 var(--pad); }
  .studio-media { position: static; aspect-ratio: 4 / 3; }
  .directions { padding: 6vh 0 4vh; gap: 6vh; }
  .lady { width: 70vw; }
  .screen { width: 100%; }
  .room-tc { display: none; }
  .long { display: none; }
  .case-frame { width: 92vw; }
  .about-more { margin-left: 0; }
  .index-frame { width: 76vw; }
  .index-head { display: none; } /* the corner chips own the top on phones */
  .desk { display: flex; flex-direction: column; align-items: center; gap: 30px; height: auto !important; }
  .scrap { position: relative; width: min(300px, 84vw); transform: rotate(var(--r, 0deg)); cursor: auto; touch-action: auto; }
  .scrap:nth-child(odd) { --r: -2deg; } .scrap:nth-child(even) { --r: 2.5deg; }
  .sheet { rotate: 0deg; }
  .sheet-photo { position: relative; top: auto; right: auto; display: block; width: 96px; margin: -54px auto 8px; } /* centred: the corner chips own both top corners */
  .clip { display: none; }
  .sheet-title { max-width: none; }
  .sheet-sec.two { grid-template-columns: 1fr; }
  .sheet-list li { grid-template-columns: 1fr auto; } .sheet-list li span:nth-child(2) { display: none; }
  .stamp { position: relative; right: auto; bottom: auto; margin: 4vh 0 0 auto; width: 104px; height: 104px; font-size: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .blur-in { filter: none; opacity: 1; }
  .live i { animation: none; }
}