/* ==========================================================================
   Jerry Harty Studio — shared stylesheet
   Editorial / linear direction, 2026-08-12 rebuild
   ========================================================================== */

:root{
  --paper:      #f7f2e7;
  --paper-deep: #ece3cf;
  --ink:        #24211c;
  --ink-soft:   #5c554a;
  --ink-surface:#453f33;
  --line:       #ddd2b8;
  --white:      #fffdf8;

  /* Jerry's palette — used as accents, not the dominant surface */
  --mustard: #d99a2b;
  --teal:    #2f8a83;
  --coral:   #d1553c;
  --cobalt:  #3a5a9a;
  --plum:    #7c4a8f;
  --sage:    #6b8e4e;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  background:var(--paper);
  color:var(--ink);
  font-family:'Jost', sans-serif;
  font-weight:300;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
img{ display:block; max-width:100%; }
a{ color:inherit; }

h1,h2,h3,.serif{
  font-family:'Fraunces', serif;
  font-weight:500;
  letter-spacing:0.005em;
}

.frame{
  max-width:1180px;
  margin:0 auto;
  padding:0 6vw;
}

.eyebrow{
  font-family:'Jost', sans-serif;
  text-transform:uppercase;
  letter-spacing:0.24em;
  font-size:0.72rem;
  font-weight:500;
  color:var(--ink-soft);
}

/* ---- accent-color utility (one per section, used sparingly) ---- */
.accent-mustard{ --accent:var(--mustard); }
.accent-teal{ --accent:var(--teal); }
.accent-coral{ --accent:var(--coral); }
.accent-cobalt{ --accent:var(--cobalt); }
.accent-plum{ --accent:var(--plum); }
.accent-sage{ --accent:var(--sage); }

/* ==========================================================================
   NAV — fixed, with a translucent dark scrim + blur so text stays legible
   over any background (photo or paper) without per-page contrast tuning.
   (Previously used mix-blend-mode:difference, which self-inverted but read
   as noisy/low-contrast over busy photo content — a fixed scrim is more
   reliably readable.)
   A ::after pseudo-element extends a soft gradient fade below the solid
   bar so the scrim doesn't end in a hard, ruler-straight line.
   ========================================================================== */
header.site-nav{
  position:fixed;
  top:0; left:0; right:0;
  z-index:100;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:1.5rem 6vw;
  background:rgba(36,33,28,0.55);
  backdrop-filter:blur(10px) saturate(1.1);
  -webkit-backdrop-filter:blur(10px) saturate(1.1);
  color:#fff;
  transition:padding 0.3s ease, background 0.3s ease;
}
header.site-nav::after{
  content:"";
  position:absolute;
  left:0; right:0;
  top:100%;
  height:4rem;
  background:linear-gradient(to bottom, rgba(36,33,28,0.55), rgba(36,33,28,0));
  backdrop-filter:blur(10px) saturate(1.1);
  -webkit-backdrop-filter:blur(10px) saturate(1.1);
  -webkit-mask-image:linear-gradient(to bottom, black, transparent);
  mask-image:linear-gradient(to bottom, black, transparent);
  pointer-events:none;
}
header.site-nav .wordmark{
  font-family:'Fraunces', serif;
  font-style:italic;
  font-weight:500;
  font-size:1.2rem;
  letter-spacing:0.02em;
  color:inherit;
  text-decoration:none;
}
header.site-nav nav{
  display:flex;
  gap:2.1rem;
  font-size:0.78rem;
  letter-spacing:0.12em;
  text-transform:uppercase;
}
header.site-nav nav a{
  color:inherit;
  text-decoration:none;
  opacity:0.86;
  padding-bottom:3px;
  border-bottom:1px solid transparent;
  transition:opacity 0.2s ease, border-color 0.2s ease;
}
header.site-nav nav a:hover,
header.site-nav nav a[aria-current="page"]{
  opacity:1;
  border-color:currentColor;
}
@media (max-width:760px){
  header.site-nav{
    flex-direction:column;
    align-items:flex-start;
    gap:0.7rem;
    padding:1.3rem 6vw;
  }
  header.site-nav nav{
    gap:0.9rem 1.1rem;
    flex-wrap:wrap;
    font-size:0.7rem;
  }
}

/* ==========================================================================
   HERO — full-bleed photographic, crossfading, quiet caption + dots
   ========================================================================== */
.hero{
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:flex-end;
  overflow:hidden;
  background:var(--ink-surface);
}
.hero-slide{
  position:absolute;
  inset:0;
  opacity:0;
  transition:opacity 1.4s ease;
}
.hero-slide.is-active{ opacity:1; }
.hero-slide img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}
.hero-slide::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(20,18,14,0.04) 0%, rgba(20,18,14,0.1) 55%, rgba(15,13,10,0.5) 100%);
}
.hero-content{
  position:relative;
  z-index:2;
  width:100%;
  padding:0 6vw 4.2rem;
  color:var(--white);
}
.hero-content .eyebrow{ color:var(--accent, rgba(255,253,248,0.78)); margin-bottom:0.9rem; }
.hero-content h1{
  font-style:italic;
  font-size:clamp(2.4rem, 6vw, 4.6rem);
  line-height:1.08;
  margin:0 0 0.9rem;
  max-width:16ch;
}
/* Some swash italic capitals (a decorative "P" in particular) draw ink well
   below their own line box. When the eyebrow label follows the heading
   (as on Process), give it extra clearance so descenders never collide
   with it. */
