/* ============================================================
   Ingrained Friction — shared stylesheet
   Extracted from inline styles in index.html on 2026-06-02.

   URL structure / page layout
   ---------------------------
   /                        home/feed
   /essays/{slug}/          individual essay pages
   /conversations/{slug}/   individual conversation pages
   /portfolio/              gallery page
   /about/                  about page

   Each route is a folder containing index.html. Shared chrome
   (masthead bar with brandmark + nav, footer) is duplicated on
   each page; styles below cover all variants.

   The bench (home feed) shows past artifacts only — essays,
   conversations, and bench notes that stand on their own.
   Forward-looking notes ("what's next" / "coming") live at the
   foot of the current essay or conversation they accompany,
   never in the feed.
   ============================================================ */


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

html, body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  background: #efe9dd;
  color: #2a2622;
  font-family: 'Spectral', Georgia, serif;
  font-size: 17px;
  line-height: 1.65;
  letter-spacing: 0.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow-x: hidden;
}


/* ============ PAPER GRAIN OVERLAY ============ */
/* Sits above everything (including image) at very low opacity, gives the
   whole page a consistent paper-tone wash. */
.grain-overlay {
  position: fixed;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.85' numOctaves='2' seed='3'/%3E%3CfeColorMatrix values='0 0 0 0 0.18 0 0 0 0 0.13 0 0 0 0 0.08 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.4;
  mix-blend-mode: multiply;
}


/* ============ SPLIT LAYOUT ============ */
.page {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 60vh;
  position: relative;
}


/* ============ LEFT: CONTENT ============ */
.content {
  padding: 7vh 4rem 5vh 5rem;
  max-width: 620px;
  margin-left: auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  /* On the home page the headline sits comfortably without filler;
     centering it vertically inside the identity band keeps the empty
     space feeling intentional rather than abandoned. */
  justify-content: center;
}


/* ============ RIGHT: IMAGE ============ */
/* The chisel-and-shavings PNG is the publication's standing visual identity.
   Transparent-edged so we let the paper background show through, framing the
   tool on the bench as it does on the bottom of older drafts of the page.
   Anchored toward the lower portion of the panel so the essay card below
   sits close to the image's bottom edge. */
.image-panel {
  position: relative;
  background-color: #efe9dd;
  background-image: url("../chisel-shavings.png");
  background-size: contain;
  background-position: center 88%;
  background-repeat: no-repeat;
}

/* Soft transition from paper to image on the left edge of the image panel,
   so the seam doesn't read as a hard line */
.image-panel::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 90px;
  background: linear-gradient(to right, #efe9dd 0%, rgba(239, 233, 221, 0.6) 35%, rgba(239, 233, 221, 0) 100%);
  pointer-events: none;
  z-index: 2;
}


/* ============ HEADER ============ */
header {
  margin-bottom: 3.5rem;
}

/* ============ MASTHEAD ============
   Shared top band on every page. Same max-width and padding as the
   reading column so the brandmark + nav appear in the same horizontal
   position on home, portfolio, and the reading pages. Reading pages
   already sit inside .reading-column (880px), so they don't need this
   wrapper — but home and portfolio do, since their main content
   columns are wider. */
.masthead {
  max-width: 880px;
  margin: 0 auto;
  padding: 7vh clamp(1.5rem, 5vw, 4rem) 0;
  width: 100%;
}

/* Masthead bar — brandmark on the left, site nav on the right.
   Sits above the page h1 on every page. */
.site-header-bar {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 2rem;
  margin: 0 0 4rem;
}

.brandmark {
  font-family: 'Spectral', serif;
  font-weight: 400;
  font-style: italic;
  font-size: 30px;
  letter-spacing: 0.005em;
  color: #4a3f33;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  transition: color 180ms ease;
}

.brandmark:hover {
  color: #2a2622;
}

.brandmark::before {
  content: '';
  display: inline-block;
  width: 28px;
  height: 1px;
  background: #8a7960;
  opacity: 0.6;
}

/* Site navigation — small, quiet, IBM Plex Sans small caps.
   Borrows the same color and tracking as .themes-eyebrow for consistency. */
.site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1.6rem;
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.site-nav a {
  color: #8a7960;
  text-decoration: none;
  transition: color 180ms ease;
}

.site-nav a:hover {
  color: #2a2622;
}

.site-nav a[aria-current="page"] {
  color: #2a2622;
}

h1 {
  font-family: 'Spectral', serif;
  font-weight: 300;
  font-size: clamp(34px, 4.2vw, 52px);
  line-height: 1.04;
  letter-spacing: -0.018em;
  color: #1f1c18;
  margin: 0 0 1.5rem;
}

h1 em {
  font-style: italic;
  font-weight: 300;
  color: #6b4a2b;
}

.lede {
  font-family: 'Spectral', serif;
  font-weight: 300;
  font-style: italic;
  font-size: clamp(17px, 1.6vw, 20px);
  line-height: 1.45;
  letter-spacing: 0.005em;
  color: #4a3f33;
  max-width: 36ch;
  margin: 0;
}


/* ============ TOOLS IN USE (paper scraps on the bench) ============ */
.themes {
  margin: 0 0 3rem;
  padding: 2.75rem 0 0;
  border-top: 0.5px solid rgba(74, 63, 51, 0.18);
  position: relative;
}

/* A faint warmer wash beneath the scraps suggests the bench surface
   without drawing a hard rectangle around the section */
.themes::after {
  content: '';
  position: absolute;
  left: -1.5rem;
  right: -1.5rem;
  top: 5rem;
  bottom: 0;
  background: radial-gradient(ellipse at 50% 40%, rgba(107, 90, 69, 0.07) 0%, rgba(107, 90, 69, 0.03) 50%, rgba(107, 90, 69, 0) 80%);
  pointer-events: none;
  z-index: 0;
}

.themes > * { position: relative; z-index: 1; }

.themes-eyebrow {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #8a7960;
  margin: 0 0 2.5rem;
}

.scraps {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.scrap {
  position: relative;
  /* Post-it base color set per-note via nth-child below */
  padding: 1.6rem 1.4rem 1.6rem;
  font-family: 'Caveat', cursive;
  font-weight: 400;
  font-style: normal;
  font-size: 24px;
  line-height: 1.15;
  letter-spacing: 0.005em;
  color: #4a4540;
  /* Slight shadow plus a sharper edge shadow on the bottom-right where
     the post-it curls up; gives a real sticky-note lift */
  box-shadow:
    0 1px 0 rgba(74, 63, 51, 0.06),
    2px 3px 6px rgba(74, 63, 51, 0.12),
    8px 10px 18px rgba(74, 63, 51, 0.06);
  /* Dirt and dust speckle overlay; same SVG noise idea as the page grain
     but darker, applied only to the note itself so it reads as accumulated
     workshop residue on the paper rather than a global texture */
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='160'%3E%3Cfilter id='d'%3E%3CfeTurbulence baseFrequency='1.4' numOctaves='1' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0.25 0 0 0 0 0.2 0 0 0 0 0.13 0 0 0 0.18 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23d)'/%3E%3C/svg%3E");
  background-blend-mode: multiply;
  background-size: 100% 100%;
}

/* Each post-it gets its own base color (set with background-color so the
   speckle layer above stays consistent) and a faint smudge or fingerprint
   in a random corner via a radial gradient pseudo-element */

.scrap-wrap:nth-child(1) .scrap {
  background-color: #e8d97b; /* faded canary yellow */
}
.scrap-wrap:nth-child(2) .scrap {
  background-color: #c9d4c2; /* dusty pale green */
}
.scrap-wrap:nth-child(3) .scrap {
  background-color: #e6d57a; /* slightly warmer faded yellow */
}
.scrap-wrap:nth-child(4) .scrap {
  background-color: #c8c5b4; /* aged off-white / dirty cream */
}

/* The curled corner: a subtle inner highlight + a darker fold line at the
   bottom-right of each note, so they read as physically lifting off the bench */
.scrap::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  width: 22px;
  height: 22px;
  background: linear-gradient(135deg, transparent 50%, rgba(74, 63, 51, 0.12) 50%, rgba(74, 63, 51, 0.18) 60%, rgba(74, 63, 51, 0.06) 100%);
  pointer-events: none;
}

/* A subtle smudge: different position per note, applied via ::before */
.scrap::before {
  content: '';
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(74, 63, 51, 0.14) 0%, rgba(74, 63, 51, 0.06) 40%, rgba(74, 63, 51, 0) 75%);
  mix-blend-mode: multiply;
}

.scrap-wrap:nth-child(1) .scrap::before {
  top: 8px; left: 10px; width: 38px; height: 18px; transform: rotate(-12deg);
}
.scrap-wrap:nth-child(2) .scrap::before {
  bottom: 10px; left: 25%; width: 56px; height: 22px; transform: rotate(8deg);
}
.scrap-wrap:nth-child(3) .scrap::before {
  top: 50%; right: 18%; width: 30px; height: 30px; opacity: 0.7;
}
.scrap-wrap:nth-child(4) .scrap::before {
  bottom: 20%; left: 12%; width: 44px; height: 16px; transform: rotate(-18deg);
}

.scrap-wrap {
  position: relative;
  display: block;
  list-style: none;
}

/* Per-scrap rotation and slight horizontal offset, hand-placed feel */
.scrap-wrap:nth-child(1) { transform: rotate(-0.6deg) translateX(-3px); }
.scrap-wrap:nth-child(2) { transform: rotate(0.5deg) translateX(8px); }
.scrap-wrap:nth-child(3) { transform: rotate(-0.3deg) translateX(-1px); }
.scrap-wrap:nth-child(4) { transform: rotate(0.7deg) translateX(5px); }


/* ============ PENCIL / CHISEL BENCH IMAGE ============ */
/* Chisel-and-shavings photograph (background removed). Sits in the content
   flow directly below the post-it notes. The image is right-aligned so its
   right edge matches the right edge of the post-it column, and the chisel
   extends leftward off the page; .page's overflow-x: hidden clips it
   cleanly at the page edge. */
.pencil-bench {
  position: relative;
  margin: 2rem 0 0;
  display: flex;
  justify-content: flex-end;
  pointer-events: none;
}

.pencil-bench-img {
  display: block;
  height: auto;
  max-width: none;
  /* Width is set explicitly; the image will extend leftward past the
     content column when this exceeds the column width. */
  width: 36rem;
  pointer-events: none;
  /* Soft drop shadow to ground the chisel on the bench surface. Two layers:
     a tight close shadow for crispness, and a wider diffuse one for depth. */
  filter:
    drop-shadow(0 2px 3px rgba(31, 28, 24, 0.18))
    drop-shadow(0 8px 18px rgba(31, 28, 24, 0.12));
}

.scrap-text {
  margin: 0;
}


/* ============ STATUS NOTE ============ */
.status {
  margin: 0 0 0;
  padding: 1.5rem 0 0;
  border-top: 0.5px solid rgba(74, 63, 51, 0.18);
  font-family: 'Spectral', serif;
  font-style: italic;
  font-size: 15px;
  color: #6b5a45;
  line-height: 1.55;
}

.status-hand {
  font-family: 'Caveat', cursive;
  font-size: 19px;
  color: #6b4a2b;
  font-style: normal;
  margin-left: 0.4rem;
  display: inline-block;
  transform: rotate(-0.8deg);
}


/* ============ FOOTER ============ */
footer {
  margin-top: auto;
  padding-top: 4rem;
  padding-bottom: 5vh;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: #4a3f33;
}

/* When the footer is a direct child of <body> (home page), it needs its
   own column width and horizontal padding so it doesn't flush to the
   viewport edge. Inside the reading column on essay pages the column
   already supplies the padding, so this rule doesn't apply there. */
body > footer {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  padding-left: clamp(1.5rem, 5vw, 4rem);
  padding-right: clamp(1.5rem, 5vw, 4rem);
  width: 100%;
}

.footer-name {
  font-family: 'Spectral', serif;
  font-weight: 400;
  font-style: italic;
  font-size: 15px;
  letter-spacing: 0;
  color: #2a2622;
  margin: 0;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  margin-top: 0.25rem;
}

.footer-links a {
  color: #6b4a2b;
  text-decoration: none;
  border-bottom: 0.5px solid rgba(107, 74, 43, 0.35);
  padding-bottom: 1px;
  transition: border-color 180ms ease, color 180ms ease;
}

.footer-links a:hover {
  color: #2a2622;
  border-bottom-color: #2a2622;
}

.footer-meta {
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #a89880;
  margin-top: 1.25rem;
}


/* ============ RESPONSIVE ============ */

/* Tablet: narrow the gap, reduce padding */
@media (max-width: 1100px) {
  .content {
    padding: 6vh 3rem 4vh 3.5rem;
  }
}

/* Mobile: stack. Image becomes a horizontal band at top. */
@media (max-width: 760px) {
  .page {
    display: block;
    min-height: auto;
  }

  .image-panel {
    display: block;
    width: 100%;
    height: 38vh;
    min-height: 280px;
    background-position: center 40%;
  }

  /* Flip the soft edge to the bottom instead of the left */
  .image-panel::before {
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 60px;
    background: linear-gradient(to top, #efe9dd 0%, rgba(239, 233, 221, 0.4) 50%, rgba(239, 233, 221, 0) 100%);
  }

  /* Put the image-panel above the content on mobile by re-ordering with flex
     on the parent. The .page becomes a flex column so we can use order. */
  .page {
    display: flex;
    flex-direction: column;
  }
  .image-panel { order: 1; }
  .content { order: 2; }

  .content {
    padding: 4vh 1.75rem 3vh;
    max-width: 100%;
    margin-left: 0;
    width: 100%;
  }

  header {
    margin-bottom: 3rem;
  }

  /* On narrow screens, stack brandmark above the nav and tighten spacing. */
  .site-header-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
    margin-bottom: 2.5rem;
  }

  .site-nav {
    gap: 1.25rem;
  }

  .themes {
    margin-bottom: 2.5rem;
    padding-top: 2.5rem;
  }

  .scraps {
    gap: 1.25rem;
  }

  .scrap {
    padding: 1.3rem 1.1rem 1.3rem;
    font-size: 22px;
  }

  /* Reduce per-scrap offsets on narrow screens so nothing escapes the column */
  .scrap-wrap:nth-child(1) { transform: rotate(-0.5deg) translateX(0); }
  .scrap-wrap:nth-child(2) { transform: rotate(0.4deg) translateX(4px); }
  .scrap-wrap:nth-child(3) { transform: rotate(-0.3deg) translateX(0); }
  .scrap-wrap:nth-child(4) { transform: rotate(0.5deg) translateX(2px); }

  .pencil-bench {
    margin-top: 1.5rem;
  }

  .pencil-bench-img {
    width: 22rem;
  }

  footer {
    padding-top: 3rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}


/* ============================================================
   ESSAY / READING PAGE
   ============================================================
   Single-column reading flow — no split-layout. Used for
   essays (and later conversations). The masthead bar + footer
   are the same shared chrome as the home page; the body
   between is a focused reading column.
   ============================================================ */

.reading-page {
  display: block;
  min-height: auto;
}

.reading-column {
  max-width: 880px;
  margin: 0 auto;
  padding: 7vh clamp(1.5rem, 5vw, 4rem) 5vh;
  display: flex;
  flex-direction: column;
}

/* Quiet "back to feed" affordance at the top of the reading column,
   above the essay title. Sits in the same place that breadcrumbs would. */
.back-link {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #8a7960;
  text-decoration: none;
  margin: 0 0 4rem;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  transition: color 180ms ease;
}

.back-link::before {
  content: '\2190';                         /* ← arrow */
  font-size: 13px;
  letter-spacing: 0;
}

.back-link:hover {
  color: #2a2622;
}

/* Essay title: similar weight to home h1 but slightly smaller so the body
   has room to breathe afterward. */
.essay-title {
  font-family: 'Spectral', serif;
  font-weight: 300;
  font-size: clamp(32px, 4vw, 48px);
  line-height: 1.05;
  letter-spacing: -0.012em;
  color: #1f1c18;
  margin: 0 0 1.2rem;
  max-width: 22ch;
}

.essay-title em {
  font-style: italic;
  font-weight: 300;
  color: #6b4a2b;
}

/* Eyebrow above the title — same register as the themes/site-nav eyebrows */
.essay-eyebrow {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #8a7960;
  margin: 0 0 1.6rem;
}

/* Reading body — Spectral, generous measure, comfortable line height.
   Target reading width ~65-70ch for long-form prose. */
.essay-body {
  margin: 3.5rem 0 0;
  max-width: 64ch;
  font-family: 'Spectral', serif;
  font-weight: 400;
  font-size: clamp(17px, 1.18vw, 19px);
  line-height: 1.78;
  letter-spacing: 0.003em;
  color: #2a2622;
  /* Positioning context + new stacking context for an optional
     .piece-backdrop child (see .feed for the same pattern). */
  position: relative;
  isolation: isolate;
}

.essay-body p {
  margin: 0 0 1.6em;
}

.essay-body p:last-child {
  margin-bottom: 0;
}

.essay-body em {
  font-style: italic;
}

/* Inline links inside reading-body prose. Quiet sage-brown with a thin
   underline; deepens to ink on hover. No color flash interrupting the read. */
.essay-body a {
  color: #6b4a2b;
  text-decoration: none;
  border-bottom: 0.5px solid rgba(107, 74, 43, 0.4);
  padding-bottom: 1px;
  transition: color 180ms ease, border-color 180ms ease;
}

.essay-body a:hover {
  color: #2a2622;
  border-bottom-color: #2a2622;
}

/* A simple horizontal rule used as section break inside the essay
   (corresponds to the --- separators in the source). Quiet sage line. */
.essay-rule {
  border: 0;
  width: 4rem;
  height: 1px;
  background: #b8a888;
  opacity: 0.6;
  margin: 2.6em auto;
}

/* Subhead for sections inside an About / standing page. Quiet serif italic,
   spaced from the surrounding paragraphs. */
.about-section {
  font-family: 'Spectral', serif;
  font-weight: 400;
  font-style: italic;
  font-size: clamp(20px, 1.7vw, 26px);
  line-height: 1.2;
  letter-spacing: -0.005em;
  color: #6b4a2b;
  margin: 3em 0 1em;
}

.essay-body > .about-section:first-child {
  margin-top: 0;
}

/* About-page closing pledge — the mission statement after the body and
   horizontal rule. Slightly larger than body text, serif italic, sage-brown,
   sized to feel like a quiet declaration without performing. */
.about-pledge {
  font-family: 'Spectral', serif;
  font-weight: 400;
  font-style: italic;
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.45;
  letter-spacing: -0.005em;
  color: #6b4a2b;
  margin-top: 2.4em;
  margin-bottom: 0;
  max-width: 56ch;
}

/* Small definitional line at the very end of the About page. Functions
   as a quiet tag explaining the bench-note artifact type. */
.about-coda {
  font-family: 'Spectral', serif;
  font-style: normal;
  font-weight: 400;
  font-size: clamp(17px, 1.18vw, 19px);
  line-height: 1.78;
  letter-spacing: 0.003em;
  color: #2a2622;
  margin-top: 2.6em;
  margin-bottom: 0;
  max-width: 64ch;
  opacity: 1;
}


/* ============================================================
   CONVERSATION PAGE
   ============================================================
   Mirrors the essay reading layout. The video embed wrapper is
   provider-agnostic: drop in a Vimeo iframe, Mux player, Cloudflare
   Stream iframe, or self-hosted <video> tag — the wrapper handles
   aspect ratio, fill, shadow, and the dark fallback while loading.
   ============================================================ */

/* Slightly tighter top margin for the intro paragraphs since the title
   already provides breathing room and the video should land sooner. */
.conversation-intro {
  margin-top: 2.5rem;
}

/* 16:9 wrapper with dark warm fallback. Provider embeds (iframe,
   mux-player, video) absolutely fill the wrapper. */
.conversation-video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin: 3.5rem 0 1.4rem;
  background: #1f1c18;
  border-radius: 2px;
  overflow: hidden;
  box-shadow:
    0 1px 2px rgba(31, 28, 24, 0.10),
    0 14px 40px rgba(31, 28, 24, 0.18);
}

.conversation-video iframe,
.conversation-video video,
.conversation-video mux-player {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* Quiet "video coming soon" state for the template before a real embed
   is wired in. Two-line treatment: serif italic top line, IBM Plex Sans
   small-caps subline. Both rendered on the dark wrapper. */
.conversation-video-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  text-align: center;
  padding: 1rem;
  color: rgba(245, 240, 232, 0.5);
}

.conversation-video-placeholder p {
  margin: 0;
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.conversation-video-placeholder p:first-child {
  font-family: 'Spectral', serif;
  font-style: italic;
  font-weight: 300;
  font-size: clamp(20px, 2.2vw, 28px);
  letter-spacing: 0.005em;
  text-transform: none;
  color: rgba(245, 240, 232, 0.72);
}

.conversation-video-meta {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #8a7960;
  margin: 0 0 3rem;
}

/* Chapters — quiet list with timecode + label. Optional, used when
   the recorded conversation has clear chapter breakpoints. */
.conversation-chapters {
  margin: 3rem 0;
}

.chapter-list {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.chapter {
  display: flex;
  gap: 1.4rem;
  align-items: baseline;
  font-family: 'Spectral', serif;
  font-size: 16px;
  line-height: 1.5;
  color: #2a2622;
  padding: 0.45rem 0;
  border-bottom: 0.5px solid rgba(74, 63, 51, 0.12);
}

.chapter-time {
  font-family: 'Courier Prime', 'Courier New', monospace;
  font-size: 13px;
  font-weight: 400;
  color: #6b4a2b;
  flex: 0 0 auto;
  min-width: 4.2rem;
}

.chapter-label {
  font-style: italic;
  color: #4a3f33;
}


/* ============================================================
   END-OF-ESSAY IMAGE CLUSTER
   ============================================================
   Lives after the body, treats the physical object with weight
   without becoming a gallery. Hero image breaks slightly outside
   the reading column; two detail shots sit below in a 1:1 grid.
   Recall-oriented per Q4 — no contextual image placement during
   the reading itself.
   ============================================================ */

.essay-cluster {
  margin: 5rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 880px;
}

.essay-cluster figure {
  margin: 0;
}

.essay-cluster img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 2px;
  box-shadow:
    0 1px 2px rgba(31, 28, 24, 0.08),
    0 8px 28px rgba(31, 28, 24, 0.12);
}

.essay-cluster figcaption {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #8a7960;
  margin-top: 0.9rem;
}

.essay-cluster-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

/* Equalize the two tiles beneath the hero. Frame matches the box-full image's
   native 15:8 ratio so the full box is visible with no crop. The cleft image
   is the wrong shape for that frame and gets cropped top and bottom — focal
   point biased downward so the cleft itself stays visible. */
.essay-cluster-row figure {
  aspect-ratio: 15 / 8;
  overflow: hidden;
  border-radius: 2px;
}

.essay-cluster-row img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 65%;
}


/* ============================================================
   MARGINALIA — quiet uncaptioned piece images placed as visual
   rest beats between sections. No label, no link, no header
   treatment; they just sit on the page like a pasted polaroid.
   Reuse the existing 1000×1000 letterboxed thumbs (their paper-
   color background blends with the page so no visible frame).
   ============================================================ */

.marginalia-piece {
  display: block;
  width: 100%;
  max-width: 180px;
  height: auto;
  margin: 5rem auto;
  border-radius: 2px;
  transform: rotate(-1.5deg);
  box-shadow:
    0 1px 2px rgba(31, 28, 24, 0.08),
    0 8px 28px rgba(31, 28, 24, 0.12);
}

/* Polaroid frame — small white-bordered photo with a thicker bottom
   margin (the classic instant-photo look). Used to set a piece beside
   a bench note as if pinned or tossed onto the bench. */
.polaroid-piece {
  margin: 0;
  padding: 12px 12px 36px;
  background: #fdfaf2;
  border-radius: 2px;
  transform: rotate(2.5deg);
  box-shadow:
    0 1px 2px rgba(31, 28, 24, 0.10),
    0 12px 32px rgba(31, 28, 24, 0.14);
}

.polaroid-piece img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 1px;
}

/* Bench-note row — note on the left, polaroid floats off to the right.
   The polaroid extends slightly beyond the reading column so it feels
   pinned to the bench rather than aligned with the body text. */
.bench-note-row {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  margin-top: 6rem;
}

.bench-note-row .bench-note {
  flex: 1 1 auto;
  margin-top: 0;
}

.bench-note-row .polaroid-piece {
  flex: 0 0 280px;
  margin: 0 -3rem 0 0;
}

/* Polaroid inside an essay-body — floats off to the right and pulls
   up slightly so it straddles the gap between two paragraphs. Slight
   counter-rotation from the bench-note polaroid so a reader passing
   through both pages doesn't see the same tilt twice. */
.polaroid-about {
  float: right;
  width: 220px;
  /* Negative top pulls the photo up into the previous paragraph; the
     negative right nudges it slightly past the reading column edge so
     it feels pinned beside the text rather than aligned to it. */
  margin: -2rem -2.5rem 1.5rem 2rem;
  transform: rotate(2deg);
}

@media (max-width: 760px) {
  .polaroid-about {
    /* On narrow screens, float looks cramped — drop back to centered
       between paragraphs at a smaller size. */
    float: none;
    width: 64%;
    max-width: 220px;
    margin: 2.5rem auto;
    transform: rotate(-2deg);
  }
}


/* ============================================================
   PIECE BACKDROP — a large transparent piece sitting behind a
   section's content as part of the page substrate. Text reads over
   it. mix-blend-mode: multiply lets dark wood grain show through
   while light areas blend into the paper color, so the piece feels
   printed into the page rather than floating on top of it. The
   parent (.feed, .essay-body, etc.) must have position: relative
   for the absolute backdrop to position correctly, and its content
   children need z-index: 1 to layer above.
   ============================================================ */

.piece-backdrop {
  position: absolute;
  top: 0;
  left: 50%;
  width: 100vw;
  /* Extend below the parent so the piece bleeds into the footer area
     instead of stopping at the end of the article/feed. Absolute
     positioning so this doesn't push the footer down — the backdrop
     just paints (at z-index -1) into the footer's space. */
  height: calc(100% + 280px);
  margin-left: -50vw;
  overflow: hidden;
  pointer-events: none;
  z-index: -1;
  /* Soft fade at the top so the piece dissolves into the section
     above. No bottom fade — the piece runs out cleanly into the
     footer, then gets clipped by the backdrop's height. */
  mask-image: linear-gradient(to bottom,
    transparent 0%,
    black 12%,
    black 100%);
  -webkit-mask-image: linear-gradient(to bottom,
    transparent 0%,
    black 12%,
    black 100%);
}

.piece-backdrop img {
  position: absolute;
  /* Sized so the image always exceeds the viewport horizontally and
     bleeds off both edges. With overflow: hidden on the backdrop, this
     means visitors only ever see a section of the piece, never the whole
     thing — which is the editorial point. */
  width: clamp(1400px, 150vw, 2600px);
  height: auto;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.28;
  mix-blend-mode: multiply;
}

/* Per-piece position tweaks. The pear bowl image's subject sits high in
   the frame (the bowl rim is in the upper portion), so we anchor it lower
   within the backdrop to push the visible section further down. */
.piece-backdrop img[src*="pear-bowl"] {
  top: 75%;
}

/* The taste-and-serve spoon has its large serving bowl on the right
   (the small tasting probe is at the tip of the handle on the left).
   Anchoring the image's right edge to the viewport's right edge keeps
   the serving bowl in view while the handle bleeds off the left. */
.piece-backdrop img[src*="taste-and-serve-spoon"] {
  left: auto;
  right: 0;
  top: 75%;
  transform: translateY(-50%);
}

@media (max-width: 760px) {
  .piece-backdrop img {
    width: clamp(700px, 180vw, 1200px);
    opacity: 0.22;
  }
}


/* ============================================================
   "SEE MORE WORK" — quiet portfolio link below the cluster
   ============================================================ */

.work-link {
  margin: 3rem 0 0;
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.work-link a {
  color: #6b4a2b;
  text-decoration: none;
  border-bottom: 0.5px solid rgba(107, 74, 43, 0.35);
  padding-bottom: 1px;
  transition: color 180ms ease, border-color 180ms ease;
}

.work-link a:hover {
  color: #2a2622;
  border-bottom-color: #2a2622;
}


/* ============================================================
   BENCH NOTE — paper-note element
   ============================================================
   Typeset, not handwritten. Courier Prime (Underwood-style
   typewriter face) on a slightly warmer paper than the page,
   faint dust speckle, gentle shadow, micro-rotation. Used at
   the foot of essay/conversation pages AND as a stand-alone
   feed item on the home page.
   ============================================================ */

.bench-note {
  position: relative;
  margin: 6rem 0 0;
  padding: 2.8rem 2.4rem 2.6rem;
  max-width: 64ch;
  background-color: #f3ead8;          /* cream/buff, slightly warmer than --paper */
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='240'%3E%3Cfilter id='b'%3E%3CfeTurbulence baseFrequency='1.1' numOctaves='1' seed='12'/%3E%3CfeColorMatrix values='0 0 0 0 0.32 0 0 0 0 0.26 0 0 0 0 0.18 0 0 0 0.08 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23b)'/%3E%3C/svg%3E");
  background-blend-mode: multiply;
  background-size: 100% 100%;
  transform: rotate(-0.4deg);
  box-shadow:
    0 1px 0 rgba(74, 63, 51, 0.06),
    1px 2px 4px rgba(74, 63, 51, 0.08),
    4px 6px 14px rgba(74, 63, 51, 0.06);
  color: #2a2622;
}

.bench-note-eyebrow {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #8a7960;
  margin: 0 0 0.6rem;
}

.bench-note-date {
  font-family: 'Courier Prime', 'Courier New', monospace;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: #4a4540;
  margin: 0 0 1.6rem;
  display: inline-block;
  transform: rotate(0.6deg);            /* slight typewriter slip */
}

.bench-note-body {
  font-family: 'Courier Prime', 'Courier New', monospace;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: 0.005em;
  color: #2a2622;
  margin: 0;
}

.bench-note-body p {
  margin: 0 0 1.2em;
}

.bench-note-body p:last-child {
  margin-bottom: 0;
}


/* ============================================================
   READING-PAGE RESPONSIVE
   ============================================================ */

@media (max-width: 760px) {
  .reading-column {
    padding: 4vh 1.5rem 3vh;
  }

  .back-link {
    margin-bottom: 2.5rem;
  }

  .essay-body {
    margin-top: 2.5rem;
  }

  .essay-cluster {
    margin-top: 3rem;
  }

  .essay-cluster-row {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  .marginalia-piece {
    max-width: 140px;
    margin: 3.5rem auto;
  }

  .work-link {
    margin-top: 2rem;
  }

  .bench-note {
    margin-top: 4rem;
    padding: 2rem 1.6rem 1.8rem;
  }

  .bench-note-row {
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    margin-top: 4rem;
  }

  .bench-note-row .bench-note {
    width: 100%;
  }

  .bench-note-row .polaroid-piece {
    flex: 0 0 auto;
    width: 70%;
    max-width: 240px;
    margin: 0;
    transform: rotate(-2deg);
  }
}


/* ============================================================
   THE BENCH (home feed)
   ============================================================
   Single-column reading flow below the identity band. Holds
   essay cards, bench-note feed items, and (later) conversation
   cards. Generous vertical gap between items so the publication
   doesn't feel crowded.
   ============================================================ */

.feed {
  max-width: 720px;
  margin: 0 auto;
  padding: 2.5vh clamp(1.5rem, 5vw, 4rem) 5vh;
  display: flex;
  flex-direction: column;
  gap: 6rem;
  /* Positioning context + new stacking context for an optional
     .piece-backdrop child. isolation: isolate lets us send the backdrop
     to z-index: -1 without it dropping behind the page background. */
  position: relative;
  isolation: isolate;
}

.feed-item {
  margin: 0;
  padding: 0;
}

/* Eyebrow on every feed item: type label + date in IBM Plex Sans small caps.
   Same register as the navigation and section eyebrows elsewhere. */
.feed-eyebrow {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #8a7960;
  margin: 0 0 1.4rem;
}


/* ---- Essay card ---- */

.feed-essay-title {
  font-family: 'Spectral', serif;
  font-weight: 300;
  font-size: clamp(28px, 3.4vw, 40px);
  line-height: 1.08;
  letter-spacing: -0.012em;
  color: #1f1c18;
  margin: 0 0 1.6rem;
  max-width: 22ch;
}

.feed-essay-title em {
  font-style: italic;
  font-weight: 300;
  color: #6b4a2b;
}

.feed-essay-title a {
  color: inherit;
  text-decoration: none;
  transition: color 180ms ease;
}

.feed-essay-title a:hover {
  color: #6b4a2b;
}

.feed-essay-excerpt {
  font-family: 'Spectral', serif;
  font-weight: 400;
  font-size: clamp(16px, 1.1vw, 18px);
  line-height: 1.72;
  letter-spacing: 0.003em;
  color: #2a2622;
  max-width: 62ch;
  margin: 0 0 1.8rem;
}

.feed-essay-link {
  margin: 0;
}

.feed-read-more {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #6b4a2b;
  text-decoration: none;
  border-bottom: 0.5px solid rgba(107, 74, 43, 0.35);
  padding-bottom: 1px;
  transition: color 180ms ease, border-color 180ms ease;
}

.feed-read-more:hover {
  color: #2a2622;
  border-bottom-color: #2a2622;
}


/* ---- Bench-note feed item ---- */
/* Reuses the .bench-note paper-note styles from earlier. Just removes
   the top-margin (the feed gap handles spacing) and varies rotation
   slightly between items so multiple notes don't read as identical. */

.feed-item-note .bench-note {
  margin-top: 0;
}

.feed-item-note:nth-of-type(even) .bench-note {
  transform: rotate(0.5deg);
}


/* Mobile rules for the feed */
@media (max-width: 760px) {
  .feed {
    padding: 5vh 1.5rem 4vh;
    gap: 4rem;
  }
}


/* ============================================================
   PORTFOLIO PAGE
   ============================================================
   Gallery layout — hero feature at top, thumbnail grid below.
   Click a thumb to swap the hero image and caption.
   ============================================================ */

.portfolio-page header {
  margin-bottom: 0;
}

.portfolio-header {
  max-width: 880px;
  margin: 0 auto;
  padding: 7vh clamp(1.5rem, 5vw, 4rem) 0;
  width: 100%;
}

.portfolio {
  max-width: 880px;
  margin: 0 auto;
  padding: 3.5rem clamp(1.5rem, 5vw, 4rem) 5vh;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.portfolio-lede {
  font-family: 'Spectral', serif;
  font-weight: 300;
  font-style: italic;
  font-size: clamp(17px, 1.4vw, 19px);
  line-height: 1.55;
  color: #4a3f33;
  max-width: 52ch;
  margin: 1.6rem 0 0;
}

/* Hero / featured piece */
.portfolio-hero {
  margin: 4rem 0 3.5rem;
}

#portfolio-hero-image {
  width: 100%;
  height: auto;
  max-height: 70vh;
  object-fit: cover;
  display: block;
  border-radius: 2px;
  box-shadow:
    0 1px 2px rgba(31, 28, 24, 0.08),
    0 12px 36px rgba(31, 28, 24, 0.14);
  transition: opacity 240ms ease;
}

.portfolio-hero-caption {
  margin-top: 1.5rem;
  font-family: 'Spectral', serif;
  color: #2a2622;
}

/* Short line: the wood / opening phrase from the sidecar. Italic serif,
   same tone as the prior single-line caption. */
.portfolio-hero-short {
  display: block;
  font-weight: 400;
  font-style: italic;
  font-size: clamp(17px, 1.4vw, 20px);
  line-height: 1.55;
}

/* Long line: the descriptive paragraph below. Upright serif, softer color,
   slightly smaller, with a touch of breathing room above. */
.portfolio-hero-long {
  display: block;
  margin-top: 0.4rem;
  font-weight: 400;
  font-style: normal;
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.6;
  color: #4a3f33;
  max-width: 56ch;
}

.portfolio-essay-link {
  display: inline-block;
  margin-top: 0.9rem;
  font-family: 'IBM Plex Sans', sans-serif;
  font-style: normal;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #6b4a2b;
  text-decoration: none;
  border-bottom: 0.5px solid rgba(107, 74, 43, 0.35);
  padding-bottom: 1px;
  transition: color 180ms ease, border-color 180ms ease;
  display: inline-block;
  vertical-align: middle;
}

.portfolio-essay-link:hover {
  color: #2a2622;
  border-bottom-color: #2a2622;
}

/* Thumbnail grid — 4 across on desktop, drops to 3 then 2 on narrower viewports. */
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.6rem;
  margin-top: 1rem;
}

.portfolio-thumb {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  font-family: inherit;
  color: inherit;
  text-align: left;
  display: flex;
  flex-direction: column;
  transition: opacity 180ms ease, transform 180ms ease;
}

.portfolio-thumb:hover {
  opacity: 0.88;
  transform: translateY(-2px);
}

.portfolio-thumb img {
  width: 100%;
  aspect-ratio: 1;
  height: auto;
  object-fit: cover;
  display: block;
  border-radius: 2px;
  box-shadow:
    0 1px 2px rgba(31, 28, 24, 0.06),
    0 6px 14px rgba(31, 28, 24, 0.08);
  transition: box-shadow 200ms ease, filter 200ms ease;
}

.portfolio-thumb.is-active img {
  box-shadow:
    0 0 0 2px #6b4a2b,
    0 1px 2px rgba(31, 28, 24, 0.06),
    0 6px 14px rgba(31, 28, 24, 0.10);
}

.portfolio-thumb.is-active .portfolio-thumb-caption {
  color: #2a2622;
}

.portfolio-thumb-caption {
  display: block;
  margin-top: 0.7rem;
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #6b5a45;
  transition: color 180ms ease;
}

.portfolio-thumb:hover .portfolio-thumb-caption {
  color: #2a2622;
}

/* Trailing-shavings signal at the end of the grid. Three real wood shavings
   on transparent backgrounds, sized down and arranged in a row inside one
   grid slot. Each one gently bobs and rotates on its own slow loop,
   staggered so they read as having just settled — like the bench is
   still in use. */
.portfolio-thumb-trail {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
}

.trail-shaving {
  display: block;
  height: auto;
  filter: drop-shadow(0 2px 3px rgba(31, 28, 24, 0.18));
}

/* Each shaving has its own keyframe with the same 12-second cycle so they
   loop in unison. Within that cycle, each shaving is hidden above the tile
   until its turn, falls into rest with a slight rotation, holds at rest
   until all three have landed and rested together, then all three fade
   and the cycle restarts. */
.trail-shaving-1 {
  width: 28px;
  animation: trail-fall-1 6s ease-in infinite;
}

.trail-shaving-2 {
  width: 24px;
  animation: trail-fall-2 6s ease-in infinite;
}

.trail-shaving-3 {
  width: 18px;
  animation: trail-fall-3 6s ease-in infinite;
}

/* 6-second cycle: all three shavings drop in over ~1.7s, hold briefly,
   fade together, then a ~3-second empty pause before the sequence loops.
   Percentages: fall sequence 0–28%, rest 28–42%, fade 42–50%,
   empty 50–100%. */
@keyframes trail-fall-1 {
  0%   { opacity: 0; transform: translateY(-28px) rotate(-22deg); }
  8%   { opacity: 1; transform: translateY(0) rotate(0deg); }
  42%  { opacity: 1; transform: translateY(0) rotate(0deg); }
  50%  { opacity: 0; transform: translateY(0) rotate(0deg); }
  100% { opacity: 0; transform: translateY(-28px) rotate(-22deg); }
}

@keyframes trail-fall-2 {
  0%   { opacity: 0; transform: translateY(-28px) rotate(18deg); }
  10%  { opacity: 0; transform: translateY(-28px) rotate(18deg); }
  18%  { opacity: 1; transform: translateY(0) rotate(0deg); }
  42%  { opacity: 1; transform: translateY(0) rotate(0deg); }
  50%  { opacity: 0; transform: translateY(0) rotate(0deg); }
  100% { opacity: 0; transform: translateY(-28px) rotate(18deg); }
}

@keyframes trail-fall-3 {
  0%   { opacity: 0; transform: translateY(-28px) rotate(-12deg); }
  20%  { opacity: 0; transform: translateY(-28px) rotate(-12deg); }
  28%  { opacity: 1; transform: translateY(0) rotate(0deg); }
  42%  { opacity: 1; transform: translateY(0) rotate(0deg); }
  50%  { opacity: 0; transform: translateY(0) rotate(0deg); }
  100% { opacity: 0; transform: translateY(-28px) rotate(-12deg); }
}

@media (prefers-reduced-motion: reduce) {
  .trail-shaving {
    animation: none !important;
  }
}

/* Responsive */
@media (max-width: 960px) {
  .portfolio-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 640px) {
  .portfolio-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.2rem;
  }
  .portfolio-header {
    padding: 4vh 1.5rem 0;
  }
  .portfolio {
    padding: 2.5rem 1.5rem 4vh;
  }
  .portfolio-hero {
    margin: 3rem 0 2.5rem;
  }
  #portfolio-hero-image {
    max-height: 55vh;
  }
}