/* =========================================================
   Hayley Volkering — Coastal refresh
   White hero with the Volks wordmark over a scrollable ribbon
   of the original photographs, persistent glass pill menu,
   earthy Peninsula palette (sand, tidal green, ochre) below.
   ========================================================= */

/* ---------- Baskervville ---------- */
@font-face { font-family: "Baskervville"; src: url("../fonts/Baskervville-Regular.ttf")   format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Baskervville"; src: url("../fonts/Baskervville-Italic.ttf")    format("truetype"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Baskervville"; src: url("../fonts/Baskervville-Medium.ttf")    format("truetype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Baskervville"; src: url("../fonts/Baskervville-SemiBold.ttf")  format("truetype"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Baskervville"; src: url("../fonts/Baskervville-Bold.ttf")      format("truetype"); font-weight: 700; font-style: normal; font-display: swap; }

/* ---------- Tokens ---------- */
:root {
  --white:      #ffffff;
  --sand:       #f4eee3;      /* dry sand */
  --sand-deep:  #e7dcc8;      /* wet sand */
  --ochre:      #b07a2a;      /* cliff ochre — the (V), wordmark and headings */
  --ochre-deep: #906422;      /* same hue, 18% deeper — small text, so it stays readable (4.5:1 on sand) */
  --deep:       #1c2a29;      /* tidal green-black: text on ochre, floating controls, hovers */
  --tide:       #1f3a37;      /* deep water */
  /* All text on the light (white / sand) backgrounds is ochre: display type
     (wordmark, section titles) in the exact (V) colour via --ink, everything
     smaller in --ochre-deep. Sections on a dark or ochre ground re-point
     --ink locally. */
  --ink:        var(--ochre);
  --ink-soft:   var(--ochre-deep);
  --stone:      var(--ochre-deep);
  --sea:        var(--ochre-deep);
  --rule:       rgba(28, 42, 41, 0.14);
  --font-serif: "Baskervville", "Times New Roman", Georgia, serif;
  --font-sans:  -apple-system, BlinkMacSystemFont, "Inter", "Helvetica Neue", Arial, sans-serif;

  /* Hero geometry — wordmark size and ribbon photo height are derived
     from the viewport so wordmark + ribbon + pill fit on one screen. */
  --vh100: 100vh;
  --word:  min(18.5vw, 25vh);
  --rh:    clamp(200px, min(calc(var(--vh100) - var(--word) - 340px), 105vw), 560px);   /* 105vw: a single piece never outgrows a narrow screen */
}
@supports (height: 100svh) {
  :root { --vh100: 100svh; --word: min(18.5vw, 25svh); }
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  background: var(--white);
  scrollbar-gutter: stable;       /* reserve scrollbar space so opening the menu doesn't shift the page */
}
body {
  background: var(--white);
  color: var(--ochre-deep);
  font-family: var(--font-serif);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  overflow-x: clip;                 /* clip doesn't create a scroll container, so the sticky bench photo keeps working */
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
.dot { color: var(--ochre); margin: 0 0.45em; }

/* ============================================================
   Top bar: Instagram icon top-right
   ============================================================ */
.topbar {
  position: absolute; top: 0; left: 0; right: 0; z-index: 40;
  pointer-events: none;
}
.ig {
  position: absolute;
  top: 22px;
  right: 24px;
  color: var(--ink);
  pointer-events: auto;
  transition: color 0.2s ease;
}
.ig:hover { color: var(--deep); }

/* ============================================================
   Hero: wordmark, tagline, ribbon
   ============================================================ */
.hero {
  min-height: var(--vh100);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 56px 0 92px;            /* bottom clears the fixed pill */
  background: var(--white);
}
.hero-head { text-align: center; padding: 0 24px; }
.centerpiece {
  user-select: none;
  white-space: nowrap;
  font-weight: 400;
}
.word {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: var(--word);
  line-height: 0.95;
  letter-spacing: 0.02em;
  color: var(--deep);               /* the wordmark stays dark; the (V) beside it is ochre */
  display: inline-block;
}
.cnt {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(14px, calc(var(--word) * 0.08), 30px);
  vertical-align: super;
  margin-left: 6px;
  color: var(--ochre);
}
.tagline {
  margin-top: 16px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--stone);
}

/* ---------- Ribbon ---------- */
.ribbon-wrap { position: relative; margin-top: 18px; }
.ribbon {
  display: flex;
  align-items: flex-start;
  gap: clamp(20px, 1.6vw, 28px);    /* 20px floor keeps long captions visibly apart on phones */
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0 max(7vw, 28px);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  cursor: grab;
  outline: 0;
  /* soft fade where photos leave the screen edge */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
}
.ribbon::-webkit-scrollbar { display: none; }
.ribbon.is-dragging { cursor: grabbing; scroll-behavior: auto; }
.ribbon.is-dragging .tile { pointer-events: none; }

.tile {
  /* a column as wide as the photo or the caption, whichever is wider,
     so long names can never run into their neighbours */
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  -webkit-user-drag: none;
  user-select: none;
}
/* Photos come from images/ribbon/ — each piece cut from its original
   backdrop and re-set on pure white, so tiles sit seamlessly on the page.
   The frame crops only empty white margin; --zoom brings each piece up
   to a similar presence. */
.frame {
  display: block;
  position: relative;
  flex: 0 0 auto;
  width: calc(var(--rh) * var(--ar, 0.75));
  height: var(--rh);
  overflow: hidden;
  background: var(--white);
}
.frame img {
  position: absolute;
  top: 50%; left: 50%;
  height: calc(var(--zoom, 1) * 100%);
  width: auto;
  max-width: none;
  transform: translate(-50%, calc(-50% + var(--dy, 0%))) scale(var(--s, 1));   /* --dy re-centres a piece that sits off-centre in its file */
  transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
  pointer-events: none;
}
.tile:hover, .tile:focus-visible { --s: 1.05; outline: 0; }

.cap {
  display: block;
  margin-top: 10px;
  text-align: center;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 15px;
  color: var(--ink-soft);
  white-space: nowrap;
  transition: color 0.2s ease;
}
.cap .num {
  font-family: var(--font-sans);
  font-style: normal;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--ochre-deep);
  margin-right: 10px;
}
.tile:hover .cap, .tile:focus-visible .cap { color: var(--deep); }

/* Arrows — same glass material as the pill */
.ribbon-arrow {
  position: absolute;
  top: calc(var(--rh) / 2);
  z-index: 5;
  width: 44px; height: 44px;
  margin-top: -22px;
  border-radius: 50%;
  border: 0.5px solid rgba(28, 42, 41, 0.14);
  background: rgba(250, 247, 240, 0.72);
  color: var(--deep);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(40px) saturate(1.9);
  -webkit-backdrop-filter: blur(40px) saturate(1.9);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 1px 2px rgba(0, 0, 0, 0.04),
    0 10px 28px rgba(28, 42, 41, 0.10);
  transition: opacity 0.25s ease, background 0.2s ease;
}
.ribbon-arrow.prev { left: 20px; }
.ribbon-arrow.next { right: 20px; }
.ribbon-arrow:hover { background: rgba(255, 255, 255, 0.92); }
.ribbon-arrow:disabled { opacity: 0; pointer-events: none; }

/* Count · progress hairline · hint */
.ribbon-meta {
  display: flex;
  align-items: center;
  gap: 18px;
  width: min(520px, calc(100% - 48px));
  margin: 22px auto 0;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--stone);
}
.ribbon-count { color: var(--ochre-deep); min-width: 58px; }
.ribbon-track {
  flex: 1;
  height: 1px;
  background: var(--rule);
  position: relative;
}
.ribbon-thumb {
  position: absolute;
  top: -0.5px; left: 0;
  height: 2px;
  width: 30%;
  background: var(--ochre);
  will-change: transform;
}
.hint-touch { display: none; }
@media (hover: none) {
  .hint-mouse { display: none; }
  .hint-touch { display: inline; }
}
.ribbon-hint .arrow { display: inline-block; animation: nudge 2.4s ease-in-out infinite; }
@keyframes nudge {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(5px); }
}

