/* ==========================================================================
   Meryem Ghatrif · main stylesheet
   Direction “Pensée in natural light” (approved 12 October 2026):
   the editorial voice of Pensée, the warmth of natural light, one signature (the loupe).
   ========================================================================== */

/* ---------- Fonts (self-hosted, SIL Open Font License, latin subset) ---------- */
@font-face {
  font-family: "Newsreader";
  src: url("../fonts/newsreader-normal-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("../fonts/newsreader-italic-latin.woff2") format("woff2");
  font-style: italic;
  font-weight: 300 500;
  font-display: swap;
}
@font-face {
  font-family: "Inclusive Sans";
  src: url("../fonts/inclusive-sans-normal-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  /* Color: petal paper, aubergine ink, one wine-violet accent, sage for labels.
     Ratios measured against --paper (and --band). */
  --paper: #F6EEE8;      /* petal paper */
  --band: #EFE2DB;       /* blush band */
  --ink: #24192B;        /* text: 14.7:1 (13.3:1 on band) */
  --ink-soft: #5D5063;   /* secondary text: 6.6:1 (5.9:1 on band) */
  --accent: #5B2A5E;     /* links, calls, focus: 9.5:1 (8.6:1 on band) */
  --accent-deep: #4A2150;/* hover on filled buttons */
  --sage: #56634A;       /* small labels: 5.6:1 (5.1:1 on band) */
  --on-accent: #F6EEE8;  /* text on accent: 9.5:1 */
  --rule: rgba(36, 25, 43, 0.16);

  /* Type: a literary serif for display, a legibility-first sans for text */
  --font-display: "Newsreader", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-text: "Inclusive Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-code: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
  --step--1: 0.875rem;                                    /* 14 · labels, small print */
  --step-0: 1.0625rem;                                    /* 17 · body */
  --step-1: clamp(1.125rem, 1.05rem + 0.35vw, 1.25rem);   /* 18–20 · lede */
  --step-2: clamp(1.375rem, 1.2rem + 0.75vw, 1.875rem);   /* 22–30 · group titles */
  --step-3: clamp(2.25rem, 1.5rem + 3vw, 4.25rem);        /* 36–68 · section titles */
  --step-4: clamp(3.25rem, 1.4rem + 7.2vw, 7.5rem);       /* 52–120 · the headline */

  /* Space: 8-point scale */
  --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem; --s-7: 3rem; --s-8: 4rem;
  --section: clamp(4.5rem, 3rem + 6vw, 8rem);
  --gutter: clamp(20px, 3.9vw, 56px);
  --col-gap: 24px;
  --maxw: 1440px;

  /* Shape: one round personality (photos, pills, the loupe) */
  --r-photo: 20px;
  --r-pill: 999px;

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --t-ui: 250ms;

  /* The signature */
  --loupe: clamp(136px, 15vw, 220px);

  color-scheme: light;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 24px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 var(--step-0)/1.6 var(--font-text); }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.skip { position: absolute; z-index: 10; top: -80px; left: var(--gutter); padding: 12px 20px; border-radius: var(--r-pill); background: var(--ink); color: var(--paper); text-decoration: none; }
.skip:focus { top: 12px; }

/* Shared editorial pieces */
.link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.32em; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); transition: color var(--t-ui), text-decoration-color var(--t-ui); }
.link:hover { color: var(--accent); text-decoration-color: currentColor; }
.out { flex: none; width: 14px; height: 14px; transition: transform var(--t-ui) var(--ease-out); }
a:hover > .out, a:focus-visible > .out { transform: translate(2px, -2px); }
.section-title { margin: 0; font: 300 var(--step-3)/1 var(--font-display); letter-spacing: -0.02em; }
.section-title em, .foot-title em { font-style: italic; color: var(--accent); }

/* ---------- Header ---------- */
.site-header .wrap { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: var(--s-4) var(--s-6); padding-block: 26px; }
.mark { justify-self: start; text-decoration: none; font: 400 1.375rem/1 var(--font-display); letter-spacing: -0.01em; }
.menu { display: flex; gap: clamp(4px, 1.4vw, 20px); margin: 0; padding: 0; list-style: none; }
.menu a, .lang a { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 8px; font-size: 0.9375rem; text-decoration: none; }
.menu a:hover, .lang a:hover { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 0.35em; }
.lang { display: flex; align-items: center; margin: 0; padding-left: var(--s-4); border-left: 1px solid var(--rule); }
.lang a[aria-current] { font-weight: 600; text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 0.35em; }

/* ---------- Hero ---------- */
.hero-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); padding-block: clamp(16px, 3vw, 40px) var(--section); }
.hero-copy { grid-column: 1 / span 7; grid-row: 1; padding-top: clamp(8px, 2.4vw, 40px); }
.display { margin: 0; font: 300 var(--step-4)/0.93 var(--font-display); letter-spacing: -0.03em; }
.display .line { display: block; }
.display em { font-style: italic; color: var(--accent); }
.display--long { font-size: clamp(2.75rem, 1rem + 5vw, 5.5rem); line-height: 0.98; }

/* One loupe for the hero. It looks at the flower (the lines that guide the bee), at the title (the code beneath
   the design), and rests on my portrait. The loupe is decoration (aria-hidden), placed by JavaScript; without it,
   the portrait is simply a round photo the text flows around.
   The portrait lies on the edge of the flower photo, half on the words, half on the flower; its paper edge makes it
   a print laid on the photo. Its centre stays on the words' side, so the loupe rests on it as plain glass. */
.hero { overflow-x: clip; }   /* the loupe may travel past the edges; it never widens the page */
.hero-grid { position: relative; }
.hero-seat { position: relative; z-index: 2; float: right; width: var(--loupe); aspect-ratio: 1; margin: 36px calc(var(--loupe) * -0.5) 12px 20px; shape-outside: circle(50%) border-box; shape-margin: 14px; }
.hero-seat img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; filter: saturate(0.86);
  box-shadow: 0 0 0 7px var(--paper), 0 22px 40px -26px rgba(36, 25, 43, 0.55); }
.hero-lens, .lens-note { display: none; }
.js .hero-lens, .js .lens-note { display: block; }
.js .hero-grid:not(.is-placed) .hero-lens { visibility: hidden; }   /* until the script has placed it */
.hero-lens { position: absolute; z-index: 3; left: 0; top: 0; width: var(--loupe); aspect-ratio: 1; overflow: hidden; border-radius: 50%; pointer-events: none;
  box-shadow: 0 0 0 1px var(--ink), 0 0 0 7px var(--paper), 0 30px 50px -28px rgba(36, 25, 43, 0.55); will-change: transform; }
.lens-view { position: absolute; inset: 0; opacity: 0; transition: opacity 200ms ease; }
.hero-lens[data-view="flower"] .lens-flower, .hero-lens[data-view="code"] .lens-code { opacity: 1; }
.lens-flower img { position: absolute; left: 0; top: 0; max-width: none; height: auto; filter: saturate(0.86); }
.lens-code { background: var(--paper); }
.lens-code-page { position: absolute; left: 0; top: 0; }
.lens-row { position: absolute; left: 0; margin: 0; display: flex; flex-direction: column; justify-content: center;
  font: 400 clamp(0.6875rem, 0.62rem + 0.25vw, 0.8125rem)/1.5 var(--font-code); color: var(--ink); white-space: pre; }
