/*
 * Letters to the houses: styles.
 *
 * Contents
 *  1. Tokens: colour, type, layout, light and shadow
 *  2. Base
 *  3. Materials: the table, white stationery, coloured papers, creases
 *  4. Profile column (left)
 *  5. Table area, intro card, pencil
 *  6. Folded letters
 *  7. Research on the table
 *  8. Captions
 *  9. Dive flood
 * 10. The opened letter: colour field, sheets, exhibit, footnotes, signature, enclosures
 * 11. Index overlay, phone bar
 * 12. Phone and no-GSAP: stacked layout
 * 13. Reduced motion, still renders
 * 14. Print
 *
 * Light comes from the upper left, as in the table photograph. Every paper
 * casts the same three-layer shadow down and to the right (--lift-0..3).
 * --u is the table's unit: letters and research scale with the table area.
 */

/* ---------- 1. Tokens ---------- */
:root {
  /* colour */
  --table: #EEEBE5;
  --ink-0: #23201c;
  --ink-1: #3b3732;
  --ink-2: #625d55;
  --muted: #67625a;
  --letter-ink: #1d1f26;                 /* warm blue-black, the letters' ink */
  --hair: rgba(40, 34, 26, .16);
  --graphite: #4a4a48;
  --stamp: #7a3a33;                      /* muted oxblood, every stamp */

  /* type */
  --f-serif: "Cormorant Garamond", "Cormorant", Garamond, "Hoefler Text", "Times New Roman", serif;
  --f-salut: "EB Garamond", Garamond, "Hoefler Text", "Times New Roman", serif;
  --f-text: "Newsreader", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --f-ui: "Instrument Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --f-note: "Reenie Beanie", "Segoe Print", "Bradley Hand", cursive;

  /* motion */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-inout: cubic-bezier(.87, 0, .13, 1);

  /* layout */
  --pw: 36vw;                                              /* profile column */
  --u: min(.86vw, 1.55vh);                                 /* table unit */
  --y0: 45vh;                                              /* letters' centre line */
  --cw: min(560px, 44vw, calc((100vh - 96px) / 1.4142));   /* intro card (A4) */
  --ch: calc(var(--cw) * 1.4142);
  --padY: calc((100vh - var(--ch)) / 2);

  /* light and shadow: contact, mid, ambient; warm, never pure black */
  --sc: 44, 34, 22;
  --lift-0: .4px .7px 1px rgba(var(--sc), .24), 1.5px 3px 6px -1px rgba(var(--sc), .10), 6px 12px 26px -10px rgba(var(--sc), .12);
  --lift-1: .5px .9px 1.3px rgba(var(--sc), .24), 2px 4px 9px -2px rgba(var(--sc), .12), 9px 18px 42px -14px rgba(var(--sc), .18);
  --lift-2: .6px 1.1px 1.6px rgba(var(--sc), .20), 4px 8px 14px -3px rgba(var(--sc), .13), 15px 30px 60px -18px rgba(var(--sc), .24);
  --lift-3: .8px 1.5px 2.2px rgba(var(--sc), .16), 8px 15px 26px -6px rgba(var(--sc), .14), 24px 48px 96px -26px rgba(var(--sc), .30);
  /* paper thickness: a lit top-left hairline and a darker bottom-right one */
  --edge-sheet: inset 1px 1px 0 rgba(255, 255, 255, .62), inset -1px -1px 0 rgba(110, 88, 58, .10);
  --edge-card: inset 1px 1px 0 rgba(255, 255, 255, .75), inset -1px -1px 0 rgba(98, 78, 50, .2);
  --edge-colour: inset 1px 1px 0 rgba(255, 255, 255, .13), inset -1px -1px 0 rgba(0, 0, 0, .22);
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--table); overflow-x: hidden; -webkit-text-size-adjust: 100%; }
html.locked { overflow: hidden; }
html.boot .camera, html.boot .intro-card, html.boot .pencil { visibility: hidden; }
body { margin: 0; background: var(--table); color: var(--ink-0); font-family: var(--f-text); font-optical-sizing: auto; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-kerning: normal; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; }
img { display: block; max-width: none; }
p, h1, h2, h3, ol, ul, figure { margin: 0; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
:focus { outline: none; }
:focus-visible { outline: 1px solid rgba(35, 32, 28, .62); outline-offset: 4px; }
.skip { position: fixed; z-index: 200; left: 16px; top: 12px; padding: 10px 14px; background: #FBFAF6; box-shadow: var(--lift-1); font: 500 11px/1 var(--f-ui); letter-spacing: .2em; text-transform: uppercase; text-decoration: none; transform: translateY(-160%); }
.skip:focus-visible { transform: none; }
.noscript { position: relative; z-index: 5; padding: 24px; font-size: 18px; }

/* ---------- 3. Materials ---------- */
/* The table: a pale linen desk, lightened so the page stays high-key. The
   window light from the upper left is kept faint. */
.ground { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: var(--table) url("../img/table.jpg") 18% 0 / cover no-repeat; }
.ground::before, .ground::after { content: ""; position: absolute; inset: 0; }
.ground::before { background: linear-gradient(180deg, rgba(248, 247, 244, .68), rgba(246, 245, 241, .78) 55%, rgba(244, 243, 239, .8)); }
.ground::after { background: url("../img/grain-table.jpg") 0 0 / 300px; mix-blend-mode: soft-light; opacity: .32; }

/* White stationery. Laid for letters, cotton for cards. The tile gives the
   texture (luminosity); the sheet colour gives the tint, within 3% per sheet. */
.laid, .cotton {
  --veil: color-mix(in srgb, var(--tint, #F7F4EC) var(--veil-k, 62%), transparent);
  background-color: var(--tint, #F7F4EC);
  background-position: 0 0, 0 0, var(--px, 0px) var(--py, 0px);
  background-blend-mode: normal, normal, luminosity;
}
.laid {
  background-image: radial-gradient(150% 125% at 38% 30%, rgba(255, 255, 255, .05) 0%, rgba(255, 255, 255, 0) 48%, rgba(92, 72, 46, .06) 100%), linear-gradient(var(--veil), var(--veil)), url("../img/paper-laid.jpg");
  background-size: 100% 100%, 100% 100%, 1024px 1024px;
}
.cotton {
  --veil-k: 58%;
  background-image: radial-gradient(150% 125% at 38% 30%, rgba(255, 255, 255, .12) 0%, rgba(255, 255, 255, .04) 50%, rgba(92, 72, 46, .05) 100%), linear-gradient(var(--veil), var(--veil)), url("../img/paper-cotton.jpg");
  background-size: 100% 100%, 100% 100%, 760px 760px;
}

/* Coloured papers: the house colour plus a fibre overlay, its own per house */
.g-cotton { --g-img: url("../img/grain-cotton.jpg"); }
.g-laid { --g-img: url("../img/grain-laid.jpg"); }
.g-sand { --g-img: url("../img/grain-sand.jpg"); }
.g-leopard { --g-img: url("../img/grain-leopard.jpg"); }
.g-iris { --g-img: url("../img/grain-iris.jpg"); }
.g-velvet { --g-img: url("../img/grain-velvet.jpg"); }
.grain::after {
  content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none;
  background-image: var(--g-img); background-size: var(--g-size, 420px); background-position: var(--px, 0px) var(--py, 0px);
  mix-blend-mode: var(--g-blend, soft-light); opacity: var(--g-op, .5);
}

/* Creases on a flat sheet: a valley at one third, a mountain at two thirds.
   Each is a 1px shadow beside a 1px highlight, with a broad soft slope either side. */
.creased::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    linear-gradient(180deg, transparent calc(33.333% - 64px), rgba(86, 66, 40, .035) calc(33.333% - 1px), rgba(86, 66, 40, .11) calc(33.333% - 1px), rgba(86, 66, 40, .11) 33.333%, rgba(255, 255, 255, .62) 33.333%, rgba(255, 255, 255, .62) calc(33.333% + 1px), rgba(255, 255, 255, .14) calc(33.333% + 1px), transparent calc(33.333% + 56px)),
    linear-gradient(180deg, transparent calc(66.666% - 56px), rgba(255, 255, 255, .13) calc(66.666% - 1px), rgba(255, 255, 255, .6) calc(66.666% - 1px), rgba(255, 255, 255, .6) 66.666%, rgba(86, 66, 40, .1) 66.666%, rgba(86, 66, 40, .1) calc(66.666% + 1px), rgba(86, 66, 40, .03) calc(66.666% + 1px), transparent calc(66.666% + 64px));
}

/* A faint A·L watermark: slightly lighter paper in the lower third */
.watermark { position: absolute; z-index: 0; left: 50%; top: 74%; transform: translate(-50%, -50%); font: 400 var(--wm, 150px)/1 var(--f-serif); letter-spacing: .06em; color: rgba(255, 255, 255, .11); white-space: nowrap; pointer-events: none; user-select: none; }

/* Blind embossing: paper raised by the die, no ink. Lit top-left, shaded bottom-right. */
.emboss { color: rgba(120, 104, 80, .07) !important; text-shadow: -.7px -.8px 0 rgba(255, 255, 255, 1), .8px 1px .9px rgba(84, 66, 40, .42), 0 0 .5px rgba(84, 66, 40, .12) !important; }

/* ---------- 4. Profile column (left) ---------- */
.home { position: relative; z-index: 1; }
.stage { position: relative; height: 100vh; height: 100svh; overflow: hidden; overflow: clip; }
.profile {
  position: absolute; z-index: 4; left: 0; top: 0; bottom: 0; width: var(--pw);
  display: flex; flex-direction: column;
  padding: var(--padY) 28px var(--padY) clamp(28px, 4.2vw, 72px);
}
.p-name { margin-top: -.08em; font: 400 clamp(48px, 5.3vw, 82px)/.98 var(--f-serif); letter-spacing: -.014em; color: var(--ink-0); }
.p-line { margin-top: clamp(18px, 2.6vh, 26px); max-width: 21em; font: 400 clamp(16px, 1.32vw, 19px)/1.48 var(--f-text); color: var(--ink-1); text-wrap: pretty; }
.p-links { margin-top: clamp(14px, 2vh, 20px); display: flex; flex-wrap: wrap; gap: 6px 24px; font: 400 clamp(14.5px, 1.08vw, 15.5px)/1.4 var(--f-text); color: var(--ink-1); }
.p-links a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: rgba(35, 32, 28, .32); transition: text-decoration-color .3s ease, text-underline-offset .3s var(--ease-out); }
.p-links a:hover { text-decoration-color: var(--ink-0); text-underline-offset: 5px; }
.p-links a:active { opacity: .7; }
.p-links .mail { color: var(--muted); }
.p-houses { margin-top: auto; }
.p-list { list-style: none; padding: 0; }
.p-list button { position: relative; display: flex; align-items: center; padding: 7px 0; font: 500 11.5px/1.2 var(--f-ui); letter-spacing: .22em; text-transform: uppercase; color: #67625a; transition: color .35s ease; text-align: left; }
/* the active house: a short rule draws in and the name steps right (transforms only) */
.p-list .rule { position: absolute; left: 0; top: 50%; width: 22px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: 0 50%; transition: transform .5s var(--ease-out); }
.p-list .sw, .p-list .nm { transition: transform .5s var(--ease-out); }
/* a tiny swatch of each house's paper before its name */
.p-list .sw { position: relative; flex: none; width: 8px; height: 10px; margin-right: 13px; background: var(--paper); box-shadow: .4px .7px 1px rgba(var(--sc), .3), 1px 2px 3px -1px rgba(var(--sc), .18), var(--edge-colour); }
.p-list .sw::after { content: ""; position: absolute; inset: 0; background: url("../img/grain-cotton.jpg") 0 0 / 120px; mix-blend-mode: soft-light; opacity: .55; }
.p-list .nm { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: transparent; transition: text-decoration-color .3s ease, text-underline-offset .3s var(--ease-out); }
.p-list button:hover { color: var(--ink-0); }
.p-list button:hover .nm { text-decoration-color: rgba(35, 32, 28, .35); text-underline-offset: 5px; }
.p-list button:active { opacity: .7; }
.p-list .on button { color: var(--ink-0); }
.p-list .on .rule { transform: scaleX(1); }
.p-list .on .sw, .p-list .on .nm { transform: translateX(34px); }
.p-foot { margin-top: 24px; display: flex; align-items: baseline; gap: 26px; }
.p-count, .p-index { font: 500 11px/1 var(--f-ui); letter-spacing: .22em; text-transform: uppercase; color: var(--muted); font-variant-numeric: lining-nums tabular-nums; }
.p-index { padding: 6px 0; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; text-decoration-color: rgba(35, 32, 28, .25); transition: color .3s ease, text-decoration-color .3s ease; }
.p-index:hover { color: var(--ink-0); text-decoration-color: currentColor; }
.p-index:active { opacity: .7; }

/* ---------- 5. Table area, intro card, pencil ---------- */
.table {
  position: absolute; z-index: 1; left: var(--pw); right: 0; top: 0; bottom: 0;
  overflow: hidden; overflow: clip;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 72px);
  mask-image: linear-gradient(to right, transparent 0, #000 72px);
}
.table:focus { outline: none; }
.camera { position: absolute; inset: 0; will-change: transform; --tab: 0; }
.track { position: absolute; left: 0; top: 0; height: 100%; display: flex; will-change: transform; }

/* The intro card: her letter to the reader, on laid paper */
.intro-card {
  --lift: 0;
  position: absolute; z-index: 3; left: 50%; top: var(--padY);
  width: var(--cw); height: var(--ch); margin-left: calc(var(--cw) / -2);
  container-type: inline-size; color: var(--letter-ink);
  box-shadow: var(--lift-1), var(--edge-sheet);
}
/* lifted off the table, its shadow grows to --lift-3 before it moves */
.intro-card::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; box-shadow: var(--lift-3); opacity: var(--lift); }
.intro-card .watermark { --wm: 21cqw; top: 81%; }
.ic-face { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; padding: 8.4cqw 9.4cqw 7.6cqw; }
.ic-top { display: flex; justify-content: space-between; align-items: flex-start; }
.ic-mono { font: 500 4.3cqw/1 var(--f-serif); letter-spacing: .14em; white-space: nowrap; }
.ic-date { margin-top: .6cqw; font: 400 max(11px, 2.25cqw)/1 var(--f-text); color: #5d5952; font-variant-numeric: oldstyle-nums; }
.ic-to { margin-top: 13cqw; font: 400 max(12px, 2.4cqw)/1.4 var(--f-text); color: #3e3d40; }
.lbl-sm { font: 500 max(9px, 1.62cqw)/1 var(--f-ui); letter-spacing: .22em; text-transform: uppercase; color: #6c6760; margin-right: 1.6cqw; vertical-align: .12em; }
.ic-dear { margin-top: 4.2cqw; font: italic 400 8.6cqw/1.04 var(--f-salut); letter-spacing: -.012em; color: var(--letter-ink); }
.ic-dear.first { margin-top: 15cqw; }
.ic-re { margin-top: 3.4cqw; font: 400 max(13px, 3.1cqw)/1.4 var(--f-text); color: var(--letter-ink); }
.ic-re em { font-style: italic; color: #6c6760; margin-right: .1em; }
.ic-rule { display: block; height: 1px; margin: 5.2cqw 0 4.4cqw; background: rgba(40, 34, 26, .14); }
.ic-body { font: 400 max(13px, 2.72cqw)/1.62 var(--f-text); color: #2c2d33; font-variant-numeric: oldstyle-nums; text-wrap: pretty; hanging-punctuation: first; }
.ic-body + .ic-body { margin-top: .85em; }
.ic-sign { margin-top: 4.6cqw; font: 400 max(13px, 2.72cqw)/1.4 var(--f-text); color: #2c2d33; }
.sig-img { width: var(--sig-w, 36cqw); height: auto; margin: .4cqw 0 0 -1.4cqw; }
.sig-img.armed, .sig.armed { clip-path: inset(-10% 100% -10% 0); }
.ic-name { margin-top: .4cqw; font: 500 max(9px, 1.62cqw)/1 var(--f-ui); letter-spacing: .26em; text-transform: uppercase; color: #4a4741; }
.ic-stamp { position: absolute; z-index: 2; right: 9cqw; bottom: 8.4cqw; width: 32cqw; }
/* ink on paper: a faint impression in the direction of the light */
.ic-face, .lt-sheet { text-shadow: .3px .4px 0 rgba(255, 255, 255, .5); }

/* the stamp: oxblood ink, uneven density, a slightly overprinted edge */
.stamp-svg { display: block; width: 100%; height: auto; overflow: visible; color: var(--stamp); opacity: .82; transform: rotate(-2deg); mix-blend-mode: multiply; }

/* the pencil lying near the card's lower left */
.pencil { position: absolute; z-index: 2; left: calc(50% - var(--cw) / 2 - 196px); top: calc(var(--padY) + var(--ch) - 300px); width: 270px; height: auto; transform: rotate(38deg); transform-origin: 50% 50%; filter: drop-shadow(7px 12px 10px rgba(var(--sc), .34)) drop-shadow(1px 2px 1.5px rgba(var(--sc), .4)); pointer-events: none; }

/* ---------- 6. Folded letters ---------- */
.stop { --lw: calc(var(--w) * var(--u)); --lh: calc(var(--lw) / 1.5); position: relative; flex: none; height: 100%; width: calc(var(--lw) + 37 * var(--u)); }
.lw { position: absolute; left: 0; top: calc(var(--y0) - var(--lh) / 2); width: var(--lw); height: var(--lh); z-index: 2; will-change: filter, opacity, transform; }

/* A letter folded in thirds, lying closed: the panel beneath (this box), the top
   flap over it with its free edge a hair short, and the flap's shadow on the panel. */
.letter {
  --flap-gap: max(1.5px, calc(var(--lw) * .0075));
  position: absolute; inset: 0; display: block; overflow: hidden;
  background: var(--paper) linear-gradient(to top, rgba(0, 0, 0, .16), rgba(0, 0, 0, .05) 6px, rgba(0, 0, 0, 0) 14px);
  color: var(--ink); text-decoration: none;
  transform: translate(var(--slide, 0px), var(--lift, 0px)) rotate(var(--tilt));
  box-shadow: var(--lift-0), var(--edge-colour);
  transition: transform .7s var(--ease-out), box-shadow .7s var(--ease-out);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.l-flap {
  position: absolute; left: 0; right: 0; top: 0; bottom: var(--flap-gap); z-index: 1;
  background-color: var(--paper);
  background-image:
    /* the rounded fold along the top edge: lit, then a quick falloff */
    linear-gradient(180deg, rgba(255, 255, 255, .2) 0, rgba(255, 255, 255, .07) 1.5px, rgba(255, 255, 255, 0) 6px),
    /* the tent of the panel: lighter toward the light, darker into the fold */
    linear-gradient(168deg, rgba(255, 255, 255, .075) 0%, rgba(255, 255, 255, 0) 42%, rgba(0, 0, 0, .05) 100%),
    radial-gradient(130% 120% at 0% 0%, rgba(255, 255, 255, .06), rgba(255, 255, 255, 0) 60%);
  /* the free edge: a lit hairline and the shadow it casts on the panel below */
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .2), inset 0 -2px 1px rgba(0, 0, 0, .06), 0 1px 1px rgba(0, 0, 0, .34), 0 2.5px 5px -1px rgba(0, 0, 0, .18);
  transition: box-shadow .7s var(--ease-out);
}
.sheen .l-flap { background-image: linear-gradient(180deg, rgba(255, 255, 255, .2) 0, rgba(255, 255, 255, .07) 1.5px, rgba(255, 255, 255, 0) 6px), radial-gradient(90% 140% at 30% 0%, rgba(255, 255, 255, .055), rgba(255, 255, 255, 0) 62%), linear-gradient(168deg, rgba(255, 255, 255, .03) 0%, rgba(0, 0, 0, .08) 100%); }
.letter:focus-visible { outline: 1px solid rgba(35, 32, 28, .45); outline-offset: 9px; }
.face { position: absolute; inset: 0; z-index: 2; opacity: calc(1 - var(--tab, 0)); }
/* printed into the paper: a hair of shadow above, a hair of light below */
.face, .tab-name { text-shadow: -.5px -.5px 0 var(--imp-sh), .5px .5px 0 var(--imp-hl); }
.face .mono {
  position: absolute; left: 0; right: 0; top: 18%; transform: translateY(-50%); text-align: center;
  font: 500 calc(var(--lw) * .034)/1 var(--f-serif); letter-spacing: .24em; padding-left: .24em; opacity: .78; white-space: nowrap;
}
.face .dear {
  position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-54%); text-align: center;
  font: italic 400 calc(var(--lw) * .082)/1 var(--f-salut); white-space: nowrap;
}

/* hover: the letter lifts, its flap rises a hair, a halo in its colour blooms */
.halo {
  position: absolute; left: -38%; right: -38%; top: -52%; bottom: -52%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, var(--halo) 0%, color-mix(in srgb, var(--halo) 40%, transparent) 46%, transparent 100%);
  filter: blur(14px); opacity: 0; transform: scale(.86);
  transition: opacity .8s var(--ease-out), transform 1s var(--ease-out);
}
.lw:hover .halo, .lw.hot .halo { opacity: var(--halo-op); transform: scale(1); }
.lw:hover .letter, .lw.hot .letter { --lift: -5px; box-shadow: var(--lift-2), var(--edge-colour); }
.lw:hover .l-flap, .lw.hot .l-flap { box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .16), 0 1.6px 1.6px rgba(0, 0, 0, .3), 0 3.5px 6px -1px rgba(0, 0, 0, .2); }
.lw:active .letter { --lift: -2px; }

/* on the side: each letter's strip carries its house name in vertical caps */
.tab-name {
  position: absolute; z-index: 3; top: 0; bottom: 0; right: 0; overflow: hidden;
  width: calc(var(--tabw, 46px) / var(--kt, 1));
  display: flex; align-items: center; justify-content: center;
  writing-mode: vertical-rl; text-orientation: sideways; white-space: nowrap; pointer-events: none;
  font: 600 calc(var(--tabf, 9px) / var(--kt, 1))/1 var(--f-ui); letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink); opacity: var(--tab, 0);
}
/* tighten the apostrophe in vertical names (L’Oréal) so it does not read as a dash */
.tab-name .ap { letter-spacing: .02em; }
.is-tabs .halo { display: none; }
.is-tabs .lw:hover .letter, .is-tabs .lw.hot .letter { --lift: 0px; --slide: calc(20px / var(--kt, 1)); box-shadow: var(--lift-1), var(--edge-colour); }

/* small folded letters: Index rows, previous and next */
.mini-letter { position: relative; flex: none; display: block; width: 40px; height: 27px; background: var(--paper) linear-gradient(to top, rgba(0, 0, 0, .18), rgba(0, 0, 0, 0) 3px); box-shadow: var(--lift-0), var(--edge-colour); overflow: hidden; transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out); }
.mini-letter::before { content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 1.5px; background: var(--paper) linear-gradient(168deg, rgba(255, 255, 255, .1), rgba(0, 0, 0, .05)); box-shadow: 0 .7px .8px rgba(0, 0, 0, .28); }

/* ---------- 7. Research on the table ---------- */
.docs { position: absolute; left: var(--lw); top: 0; width: calc(37 * var(--u)); height: 100%; z-index: 1; pointer-events: none; will-change: filter, opacity; }
.doc { position: absolute; box-shadow: var(--lift-0), var(--edge-card); }

/* the sketch card: a gouache design drawing on cotton card */
.sk-card { left: calc(3 * var(--u)); top: calc(var(--y0) - 13.6 * var(--u)); width: calc(21.6 * var(--u)); height: calc(28 * var(--u)); transform: rotate(var(--skt)); }
.sk-img { position: absolute; left: calc(1.2 * var(--u)); top: calc(1.2 * var(--u)); width: calc(19.2 * var(--u)); height: calc(19.2 * var(--u)); mix-blend-mode: multiply; }
.sk-note { position: absolute; left: calc(1.7 * var(--u)); bottom: calc(1.5 * var(--u)); max-width: calc(11.6 * var(--u)); font: 400 max(19px, calc(2 * var(--u)))/.9 var(--f-note); color: rgba(68, 68, 66, .94); transform: rotate(-1.4deg); transform-origin: left bottom; }
.sk-stamp { position: absolute; z-index: 1; right: calc(.9 * var(--u)); top: calc(1.5 * var(--u)); width: calc(9 * var(--u)); }

/* the figure card: a page from a report, clipped to the sketch card */
.fig-card { z-index: 2; left: calc(16.8 * var(--u)); top: calc(var(--y0) + 4.2 * var(--u)); width: calc(15.6 * var(--u)); padding: calc(1.5 * var(--u)) calc(1.4 * var(--u)) calc(1.3 * var(--u)); transform: rotate(var(--cft)); box-shadow: var(--lift-1), var(--edge-card); }
.fc-lbl { display: block; font: 600 max(11px, calc(.86 * var(--u)))/1.4 var(--f-ui); font-variant-caps: all-small-caps; letter-spacing: .1em; color: #4f4a43; text-wrap: balance; }
.fc-fig { display: block; margin-top: calc(.5 * var(--u)); font: 400 max(30px, calc(3.1 * var(--u)))/1 var(--f-serif); font-variant-numeric: lining-nums; letter-spacing: -.01em; color: #1f1d1a; }
.fc-rule { display: block; height: 1px; margin: calc(1 * var(--u)) 0 calc(.75 * var(--u)); background: rgba(40, 34, 26, .22); }
.fc-src { display: block; font: italic 400 max(11.5px, calc(.9 * var(--u)))/1.38 var(--f-text); color: #5f5a52; }
.clip { position: absolute; z-index: 3; width: calc(5.2 * var(--u)); height: auto; filter: drop-shadow(.6px 1.2px .8px rgba(var(--sc), .35)) drop-shadow(2px 3px 3px rgba(var(--sc), .12)); pointer-events: none; }
.fig-card .clip { left: calc(1.2 * var(--u)); top: calc(-1.5 * var(--u)); transform: rotate(-86deg); }

/* printers' colour chips: the paper, the ink */
.chip { left: calc(25.8 * var(--u)); width: calc(5.6 * var(--u)); padding: calc(.36 * var(--u)) calc(.36 * var(--u)) calc(.55 * var(--u)); transform: rotate(var(--ct, .6deg)); }
.chip.c1 { top: calc(var(--y0) - 13 * var(--u)); }
.chip.c2 { top: calc(var(--y0) - 4.6 * var(--u)); --ct: -.8deg; }
.chip i { display: block; height: calc(4.6 * var(--u)); background: var(--c); box-shadow: inset 0 0 0 .5px rgba(0, 0, 0, .1); }
.chip b, .chip span { display: block; font: 500 11px/1.25 var(--f-ui); color: #514c45; }
.chip b { margin-top: calc(.42 * var(--u)); font-weight: 600; font-variant-caps: all-small-caps; letter-spacing: .1em; }
.chip span { letter-spacing: .03em; font-variant-numeric: tabular-nums; }

/* LVMH: a small Exhibit 1 under the sketch card */
.mini-ex { left: calc(3.6 * var(--u)); top: calc(var(--y0) - 25.6 * var(--u)); width: calc(22 * var(--u)); padding: calc(1.1 * var(--u)) calc(1.2 * var(--u)) calc(1 * var(--u)); transform: rotate(-1.2deg); z-index: 0; }
.mx-k { display: block; font: 600 11px/1.3 var(--f-ui); font-variant-caps: all-small-caps; letter-spacing: .12em; color: #4f4a43; }
.mx-t { display: block; margin-top: 2px; font: italic 400 11.5px/1.3 var(--f-text); color: #4f4a43; }
.mx-rows { display: grid; gap: 3px; margin-top: calc(.7 * var(--u)); }
.mx-row { display: grid; grid-template-columns: 1fr calc(7.6 * var(--u)); align-items: center; gap: 8px; font: 400 11px/1.25 var(--f-text); color: #3a3732; }
.mx-row i { display: block; height: 7px; width: var(--v); border: .75px solid rgba(29, 31, 38, .72); border-left-width: 1px; background: repeating-linear-gradient(45deg, rgba(29, 31, 38, .55) 0 .75px, transparent .75px 3px); }

/* ---------- 8. Captions ---------- */
.cap { position: absolute; left: calc(var(--lw) / 2); top: calc(var(--y0) + 12.8 * var(--u)); width: calc(34 * var(--u)); transform: translate(calc(-50% + var(--cx, 0px)), var(--cy, 0px)); text-align: center; pointer-events: none; z-index: 3; }
.cap-house { font: 500 11.5px/1 var(--f-ui); letter-spacing: .32em; padding-left: .32em; text-transform: uppercase; color: var(--ink-0); }
.cap-re { margin-top: calc(1.05 * var(--u)); font: 400 max(21px, calc(1.86 * var(--u)))/1.12 var(--f-serif); color: #24221e; text-wrap: balance; }
.cap-re em { font-style: italic; color: #6a655d; padding-right: .12em; }

/* ---------- 9. Dive flood ---------- */
.flood { position: fixed; z-index: 120; left: 0; top: 0; overflow: hidden; pointer-events: none; transform-origin: 50% 50%; background: var(--paper); color: var(--ink); }
.flood .l-flap { transition: none; }
.flood .face { inset: auto; left: 50%; top: 50%; width: var(--lw); height: calc(var(--lw) / 1.5); transform: translate(-50%, -50%); }

/* ---------- 10. The opened letter ---------- */
.case { position: fixed; inset: 0; z-index: 100; background: var(--c-paper, #4A3021); color: var(--c-ink, #EFE3CC); visibility: hidden; transition: background-color .8s ease, color .8s ease; }
.case.on { visibility: visible; }
.case.no-tr { transition: none; }
/* the colour field is the house paper: its fibre and the light across it */
.case.grainfield::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: var(--g-img); background-size: var(--g-size, 420px); background-position: var(--px, 0px) var(--py, 0px); mix-blend-mode: var(--g-blend, soft-light); opacity: var(--g-op, .5); }
.case::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(120% 95% at 22% 0%, rgba(255, 255, 255, .07), rgba(255, 255, 255, 0) 52%), radial-gradient(140% 110% at 70% 100%, rgba(0, 0, 0, .14), rgba(0, 0, 0, 0) 60%); }
.case-scroll { position: absolute; inset: 0; z-index: 5; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; outline: none; }
.x { position: absolute; z-index: 6; top: 14px; right: 14px; width: 44px; height: 44px; padding: 0; border: 1px solid color-mix(in srgb, currentColor 34%, transparent); background: var(--x-bg, transparent); color: inherit; transition: background-color .3s ease, border-color .3s ease; }
.x::before, .x::after { content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 1px; background: currentColor; }
.x::before { transform: translate(-50%, -50%) rotate(45deg); }
.x::after { transform: translate(-50%, -50%) rotate(-45deg); }
.case .x { --x-bg: var(--c-paper); right: 30px; }
.x:hover { background: color-mix(in srgb, currentColor 9%, var(--x-bg, transparent)); border-color: color-mix(in srgb, currentColor 60%, transparent); }
.x:active { background: color-mix(in srgb, currentColor 16%, var(--x-bg, transparent)); }

/* the statement: the question alone, the figure beneath, printed in the house ink */
.hero { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; place-items: center; padding: 72px clamp(20px, 6vw, 96px) 150px; }
.hero-in { text-align: center; will-change: opacity, transform; text-shadow: -.5px -.5px 0 var(--imp-sh, rgba(0, 0, 0, .2)), .5px .5px 0 var(--imp-hl, rgba(255, 255, 255, .1)); }
.hero-q { margin: 0 auto; max-width: 15.5em; font: 400 clamp(38px, 4.6vw, 74px)/1.08 var(--f-serif); letter-spacing: -.01em; text-wrap: balance; }
.hero-fig { margin-top: clamp(40px, 8vh, 80px); display: flex; flex-direction: column; align-items: center; gap: 16px; }
.hero-fig::before { content: ""; width: 1px; height: clamp(22px, 4vh, 40px); background: currentColor; opacity: .38; margin-bottom: 6px; }
.hero-fig .fig { font: 300 clamp(44px, 4.8vw, 76px)/1 var(--f-serif); font-variant-numeric: lining-nums; letter-spacing: -.012em; }
.hero-fig .fig-lbl { font: 500 11px/1.6 var(--f-ui); letter-spacing: .26em; padding-left: .26em; text-transform: uppercase; max-width: 64ch; text-wrap: balance; }

/* the letter: a stack of sheets rising over the colour field */
.sheets { --sw: min(780px, calc(100vw - 48px)); position: relative; z-index: 2; width: var(--sw); margin: -64px auto 0; display: grid; gap: 34px; }
.lt-sheet {
  position: relative; min-height: calc(var(--sw) * 1.4142); display: flex; flex-direction: column;
  padding: 72px 88px 58px; color: var(--letter-ink);
  font: 400 19.5px/1.56 var(--f-text); font-variant-numeric: oldstyle-nums proportional-nums; hanging-punctuation: first;
  box-shadow: var(--lift-2), var(--edge-sheet);
}
.lt-sheet > *:not(.watermark) { position: relative; z-index: 1; }
.lt-sheet .watermark { --wm: 168px; top: 88%; }
.lt-sheet p, .lt-sheet ol, .lt-sheet ul { max-width: 64ch; }
.lt-sheet p + p { margin-top: 1em; }
.lt-body { flex: 1 0 auto; }
.lt-sheet.with-encl { padding-bottom: 116px; }
.lt-body > section:first-child h3 { margin-top: 0; }

/* letterhead: the blind-embossed monogram, her name in small caps */
.lh { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-bottom: 44px; }
.lh-mono { font: 500 34px/1 var(--f-serif); letter-spacing: .26em; padding-left: .26em; }
.lh-name { font: 500 10.5px/1 var(--f-ui); letter-spacing: .32em; padding-left: .32em; text-transform: uppercase; color: #3c3d43; }
.lt-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; font-size: 15.5px; color: #4d4e55; margin-bottom: 38px; }
.lt-meta .to b { font: 500 9.5px/1 var(--f-ui); letter-spacing: .24em; text-transform: uppercase; color: #6c6760; margin-right: 10px; vertical-align: .15em; }
.lt-meta .date { margin-left: auto; text-align: right; }
.lt-cont { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 14px; margin-bottom: 40px; border-bottom: 1px solid rgba(40, 34, 26, .14); font: 500 10.5px/1 var(--f-ui); letter-spacing: .26em; text-transform: uppercase; color: #55565d; }
.lt-cont .date { font: 400 14.5px/1 var(--f-text); letter-spacing: 0; text-transform: none; color: #5a5b62; }
.salut { font: italic 400 clamp(28px, 3vw, 34px)/1.15 var(--f-salut); margin-bottom: 18px; }
.re { font-weight: 500; font-size: 19.5px; line-height: 1.45; margin-bottom: 28px; }
.re em { font: italic 500 23px/1 var(--f-serif); padding-right: .15em; color: #55565d; }
.lead { font-size: 20.5px; line-height: 1.54; }
.lt-sheet h3 { margin: 2.1em 0 .5em; font: 500 clamp(26px, 2.4vw, 30px)/1.12 var(--f-serif); letter-spacing: -.004em; color: #1b1c22; }
.cite { white-space: nowrap; color: #6a6b72; }
.points { list-style: none; padding: 0; counter-reset: pt; }
.points li { counter-increment: pt; position: relative; padding: 16px 0 16px 46px; border-top: 1px solid rgba(40, 34, 26, .13); }
.points li:last-child { border-bottom: 1px solid rgba(40, 34, 26, .13); }
.points li::before { content: counter(pt); position: absolute; left: 2px; top: 11px; font: 400 32px/1 var(--f-serif); font-variant-numeric: lining-nums; color: #85817a; }
.points b { font-weight: 500; }

/* footnote markers and notes */
.fn-ref { font-size: .62em; line-height: 0; vertical-align: .55em; margin-left: .06em; font-variant-numeric: lining-nums; }
.fn-ref a { text-decoration: none; color: #5a5b62; padding: 0 1px; }
.fn-ref a:hover { color: var(--letter-ink); text-decoration: underline; text-underline-offset: 2px; }
.fns { position: relative; margin-top: 36px; padding: 14px 0 0; list-style: none; font: 400 13.5px/1.45 var(--f-text); color: #4f5057; font-variant-numeric: lining-nums; max-width: 64ch; }
.fns::before { content: ""; position: absolute; left: 0; top: 0; width: 56px; height: 1px; background: rgba(40, 34, 26, .3); }
.fns li { position: relative; padding-left: 18px; }
.fns li + li { margin-top: 3px; }
.fns .n { position: absolute; left: 0; top: 0; font-size: 11.5px; }
.fns .back { margin-left: 4px; color: #85817a; text-decoration: none; }
.fns .back:hover { color: var(--letter-ink); }

/* exhibit: hand-ruled, printed in ink on the sheet, every bar on one axis */
.exhibit { position: relative; margin: 34px 0 6px; padding: 22px 0 0; border-top: 1px solid rgba(40, 34, 26, .26); }
.ex-cap { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin-bottom: 22px; }
.ex-k { font: 600 11px/1 var(--f-ui); letter-spacing: .2em; text-transform: uppercase; color: #34353b; }
.ex-t { font: italic 400 16px/1.35 var(--f-text); color: #45464d; }
.chart { --lab: 12.4em; --chg: 3.4em; position: relative; font-size: 15px; font-variant-numeric: lining-nums tabular-nums; }
.row { display: grid; grid-template-columns: var(--lab) 1fr var(--chg); column-gap: 14px; align-items: center; }
.r-lbl { line-height: 1.25; color: #26272d; padding: 9px 0; font-variant-numeric: lining-nums; }
.r-track { position: relative; align-self: stretch; min-height: 38px; border-left: 1px solid rgba(29, 31, 38, .8); background: linear-gradient(90deg, rgba(29, 31, 38, .12) 1px, transparent 1px) 0 0 / 20% 100% repeat-x; }
.r-bar { position: absolute; left: -1px; top: 50%; height: 14px; width: calc(var(--v) + 1px); transform: translateY(-50%); border: .75px solid rgba(29, 31, 38, .82); border-left: 0; background: repeating-linear-gradient(45deg, rgba(29, 31, 38, .62) 0 .75px, transparent .75px 3px); }
.r-val { position: absolute; left: calc(var(--v) + 9px); top: 50%; transform: translateY(-50%); font-size: 14px; color: #26272d; white-space: nowrap; }
.r-chg { text-align: right; font-size: 14px; color: #44454c; }
.row.total { border-top: .75px solid rgba(29, 31, 38, .5); margin-top: 6px; }
.row.total .r-lbl { font-style: italic; }
.row.total .r-bar { background: none; }
.row.head .r-chg { font: 600 10px/1 var(--f-ui); letter-spacing: .18em; text-transform: uppercase; color: #5c5d64; padding-bottom: 8px; }
.row.head .r-track { min-height: 14px; background: none; }
.row.axis .r-track { min-height: 26px; background: none; border-left-color: transparent; }
.tick { position: absolute; top: 0; left: var(--t); font: 500 10.5px/1 var(--f-ui); letter-spacing: .04em; color: #5c5d64; transform: translateX(-50%); padding-top: 10px; }
.tick::before { content: ""; position: absolute; left: 50%; top: 0; height: 5px; width: .75px; background: rgba(29, 31, 38, .8); }
.tick:first-child { transform: translateX(-1px); }
.tick:first-child::before { left: 0; }
.chart::after { content: ""; position: absolute; top: 14px; bottom: 26px; left: calc(var(--lab) + 14px); right: calc(var(--chg) + 14px); border-right: .75px dashed rgba(29, 31, 38, .2); pointer-events: none; }
.ex-src { margin-top: 10px; font: italic 400 14px/1.4 var(--f-text); color: #5a5b62; font-variant-numeric: lining-nums; }
/* one graphite note in her hand, with a drawn arrow */
.ex-note { position: absolute; z-index: 2; left: calc(var(--v) + 30px); top: -34px; font: 400 23px/1 var(--f-note); color: rgba(64, 64, 62, .92); white-space: nowrap; transform: rotate(-3deg); transform-origin: left bottom; pointer-events: none; text-shadow: none; }
.ex-note svg { position: absolute; left: -33px; top: 20px; width: 34px; height: 30px; overflow: visible; }
.ex-note path { fill: none; stroke: rgba(64, 64, 62, .85); stroke-width: 1.15; stroke-linecap: round; stroke-linejoin: round; }

/* short letters: the key figure with its footnote */
.figblock { margin: 34px 0 6px; padding: 22px 0 0; border-top: 1px solid rgba(40, 34, 26, .26); }
.fb-fig { font: 300 clamp(52px, 6vw, 72px)/1 var(--f-serif); font-variant-numeric: lining-nums; letter-spacing: -.012em; }
.fb-lbl { display: block; margin-top: 12px; font: 500 11px/1.5 var(--f-ui); letter-spacing: .2em; text-transform: uppercase; color: #3e3f46; }

/* closing, signature, P.S. */
.closing { margin-top: 2.2em; }
.signoff { margin-top: 1.3em !important; }
.sig { display: block; margin: 4px 0 0 -8px; width: 230px; height: auto; }
.typed { font: 500 10.5px/1 var(--f-ui) !important; letter-spacing: .28em; text-transform: uppercase; color: #3c3d43; margin-top: 2px !important; }
.ps { margin-top: 30px !important; font-style: italic; }
.ps .ps-k { font: italic 500 21px/1 var(--f-serif); padding-right: .3em; font-style: italic; }

/* enclosures: small cotton cards clipped to the last sheet */
.encl { position: relative; z-index: 3; width: min(760px, calc(100vw - 48px)); margin: -46px auto 0; }
.encl-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; padding: 0 22px; }
.ec { position: relative; text-align: left; padding: 16px 16px 18px; min-height: 168px; display: flex; flex-direction: column; gap: 8px; color: #24252b; box-shadow: var(--lift-1), var(--edge-card); transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out); }
.ec:nth-child(3n+1) { transform: rotate(-1.1deg); }
.ec:nth-child(3n+2) { transform: rotate(.7deg) translateY(10px); }
.ec:nth-child(3n) { transform: rotate(-.4deg) translateY(4px); }
.ec:hover { transform: translateY(-4px); box-shadow: var(--lift-2), var(--edge-card); }
.ec:active { transform: translateY(-1px); }
.ec .clip { left: 22px; top: -30px; width: 62px; transform: rotate(-84deg); }
.ec-k { font: 600 10.5px/1 var(--f-ui); letter-spacing: .2em; text-transform: uppercase; color: #6a6560; }
.ec-t { font: 400 15px/1.35 var(--f-text); color: #24252b; }
.ec-mini { display: grid; gap: 4px; margin-top: auto; padding-top: 8px; }
.ec-mini i { display: block; height: 5px; width: var(--v); border: .75px solid rgba(29, 31, 38, .72); border-left-width: 1px; background: repeating-linear-gradient(45deg, rgba(29, 31, 38, .5) 0 .75px, transparent .75px 3px); }
.ec-list { margin: auto 0 0; padding: 6px 0 0; list-style: none; font: 400 12.5px/1.45 var(--f-text); color: #4f5057; font-variant-numeric: lining-nums; }

/* back to the table, previous and next letters */
.case-nav { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; width: min(780px, calc(100vw - 48px)); margin: 0 auto; padding: 72px 0 96px; }
.cn { display: inline-flex; align-items: center; gap: 14px; padding: 8px 0; color: inherit; font: italic 400 clamp(18px, 1.75vw, 23px)/1.15 var(--f-salut); }
.cn.next { justify-self: end; }
.cn.prev { justify-self: start; }
.cn.back { font: 500 11px/1 var(--f-ui); letter-spacing: .24em; text-transform: uppercase; padding: 12px 0; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); }
.cn.back:hover { text-decoration-color: currentColor; }
.cn:hover .cn-t { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.cn:hover .mini-letter { transform: translateY(-3px); box-shadow: var(--lift-2), var(--edge-colour); }
.cn:active { opacity: .75; }

/* ---------- 11. Index overlay, phone bar ---------- */
.index { position: fixed; inset: 0; z-index: 90; background: var(--table) url("../img/table.jpg") 18% 0 / cover; overflow-y: auto; overscroll-behavior: contain; opacity: 0; transition: opacity .4s ease; }
.index::before { content: ""; position: fixed; inset: 0; pointer-events: none; background: rgba(246, 244, 239, .82); }
.index.on { opacity: 1; }
.index[hidden] { display: none; }
.index .x { position: fixed; top: 10px; right: clamp(12px, 3.3vw, 52px); }
.ix-in { position: relative; width: min(1120px, calc(100% - 40px)); margin: 0 auto; padding: clamp(84px, 13vh, 132px) 0 64px; }
.ix-title { margin: 0 0 clamp(28px, 6vh, 56px); font-family: var(--f-serif); font-weight: 400; line-height: .9; color: var(--ink-0); }
.t-it { display: block; font-style: italic; font-weight: 300; font-size: clamp(44px, 5vw, 66px); letter-spacing: -.012em; }
.t-caps { display: block; font-size: clamp(32px, 3.7vw, 50px); letter-spacing: .035em; text-transform: uppercase; padding-left: 1.05em; margin-top: .02em; }
.ix-list { list-style: none; padding: 0; border-top: 1px solid rgba(35, 32, 28, .2); }
.ix-list li { border-bottom: 1px solid rgba(35, 32, 28, .2); }
.ix-row { width: 100%; display: grid; grid-template-columns: 3.4em 56px 10.5em 1fr 7em; align-items: center; column-gap: 20px; padding: 20px 6px; text-align: left; transition: background-color .3s ease; }
.ix-row:hover { background: rgba(255, 255, 255, .45); }
.ix-row:hover .mini-letter { transform: translateY(-2px); box-shadow: var(--lift-2), var(--edge-colour); }
.ix-row:active { background: rgba(255, 255, 255, .7); }
.ix-n { font: 500 11px/1 var(--f-ui); letter-spacing: .2em; color: var(--ink-2); }
.ix-row .mini-letter { width: 44px; height: 29px; }
.ix-house { font: 500 12px/1.2 var(--f-ui); letter-spacing: .26em; text-transform: uppercase; color: var(--ink-0); }
.ix-re { font: 400 clamp(20px, 1.9vw, 26px)/1.15 var(--f-serif); color: #24221e; text-wrap: balance; }
.ix-fig { text-align: right; font: 400 24px/1 var(--f-serif); font-variant-numeric: lining-nums; color: var(--ink-1); }
.ix-mail { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 10px 30px; font: 500 11.5px/1 var(--f-ui); letter-spacing: .22em; text-transform: uppercase; color: var(--ink-1); }
.ix-mail a { text-decoration: none; }
.ix-mail a:hover { text-decoration: underline; text-underline-offset: 5px; }
.ix-mail span { text-transform: none; letter-spacing: .04em; font: 400 15px/1 var(--f-text); }
.phonebar, .ic-tabs { display: none; }

/* CV viewer */
.cvview { position: fixed; inset: 0; z-index: 110; background: rgba(238, 235, 229, .95); overflow-y: auto; overscroll-behavior: contain; opacity: 0; transition: opacity .35s ease; }
.cvview.on { opacity: 1; }
.cvview[hidden] { display: none; }
.cvview .x { position: fixed; top: 10px; right: clamp(12px, 3.3vw, 52px); --x-bg: #EEEBE5; }
.cv-in { width: min(820px, calc(100% - 32px)); margin: 0 auto; padding: 72px 0 56px; }
.dv-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; padding-bottom: 14px; margin-bottom: 24px; border-bottom: 1px solid rgba(35, 32, 28, .2); color: var(--ink-0); }
.dv-t { font: italic 400 clamp(20px, 2vw, 26px)/1.2 var(--f-serif); }
.dv-head .dl-btn { margin-left: auto; }
.dv-pages { display: grid; gap: 24px; }
.dv-page { display: block; width: 100%; height: auto; background: #fff; box-shadow: var(--lift-2); }
/* an enclosure that is a file: a small preview of its first page */
/* enclosures that are files: small square cards, each opens the document */
.encl-cards.files { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; padding: 0 44px; }
.encl-cards.files .ec { min-height: 0; aspect-ratio: 1; padding: 18px 18px 16px; gap: 8px; }
.encl-cards.files .ec { --tint: #F7F4EC !important; --veil-k: 56%; background-size: 100% 100%, 100% 100%, 560px 560px; }
.encl-cards.files .ec::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: url("../img/grain-cotton.jpg") 0 0 / 300px; mix-blend-mode: multiply; opacity: .08; }
.encl-cards.files .ec:nth-child(2)::after { background-position: 140px 90px; }
.encl-cards.files .ec:nth-child(3)::after { background-position: 60px 210px; }
.encl-cards.files .ec > * { position: relative; z-index: 1; }
.encl-cards.files .ec > .clip { position: absolute; z-index: 3; }
.encl-cards.files .ec-k { font-size: 10.5px; }
.encl-cards.files .ec-meta { font-size: 10px; }
.encl-cards.files .ec-open { font-size: 11px; padding-top: 7px; }
.encl-cards.files .ec-t { font: 400 clamp(17px, 1.6vw, 20px)/1.2 var(--f-serif); color: #1d1f26; }
.encl-cards.files .ec .clip { left: 18px; top: -26px; width: 54px; }
.ec-open { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; padding-top: 6px; border-top: 1px solid rgba(40, 34, 26, .25); font: 600 10.5px/1 var(--f-ui); letter-spacing: .2em; text-transform: uppercase; color: var(--c-link, var(--c-paper, #13234A)); transition: gap .4s var(--ease-out); }
.ec:hover .ec-open { gap: 11px; }
.encl-cards.files .ec { cursor: pointer; }
.encl-cards.files .ec:hover { box-shadow: var(--lift-3), var(--edge-card); }
.encl-hint { margin: 28px 44px 0; font: italic 400 17px/1.3 var(--f-salut); opacity: .82; }
.encl-hint::before { content: "↑"; font-style: normal; margin-right: 10px; font-family: var(--f-ui); font-size: 13px; }
.ec-meta { margin-top: auto; font: 500 10px/1.3 var(--f-ui); letter-spacing: .16em; text-transform: uppercase; color: #6a6560; }
@media screen and (max-width: 759.98px) {
  .encl-cards.files { gap: 10px; padding: 0 6px; }
  .encl-cards.files .ec { padding: 11px 10px 10px; gap: 5px; }
  .encl-cards.files .ec-t { font-size: 14px; }
  .encl-cards.files .ec-k, .encl-cards.files .ec-meta, .encl-cards.files .ec-open { font-size: 8.5px; letter-spacing: .1em; white-space: nowrap; }
  .encl-hint { margin: 24px 8px 0; font-size: 15px; }
}
.ec-thumb { display: block; margin-top: auto; padding-top: 8px; }
.ec-thumb img { display: block; width: 100%; height: 92px; object-fit: cover; object-position: 50% 0; box-shadow: var(--lift-0); }
.cv-actions { margin-top: 24px; text-align: center; font: 500 11.5px/1 var(--f-ui); letter-spacing: .22em; text-transform: uppercase; color: var(--ink-0); }

/* Download PDF buttons: visible only where the viewer can save files */
.dl-btn { display: none; padding: 10px 2px; font: 500 11px/1 var(--f-ui); letter-spacing: .22em; text-transform: uppercase; color: inherit; text-decoration: underline; text-underline-offset: 5px; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); }
.dl-btn:hover { text-decoration-color: currentColor; }
html.dl-on .dl-btn { display: inline-block; }

/* the case study attached below a letter */
.attach { position: relative; z-index: 2; width: min(900px, calc(100vw - 48px)); margin: 84px auto 0; }
.at-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; padding-bottom: 16px; margin-bottom: 26px; border-bottom: 1px solid color-mix(in srgb, currentColor 30%, transparent); }
.at-k { font: 600 11px/1 var(--f-ui); letter-spacing: .24em; text-transform: uppercase; }
.at-t { font: italic 400 clamp(22px, 2.2vw, 28px)/1.2 var(--f-serif); }
.at-n { font: 500 11px/1 var(--f-ui); letter-spacing: .18em; text-transform: uppercase; opacity: .7; }
.at-head .dl-btn { margin-left: auto; }
.at-pages { display: grid; gap: 26px; }
.at-page { display: block; width: 100%; height: auto; background: #fff; box-shadow: var(--lift-3); }

/* ---------- 12. Phone and no-GSAP: stacked layout ---------- */
html.stack { --u: min(2.35vw, 10.6px); }
.stack .stage { height: auto; overflow: visible; }
.stack .profile { position: relative; width: auto; max-width: 540px; margin: 0 auto; padding: max(40px, env(safe-area-inset-top)) 22px 0; }
.stack .p-name { font-size: 48px; }
.stack .p-line { font-size: 17px; margin-top: 14px; }
.stack .p-links { font-size: 15px; margin-top: 12px; }
.stack .p-houses, .stack .p-foot, .stack .pencil { display: none; }
.stack .table { position: relative; left: auto; overflow: visible; -webkit-mask-image: none; mask-image: none; }
.stack .camera { position: relative; inset: auto; will-change: auto; }
.stack .intro-card { position: relative; left: auto; top: auto; margin: 30px auto 0; width: min(calc(100% - 48px), 470px); height: auto; aspect-ratio: 1 / 1.4142; transform: none !important; opacity: 1 !important; visibility: visible !important; }
.stack .ic-face { position: relative; inset: auto; padding: 30px 26px 32px; }
.stack .ic-mono { font-size: 19px; }
.stack .ic-date { font-size: 12.5px; }
.stack .ic-to { margin-top: 40px; font-size: 14px; }
.stack .lbl-sm { font-size: 9px; margin-right: 8px; }
.stack .ic-dear { margin-top: 16px; font-size: 36px; }
.stack .ic-dear.first { margin-top: 44px; }
.stack .ic-re { margin-top: 12px; font-size: 16px; }
.stack .ic-rule { margin: 20px 0 16px; }
.stack .ic-body { font-size: 15.5px; }
.stack .ic-sign { margin-top: 18px; font-size: 15.5px; }
.stack .sig-img { --sig-w: 150px; margin-left: -6px; }
.stack .ic-name { font-size: 9.5px; }
.stack .ic-stamp { position: relative; right: auto; bottom: auto; margin: 16px 0 0 auto; width: 132px; }
.stack .intro-card .watermark { --wm: 110px; }
.stack .ic-tabs { position: absolute; z-index: -1; left: calc(100% - 2px); top: 10%; bottom: 3%; width: 14px; display: flex; flex-direction: column; gap: 3px; }
.stack .ic-tabs button { position: relative; flex: 1; background: var(--paper); border-radius: 0 1.5px 1.5px 0; box-shadow: var(--lift-0), var(--edge-colour); }
.stack .ic-tabs button::after { content: ""; position: absolute; inset: -2px -8px -2px -6px; }   /* a larger touch target, inside the page edge */
.stack .ic-tabs button:active { transform: translateX(3px); }
.stack .track { position: relative; display: block; transform: none !important; will-change: auto; padding-bottom: 16vh; }
.stack .stop { --y0: 0px; width: auto; height: auto; min-height: 82svh; display: grid; grid-template-areas: "art" "cap" "res"; justify-items: center; align-content: center; padding: 76px 0 34px; z-index: auto !important; }
.stack .lw { grid-area: art; position: relative; left: auto; top: auto; filter: none !important; opacity: 1 !important; transform: none !important; will-change: auto; }
.stack .cap { grid-area: cap; position: relative; left: auto; top: auto; transform: none; opacity: 1 !important; visibility: visible !important; width: min(86vw, 380px); margin-top: 30px; }
.stack .cap-re { font-size: 25px; margin-top: 14px; }
.stack .docs { grid-area: res; position: relative; left: auto; top: auto; width: min(calc(100vw - 40px), 360px); height: 300px; margin-top: 30px; filter: none !important; opacity: 1 !important; visibility: visible !important; will-change: auto; }
.stack .docs > .chip, .stack .docs > .mini-ex { display: none; }
.stack .sk-card { left: 0; top: 0; width: 200px; height: 262px; }
.stack .sk-img { left: 10px; top: 10px; width: 180px; height: 180px; }
.stack .sk-note { left: 14px; bottom: 14px; font-size: 20px; max-width: 120px; }
.stack .sk-stamp { right: 8px; top: 14px; width: 86px; }
.stack .fig-card { left: auto; right: 0; top: 120px; width: 172px; padding: 16px 15px 14px; }
.stack .fc-fig { font-size: 30px; }
.stack .fig-card .clip { left: -17px; top: -26px; width: 58px; }
.stack .halo { display: none; }
.stack .phonebar {
  position: fixed; z-index: 30; left: 0; right: 0; bottom: 0;
  display: flex; justify-content: space-between; align-items: center;
  padding: 30px 18px max(16px, env(safe-area-inset-bottom));
  background: linear-gradient(rgba(240, 237, 231, 0), rgba(240, 237, 231, .96) 58%);
  pointer-events: none;
}
.stack .phonebar > * { pointer-events: auto; }
.pb-index { display: inline-flex; align-items: center; gap: 10px; padding: 8px 0; font: 500 10.5px/1 var(--f-ui); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-0); }
.pb-index .ico { width: 14px; height: 6px; border-top: 1px solid currentColor; border-bottom: 1px solid currentColor; }
.pb-index:active { opacity: .65; }
.pb-count { font: 500 10.5px/1 var(--f-ui); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-1); font-variant-numeric: lining-nums tabular-nums; }

@media screen and (max-width: 759.98px) {
  .hero { height: 88svh; padding: 76px 22px 110px; }
  .hero-q { font-size: 37px; }
  .hero-fig .fig { font-size: 46px; }
  .sheets { --sw: calc(100vw - 40px); margin-top: -44px; gap: 22px; }
  .lt-sheet { min-height: 0; padding: 34px 24px 30px; font-size: 18px; }
  .lt-sheet .watermark { --wm: 110px; }
  .lh { margin-bottom: 30px; }
  .lh-mono { font-size: 28px; }
  .lead { font-size: 19px; }
  .lt-meta { flex-direction: column; align-items: flex-start; gap: 4px; margin-bottom: 30px; }
  .lt-meta .date { margin-left: 0; text-align: left; }
  .case .x { right: 12px; top: 10px; }
  .chart { --chg: 3em; font-size: 14px; }
  .row { grid-template-columns: 1fr var(--chg); grid-template-areas: "l l" "t c"; column-gap: 10px; }
  .r-lbl { grid-area: l; padding: 10px 0 2px; }
  .r-track { grid-area: t; min-height: 30px; background: none; border-left-color: transparent; }
  .r-bar { left: 0; border-left: .75px solid rgba(29, 31, 38, .82); width: var(--v); }
  .r-chg { grid-area: c; }
  .row.head { display: none; }
  .row.axis .r-lbl { display: none; }
  .r-val { font-size: 13px; left: calc(var(--v) + 6px); }
  .chart::after { display: none; }
  .row.axis .r-track { border-top: .75px solid rgba(29, 31, 38, .55); }
  .tick:nth-child(even) { visibility: hidden; }
  .ex-note { display: none; }
  .sig { width: 190px; }
  .encl { width: calc(100vw - 40px); margin-top: -26px; }
    .encl-cards { grid-template-columns: 1fr; padding: 0 8px; gap: 22px; }
  .ec { min-height: 0; }
  .case-nav { grid-template-columns: 1fr 1fr; width: calc(100% - 32px); padding: 48px 0 70px; }
  .cn.back { grid-column: 1 / -1; grid-row: 2; justify-self: center; }
  .cn { font-size: 20px; gap: 10px; }
  .ix-row { grid-template-columns: 2.6em 46px 1fr auto; grid-template-areas: "n c h f" "r r r r"; row-gap: 10px; column-gap: 12px; padding: 18px 2px; }
  .ix-n { grid-area: n; }
  .ix-row .mini-letter { grid-area: c; width: 38px; height: 25px; }
  .ix-house { grid-area: h; }
  .ix-fig { grid-area: f; font-size: 20px; }
  .ix-re { grid-area: r; font-size: 22px; }
}

/* ---------- 13. Reduced motion, still renders ---------- */
@media (prefers-reduced-motion: reduce) {
  .letter, .l-flap, .halo, .ec, .mini-letter, .case, .p-list button, .p-list .rule, .p-links a, .x { transition: none !important; }
  .index { transition: none; }
}
html.still *, html.still *::before, html.still *::after { transition: none !important; animation: none !important; }

/* ---------- 14. Print: the letter prints as sheets of crisp ink ---------- */
@media print {
  @page { size: A4; margin: 0; }
  html, body { background: #fff !important; overflow: visible !important; }
  .ground, .skip, .phonebar, .index, .x, .flood, .case-nav, .hero, .halo, .ic-tabs, .tab-name, .pencil, .watermark, .clip,   .laid, .cotton { background: #fff !important; }
  .creased::before, .grain::after { display: none !important; }
  * { text-shadow: none !important; box-shadow: none !important; }
  /* with a letter open, print only that letter, one sheet per page */
  html.case-open .home { display: none !important; }
  html.case-open .case { position: static !important; visibility: visible !important; background: #fff !important; color: #000 !important; }
  html.case-open .case::before, html.case-open .case::after { display: none; }
  html.case-open .case-scroll { position: static !important; overflow: visible !important; }
  .sheets { width: auto !important; margin: 0 !important; display: block; }
  .lt-sheet { min-height: 0 !important; padding: 15mm 22mm 12mm !important; color: #000; font-size: 10.5pt; break-after: page; page-break-after: always; }
  .lt-meta { flex-direction: row !important; align-items: baseline !important; }
  .lt-meta .date { margin-left: auto !important; text-align: right !important; }
  .chart { font-size: 9.5pt; --lab: 13em; }
  .lh { margin-bottom: 9mm; }
  .lt-sheet h3 { margin-top: 1.6em; }
  .r-track { min-height: 24px; }
  .r-lbl { padding: 4px 0; }
  .r-bar { height: 9px; }
  .r-val, .r-chg { font-size: 9pt; }
  .lead { font-size: 12pt; }
  .lt-sheet:last-child { break-after: auto; page-break-after: auto; }
  .lt-sheet h3, .exhibit h3 { break-after: avoid; }
  .exhibit, .figblock, .points li { break-inside: avoid; }
  .r-bar, .ec-mini i { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .sig.armed { clip-path: none !important; }
  .encl { width: auto !important; margin: 8mm 22mm 0 !important; break-inside: avoid; }
  .encl-cards { grid-template-columns: repeat(3, 1fr); padding: 0; }
  .ec { border: .5pt solid #bbb; transform: none !important; }
  /* with no letter open, print the profile and the letter to the reader */
  html:not(.case-open) .stage { height: auto !important; overflow: visible !important; }
  html:not(.case-open) .profile { position: static !important; width: auto !important; padding: 18mm 22mm 8mm !important; }
  html:not(.case-open) .p-houses, html:not(.case-open) .p-foot, html:not(.case-open) .camera { display: none !important; }
  html:not(.case-open) .table { position: static !important; -webkit-mask-image: none !important; mask-image: none !important; overflow: visible !important; }
  html:not(.case-open) .intro-card { position: static !important; margin: 0 22mm !important; width: auto !important; height: auto !important; aspect-ratio: auto !important; transform: none !important; opacity: 1 !important; visibility: visible !important; }
  html:not(.case-open) .intro-card::after { display: none; }
  html:not(.case-open) .ic-face { position: static !important; padding: 0 !important; }
  html:not(.case-open) .ic-stamp { position: static !important; margin-top: 8mm; width: 50mm; }
}

/* the empty part of a stop must not cover the letters beneath it (the tab column on the desk) */
.stop { pointer-events: none; }
.stop > :not(.cap) { pointer-events: auto; }

/* the butterfly that drifts over an opened letter (cut from the Van Cleef & Arpels photograph) */
.bfly { position: fixed; left: 0; top: 0; z-index: 40; width: 54px; height: 46px; display: flex; pointer-events: none; will-change: transform; perspective: 300px; filter: drop-shadow(0 9px 6px rgba(8, 16, 34, .22)); }
.bfly .w { flex: 1; height: 100%; display: block; animation: bfly-flap .2s ease-in-out infinite alternate; }
.bfly .w img { width: 100%; height: 100%; display: block; }
.bfly .w.l { transform-origin: 100% 50%; }
.bfly .w.r { transform-origin: 0% 50%; animation-name: bfly-flap-r; }
.bfly.still .w { animation: none; }
@keyframes bfly-flap { from { transform: rotateY(0deg); } to { transform: rotateY(68deg); } }
@keyframes bfly-flap-r { from { transform: rotateY(0deg); } to { transform: rotateY(-68deg); } }
@media print { .bfly { display: none; } }
/* long house names sit on two lines in the side strip, so nothing is cut off */
.tab-name.two { line-height: 1.25; letter-spacing: .12em; }
.tab-name.two .tn { text-align: center; }

/* viewer page navigation: a small pill at the bottom of the screen */
.dv-nav { position: fixed; left: 50%; bottom: max(18px, env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 2; display: flex; align-items: center; gap: 4px; padding: 6px; border-radius: 999px; background: rgba(250, 248, 243, .94); box-shadow: 0 6px 20px -8px rgba(35, 32, 28, .35), 0 0 0 1px rgba(35, 32, 28, .1); }
.dv-nav[hidden] { display: none; }
.dv-nav button { width: 44px; height: 44px; border-radius: 50%; font: 400 18px/1 var(--f-ui); color: var(--ink-0); }
.dv-nav button:hover:not(:disabled) { background: rgba(35, 32, 28, .07); }
.dv-nav button:disabled { opacity: .3; cursor: default; }
.dv-count { min-width: 64px; text-align: center; font: 500 12px/1 var(--f-ui); letter-spacing: .18em; color: var(--ink-0); }
.dv-pages { padding-bottom: 90px; }

/* sparkles on the jewels of the sketches */
.sk-sparkle { position: absolute; left: calc(1.2 * var(--u)); top: calc(1.2 * var(--u)); width: calc(19.2 * var(--u)); height: calc(19.2 * var(--u)); pointer-events: none; }
.stack .sk-sparkle { left: 10px; top: 10px; width: 180px; height: 180px; }
.sk-sparkle i { position: absolute; width: calc(1.6 * var(--u) * var(--s)); height: calc(1.6 * var(--u) * var(--s)); margin: calc(-0.8 * var(--u) * var(--s)) 0 0 calc(-0.8 * var(--u) * var(--s)); opacity: 0; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.95) 0, rgba(255,255,255,.55) 18%, rgba(255,255,255,0) 62%);
  animation: sk-twinkle 10s ease-in-out infinite; animation-delay: var(--d); }
@keyframes sk-twinkle { 0%, 84%, 100% { opacity: 0; transform: scale(.5); } 90% { opacity: .8; transform: scale(1); } 96% { opacity: 0; transform: scale(.8); } }
@media (prefers-reduced-motion: reduce) { .sk-sparkle i { animation: none; opacity: 0; } }