.hero-content h1 + .eyebrow{ margin-top:4rem; }
.hero-content p{
  font-size:1.05rem;
  max-width:36ch;
  color:rgba(255,253,248,0.86);
  margin:0;
}
.hero-dots{
  position:absolute;
  right:6vw; bottom:2.4rem;
  z-index:2;
  display:flex;
  gap:9px;
}
.hero-dots button{
  width:8px; height:8px;
  border-radius:50%;
  border:1px solid rgba(255,253,248,0.7);
  background:transparent;
  padding:0;
  cursor:pointer;
}
.hero-dots button.is-active{ background:var(--white); }

/* soft hand-off from the hero photo into the paper background below it,
   so the next section reads as a continuation rather than a hard cut */
.hero::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:7rem;
  background:linear-gradient(180deg, rgba(247,242,231,0) 0%, var(--paper) 100%);
  z-index:1;
  pointer-events:none;
}

/* scroll cue — bottom-center of the hero, invites the next section */
.scroll-cue{
  position:absolute;
  left:50%; bottom:1.9rem;
  transform:translateX(-50%);
  z-index:2;
  width:26px; height:42px;
  border:1.5px solid rgba(255,253,248,0.75);
  border-radius:20px;
  display:flex;
  justify-content:center;
  padding-top:8px;
  text-decoration:none;
  transition:border-color 0.2s ease;
}
.scroll-cue:hover{ border-color:rgba(255,253,248,1); }
.scroll-cue span{
  width:4px; height:8px;
  border-radius:2px;
  background:rgba(255,253,248,0.95);
  animation:scrollCueMove 1.8s ease-in-out infinite;
}
@keyframes scrollCueMove{
  0%{ opacity:1; transform:translateY(0); }
  60%{ opacity:0.25; transform:translateY(11px); }
  100%{ opacity:0; transform:translateY(11px); }
}
@media (prefers-reduced-motion:reduce){
  .scroll-cue span{ animation:none; }
}
@media (max-width:640px){ .scroll-cue{ display:none; } }

/* smaller hero for interior pages (no carousel, one still image) */
.hero.hero--still{ min-height:64vh; }
.hero.hero--still::after,
.hero.hero--still .scroll-cue{ display:none; }

/* ==========================================================================
   SECTION rhythm — full-bleed linear stack
   ========================================================================== */
.section{ padding:6.5rem 0; position:relative; }
.section--alt{ background:var(--paper-deep); }
.section--ink{ background:var(--ink-surface); color:var(--white); }
.section-head{ max-width:640px; margin:0 0 3rem; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.section-head .eyebrow{ margin-bottom:0.8rem; }
.section-head h2{
  font-style:italic;
  font-size:clamp(1.9rem, 3.4vw, 2.6rem);
  /* Display type needs a much tighter line-height than the 1.7 body default
     it would otherwise inherit — invisible while every heading fit on one
     line, but a long one (e.g. "Building an Image, One Color at a Time" on
     the Process page) wraps and the two lines drift far apart. */
  line-height:1.18;
  margin:0 0 0.9rem;
}
.section-head p{ color:var(--ink-soft); margin:0; font-size:1.02rem; }
.section--ink .section-head p{ color:rgba(255,253,248,0.75); }

/* small color-coded index, echoing the hero-dots language, previewing the
   accent colors used by the teaser rows just below */
.way-in-dots{
  display:flex;
  gap:0.55rem;
  margin-bottom:1.2rem;
}
.way-in-dots span{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--accent, var(--ink-soft));
}

