/* =========================================================
   LEE ANCHOR SCULPTURE — design tokens
   Palette pulled from the material world of the studio:
   raw stoneware, kiln atmosphere, and two glaze notes.
   ========================================================= */
:root{
  --stone:        #EAE4D8;   /* unglazed clay body — page background */
  --stone-deep:   #DCD3C1;   /* shadowed clay — section separators   */
  --ink:          #211E1A;   /* fired body, warm near-black — text   */
  --kiln:         #211C18;   /* kiln chamber — dark section bg       */
  --kiln-deep:    #17130F;
  --glaze-teal:   #35646B;   /* copper-carbonate glaze — primary accent */
  --glaze-teal-d: #234249;
  --glaze-red:    #9C3B2C;   /* iron/oxblood glaze — sparing accent  */
  --paper:        #F3EFE6;   /* lighter card surface on stone        */
  --line:         rgba(33,30,26,0.14);
  --line-on-dark: rgba(234,228,216,0.18);

  --font-display: "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;

  --container: 1180px;
  --gutter: clamp(20px, 5vw, 64px);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--stone);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
/* The mobile nav drawer parks off-canvas to the right; this stops it creating
   a sideways scroll on tablet and phone.
   Must be `clip`, not `hidden` — `overflow-x:hidden` turns these into scroll
   containers, which silently stops `position:sticky` working on the header. */
html{ overflow-x:clip; }
body{ overflow-x:clip; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3{ font-family:var(--font-display); font-weight:600; margin:0; letter-spacing:-0.01em; }
p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:0.001ms !important; transition-duration:0.001ms !important; }
}