.lens-row code { font: inherit; }
.c-tag, .c-sel { color: var(--accent); }    /* 9.5:1 */
.c-attr, .c-prop { color: var(--sage); }    /* 5.6:1 */
.c-str { color: #7A2E5C; }                  /* 7.7:1 */
.c-com { color: var(--ink-soft); font-style: italic; }
.lens-note { margin: 18px 0 0; font: italic 400 0.9375rem/1.45 var(--font-display); color: var(--ink-soft); }
@media (max-width: 480px) { .hero { --loupe: 120px; } }   /* a smaller loupe on phones */
@media (prefers-reduced-motion: reduce) { .lens-view { transition: none; } }
.lede { margin: clamp(24px, 3vw, 40px) 0 0; max-width: 37ch; font-size: var(--step-1); line-height: 1.55; color: var(--ink-soft); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 36px; margin: clamp(32px, 3.4vw, 48px) 0 0; }
.btn { position: relative; display: inline-flex; align-items: center; min-height: 56px; padding: 0 30px; border-radius: var(--r-pill); background: var(--accent); color: var(--on-accent); font-weight: 600; letter-spacing: 0.01em; text-decoration: none; transition: background-color var(--t-ui); }
.btn:hover { background: var(--accent-deep); }

/* The guides (after the heartsease’s nectar guides): the main button’s hover and focus state */
.guides { position: absolute; left: 50%; top: 100%; width: 220px; height: 84px; opacity: 0; transform: translateX(-50%) scale(0.6); transform-origin: 50% 0; pointer-events: none; transition: opacity var(--t-ui) ease, transform 450ms var(--ease-out); }
.guides polygon { fill: var(--accent); }
.btn:hover .guides, .btn:focus-visible .guides { opacity: 1; transform: translateX(-50%) scale(1); }

/* The hero photo, and the project screenshots with their loupe */
.hero-photo, .project-shot { position: relative; margin: 0; }
.hero-photo { grid-column: 8 / span 5; grid-row: 1 / span 2; }
.shot { overflow: hidden; border-radius: var(--r-photo); clip-path: inset(0% 0% 0% 0% round var(--r-photo)); background: var(--band); }
.shot img { width: 100%; height: 100%; object-fit: cover; }
/* at least as tall as the title (three lines), my portrait and a margin, so the portrait always lies on its edge
   (min-width: 0 keeps that height from widening the photo through its aspect ratio) */
.hero-photo .shot { width: 100%; aspect-ratio: 4 / 5; min-height: calc(clamp(8px, 2.4vw, 40px) + 3 * 0.93 * var(--step-4) + 84px + var(--loupe)); }
.hero-photo img { filter: saturate(0.86); }
.hero-photo figcaption { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--rule); }
.hero-photo figcaption { font: italic 400 1rem/1.4 var(--font-display); color: var(--ink-soft); }
.hero-photo figcaption i { color: var(--ink); }
.loupe { position: absolute; z-index: 2; width: var(--loupe); aspect-ratio: 1; overflow: hidden; border-radius: 50%; background: var(--paper); box-shadow: 0 0 0 1px var(--ink), 0 0 0 7px var(--paper), 0 30px 50px -28px rgba(36, 25, 43, 0.55); pointer-events: none; }
.loupe img { position: absolute; left: var(--fx, 0); top: var(--fy, 0); width: var(--fw, auto); max-width: none; height: auto; will-change: transform; }

/* Areas of work */
.areas { grid-column: 1 / span 6; grid-row: 2; align-self: end; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px var(--col-gap); margin: clamp(56px, 6vw, 88px) 0 0; padding: 0; list-style: none; counter-reset: area; }
.areas li { counter-increment: area; padding-top: 14px; border-top: 1px solid var(--rule); font-size: var(--step--1); line-height: 1.45; color: var(--ink-soft); }
.areas li::before { content: counter(area, lower-roman) "."; display: block; margin-bottom: 2px; font: italic 400 1rem/1.2 var(--font-display); color: var(--sage); }
.areas strong { display: block; margin-bottom: 4px; font-size: 0.9375rem; font-weight: 600; color: var(--ink); }

/* ---------- Selected work ---------- */
.work { background: var(--band); padding-block: var(--section); }
.work .section-title { margin-bottom: clamp(32px, 4vw, 56px); }
/* the visual spans four rows; the name (head) and the details sit in the two middle rows, so together they stay centred beside it */
.project { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: 1fr auto auto 1fr; column-gap: var(--col-gap); row-gap: 0; align-items: center; }
.project-shot { grid-column: 1 / span 7; grid-row: 1 / -1; }
.project-shot .shot { aspect-ratio: 16 / 10; border-radius: 16px; clip-path: inset(0% 0% 0% 0% round 16px); }
.project-shot .loupe { right: calc(var(--loupe) * -0.32); top: calc(var(--loupe) * -0.36); background: linear-gradient(#626262 0 42%, #3C3C3C); }
.project-head, .project-copy { grid-column: 9 / span 4; }
.project-head { grid-row: 2; }
.project-copy { grid-row: 3; }
.project-title { margin: 0; font: 300 clamp(2.75rem, 1.8rem + 3.4vw, 4.25rem)/1 var(--font-display); letter-spacing: -0.02em; }
.project-lede { margin: 14px 0 0; max-width: 30ch; font-size: 1.125rem; line-height: 1.5; color: var(--ink-soft); }
.facts { display: grid; gap: 14px; margin: 28px 0 20px; }
.facts div { padding-top: 12px; border-top: 1px solid var(--rule); }
.facts dt { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sage); }
.facts dd { margin: 4px 0 0; font-size: 0.9375rem; }
.project-head p, .project-copy p { margin: 0; }
.loupe-note { margin-top: 18px !important; max-width: 32ch; font: italic 400 0.9375rem/1.45 var(--font-display); color: var(--ink-soft); }

/* Nylaw: the loupe as an inspector. A frame marks a part of the page, named the way browser tools name elements,
   and the loupe shows that part's real code. At rest (and without JavaScript) it shows the title. */
.inspect-box { position: absolute; z-index: 1; border: 1.5px solid #F1E4F6; border-radius: 4px; background: rgba(241, 228, 246, 0.1);
  box-shadow: 0 0 0 1px rgba(36, 25, 43, 0.4); pointer-events: none;
  transition: left 500ms var(--ease-out), top 500ms var(--ease-out), width 500ms var(--ease-out), height 500ms var(--ease-out); }
.inspect-tag { position: absolute; left: -1.5px; bottom: calc(100% + 4px); padding: 2px 7px; border-radius: 4px; background: var(--accent); color: var(--on-accent); font: 500 0.6875rem/1.4 var(--font-code); white-space: nowrap; }
.loupe-code { position: absolute; inset: 0; background: var(--paper); }
.loupe-code pre { position: absolute; left: 13%; top: 50%; margin: 0; transform: translateY(-50%); opacity: 0; transition: opacity 320ms ease;
  font: 400 clamp(0.5rem, calc(var(--loupe) * 0.052), 0.71875rem)/1.45 var(--font-code); color: var(--ink); white-space: pre; }
.loupe-code pre.is-shown { opacity: 1; }
.loupe-code code { font: inherit; }
.js-hint { display: none; }
.js .loupe-note .pointer-hint { display: inline; color: var(--accent); }
@media (prefers-reduced-motion: reduce) { .inspect-box, .loupe-code pre { transition: none; } }

/* ---------- Learning & credentials ---------- */
.learning { padding-block: var(--section); }
.learning-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 40px var(--col-gap); }
.learning-head { grid-column: 1 / span 4; }
.learning-head p { margin: 20px 0 0; max-width: 34ch; color: var(--ink-soft); }
.groups { grid-column: 6 / span 7; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 32px; }
.group h3 { margin: 0; font: 400 var(--step-2)/1.15 var(--font-display); letter-spacing: -0.01em; }
.group > p { margin: 8px 0 16px; font-size: var(--step--1); line-height: 1.45; color: var(--ink-soft); }
.certs { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--rule); }
.certs li { border-bottom: 1px solid var(--rule); }
.certs a { display: grid; grid-template-columns: minmax(0, 1fr) auto 14px; align-items: baseline; gap: 12px; min-height: 44px; padding: 13px 0; text-decoration: none; }
.cert-title { font-size: 0.9375rem; line-height: 1.4; }
.cert-kind { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sage); }
.cert-kind--master { color: var(--accent); }
.certs .out { align-self: center; }
.certs a:hover .cert-title, .certs a:focus-visible .cert-title { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 0.3em; }