/* ==========================================================================
   Split row — image one side, text the other (bio, gallery teasers)
   ========================================================================== */
.split-row{
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:0;
  align-items:stretch;
}
.split-row.reverse{ grid-template-columns:1fr 1.1fr; }
.split-row.reverse .split-media{ order:2; }
.split-media{ position:relative; min-height:420px; overflow:hidden; }
.split-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.split-text{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:5rem 6vw;
}
.split-text .eyebrow{ margin-bottom:1rem; }
.split-text h2{
  font-style:italic;
  font-size:clamp(1.8rem, 3vw, 2.4rem);
  margin:0 0 1.1rem;
}
.split-text p{ color:var(--ink-soft); margin:0 0 1rem; max-width:44ch; }
.split-text p:last-of-type{ margin-bottom:0; }
@media (max-width:860px){
  .split-row, .split-row.reverse{ grid-template-columns:1fr; }
  .split-row.reverse .split-media{ order:0; }
  .split-media{ min-height:340px; }
  .split-text{ padding:3.2rem 6vw; }
}

/* ==========================================================================
   Gallery teaser row — three linear rows echoing split-row, alternating
   ========================================================================== */
.teaser-row{
  display:flex;
  align-items:center;
  gap:4vw;
  padding:2.6rem 0;
  border-top:1px solid var(--line);
  text-decoration:none;
  color:inherit;
}
.teaser-row:first-of-type{ border-top:none; }
.teaser-row .teaser-media{
  flex:0 0 min(30vw, 260px);
  aspect-ratio:1/1;
  overflow:hidden;
  position:relative;
}
.teaser-row .teaser-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.teaser-row:hover .teaser-media img{ transform:scale(1.045); }
.teaser-body{ flex:1; }
.teaser-body .eyebrow{ color:var(--accent, var(--ink-soft)); margin-bottom:0.5rem; }
.teaser-body h3{
  font-style:italic;
  font-size:clamp(1.4rem, 2.4vw, 1.9rem);
  margin:0 0 0.6rem;
}
.teaser-body p{ color:var(--ink-soft); margin:0; max-width:48ch; }
.teaser-arrow{
  flex:0 0 auto;
  font-size:1.6rem;
  color:var(--accent, var(--ink));
  transition:transform .25s ease;
}
.teaser-row:hover .teaser-arrow{ transform:translateX(6px); }
@media (max-width:640px){
  .teaser-row{ flex-wrap:wrap; }
  .teaser-row .teaser-media{ flex-basis:100%; aspect-ratio:16/10; }
}

/* ==========================================================================
   Curated work grid (home) + full gallery grid (portfolio pages)
   ========================================================================== */
.work-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
  gap:2.6rem 2.2rem;
}
.work-card{ text-decoration:none; color:inherit; }
.work-card figure{
  margin:0 0 1rem;
  aspect-ratio:1/1;
  overflow:hidden;
  position:relative;
  background:var(--paper-deep);
}
/* object-fit:contain (not cover) — portfolio photos come in from the
   artist at whatever aspect ratio he shot them, tall studio portraits
   included, and a fixed square tile with "cover" was cropping the top and
   bottom off anything that wasn't already close to square. "contain" always
   shows the whole photo, letterboxed against the figure's paper-deep
   background on whichever axis doesn't fill the square — the same quiet
   matte-background look several already-square photos in these grids have. */