/* ---------- utility ---------- */
.wrap{ max-width:var(--container); margin:0 auto; padding-left:var(--gutter); padding-right:var(--gutter); }
.eyebrow{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--glaze-teal-d);
}
.eyebrow.on-dark{ color:#9FC2C4; }
.eyebrow.red{ color:var(--glaze-red); }

.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-mono); font-size:13px; letter-spacing:0.04em;
  text-transform:uppercase; padding:14px 22px;
  border:1px solid var(--ink); color:var(--ink);
  transition:background .25s ease, color .25s ease, border-color .25s ease;
}
.btn:hover{ background:var(--ink); color:var(--stone); }
.btn.on-dark{ border-color:var(--stone); color:var(--stone); }
.btn.on-dark:hover{ background:var(--stone); color:var(--kiln); }
.btn.solid{ background:var(--glaze-teal); border-color:var(--glaze-teal); color:#fff; }
.btn.solid:hover{ background:var(--glaze-teal-d); border-color:var(--glaze-teal-d); }

.link-arrow{
  font-family:var(--font-mono); font-size:13px; text-transform:uppercase;
  letter-spacing:0.04em; border-bottom:1px solid currentColor; padding-bottom:2px;
}

/* ---------- texture: fine clay-surface grain, used sparingly ---------- */
.grain{ position:relative; }
.grain::after{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  opacity:0.05;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
.on-dark .grain::after{ opacity:0.08; mix-blend-mode:overlay; }

/* =========================================================
   HEADER
   ========================================================= */
.site-header{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:22px var(--gutter);
  background:rgba(234,228,216,0.9);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
}
.wordmark{ font-family:var(--font-display); font-size:19px; font-weight:600; letter-spacing:-0.01em; }
.wordmark em{ font-style:italic; font-weight:400; color:var(--glaze-teal-d); margin-left:6px; }
.header-right{ display:flex; align-items:center; gap:26px; }
.site-nav{ display:flex; gap:32px; }
.site-nav a{
  font-family:var(--font-mono); font-size:13px; letter-spacing:0.06em;
  text-transform:uppercase; padding-bottom:3px; border-bottom:1px solid transparent;
  transition:border-color .2s ease;
}
.site-nav a:hover, .site-nav a.active{ border-color:var(--glaze-teal); }
.nav-icons{ display:flex; align-items:center; gap:18px; }
.nav-icons a{ display:flex; color:var(--ink); transition:color .2s ease; }
.nav-icons a:hover{ color:var(--glaze-teal-d); }
.nav-icons svg{ width:19px; height:19px; }

.nav-toggle{
  display:none; background:none; border:1px solid var(--ink); border-radius:0;
  width:38px; height:38px; align-items:center; justify-content:center; cursor:pointer;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
  content:""; display:block; width:16px; height:1px; background:var(--ink);
  position:relative; transition:transform .2s ease;
}
.nav-toggle span::before{ position:absolute; top:-5px; }
.nav-toggle span::after{ position:absolute; top:5px; }

@media (max-width: 820px){
  .site-nav{
    position:fixed; inset:0 0 0 auto; top:73px;
    flex-direction:column; gap:0; width:min(78vw,320px);
    background:var(--stone); border-left:1px solid var(--line);
    padding:8px var(--gutter) 30px;
    transform:translateX(100%); transition:transform .3s ease;
    height:calc(100vh - 73px); overflow-y:auto;
  }
  .site-nav.open{ transform:translateX(0); }
  .site-nav a{ padding:16px 0; border-bottom:1px solid var(--line); width:100%; }
  .nav-toggle{ display:flex; }
}

/* =========================================================
   HERO — split layout: full, uncropped sculpture image on one
   side, a solid dark panel carrying the text on the other, so
   a tall vertical piece is never cropped top/bottom.
   ========================================================= */
.hero{
  display:grid;
  grid-template-columns:1.05fr 1fr;
  align-items:stretch;
  background:var(--kiln);
  color:var(--stone);
}
.hero-media{ position:relative; aspect-ratio:3/4; overflow:hidden; background:#171310; }
.hero-media .ph{ position:absolute; inset:0; }
.hero-content{
  position:relative; display:flex; flex-direction:column; justify-content:center;
  padding:56px var(--gutter); background:var(--kiln);
}
.hero-content .eyebrow{ margin-bottom:18px; }
.hero h1{ font-size:clamp(34px, 4.6vw, 66px); line-height:0.98; max-width:11ch; }
.hero-sub{ margin-top:22px; max-width:38ch; font-size:clamp(15px,1.6vw,17px); color:#D8D1C2; }
.hero-meta{
  margin-top:36px; display:flex; flex-direction:column; gap:22px;
  font-family:var(--font-mono); font-size:12px; letter-spacing:0.08em;
  text-transform:uppercase; color:#A79C87;
}
.hero-meta strong{ display:block; color:var(--stone); font-family:var(--font-body); font-size:15px; text-transform:none; letter-spacing:0; margin-top:6px; }
.hero-meta .meta-desc{
  display:block; margin-top:6px; font-family:var(--font-body); font-size:13px;
  text-transform:none; letter-spacing:0; color:#9C927E;
}

@media (max-width: 880px){
  .hero{ grid-template-columns:1fr; }
  .hero-media{ aspect-ratio:4/5; }
  .hero-content{ padding:44px var(--gutter) 56px; }
  .hero h1{ max-width:9ch; }
}

.play-btn{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:68px; height:68px; border-radius:50%;
  background:rgba(20,17,14,0.28);
  border:1px solid rgba(234,228,216,0.75);
  backdrop-filter:blur(2px);
  display:flex; align-items:center; justify-content:center;
  z-index:3; transition:background .2s ease, transform .2s ease, border-color .2s ease;
}
.play-btn:hover{ background:rgba(20,17,14,0.45); border-color:#fff; transform:translate(-50%,-50%) scale(1.07); }
.play-btn svg{ width:20px; height:22px; margin-left:3px; }
.play-btn polygon{ fill:var(--stone); }
.play-btn.small{ width:42px; height:42px; }
.play-btn.small svg{ width:13px; height:14px; margin-left:2px; }

/* =========================================================
   PLACEHOLDER IMAGE SWATCHES
   Stand-ins for real photography — see /images/README.md
   ========================================================= */
.ph{
  position:relative; width:100%; height:100%; min-height:220px;
  display:flex; align-items:flex-end; overflow:hidden;
}
.ph::before{ content:""; position:absolute; inset:0; }
.ph-label{
  position:relative; z-index:1; margin:14px;
  font-family:var(--font-mono); font-size:11px; letter-spacing:0.03em;
  color:rgba(255,255,255,0.82); background:rgba(0,0,0,0.28); padding:6px 10px;
}
.ph-1::before{ background:linear-gradient(135deg,#4d6c6f,#233c3f 60%,#12211f); }
.ph-2::before{ background:linear-gradient(135deg,#8a3b2c,#4c2119 65%,#241210); }
.ph-3::before{ background:linear-gradient(135deg,#a79572,#5d4d33 60%,#2c2417); }
.ph-4::before{ background:linear-gradient(135deg,#5b5b52,#312e28 60%,#18160f); }
.ph-5::before{ background:linear-gradient(135deg,#6f7d63,#37402f 60%,#1c2016); }
.ph-6::before{ background:linear-gradient(135deg,#7d5f6e,#3e2e37 60%,#1f171b); }
.ph-portrait::before{ background:linear-gradient(160deg,#8f826a,#463c2c 65%,#221d15); }
.ph::after{
  content:""; position:absolute; inset:0; opacity:0.16; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
.ph.has-photo::before, .ph.has-photo::after{ display:none; }
.ph img{ position:absolute; inset:0; z-index:0; width:100%; height:100%; object-fit:cover; }

/* =========================================================
   STATEMENT STRIP
   ========================================================= */
.statement{ padding:110px var(--gutter); max-width:820px; margin:0 auto; text-align:left; }
.statement p{
  font-family:var(--font-display); font-weight:400; font-style:italic;
  font-size:clamp(24px,3.4vw,36px); line-height:1.4; color:var(--ink);
}
.statement cite{
  display:block; margin-top:28px; font-family:var(--font-mono); font-style:normal;
  font-size:12px; letter-spacing:0.08em; text-transform:uppercase; color:var(--glaze-teal-d);
}
/* the line that bridges the architecture years and the clay, sitting quietly
   under the artist statement */
.statement .bridge{
  font-family:var(--font-body); font-style:normal; font-size:17px; line-height:1.85;
  color:#4a4438; margin-top:34px; padding-top:26px;
  border-top:1px solid var(--line); max-width:66ch;
}
@media (max-width:720px){ .statement .bridge{ font-size:16px; } }

/* =========================================================
   SECTION HEADINGS
   ========================================================= */
.section-head{
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:24px; flex-wrap:wrap; padding:0 var(--gutter); margin-bottom:56px;
}
.section-head h2{ font-size:clamp(30px,4vw,44px); }
.section-head .eyebrow{ margin-bottom:14px; }

/* =========================================================
   WORK GRID (asymmetric, editorial)
   ========================================================= */
/* align-items:start matters here. Without it the cards stretch to the row height,
   the aspect-ratio image box keeps its own height, and the caption is pushed out of
   the card and drawn underneath the next row's photograph. Same trap as .cat-grid. */
.work-grid{ padding:0 var(--gutter) 130px; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:40px 32px; align-items:start; }
.work-grid > a{ display:block; color:inherit; }
.work-grid .work-card{ height:100%; }
.work-card{ display:block; }
.work-card .ph{ aspect-ratio:4/5; }
.work-card figcaption{
  margin-top:14px; display:flex; flex-wrap:wrap; justify-content:space-between;
  align-items:baseline; gap:4px 12px;
  border-top:1px solid var(--line); padding-top:12px;
}
.work-card .piece-title{ font-family:var(--font-display); font-size:17px; min-width:0; }
/* the same slow hover zoom the category grids use, so the home page behaves
   like the rest of the site rather than sitting still */
.work-grid .work-card .ph img{ transition:transform .5s ease; }
.work-grid a:hover .work-card .ph img{ transform:scale(1.04); }
.work-grid .work-card .piece-title{ transition:color .2s ease; }
.work-grid a:hover .work-card .piece-title{ color:var(--glaze-teal-d); }
.work-card .piece-spec{ font-family:var(--font-mono); font-size:11px; color:#6b6355; text-align:right; letter-spacing:0.02em; white-space:nowrap; }
/* Two narrow columns cannot hold a title and a nowrap dimension line side by side —
   below this the grid goes to one column and the caption stacks, so the dimensions
   can never push out past the edge of the card. */
@media (max-width: 780px){
  .work-grid{ grid-template-columns:minmax(0,1fr); }
  .work-card figcaption{ display:block; }
  .work-card .piece-spec{ display:block; text-align:left; white-space:normal; margin-top:5px; }
}

.view-all{ padding:0 var(--gutter) 130px; }

/* =========================================================
   FIRING TEASER (dark kiln band)
   ========================================================= */
.firing{ background:var(--kiln); color:var(--stone); padding:120px var(--gutter); position:relative; }
.firing-inner{ max-width:820px; margin:0 auto; text-align:center; }
.firing .cone{
  width:34px; height:34px; margin:0 auto 30px;
  border-left:1px solid #7d7364; border-right:1px solid #7d7364; border-bottom:1px solid #7d7364;
  clip-path:polygon(50% 0, 100% 100%, 0 100%);
  background:linear-gradient(180deg, transparent, rgba(157,60,44,0.4));
}
.firing h2{ font-size:clamp(30px,4.4vw,46px); margin-bottom:22px; }
.firing p.lead{ font-size:17px; color:#C9C0AC; max-width:52ch; margin:0 auto; }
.firing-status{
  display:inline-flex; align-items:center; gap:10px; margin:34px auto 6px;
  font-family:var(--font-mono); font-size:12px; letter-spacing:0.1em; text-transform:uppercase; color:#9FC2C4;
}
.firing-status .dot{ width:7px; height:7px; border-radius:50%; background:var(--glaze-teal); box-shadow:0 0 0 3px rgba(53,100,107,0.35); }
.firing form{ margin-top:34px; display:flex; gap:0; justify-content:center; flex-wrap:wrap; border:1px solid var(--line-on-dark); }
.firing input[type="email"]{ flex:1 1 260px; min-width:0; background:transparent; border:none; color:var(--stone); font-family:var(--font-mono); font-size:14px; padding:16px 18px; }
.firing input[type="email"]::placeholder{ color:#8b8271; }
.firing button{
  background:var(--glaze-teal); color:#fff; border:none; padding:16px 26px;
  font-family:var(--font-mono); font-size:13px; letter-spacing:0.06em; text-transform:uppercase;
  cursor:pointer; transition:background .2s ease;
}
.firing button:hover{ background:var(--glaze-teal-d); }
.firing-note{ margin-top:16px; font-size:12px; color:#867c6b; }
.link-arrow.on-dark{ color:#9FC2C4; }

/* =========================================================
   ABOUT TEASER (home) / ABOUT PAGE
   ========================================================= */
.about-teaser{ padding:130px var(--gutter); display:grid; grid-template-columns:0.85fr 1.15fr; gap:64px; align-items:center; }
.about-teaser .ph{ aspect-ratio:4/5; }
.about-teaser h2{ font-size:clamp(28px,4vw,40px); margin-bottom:24px; }
.about-teaser p{ font-size:17px; color:#413B32; max-width:52ch; }
.about-teaser p + p{ margin-top:16px; }
.about-teaser .link-arrow{ display:inline-block; margin-top:30px; }
@media (max-width: 820px){ .about-teaser{ grid-template-columns:1fr; gap:36px; } }

/* =========================================================
   INSTAGRAM REEL — "Follow my Instas"
   ========================================================= */
.instagram{ padding:20px 0 120px; }
.instagram .section-head{ margin-bottom:34px; }
.insta-reel{
  display:flex; gap:16px; overflow-x:auto; padding:0 var(--gutter) 10px;
  scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
}
.insta-reel::-webkit-scrollbar{ height:6px; }
.insta-reel::-webkit-scrollbar-thumb{ background:var(--line); }
.insta-tile{
  flex:0 0 clamp(160px,22vw,240px); aspect-ratio:1/1; position:relative;
  scroll-snap-align:start; overflow:hidden; display:block;
}
.insta-tile .ph{ width:100%; height:100%; }
.insta-tile-overlay{
  position:absolute; inset:0; z-index:2; display:flex; align-items:flex-end; padding:14px;
  background:linear-gradient(0deg, rgba(15,12,10,0.55) 0%, rgba(15,12,10,0) 45%);
  opacity:0; transition:opacity .2s ease;
}
.insta-tile:hover .insta-tile-overlay{ opacity:1; }
.insta-tile-overlay span{ font-family:var(--font-mono); font-size:11px; letter-spacing:0.04em; text-transform:uppercase; color:var(--stone); }
.insta-tile .play-btn.small{ opacity:0.92; }
.insta-tile:hover .play-btn.small{ opacity:1; }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{ border-top:1px solid var(--line); padding:60px var(--gutter) 40px; display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:32px; }
.site-footer .f-brand{ font-family:var(--font-display); font-size:20px; }
.site-footer .f-brand span{ display:block; font-family:var(--font-mono); font-size:12px; letter-spacing:0.06em; text-transform:uppercase; color:#6b6355; margin-top:10px; }
.site-footer h4{ font-family:var(--font-mono); font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:#6b6355; margin-bottom:14px; }
.site-footer li{ margin-bottom:8px; }
.site-footer a:hover{ color:var(--glaze-teal-d); }
.f-bottom{
  max-width:var(--container); margin:40px auto 0; padding:20px var(--gutter) 0; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
  font-family:var(--font-mono); font-size:11px; color:#877d6c;
}
@media (max-width: 700px){ .site-footer{ grid-template-columns:1fr; } }

/* =========================================================
   INNER PAGE HEADER (Work / About / Contact)
   ========================================================= */
.page-hero{ padding:180px var(--gutter) 70px; border-bottom:1px solid var(--line); }
.page-hero h1{ font-size:clamp(42px,7vw,84px); max-width:16ch; }
.page-hero p{ margin-top:20px; max-width:58ch; font-size:17px; color:#413B32; }

/* =========================================================
   FULL WORK GALLERY PAGE
   ========================================================= */
.gallery{ padding:80px var(--gutter) 140px; display:grid; grid-template-columns:repeat(3,1fr); gap:30px 28px; }
.gallery .ph{ aspect-ratio:1/1; }
@media (max-width: 900px){ .gallery{ grid-template-columns:1fr 1fr; } }
@media (max-width: 560px){ .gallery{ grid-template-columns:1fr; } }

/* =========================================================
   ABOUT PAGE
   ========================================================= */
.about-body{ padding:20px var(--gutter) 130px; display:grid; grid-template-columns:minmax(0,0.8fr) minmax(0,1.2fr); gap:70px; align-items:start; }
.about-body .ph-portrait-wrap .ph{ aspect-ratio:4/5; }
.about-body .bio p{ font-size:17px; color:#3A342B; max-width:60ch; }
.about-body .bio p + p{ margin-top:18px; }
.about-body h3{ font-size:20px; margin:44px 0 18px; }
.cv-list li{ display:flex; gap:20px; font-size:14px; padding:12px 0; border-top:1px solid var(--line); }
.cv-list li:last-child{ border-bottom:1px solid var(--line); }
.cv-year{ font-family:var(--font-mono); color:#6b6355; min-width:52px; }
/* second line of a two-line exhibition entry — the qualification and venue */
.cv-sub{ display:block; margin-top:3px; color:#6b6355; font-size:13px; line-height:1.6; }
@media (max-width: 820px){ .about-body{ grid-template-columns:1fr; gap:40px; } }

/* =========================================================
   CONTACT PAGE
   ========================================================= */
.contact-body{ padding:20px var(--gutter) 140px; display:grid; grid-template-columns:1fr 1fr; gap:70px; }
.contact-form label{ display:block; font-family:var(--font-mono); font-size:11px; letter-spacing:0.06em; text-transform:uppercase; color:#6b6355; margin-bottom:8px; }
.contact-form .field{ margin-bottom:26px; }
.contact-form input, .contact-form textarea, .contact-form select{
  width:100%; background:var(--paper); border:1px solid var(--line); padding:14px 16px;
  font-family:var(--font-body); font-size:15px; color:var(--ink);
}
.contact-form textarea{ min-height:140px; resize:vertical; }
.contact-form input:focus, .contact-form textarea:focus, .contact-form select:focus{ outline:2px solid var(--glaze-teal); outline-offset:1px; }
.contact-side h3{ font-size:20px; margin-bottom:16px; }
.contact-side .info-block{ margin-bottom:38px; }
.contact-side .info-block p, .contact-side .info-block a{ font-size:15px; color:#3A342B; display:block; margin-top:6px; }
.contact-side .info-block a:hover{ color:var(--glaze-teal-d); }
@media (max-width: 820px){ .contact-body{ grid-template-columns:1fr; gap:50px; } }

/* Story page — full-width collage */
.story-collage-wrap{
  max-width:1400px; margin:0 auto; padding:0 var(--gutter);
}
.story-collage-wrap img{
  width:100%; height:auto; display:block; border:1px solid var(--line);
}
/* Story page — About text, aligned to the collage width */
.story-about{
  max-width:1400px; margin:0 auto; padding:64px var(--gutter) 120px;
}
.story-about p{
  font-size:18px; line-height:1.8; color:#4a4438; margin-bottom:26px;
  max-width:820px; margin-left:auto; margin-right:auto;
}
.story-about h3{
  font-family:var(--font-display); font-size:26px; margin-bottom:32px;
  max-width:820px; margin-left:auto; margin-right:auto;
}
.story-about .story-lead p{
  font-size:22px; line-height:1.7; color:var(--ink); margin-bottom:30px;
}
.story-about h4{
  font-family:var(--font-display); font-size:19px; margin:38px auto 12px;
  max-width:820px;
}
/* the discipline line that sits under a heading */
.story-about .story-tag{
  font-family:var(--font-mono); font-size:12px; letter-spacing:0.07em;
  text-transform:uppercase; color:#877d6c; line-height:1.9;
  max-width:820px; margin:-18px auto 30px;
}
.story-about h3 + .story-tag{ margin-top:-20px; }
.story-about ul{
  max-width:820px; margin:0 auto 26px; padding-left:22px;
  list-style:disc outside;
}
.story-about ul li::marker{ color:#a89f8d; }
.story-about ul li{
  font-size:18px; line-height:1.8; color:#4a4438; margin-bottom:12px;
}
.story-about hr{
  max-width:820px; margin:56px auto; border:0; border-top:1px solid var(--line);
}
.story-about .fine-print{ font-size:14px; color:#877d6c; }
@media (max-width:720px){
  .story-about p{ font-size:16px; }
  .story-about ul li{ font-size:16px; }
  .story-about .story-lead p{ font-size:19px; }
}

/* =========================================================
   PROCESS PAGE
   ========================================================= */
.process-body{
  max-width:1180px; margin:0 auto; padding:80px var(--gutter) 120px;
  display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:start;
}
.process-text{ position:sticky; top:110px; }
.process-text p{ font-size:16px; color:#3A342B; margin-bottom:20px; line-height:1.7; }
.process-text p:first-child{
  font-family:var(--font-display); font-size:clamp(20px,2.2vw,25px);
  font-style:italic; color:var(--ink); line-height:1.5;
}
.process-figure{ margin:0; }
.process-figure img{ width:100%; height:auto; display:block; border:1px solid var(--line); }
.process-figure figcaption{
  margin-top:14px; font-family:var(--font-mono); font-size:12px;
  letter-spacing:0.04em; color:#6b6355; text-align:center;
}
@media (max-width:820px){
  .process-body{ grid-template-columns:1fr; gap:40px; padding-top:50px; }
  .process-text{ position:static; }
}

/* =========================================================
   WORK GALLERY — CLICKABLE CARDS
   ========================================================= */
.work-cards{
  max-width:1200px; margin:0 auto; padding:70px var(--gutter) 120px;
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:36px 30px; align-items:start;
}
.work-card-link{ display:block; color:inherit; }
.work-card-link .ph{
  aspect-ratio:4/5; overflow:hidden; position:relative;
  border:1px solid var(--line); background:var(--paper);
}
.work-card-link .ph img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .5s ease;
}
.work-card-link:hover .ph img{ transform:scale(1.04); }
.work-card-link figcaption{ padding:16px 2px 0; }
.work-card-link .piece-title{
  display:block; font-family:var(--font-display); font-size:20px;
  color:var(--ink); margin-bottom:4px;
}
.work-card-link .piece-spec{
  display:block; font-family:var(--font-mono); font-size:12px;
  letter-spacing:0.03em; color:#6b6355;
}
.work-card-link .view-piece{
  display:inline-block; margin-top:10px; font-family:var(--font-mono);
  font-size:11px; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--glaze-teal-d); border-bottom:1px solid transparent;
  transition:border-color .2s ease;
}
.work-card-link:hover .view-piece{ border-color:var(--glaze-teal); }
@media (max-width:900px){ .work-cards{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px){ .work-cards{ grid-template-columns:1fr; } }

/* =========================================================
   SINGLE PIECE PAGE
   ========================================================= */
.piece-back{
  max-width:900px; margin:0 auto; padding:36px var(--gutter) 0;
}
.piece-back a{
  font-family:var(--font-mono); font-size:12px; letter-spacing:0.05em;
  text-transform:uppercase; color:var(--glaze-teal-d);
}
.piece-hero{
  max-width:900px; margin:24px auto 0; padding:0 var(--gutter);
}
.piece-hero img{
  width:100%; height:auto; display:block; border:1px solid var(--line);
}
.piece-gallery{
  max-width:900px; margin:44px auto 0; padding:0 var(--gutter);
  display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:16px;
}
.piece-gallery img{ width:100%; height:auto; display:block; border:1px solid var(--line); }
.piece-gallery.single{ max-width:620px; }
/* two drawings of different height, sat on a common baseline rather than
   hanging from a common top edge */
.piece-gallery.baseline{ align-items:end; }
.piece-gallery.finished-pending{ max-width:620px; }
.photo-pending{
  aspect-ratio:4/5; border:1.5px dashed var(--line);
  display:flex; align-items:center; justify-content:center; text-align:center;
  background:rgba(0,0,0,0.015);
}
.photo-pending span{
  font-family:var(--font-mono); font-size:12px; letter-spacing:0.05em;
  text-transform:uppercase; color:#a89f8d; line-height:1.7;
}
.piece-body{
  max-width:760px; margin:0 auto; padding:56px var(--gutter) 120px;
}
.piece-body .eyebrow{ margin-bottom:10px; }
.piece-body h1{
  font-family:var(--font-display); font-size:clamp(30px,4.5vw,44px);
  margin-bottom:14px;
}
.piece-dims{
  font-family:var(--font-mono); font-size:13px; letter-spacing:0.04em;
  color:#6b6355; margin-bottom:40px; padding-bottom:24px;
  border-bottom:1px solid var(--line);
}
.piece-body h3{
  font-family:var(--font-display); font-size:21px; margin:44px 0 16px;
}
.piece-body p{
  font-size:18px; line-height:1.8; color:#4a4438; margin-bottom:24px;
}
.piece-body .piece-lead{
  font-family:var(--font-display); font-style:italic; font-weight:400;
  font-size:clamp(20px,2.4vw,26px); line-height:1.5; color:var(--ink);
  margin-bottom:30px;
}
.piece-body blockquote{
  margin:0 0 28px; padding:4px 0 4px 28px; border-left:2px solid var(--glaze-teal);
  font-family:var(--font-display); font-style:italic; font-size:19px;
  line-height:1.7; color:#3A342B;
}
.piece-body .fine-print{ font-size:14px; color:#877d6c; margin-top:36px; }
@media (max-width:600px){
  .piece-body p{ font-size:16px; }
  .piece-gallery{ grid-template-columns:1fr; }
}

/* =========================================================
   FIRING SERVICE PAGE
   ========================================================= */
.status-pill{
  display:inline-flex; align-items:center; gap:10px; margin-top:24px;
  font-family:var(--font-mono); font-size:12px; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--glaze-teal-d);
}
.status-pill .dot{ width:7px; height:7px; border-radius:50%; background:var(--glaze-teal); box-shadow:0 0 0 3px rgba(53,100,107,0.25); }

.pricing-grid{
  padding:80px var(--gutter) 40px;
  display:grid; grid-template-columns:repeat(3,1fr); gap:28px;
}
.price-card{
  border:1px solid var(--line); background:var(--paper);
  padding:38px 28px; text-align:center;
}
.price-card h3{ font-family:var(--font-display); font-size:21px; margin-bottom:8px; }
.price-card .temp{
  font-family:var(--font-mono); font-size:12px; color:var(--glaze-teal-d);
  letter-spacing:0.08em; text-transform:uppercase; margin-bottom:22px;
}
.price-card .price{ font-family:var(--font-display); font-size:30px; margin-bottom:10px; }
.price-card .note{ font-size:13px; color:#6b6355; line-height:1.5; }
@media (max-width: 820px){ .pricing-grid{ grid-template-columns:1fr; } }

.pricing-caption{
  padding:0 var(--gutter) 100px; max-width:680px; margin:0 auto; text-align:center;
  font-size:14px; color:#6b6355;
}

.info-section{ padding:0 var(--gutter) 30px; max-width:780px; margin:0 auto; }
.info-section h3{ font-family:var(--font-display); font-size:22px; margin:56px 0 18px; }
.info-section h3:first-child{ margin-top:0; }
.info-section p{ font-size:15px; color:#3A342B; }
.info-list li{
  font-size:15px; color:#3A342B; padding:12px 0; border-top:1px solid var(--line);
}
.info-list li:last-child{ border-bottom:1px solid var(--line); }
.checklist li{
  font-size:15px; color:#3A342B; padding:12px 0 12px 30px; position:relative;
  border-top:1px solid var(--line);
}
.checklist li:last-child{ border-bottom:1px solid var(--line); }
.checklist li::before{
  content:"—"; position:absolute; left:0; color:var(--glaze-teal-d);
}
.info-section .fine-print{ margin-top:40px; font-size:13px; color:#877d6c; }
/* short lists inside a text section — used by Good & Evil */
.info-section ul.plain-list{ margin:0 0 22px; padding-left:22px; list-style:disc outside; }
.info-section ul.plain-list li{ font-size:15px; line-height:1.9; color:#3A342B; }
.info-section ul.plain-list li::marker{ color:#a89f8d; }

/* Story page — smaller portrait, generous surrounding whitespace */
.story-body{
  max-width:1140px;
  margin:0 auto;
  padding:90px var(--gutter) 130px;
  display:grid;
  grid-template-columns:minmax(240px,360px) 1fr;
  gap:110px;
  align-items:start;
}
.story-body .ph-portrait-wrap{ max-width:360px; }
.story-body .ph-portrait-wrap .ph{ aspect-ratio:4/5; }
.story-body .bio .lead{ color:#3A342B; }
.story-body .bio p{ color:#5C5548; }
@media (max-width:900px){
  .story-body{ grid-template-columns:1fr; gap:50px; padding-top:60px; }
  .story-body .ph-portrait-wrap{ max-width:340px; margin:0 auto; }
}

/* focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{ outline:2px solid var(--glaze-teal); outline-offset:2px; }

/* =========================================================
   WORKS DROPDOWN
   ========================================================= */
.has-sub{ position:relative; display:flex; align-items:center; gap:5px; }
.sub-toggle{
  background:none; border:0; padding:0 0 3px; cursor:pointer;
  color:var(--ink); display:flex; align-items:center;
}
/* "Works" is a label that opens the category list, not a link to a page of
   its own — the six categories in the dropdown are the destinations. */
.works-label{
  background:none; border:0; border-bottom:1px solid transparent; padding:0 0 3px;
  cursor:pointer; color:var(--ink);
  font-family:var(--font-mono); font-size:13px; letter-spacing:0.06em;
  text-transform:uppercase; transition:border-color .2s ease;
}
.works-label:hover, .works-label.is-active, .has-sub.open .works-label{
  border-color:var(--glaze-teal);
}
.sub-toggle svg{ width:11px; height:11px; transition:transform .2s ease; }
.has-sub.open .sub-toggle svg{ transform:rotate(180deg); }
/* invisible bridge so the pointer can travel down into the panel */
.has-sub::after{ content:""; position:absolute; top:100%; left:0; right:0; height:18px; }
.subnav{
  display:none; position:absolute; top:calc(100% + 18px); left:0; z-index:60;
  min-width:310px; background:var(--paper);
  border:1px solid rgba(33,30,26,0.26); padding:6px 0;
  box-shadow:0 14px 34px rgba(33,30,26,0.10);
}
.has-sub:hover .subnav, .has-sub.open .subnav{ display:block; }
.subnav a{
  display:block; border:0; padding:12px 22px; line-height:1.35;
  font-family:var(--font-display); font-size:15px;
  text-transform:none; letter-spacing:0; color:var(--ink);
}
.subnav a + a{ box-shadow:inset 0 1px 0 var(--line); }
.subnav a:hover{ background:var(--stone-deep); }
.subnav a span{
  display:block; font-family:var(--font-mono); font-size:9.5px;
  letter-spacing:0.1em; text-transform:uppercase; color:#877d6c; margin-top:4px;
}
.subnav .sub-all{
  font-family:var(--font-mono); font-size:11px; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--glaze-teal-d);
}

@media (max-width: 820px){
  .has-sub{ width:100%; flex-wrap:wrap; justify-content:space-between; }
  .has-sub::after{ display:none; }
  .has-sub > a, .has-sub > .works-label{ width:auto; border-bottom:0; }
  .sub-toggle{ padding:16px 2px 16px 14px; }
  .sub-toggle svg{ width:13px; height:13px; }
  .has-sub > a, .has-sub > .works-label, .sub-toggle{ border-bottom:1px solid transparent; }
  .works-label{ padding:16px 0; }
  .has-sub{ border-bottom:1px solid var(--line); }
  .has-sub:hover .subnav{ display:none; }
  .has-sub.open .subnav{ display:block; }
  .subnav{
    position:static; width:100%; min-width:0; border:0; box-shadow:none;
    background:transparent; padding:0 0 10px 16px;
  }
  .subnav a{ padding:13px 0; width:100%; }
  .subnav a + a{ box-shadow:inset 0 1px 0 var(--line); }
  .subnav a:hover{ background:transparent; }
}

/* =========================================================
   WORKS OVERVIEW — category cards
   ========================================================= */
.cat-grid{
  max-width:1200px; margin:0 auto; padding:70px var(--gutter) 120px;
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:44px 34px;
  align-items:start;
}
.cat-card{ display:block; color:inherit; }
.cat-card .ph{
  aspect-ratio:4/3; overflow:hidden; position:relative;
  border:1px solid var(--line); background:var(--paper);
}
.cat-card .ph img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease; }
.cat-card:hover .ph img{ transform:scale(1.04); }
.cat-card .ph.empty{
  border:1.5px dashed var(--line); background:rgba(0,0,0,0.015);
  display:flex; align-items:center; justify-content:center; text-align:center; padding:24px;
}
.cat-card .ph.empty span{
  font-family:var(--font-mono); font-size:11px; letter-spacing:0.08em;
  text-transform:uppercase; color:#a89f8d; line-height:1.8;
}
.cat-head{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin:18px 0 6px; }
.cat-card h2{ font-size:23px; }
.cat-tag{
  font-family:var(--font-mono); font-size:9.5px; letter-spacing:0.1em;
  text-transform:uppercase; padding:3px 8px; border:1px solid currentColor; white-space:nowrap;
}
.cat-tag.current{ color:var(--glaze-teal-d); }
.cat-tag.future{ color:var(--glaze-red); }
.cat-tag.ongoing{ color:#877d6c; }
.cat-card p{ font-size:14.5px; color:#3A342B; line-height:1.65; }
.cat-card .enter{
  display:inline-block; margin-top:12px; font-family:var(--font-mono);
  font-size:11px; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--glaze-teal-d); border-bottom:1px solid transparent; transition:border-color .2s ease;
}
.cat-card:hover .enter{ border-color:var(--glaze-teal); }
@media (max-width:760px){ .cat-grid{ grid-template-columns:minmax(0,1fr); gap:40px; } }

/* awaiting-photograph slots inside a category grid */
.slot{ display:block; }
.slot .frame{
  aspect-ratio:4/5; border:1.5px dashed var(--line); background:rgba(0,0,0,0.015);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:12px; text-align:center; padding:22px;
}
.slot .frame b{
  font-family:var(--font-display); font-weight:600; font-size:17px; color:#8d8474;
}
.slot .frame em{
  font-family:var(--font-mono); font-style:normal; font-size:10px;
  letter-spacing:0.1em; text-transform:uppercase; color:#a89f8d;
}

/* anchor links land below the sticky header, not behind it */
[id]{ scroll-margin-top:100px; }

/* a gallery inside a piece page already sits in the text column —
   don't inset it a second time */
.piece-body .piece-gallery{ max-width:100%; padding-left:0; padding-right:0; margin-left:0; margin-right:0; }

/* caption under a full-width drawing.
   Body text on a piece or project page is 18px. The caption description is
   set at 14.5px — about 81% of that — so it reads as supporting
   information without becoming fine print. The caption heading is bold
   within that same smaller scale. Centred, and held to a narrower measure
   than the body text so it stays tied to its photograph. */
.drawing-note,
.piece-body p.drawing-note,
.info-section p.drawing-note{
  margin-top:14px; margin-left:auto; margin-right:auto; max-width:58ch;
  font-family:var(--font-body); font-size:14.5px; line-height:1.65;
  letter-spacing:0; color:#6f6656; text-align:center;
}
.drawing-note b{
  display:block; font-family:var(--font-body); font-weight:600;
  font-size:14.5px; line-height:1.5; letter-spacing:0.005em;
  color:#4a4438; margin-bottom:3px;
}
/* a caption that lists more than one work needs air between the entries */
.drawing-note b:not(:first-child){ margin-top:12px; }
/* on a phone the body text drops to 16px, so the caption comes down with it
   and keeps the same relationship */
@media (max-width:600px){
  .drawing-note,
  .piece-body p.drawing-note,
  .info-section p.drawing-note{ font-size:13.5px; }
  .drawing-note b{ font-size:13.5px; }
}
.drawing-note a{ color:var(--glaze-teal-d); border-bottom:1px solid transparent; transition:border-color .2s ease; }
.drawing-note a:hover{ border-color:var(--glaze-teal); }

/* sub-headings inside a long project narrative */
.piece-body h4{
  font-family:var(--font-display); font-weight:600; font-size:17.5px;
  letter-spacing:-0.01em; margin:36px 0 10px; color:var(--ink);
}

/* who designed it — sits under the project subtitle */
/* project fact table — architect, practice, project, location, year.
   Shared by every architecture project page so they read the same way. */
.spec-list{
  max-width:760px; margin:26px auto 34px; padding:20px 0 4px;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  display:grid; grid-template-columns:150px minmax(0,1fr); gap:2px 18px;
}
.spec-list dt{
  font-family:var(--font-mono); font-size:11px; letter-spacing:0.07em;
  text-transform:uppercase; color:#877d6c; padding:6px 0;
}
.spec-list dd{ margin:0; font-size:15.5px; color:var(--ink); padding:5px 0; }
@media (max-width:620px){
  .spec-list{ grid-template-columns:1fr; gap:0 0; }
  .spec-list dt{ padding-bottom:0; }
  .spec-list dd{ padding-top:2px; padding-bottom:12px; }
}
/* the running number in front of a project section heading */
.sec-num{
  font-family:var(--font-mono); font-size:12px; letter-spacing:0.08em;
  color:#a89f8d; margin-right:12px; vertical-align:0.16em;
}
/* the material palette, and any similar short spec list */
.piece-body ul.plain-list{
  max-width:760px; margin:0 auto 26px; padding-left:20px; list-style:disc outside;
}
.piece-body ul.plain-list li{ font-size:16px; line-height:1.9; color:#4a4438; }
.piece-body ul.plain-list li::marker{ color:#a89f8d; }
.piece-body .credit-line{
  font-family:var(--font-mono); font-size:11.5px; letter-spacing:0.05em;
  color:#877d6c; margin:-14px 0 26px;
}
/* standing note at the head of the Architecture section */
.section-note{
  max-width:1200px; margin:0 auto; padding:0 var(--gutter);
}
.section-note-inner{
  border:1px solid var(--line); background:var(--paper);
  padding:22px 26px; display:grid; gap:10px;
}
.section-note-inner p{ font-size:14.5px; color:#3A342B; max-width:78ch; }
.section-note-inner .lead-note{ font-family:var(--font-display); font-size:17px; color:var(--ink); }

/* =========================================================
   KITCHEN DESIGN DIAGRAMS
   ========================================================= */
.diagram{ max-width:760px; margin:34px auto 0; }
.diagram-cap{
  font-family:var(--font-mono); font-size:11px; letter-spacing:0.09em;
  text-transform:uppercase; color:#877d6c; text-align:center; margin-top:14px;
}
.venn{ display:block; width:100%; height:auto; }
.venn text{ font-family:var(--font-display); }
.venn .vlab{ font-size:15px; font-weight:600; fill:var(--ink); }
.venn .vsub{ font-family:var(--font-mono); font-size:8.5px; letter-spacing:0.06em;
  text-transform:uppercase; fill:#5C5548; }

.zones{ max-width:900px; margin:34px auto 0; padding:0 var(--gutter); }
.zone-run{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:2px; }
.zone{ padding:16px 12px 18px; color:#F3EFE6; display:flex; flex-direction:column; gap:6px; min-height:112px; }
.zone b{ font-family:var(--font-display); font-size:15px; font-weight:600; line-height:1.25; }
.zone span{ font-family:var(--font-mono); font-size:9.5px; letter-spacing:0.07em; text-transform:uppercase; opacity:0.82; }
.zone i{ font-style:normal; font-family:var(--font-mono); font-size:10px; opacity:0.7; margin-top:auto; }
.z1{ background:#234249; } .z2{ background:#35646B; } .z3{ background:#5E8A84; }
.z4{ background:#A8763F; } .z5{ background:#9C3B2C; }
@media (max-width:760px){
  .zone-run{ grid-template-columns:minmax(0,1fr); }
  .zone{ min-height:0; flex-direction:row; align-items:baseline; gap:12px; padding:13px 16px; }
  .zone i{ margin-top:0; margin-left:auto; }
}

/* every sculpture is still greenware — this panel sits at the foot of each
   piece page and reserves the place the finished, fired photographs will go */
.kiln-note{
  max-width:760px; margin:56px auto 0; padding:26px 30px;
  border:1.5px dashed var(--line); background:rgba(0,0,0,0.015);
}
.kiln-note .kiln-title{
  font-family:var(--font-mono); font-size:11px; letter-spacing:0.08em;
  text-transform:uppercase; color:#877d6c; margin:0 0 10px;
}
.kiln-note p{ font-size:15px; line-height:1.8; color:#4a4438; margin:0; max-width:none; }
@media (max-width:620px){ .kiln-note{ padding:22px 20px; } }

/* reproduced reference material — held in a neutral frame so it reads as
   quoted material rather than as part of the site's own palette */
.ref-figure{ margin:34px auto 0; }
.ref-figure .ref-inner{
  background:#fff; border:1px solid var(--line); padding:18px;
  display:flex; align-items:center; justify-content:center;
}
.ref-figure img{ width:100%; height:auto; display:block; }
.ref-figure figcaption{
  font-family:var(--font-mono); font-size:11px; letter-spacing:0.06em;
  color:#877d6c; text-align:center; margin-top:12px; line-height:1.7;
}
.ref-figure.narrow{ max-width:400px; }
.ref-figure.wide{ max-width:660px; }
.ref-figure.cert{ max-width:420px; }

/* ---------------------------------------------------------------
   Painting & Drawing — archive grid, grouped by series.
   No hero block, no spec table, no numbered sections: image, then
   four lines. Each series gets its own grid so a row never mixes
   one series with another.
   align-items:start is required — without it the cards stretch to
   the row height and the captions are pushed out from under their
   own image (same trap as .work-grid and .cat-grid).
   --------------------------------------------------------------- */
.art-head{ padding:96px var(--gutter) 0; }
.art-head h1{ font-family:var(--font-display); font-size:clamp(30px,4.4vw,46px);
  line-height:1.12; margin:0 0 22px; }
.art-head .art-intro{ max-width:620px; }
.art-head .art-intro p{ font-size:16px; line-height:1.9; color:#4a4438; margin:0 0 14px; }
.art-head .art-note{ font-size:13.5px; color:#6b6355; margin-top:18px; }

/* the two largest works, opening the page side by side */
/* the three hero paintings run the full width of the page, so they read
   noticeably larger than the four-across series grids below. */
.art-hero{ padding:54px var(--gutter) 0; display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr)); gap:40px;
  align-items:start; }
@media (max-width:900px){ .art-hero{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
.art-hero figure{ margin:0; }
.art-hero img{ display:block; width:100%; height:auto; }

.art-section{ padding:0 var(--gutter); }
.art-section > h2{ font-family:var(--font-mono); font-size:11px; letter-spacing:0.14em;
  text-transform:uppercase; color:#877d6c; font-weight:500;
  margin:70px 0 0; padding-top:22px; border-top:1px solid var(--line); }

.art-grid{ padding:34px 0 0;
  display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr));
  gap:52px 30px; align-items:start; }
.art-grid.pair{ grid-template-columns:repeat(2, minmax(0,1fr)); max-width:820px; }
/* a closed series of three — full width, so each work is read properly */
.art-grid.trio{ grid-template-columns:repeat(3, minmax(0,1fr)); }
/* a closed series that reads as a set — four across, however many rows */
.art-grid.four{ grid-template-columns:repeat(4, minmax(0,1fr)); }
/* Colour wheel studies — a four-column bed, so a wide sheet can take two
   columns and the colour can actually be read. New studies start a new row. */
.art-grid.studies{ grid-template-columns:repeat(4, minmax(0,1fr)); }
.art-grid.studies .wide{ grid-column:span 2; }
@media (max-width:820px){ .art-grid.studies{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:520px){
  .art-grid.studies{ grid-template-columns:minmax(0,1fr); }
  .art-grid.studies .wide{ grid-column:span 1; }
}
@media (max-width:820px){ .art-grid.four{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:640px){ .art-grid.trio{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
/* a section can hold several rows with different column counts; keep the
   space between rows the same as the gap inside a row */
.art-grid + .art-grid{ padding-top:52px; }
.art-grid figure{ margin:0; }
/* each work keeps its own proportions and its own height; align-items:start on
   the grid lets the captions sit directly under their own image. */
.art-grid img{ display:block; width:100%; height:auto; }

/* a place held for work still to be photographed */
.art-slot{ border:1.5px dashed var(--line); background:rgba(0,0,0,0.012);
  aspect-ratio:3/4; display:flex; align-items:center; justify-content:center;
  text-align:center; padding:16px; }
.art-slot span{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:0.08em;
  text-transform:uppercase; color:#a89f8d; line-height:1.9; }
.art-cap{ margin-top:14px; }
.art-cap .t{ display:block; font-family:var(--font-display); font-size:15px;
  color:var(--ink); line-height:1.35; }
.art-cap span{ display:block; font-family:var(--font-mono); font-size:10.5px;
  letter-spacing:0.05em; color:#877d6c; line-height:1.85; margin-top:1px; }

.art-close{ max-width:620px; margin:88px var(--gutter) 120px; padding-top:32px;
  border-top:1px solid var(--line); }
.art-close p{ font-size:15.5px; line-height:1.9; color:#4a4438; }
@media (max-width:560px){
  .art-grid{ grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:44px 20px; }
  .art-hero{ grid-template-columns:minmax(0,1fr); gap:52px; }
  .art-head{ padding-top:64px; }
}

/* ---------------------------------------------------------------
   Lightbox — click any artwork to see it large with its details.
   Built by js/main.js from the figures inside .art-hero / .art-grid,
   so no page markup is needed. Esc closes, arrow keys step through.
   --------------------------------------------------------------- */
.art-hero figure, .art-grid figure{ cursor:zoom-in; }
.art-hero figure img, .art-grid figure img{ transition:opacity .25s ease; }
.art-hero figure:hover img, .art-grid figure:hover img,
.art-hero figure:focus-visible img, .art-grid figure:focus-visible img{ opacity:.86; }
.art-hero figure:focus-visible, .art-grid figure:focus-visible{
  outline:2px solid var(--glaze-teal); outline-offset:6px; }

.lb{ position:fixed; inset:0; z-index:300; display:none; }
.lb.open{ display:block; }
.lb-scrim{ position:absolute; inset:0; background:rgba(24,21,17,.95); }
.lb-stage{ position:relative; height:100%; display:grid; grid-template-rows:minmax(0,1fr) auto;
  padding:64px clamp(14px,6vw,110px) 26px; }
.lb-figure{ min-height:0; display:flex; align-items:center; justify-content:center; }
.lb-figure img{ max-width:100%; max-height:100%; width:auto; height:auto;
  object-fit:contain; box-shadow:0 26px 70px rgba(0,0,0,.55); }
.lb-cap{ text-align:center; padding-top:22px; color:#efe9dd; }
.lb-cap .t{ display:block; font-family:var(--font-display); font-size:19px; line-height:1.35; }
.lb-cap span{ display:block; font-family:var(--font-mono); font-size:11px; letter-spacing:0.07em;
  color:#a79d8c; line-height:1.9; margin-top:1px; }
.lb-count{ position:absolute; top:24px; left:clamp(14px,6vw,110px);
  font-family:var(--font-mono); font-size:11px; letter-spacing:0.1em; color:#8d8474; }
.lb button{ position:absolute; background:none; border:0; color:#efe9dd; cursor:pointer;
  padding:12px; line-height:0; border-radius:50%; transition:background .2s ease, color .2s ease; }
.lb button:hover{ background:rgba(255,255,255,.09); }
.lb button:focus-visible{ outline:2px solid var(--glaze-teal); outline-offset:2px; }
.lb-close{ top:14px; right:clamp(8px,4vw,40px); }
.lb-prev{ left:clamp(2px,1.4vw,26px); top:50%; transform:translateY(-50%); }
.lb-next{ right:clamp(2px,1.4vw,26px); top:50%; transform:translateY(-50%); }
.lb svg{ width:26px; height:26px; fill:none; stroke:currentColor; stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round; }
@media (max-width:560px){
  .lb-stage{ padding:60px 12px 20px; }
  .lb-prev{ left:0; } .lb-next{ right:0; }
  .lb svg{ width:22px; height:22px; }
}

/* =========================================================
   WORKSHOP
   A workshop page is a service page, not an artwork page: the hero
   states what it is, a fact strip answers where/when/how much before
   anyone has to read prose, and the long practical detail sits in
   notes that open only if the reader wants them.
   ========================================================= */
.ws-hero{
  background:var(--kiln); color:var(--stone);
  display:grid; grid-template-columns:1.02fr 0.98fr; align-items:stretch;
}
.ws-hero-text{
  padding:132px var(--gutter) 78px;
  display:flex; flex-direction:column; justify-content:center;
}
.ws-hero-text .eyebrow{ color:#9FC2C4; margin-bottom:20px; }
.ws-hero h1{
  font-size:clamp(32px,4.3vw,58px); line-height:1.04;
  letter-spacing:0.005em; text-transform:uppercase; max-width:14ch;
}
.ws-rule{ width:118px; height:1px; background:rgba(234,228,216,0.45); margin:30px 0 26px; }
.ws-sub{
  font-family:var(--font-display); font-style:italic;
  font-size:clamp(19px,2.1vw,25px); line-height:1.32; color:#EDE6D8; max-width:26ch;
}
.ws-hero-text p{ margin-top:20px; max-width:46ch; font-size:16px; line-height:1.72; color:#D8D1C2; }
.ws-hero-text p.ws-emph{ font-family:var(--font-display); font-style:italic; font-size:17px; color:#C9C0AC; }
.ws-hero-media{ position:relative; min-height:440px; background:#17130F; }
.ws-hero-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.ws-credit{
  position:absolute; left:20px; right:20px; bottom:18px; text-align:right;
  font-family:var(--font-display); font-style:italic; font-size:12.5px; line-height:1.5;
  color:rgba(243,239,230,0.94); text-shadow:0 1px 8px rgba(0,0,0,0.6);
}
.ws-hero-plain{ grid-template-columns:1fr; }
.ws-hero-plain .ws-hero-text{ max-width:var(--container); margin:0 auto; width:100%; }
@media (max-width:900px){
  .ws-hero{ grid-template-columns:1fr; }
  .ws-hero-text{ padding-top:150px; padding-bottom:60px; }
  .ws-hero-media{ min-height:0; aspect-ratio:4/5; }
}

/* ---------- fact strip: where, when, how much, how many ---------- */
.ws-facts{
  background:var(--paper); border-bottom:1px solid var(--line);
  padding:44px var(--gutter);
}
.ws-facts-inner{
  max-width:var(--container); margin:0 auto;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(195px,1fr)); gap:30px 30px;
}
.ws-fact{ display:flex; gap:14px; align-items:flex-start; }
.ws-fact svg{ width:19px; height:19px; flex:0 0 19px; margin-top:2px; color:var(--glaze-teal-d); }
.ws-fact dt{
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:0.1em;
  text-transform:uppercase; color:#6b6355; margin-bottom:5px;
}
.ws-fact dd{ margin:0; font-size:15.5px; line-height:1.45; color:var(--ink); }
.ws-fact dd em{ display:block; font-family:var(--font-display); font-size:13.5px; color:#6b6355; margin-top:3px; }
.ws-fact .tbc{ font-family:var(--font-mono); font-size:12px; letter-spacing:0.06em; text-transform:uppercase; color:var(--glaze-red); }

/* ---------- call to action ---------- */
.ws-cta-row{
  max-width:900px; margin:0 auto; padding:34px var(--gutter) 0;
  display:flex; align-items:center; gap:26px; flex-wrap:wrap;
}
.btn.big{ padding:16px 30px; font-size:12.5px; }
.ws-cta-row .ws-caveat{
  font-family:var(--font-display); font-style:italic; font-size:14.5px; color:#6b6355; max-width:44ch;
}

/* ---------- the four weeks ---------- */
.ws-weeks{ max-width:900px; margin:0 auto; padding:0 var(--gutter); }
.ws-week{
  display:grid; grid-template-columns:56px minmax(0,1fr); gap:22px;
  padding:34px 0; border-top:1px solid var(--line);
}
.ws-week:first-of-type{ border-top:0; }
.ws-num{
  width:44px; height:44px; border-radius:50%; background:var(--glaze-teal); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-size:19px; line-height:1;
}
.ws-week h3{ font-size:20px; margin-bottom:6px; }
.ws-week .ws-week-sub{
  font-family:var(--font-display); font-style:italic; font-size:15.5px; color:#6b6355; margin-bottom:16px;
}
.ws-week p{ font-size:15.5px; line-height:1.75; color:#3A342B; max-width:64ch; }
.ws-week p + p{ margin-top:12px; }
.ws-week ul{ margin:16px 0 0; padding-left:20px; list-style:disc outside; }
.ws-week ul li{ font-size:15px; line-height:1.8; color:#4a4438; }
.ws-week ul li::marker{ color:#a89f8d; }
.ws-key{
  margin-top:18px; padding:14px 18px; background:var(--paper);
  border-left:2px solid var(--glaze-teal);
}
.ws-key b{
  display:block; font-family:var(--font-mono); font-size:10px; letter-spacing:0.1em;
  text-transform:uppercase; color:#6b6355; margin-bottom:5px;
}
.ws-key span{ font-family:var(--font-display); font-size:16px; line-height:1.55; color:var(--ink); }
@media (max-width:620px){ .ws-week{ grid-template-columns:1fr; gap:14px; } }

/* ---------- teaching principles ---------- */
.ws-principles{ background:var(--kiln); color:var(--stone); padding:96px var(--gutter); margin-top:20px; }
.ws-principles-inner{
  max-width:var(--container); margin:0 auto;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:48px;
}
.ws-principle h3{
  font-family:var(--font-mono); font-size:13px; letter-spacing:0.14em;
  text-transform:uppercase; color:#9FC2C4; font-weight:500; margin-bottom:18px;
}
.ws-principle p{ font-size:16px; line-height:1.75; color:#D8D1C2; max-width:46ch; }
.ws-principle p + p{ margin-top:14px; }

/* ---------- notes: the practical detail, opened on request ---------- */
.ws-notes{ max-width:900px; margin:0 auto; padding:0 var(--gutter) 30px; }
.ws-notes > p.ws-notes-lead{ font-size:15px; color:#6b6355; margin-bottom:6px; }
.ws-note{ border-top:1px solid var(--line); }
.ws-note:last-of-type{ border-bottom:1px solid var(--line); }
.ws-note > summary{
  list-style:none; cursor:pointer; padding:20px 34px 20px 0; position:relative;
  font-family:var(--font-display); font-size:18px; color:var(--ink);
}
.ws-note > summary::-webkit-details-marker{ display:none; }
.ws-note > summary::after{
  content:""; position:absolute; right:6px; top:50%; width:9px; height:9px;
  border-right:1.5px solid var(--glaze-teal-d); border-bottom:1.5px solid var(--glaze-teal-d);
  transform:translateY(-70%) rotate(45deg); transition:transform .2s ease;
}
.ws-note[open] > summary::after{ transform:translateY(-30%) rotate(-135deg); }
.ws-note > summary:hover{ color:var(--glaze-teal-d); }
.ws-note-body{ padding:0 0 26px; }
.ws-note-body p{ font-size:15px; line-height:1.75; color:#3A342B; max-width:66ch; }
.ws-note-body p + p{ margin-top:12px; }
.ws-note-body .fine{ font-size:13.5px; color:#6b6355; }
.ws-note-body ul.checklist{ margin-top:6px; }
.ws-note-body ul.plain-list{ margin:10px 0 0; padding-left:20px; list-style:disc outside; }
.ws-note-body ul.plain-list li{ font-size:15px; line-height:1.8; color:#4a4438; }
.ws-note-body ul.plain-list li::marker{ color:#a89f8d; }
.ws-note-body h4{
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:0.1em; text-transform:uppercase;
  color:#6b6355; margin:24px 0 8px; font-weight:500;
}

/* ---------- fee ---------- */
.ws-fee{
  max-width:900px; margin:0 auto; padding:0 var(--gutter);
  display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:22px;
}
.ws-fee .price-card .price{ margin-bottom:6px; }
.ws-fee .price-card .lead-price{ color:var(--glaze-teal-d); }

/* ---------- register form ---------- */
.ws-register{ background:var(--paper); border-top:1px solid var(--line); padding:96px var(--gutter) 110px; margin-top:90px; }
.ws-register-inner{ max-width:760px; margin:0 auto; }
.ws-register h2{ font-size:clamp(26px,3.4vw,38px); }
.ws-register > .ws-register-inner > p{ margin-top:16px; font-size:16px; color:#3A342B; max-width:58ch; }
.ws-register .contact-form{ margin-top:40px; }
.ws-form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:0 26px; }
@media (max-width:640px){ .ws-form-grid{ grid-template-columns:1fr; } }
.ws-check{ display:flex; gap:12px; align-items:flex-start; margin:6px 0 34px; }
.ws-check input{ width:17px; height:17px; margin-top:2px; flex:0 0 17px; }
.ws-check span{ font-size:14.5px; line-height:1.6; color:#3A342B; }
.ws-thanks{
  margin-top:26px; padding:22px 24px; background:var(--stone); border-left:2px solid var(--glaze-teal);
}
.ws-thanks b{ display:block; font-family:var(--font-mono); font-size:11px; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--glaze-teal-d); margin-bottom:8px; }
.ws-thanks p{ font-size:15px; color:#3A342B; max-width:58ch; }

/* the consent checkbox is a label, but it is a sentence to read, not a field
   name — it must not inherit the uppercase mono label styling */
.contact-form label.ws-check{
  font-family:var(--font-body); font-size:14.5px; letter-spacing:0;
  text-transform:none; color:#3A342B; margin-bottom:34px;
}
.ws-principles-inner{ max-width:900px; }
.ws-register{ margin-top:40px; }
.ws-notes{ padding-bottom:10px; }

/* a hero with no photograph carries the title and the introduction as two
   columns, so the dark band is not half empty */
.ws-hero-plain .ws-hero-text{
  display:grid; grid-template-columns:1fr 1fr; gap:0 64px; align-items:start;
  padding-top:150px; padding-bottom:96px;
}
.ws-hero-plain .ws-hero-text > .ws-hero-head{ grid-column:1; }
.ws-hero-plain .ws-hero-text > .ws-hero-intro{ grid-column:2; padding-top:8px; }
.ws-hero-plain .ws-hero-head h1{ max-width:12ch; }
.ws-hero-plain .ws-hero-intro p{ margin-top:0; max-width:48ch; }
.ws-hero-plain .ws-hero-intro p + p{ margin-top:18px; }
@media (max-width:900px){
  .ws-hero-plain .ws-hero-text{ grid-template-columns:1fr; gap:26px; padding-bottom:64px; }
  .ws-hero-plain .ws-hero-text > .ws-hero-head,
  .ws-hero-plain .ws-hero-text > .ws-hero-intro{ grid-column:1; padding-top:0; }
}

/* =========================================================
   WORKSHOP — poster hero
   The poster is the hero. It already carries the title, the sculpture,
   the introduction and the key facts, so nothing beneath it repeats that
   material at the same weight: one quiet line of details for phones and
   screen readers, then the practical sections in plain type.
   ========================================================= */
.ws-poster{
  background:var(--kiln); padding:120px var(--gutter) 76px;
  display:flex; justify-content:center;
}
.ws-poster img{
  width:100%; max-width:840px; height:auto; display:block;
  box-shadow:0 26px 70px rgba(0,0,0,0.42);
}
@media (max-width:820px){ .ws-poster{ padding:110px var(--gutter) 48px; } }

.ws-glance{
  border-bottom:1px solid var(--line);
  padding:34px var(--gutter) 38px; text-align:center;
}
.ws-glance dl{
  max-width:1000px; margin:0 auto;
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:22px 0;
}
.ws-glance div{ padding:0 26px; border-left:1px solid var(--line); }
.ws-glance div:first-child{ border-left:0; }
.ws-glance dt{
  font-family:var(--font-mono); font-size:10px; letter-spacing:0.11em;
  text-transform:uppercase; color:#8a8172; margin-bottom:5px;
}
.ws-glance dd{ margin:0; font-size:14.5px; line-height:1.45; color:var(--ink); }
.ws-glance dd em{ display:block; font-family:var(--font-display); font-size:13px; color:#6b6355; }
.ws-glance dd .tbc{ color:var(--glaze-red); }
.ws-glance .ws-glance-cta{ margin-top:30px; }
.ws-glance .ws-caveat{
  margin-top:16px; font-family:var(--font-display); font-style:italic;
  font-size:14.5px; color:#6b6355; max-width:52ch; margin-left:auto; margin-right:auto;
}
@media (max-width:860px){ .ws-glance dl{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:520px){
  .ws-glance dl{ grid-template-columns:minmax(0,1fr); }
  .ws-glance div{ border-left:0; padding:0; }
}

/* ---------- the body of a workshop page ---------- */
.ws-body{ max-width:820px; margin:0 auto; padding:0 var(--gutter); }
.ws-body section{ padding:56px 0 0; }
.ws-body h2{
  font-family:var(--font-display); font-size:24px; margin-bottom:16px;
}
.ws-body h3{ font-family:var(--font-display); font-size:17.5px; margin:30px 0 8px; }
.ws-body p{ font-size:16px; line-height:1.78; color:#3A342B; }
.ws-body p + p{ margin-top:14px; }
.ws-body p.lead{ font-size:17px; color:#2f2a23; }
.ws-body p.aside{
  font-family:var(--font-display); font-style:italic; font-size:16px; color:#5C5548;
}
.ws-body p.fine{ font-size:14px; color:#6b6355; }
.ws-body ul{ margin:14px 0 0; padding-left:20px; list-style:disc outside; }
.ws-body li{ font-size:15.5px; line-height:1.85; color:#4a4438; }
.ws-body li::marker{ color:#a89f8d; }
.ws-body ul.two-col{ columns:2; column-gap:44px; }
.ws-body ul.two-col li{ break-inside:avoid; }
@media (max-width:640px){ .ws-body ul.two-col{ columns:1; } }
.ws-body hr{ border:0; border-top:1px solid var(--line); margin:56px 0 0; }
.ws-body .ws-week-block{ margin-top:30px; }
.ws-body .ws-week-block h3{ margin-top:0; }
.ws-body .ws-week-block .sub{
  font-family:var(--font-display); font-style:italic; font-size:15px;
  color:#6b6355; margin:0 0 12px;
}
.ws-body .ws-week-block .principle{
  margin-top:14px; font-family:var(--font-display); font-style:italic;
  font-size:15.5px; line-height:1.6; color:#4a4438;
  padding-left:16px; border-left:2px solid var(--glaze-teal);
}
.ws-body a.inline{ color:var(--glaze-teal-d); border-bottom:1px solid var(--line); }
.ws-body a.inline:hover{ border-color:var(--glaze-teal); }

/* =========================================================
   GROUPED WORK CARDS
   A single long grid of cards stops being readable once it holds more
   than about ten works. Grouping them under quiet headings lets the eye
   find a kind of work rather than scanning every caption.
   ========================================================= */
.work-group{ max-width:1200px; margin:0 auto; padding:0 var(--gutter); }
.work-group + .work-group{ padding-top:78px; }
.work-group:first-of-type{ padding-top:64px; }
.work-group:last-of-type{ padding-bottom:110px; }
.work-group-head{ border-top:1px solid var(--line); padding-top:22px; margin-bottom:6px; }
.work-group:first-of-type .work-group-head{ border-top:0; padding-top:0; }
.work-group-head h2{ font-family:var(--font-display); font-size:23px; margin-bottom:8px; }
.work-group-head p{ font-size:14.5px; line-height:1.7; color:#6b6355; max-width:62ch; }
.work-cards.flush{ max-width:none; margin:0; padding:26px 0 0; }

/* two drawings of different proportion shown as a matched pair: the frames
   align top and bottom, and each drawing sits centred inside its own frame */
.piece-gallery.match{ align-items:stretch; }
.piece-gallery.match img{ height:100%; object-fit:contain; background:#fff; }

/* the studio teaser carries a landscape photograph, so the image column takes
   the wider half and the frame follows the photograph's own proportion */
.about-teaser.landscape{ grid-template-columns:1.1fr 0.9fr; }
.about-teaser.landscape .ph{ aspect-ratio:4/3; }
@media (max-width:820px){ .about-teaser.landscape{ grid-template-columns:1fr; } }

/* home-page workshop band */
.workshop-teaser{
  background:var(--paper); border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:96px var(--gutter);
}
.workshop-teaser-inner{
  max-width:var(--container); margin:0 auto;
  display:grid; grid-template-columns:1fr 0.62fr; gap:64px; align-items:center;
}
.workshop-teaser h2{ font-size:clamp(28px,4vw,40px); margin-bottom:22px; }
.workshop-teaser p{ font-size:17px; color:#413B32; max-width:52ch; }
.workshop-teaser p + p{ margin-top:14px; }
.workshop-list{ margin-top:30px; border-top:1px solid var(--line); }
.workshop-list a{
  display:flex; justify-content:space-between; align-items:baseline; gap:20px;
  padding:16px 0; border-bottom:1px solid var(--line);
  font-family:var(--font-display); font-size:18px; color:var(--ink);
  transition:color .2s ease;
}
.workshop-list a:hover{ color:var(--glaze-teal-d); }
.workshop-list a span{
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:0.1em;
  text-transform:uppercase; color:#877d6c; white-space:nowrap;
}
.workshop-teaser figure{ margin:0; }
.workshop-teaser figure img{
  width:100%; height:auto; display:block; box-shadow:0 18px 44px rgba(33,30,26,0.16);
}
@media (max-width:860px){
  .workshop-teaser-inner{ grid-template-columns:1fr; gap:40px; }
  .workshop-teaser figure{ max-width:420px; }
}

/* a sentence set in bold inside the studio teaser stays the same size and
   colour as the paragraph around it — only the weight changes */
.about-teaser p strong{ font-weight:600; color:var(--ink); }

/* a link inside an artwork caption has to look like a link — the caption text
   around it is a muted mono grey, so an unstyled link is invisible */
.art-cap a{
  color:var(--glaze-teal-d);
  border-bottom:1px solid rgba(35,100,107,0.45);
  transition:color .2s ease, border-color .2s ease;
}
.art-cap a:hover{ color:var(--glaze-teal); border-bottom-color:var(--glaze-teal); }
.art-cap a::after{ content:" \2197"; letter-spacing:0; }

/* =========================================================
   IN-CONTENT LINKS
   A link inside body copy inherited the colour of the text around it and
   carried no underline, so on most pages it was invisible — an email address,
   a cross-reference to another project, an award citation all read as plain
   text. Everything inside running content now takes the glaze accent and a
   hairline rule. Navigation, footer, cards and the styled controls
   (.btn, .link-arrow, .enter, .view-piece) are deliberately left alone.
   ========================================================= */
.piece-body p a, .piece-body li a, .piece-body dd a,
.info-section p a, .info-section li a,
.story-about p a, .story-about li a,
.about-teaser p a,
.art-close p a,
.ws-body p a, .ws-body li a,
.ws-note-body p a, .ws-note-body li a,
.ws-thanks p a,
.section-note-inner p a,
.contact-side .info-block a,
.fine-print a,
.cv-list a,
.info-list a,
.statement p a,
.work-group-head p a,
.page-hero p a,
.art-note a{
  color:var(--glaze-teal-d);
  border-bottom:1px solid rgba(35,100,107,0.42);
  transition:color .2s ease, border-color .2s ease;
}
.piece-body p a:hover, .piece-body li a:hover, .piece-body dd a:hover,
.info-section p a:hover, .info-section li a:hover,
.story-about p a:hover, .story-about li a:hover,
.about-teaser p a:hover,
.art-close p a:hover,
.ws-body p a:hover, .ws-body li a:hover,
.ws-note-body p a:hover, .ws-note-body li a:hover,
.section-note-inner p a:hover,
.contact-side .info-block a:hover,
.fine-print a:hover,
.cv-list a:hover,
.info-list a:hover,
.statement p a:hover,
.work-group-head p a:hover,
.page-hero p a:hover,
.art-note a:hover{
  color:var(--glaze-teal); border-bottom-color:var(--glaze-teal);
}
/* the styled controls keep their own treatment */
.piece-body a.link-arrow, .info-section a.link-arrow, .story-about a.link-arrow,
.about-teaser a.link-arrow, .ws-body a.btn, .info-section a.btn,
.piece-body a.btn, .fine-print a.link-arrow{
  border-bottom:1px solid transparent;
}

/* group photographs under Collaborations on the CV */
.cv-groups{
  margin:26px 0 0;
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px;
  align-items:start;
}
.cv-groups figure{ margin:0; }
.cv-groups img{ width:100%; height:auto; display:block; border:1px solid var(--line); }
.cv-groups figcaption{
  margin-top:10px; font-family:var(--font-body); font-size:13.5px; line-height:1.6; color:#6f6656;
}
@media (max-width:560px){ .cv-groups{ grid-template-columns:minmax(0,1fr); } }
.cv-groups figcaption b{
  display:block; font-weight:600; font-size:13.5px; color:#4a4438; margin-bottom:3px;
}


/* thank-you pages: a short confirmation and the way back */
.thanks-body{ padding:46px var(--gutter) 96px; }
.thanks-body .ws-thanks{ margin-top:0; max-width:62ch; }
.thanks-links{ margin-top:30px; display:flex; flex-wrap:wrap; gap:14px; }
.thanks-links a{ margin:0; }