/* ---------- Footer: the last page, like the end of a printed book ---------- */
.site-footer { background: var(--band); padding-block: var(--section) 36px; }
.foot-page { display: flex; flex-direction: column; align-items: center; text-align: center; }
/* the tailpiece: printers closed a chapter with a floral ornament; this one sways on its stem */
.tailpiece { width: 122px; margin-bottom: 28px; -webkit-tap-highlight-color: transparent; }
.tail-stem { transform-origin: 53% 95%; }      /* the base of the stem */
.tail-head { transform-origin: 73.5% 49.5%; }  /* where the flower meets its stem */
.tailpiece img { display: block; width: 100%; height: auto; -webkit-mask-image: linear-gradient(to bottom, #000 82%, transparent 97%); mask-image: linear-gradient(to bottom, #000 82%, transparent 97%); }
.foot-title { margin: 0; font: 300 var(--step-3)/1.05 var(--font-display); letter-spacing: -0.02em; text-wrap: balance; }
.foot-lede { margin: 18px 0 0; max-width: 46ch; color: var(--ink-soft); text-wrap: balance; }
.foot-contact { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 4px 16px; margin: 36px 0 0; }
.foot-mail { font: 400 clamp(1.375rem, 1.1rem + 1vw, 1.875rem)/1.3 var(--font-display); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.22em; text-decoration-color: color-mix(in srgb, var(--accent) 55%, transparent); transition: color var(--t-ui); }
.foot-mail:hover { color: var(--accent); text-decoration-color: currentColor; }
.copy-mail { min-height: 44px; padding: 0 4px; border: 0; background: none; color: var(--ink-soft); font: 600 0.75rem/1 var(--font-text); letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer; transition: color var(--t-ui); }
.copy-mail:hover, .copy-mail.is-done { color: var(--accent); }
.foot-elsewhere { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 28px; margin: 4px 0 0; }
.foot-meta { width: min(100%, 520px); margin: clamp(56px, 7vw, 88px) 0 0; padding-top: 24px; border-top: 1px solid var(--rule); font-size: 0.8125rem; color: var(--ink-soft); }
.foot-top { text-decoration: underline; text-underline-offset: 0.25em; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); }
.foot-top:hover { color: var(--accent); }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .groups { grid-column: 1 / -1; }
  .learning-head { grid-column: 1 / span 8; }
}
@media (max-width: 820px) {
  .hero-grid, .project, .learning-grid, .foot-grid { grid-template-columns: minmax(0, 1fr); }
  .hero-copy, .hero-photo, .areas, .project-head, .project-shot, .project-copy, .learning-head, .groups { grid-column: 1 / -1; grid-row: auto; }
  .project { grid-template-rows: none; }   /* phones: the name and its intro, then the screenshot, then the details */
  .project-shot { margin-top: calc(var(--loupe) * 0.2 + 24px); }   /* room for the loupe above the screenshot */
  .project-shot .loupe { right: -12px; top: calc(var(--loupe) * -0.2); }
  /* The hero in one column: the title, my portrait on the top edge of the flower photo, the flower, then the words.
     The flower, the title and my portrait share the first screen, so the loupe can tell the whole story there. */
  .hero-copy { display: contents; }
  .hero-copy > .display { margin-top: clamp(8px, 2.4vw, 40px); }
  .hero-seat { order: 1; justify-self: end; margin: 10px 14px calc(var(--loupe) * -0.36) 0; }
  .hero-photo { order: 2; }
  .hero-photo .shot { aspect-ratio: 1; min-height: 0; }
  .hero-grid .lens-note, .hero-grid .lede, .hero-grid .actions, .hero-grid .areas { order: 3; }
}
@media (max-width: 640px) {
  .site-header .wrap { grid-template-columns: 1fr auto; gap: 8px 16px; padding-block: 20px 8px; }
  .site-nav { grid-column: 1 / -1; grid-row: 2; }
  .menu { margin-left: -8px; }
  .lang { grid-column: 2; grid-row: 1; }
  .areas, .groups { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .guides, .btn, .link, .out { transition: none; }
}

/* ==========================================================================
   Pages added with the Eleventy build: shared pieces, story, work, 404
   ========================================================================== */

/* The image plugin wraps images in <picture>; let the <img> lay out as before. */
picture { display: contents; }

.eyebrow { margin: 0 0 18px; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sage); }
.sub-title { margin: 0; font: 300 clamp(1.75rem, 1.3rem + 1.8vw, 3rem)/1.05 var(--font-display); letter-spacing: -0.02em; }
.sub-title em { font-style: italic; color: var(--accent); }
.page-title { margin: 0; font: 300 var(--step-4)/0.95 var(--font-display); letter-spacing: -0.03em; }
.page-title em { font-style: italic; color: var(--accent); }



/* ---------- Story: Anatomy of a path ---------- */
.story { padding-block: var(--section); }
.story-intro { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); margin-bottom: clamp(48px, 7vw, 112px); }
.story-intro > * { grid-column: 1 / span 8; }
.story-intro .lede { grid-column: 1 / span 6; margin-top: 28px; }
.story-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); }
.plate-col { grid-column: 1 / span 6; }
.plate-sticky { position: sticky; top: 24px; width: min(100%, calc((100svh - 128px) * 0.762)); }
.plate { position: relative; margin: 0; background: var(--paper); }
.plate-img { width: 100%; height: auto; mix-blend-mode: multiply; filter: saturate(0.9); }
.dot { position: absolute; z-index: 4; left: calc(var(--px) / 1143 * 100%); top: calc(var(--py) / 1500 * 100%); width: 28px; height: 28px; transform: translate(-50%, -50%); border-radius: 50%; cursor: pointer; background: radial-gradient(circle, var(--accent) 0 2.5px, var(--paper) 3px 5.5px, var(--accent) 6px 6.8px, transparent 7.3px); transition: transform var(--t-ui) var(--ease-out); }
.dot:hover, .dot.is-preview { transform: translate(-50%, -50%) scale(1.35); }
.lens { position: absolute; z-index: 5; left: 0; top: 0; width: var(--loupe); aspect-ratio: 1; overflow: hidden; border-radius: 50%; background: var(--paper); box-shadow: 0 0 0 1px var(--ink), 0 0 0 7px var(--paper), 0 30px 50px -28px rgba(36, 25, 43, 0.55); pointer-events: none; transform: translate(var(--lx, 0px), var(--ly, 0px)); transition: transform 1000ms var(--ease-out); }
.lens img { position: absolute; left: 0; top: 0; max-width: none; width: var(--lw, 300%); height: auto; mix-blend-mode: multiply; transform: translate(var(--ix, 0px), var(--iy, 0px)); transition: transform 1000ms var(--ease-out); }
.legend { display: flex; flex-wrap: wrap; gap: 6px; margin: 16px 0 0; padding: 0; list-style: none; }
.legend button { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border: 1px solid var(--rule); border-radius: var(--r-pill); background: transparent; color: var(--ink); font: 400 0.875rem/1 var(--font-text); cursor: pointer; transition: background-color var(--t-ui), color var(--t-ui), border-color var(--t-ui); }
.legend button i { font: italic 400 1rem/1 var(--font-display); color: var(--accent); }
.legend button:hover { border-color: var(--accent); }
.legend button[aria-current] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.legend button[aria-current] i { color: var(--on-accent); }
.chapters { grid-column: 8 / span 5; margin: 0; padding: 0; list-style: none; }
.chapter { display: flex; flex-direction: column; justify-content: center; min-height: 60vh; padding-block: 6vh; }
.chapter:first-child { min-height: 48vh; padding-top: 0; justify-content: flex-start; }
.part { margin: 0 0 10px; font: italic 400 1.125rem/1.2 var(--font-display); color: var(--sage); }
.part .num { margin-right: 6px; transition: color var(--t-ui); }
.chapter.is-active .part .num { color: var(--accent); }
.chapter h3:focus { outline: none; }
.chapter h3:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; }
.chapter p:not(.part) { margin: 18px 0 0; max-width: 36ch; font-size: var(--step-1); line-height: 1.55; color: var(--ink-soft); }
.part-circle { display: none; }

/* Beyond the screen · Working with me */
.beyond { padding-block: 0 var(--section); }
.beyond-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 48px var(--col-gap); align-items: start; }
.garden-note { grid-column: 1 / span 6; display: grid; grid-template-columns: auto 1fr; gap: 28px; align-items: start; }
.garden-crop { width: 168px; aspect-ratio: 1; border-radius: 50%; background: var(--paper) url("../img/heartsease-640.jpg") no-repeat; background-size: 520px auto; background-position: 46% 58%; box-shadow: 0 0 0 1px var(--ink), 0 0 0 7px var(--paper); }
.garden-note h2, .feel h2 { margin: 0; font: 300 var(--step-3)/1.02 var(--font-display); letter-spacing: -0.02em; }
.garden-note h2 em, .feel h2 em { font-style: italic; color: var(--accent); }
.garden-note p { margin: 18px 0 0; max-width: 40ch; font-size: var(--step-1); line-height: 1.55; color: var(--ink-soft); }
.feel { grid-column: 8 / span 5; }
.feel ol { display: grid; gap: 18px; margin: 24px 0 0; padding: 0; list-style: none; }
.feel li { padding-top: 14px; border-top: 1px solid var(--rule); color: var(--ink-soft); }
.feel li strong { display: block; margin-bottom: 4px; font: italic 400 1.375rem/1.2 var(--font-display); color: var(--ink); }
.feel .tie { margin: 20px 0 0; font: italic 400 1rem/1.5 var(--font-display); color: var(--ink-soft); }

/* ---------- Work: the archive ---------- */
.archive { margin-top: clamp(72px, 9vw, 128px); }
.archive-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: end; margin-bottom: clamp(32px, 4vw, 56px); }
.archive-head .sub-title { grid-column: 1 / span 6; }
.archive-head p { grid-column: 8 / span 5; margin: 0; color: var(--ink-soft); }
.archive-head .hint { display: block; margin-top: 6px; font-size: var(--step--1); }
.archive-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(32px, 5vw, 80px); margin: 0; padding: 0; list-style: none; }
.archive-list li { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; padding: 14px 0; border-top: 1px solid var(--rule); }
.a-name { font: 400 clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem)/1.2 var(--font-display); transition: color var(--t-ui); }
.a-sector { font-size: var(--step--1); color: var(--ink-soft); text-align: right; }
.archive-list li:hover .a-name { color: var(--accent); }
.peek { position: fixed; z-index: 20; left: 0; top: 0; width: var(--loupe); aspect-ratio: 1; overflow: hidden; border-radius: 50%; background: var(--paper); box-shadow: 0 0 0 1px var(--ink), 0 0 0 7px var(--paper), 0 30px 50px -28px rgba(36, 25, 43, 0.55); opacity: 0; pointer-events: none; transition: opacity 200ms ease; }
.peek.is-on { opacity: 1; }
.peek img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }

/* ---------- 404 ---------- */
.notfound { padding-block: clamp(32px, 6vw, 96px) var(--section); }
.nf-crop { width: 150px; aspect-ratio: 1; margin-bottom: 32px; border-radius: 50%; background: var(--paper) url("../img/viola-plate-1143.jpg") no-repeat; background-blend-mode: multiply; background-size: 1029px auto; background-position: -816px -1140px; box-shadow: 0 0 0 1px var(--ink), 0 0 0 7px var(--paper); }
.notfound .lede { max-width: 44ch; margin-top: 24px; }
.notfound [lang="fr"] { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--rule); }

@media (prefers-reduced-motion: reduce) { .lens, .lens img, .dot, .legend button { transition: none; } }
@media (max-width: 820px) {
  .story-intro > *, .story-intro .lede, .archive-head .sub-title, .archive-head p { grid-column: 1 / -1; }
  .archive-head p { margin-top: 16px; }
  .plate-col { display: none; }
  .chapters { grid-column: 1 / -1; }
  .chapter, .chapter:first-child { min-height: 0; padding-block: 0 56px; }
  .part-circle { display: block; width: 120px; aspect-ratio: 1; margin-bottom: 20px; border-radius: 50%; background: var(--paper) url("../img/viola-plate-1143.jpg") no-repeat; background-blend-mode: multiply; background-size: calc(1143px * 0.5) auto; background-position: calc(60px - var(--px) * 0.5px) calc(60px - var(--py) * 0.5px); box-shadow: 0 0 0 1px var(--ink), 0 0 0 5px var(--paper); }
  .garden-note, .feel { grid-column: 1 / -1; }
  .garden-note { grid-template-columns: minmax(0, 1fr); }
  .garden-crop { width: 132px; background-size: 410px auto; }
  .archive-list { grid-template-columns: minmax(0, 1fr); }
  .archive-list li { flex-direction: column; align-items: flex-start; gap: 2px; }
  .a-sector { text-align: left; }
}

/* ==========================================================================
   Pensées: the home section and the article pages
   ========================================================================== */
.draft-tag { color: var(--accent); }
.post-cover { aspect-ratio: 1; border-radius: 50%; background: var(--paper) url("../img/viola-plate-1143.jpg") no-repeat; background-blend-mode: multiply; box-shadow: 0 0 0 1px var(--ink), 0 0 0 6px var(--paper); }

/* ---------- Home: Pensées, the night garden (the one dark band of the site) ---------- */
.pensees {
  --night: #24192B;        /* the ink, used as a background */
  --on-night: #F6EEE8;     /* text: 14.7:1 */
  --night-soft: #CDBFCB;   /* secondary text: 9.5:1 */
  --night-accent: #E3C7EA; /* the word, numerals, focus: 10.9:1 */
  --night-sage: #BCCBAE;   /* small labels: 9.8:1 */
  --night-rule: rgba(246, 238, 232, 0.16);
  padding-block: var(--section);
  color: var(--on-night);
  background: radial-gradient(56vw 42vw at 24% 66%, rgba(227, 199, 234, 0.1), transparent 70%), var(--night);
}
.pensees :focus-visible { outline-color: var(--night-accent); }
.pensees a { color: inherit; text-decoration: none; }

/* The dictionary entry: the name, the flower and the writing in one glance */
.pensees-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: end; }
.pensees-word { grid-column: 1 / span 6; margin: 0; font: italic 300 clamp(4.25rem, 1.6rem + 8.4vw, 9.5rem)/0.82 var(--font-display); letter-spacing: -0.04em; color: var(--night-accent); }
.definition { grid-column: 8 / span 5; padding-bottom: 6px; }
.def-meta { margin: 0; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--night-sage); }
.def-senses { margin: 14px 0 0; padding: 0; list-style: none; counter-reset: sense; }
.def-senses li { counter-increment: sense; display: grid; grid-template-columns: 1.5em minmax(0, 1fr); font: 400 1.3125rem/1.4 var(--font-display); }
.def-senses li + li { margin-top: 8px; }
.def-senses li::before { content: counter(sense) "."; font-style: italic; color: var(--night-accent); }
.def-lede { margin: 20px 0 0; max-width: 46ch; color: var(--night-soft); }
.pensees + .beyond { padding-top: var(--section); } /* light again after the night band */