.work-card figure img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; transition:transform .5s ease; }
.work-card:hover figure img{ transform:scale(1.045); }
.work-card .title{ font-family:'Fraunces', serif; font-style:italic; font-size:1.08rem; margin:0 0 0.2rem; }
.work-card .meta{ font-size:0.85rem; color:var(--ink-soft); letter-spacing:0.02em; }
/* Store product photos inherit the same object-fit:contain as the portfolio
   grids above, and for the same reason: a fixed square tile with "cover"
   silently slices the top and bottom off anything taller than it is wide.
   A tall piece like an 18" x 9" glass panel lost ~40% of the artwork that
   way — and no amount of cropping the source file could fix it, because the
   tile re-cropped whatever it was given. "contain" always shows the entire
   piece, letterboxed against the figure's paper-deep background, so a buyer
   sees the whole work. (Cropping in the admin panel is now optional — it
   only changes how much empty background surrounds the piece.) */

/* ==========================================================================
   Page header — for interior pages without a full photo hero
   ========================================================================== */
.page-header{
  padding:9.5rem 0 3.6rem;
  text-align:center;
}
.page-header .eyebrow{ color:var(--accent, var(--ink-soft)); margin-bottom:1rem; }
.page-header h1{
  font-style:italic;
  font-size:clamp(2.4rem, 5vw, 3.6rem);
  margin:0 0 1.1rem;
}
.page-header p{
  max-width:52ch;
  margin:0 auto;
  color:var(--ink-soft);
  font-size:1.05rem;
}

/* badge / status pill (store toggle, coming-soon, technique tags) */
.pill{
  display:inline-block;
  font-size:0.72rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--ink-soft);
  border:1px solid var(--line);
  border-radius:20px;
  padding:0.35rem 0.9rem;
  background:var(--white);
}

/* ==========================================================================
   Bio specifics
   ========================================================================== */
.fact-list{ list-style:none; margin:0; padding:0; }
.fact-list li{
  display:flex;
  gap:1.4rem;
  padding:1rem 0;
  border-top:1px solid var(--line);
  font-size:0.95rem;
}
.fact-list li:first-child{ border-top:none; }
.fact-list dt{ flex:0 0 9rem; color:var(--ink-soft); text-transform:uppercase; letter-spacing:0.08em; font-size:0.72rem; margin:0.2rem 0 0; }
.fact-list dd{ margin:0; }

.video-wrap{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  background:var(--ink-surface);
  overflow:hidden;
}
.video-wrap iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.video-wrap + .studio-strip{ margin-top:1.5rem; }

/* portrait phone-shot process clips, shown side by side */
.clip-row{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:1.2rem;
  max-width:640px;
}
.clip-row video{
  width:100%;
  aspect-ratio:9/16;
  object-fit:cover;
  background:var(--ink-surface);
  border-radius:4px;
}
.studio-strip + .clip-row{ margin-top:1.5rem; }

/* Admin-added process video (see the Process panels in admin.html). Unlike
   .clip-row above — which is hand-built for two known portrait phone clips —
   these can be any shape, so height is left to the video's own aspect ratio
   rather than forced to 9/16 and cropped. */
.process-videos:not(:empty){ margin-top:1.5rem; }
.process-videos > * + *{ margin-top:1.5rem; }
.process-clips{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:1.2rem;
  align-items:start;
}
.process-clips video{
  width:100%;
  height:auto;
  display:block;
  background:var(--ink-surface);
  border-radius:4px;
}

/* placeholder note for a technique section with no media yet */
.media-placeholder{
  border:1px dashed var(--line);
  border-radius:10px;
  padding:2.2rem 2rem;
  text-align:center;
  color:var(--ink-soft);
  font-size:0.9rem;
  background:var(--white);
}

.studio-strip{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:0.5rem;
}
.studio-strip img{ width:100%; height:100%; object-fit:cover; aspect-ratio:1/1; }
.studio-strip.cols-2{ grid-template-columns:repeat(2, 1fr); }
.studio-strip.cols-1{ grid-template-columns:1fr; }
.studio-strip.cols-1 img{ aspect-ratio:16/9; }
@media (max-width:640px){
  .studio-strip{ grid-template-columns:1fr 1fr; }
  .studio-strip.cols-1{ grid-template-columns:1fr; }
}

/* the single wide studio shot in the glass gallery, sized down so it
   doesn't dominate the section */
#process-strip-glass.cols-1{ max-width:480px; margin:0 auto; }

/* a small row of mixed stills + a portrait clip, sized to a shared
   height rather than a forced crop so nothing gets cut off */