/* Load-in */
.js .hero-head, .js .tile, .js .ribbon-meta {
  opacity: 0;
  transform: translateY(14px);
}
.js.is-ready .hero-head, .js.is-ready .tile, .js.is-ready .ribbon-meta {
  opacity: 1;
  transform: none;
  transition: opacity 0.9s ease, transform 1s cubic-bezier(0.2, 0.7, 0.2, 1);
  transition-delay: calc(var(--i, 0) * 70ms);
}

/* ============================================================
   Bench band — the workbench photograph between hero and About
   ============================================================ */
.bench {
  /* The whole photograph, full width and uncropped (4:3, so 75vw tall).
     Curtain reveal: it scrolls normally until its bottom edge meets the
     bottom of the screen, then holds (sticky) while the About section
     slides up over it. When the photo is shorter than the screen (phones)
     it simply holds at the top instead. Pure CSS — no scroll scripting. */
  position: -webkit-sticky;
  position: sticky;
  top: min(0px, calc(100vh - 75vw));
  z-index: 0;
  width: 100%;
  aspect-ratio: 4 / 3;
  margin: 0;
  overflow: hidden;
  background: #2a2a2a;
}
@supports (height: 100svh) {
  .bench { top: min(0px, calc(100svh - 75vw)); }
}
.bench img { width: 100%; height: 100%; object-fit: cover; }
.bench::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20, 20, 20, 0) 60%, rgba(20, 20, 20, 0.5) 100%);
}
.bench figcaption {
  position: absolute;
  left: 32px; bottom: 28px;
  z-index: 1;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sand);
}
.bench .dot { color: var(--sand-deep); }