/* A specimen: a detail of the plate, magnified (decorative). --px/--py = the part, --z = the zoom. */
.specimen-crop { --z: 1.5; position: relative; overflow: hidden; isolation: isolate; aspect-ratio: 1; border-radius: 50%; background: var(--paper); }
.specimen-crop img { position: absolute; left: 50%; top: 50%; width: calc(1143px * var(--z)); max-width: none; height: auto; transform-origin: 0 0; transform: translate(calc(var(--px) * var(--z) * -1px), calc(var(--py) * var(--z) * -1px)); mix-blend-mode: multiply; transition: scale 900ms var(--ease-out); }

/* The lead article, then the next ones */
.lead-post { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: center; margin-top: clamp(56px, 7vw, 104px); padding-top: clamp(48px, 6vw, 88px); border-top: 1px solid var(--night-rule); }
.lead-crop { grid-column: 1 / span 5; justify-self: center; width: min(100%, 380px); box-shadow: 0 0 0 1px var(--on-night), 0 0 0 10px var(--night), 0 0 0 11px var(--night-rule), 0 50px 90px -40px rgba(0, 0, 0, 0.7); }
.lead-copy { grid-column: 7 / span 6; }
.post-kind { margin: 0 0 12px; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--night-sage); }
.post-kind .num { margin-right: 6px; font: italic 400 1.0625rem/1 var(--font-display); letter-spacing: 0; text-transform: none; color: var(--night-accent); }
.pensees .draft-tag { color: var(--night-accent); }
.lead-copy h3 { margin: 0; font: 300 var(--step-3)/1.02 var(--font-display); letter-spacing: -0.02em; }
.lead-dek { margin: 20px 0 0; max-width: 44ch; font-size: var(--step-1); line-height: 1.55; color: var(--night-soft); }
.post-line { margin: 16px 0 0; font-size: 0.8125rem; color: var(--night-soft); }
.read-cue { display: inline-flex; align-items: center; gap: 10px; margin-top: 28px; padding-bottom: 3px; border-bottom: 1px solid var(--night-accent); font-weight: 600; }
.lead-post h3 a::after, .more-post h3 a::after { content: ""; position: absolute; inset: 0; } /* the whole entry opens the article */
.lead-post:hover h3 a, .more-post:hover h3 a, .pensees h3 a:focus-visible { text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: var(--night-accent); text-underline-offset: 0.18em; }
.lead-post:hover .specimen-crop img, .lead-post:focus-within .specimen-crop img,
.more-post:hover .specimen-crop img, .more-post:focus-within .specimen-crop img { scale: 1.08; }
.lead-post:hover .read-cue .out, .lead-post:focus-within .read-cue .out { transform: translate(3px, -3px); }
.more-posts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 32px var(--col-gap); margin: clamp(48px, 6vw, 80px) 0 0; padding: 0; list-style: none; }
.more-post { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 24px; align-items: center; padding-top: 28px; border-top: 1px solid var(--night-rule); }
.more-crop { --z: 0.7; width: 104px; box-shadow: 0 0 0 1px var(--on-night), 0 0 0 6px var(--night), 0 0 0 7px var(--night-rule); }
.more-post h3 { margin: 0; font: 400 var(--step-2)/1.2 var(--font-display); letter-spacing: -0.01em; }
.more-post .post-line { margin-top: 10px; }

/* Article pages */
.post-head, .post-body, .post-author, .post-foot { max-width: calc(760px + 2 * var(--gutter)); }
.post-head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 24px clamp(24px, 4vw, 48px); align-items: start; padding-block: clamp(24px, 4vw, 56px) clamp(32px, 5vw, 64px); }
.post-cover { width: clamp(104px, 11vw, 152px); margin-top: 6px; background-size: calc(1143px * 1.05) auto; background-position: calc(50% + (600px - var(--px) * 1.05px)) calc(50% + (787.5px - var(--py) * 1.05px)); /* centres the chosen part of the plate */ }
.post-head .eyebrow a { text-decoration: none; }
.post-head .eyebrow a:hover { text-decoration: underline; }
.post-title { margin: 0; font: 300 clamp(2.5rem, 1.6rem + 3.6vw, 4.75rem)/1.02 var(--font-display); letter-spacing: -0.025em; }
.post-dek { margin: 18px 0 0; max-width: 52ch; font-size: var(--step-1); line-height: 1.55; color: var(--ink-soft); }
.post-meta { margin: 14px 0 0; font-size: 0.875rem; color: var(--ink-soft); }
.draft-badge { display: inline-block; margin: 18px 0 0; padding: 6px 14px; border: 1px dashed var(--accent); border-radius: var(--r-pill); font-size: 0.8125rem; font-weight: 600; color: var(--accent); }
.post-body { padding-top: clamp(8px, 2vw, 24px); border-top: 1px solid var(--rule); }
.post-body p, .post-body li { font-size: 1.125rem; line-height: 1.75; }
.post-body p { margin: 1.1em 0 0; }
.post-body h2 { margin: 2.2em 0 0; font: 400 clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem)/1.15 var(--font-display); letter-spacing: -0.01em; }
.post-body ul, .post-body ol { margin: 1em 0 0; padding-left: 1.3em; }
.post-body li + li { margin-top: 0.4em; }
.post-body a { color: var(--accent); text-underline-offset: 0.2em; }
.post-body strong { font-weight: 600; }
.post-body > ul:last-child li, .post-sources li { font-size: 0.9375rem; color: var(--ink-soft); }
.post-body .todo { margin-top: 1.4em; padding: 14px 18px; border: 1px dashed var(--accent); border-radius: 14px; background: color-mix(in srgb, var(--accent) 6%, var(--paper)); font-size: 1rem; line-height: 1.6; color: var(--accent); }
/* after each article: who wrote it, and where to go next */
.post-author { padding-top: clamp(40px, 5vw, 64px); }
.post-author p { margin: 0; font-size: 1.0625rem; line-height: 1.6; color: var(--ink-soft); }
.post-author p:first-child { padding-top: 22px; border-top: 1px solid var(--rule); }
.post-author strong { font-weight: 600; color: var(--ink); }
.post-author .post-author-links { display: flex; flex-wrap: wrap; gap: 0 28px; margin-top: 6px; }
.post-foot { padding-block: clamp(24px, 3vw, 40px) var(--section); }
/* A note from the garden: the paragraph beside a round photo, framed like the loupe. */
.post-garden { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 clamp(28px, 4vw, 48px); align-items: center; }
.post-garden figure { width: clamp(180px, 22vw, 240px); margin: 1.6em 0 0; }
.post-garden picture { display: block; }
.post-garden img { display: block; width: 100%; height: auto; border-radius: 50%; box-shadow: 0 0 0 1px var(--ink), 0 0 0 7px var(--paper), 0 30px 50px -28px rgba(36, 25, 43, 0.55); }
.post-garden figcaption { margin-top: 18px; text-align: center; font: italic 400 1rem/1.3 var(--font-display); color: var(--ink-soft); }
@media (max-width: 640px) {
  .post-garden { grid-template-columns: minmax(0, 1fr); }
  .post-garden figure { justify-self: center; width: min(60vw, 220px); margin-top: 2em; }
}
/* A detail of the botanical plate instead of a photo: the plate's paper melts into the page inside the loupe */
.post-garden.is-plate picture { border-radius: 50%; background: var(--paper); isolation: isolate; box-shadow: 0 0 0 1px var(--ink), 0 0 0 7px var(--paper), 0 30px 50px -28px rgba(36, 25, 43, 0.55); }
.post-garden.is-plate img { box-shadow: none; mix-blend-mode: multiply; }
/* The sources, folded: one line that opens on click */
.post-sources { margin-top: 2.6em; border-top: 1px solid var(--rule); }
.post-sources summary { display: inline-flex; align-items: center; gap: 12px; min-height: 48px; margin-top: 10px; cursor: pointer; list-style: none; font: 400 clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem)/1.2 var(--font-display); color: var(--ink); transition: color var(--t-ui); }
.post-sources summary::-webkit-details-marker { display: none; }
.post-sources summary span { font-size: 0.8em; color: var(--ink-soft); }
.post-sources summary::after { content: ""; width: 8px; height: 8px; margin-top: -4px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform var(--t-ui) var(--ease-out); }
.post-sources[open] summary::after { margin-top: 4px; transform: rotate(-135deg); }
.post-sources summary:hover { color: var(--accent); }
.post-sources ul { margin-top: 0.6em; }
.post-sources p { font-size: 0.9375rem; color: var(--ink-soft); }
/* Code in an article: inline, and an example set on a light card that wraps on phones */
.post-body code { font: 400 0.92em var(--font-code); }
.post-body pre { margin: 1.4em 0 0; padding: 20px 24px; border-radius: 14px; background: var(--band); }
.post-body pre code { font-size: 0.9375rem; line-height: 1.7; color: var(--ink); white-space: pre-wrap; }
@media (prefers-reduced-motion: reduce) { .post-sources summary, .post-sources summary::after { transition: none; } }
/* Figures inside an article: real text in the site's style (here, course templates adapted under CC BY-SA) */
.post-figure { margin: 2em 0 0; }
.post-figure figcaption { margin-top: 12px; font-size: 0.8125rem; line-height: 1.5; color: var(--ink-soft); }
.post-figure figcaption a { color: inherit; }
/* the initiative document, as a typed label */
.post-figure .initiative { padding: 18px 20px 16px; border: 1px solid var(--ink); background: #FFFDF9; }
.post-figure .initiative-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; margin: 0 0 12px; padding-bottom: 10px; border-bottom: 1px solid var(--ink); font-size: 0.75rem; font-weight: 700; line-height: 1.4; letter-spacing: 0.1em; text-transform: uppercase; }
.post-figure .initiative-head > span:last-child { font-weight: 600; color: var(--sage); }
.post-figure .initiative dl { display: grid; gap: 10px; margin: 0; }
.post-figure .initiative dl div { display: grid; grid-template-columns: 9.5em minmax(0, 1fr); gap: 12px; }
.post-figure .initiative dt { font-size: 0.875rem; font-weight: 600; line-height: 1.5; color: var(--sage); }
.post-figure .initiative dd { margin: 0; font-size: 0.9375rem; line-height: 1.5; }
.post-figure .initiative-note { margin: 14px 0 0; padding-top: 10px; border-top: 1px dotted rgba(36, 25, 43, 0.3); font: italic 400 1.0625rem/1.4 var(--font-display); color: var(--accent); }
/* the roadmap: three columns, like the parts of a flower: in bloom, in bud, in seed */
.post-figure .roadmap { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.post-figure .roadmap-col { margin: 0; padding: 0 14px; font-size: 0.9375rem; line-height: 1.45; }
.post-figure .roadmap-col:first-child { padding-left: 0; }
.post-figure .roadmap-col:last-child { padding-right: 0; }
.post-figure .roadmap-col + .roadmap-col { margin: 0; border-left: 1px dashed rgba(36, 25, 43, 0.28); }
.post-figure .roadmap-when { margin: 0 0 12px; font: italic 400 1.5rem/1.1 var(--font-display); color: var(--accent); }
.post-figure .roadmap-when > span:last-child { display: block; margin-top: 4px; font: 600 0.6875rem/1.3 var(--font-text); letter-spacing: 0.12em; text-transform: uppercase; color: var(--sage); }
.post-figure .roadmap-card { margin: 0 0 10px; padding: 10px 12px; border: 1px solid var(--ink); border-radius: 4px; background: #FFFDF9; }
.post-figure .roadmap-card p { margin: 0; font-size: 0.9375rem; line-height: 1.4; }
.post-figure .roadmap-card .roadmap-obj { margin-bottom: 2px; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.post-figure .roadmap-card.is-empty { min-height: 40px; border-style: dashed; border-color: rgba(36, 25, 43, 0.3); background: none; }
.post-figure .roadmap-tests { margin: 6px 0 0; padding: 0; list-style: none; }
.post-figure .roadmap-tests li { margin: 0; font-size: 0.875rem; line-height: 1.55; }
/* the experiments' marks, drawn as icons so they look the same on every device: validated, invalidated, still running */
.post-figure .mark { display: inline-block; width: 11px; height: 11px; margin-right: 7px; vertical-align: -1px; background: currentColor; -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }
.post-figure .roadmap-tests .mark { color: var(--accent); }
.post-figure .mark--yes { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.2 6.4l2.5 2.5 5.2-5.6'/%3E%3C/svg%3E"); }
.post-figure .mark--no { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.2 3.2l5.6 5.6M8.8 3.2l-5.6 5.6'/%3E%3C/svg%3E"); }
.post-figure .mark--run { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.5 5.1a3.7 3.7 0 1 0-.3 3.3'/%3E%3Cpath d='M9.9 2v3.3H6.6'/%3E%3C/svg%3E"); }
.post-figure .roadmap-key { margin: 12px 0 0; font-size: 0.8125rem; line-height: 1.5; color: var(--ink-soft); }
@media (max-width: 640px) {
  .post-figure .initiative { padding: 16px 16px 14px; }
  .post-figure .initiative dl div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .post-figure .roadmap { grid-template-columns: minmax(0, 1fr); }
  .post-figure .roadmap-col, .post-figure .roadmap-col:first-child, .post-figure .roadmap-col:last-child { padding: 0; }
  .post-figure .roadmap-col + .roadmap-col { margin-top: 14px; padding-top: 14px; border-left: 0; border-top: 1px dashed rgba(36, 25, 43, 0.28); }
  .post-figure .roadmap-card.is-empty { display: none; }   /* placeholders help on a wide screen, not on a phone */
}

@media (max-width: 1080px) { .definition, .lead-copy { grid-column: 7 / -1; } }
@media (max-width: 820px) {
  .pensees-head, .lead-post { grid-template-columns: minmax(0, 1fr); }
  .pensees-word, .definition, .lead-crop, .lead-copy { grid-column: 1 / -1; }
  .definition { margin-top: 28px; }
  .lead-crop { width: min(72vw, 300px); justify-self: start; margin-bottom: 36px; }
  .more-posts { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .post-head { grid-template-columns: minmax(0, 1fr); }
  .more-post { gap: 18px; }
  .more-crop { --z: 0.55; width: 80px; }
}
@media (prefers-reduced-motion: reduce) { .specimen-crop img { transition: none; } }

/* Balanced headings and no lone last word in paragraphs (where browsers support it). */
.section-title, .sub-title, .post-title, .project-title, .foot-title, .lead-copy h3, .more-post h3, .group h3 { text-wrap: balance; }
p, li { text-wrap: pretty; }

/* Tables inside articles (e.g. the UX maturity self-check) */
.post-body table { width: 100%; margin: 1.6em 0 0; border-collapse: collapse; font-size: 1rem; line-height: 1.5; }
.post-body th, .post-body td { padding: 12px 16px 12px 0; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: top; }
.post-body th { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sage); }
.post-body td:first-child { white-space: nowrap; font-variant-numeric: tabular-nums; }
.post-body td:nth-child(2) { font: italic 400 1.125rem/1.4 var(--font-display); color: var(--accent); white-space: nowrap; }

/* ---------- Touch screens: say how to use the loupe ---------- */
.touch-hint { display: none; }
@media (hover: none) and (pointer: coarse) {
  .lens-note .touch-hint { display: inline; color: var(--accent); }
  .js .loupe-note .pointer-hint { display: none; }
  .js .loupe-note .touch-hint { display: inline; color: var(--accent); }
}

/* ---------- Phones: the story plate stays on screen, and the loupe travels over it ---------- */
@media (max-width: 820px) {
  .plate-col { display: block; position: sticky; top: 0; z-index: 3; grid-column: 1 / -1; margin: 0 calc(-1 * var(--gutter)) 28px; padding: 12px var(--gutter) 28px; background: var(--paper); box-shadow: 0 14px 18px -18px rgba(36, 25, 43, 0.45); }
  .plate-sticky { position: static; width: auto; height: 34svh; aspect-ratio: 1143 / 1500; margin-inline: auto; }
  .plate-sticky nav { display: none; }
  .story .lens { width: 96px; }
  .part-circle { display: none; }
  /* The story ends on its last line: the plate leaving the screen already marks the end. (Story and Learning share
     the same paper, so a full section gap after the last chapter read as a hole: 200px, now 112px.) */
  .chapter:last-child { padding-bottom: 0; }
  .story { padding-bottom: 40px; }
}

/* ---------- Work: the current role, as a herbarium sheet (the client work is confidential) ---------- */
.current-role { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: 1fr auto auto 1fr; column-gap: var(--col-gap); row-gap: 0; align-items: center; }
.current-role + .project { margin-top: clamp(64px, 8vw, 112px); padding-top: clamp(48px, 6vw, 80px); border-top: 1px solid var(--rule); }
.herbarium { --sheet: #FBF8F3; --x0: 0; --y0: 290; --w: 290; --h: 700; grid-column: 1 / span 7; position: relative; display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); grid-template-rows: auto 1fr auto; gap: 24px clamp(20px, 3vw, 40px); margin: 0; padding: clamp(24px, 3.4vw, 44px); border-radius: 6px; background: var(--sheet); box-shadow: 0 1px 0 rgba(36, 25, 43, 0.06), 0 34px 60px -42px rgba(36, 25, 43, 0.5); }
/* the pressed specimen: one stem of the plate (x 20 to 330, y 300 to 1000), taped to the sheet */
.pressed { grid-column: 1; grid-row: 1 / -1; position: relative; align-self: center; justify-self: start; width: min(100%, 220px); aspect-ratio: 290 / 700; overflow: hidden; background: var(--sheet); /* the plate's white multiplies into the sheet */
  /* the edges fade into the paper, like a pressed stem rather than a cut-out */
  -webkit-mask-image: linear-gradient(to right, #000 82%, transparent), linear-gradient(to bottom, transparent, #000 5%, #000 88%, transparent);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, #000 82%, transparent), linear-gradient(to bottom, transparent, #000 5%, #000 88%, transparent); mask-composite: intersect; }
.pressed img { position: absolute; left: calc(-100% * var(--x0) / var(--w)); top: calc(-100% * var(--y0) / var(--h)); width: calc(100% * 1143 / var(--w)); max-width: none; height: auto; }
/* the sap rises: --cut is how much of the stem (in % from the top) the process has not reached yet */
@property --cut { syntax: "<number>"; inherits: true; initial-value: 0; }
.pressed { transition: --cut 900ms var(--ease-out); }
.pressed-ripe, .pressed-pale { position: absolute; inset: 0; mix-blend-mode: multiply; }   /* the plate's white multiplies into the sheet */
.pressed-ripe { -webkit-mask-image: linear-gradient(to bottom, transparent calc(var(--cut) * 1% - 18px), #000 calc(var(--cut) * 1% + 18px)); mask-image: linear-gradient(to bottom, transparent calc(var(--cut) * 1% - 18px), #000 calc(var(--cut) * 1% + 18px)); }
.pressed-pale { filter: grayscale(1) opacity(0.38); -webkit-mask-image: linear-gradient(to bottom, #000 calc(var(--cut) * 1% - 18px), transparent calc(var(--cut) * 1% + 18px)); mask-image: linear-gradient(to bottom, #000 calc(var(--cut) * 1% - 18px), transparent calc(var(--cut) * 1% + 18px)); }
.tape { position: absolute; z-index: 1; width: 30%; min-width: 46px; height: 16px; background: rgba(244, 233, 206, 0.78); box-shadow: 0 1px 2px rgba(36, 25, 43, 0.14); }
.tape--1 { left: 38%; top: 40%; transform: rotate(-14deg); }
.tape--2 { left: 54%; top: 70%; transform: rotate(9deg); }
.tape--3 { left: 6%; top: 18%; transform: rotate(-5deg); }
/* her process, pinned on the stem like the numbered parts of a botanical plate (i to iv, base to flower).
   A layer of its own over the specimen, so the pins stay sharp where the plate fades. */
.callouts { grid-column: 1; grid-row: 1 / -1; position: relative; z-index: 2; align-self: center; justify-self: start; width: min(100%, 220px); aspect-ratio: 290 / 700; pointer-events: none; }
.callout { position: absolute; left: calc((var(--px) - var(--x0)) / var(--w) * 100%); top: calc((var(--py) - var(--y0)) / var(--h) * 100%); width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px var(--sheet); transition: box-shadow 200ms ease, opacity 400ms ease; }
.callout.is-lit, .callout.is-on { box-shadow: 0 0 0 2px var(--sheet), 0 0 0 6px color-mix(in srgb, var(--accent) 30%, transparent); }
.callout-line { position: absolute; top: 3px; right: calc(100% + 3px); width: 18px; height: 1px; background: var(--accent); transform-origin: right center; }
.callout i { position: absolute; top: 50%; right: calc(100% + 25px); transform: translateY(-55%); font: italic 400 1rem/1 var(--font-display); color: var(--accent); white-space: nowrap; }
.callout--right .callout-line { right: auto; left: calc(100% + 3px); transform-origin: left center; }
.callout--right i { right: auto; left: calc(100% + 25px); }
.callout.is-ahead { opacity: 0.3; }   /* steps the chosen one has not reached yet */
/* the typed label */
.specimen-label { grid-column: 2; grid-row: 3; margin: 0; padding: 16px 18px 14px; border: 1px solid var(--ink); background: #FFFDF9; font-size: 0.8125rem; line-height: 1.45; }
.label-head { margin: 0 0 10px; padding-bottom: 8px; border-bottom: 1px solid var(--ink); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.specimen-label dl { display: grid; gap: 8px; margin: 0; }
.specimen-label dl div { display: grid; grid-template-columns: 6.2em minmax(0, 1fr); gap: 10px; }
.specimen-label dt { font-weight: 600; color: var(--sage); }
.specimen-label dd { margin: 0; }
.specimen-label dd span[lang] { display: block; }
.specimen-label dd span[lang]:first-child { font-weight: 600; }
/* the legend of the pins on the stem; the list gives the order to screen readers, the numerals are visual */
.label-steps { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.label-steps li { display: grid; grid-template-columns: 1.8em minmax(0, 1fr); align-items: baseline; transition: color 200ms ease; }
.label-steps li.is-lit { color: var(--accent); }
.step-num { font: italic 400 0.9375rem/1 var(--font-display); color: var(--accent); }
/* with JavaScript, each step is a button: choosing one shows it on the stem */
.js .label-steps li { display: block; }
.step { display: grid; grid-template-columns: 1.8em minmax(0, 1fr); align-items: baseline; width: 100%; min-height: 24px; margin: 0; padding: 3px 0; border: 0; border-radius: 3px; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.step:hover, .step[aria-pressed="true"] { color: var(--accent); }
.step[aria-pressed="true"] { font-weight: 600; }
.step:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.step-note { margin: 6px 0 0; font-size: 0.75rem; font-style: italic; line-height: 1.45; color: var(--ink-soft); }
@media (prefers-reduced-motion: reduce) { .pressed, .callout { transition: none; } }
@media (pointer: coarse) { .step { min-height: 36px; } }   /* comfortable to tap */
.redacted { display: inline-block; width: 5.4em; height: 0.95em; margin: 0 6px 0 0; vertical-align: -0.12em; border-radius: 2px; background: var(--ink); }
.redacted--short { width: 3.2em; }
.label-note { margin: 10px 0 0; padding-top: 8px; border-top: 1px dotted var(--line-strong, rgba(36, 25, 43, 0.3)); font-size: 0.75rem; font-style: italic; color: var(--ink-soft); }
.herbarium { grid-row: 1 / -1; }
.current-head, .current-copy { grid-column: 9 / span 4; }
.current-head { grid-row: 2; }
.current-copy { grid-row: 3; }
.current-head .eyebrow, .project-head .eyebrow { margin-bottom: 12px; }
.current-head p, .current-copy p { margin: 0; }
@media (max-width: 1080px) { .herbarium { grid-column: 1 / span 8; } .current-head, .current-copy { grid-column: 9 / -1; } }
@media (max-width: 820px) {
  .current-role { grid-template-columns: minmax(0, 1fr); }
  .herbarium, .current-head, .current-copy { grid-column: 1 / -1; grid-row: auto; }
  /* phones: the name and its intro, then the sheet, then the note */
  .current-role { grid-template-rows: none; }
  .herbarium { margin-top: 28px; }
  .current-copy .loupe-note { margin-top: 24px !important; }
  .herbarium { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; }
  .pressed, .callouts { grid-row: 1; grid-column: 1; width: min(48%, 170px); }
  .specimen-label { grid-column: 1; grid-row: 2; }
  .label-process { order: -1; }   /* the steps come first, right under the plant they change */
}

@media (prefers-reduced-motion: reduce) { .foot-mail, .copy-mail { transition: none; } }

/* ==========================================================================
   Phones: a bar that steps aside while you read, and a menu that blooms
   (only with JavaScript; without it, the plain links of the header stay visible)
   ========================================================================== */
.menu-toggle, .menu-close { display: none; align-items: center; gap: 9px; min-height: 44px; padding: 0 16px; border: 1px solid color-mix(in srgb, var(--ink) 26%, transparent); border-radius: var(--r-pill); background: transparent; color: var(--ink); font: 600 0.875rem/1 var(--font-text); cursor: pointer; transition: border-color var(--t-ui), color var(--t-ui); }
.menu-toggle::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); } /* a seed */
.menu-toggle:hover, .menu-close:hover { border-color: var(--accent); color: var(--accent); }
.menu-close { display: inline-flex; }

@media (max-width: 640px) {
  html.js { scroll-padding-top: 72px; }
  .js .site-header { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--paper) 92%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: transform 420ms var(--ease-out), box-shadow 300ms ease; }
  .js .site-header.is-stuck { box-shadow: 0 1px 0 var(--rule); }
  .js .site-header.is-hidden { transform: translateY(-100%); }
  .js .site-header .wrap { grid-template-columns: 1fr auto auto; gap: 0 6px; padding-block: 10px; }
  .js .site-header .site-nav { display: none; }
  .js .site-header .lang { grid-column: auto; grid-row: auto; padding-left: 0; border-left: 0; }
  .js .site-header .lang a[aria-current] { display: none; }   /* the bar offers the other language only */
  .js .menu-toggle { display: inline-flex; }
}
@media (max-width: 359px) { .js .site-header .mark { font-size: 1.1875rem; } .js .menu-toggle { padding-inline: 12px; } }

/* the contents page */
.menu-panel { --m: 0; --mx: 0; --my: 0; position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0 var(--gutter) 28px; border: 0; background: var(--paper); color: var(--ink); overflow-y: auto; overscroll-behavior: contain; }
.menu-panel[open] { display: flex; flex-direction: column; }
.menu-panel::backdrop { background: transparent; }
.menu-panel-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; }
.toc-eyebrow { margin: auto 0 6px; padding-top: 18px; }   /* the free space splits above and below the list */
.toc { margin: 0; padding: 0; list-style: none; }
.toc li + li { border-top: 1px solid var(--rule); }
.toc a { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 20px; align-items: center; padding: 18px 0; text-decoration: none; }
.toc-crop { width: 72px; aspect-ratio: 1; overflow: hidden; border-radius: 50%; background: var(--paper); box-shadow: 0 0 0 1px var(--ink), 0 0 0 5px var(--paper), 0 0 0 6px var(--rule); transition: box-shadow var(--t-ui); }
.toc-crop img { display: block; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; }
.toc-part { display: block; font: italic 400 0.9375rem/1.2 var(--font-display); color: var(--sage); }
.toc-part .num { margin-right: 2px; color: var(--accent); }
.toc-name { display: block; margin-top: 3px; font: 300 2.125rem/1.05 var(--font-display); letter-spacing: -0.02em; }
.toc-note { display: block; margin-top: 5px; font-size: 0.875rem; line-height: 1.35; color: var(--ink-soft); }
.toc a:hover .toc-name, .toc a:focus-visible .toc-name { text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: var(--accent); text-underline-offset: 0.16em; }
.toc a[aria-current] .toc-name { font-style: italic; color: var(--accent); }          /* where you are */
.toc a[aria-current] .toc-crop { box-shadow: 0 0 0 1.5px var(--accent), 0 0 0 5px var(--paper), 0 0 0 6px var(--accent); }
.menu-panel-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; margin-top: auto; padding-top: 22px; border-top: 1px solid var(--rule); }
.menu-panel .lang { padding-left: 0; border-left: 0; gap: 4px; }
.toc-social { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 0 24px; margin: 0; }
.toc-mail { font: 400 1.0625rem/1.3 var(--font-display); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; text-decoration-color: color-mix(in srgb, var(--accent) 55%, transparent); }
/* the bloom: a flower-shaped opening grows from the Menu button (centre and size set by main.js) */
.menu-panel.is-blooming {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='%23000'%3E%3Ccircle cx='50' cy='50' r='24'/%3E%3Cellipse cx='50' cy='24' rx='15' ry='24'/%3E%3Cellipse cx='50' cy='24' rx='15' ry='24' transform='rotate(72 50 50)'/%3E%3Cellipse cx='50' cy='24' rx='15' ry='24' transform='rotate(144 50 50)'/%3E%3Cellipse cx='50' cy='24' rx='15' ry='24' transform='rotate(216 50 50)'/%3E%3Cellipse cx='50' cy='24' rx='15' ry='24' transform='rotate(288 50 50)'/%3E%3C/g%3E%3C/svg%3E") no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='%23000'%3E%3Ccircle cx='50' cy='50' r='24'/%3E%3Cellipse cx='50' cy='24' rx='15' ry='24'/%3E%3Cellipse cx='50' cy='24' rx='15' ry='24' transform='rotate(72 50 50)'/%3E%3Cellipse cx='50' cy='24' rx='15' ry='24' transform='rotate(144 50 50)'/%3E%3Cellipse cx='50' cy='24' rx='15' ry='24' transform='rotate(216 50 50)'/%3E%3Cellipse cx='50' cy='24' rx='15' ry='24' transform='rotate(288 50 50)'/%3E%3C/g%3E%3C/svg%3E") no-repeat;
  -webkit-mask-size: calc(var(--m) * 1px) calc(var(--m) * 1px);
  mask-size: calc(var(--m) * 1px) calc(var(--m) * 1px);
  -webkit-mask-position: calc(var(--mx) * 1px - var(--m) * 0.5px) calc(var(--my) * 1px - var(--m) * 0.5px);
  mask-position: calc(var(--mx) * 1px - var(--m) * 0.5px) calc(var(--my) * 1px - var(--m) * 0.5px);
}
@media (prefers-reduced-motion: reduce) { .js .site-header, .menu-toggle, .menu-close, .toc-crop { transition: none; } }
/* a section reached from the menu receives focus (for screen readers) without an outline around it */
section[tabindex="-1"]:focus, footer[tabindex="-1"]:focus { outline: none; }