.media-row{
  display:flex;
  flex-wrap:wrap;
  gap:1rem;
  align-items:flex-start;
  margin-top:1.5rem;
}
.media-row img,
.media-row video{
  height:260px;
  width:auto;
  max-width:100%;
  border-radius:4px;
  background:var(--ink-surface);
}

/* ==========================================================================
   Blog
   ========================================================================== */
.post-row{
  display:grid;
  grid-template-columns:220px 1fr;
  gap:2.6rem;
  padding:2.8rem 0;
  border-top:1px solid var(--line);
  scroll-margin-top:6rem; /* keeps a #post-id deep link from landing under the fixed header */
}
.post-row:first-of-type{ border-top:none; }
.post-row.no-media{ grid-template-columns:1fr; }
.post-row .post-media{ aspect-ratio:1/1; overflow:hidden; position:relative; }
.post-row .post-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.post-date{ font-size:0.78rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-soft); margin:0 0 0.6rem; }
.post-row h3{ font-style:italic; font-size:1.5rem; margin:0 0 0.7rem; }
.post-row p{ color:var(--ink-soft); margin:0 0 1rem; max-width:56ch; }
.qa-box{
  border:1px solid var(--line);
  border-radius:10px;
  padding:1.1rem 1.3rem;
  background:var(--white);
  font-size:0.88rem;
  color:var(--ink-soft);
}
.qa-box strong{ color:var(--ink); }
.qa-list{ display:flex; flex-direction:column; gap:0.9rem; margin:0 0 1.3rem; }
.post-row .ask-form{ max-width:440px; margin-top:0.4rem; }
.post-row .ask-form textarea{ min-height:5.5rem; }
@media (max-width:700px){ .post-row{ grid-template-columns:1fr; } }

/* ==========================================================================
   Store
   ========================================================================== */
.store-off{
  max-width:560px;
  margin:0 auto;
  text-align:center;
  padding:2.6rem 2.4rem 3rem;
  border:1px dashed var(--line);
  border-radius:14px;
  background:var(--white);
}
.store-off h2{ font-style:italic; font-size:1.6rem; margin:0.6rem 0 0.8rem; }
.store-off p{ color:var(--ink-soft); margin:0 0 0; }

/* store product grid — extends .work-grid/.work-card with price + sold state */
.store-note{
  max-width:640px;
  margin:0 0 3rem;
  color:var(--ink-soft);
  font-size:0.95rem;
}
.store-grid .work-card{ position:relative; }
.store-grid figure{ background:var(--paper-deep); }
.store-grid .placeholder-img{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:1.5rem;
  color:var(--ink-soft);
  font-size:0.78rem;
  letter-spacing:0.06em;
  text-transform:uppercase;
  background:repeating-linear-gradient(135deg, var(--paper-deep), var(--paper-deep) 10px, var(--paper) 10px, var(--paper) 20px);
}
.store-grid .sold-badge{
  position:absolute;
  top:0.9rem;
  left:0.9rem;
  z-index:2;
  font-size:0.68rem;
  letter-spacing:0.12em;
  text-transform:uppercase;
  font-weight:500;
  color:var(--white);
  background:var(--ink);
  padding:0.35rem 0.75rem;
  border-radius:20px;
}
.store-grid .work-card.is-sold figure{ filter:grayscale(65%); opacity:0.62; }
.store-grid .price-row{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:0.8rem;
  margin-top:0.3rem;
}
.store-grid .price{ font-family:'Fraunces', serif; font-style:italic; font-size:1.05rem; color:var(--coral); }
.store-grid .work-card.is-sold .price{ color:var(--ink-soft); }
.store-grid .shipping-note{ margin-top:0.15rem; font-size:0.76rem; opacity:0.8; }
.buy-btn{
  display:inline-block;
  margin-top:0.9rem;
  font-family:'Jost', sans-serif;
  font-size:0.78rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  padding:0.65rem 1.3rem;
  background:var(--ink);
  color:var(--white);
  border:none;
  border-radius:30px;
  text-decoration:none;
  cursor:pointer;
  transition:opacity 0.2s ease;
}
.buy-btn:hover{ opacity:0.85; }
.buy-btn[aria-disabled="true"]{
  background:transparent;
  color:var(--ink-soft);
  border:1px solid var(--line);
  cursor:default;
  pointer-events:none;
}

