/* ==========================================================================
   marina-leonteva.com — site stylesheet
   Ported from the old Webstudio design. Tokens + semantic selectors so the
   markup (snippets/templates) stays clean. Breakpoints: 991 / 767 / 479px.
   Covered this pass: header bars, Home (featured), Index/Year feed, About.
   Single image/écriture pages get their pass next.
   ========================================================================== */

/* Two typefaces, both variable and both self-hosted (SIL OFL, fetched from
   Google Fonts' latin subset — enough for EN + FR, œ and all the accents
   included). One file per family per slant covers every weight, so Geist is
   2 requests / 59 KB and Newsreader 2 / 120 KB, against Graphik's 8 / 517 KB.
   Newsreader is pinned to the 14pt optical size the design specifies, which
   also halves the file versus shipping the whole 6–72 optical range. */
@font-face { font-family: "Geist"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(/assets/fonts/geist.woff2) format("woff2"); }
@font-face { font-family: "Geist"; font-style: italic; font-weight: 100 900; font-display: swap;
  src: url(/assets/fonts/geist-italic.woff2) format("woff2"); }
@font-face { font-family: "Newsreader"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url(/assets/fonts/newsreader.woff2) format("woff2"); }
@font-face { font-family: "Newsreader"; font-style: italic; font-weight: 200 800; font-display: swap;
  src: url(/assets/fonts/newsreader-italic.woff2) format("woff2"); }

:root {
  --fg: #111;
  --link-line: rgba(0, 0, 0, .32);  /* hairline underline at rest; solid black on hover */

  /* Geist carries the navigation, Newsreader everything that is read */
  --font-display: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-text: "Newsreader", Georgia, "Times New Roman", serif;

  /* Measured off the design rather than invented: a custom ease, no overshoot.
     It holds still for the first third, crosses most of its distance in the
     middle, and eases out long — which is what keeps the blur from snapping.
     The 100ms delay applies both ways, so a pointer crossing a word on its way
     somewhere else never sets it off. */
  --ease: cubic-bezier(.44, 0, .06, .84);
  --ease-time: .8s;
  --ease-delay: .1s;
  --defocus: blur(6px) opacity(.55);
  --defocus-room: 18px;    /* 3x the blur radius — the room the filter needs  */

  --bar-max: 1240px;       /* nav column ceiling; wider screens centre it     */
  --bar-pad-x: 64px;       /* horizontal gutter of the fixed nav             */
  --bar-pad-y: 80px;       /* where the nav TEXT sits: 80, then 48 under 480 */
  --main-pad-t: 64px;      /* top of the page: 64, then 32 under 768         */
  --about-pad-t: 64px;     /* About steps later: 64, then 32 under 480       */
  --nav-size: 26px;        /* logo / nav / lang word size (top + bottom bars) */

  --featured-max: 1320px;      /* Home gallery column — wider than the nav's 1240 */
  --featured-pad-x: 64px;      /* Home gutter: 64 / 32 / 16, not the nav's 64/24  */
  --featured-row-gap: 64px;    /* between cards                                  */
  --featured-card-gap: 32px;   /* between a card's image and its caption         */
  --caption-size: 21px;        /* Home caption; 20 at 768, 18 at 480             */
  --caption-row-gap: 2px;      /* between the caption's two lines once it wraps  */
  --caption-sub-lh: 1.3;       /* subtitle leading: 1.3 / 1.4 / 1.6 by step      */
  --feed-col-gap: 64px;    /* Journal grid: 64 across, 32 below 992          */
  --feed-row-gap: 64px;
  --feed-pad-x: 64px;      /* Journal gutter: 64 / 32 / 16                   */
  --about-max: 1080px;     /* About content ceiling — narrower than the nav  */
  --about-col: 420px;      /* About column at its widest                     */
  --about-min: 288px;      /* …and its floor: below this the row wraps       */
  --about-gap: 64px;       /* between About columns                          */
  --about-pad-x: 64px;     /* About gutter; 16 on phones, unlike the nav's 24 */

  --work-max: 1320px;      /* post column — as wide as the Home gallery       */
  --work-pad-x: 32px;      /* post gutter: 32, then 16 on phones              */
  --work-pad-b: 256px;     /* air under the post: 256, halved from 768 down   */
  --work-figure-gap: 77px; /* image → text: 77 / 64 / 48                      */
  --work-title: 31px;      /* 31 / 29 / 27                                    */
  --work-sub: 21px;        /* 21 / 20 / 19                                    */
  --work-body: 18px;       /* 18 / 18 / 17                                    */
  --work-body-lh: 1.4;     /* 1.4 on wide, 1.3 below — the artboards differ   */
  --row-gap: 5em;          /* vertical rhythm between cards                  */

  --error-size: 210px;     /* the soft number: 210 / 180 / 128                */
  --error-blur: 16px;      /* …and its blur, which eases off on phones        */
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: var(--font-text);
  font-size: 16px;
  line-height: 1.3;
  color: var(--fg);
  background: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }

/* For the page's own name. The design gives Home, the Journal, About and the
   year pages no visible heading, which left them with no heading at all — a
   screen reader had nothing to announce and no way to jump. This puts the name
   back into the document without putting it on the screen. */
.u-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* "Bold" everywhere in this design is Medium 500 — captions, About headings,
   post pages, prose emphasis. Both faces are variable, so 500 is a real
   interpolated cut in each, never synthetic. */
b, strong { font-weight: 500; }
h1, h2, h3 { font-weight: 500; }

/* Inline links inside prose / captions: hairline underline that darkens on hover */
.u-link,
.about-bio a,
.about-contact a,
.about-statement a,
.about-cv a,
.credits a {
  text-decoration: underline;
  text-decoration-color: var(--link-line);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-color .2s ease;
}
.u-link:hover,
.about-bio a:hover,
.about-contact a:hover,
.about-statement a:hover,
.about-cv a:hover,
.credits a:hover { text-decoration-color: #000; }

/* ==========================================================================
   Fixed navigation bars (top: logo + language · bottom: About + Journal)
   ========================================================================== */

.bar {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 8;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1em;
  /* The nav is a 1240px column: once the viewport is wider than that, the
     gutter grows to centre it (at 1728 that lands on the design's 244px),
     and below it the gutter is the fixed one.
     Vertically this is where the TEXT sits, not where a frame starts. In the
     artboards the nav frame begins at 64 and the words are inset another 16
     inside it, so the logo and the language switch land at 80 — measured the
     same on every page and every width, 48 once past 480. Reading the 64 off
     the frame put both bars sixteen pixels high everywhere. */
  padding: var(--bar-pad-y) max(var(--bar-pad-x), (100% - var(--bar-max)) / 2);
  pointer-events: none;            /* let clicks fall through the empty middle */
  mix-blend-mode: normal;
}
.bar a { pointer-events: auto; }
.bar--top { top: 0; }
.bar--bottom { bottom: 0; }

.bar .logo,
.bar .nav-item,
.lang a {
  font-family: var(--font-display);
  font-size: var(--nav-size);
  font-weight: 500;              /* Geist Medium */
  letter-spacing: .0246em;       /* 0.64px at 26px — positive in this design */
  line-height: 1.231;            /* 32px at 26px */
  color: var(--fg);
}

.lang { display: inline-flex; gap: 16px; }

/* The section you are already on looks exactly like every other word — it just
   does not answer. No blur, no lift, nothing on hover. The pointer stays, so
   the word still reads as a control: from any other page it will respond
   again, and nothing has to teach that twice. */

/* Transform needs a block box; these are all inline anchors. */
.bar .logo, .bar .nav-item, .lang a { display: inline-block; }

/* A blur is rasterised into the element's own box and cropped there, so a
   12px radius on a box only 28px tall comes out as a hard-edged slab. Neither
   z-index nor absolute positioning helps — it is not a stacking question, and
   an out-of-flow box gets cropped just the same.

   So the word that blurs is not the word that is clicked. The anchor keeps a
   box tight to its glyphs and takes the hits; the span inside it is padded out
   by --defocus-room, pulled back by an equal negative margin so the layout
   does not move, and carries the filter and the lift. Because the span is
   pointer-events: none, its enlarged box never participates in hit testing —
   which is what makes En and Fr survive being 16px apart with 36px of blur
   room each. Overlapping boxes would otherwise steal each other's hover, and
   that is the part z-index cannot fix: it decides who wins, and somebody
   always loses. */
.bar .logo > span,
.bar .nav-item > span,
.lang a > span {
  display: inline-block;
  padding: var(--defocus-room);
  margin: calc(var(--defocus-room) * -1);
  pointer-events: none;
}

.bar .logo > span,
.bar .nav-item > span,
.lang a > span,
.card-caption {
  transition: filter var(--ease-time) var(--ease) var(--ease-delay),
              transform var(--ease-time) var(--ease) var(--ease-delay);
}

@media (hover: hover) {
  .bar .logo:hover > span,
  .bar .nav-item:not([aria-current="page"]):hover > span,
  .lang a:not([aria-current="true"]):hover > span,
  .card-caption:hover { filter: var(--defocus); }
}

/* Keyboard focus cannot borrow the hover language — this design says "I am
   reachable" by going soft, and an indicator that blurs the thing you are on
   is worse than none. The artboard gives focus its own state: the word stays
   sharp and takes a 2px underline. :focus-visible only, so a mouse click never
   draws it. */
.bar a:focus-visible,
.u-link:focus-visible,
.card:focus-visible,
.about a:focus-visible,
.credits a:focus-visible,
.work-body a:focus-visible {
  outline: none;
  text-decoration: underline;
  text-decoration-color: currentColor;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

/* Someone who has asked the system for less motion gets none of it. The blur
   still marks state; only the movement and the timing go. */
@media (prefers-reduced-motion: reduce) {
  .bar .logo > span,
  .bar .nav-item > span,
  .lang a > span,
  .card-caption,
  .card-media img {
    transition-duration: .01ms !important;
    transition-delay: 0ms !important;
  }
}

/* Two type steps, not three: the 768 and 490 artboards share the 23px cut, so
   767 changes layout only. Sizes come from the artboards' measured word
   widths — 211 / 188 / 172px for the logo against a 26px cut. */
@media (max-width: 991px) {
  :root {
    --nav-size: 23px;
    --featured-pad-x: 32px; --featured-row-gap: 48px;
    --featured-card-gap: 24px; --caption-size: 20px; --caption-sub-lh: 1.4;
    --work-figure-gap: 64px; --work-title: 29px; --work-sub: 20px;
    --work-body-lh: 1.3;
    --feed-col-gap: 32px; --feed-row-gap: 32px; --feed-pad-x: 32px;
    --error-size: 180px;
  }
}
/* The air under a post halves at the middle breakpoint and nowhere else — the
   only measurement in the file that steps at 768 rather than 991 or 480. */
@media (max-width: 767px) {
  :root { --work-pad-b: 128px; --main-pad-t: 32px; }
}
/* 480, not the 479 the rest of the file uses: the artboard drawn at exactly
   480 already carries the small gutters and the 21px cut, while the one at
   490 still has the large ones. */
@media (max-width: 480px) {
  :root {
    --nav-size: 21px; --bar-pad-x: 24px; --bar-pad-y: 48px; --about-pad-t: 32px;
    --featured-pad-x: 16px; --featured-card-gap: 16px; --caption-size: 18px;
    --caption-row-gap: 0px; --caption-sub-lh: 1.6;
    --work-pad-x: 16px; --work-figure-gap: 48px; --work-title: 27px;
    --work-sub: 19px; --work-body: 17px;
    --feed-pad-x: 16px;
    --error-size: 128px; --error-blur: 12px;
  }
}

/* ==========================================================================
   Main column — clears the fixed bars top and bottom
   ========================================================================== */

/* Clear the fixed bars exactly: each is its inset plus one line of nav text,
   so the clearance has to follow --bar-pad-y. It used to be a flat 5.5em,
   which was right while the inset was 32 and leaves content under the bar now
   that the artboards put it at 64. */
.site-main {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: calc(var(--bar-pad-y) + 2em) 0;
}

/* The navigation is printed on the content, not placed above it: in the
   artboards the work starts at 64 and "Marina Leonteva" sits at 80, on the
   picture. The clearance above read that 64 as a mistake and added a line of
   nav text to get out from under the bar, which is where the extra 32 came
   from.
   Measured across the artboards, the step is at 768 — 64 at 1728 and 1000, 32
   at 678 and below. That is not --bar-pad-y's own step at 480, so the top of
   the page and the inset of the nav are separate numbers now.
   A year page has no artboard of its own; it is the Journal grid with one
   year in it, so it follows the Journal. */
.t-home .site-main,
.t-index .site-main,
.t-year .site-main,
.t-image .site-main,
.t-ecriture .site-main { padding-block-start: var(--main-pad-t); }

/* About is the one page that steps later: its artboards hold 64 all the way
   down through 768 and only halve at 480. That is exactly where the nav inset
   halves, so it follows that instead of --main-pad-t. */
.t-about .site-main { padding-block-start: var(--about-pad-t); }

/* Inside a post: an écriture with no cover opens with its own title, and a
   title is not something to print the logo across. Constant 192 at every
   width. */
.t-ecriture .site-main:has(> .work--textonly) { padding-block-start: 192px; }

/* The error page is left out on purpose — its artboards centre the content
   rather than hanging it from the top, so the clearance above still applies. */

/* ==========================================================================
   Error page
   A number too soft to read, and under it the line the cards use: the code
   again — sharp, and the way home — beside a sentence naming what happened.
   The artboard hides the language switch and the bottom bar and centres the
   wordmark, so the page offers exactly two exits and both go to the start.
   ========================================================================== */

.bar--bare { justify-content: center; }

.t-error .site-main {
  flex: 1 1 auto;
  justify-content: center;
}
.error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 64px;
  padding-top: 64px;
  text-align: center;
}
.error-figure {
  display: block;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--error-size);
  line-height: 1;
  letter-spacing: .64px;
  color: rgb(0 0 0 / 55%);
  filter: blur(var(--error-blur));
  user-select: none;
}
/* It is a link now, so it can be reached by keyboard — and a blurred thing
   with no focus ring is a thing you cannot tell you are on. The blur lifts
   while it is focused, which is also the clearest possible affordance. */
.error-figure:focus-visible {
  filter: none;
  outline: 2px solid currentcolor;
  outline-offset: 8px;
}
/* Same construction as a Home card's caption: two faces meeting on a baseline,
   12 apart, wrapping together rather than mid-sentence. */
.error-line {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: center;
  gap: 0 12px;
  padding-inline: 20px;
  font-size: 21px;
}
.error-code {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 32px;
  letter-spacing: .64px;
}
.error-what {
  margin: 0;
  font-family: var(--font-text);
  font-size: inherit;
  font-weight: 400;
  line-height: 1.3;
}

/* ==========================================================================
   Cards (shared by Home featured, Index feed, Year feed)
   A card is a column: image, then a centred caption "<b>Title</b> subtitle".
   ========================================================================== */

.card {
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 1em;
  color: inherit;
}
.card-media { width: 100%; margin: 0; }
.card-media img {
  width: 100%;
  height: auto;
  transition: opacity .3s ease, filter .55s ease;
}
.card:hover .card-media img { filter: opacity(0.88) contrast(1.05); }

.card-caption {
  align-self: center;
  text-align: center;
  line-height: 1.3;
  max-width: 30em;
}
.card-caption b { font-weight: 500; }

/* The card title is a heading — an h2 under each page's own h1 — so that the
   feed and Home read as a list of works rather than a wall of anonymous text.
   Visually it is what it always was: a heading element carries a block box and
   a type size of its own, and neither belongs here. Inside .featured-grid and
   .feed-grid the caption is a flex container, which blockifies its children
   anyway; only the text card still needs the title to flow inline. */
.card-title {
  margin: 0;
  font-size: inherit;
  font-weight: 500;
}
.card.is-text .card-title { display: inline; }

/* Text card (écriture without a cover) — the "résumé" treatment */
.card.is-text { justify-content: center; }
.card.is-text .card-caption {
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 1.1em;
  line-height: 1.4;
  padding: 2em 1em;
}

/* ---- Home: featured gallery, centred, per-item Width % --------------------
   Each card's width is the % of the gallery column set in the Panel (cards
   field). 100 = full-width hero, 50 = two-up, 33 = three-up, etc. -------- */

/* The gallery has its own measurements, wider than the nav: a 1320 column
   against the nav's 1240, and gutters of 64 / 32 / 16 against the nav's
   64 / 24. Same max() trick — at 1728 it resolves to a 204px gutter, which is
   where the artboard puts the card (its grid starts at 64 and the card at 140
   inside it). */
.featured-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  row-gap: var(--featured-row-gap);
  /* Cards narrow enough to share a row stand the same distance apart as rows
     do — one variable, so it follows the breakpoints without a second set of
     numbers. It was zero, and a 30 next to a 30 touched. Widths are still
     percentages of the column, so a pair now has to leave room for the gap as
     well: two cards at 50 no longer sit together, which is the arithmetic of
     asking for a gap rather than a change of mind about it. */
  column-gap: var(--featured-row-gap);
  width: 100%;
  padding-inline: max(var(--featured-pad-x), (100% - var(--featured-max)) / 2);
}
.featured-grid > .card {
  width: var(--card-w, 80%);
  row-gap: var(--featured-card-gap);
}
/* The image fills its card's width slot (set by Width %); height follows the
   artwork's aspect ratio. The artboards draw it at a flat 890px tall with
   object-cover at every width, which would crop a painting on a phone — that
   is the placeholder rectangle's own size, not an instruction. */
.featured-grid > .card .card-media img { width: 100%; }
/* …and the Width % can only ask. The post's own Max width has the last word,
   so a card set to 100% of a 1320 column renders at 900 if that is all the
   painting has. The whole card narrows, not just the image, or the caption
   would sit under nothing. */
.featured-grid > .card { max-width: var(--img-max, none); }

/* Title and subtitle stand side by side, centred, and go to a second line
   together once they no longer fit — which the artboards show happening
   between 490 and 480. Baselines meet at the bottom because the two faces
   have different line boxes: Geist set solid at 32px, Newsreader at 1.3. */
.featured-grid .card-caption {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
  align-content: flex-end;
  /* Two axes, not one: the columns are 12 apart, the wrapped lines almost
     touch — 2px at the middle step and 0 on phones. A single gap would have
     pushed the second line 12 away from the first, which is not what the
     narrow artboards draw. */
  gap: var(--caption-row-gap) 12px;
  padding-inline: 20px;
  font-size: var(--caption-size);
  max-width: none;
  text-align: center;
}
.featured-grid .card-title {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 32px;
  letter-spacing: .0305em;       /* 0.64px at 21px */
  white-space: nowrap;
}
.featured-grid .card-sub {
  font-family: var(--font-text);
  /* The subtitle's leading opens up as the type gets smaller — 1.3 / 1.4 / 1.6
     — so the two lines sit closer to each other than the row gap suggests. */
  line-height: var(--caption-sub-lh);
  white-space: nowrap;
}

@media (max-width: 767px) {
  .featured-grid > .card { width: 100% !important; }  /* stack on phones */

  /* `nowrap` is what makes the title and subtitle wrap as a pair rather than
     mid-sentence, and it is right wherever the pair fits. On a phone it does
     not: "2025, Tempera and watercolors on paper, 42×29.7 cm" is 433px of
     unbreakable text, which floored the card at 473px inside a 320px screen
     and made the whole front page scroll sideways. Below the stacking point
     the caption is already on its own lines, so letting the words break there
     costs the arrangement nothing. Sideways scrolling is About's alone. */
  .featured-grid .card-title,
  .featured-grid .card-sub { white-space: normal; }
}

/* ---- Index / Year: the journal grid ---------------------------------------
   Column 1320 like the rest, but its own gutters: 64 / 32 / 16. The column
   count is not stepped by breakpoint — auto-fill against a 248 floor produces
   the artboards' 4 / 3 / 2 / 1 on its own, and the card widths land exactly:
   282 at 1728, 248 at 1000, 291 at 678, then full width.

   Type is not this artboard's to decide — it inherits the Home card's steps,
   21 / 20 / 18 with the subtitle's leading opening up as the type shrinks.
   The caption differs only in arrangement: stacked and left-aligned here,
   side by side and centred on Home. */
.feed-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(248px, 1fr));
  column-gap: var(--feed-col-gap);
  row-gap: var(--feed-row-gap);
  align-items: start;
  width: 100%;
  padding-inline: max(var(--feed-pad-x), (100% - var(--featured-max)) / 2);
}
.feed-grid > .card {
  width: auto;
  align-items: stretch;
  row-gap: 20px;              /* image to caption */
}
.feed-grid .card-caption {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;                   /* title to subtitle */
  text-align: left;
  max-width: none;
  font-size: var(--caption-size);
  /* The shared rule centres the caption box inside the card, which reads as
     left-aligned only while the text is long enough to fill it. A short line —
     "2026, note" under a drawn écriture — sat in the middle of the column
     instead. In the feed the box is the card; Home is where centring belongs. */
  align-self: stretch;
}
.feed-grid .card-title {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 32px;
  letter-spacing: .64px;
}
.feed-grid .card-sub {
  font-family: var(--font-text);
  line-height: var(--caption-sub-lh);
}

/* ==========================================================================
   About — three columns (Portrait+Bio+Contact / Statement / CV)
   ========================================================================== */

/* Three columns, always side by side, and they scroll sideways rather than
   reflow. The artboards say so plainly once read: at 1000 and 678 the three
   288px columns with their 64 gaps come to 992 and overrun containers of 872
   and 550. I first took that overrun for an unfinished Figma state and
   "fixed" it with flex-wrap — which quietly replaced the author's decision
   with my own. They stack only at 480 and below.
   ========================================================================== */
.about {
  display: grid;
  grid-template-columns: repeat(3, minmax(var(--about-min), 1fr));
  gap: var(--about-gap);
  align-items: start;
  width: 100%;
  overflow-x: auto;
  /* The scroll is there; the scrollbar is not shown. */
  scrollbar-width: none;          /* Firefox */
  -ms-overflow-style: none;       /* legacy Edge */
  /* 1080 is the width of the columns themselves, not of a padded box — in the
     artboards the gutter comes from where the frame sits, so it is the padding
     that grows to centre a 1080 content box. */
  padding: 96px max(var(--about-pad-x), (100% - var(--about-max)) / 2);
  line-height: 1.3;
}
.about-col {
  min-width: 0;             /* the grid track already holds the 288 floor */
  display: flex;
  flex-direction: column;
}

/* The 32 belongs only where the artboard puts it: between the portrait block
   and the contact block. Putting it on every column added 32 to the margin of
   every paragraph in the statement and the CV — 48 where the design says 16,
   and 64 where it says 32. */
.about::-webkit-scrollbar { display: none; }   /* WebKit / Blink */

.about-portrait { row-gap: 32px; }

.about-intro { display: flex; flex-direction: column; gap: 32px; }
.about-intro img { width: 100%; }

/* writer-field prose. The statement runs as paragraphs 16 apart; the CV is a
   stack of blocks 32 apart, each one heading + lines. */
.about p { margin: 0 0 16px; }
.about-cv p { margin-bottom: 32px; }
.about p:last-child { margin-bottom: 0; }
.about b, .about strong { font-weight: 500; }
.about-contact a { white-space: nowrap; }

/* A section heading. These are real h2 / h3 now — marina_promote_headings()
   makes them out of the bolded labels the writer field forces Marina to use —
   and this is the look they always had: Geist against the Newsreader body,
   17px, set solid. The <strong> selector stays so any text still written in
   the old shape, or a bold opening the Bio, keeps rendering the same. */
.about :is(h2, h3),
.about p > strong:first-child {
  display: block;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .0094em;   /* 0.16px at 17px */
  margin: 0 0 16px;
}
/* The CV column's own name stands 32 from its first section, the way it did
   when it was a paragraph in a column whose paragraphs are 32 apart. */
.about-cv > h2 { margin-bottom: 32px; }
/* alone in its paragraph, the paragraph's own margin already gives the 16 */
.about p > strong:only-child { margin-bottom: 0; }
/* the break that used to separate heading from lines is now the block box */
.about p > strong:first-child + br { display: none; }