/* ============================================================
   Sections (About / Accolades / Contact)
   ============================================================ */
.section {
  padding: 120px 32px;
  background: var(--white);
  position: relative;
  z-index: 1;                       /* slides over the pinned bench photograph */
}
.section.is-sand { background: var(--sand); }
.section.is-tide { background: var(--tide); color: var(--sand); --rule: rgba(244, 238, 227, 0.18); }
.section.is-ochre { --ink: var(--deep); background: var(--ochre); color: var(--deep); --rule: rgba(28, 42, 41, 0.28); }
.section-inner {
  max-width: 1200px;
  margin: 0 auto;
}
.section-eyebrow {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sea);
  margin-bottom: 32px;
}
.is-tide .section-eyebrow { color: var(--sand-deep); }
.is-ochre .section-eyebrow { color: var(--ink); }
.section-title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(32px, 4.6vw, 68px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin-bottom: 72px;
  max-width: 1100px;
  color: var(--ink);
}
.section-title em { font-style: italic; }

/* About */
.about-grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 80px;
  align-items: start;
}
.about-portrait {
  margin: 0;
  aspect-ratio: 2 / 3;              /* matches the photograph, so it shows uncropped */
  background: var(--sand-deep);
  overflow: hidden;
}
.about-portrait img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.about-copy p {
  font-family: var(--font-serif);
  font-size: 18px;
  line-height: 1.65;
  margin-bottom: 22px;
  max-width: 640px;
  color: var(--ink-soft);
}
.about-copy .lede {
  font-size: 22px;
  font-style: italic;
  line-height: 1.45;
  margin-bottom: 32px;
  color: var(--ochre-deep);
}

/* Accolades — museum-plaque list */
.awards {
  list-style: none;
  border-top: 1px solid var(--rule);
  max-width: 1080px;
}
.awards li {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 32px;
  align-items: baseline;
  padding: 22px 0;
  border-bottom: 1px solid var(--rule);
}
.awards .year {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--ochre-deep);
}
.awards .award {
  font-family: var(--font-serif);
  font-size: 19px;
  line-height: 1.4;
}

/* Contact */
.contact-lede {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(20px, 2.4vw, 30px);
  line-height: 1.45;
  max-width: 780px;
  margin-bottom: 60px;
}
.contact-list {
  list-style: none;
  max-width: 780px;
}
.contact-list li {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 32px;
  padding: 18px 0;
  border-top: 1px solid var(--rule);
  align-items: baseline;
}
.contact-list li:last-child { border-bottom: 1px solid var(--rule); }
.contact-list .k {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0.8;
}
.contact-list a, .contact-list span:not(.k) {
  font-family: var(--font-serif);
  font-size: 19px;
  overflow-wrap: anywhere;
}
.contact-list a { border-bottom: 1px solid transparent; transition: border-color 0.2s ease; }
.contact-list a:hover { border-bottom-color: currentColor; }

.foot {
  display: flex; justify-content: space-between; align-items: center;
  padding: 32px 32px 120px;    /* pushed up so pillbar doesn't sit over it */
  border-top: 1px solid rgba(28, 42, 41, 0.28);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(28, 42, 41, 0.8);
  background: var(--ochre);
  position: relative;
  z-index: 1;
}

/* Scroll reveal (class added by JS only, so no-JS shows everything) */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.9s ease, transform 1s cubic-bezier(0.2, 0.7, 0.2, 1); }
.reveal.is-in { opacity: 1; transform: none; }

/* ============================================================
   Detail overlay (opens when a piece is clicked)
   ============================================================ */
.detail {
  position: fixed;
  inset: 0;
  z-index: 90;                 /* below the pillbar (which is 200) */
  background: var(--white);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0s linear 0.4s;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.detail[aria-hidden="false"] {
  opacity: 1; visibility: visible;
  transition: opacity 0.4s ease;
}
.detail-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
  padding: 88px 64px 160px;
  min-height: 100vh;
  max-width: 1400px;
  margin: 0 auto;
}
.detail-img {
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--white);
  transform: translateY(20px);
  opacity: 0;
  transition: opacity 0.5s ease 0.1s, transform 0.6s cubic-bezier(0.2,0.7,0.2,1) 0.1s;
}
.detail[aria-hidden="false"] .detail-img { opacity: 1; transform: none; }
.detail-img img { width: 100%; height: 100%; object-fit: contain; }

.detail-copy {
  padding: 20px 0;
  max-width: 500px;
  transform: translateY(20px);
  opacity: 0;
  transition: opacity 0.5s ease 0.2s, transform 0.6s cubic-bezier(0.2,0.7,0.2,1) 0.2s;
}
.detail[aria-hidden="false"] .detail-copy { opacity: 1; transform: none; }
.detail-eyebrow {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ochre);
  margin-bottom: 20px;
}
.detail-title {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(40px, 5.4vw, 76px);
  line-height: 1;
  letter-spacing: -0.01em;
  margin-bottom: 28px;
}
.detail-desc {
  font-family: var(--font-serif);
  font-size: 18px;
  line-height: 1.65;
  margin-bottom: 40px;
}
.detail-meta > div {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 20px;
  padding: 14px 0;
  border-top: 1px solid var(--rule);
  font-family: var(--font-sans);
  font-size: 13px;
  letter-spacing: 0.03em;
  align-items: baseline;
}
.detail-meta > div:last-child { border-bottom: 1px solid var(--rule); }
.detail-meta dt { color: var(--stone); text-transform: lowercase; letter-spacing: 0.06em; }
.detail-meta dd { color: var(--ink); }

body.detail-open { overflow: hidden; }
body.menu-open   { overflow: hidden; }

/* ============================================================
   Persistent pill navigation (always visible, opens upward)
   ============================================================ */
.pillbar {
  position: fixed;
  /* Sit 22px above the *visual* viewport bottom. --chrome-bottom is set
     by JS from visualViewport, so when iOS Safari's bottom nav bar is
     up, the pill lifts to sit just above it. */
  bottom: calc(var(--chrome-bottom, 0px) + 22px);
  left: 50%;
  transform: translateX(calc(-50% + var(--pillbar-shift, 0px)));
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 200;
  transition: bottom 0.28s cubic-bezier(0.2, 0.7, 0.2, 1),
              transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}
body.detail-open { --pillbar-shift: -25px; }

/* Liquid-glass material, warmed slightly toward sand and given a fine
   dark rim so it still reads against the white hero. */
.pill-piece {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 20px 6px 6px;
  background: rgba(250, 247, 240, 0.72);
  color: var(--deep);
  border: 0.5px solid rgba(28, 42, 41, 0.14);
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 14px;
  cursor: pointer;
  min-width: 220px;
  max-width: 60vw;
  position: relative;
  backdrop-filter: blur(40px) saturate(1.9);
  -webkit-backdrop-filter: blur(40px) saturate(1.9);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    inset 0 -1px 0 rgba(0, 0, 0, 0.02),
    0 1px 2px rgba(0, 0, 0, 0.04),
    0 10px 28px rgba(28, 42, 41, 0.12);
  transition: background 0.2s ease;
}
.pill-piece:hover { background: rgba(255, 255, 255, 0.92); }
.pill-thumb-wrap {
  width: 34px; height: 34px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--white);
  flex: 0 0 auto;
}
.pill-thumb-wrap img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.5); }
.pill-title {
  flex: 1;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
  letter-spacing: 0.01em;
}
.pill-chev {
  color: rgba(28, 42, 41, 0.45);
  display: inline-flex;
  align-items: center;
  transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1);
}
body.menu-open .pill-chev { transform: rotate(180deg); }

.pill-close {
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 0.5px solid rgba(28, 42, 41, 0.14);
  background: rgba(250, 247, 240, 0.72);
  color: var(--deep);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: absolute;
  top: 50%;
  left: 100%;
  margin-left: 8px;
  transform: translate(24px, -50%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  backdrop-filter: blur(40px) saturate(1.9);
  -webkit-backdrop-filter: blur(40px) saturate(1.9);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    inset 0 -1px 0 rgba(0, 0, 0, 0.02),
    0 1px 2px rgba(0, 0, 0, 0.04),
    0 10px 28px rgba(28, 42, 41, 0.12);
  transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1),
              opacity 0.3s ease,
              visibility 0s linear 0.4s,
              background 0.2s ease;
}
.pill-close:hover { background: rgba(255, 255, 255, 0.92); }
body.detail-open .pill-close {
  transform: translate(0, -50%);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1),
              opacity 0.3s ease 0.05s,
              visibility 0s,
              background 0.2s ease;
}

/* Menu panel — slides up from the pillbar */
.menu-panel {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 0;
  min-width: 430px;
  max-width: 92vw;
  padding: 22px 24px 20px;
  background: rgba(250, 247, 240, 0.78);
  color: var(--deep);
  backdrop-filter: blur(40px) saturate(1.9);
  -webkit-backdrop-filter: blur(40px) saturate(1.9);
  border: 0.5px solid rgba(28, 42, 41, 0.14);
  border-radius: 22px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    inset 0 -1px 0 rgba(0, 0, 0, 0.02),
    0 1px 2px rgba(0, 0, 0, 0.04),
    0 24px 60px rgba(28, 42, 41, 0.16);
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 26px;
  opacity: 0;
  transform: translateY(10px) scale(0.98);
  transform-origin: 30% 100%;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.32s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.menu-panel[aria-hidden="false"] {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.menu-heading {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(28, 42, 41, 0.55);
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--rule);
}
.menu-list { list-style: none; }
.menu-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 8px;
  min-height: 48px;                      /* same row height as a Works item */
  border: 0;
  background: transparent;
  color: var(--deep);
  font-family: var(--font-serif);
  font-size: 16px;
  letter-spacing: 0.005em;
  cursor: pointer;
  border-radius: 10px;
  text-align: left;
  transition: background 0.15s ease;
}
/* Sections don't have a thumb, so pad their text over to the same
   x-position as Works text (8px base + 30px thumb + 12px gap). */
.menu-item:not(.is-piece) {
  padding-left: 50px;
}
.menu-item:hover, .menu-item:focus-visible { background: rgba(28, 42, 41, 0.06); outline: 0; }
.menu-item.is-current { background: rgba(28, 42, 41, 0.09); }
.menu-thumb {
  width: 30px; height: 30px;
  border-radius: 6px;
  overflow: hidden;
  background: var(--white);
  flex: 0 0 auto;
}
.menu-thumb img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.5); }

/* Backdrop click-to-close for menu */
.menu-backdrop {
  position: fixed; inset: 0;
  z-index: 150;
  background: transparent;
  display: none;
}
body.menu-open .menu-backdrop { display: block; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 900px) {
  .ig { top: 20px; right: 20px; }

  .section { padding: 88px 20px; }
  .about-grid { grid-template-columns: 1fr; gap: 40px; }
  .about-portrait { max-width: 460px; }
  .awards li, .contact-list li { grid-template-columns: 90px 1fr; gap: 20px; }
  .bench figcaption { left: 20px; right: 20px; bottom: 22px; line-height: 1.7; }

  .detail-inner { grid-template-columns: 1fr; gap: 40px; padding: 70px 20px 140px; }
  .detail-img { max-width: 500px; margin: 0 auto; width: 100%; }
  .detail-copy { padding: 0; margin: 0 auto; }
  .detail-meta > div { grid-template-columns: 110px 1fr; }

  .pill-piece {
    min-width: 152px;
    max-width: 78vw;
    padding: 6px 14px 6px 5px;
    font-size: 13px;
    border-radius: 20px;
  }
  .pill-thumb-wrap { width: 30px; height: 30px; }
  .pill-close      { width: 40px; height: 40px; }

  .menu-panel {
    min-width: 300px;
    grid-template-columns: 1fr;
    gap: 18px;
  }
}

@media (max-width: 700px) {
  :root { --word: min(27vw, 22vh); }
  @supports (height: 100svh) { :root { --word: min(27vw, 22svh); } }

  .hero { padding-top: 76px; }
  .tagline { font-size: 10.5px; letter-spacing: 0.16em; line-height: 1.9; }
  /* phrases wrap whole, and the separators go, so no dot dangles at a line end */
  .tagline .seg { display: inline-block; margin: 0 0.6em; white-space: nowrap; }
  .tagline .dot { display: none; }
  .ribbon { padding: 0 24px; -webkit-mask-image: none; mask-image: none; }
  .ribbon-arrow { display: none; }        /* swipe on touch */
  .cap { font-size: 14px; }
}

@media (max-width: 520px) {
  /* Instagram icon: the 66×66 desktop size is too much on a phone. */
  .ig svg { width: 32px; height: 32px; }
  .ig { top: 16px; right: 16px; }
  .foot { flex-direction: column; gap: 8px; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .hero-head, .js .tile, .js .ribbon-meta, .reveal { opacity: 1; transform: none; transition: none; }
  .frame img,
  .detail, .detail-img, .detail-copy,
  .menu-panel, .pill-chev { transition: none; }
  .ribbon-hint .arrow { animation: none; }
}

/* ============================================================
   TEMPORARY: hide piece copy in the detail overlay until real
   descriptions are ready. Click still opens the large image;
   the pill-close X still returns you to the ribbon. Lift this
   whole block to restore the copy layout.
   ============================================================ */
.detail-copy { display: none; }
.detail-inner {
  grid-template-columns: 1fr;
  max-width: 720px;
  margin: 0 auto;
  padding: 88px 32px 160px;
}
.detail-img {
  max-width: 640px;
  width: 100%;
  margin: 0 auto;
  aspect-ratio: auto;
  background: transparent;
}
.detail-img img { height: auto; }
@media (max-width: 900px) {
  .detail-inner { padding: 70px 20px 140px; }
}