/* Click-to-enlarge on the Store page — a piece's photo opens full-size in
   an overlay for closer inspection, closed via the X button, clicking the
   dark backdrop, or Escape. See the lightbox script in store.html. */
.store-grid .work-card figure img{ cursor:zoom-in; }
.lightbox-overlay{
  position:fixed;
  inset:0;
  z-index:1000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:3rem 2rem;
  background:rgba(24,19,12,0.88);
}
.lightbox-overlay[hidden]{ display:none; }
.lightbox-overlay img{
  display:block;
  max-width:90vw;
  max-height:90vh;
  width:auto;
  height:auto;
  background:var(--white);
  box-shadow:0 25px 70px rgba(0,0,0,0.45);
}
.lightbox-close{
  position:fixed;
  top:1.2rem;
  right:1.5rem;
  width:2.7rem;
  height:2.7rem;
  border-radius:50%;
  border:none;
  background:var(--white);
  color:var(--ink);
  font-size:1.7rem;
  line-height:1;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:opacity 0.2s ease;
}
.lightbox-close:hover{ opacity:0.8; }

/* ==========================================================================
   Contact
   ========================================================================== */
.contact-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:4rem;
}
.contact-form{ display:flex; flex-direction:column; gap:1.1rem; }
.contact-form label{ font-size:0.78rem; letter-spacing:0.06em; text-transform:uppercase; color:var(--ink-soft); display:block; margin-bottom:0.4rem; }
.contact-form input, .contact-form textarea{
  width:100%;
  font-family:'Jost', sans-serif;
  font-size:0.98rem;
  padding:0.7rem 0.85rem;
  border:1px solid var(--line);
  border-radius:6px;
  background:var(--white);
  color:var(--ink);
}
.contact-form button{
  align-self:flex-start;
  margin-top:0.4rem;
  font-family:'Jost', sans-serif;
  font-size:0.85rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  padding:0.85rem 1.8rem;
  background:var(--ink);
  color:var(--white);
  border:none;
  border-radius:30px;
  cursor:pointer;
  transition:opacity 0.2s ease;
}
.contact-form button:disabled{ opacity:0.6; cursor:default; }
.contact-form .form-status{
  margin:0;
  font-size:0.9rem;
  min-height:1.4em;
}
.contact-form .form-status.is-success{ color:var(--teal); }
.contact-form .form-status.is-error{ color:var(--coral); }
.contact-info dt{ text-transform:uppercase; letter-spacing:0.08em; font-size:0.72rem; color:var(--ink-soft); margin:0 0 0.3rem; }
.contact-info dd{ margin:0 0 1.6rem; font-size:1.02rem; }
@media (max-width:760px){ .contact-grid{ grid-template-columns:1fr; gap:2.6rem; } }

/* Blog subscribe box ("Stay in the loop") — sits above the post list on the
   Blog page. Reuses .contact-form for the input/button/status styling, just
   laid out as a single row instead of stacked label/input pairs. */
.subscribe-box{
  border:1px solid var(--line);
  border-radius:8px;
  padding:1.4rem 1.6rem;
  margin-bottom:2rem;
  background:var(--paper-deep);
}
.subscribe-box p{ margin:0 0 1rem; color:var(--ink-soft); }
.subscribe-row{ display:flex; gap:0.75rem; flex-wrap:wrap; }
.subscribe-row input[type="email"]{ flex:1 1 220px; }
.subscribe-row button{ flex-shrink:0; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{
  background:var(--ink-surface);
  color:rgba(255,253,248,0.78);
  padding:3.4rem 0 2.6rem;
}
.footer-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:1.2rem;
}
.footer-row .wordmark{
  font-family:'Fraunces', serif;
  font-style:italic;
  font-size:1.15rem;
  color:var(--white);
  text-decoration:none;
}
.footer-links{ display:flex; flex-wrap:wrap; row-gap:0.6rem; column-gap:1.8rem; font-size:0.82rem; letter-spacing:0.03em; }
.footer-links a{ color:rgba(255,253,248,0.72); text-decoration:none; }
.footer-links a:hover{ color:var(--white); }
.footer-note{ font-size:0.76rem; color:rgba(255,253,248,0.45); margin-top:1.6rem; }

/* ==========================================================================
   Misc utility
   ========================================================================== */
.visually-hidden{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }