/* ==========================================================
   GASTON SHUTTERS — shared stylesheet
   Edit colour, measure and type here; every page follows.
   ========================================================== */

:root {
  --paper:  #f4f4f1;   /* page ground           */
  --ink:    #121314;   /* headlines, rows       */
  --mute:   #5e615b;   /* labels, secondary     */
  --line:   #dcdcd4;   /* hairlines             */
  --blue:   #121314;   /* "accent" = ink. the site is black and white;
                          colour belongs to the photographs only. */
  --on-img: #f6f6f3;   /* type over the image   */
  --blue-img: #f6f6f3; /* over the image        */

  --measure: 1180px;
  --read: 62ch;        /* article measure       */
  --gutter: clamp(20px, 5vw, 40px);

  --sans: "Helvetica Neue", Helvetica, Arial, "Segoe UI", system-ui, sans-serif;
  /* label face: the same grotesque as everything else, set small and
     letter-spaced. (Was monospace; monospace read as too small and too faint.) */
  --mono: "Helvetica Neue", Helvetica, Arial, "Segoe UI", system-ui, sans-serif;
}

/* Dark counterpart — delete this block to stay on paper always. */
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #101110;
    --ink:   #f1f1ec;
    --mute:  #a9aba3;
    --line:  #2b2d29;
    --blue:  #f1f1ec;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

a { color: inherit; }
a:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

img { max-width: 100%; }

.wrap {
  width: 100%;
  max-width: var(--measure);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

/* ---------- masthead ---------- */

.top {
  font-weight: 500;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding-block: clamp(18px, 3vw, 26px);
  font-family: var(--mono);
  font-size: clamp(14px, 2.8vw, 16px);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.top .role { text-align: right; }
.top nav { display: flex; gap: clamp(14px, 3vw, 24px); }
.top nav a { text-decoration: none; color: var(--mute); transition: color .16s ease; }
.top nav a:hover, .top nav a[aria-current="page"] { color: var(--ink); }

/* masthead on an inner (paper) page carries a rule */
.top--inner { border-bottom: 1px solid var(--line); color: var(--mute); }
.top--inner .home { text-decoration: none; color: var(--ink); }

/* ---------- hero (home only) ---------- */

.hero {
  position: relative;
  isolation: isolate;
  z-index: 0;
  min-height: 560px;
  height: 88vh;
  height: 88svh;
  max-height: 860px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: #101010;
  overflow: hidden;
}
.hero-media { position: absolute; inset: 0; z-index: -2; }
.hero-media canvas,
.hero-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 34%;   /* keeps the subject above the headline */
  display: block;
}
.hero-media img { opacity: 0; transition: opacity .5s ease; }
.hero-media img.is-loaded { opacity: 1; }

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to bottom,
    rgba(8,9,10,.58) 0%, rgba(8,9,10,.10) 24%,
    rgba(8,9,10,.06) 40%, rgba(8,9,10,.42) 66%, rgba(8,9,10,.88) 100%);
}
.hero .top, .hero .hero-title { color: var(--on-img); }
.hero .top nav a { color: rgba(246,246,243,.7); }
.hero .top nav a:hover { color: var(--on-img); }
.hero-title { padding-bottom: clamp(30px, 6vw, 62px); }

h1 {
  font-size: clamp(2.5rem, 9.4vw, 7.6rem);
  line-height: 1.0;
  letter-spacing: -0.032em;
  font-weight: 500;
  margin: 0;
  text-wrap: balance;
}
h1 em { font-style: normal; color: var(--blue); }

/* The opening is monochrome — the headline holds its own weight,
   no accent colour, and the type stays clear of the subject. */
.hero h1 {
  font-size: clamp(2.35rem, 7.4vw, 6.2rem);
  line-height: 1.02;
  text-shadow: 0 1px 30px rgba(6,7,8,.4);
}
.hero h1 em { color: inherit; opacity: .62; }

.hero-lede {
  max-width: 36ch;
  font-size: clamp(1.1rem, 2.9vw, 1.3rem);
  line-height: 1.5;
  margin: clamp(18px, 3vw, 26px) 0 0;
  color: rgba(246,246,243,.82);
}

/* ---------- index rows ---------- */

.index { border-bottom: 1px solid var(--line); }
.index-inner { max-width: var(--measure); margin: 0 auto; }

.row {
  display: grid;
  grid-template-columns: clamp(74px, 12vw, 120px) 1fr auto;
  align-items: baseline;
  gap: clamp(12px, 3vw, 24px);
  padding: clamp(17px, 3.2vw, 22px) var(--gutter);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  transition: background .18s ease, color .18s ease, padding-inline-start .18s ease;
}
.index-inner .row:last-child { border-bottom: 0; }

.row .cat {
  font-weight: 500;
  font-family: var(--mono);
  font-size: clamp(14px, 2.8vw, 16px);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mute);
  transition: color .18s ease;
}
.row .label { font-size: clamp(1.42rem, 4.8vw, 2.4rem); letter-spacing: -0.025em; line-height: 1.18; }
.row .arrow { font-size: 1.25rem; color: var(--mute); transition: transform .18s ease, color .18s ease; }

@media (hover: hover) {
  .row:hover {
    background: var(--ink);
    color: var(--paper);
    padding-inline-start: calc(var(--gutter) + 16px);
  }
  .row:hover .cat, .row:hover .arrow { color: var(--paper); }
  .row:hover .arrow { transform: translateX(8px); }
}
.row:focus-visible { background: var(--ink); color: var(--paper); outline-offset: -3px; }
.row:focus-visible .cat, .row:focus-visible .arrow { color: var(--paper); }

/* ---------- journal list ---------- */

.page-head { padding-block: clamp(46px, 9vw, 96px) clamp(28px, 5vw, 46px); }
.page-head h1 { font-size: clamp(2.4rem, 8vw, 5.4rem); }
.page-head .standfirst {
  max-width: 46ch;
  font-size: clamp(1.15rem, 2.9vw, 1.34rem);
  line-height: 1.55;
  color: var(--mute);
  margin: clamp(18px, 3vw, 26px) 0 0;
}

