/* self-hosted fonts (latin) */
@font-face{font-family:'Caveat';font-style:normal;font-weight:400;font-display:swap;src:url(../assets/fonts/caveat-normal-400.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Caveat';font-style:normal;font-weight:500;font-display:swap;src:url(../assets/fonts/caveat-normal-500.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Caveat';font-style:normal;font-weight:600;font-display:swap;src:url(../assets/fonts/caveat-normal-600.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Caveat';font-style:normal;font-weight:700;font-display:swap;src:url(../assets/fonts/caveat-normal-700.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:400;font-display:swap;src:url(../assets/fonts/cormorant-italic-400.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:500;font-display:swap;src:url(../assets/fonts/cormorant-italic-500.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:400;font-display:swap;src:url(../assets/fonts/cormorant-normal-400.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:500;font-display:swap;src:url(../assets/fonts/cormorant-normal-500.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'EB Garamond';font-style:italic;font-weight:400;font-display:swap;src:url(../assets/fonts/ebgaramond-italic-400.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'EB Garamond';font-style:italic;font-weight:500;font-display:swap;src:url(../assets/fonts/ebgaramond-italic-500.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'EB Garamond';font-style:normal;font-weight:400;font-display:swap;src:url(../assets/fonts/ebgaramond-normal-400.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'EB Garamond';font-style:normal;font-weight:500;font-display:swap;src:url(../assets/fonts/ebgaramond-normal-500.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'EB Garamond';font-style:normal;font-weight:600;font-display:swap;src:url(../assets/fonts/ebgaramond-normal-600.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

/* ---- tokens/fonts.css ---- */
/* ============================================================
   FONTS
   Two families, loaded from Google Fonts.

   • EB Garamond — a quiet, literary serif. Body, headings,
     and (in spaced uppercase) the small meta labels. Calm,
     warm, made for reading poetry.
   • Caveat — a pencil-textured handwriting face. Used ONLY
     for the name and the occasional hand-written accent.

   SUBSTITUTION NOTE -> these are stand-ins that approximate
   Olivia's own hand. If she can supply a scan of her writing
   we can build a bespoke handwriting webfont and swap Caveat
   out in one place (--font-hand). Flag for the artist.

   the design-system closure, so consumers inherit the fonts
   with no extra setup (internet required).
   ============================================================ */


:root {
  --font-serif: 'EB Garamond', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --font-logo:  'Cormorant Garamond', 'EB Garamond', Georgia, serif; /* name logotype */
  --font-hand:  'Caveat', 'Segoe Script', 'Bradley Hand', cursive;

  /* semantic */
  --font-body:    var(--font-serif);
  --font-display: var(--font-serif);
  --font-accent:  var(--font-hand);
  --font-name:    var(--font-logo);  /* artist's name logotype — Cormorant italic */
  --font-label:   var(--font-serif); /* spaced uppercase meta */
}

/* ---- tokens/colors.css ---- */
/* ============================================================
   COLOR — ink on paper
   Mostly monochrome. Warm bone paper, warm near-black ink,
   and ONE muted accent (a bruised dusty-rose, drawn from the
   plum eyes & lips painted onto the ceramic vessels).
   Use the accent sparingly — it should feel like a single
   mark, never a theme.
   ============================================================ */

:root {
  /* ---- Base palette ---------------------------------------- */

  /* Paper — never pure #FFF. Warm bone, the colour of unglazed
     porcelain and old paper. */
  --paper:        #F4EFE5;   /* primary background           */
  --paper-deep:   #EAE2D3;   /* alternate / recessed sections */
  --paper-bright: #FAF6EE;   /* lifted surface, image mats    */

  /* Ink — warm near-black, never pure #000. */
  --ink:          #211E19;   /* primary text & marks          */
  --ink-soft:     #4C463D;   /* secondary text                */
  --ink-faint:    #8C8475;   /* meta labels, captions         */
  --ink-ghost:    #B9B0A0;   /* placeholders, disabled        */

  /* Hairlines — thin warm-grey rules, the only "borders". */
  --line:         #D8CFBE;   /* hairline rule                 */
  --line-soft:    #E4DCCD;   /* faintest divider              */

  /* Accent — bruised dusty rose. One mark, used rarely:
     a circled word, a hovered link, a single underline. */
  --rose:         #92696E;
  --rose-soft:    #B69499;   /* tints / hover                 */
  --rose-wash:    #E7D8D6;   /* faintest wash                 */

  /* ---- Semantic aliases ------------------------------------ */
  --surface:            var(--paper);
  --surface-alt:        var(--paper-deep);
  --surface-raised:     var(--paper-bright);

  --text-primary:       var(--ink);
  --text-secondary:     var(--ink-soft);
  --text-muted:         var(--ink-faint);
  --text-placeholder:   var(--ink-ghost);

  --border:             var(--line);
  --border-faint:       var(--line-soft);

  --accent:             var(--rose);
  --accent-hover:       var(--rose-soft);
  --accent-wash:        var(--rose-wash);

  --mark:               var(--ink);     /* hand-drawn marks    */
  --link:               var(--ink);
  --link-hover:         var(--rose);

  --selection-bg:       var(--rose-wash);
  --selection-fg:       var(--ink);
}

::selection { background: var(--selection-bg); color: var(--selection-fg); }

/* ---- tokens/typography.css ---- */
/* ============================================================
   TYPOGRAPHY
   A restrained scale. Serif for everything readable; the
   handwriting face appears only at display sizes and as
   accents. Generous line-height for poetry and statements.
   ============================================================ */

:root {
  /* ---- Type scale (restrained, ~1.28 ratio) ---------------- */
  --text-xs:    0.75rem;   /* 12px — meta labels (uppercase, spaced) */
  --text-sm:    0.9375rem; /* 15px — captions, fine print            */
  --text-base:  1.1875rem; /* 19px — body / poetry                   */
  --text-md:    1.375rem;  /* 22px — lead paragraphs                 */
  --text-lg:    1.75rem;   /* 28px — sub-headings                    */
  --text-xl:    2.5rem;    /* 40px — section titles                  */
  --text-2xl:   3.5rem;    /* 56px — page titles                     */
  --text-3xl:   5rem;      /* 80px — hero / name (serif)             */

  /* Handwriting runs large to keep its character legible. */
  --hand-sm:    1.75rem;   /* inline accents          */
  --hand-md:    3rem;      /* sub-titles, signatures  */
  --hand-lg:    5.5rem;    /* the name on the landing */
  --hand-xl:    8rem;      /* oversized hero name     */

  /* ---- Weights --------------------------------------------- */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;

  /* ---- Line height ----------------------------------------- */
  --leading-tight:   1.08;  /* display / name           */
  --leading-snug:    1.28;  /* headings                 */
  --leading-normal:  1.5;   /* UI text                  */
  --leading-prose:   1.72;  /* body & poetry — airy     */
  --leading-loose:   2;     /* spaced poetry            */

  /* ---- Letter-spacing -------------------------------------- */
  --tracking-label:  0.22em; /* uppercase meta labels   */
  --tracking-wide:   0.08em;
  --tracking-normal: 0;
  --tracking-tight: -0.01em; /* large serif display     */

  /* ---- Measure (max line length) --------------------------- */
  --measure-prose:  62ch;  /* statements              */
  --measure-poem:   38ch;  /* poetry — narrow column  */
  --measure-narrow: 30ch;
}

/* ---- Base element defaults --------------------------------- */
html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-prose);
  font-weight: var(--weight-regular);
  color: var(--text-primary);
  font-feature-settings: "kern" 1, "liga" 1, "onum" 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Spaced uppercase meta label — the only "UI" type treatment.
   Used for nav, years, mediums, section eyebrows. */
.ot-label {
  font-family: var(--font-label);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  font-weight: var(--weight-medium);
  color: var(--text-muted);
}

/* Handwriting helper. */
.ot-hand {
  font-family: var(--font-hand);
  font-weight: var(--weight-medium);
  line-height: var(--leading-tight);
  letter-spacing: 0.005em;
}

/* ---- tokens/spacing.css ---- */
/* ============================================================
   SPACING, LAYOUT, MOTION & TEXTURE
   Generous negative space. A loose, slightly hand-placed
   rhythm rather than a rigid grid.
   ============================================================ */

:root {
  /* ---- Spacing scale (rem) --------------------------------- */
  --space-1:   0.25rem;   /* 4px   */
  --space-2:   0.5rem;    /* 8px   */
  --space-3:   0.75rem;   /* 12px  */
  --space-4:   1rem;      /* 16px  */
  --space-5:   1.5rem;    /* 24px  */
  --space-6:   2rem;      /* 32px  */
  --space-7:   3rem;      /* 48px  */
  --space-8:   4.5rem;    /* 72px  */
  --space-9:   7rem;      /* 112px */
  --space-10:  10rem;     /* 160px — full breathing room */

  /* Semantic spacing */
  --gutter:        var(--space-6);  /* page side margin (mobile) */
  --gutter-wide:   var(--space-9);  /* page side margin (desktop) */
  --section-gap:   var(--space-10); /* between major sections */
  --stack:         var(--space-5);  /* default vertical rhythm */

  /* ---- Layout --------------------------------------------- */
  --page-max:      1180px;  /* outer content width */
  --reading-max:   720px;   /* prose column        */

  /* ---- Borders / radii ------------------------------------ */
  /* Hairlines only. Corners stay square — no rounded "cards". */
  --hairline:      1px solid var(--border);
  --hairline-soft: 1px solid var(--border-faint);
  --radius:        0;       /* deliberately square */

  /* No drop shadows in this system. Depth comes from space. */
  --shadow-none:   none;

  /* ---- Hand-placed offsets (use sparingly) ---------------- */
  /* Tiny rotations & nudges that make elements feel set by
     hand rather than snapped to a grid. */
  --tilt-1:  -0.8deg; /* @kind other */
  --tilt-2:   0.6deg; /* @kind other */
  --tilt-3:  -1.4deg; /* @kind other */
  --nudge:    0.5rem;

  /* ---- Motion — slow, soft fades only. Nothing bouncy. ----- */
  --ease:        cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */
  --ease-inout:  cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
  --dur-fast:    220ms; /* @kind other */
  --dur:         420ms; /* @kind other */
  --dur-slow:    760ms; /* @kind other */
  --dur-veil:    1100ms; /* @kind other */

  /* ---- Paper grain ----------------------------------------
     A very faint fractal-noise texture, applied over the
     paper background so it reads as a surface, not a screen.
     Layer it as a background-image. Keep opacity low. */
  --paper-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.045'/%3E%3C/svg%3E"); /* @kind other */
}

/* Apply the grain to any paper surface. */
.ot-paper {
  background-color: var(--paper);
  background-image: var(--paper-grain);
}

/* Respect reduced-motion: drop all transitions/animations. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ---- site.css ---- */
/* ============================================================
   Olivia Terry — portfolio site layout.
   Sits on top of the design tokens (styles.css). Ink on paper:
   hairlines only, square corners, no shadows, generous space,
   slow soft fades, the rose accent used as a single mark.
   ============================================================ */

:root {
  /* motion easing — natural deceleration, never bounce (per Impeccable) */
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
}

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

/* ---- Scroll reveals -------------------------------------- *
   Hidden ONLY when JS has confirmed motion is wanted (.motion on
   <html>). Without it — no-JS, reduced-motion, headless — content
   is fully visible by default, so nothing ever ships blank. */
.motion [data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.85s var(--ease-out-quart), transform 0.85s var(--ease-out-quart);
  transition-delay: calc(var(--i, 0) * 70ms);
}
.motion [data-reveal].in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .motion [data-reveal] { opacity: 1; transform: none; transition: none; }
}

html, body { margin: 0; }
body {
  background-color: var(--paper);
  background-image: var(--paper-grain);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-prose);
  min-height: 100vh;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--link); text-decoration: none; }