/* Only the gutter changes on phones; the 96 of vertical padding is the same
   everywhere, and the smaller nav inset is what brings the content up. */
@media (max-width: 480px) {
  :root { --about-pad-x: 16px; }
  /* Only here do the columns stack, and only here does the scroll go away. */
  .about {
    grid-template-columns: minmax(0, var(--about-col));
    overflow-x: visible;
  }
}

/* ==========================================================================
   Single post (image / écriture)
   The image runs the full column; the text sits in a narrower grid column
   beneath it — 2 of 3 on wide screens, 4 of 5 at 768, and the grid disappears
   on phones. The artboards draw the image at a flat 1528 or 1070 tall with
   object-cover; that is the placeholder's own size, so the artwork keeps its
   aspect ratio here.
   ========================================================================== */

.work {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--work-figure-gap);
  padding-inline: max(var(--work-pad-x), (100% - var(--work-max)) / 2);
  padding-block-end: var(--work-pad-b);
}
.work-image { width: 100%; margin: 0; }
/* --img-max is the post's "Max width (px)". A painting scanned at 900 is 900
   here, not stretched across a 1320 column; the srcset ladder is capped to the
   same number, so the file never exceeds it either. Centred in its column —
   the artboards draw every image full width, so the alignment only shows once
   a cap makes one narrower, and centred is what they mean. The text below
   stays left, where the artboard puts it. */
.work-image img {
  width: 100%;
  max-width: var(--img-max, none);
  margin-inline: auto;
}

.work-grid {
  width: 100%;
  min-width: 300px;         /* the artboards' own floor */
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
}
.work-col {
  grid-column: span 2;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Title 12 above the subtitle, then 16 of padding here plus the column's own
   16 — which is what puts 32 between the subtitle and the body. */
.work-head {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-bottom: 16px;
}
.work-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--work-title);
  line-height: 32px;
  letter-spacing: .64px;    /* absolute, not em — the design holds it at 0.64
                               across all three sizes */
  color: var(--fg);
  margin: 0;
}
.work-subtitle {
  font-family: var(--font-text);
  font-size: var(--work-sub);
  line-height: 1.3;
  margin: 0;
}

.work-body { font-size: var(--work-body); line-height: var(--work-body-lh); }
.work-body p { margin: 0 0 18px; }
.work-body p:last-child { margin-bottom: 0; }
.work-body figure { margin: 0 0 18px; }
.work-body figure:last-child { margin-bottom: 0; }
/* Same rule as the opening image: fill the column, never exceed what the
   picture has, and centre when something makes it narrower. */
.work-body img, .work-body video {
  width: 100%;
  margin-inline: auto;
}

/* Not in the artboard — see the note in the commit. Kept, quietly. */
.work-tags { display: flex; flex-wrap: wrap; gap: 12px; font-size: var(--work-body); }

@media (max-width: 991px) {
  .work-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .work-col  { grid-column: span 4; }
}
@media (max-width: 480px) {
  .work-grid { display: block; }        /* no grid at all on phones */
  .work-col  { display: flex; }
}

/* ==========================================================================
   Year page intro + generic page heading (kept minimal)
   ========================================================================== */

.page-head { width: 100%; max-width: var(--featured-max); margin: 0 auto 2em; }
.page-head h1 { margin: 0; font-weight: 500; letter-spacing: -.025em; }
.page-intro { margin-top: 1em; line-height: 1.4; max-width: 40em; }

/* ==========================================================================
   Home credits footer (© + socials + "Site by …") — centred, low contrast.
   Matches the Webstudio footer: full-width, justify-content center, 2em gaps,
   50% opacity, clear of the fixed bottom bar.
   ========================================================================== */

.credits {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  align-content: center;
  /* 8 between wrapped rows, 32 between items — two axes again */
  gap: 8px 32px;
  width: 100%;
  /* Vertical placement is not in the artboard; this is the earlier value. */
  margin: 4em 0 5.5em;
  padding: 0 1em;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 18px;
  line-height: 32px;
  letter-spacing: .64px;
  text-align: center;
  white-space: nowrap;
}
}