.posts { border-top: 1px solid var(--line); }
.post-row {
  display: grid;
  /* the column has to clear the longest category on one line: "Photography"
     measures ~117px at the type below, so the track never goes under that */
  grid-template-columns: clamp(120px, 14.5vw, 152px) 1fr;
  gap: clamp(12px, 3vw, 28px);
  padding: clamp(22px, 4vw, 34px) var(--gutter);
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  transition: background .18s ease, color .18s ease, padding-inline-start .18s ease;
}
.post-row .meta {
  font-family: var(--mono);
  font-size: clamp(13px, 2.4vw, 14px);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--mute);
  line-height: 1.9;
  transition: color .18s ease;
  /* a date and a one-word category: never split either mid-letter */
  overflow-wrap: normal;
}
.post-row h2 {
  font-size: clamp(1.55rem, 4.8vw, 2.4rem);
  line-height: 1.2;
  letter-spacing: -0.03em;
  font-weight: 500;
  margin: 0;
  text-wrap: balance;
}
.post-row p {
  margin: 10px 0 0;
  max-width: 56ch;
  font-size: clamp(1.05rem, 2.6vw, 1.15rem);
  line-height: 1.55;
  color: var(--mute);
  transition: color .18s ease;
}
@media (hover: hover) {
  .post-row:hover {
    background: var(--ink);
    color: var(--paper);
    padding-inline-start: calc(var(--gutter) + 16px);
  }
  .post-row:hover .meta, .post-row:hover p { color: rgba(244,244,241,.72); }
}
.post-row:focus-visible { background: var(--ink); color: var(--paper); outline-offset: -3px; }
.post-row:focus-visible .meta, .post-row:focus-visible p { color: rgba(244,244,241,.72); }

/* not written yet — listed, but nothing to click */
.post-row.is-draft { color: var(--mute); cursor: default; }
.post-row.is-draft h2 { opacity: .58; }

/* ---------- article ---------- */

.article { padding-block: clamp(40px, 7vw, 78px) 0; }
.kicker {
  font-family: var(--mono);
  font-size: clamp(14px, 2.8vw, 16px);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue);
  margin: 0 0 clamp(18px, 3vw, 26px);
}
.article h1 { max-width: 20ch; font-size: clamp(2.2rem, 7.4vw, 4.6rem); line-height: 1.06; }
.article .standfirst {
  max-width: var(--read);
  font-size: clamp(1.22rem, 3.2vw, 1.55rem);
  line-height: 1.5;
  color: var(--mute);
  margin: clamp(22px, 4vw, 32px) 0 0;
}
.article .byline {
  font-family: var(--mono);
  font-size: clamp(14px, 2.8vw, 16px);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mute);
  margin: clamp(26px, 4vw, 38px) 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

/* the reading column sits flush with the headline above it,
   not centred in the page — .prose lives inside a .wrap */
.prose {
  max-width: var(--read);
  padding-block: clamp(30px, 5vw, 46px) clamp(40px, 7vw, 72px);
  font-size: clamp(1.15rem, 2.9vw, 1.32rem);
  line-height: 1.66;
}
.prose > * + * { margin-top: 1.15em; }
.prose h2 {
  font-size: clamp(1.6rem, 4.6vw, 2.15rem);
  line-height: 1.25;
  letter-spacing: -0.025em;
  font-weight: 500;
  margin-top: 2.2em;
  text-wrap: balance;
}
.prose h3 {
  font-size: clamp(1.18rem, 3vw, 1.32rem);
  letter-spacing: -0.01em;
  font-weight: 600;
  margin-top: 1.8em;
}
.prose a { color: var(--ink); text-underline-offset: 3px; text-decoration-thickness: 1px; }
.prose strong { font-weight: 600; }
.prose ul, .prose ol { padding-inline-start: 1.25em; }
.prose li + li { margin-top: 0.5em; }

.prose blockquote {
  margin-inline: 0;
  padding-inline-start: clamp(16px, 3vw, 24px);
  border-inline-start: 2px solid var(--blue);
  font-size: clamp(1.28rem, 3.4vw, 1.55rem);
  line-height: 1.42;
  letter-spacing: -0.015em;
}
.prose blockquote p { margin: 0; }

.prose figure { margin-inline: 0; }
.prose figure img { display: block; width: 100%; height: auto; background: var(--line); }
.prose figcaption {
  font-family: var(--mono);
  font-size: clamp(13.5px, 2.6vw, 15px);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mute);
  margin-top: 10px;
  line-height: 1.8;
}

.prose .aside {
  border: 1px solid var(--line);
  padding: clamp(18px, 4vw, 26px);
  font-size: 1.08rem;
  line-height: 1.6;
}
.prose .aside h3 { margin-top: 0; }

.next {
  border-top: 1px solid var(--line);
  padding-block: clamp(26px, 5vw, 40px) clamp(44px, 8vw, 80px);
  display: flex;
  flex-wrap: wrap;
  gap: 14px clamp(20px, 4vw, 32px);
  align-items: baseline;
  font-family: var(--mono);
  font-size: clamp(14px, 2.8vw, 16px);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mute);
}
.next a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); padding-bottom: 2px; }
.next a:hover { color: var(--ink); border-color: var(--ink); }

/* ---------- photography index: full-bleed split rows ----------
   Photograph takes one half edge-to-edge, a panel carries the text on the
   other. Sides alternate, and so does the panel: near-black, then paper,
   then black again. Every ink value comes off the two tokens below, so the
   whole row flips with them. Fixed in both themes: gallery wall labels, not
   page furniture. */

.splits { display: flex; flex-direction: column; }

.split {
  /* dark panel, the default beat */
  --panel:    #0e0f0e;
  --on-panel: #f2f2ed;
  --panel-mute: rgba(242, 242, 237, .74);
  --panel-rule: rgba(242, 242, 237, .55);

  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100vh;
  min-height: 100svh;

  text-decoration: none;
  background: var(--panel);
  color: var(--on-panel);
}

/* every other row runs on paper with black type */
.split:nth-child(even) {
  --panel:    #f4f4f1;
  --on-panel: #121314;
  --panel-mute: rgba(18, 19, 20, .72);
  --panel-rule: rgba(18, 19, 20, .38);
}