/* ---- Page shell ----------------------------------------- */
.page {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--gutter) var(--space-9);
}
@media (min-width: 720px) {
  .page { padding: 0 var(--gutter-wide) var(--space-10); }
}

/* Soft entrance — a gentle settle. Opacity never animates to
   hidden, so content is visible even if animation is skipped. */
.view { animation: viewIn var(--dur-slow) var(--ease); }
@keyframes viewIn { from { transform: translateY(10px); opacity: .55; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .view { animation: none; } }

/* ---- Navigation ----------------------------------------- */
.nav {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-6);
  padding: var(--space-5) 0;
  border-bottom: var(--hairline);
  flex-wrap: wrap;
}
.nav__name {
  font-family: var(--font-name);
  font-style: italic;
  font-size: var(--text-xl);
  line-height: 1;
  color: var(--ink);
}
.nav__links { display: flex; gap: var(--space-6); list-style: none; margin: 0; padding: 0; align-items: baseline; flex-wrap: wrap; }
.nav__link {
  position: relative;
  font-family: var(--font-label);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  font-weight: var(--weight-medium);
  color: var(--ink-faint);
  padding-bottom: 4px;
  transition: color var(--dur) var(--ease);
}
.nav__link:hover { color: var(--rose); }
.nav__link[aria-current="page"] { color: var(--ink); }
.nav__link[aria-current="page"] svg { position: absolute; left: 0; bottom: -3px; width: 100%; height: 6px; overflow: visible; }

/* ---- Meta label + hand helpers -------------------------- */
.label {
  font-family: var(--font-label);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  font-weight: var(--weight-medium);
  color: var(--ink-faint);
}
.hand { font-family: var(--font-hand); line-height: var(--leading-tight); }
.rose { color: var(--rose); }
.italic { font-style: italic; }

/* ---- Home / hero — scroll over the vessel --------------- *
   The vessel is a full-height backdrop, pinned (sticky) while
   three writing "beats" scroll up over it. One signature moment. */
.hero { position: relative; }
.hero__bg {
  position: sticky;
  top: 0;
  height: 100vh;
  margin-bottom: -100vh;        /* pull the writing beats up to scroll over the pot */
  display: grid;
  place-items: center;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}
.hero__bg img {
  height: 106vh;
  width: auto;
  max-width: none;
  user-select: none;
  will-change: transform, opacity;
}
.hero__layers { position: relative; z-index: 1; text-align: center; }
.hero__layer {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-5);
  padding: var(--space-8) 0;
}
.hero__layer--last { min-height: 86vh; }
.hero__eyebrow { display: block; }
.hero__name {
  font-family: var(--font-name);
  font-style: italic;
  font-size: clamp(4rem, 14vw, 10rem);
  line-height: .88;
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-tight);
  margin: 0;
}
.hero__name span { display: block; }
.hero__lead {
  font-size: clamp(var(--text-md), 3.4vw, var(--text-xl));
  font-style: italic;
  color: var(--ink-soft);
  max-width: 22ch;
  margin: 0 auto;
  line-height: var(--leading-snug);
}
.hero__inscribe {
  font-family: var(--font-hand);
  font-size: var(--hand-md);
  line-height: var(--leading-tight);
  max-width: 18ch;
  transform: rotate(var(--tilt-1));
}
.hero__scroll { font-family: var(--font-label); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--ink-faint); display: inline-flex; flex-direction: column; align-items: center; gap: var(--space-2); }
.hero__scroll svg { animation: nudge 2.4s var(--ease) infinite; }
@keyframes nudge { 0%,100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .hero__scroll svg { animation: none; } }
.home__enter { display: inline-flex; align-items: center; gap: var(--space-3); font-family: var(--font-label); text-transform: uppercase; letter-spacing: var(--tracking-label); font-size: var(--text-xs); color: var(--ink); transition: color var(--dur) var(--ease-out-quart); }
.home__enter:hover { color: var(--rose); }
.home__enter svg { transition: transform var(--dur) var(--ease-out-quart); }
.home__enter:hover svg { transform: translateX(5px); }
@media (max-width: 760px) {
  .nav { gap: var(--space-3) var(--space-5); }
  .nav__name { font-size: var(--text-lg); flex: 1 0 100%; }
  .hero__bg img { height: 84vh; opacity: .82; }
  .hero__text, .hero__layer { max-width: 100%; }
  .hero__eyebrow { font-size: 0.62rem; letter-spacing: 0.12em; max-width: 22ch; }
  .hero__name { font-size: clamp(2.6rem, 12.5vw, 5rem); letter-spacing: 0; line-height: .96; }
  .hero__lead { font-size: var(--text-md); }
  .hero__inscribe { font-size: var(--hand-sm); }
}

/* ---- Section heads -------------------------------------- */
.head { margin: var(--space-8) 0 var(--space-7); }
.head__title { font-size: var(--text-2xl); font-weight: var(--weight-regular); margin: var(--space-2) 0 0; line-height: var(--leading-tight); }
.head__title em { font-style: italic; }

/* ---- Medium filter -------------------------------------- */
.filter { display: flex; gap: var(--space-5); flex-wrap: wrap; margin: var(--space-6) 0 var(--space-8); }
.filter button {
  background: none; border: none; cursor: pointer; padding: 2px 0;
  font-family: var(--font-label); font-size: var(--text-xs);
  text-transform: uppercase; letter-spacing: var(--tracking-label);
  color: var(--ink-faint); position: relative;
  transition: color var(--dur) var(--ease);
}
.filter button:hover { color: var(--rose); }
.filter button[aria-pressed="true"] { color: var(--ink); }
.filter button[aria-pressed="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px; background: var(--ink); }

/* ---- Work index (grouped grid) -------------------------- */
.work-index {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8) var(--space-7);
  align-items: start;
}
@media (max-width: 760px) { .work-index { grid-template-columns: repeat(2, 1fr); gap: var(--space-7) var(--space-5); } }
.group-label {
  grid-column: 1 / -1;
  margin: var(--space-7) 0 0;
  padding-bottom: var(--space-3);
  border-bottom: var(--hairline-soft);
}
.group-label:first-child { margin-top: 0; }
.work-intro {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-self: stretch;
  max-width: 42ch;
}
.work-intro__title {
  font-size: var(--text-lg);
  font-style: italic;
  font-weight: var(--weight-regular);
  line-height: var(--leading-snug);
  margin: 0 0 var(--space-4);
}
.work-intro p {
  margin: 0 0 var(--space-4);
  font-style: italic;
  color: var(--ink-soft);
  line-height: var(--leading-prose);
}
.work-intro p:last-child { margin-bottom: 0; }
@media (max-width: 760px) { .work-intro { grid-column: 1 / -1; } }
.work-card {
  break-inside: avoid; display: block;
  color: var(--ink);
}
.work-card:nth-child(3n+1) { transform: rotate(var(--tilt-1)); }
.work-card:nth-child(3n+2) { transform: rotate(var(--tilt-2)); }
.work-card__frame {
  background: var(--paper-bright);
  border: var(--hairline);
  overflow: hidden;
  transition: border-color var(--dur) var(--ease-out-quart);
}
.work-card__frame img { width: 100%; display: block; }
.work-card:hover .work-card__frame { border-color: var(--rose); }
.work-card__cap { margin-top: var(--space-3); }
.work-card__title { font-size: var(--text-md); font-style: italic; line-height: var(--leading-snug); transition: color var(--dur) var(--ease-out-quart); }
.work-card:hover .work-card__title { color: var(--rose); }
.work-card__meta { margin-top: 2px; }
/* text-only (writing) plates in the index */
.work-card--text .work-card__frame { background: var(--paper-deep); border: var(--hairline); padding: var(--space-6); }
.work-card--text .plate-excerpt { font-style: italic; color: var(--ink-soft); white-space: pre-line; line-height: var(--leading-prose); }

/* ---- Work detail ---------------------------------------- */
.detail { margin-top: var(--space-7); }
.detail__back { font-family: var(--font-label); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--ink-faint); display: inline-flex; gap: var(--space-2); align-items: center; }
.detail__back:hover { color: var(--rose); }
.detail__grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: var(--space-8); align-items: start; margin-top: var(--space-6); }
@media (max-width: 760px) { .detail__grid { grid-template-columns: 1fr; gap: var(--space-6); } }
.detail__media { display: grid; gap: var(--space-5); }
.detail__media img { background: var(--paper-bright); border: var(--hairline); width: 100%; }
.detail__title { font-size: var(--text-xl); font-style: italic; font-weight: var(--weight-regular); margin: var(--space-2) 0 var(--space-4); line-height: var(--leading-snug); }
.detail__note { color: var(--ink-soft); max-width: 38ch; }
.detail__poem { margin-top: var(--space-7); white-space: pre-line; font-style: italic; color: var(--ink-soft); line-height: var(--leading-prose); border-top: var(--hairline-soft); padding-top: var(--space-5); }
.detail__nav { display: flex; justify-content: space-between; margin-top: var(--space-9); border-top: var(--hairline-soft); padding-top: var(--space-5); }
.detail__nav a { font-family: var(--font-label); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--ink-faint); }
.detail__nav a:hover { color: var(--rose); }

/* ---- Writing — just the words --------------------------- */
.writing-intro {
  max-width: 52ch;
  margin: var(--space-7) auto var(--space-10);
  text-align: center;
}
.writing-intro__lead {
  font-family: var(--font-name);
  font-style: italic;
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  color: var(--ink);
  margin: 0 0 var(--space-6);
}
.writing-intro p { margin: 0 0 var(--space-5); color: var(--ink-soft); font-style: italic; line-height: var(--leading-prose); }
.writing-intro p:last-child { margin-bottom: 0; }
.poem { margin: 0 auto var(--space-10); max-width: var(--measure-poem); text-align: center; }
.poem__title { font-size: var(--text-lg); font-style: italic; font-weight: var(--weight-regular); margin: 0 0 var(--space-5); }
.poem__body { white-space: pre-line; line-height: var(--leading-loose); color: var(--ink-soft); }

/* ---- About ---------------------------------------------- */
.about__grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: var(--space-8); align-items: start; margin-top: var(--space-6); }
@media (max-width: 760px) { .about__grid { grid-template-columns: 1fr; gap: var(--space-7); } }
.about__portrait { margin: 0; transform: rotate(var(--tilt-3)); }
.about__portrait img { background: var(--paper-bright); border: var(--hairline); filter: saturate(.78); width: 100%; }
.about__portrait figcaption { margin-top: var(--space-3); }
.about__lead { font-size: var(--text-md); font-style: italic; margin: 0 0 var(--space-6); line-height: var(--leading-snug); }
.about__body { max-width: var(--measure-prose); }
.about__body p { margin: 0 0 var(--space-5); color: var(--ink-soft); }
.about__q { margin-top: var(--space-7); font-style: italic; color: var(--ink); border-top: var(--hairline-soft); padding-top: var(--space-5); max-width: var(--measure-prose); }
.about__meta { margin-top: var(--space-7); display: grid; gap: var(--space-2); }

/* ---- Contact -------------------------------------------- */
.contact { padding: var(--space-9) 0; max-width: var(--reading-max); }
.contact__hand { font-family: var(--font-hand); font-size: var(--hand-md); line-height: var(--leading-tight); transform: rotate(var(--tilt-1)); margin: 0 0 var(--space-7); }
.contact__row { margin: 0 0 var(--space-6); }
.contact__row a { font-size: var(--text-md); position: relative; }
.contact__row a:hover { color: var(--rose); }
.contact__note { font-style: italic; color: var(--ink-soft); margin-top: var(--space-7); }

/* ---- Footer --------------------------------------------- */
.footer { border-top: var(--hairline); margin-top: var(--space-9); padding: var(--space-7) 0 var(--space-5); display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-5); flex-wrap: wrap; }
.footer__hand { font-family: var(--font-hand); font-size: var(--text-lg); }
.footer__links { display: flex; gap: var(--space-5); }
.footer a { color: var(--ink-faint); }
.footer a:hover { color: var(--rose); }