.split-img { position: relative; overflow: hidden; background: #171817; }
.split-img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* slow and evenly eased: the picture should drift closer, not jump */
  transition: transform 1.15s cubic-bezier(.33,.02,.28,1);
  will-change: transform;
}
@media (hover: hover) {
  .split:hover .split-img img { transform: scale(1.045); }
}
@media (prefers-reduced-motion: reduce) {
  .split-img img, .slideshow img { transition: opacity .3s linear; }
  .split:hover .split-img img { transform: none; }
}

.split:nth-child(even) .split-img { order: 2; }

.split-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(16px, 2vw, 24px);
  padding: clamp(30px, 5vw, 76px);
}

.split .chip {
  background: var(--on-panel);
  color: var(--panel);
  padding: 9px 15px;
  font-size: clamp(12.5px, 2.4vw, 14px);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
}

.split h2 {
  margin: 0;
  font-size: clamp(2.1rem, 4.4vw, 3.9rem);
  line-height: 1.12;
  letter-spacing: -0.035em;
  font-weight: 500;
  text-wrap: balance;
}

.split p {
  margin: 0;
  max-width: 44ch;
  font-size: clamp(1.06rem, 1.5vw, 1.24rem);
  line-height: 1.6;
  color: var(--panel-mute);
}

.split .cta {
  margin-top: clamp(6px, 1vw, 14px);
  border: 1px solid var(--panel-rule);
  padding: 15px 26px;
  font-size: clamp(12.5px, 2.4vw, 14px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
@media (hover: hover) {
  .split:hover .cta { background: var(--on-panel); color: var(--panel); border-color: var(--on-panel); }
}
.split:focus-visible { outline: 3px solid var(--on-panel); outline-offset: -6px; }

@media (max-width: 860px) {
  /* one panel per screen: picture on top, panel beneath, nothing spilling */
  .split {
    grid-template-columns: 1fr;
    min-height: 100svh;
    grid-template-rows: minmax(0, 50%) minmax(0, 1fr);
  }
  .split-img { height: 100%; }
  .split:nth-child(even) .split-img { order: 0; }
  .split-text {
    padding: clamp(20px, 5vw, 34px);
    gap: 12px;
    justify-content: center;
    overflow: hidden;
  }
  .split h2 { font-size: clamp(1.9rem, 8.5vw, 2.6rem); }
  .split p {
    font-size: 1.02rem;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .split .cta { margin-top: 2px; padding: 13px 20px; }
}

/* ---------- home: selected chapters + journal strip ---------- */

.strip { padding-block: clamp(40px, 7vw, 76px) 0; }
.strip-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding-bottom: clamp(18px, 3vw, 26px);
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: clamp(14px, 2.8vw, 16px);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mute);
}
.strip-head a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); padding-bottom: 2px; }
.strip-head a:hover { color: var(--ink); border-color: var(--ink); }

.strip-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 3vw, 28px);
  padding-top: clamp(18px, 3vw, 28px);
}
.strip-card { text-decoration: none; display: flex; flex-direction: column; gap: 12px; }
.strip-card img {
  display: block;
  width: 100%;
  height: clamp(200px, 24vw, 320px);
  object-fit: cover;
  background: var(--line);
  transition: transform 1.15s cubic-bezier(.33,.02,.28,1);
}
.strip-card .cat {
  font-family: var(--mono);
  font-size: clamp(13.5px, 2.6vw, 15px);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mute);
}
.strip-card .name { font-size: clamp(1.35rem, 3.2vw, 1.85rem); letter-spacing: -0.03em; }
@media (hover: hover) {
  .strip-card:hover img { transform: scale(1.045); }
  .strip-card:hover .name { text-decoration: underline; text-underline-offset: 5px; }
}
.strip-card figure { margin: 0; overflow: hidden; }

@media (max-width: 720px) {
  .strip-grid { grid-template-columns: 1fr; }
}

/* ---------- info page ---------- */

.info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 5vw, 56px);
  padding-block: clamp(30px, 5vw, 48px) clamp(40px, 7vw, 70px);
  border-top: 1px solid var(--line);
}
.info-grid h2 {
  font-family: var(--mono);
  font-size: clamp(14px, 2.8vw, 16px);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mute);
  font-weight: 400;
  margin: 0 0 14px;
}
.info-grid p, .info-grid li { line-height: 1.62; font-size: clamp(1.08rem, 2.7vw, 1.2rem); max-width: 52ch; }
.info-grid p { margin: 0 0 12px; }
.info-grid ul { margin: 0; padding-inline-start: 1.1em; }
.info-grid li + li { margin-top: 6px; }
.info-grid a { color: var(--ink); text-underline-offset: 3px; }
@media (max-width: 720px) { .info-grid { grid-template-columns: 1fr; } }

/* ---------- chapter page ---------- */

.chapter-lead { margin: 0; }
.chapter-lead .tile-btn { width: 100%; }
.chapter-lead img {
  display: block;
  width: 100%;
  height: clamp(320px, 74vh, 780px);
  object-fit: cover;
  object-position: center 42%;
}
.chapter-lead figcaption {
  font-family: var(--mono);
  font-size: clamp(13.5px, 2.6vw, 15px);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mute);
  padding: 10px var(--gutter) 0;
  max-width: var(--measure);
  margin: 0 auto;
}

.chapter-head { padding-block: clamp(34px, 6vw, 62px) clamp(24px, 4vw, 40px); }
.chapter-head h1 { font-size: clamp(2.4rem, 8vw, 5.4rem); }
.chapter-head .standfirst {
  max-width: 54ch;
  font-size: clamp(1.18rem, 3vw, 1.42rem);
  line-height: 1.55;
  margin: clamp(20px, 3vw, 28px) 0 0;
}
.chapter-head .chapter-note {
  max-width: 54ch;
  font-size: clamp(1rem, 2.6vw, 1.1rem);
  line-height: 1.6;
  color: var(--mute);
  margin: clamp(22px, 4vw, 32px) 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.chapter-note a { color: var(--ink); text-underline-offset: 3px; }
.chapter-note span { display: inline-block; margin-top: 6px; }

/* frames: landscape spans the pair, portraits sit as diptychs */
.tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 3vw, 30px);
  padding-bottom: clamp(40px, 7vw, 76px);
}
.tile { margin: 0; }
.tile[data-span="wide"] { grid-column: 1 / -1; }
.tile[data-span="solo"] {
  grid-column: 1 / -1;
  max-width: 720px;
  margin-inline: auto;
  padding-block: clamp(10px, 2vw, 26px);
}

.tile-btn {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: var(--line);
  cursor: zoom-in;
  overflow: hidden;
}
.tile-btn img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 1.15s cubic-bezier(.33,.02,.28,1);
}
@media (hover: hover) {
  .tile-btn:hover img { transform: scale(1.03); }
}
.tile figcaption {
  font-family: var(--mono);
  font-size: clamp(13.5px, 2.6vw, 15px);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mute);
  padding-top: 9px;
}

@media (max-width: 620px) {
  .tiles { grid-template-columns: 1fr; }
  .tile[data-span="wide"] { grid-column: auto; }
}

/* ---------- prints block ---------- */

.prints {
  padding-block: clamp(34px, 6vw, 56px);
  border-top: 1px solid var(--line);
}
.prints h2 {
  font-size: clamp(1.7rem, 4.8vw, 2.4rem);
  letter-spacing: -0.03em;
  font-weight: 500;
  margin: 0 0 18px;
}
.prints p { max-width: 60ch; line-height: 1.6; margin: 0 0 14px; font-size: clamp(1.08rem, 2.7vw, 1.2rem); }
.prints-cta a {
  display: inline-block;
  margin-top: 8px;
  padding: 13px 22px;
  border: 1px solid var(--ink);
  text-decoration: none;
  font-family: var(--mono);
  font-size: 15px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: background .16s ease, color .16s ease;
}
.prints-cta a:hover { background: var(--ink); color: var(--paper); }

/* ---------- lightbox ---------- */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(9,10,9,.94);
  display: grid;
  place-items: center;
  padding: clamp(16px, 4vw, 48px);
}
.lightbox[hidden] { display: none; }
.lightbox figure { margin: 0; max-width: 100%; max-height: 100%; display: flex; flex-direction: column; gap: 12px; }
.lightbox img {
  max-width: 100%;
  max-height: 82vh;
  width: auto;
  height: auto;
  object-fit: contain;
  margin: 0 auto;
}
.lightbox figcaption {
  font-family: var(--mono);
  font-size: 14.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #9a9c95;
  text-align: center;
}
.lightbox button {
  position: absolute;
  background: transparent;
  border: 0;
  color: #e8e9e4;
  font-size: 26px;
  line-height: 1;
  padding: 14px 18px;
  cursor: pointer;
  opacity: .62;
  transition: opacity .16s ease;
}
.lightbox button:hover { opacity: 1; }
.lb-close { top: 6px; right: 8px; }
.lb-prev  { left: 4px;  top: 50%; transform: translateY(-50%); }
.lb-next  { right: 4px; top: 50%; transform: translateY(-50%); }
.lightbox button:focus-visible { outline: 2px solid #e8e9e4; outline-offset: 2px; opacity: 1; }

/* ---------- footer ---------- */

.foot {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px clamp(18px, 4vw, 30px);
  padding-block: clamp(26px, 5vw, 34px) clamp(44px, 8vw, 88px);
  font-family: var(--mono);
  font-size: clamp(14px, 2.8vw, 16px);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mute);
}
.foot a {
  text-decoration: none;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  padding-bottom: 2px;
  transition: color .16s ease, border-color .16s ease;
}
.foot a:hover { color: var(--ink); border-color: var(--ink); }
.foot .year { margin-inline-start: auto; }
@media (max-width: 460px) {
  .foot .year { margin-inline-start: 0; width: 100%; }
}

/* ---------- entrance ---------- */

@media (prefers-reduced-motion: no-preference) {
  .rise { opacity: 0; transform: translateY(16px); animation: rise .8s cubic-bezier(.2,.7,.2,1) forwards; }
  h1.rise { animation-delay: .06s; }
  .hero-lede.rise { animation-delay: .18s; }
  @keyframes rise { to { opacity: 1; transform: none; } }
}

/* ---------- narrow screens ----------
   The type is set large on purpose, so on a phone the masthead drops its
   nav to a second line and the two-column rows collapse to one. */

@media (max-width: 640px) {
  .top {
    flex-wrap: wrap;
    row-gap: 10px;
    letter-spacing: 0.06em;
  }
  .top nav { flex-basis: 100%; gap: 20px; letter-spacing: 0.06em; }
  .top .role { text-align: left; }

  .post-row {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .post-row .meta { line-height: 1.45; letter-spacing: 0.06em; }

  .row {
    grid-template-columns: 1fr auto;
    gap: 6px 14px;
    align-items: center;
  }
  .row .cat { grid-column: 1 / -1; letter-spacing: 0.06em; }

  .foot,
  .next,
  .strip-head { letter-spacing: 0.06em; }

  .tile figcaption,
  .chapter-lead figcaption,
  .prose figcaption { letter-spacing: 0.06em; }
}

/* ---------- film page ---------- */

.reel {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #0e0f0e;
  color: #f2f2ed;
  display: grid;
  place-items: center;
  overflow: hidden;
  margin-bottom: clamp(26px, 4vw, 44px);
}
.reel iframe, .reel video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.reel .reel-hint {
  text-align: center;
  padding: clamp(20px, 4vw, 40px);
  max-width: 46ch;
  line-height: 1.6;
  font-size: clamp(1rem, 2.5vw, 1.12rem);
  color: rgba(242,242,237,.72);
}
.reel .reel-hint b { color: #f2f2ed; font-weight: 500; display: block; margin-bottom: 10px;
  font-size: clamp(1.3rem, 3.4vw, 1.9rem); letter-spacing: -.03em; }

.work-list { border-top: 1px solid var(--line); }
.work-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(10px, 3vw, 36px);
  padding: clamp(20px, 3.4vw, 32px) 0;
  border-bottom: 1px solid var(--line);
  align-items: baseline;
}
.work-item h3 {
  margin: 0;
  font-size: clamp(1.4rem, 4.2vw, 2.1rem);
  letter-spacing: -.03em;
  font-weight: 500;
  text-wrap: balance;
}
.work-item .role {
  font-size: clamp(14px, 2.8vw, 16px);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--mute);
  margin: 8px 0 0;
}
.work-item p.what { margin: 0; max-width: 52ch; line-height: 1.6; color: var(--mute);
  font-size: clamp(1.02rem, 2.6vw, 1.14rem); }
@media (max-width: 700px) { .work-item { grid-template-columns: 1fr; } }

.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 3vw, 40px);
  padding-block: clamp(26px, 4vw, 44px); }
.steps h3 { margin: 0 0 10px; font-size: clamp(1.15rem, 3vw, 1.4rem); font-weight: 500; letter-spacing: -.02em; }
.steps p { margin: 0; line-height: 1.6; color: var(--mute); font-size: clamp(1rem, 2.5vw, 1.1rem); }
.steps .num { display: block; font-size: 14px; letter-spacing: .12em; color: var(--mute); margin-bottom: 12px; }
@media (max-width: 760px) { .steps { grid-template-columns: 1fr; } }

/* ---------- prints page ---------- */

.sizes { display: flex; align-items: flex-end; gap: clamp(18px, 4vw, 48px); flex-wrap: wrap;
  padding-block: clamp(26px, 4vw, 44px); }
.size { text-align: left; }
.size .box { border: 2px solid var(--ink); background: transparent; }
/* to scale at 6px per inch of the long edge: 8x12, 12x18, 20x30 */
.size .s1 { width: 72px;  height: 48px;  }
.size .s2 { width: 108px; height: 72px;  }
.size .s3 { width: 180px; height: 120px; }
.size .lab { margin-top: 12px; font-size: clamp(14px, 2.6vw, 16px); letter-spacing: .08em; text-transform: uppercase; }
.size .sub { font-size: clamp(14px, 2.6vw, 15px); color: var(--mute); margin-top: 4px; }

.specs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 4vw, 48px);
  padding-block: clamp(24px, 4vw, 40px); border-top: 1px solid var(--line); }
.specs dt { font-size: clamp(14px, 2.6vw, 16px); letter-spacing: .1em; text-transform: uppercase;
  color: var(--mute); margin-bottom: 6px; }
.specs dd { margin: 0 0 20px; line-height: 1.6; font-size: clamp(1.02rem, 2.6vw, 1.14rem); max-width: 46ch; }
@media (max-width: 700px) { .specs { grid-template-columns: 1fr; } }

.cta-block {
  border: 1px solid var(--line);
  padding: clamp(24px, 4vw, 44px);
  margin-block: clamp(24px, 4vw, 40px) clamp(40px, 7vw, 80px);
  display: flex; flex-direction: column; gap: 16px; align-items: flex-start;
}
.cta-block h2 { margin: 0; font-size: clamp(1.6rem, 4.6vw, 2.4rem); letter-spacing: -.03em; font-weight: 500; }
.cta-block p { margin: 0; max-width: 54ch; line-height: 1.6; color: var(--mute);
  font-size: clamp(1.04rem, 2.6vw, 1.16rem); }
.cta-block a.btn {
  display: inline-block; padding: 15px 26px; border: 1px solid var(--ink); text-decoration: none;
  font-size: clamp(14px, 2.6vw, 15px); letter-spacing: .12em; text-transform: uppercase; font-weight: 600;
  transition: background .16s, color .16s;
}
.cta-block a.btn:hover { background: var(--ink); color: var(--paper); }

/* ---------- shop ---------- */

.shop-list { border-top: 1px solid var(--line); }
.shop-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(12px, 3vw, 40px);
  padding: clamp(24px, 4vw, 40px) 0;
  border-bottom: 1px solid var(--line);
  align-items: start;
}
.shop-item h2 {
  margin: 0;
  font-size: clamp(1.6rem, 4.6vw, 2.6rem);
  letter-spacing: -.035em;
  font-weight: 500;
  text-wrap: balance;
}
.shop-item .status {
  display: inline-block;
  margin-top: 12px;
  padding: 6px 12px;
  border: 1px solid var(--line);
  font-size: clamp(13px, 2.5vw, 14px);
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--mute);
}
.shop-item .status.open { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.shop-item .body p { margin: 0 0 14px; max-width: 52ch; line-height: 1.6;
  font-size: clamp(1.04rem, 2.6vw, 1.16rem); }
.shop-item .body p:last-child { margin-bottom: 0; }
.shop-item .body ul { margin: 0 0 14px; padding-inline-start: 1.15em; max-width: 52ch; }
.shop-item .body li { line-height: 1.6; font-size: clamp(1.02rem, 2.5vw, 1.12rem); }
.shop-item .body li + li { margin-top: 6px; }
.shop-item .go {
  display: inline-block;
  margin-top: 4px;
  padding: 13px 22px;
  border: 1px solid var(--ink);
  text-decoration: none;
  font-size: clamp(13px, 2.5vw, 14px);
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 600;
  transition: background .16s, color .16s;
}
.shop-item .go:hover { background: var(--ink); color: var(--paper); }
@media (max-width: 760px) { .shop-item { grid-template-columns: 1fr; } }

/* ---------- leading ----------
   The display face is set large; every heading needs room or the
   descenders of one line touch the caps of the next. */

h1, h2, h3 { text-wrap: balance; }
.page-head h1 { line-height: 1.02; }
.chapter-head h1 { line-height: 1.02; }
.shop-item h2, .work-item h3, .prints h2, .cta-block h2,
.steps h3, .info-grid h2, .dlg h3 { line-height: 1.22; }
.shop-item h2 { padding-bottom: 2px; }
.split h2, .chapter-card-title { padding-bottom: 2px; }

/* a little more air between stacked blocks of text */
.specs dd { margin-bottom: 26px; }
.steps p, .work-item p.what, .shop-item .body p { line-height: 1.65; }
.standfirst { line-height: 1.5; }
.hero-lede { line-height: 1.55; }

/* ---------- camera bag ---------- */

.gear-list { border-top: 1px solid var(--line); }
.gear {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(10px, 3vw, 40px);
  padding: clamp(20px, 3.2vw, 30px) 0;
  border-bottom: 1px solid var(--line);
  align-items: start;
}
.gear h3 { margin: 0; font-size: clamp(1.3rem, 3.6vw, 1.9rem); font-weight: 500;
  letter-spacing: -.03em; line-height: 1.22; }
.gear .use { margin: 10px 0 0; display: flex; align-items: center; gap: 12px; }
.gear .bar { flex: 1; height: 8px; background: var(--line); max-width: 260px; }
.gear .bar span { display: block; height: 100%; background: var(--ink); }
.gear .pct { font-size: clamp(13px, 2.5vw, 15px); letter-spacing: .08em; color: var(--mute);
  font-weight: 600; min-width: 3.5em; }
.gear p { margin: 0; max-width: 52ch; line-height: 1.65; font-size: clamp(1.02rem, 2.6vw, 1.14rem); }
.gear p + p { margin-top: 12px; }
@media (max-width: 760px) { .gear { grid-template-columns: 1fr; } }

.kit { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 3vw, 40px);
  padding-block: clamp(24px, 4vw, 42px); }
.kit h3 { margin: 0 0 10px; font-size: clamp(1.1rem, 2.8vw, 1.32rem); font-weight: 500;
  letter-spacing: -.02em; line-height: 1.22; }
.kit ul { margin: 0; padding-inline-start: 1.1em; }
.kit li { line-height: 1.65; font-size: clamp(1rem, 2.5vw, 1.1rem); }
.kit li + li { margin-top: 8px; }
.kit li b { font-weight: 600; }
@media (max-width: 760px) { .kit { grid-template-columns: 1fr; } }

/* ---------- icons ---------- */

.ic {
  width: 1.05em;
  height: 1.05em;
  flex: 0 0 auto;
  vertical-align: -0.15em;
  stroke: currentColor;
}
.ic-lg { width: 1.9em; height: 1.9em; }
.row .cat .ic { margin-inline-end: .5em; }
/* the three handles in the Contact block: a row of links, not a paragraph */
.elsewhere {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px clamp(16px, 3vw, 24px);
  font-family: var(--mono);
  font-size: clamp(13px, 2.6vw, 15px);
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.elsewhere span { color: var(--mute); text-transform: none; letter-spacing: 0.04em; }

/* a standing notice, not another paragraph: ruled off so it reads as terms */
.note-strong {
  border-inline-start: 2px solid var(--ink);
  padding-inline-start: clamp(12px, 2vw, 18px);
  margin-block: 1.1em;
}

.foot a .ic, .strip-head a .ic { margin-inline-end: .45em; }
.go .ic, .btn .ic { margin-inline-start: .5em; vertical-align: -0.2em; }
.kit h3 .ic, .steps h3 .ic { margin-inline-end: .45em; opacity: .75; }

/* ---------- motion ---------- */

@media (prefers-reduced-motion: no-preference) {
  /* A slow fade, no movement — nothing pops, nothing slides. */
  .reveal {
    opacity: 0;
    transition: opacity 1.1s ease;
  }
  .reveal.in { opacity: 1; }

  /* the opening photograph drifts, very slowly */
  .hero-media img.drift.is-loaded { animation: drift 34s ease-in-out infinite alternate; }
  @keyframes drift {
    from { transform: scale(1); }
    to   { transform: scale(1.07); }
  }
}

/* ---------- product blocks ---------- */

.product {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(10px, 2vw, 18px);
  margin-top: clamp(16px, 3vw, 24px);
}
.product figure { margin: 0; overflow: hidden; background: var(--line); }
.product img {
  width: 100%;
  height: clamp(180px, 22vw, 280px);
  object-fit: cover;
  transition: transform .7s cubic-bezier(.2,.7,.2,1);
}
@media (hover: hover) { .product a:hover img, .product figure:hover img { transform: scale(1.045); } }
.product figcaption {
  font-size: clamp(13px, 2.4vw, 14.5px);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--mute);
  padding-top: 8px;
}
.product--wide { grid-template-columns: 1fr; }
.product--wide img { height: clamp(240px, 34vw, 460px); }

.shop-item .body .product { margin-bottom: 18px; }

/* ---------- cross-fading slideshows ---------- */

.slideshow { position: relative; overflow: hidden; }
.slideshow img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  /* transform is listed here too: without it the hover zoom on a slideshow
     panel has no transition at all and snaps. */
  transition: opacity 1.4s ease-in-out,
              transform 1.15s cubic-bezier(.33,.02,.28,1);
}
.slideshow img.is-on { opacity: 1; }

/* Before the script runs, show the first picture. The slideshow owns
   opacity from then on — including on the hero, whose older
   .is-loaded rule must not out-rank it. */
.slideshow > img:nth-of-type(1) { opacity: 1; }
.slideshow > img.is-on { opacity: 1; }
.hero-media.slideshow img { opacity: 0; }
.hero-media.slideshow img.is-on { opacity: 1; }
.hero-media.slideshow img.is-loaded:not(.is-on) { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .slideshow img { transition: none; }
}

/* The opening is a slideshow of its own. .slideshow sets position:relative,
   which would collapse the absolutely-positioned hero media to zero height —
   so restore it explicitly. */
.hero-media.slideshow { position: absolute; inset: 0; }
.hero-media.slideshow img { object-position: center 34%; }

/* slideshow arrows */
.show-nav {
  position: absolute;
  right: clamp(12px, 2vw, 22px);
  bottom: clamp(12px, 2vw, 22px);
  display: flex;
  gap: 8px;
  z-index: 2;
}
.show-nav button {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  background: rgba(10,11,10,.42);
  border: 1px solid rgba(242,242,237,.45);
  color: #f2f2ed;
  cursor: pointer;
  backdrop-filter: blur(3px);
  transition: background .16s, border-color .16s, color .16s;
}
.show-nav button:hover { background: #f2f2ed; color: #0e0f0e; border-color: #f2f2ed; }
.show-nav .ic { width: 20px; height: 20px; }
.show-prev .ic { transform: rotate(180deg); }
.slideshow:focus-visible { outline: 3px solid var(--on-img); outline-offset: -6px; }



/* ---------- mobile menu ---------- */

.burger { display: none; }

@media (max-width: 860px) {
  .top nav { display: none; }

  .burger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 0 8px;
    margin-inline-start: auto;
    background: transparent;
    border: 0;
    cursor: pointer;
    color: inherit;
  }
  .burger span {
    display: block;
    height: 2px;
    width: 100%;
    background: currentColor;
    transition: transform .2s ease, opacity .2s ease;
  }
  .burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .burger.is-open span:nth-child(2) { opacity: 0; }
  .burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .burger:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

  /* the masthead becomes name + burger, on one line */
  .top { flex-wrap: nowrap; align-items: center; }
}

.menu {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: var(--paper);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(24px, 8vw, 60px);
}
.menu[hidden] { display: none; }
.menu nav { display: flex; flex-direction: column; gap: clamp(10px, 3vw, 20px); }
.menu a {
  text-decoration: none;
  color: var(--ink);
  font-size: clamp(2rem, 9vw, 3.2rem);
  letter-spacing: -0.035em;
  line-height: 1.1;
  font-weight: 500;
}
.menu a[aria-current="page"] { color: var(--mute); }
.menu a:active { opacity: .6; }
.menu-close {
  position: absolute;
  top: clamp(14px, 4vw, 26px);
  right: clamp(14px, 4vw, 26px);
  width: 48px;
  height: 48px;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}
.menu-close:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* ---------- the masthead is anchored to the top ----------
   Always fixed, always visible, always solid. Content scrolls underneath it.
   No :has() and no transparent state — both of those were how the bar
   managed to vanish. */

:root { --nav-h: 68px; }
@media (max-width: 860px) { :root { --nav-h: 58px; } }

.top {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  max-width: none;
  min-height: var(--nav-h);
  padding-block: 0;
  padding-inline: max(var(--gutter), calc((100vw - var(--measure)) / 2 + var(--gutter)));
  align-items: center;
  background: var(--paper);
  color: var(--ink);
  border-bottom: 1px solid var(--line);
}
.top .home, .top > span:first-child { color: var(--ink); }
.top nav a { color: var(--mute); }
.top nav a:hover, .top nav a[aria-current="page"] { color: var(--ink); }

/* every page starts below the bar */
body { padding-top: var(--nav-h); }

/* The opening still fills the screen under the bar. The masthead is fixed
   now, so it no longer sits in the hero's flex flow — the title has to be
   pinned to the bottom itself. */
.hero {
  height: calc(100svh - var(--nav-h));
  max-height: none;
  min-height: 460px;
  justify-content: flex-end;
}
.hero .top, .hero .top nav a { color: inherit; }
.hero .top nav a { color: var(--mute); }
.hero .top nav a:hover { color: var(--ink); }

/* snapped panels stop below the bar, not under it */



/* nothing outranks the masthead */
.split, .splits, .strip, .index, .tiles, .product, main { z-index: 0; }
.menu { z-index: 300; }

/* ---------- scrolling ----------
   Free scrolling with easing on jumps. No snap points: panels fill the
   screen but never grab the wheel. */
html { scroll-behavior: smooth; scroll-padding-top: var(--nav-h); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* pictures do not animate in */
.tile img, .split-img img, .product img, .strip-card img,
.chapter-lead img, .prose figure img { opacity: 1 !important; transform: none; }
.tile, .split, .product, .strip-card, .chapter-card, .prose figure { opacity: 1 !important; }

/* ---------- photography submenu ----------
   White panel, black type, on purpose: it stays white in dark mode too.
   The wrapper stretches to the full height of the bar so the panel can hang
   off its bottom edge and sit flush against the masthead hairline. */

.top nav { align-self: stretch; align-items: center; }
.hasmenu {
  position: relative;
  display: flex;
  align-items: center;
  align-self: stretch;
}

.submenu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, 0);
  min-width: 250px;
  padding: 6px 0 8px;
  background: #ffffff;
  color: #121314;
  border: 1px solid #dcdcd4;
  border-top: 0;
  box-shadow: 0 18px 44px rgba(8, 9, 10, .16);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .2s ease, visibility .2s;
  z-index: 300;
}
.submenu nav { display: flex; flex-direction: column; }
.submenu a,
.top nav .submenu a {
  display: block;
  padding: 11px 22px;
  text-decoration: none;
  color: #121314;
  font-family: var(--sans);
  font-size: 17px;
  letter-spacing: -0.015em;
  text-transform: none;
  transition: background .14s ease;
}
.submenu a:hover, .submenu a:focus-visible,
.top nav .submenu a:hover, .top nav .submenu a:focus-visible { background: #121314; color: #ffffff; }
.submenu .submenu-all,
.top nav .submenu .submenu-all {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #121314;
  padding-top: 12px;
  padding-bottom: 12px;
  margin-bottom: 4px;
  border-bottom: 1px solid #dcdcd4;
}
.submenu .submenu-all:hover,
.top nav .submenu .submenu-all:hover { color: #ffffff; }

@media (hover: hover) {
  .hasmenu:hover .submenu { opacity: 1; visibility: visible; pointer-events: auto; }
}
.hasmenu.is-open .submenu { opacity: 1; visibility: visible; pointer-events: auto; }

/* the collections inside the burger panel */
.menu-sub { display: flex; flex-direction: column; gap: 2px; margin: 2px 0 6px 0; }
.menu-sub a {
  font-size: clamp(1rem, 4.2vw, 1.35rem);
  letter-spacing: -0.02em;
  color: var(--mute);
  padding-left: 14px;
  border-left: 1px solid var(--line);
}

@media (prefers-reduced-motion: reduce) {
  .submenu { transition: none; }
}

/* ---------- narrow widths: stop the meta column colliding ----------
   The label column is a fixed track, but a single long word (PHOTOGRAPHY,
   FIELD NOTES) is wider than that track once the window is small, so it
   spilled across the headline. Below the burger breakpoint the rows stack. */

@media (max-width: 860px) {
  .post-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .post-row .meta {
    line-height: 1.4;
    letter-spacing: 0.08em;
  }

  .row {
    grid-template-columns: 1fr auto;
    row-gap: 4px;
  }
  .row .cat { grid-column: 1 / -1; }
}

/* belt and braces: never let a track's content push past its own column.
   break-word only splits a word that genuinely cannot fit, and unlike
   "anywhere" it does not let the track shrink below the word in the first
   place, which is what was cutting "Photography" in half. */
.post-row > *, .row > * { min-width: 0; overflow-wrap: break-word; }

/* ---------- journal rows inside a wrapped section ----------
   The home page lists posts inside .wrap, so the rows carry their own inset
   instead of the page gutter. The inset is pulled straight back out with a
   negative margin, so the type still lines up with the section heading while
   the hover panel keeps air on both sides. */
.post-row--flush {
  --flush: clamp(12px, 2vw, 20px);
  padding-inline: var(--flush);
  margin-inline: calc(var(--flush) * -1);
}
@media (hover: hover) {
  .post-row--flush:hover { padding-inline-start: calc(var(--flush) + 14px); }
}

/* ---------- journal rows carry a square frame ----------
   Only the rows that actually have one: the home page uses the same class
   without a thumbnail, and a reserved column there squeezed the headline
   into nothing. */

.post-row.with-thumb {
  /* same meta track as the plain row, so the category still fits on one line */
  grid-template-columns: 96px clamp(120px, 14.5vw, 152px) 1fr;
  align-items: start;
}
.post-thumb {
  display: block;
  width: 96px;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--line);
}
.post-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1.15s cubic-bezier(.33,.02,.28,1);
}
@media (hover: hover) {
  .post-row.with-thumb:hover .post-thumb img { transform: scale(1.06); }
}

@media (max-width: 860px) {
  .post-row.with-thumb {
    grid-template-columns: 72px 1fr;
    column-gap: 14px;
    row-gap: 6px;
  }
  .post-thumb { width: 72px; grid-row: span 2; }
  .post-row.with-thumb .meta { grid-column: 2; }
  .post-row.with-thumb > span:last-child { grid-column: 2; }
}

/* ---------- shop: give the left column something to do ----------
   It held only a heading and a badge, so most of the row was empty while the
   text on the right was squeezed. The heading column is now a narrow rail
   that stays with the section as it scrolls. */

.shop-item {
  grid-template-columns: minmax(190px, 0.55fr) minmax(0, 1.45fr);
  gap: clamp(20px, 4vw, 56px);
  padding: clamp(32px, 5vw, 56px) 0;
}
.shop-item > div:first-child { position: sticky; top: calc(var(--nav-h) + 24px); }
.shop-item h2 { display: flex; align-items: center; gap: 12px; }
.shop-item .body .product {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(10px, 1.6vw, 18px);
  margin-bottom: clamp(18px, 2.6vw, 26px);
}
.shop-item .body .product figure { margin: 0; }
.shop-item .body p, .shop-item .body ul { max-width: 60ch; }

@media (max-width: 860px) {
  .shop-item {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 30px 0;
  }
  .shop-item > div:first-child { position: static; }
}

/* ---------- contact form ----------
   The address is not in the markup, not in the JavaScript, and not in any
   attribute. A harvester that fetches this page, this stylesheet and every
   script still leaves with nothing. Netlify holds the destination in its own
   settings and posts the message on; the page only knows where to send the
   form, never who receives it. */

.contact-form { grid-column: 1 / -1; max-width: 34rem; }
.contact-form .fields { display: grid; gap: clamp(18px, 3vw, 26px); margin-block: 1.4em 1.6em; }

.contact-form label {
  display: block;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--mute);
  margin-bottom: .5em;
}

/* Hairline underline, no box. The rest of the site is rules and space, so a
   boxed input would be the only bordered rectangle on the page. */
.contact-form input,
.contact-form textarea,
.contact-form select {
  width: 100%;
  font: inherit;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  padding: .5em 0;
  transition: border-color .16s;
  -webkit-appearance: none;
  appearance: none;
}
.contact-form select { padding-inline-end: 1.4em; }
.contact-form textarea { resize: vertical; min-height: 7em; line-height: 1.55; }
.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus { outline: 0; border-bottom-color: var(--ink); }
.contact-form input:focus-visible,
.contact-form textarea:focus-visible,
.contact-form select:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

.contact-form button {
  display: inline-block; padding: 15px 26px;
  border: 1px solid var(--ink); background: transparent; color: var(--ink);
  font-family: inherit; font-size: clamp(14px, 2.6vw, 15px);
  letter-spacing: .12em; text-transform: uppercase; font-weight: 600;
  cursor: pointer; transition: background .16s, color .16s;
}
.contact-form button:hover { background: var(--ink); color: var(--paper); }
.contact-form button[disabled] { opacity: .45; cursor: default; }
.contact-form button[disabled]:hover { background: transparent; color: var(--ink); }

/* The honeypot. Off-screen rather than display:none, because some bots skip
   hidden fields and fill everything else. aria-hidden and tabindex keep it
   away from anyone using the keyboard or a screen reader. */
.contact-form .hp {
  position: absolute; left: -9999px; width: 1px; height: 1px;
  overflow: hidden;
}

.contact-form .note { color: var(--mute); font-size: 14px; margin-top: 1.2em; }
.contact-form .status { margin-top: 1.2em; font-size: 15px; }
.contact-form .status:empty { margin: 0; }
.contact-form .status.ok { color: var(--ink); }
.contact-form .status.bad { color: var(--ink); border-left: 2px solid var(--ink); padding-left: .8em; }

@media (max-width: 720px) { .contact-form { max-width: none; } }

/* ---------- the bio ----------
   Practice is an account, not a column item, so it takes the full width of
   the grid and an article measure. The opening line carries alone. */
.practice { grid-column: 1 / -1; max-width: var(--read); }
.practice .lede-line { font-size: clamp(1.05rem, 2.6vw, 1.2rem); color: var(--ink); }
.practice .coda { color: var(--mute); font-size: 15px; padding-top: .8em; border-top: 1px solid var(--line); }

/* ---------- the teaching ending ----------
   Every workshop page promises what you will have learned. This one ends the
   other way round, so the line gets to carry alone. */
.leave-with { margin-top: clamp(28px, 5vw, 44px); padding-top: clamp(22px, 4vw, 32px); border-top: 1px solid var(--line); max-width: var(--read); }
.leave-with .pull { font-size: clamp(1.25rem, 3.4vw, 1.7rem); line-height: 1.25; color: var(--ink); margin: 0 0 .7em; text-wrap: balance; }
.leave-with p:last-child { color: var(--mute); margin: 0; }