/* =========================================================================
   Ralph Mello Pottery — "A Place for Pottery"
   A dark wood-kiln gallery. Palette pulled from his glazes: reduction-fired
   clay-black, bone/ash, shino-flash ember, molten-glass celadon, logo gold.
   ========================================================================= */

:root{
  /* surfaces */
  --bg:        #15100c;
  --bg-2:      #1c1610;
  --bg-3:      #241c15;
  --bg-card:   #221a13;
  --line:      rgba(236,228,214,.12);
  --line-2:    rgba(236,228,214,.22);
  /* ink */
  --ash:       #ece4d6;
  --ash-2:     #d6cab6;
  --muted:     #9b8c79;
  --muted-2:   #786a59;
  /* glaze accents */
  --ember:     #d06a33;   /* shino iron flash */
  --ember-lt:  #ea8a52;
  --glass:     #9aa87d;   /* molten celadon green */
  --gold:      #c79a46;   /* the logo vase */
  /* type */
  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --body:    "Hanken Grotesk", system-ui, -apple-system, sans-serif;
  --mono:    "Spline Sans Mono", ui-monospace, "SFMono-Regular", monospace;
  /* metrics */
  --wrap: 1240px;
  --gut: clamp(20px, 5vw, 64px);
  --radius: 3px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--bg);
  color:var(--ash);
  font-family:var(--body);
  font-size:clamp(1rem, .96rem + .2vw, 1.075rem);
  line-height:1.7;
  font-weight:350;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
/* warm kiln glow + faint grain for tactility */
body::before{
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(120% 80% at 78% -10%, rgba(208,106,51,.13), transparent 45%),
    radial-gradient(90% 70% at 8% 108%, rgba(154,168,125,.07), transparent 50%);
}
body::after{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E");
}

img{ max-width:100%; display:block; height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; cursor:pointer; }

::selection{ background:var(--ember); color:#1a120c; }

:focus-visible{ outline:2px solid var(--ember-lt); outline-offset:3px; border-radius:1px; }

.skip-link{
  position:absolute; left:-9999px; top:0; background:var(--ember); color:#1a120c;
  padding:.7em 1.2em; font:600 .9rem/1 var(--mono); z-index:200;
}
.skip-link:focus{ left:12px; top:12px; }

/* ---- layout ---- */
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut); }
.wrap-wide{ width:92%; max-width:1900px; margin-inline:auto; }
@media (max-width:680px){ .wrap-wide{ width:100%; padding-inline:var(--gut); } }
.section{ padding-block:clamp(64px, 9vw, 130px); position:relative; }
.section--tight{ padding-block:clamp(48px,6vw,90px); }

/* ---- type helpers ---- */
.eyebrow{
  display:inline-flex; align-items:center; gap:.7em;
  font:500 .72rem/1 var(--mono); letter-spacing:.22em; text-transform:uppercase;
  color:var(--muted); margin:0 0 1.4rem;
}
.eyebrow::before{ content:""; width:26px; height:1px; background:var(--ember); }
.eyebrow--center{ justify-content:center; }

h1,h2,h3{ font-family:var(--display); font-weight:340; line-height:1.02; letter-spacing:-.018em; margin:0; }
.section-title{ font-size:clamp(2.1rem, 1.3rem + 3.2vw, 3.9rem); color:var(--ash); }
.section-title em{ font-style:italic; font-weight:380; color:var(--gold); }
.lede{ font-size:clamp(1.08rem,1rem + .5vw,1.3rem); color:var(--ash-2); font-weight:340; line-height:1.6; max-width:42ch; }
.muted{ color:var(--muted); }

/* ---- buttons ---- */
.btn{
  display:inline-flex; align-items:center; gap:.6em;
  font:500 .82rem/1 var(--mono); letter-spacing:.06em; text-transform:uppercase;
  padding:1.05em 1.6em; border:1px solid transparent; border-radius:var(--radius);
  transition:transform .35s var(--ease), background .3s, border-color .3s, color .3s;
}
.btn:hover{ transform:translateY(-2px); }
.btn-primary{ background:var(--ember); color:#190f08; }
.btn-primary:hover{ background:var(--ember-lt); }
.btn-ghost{ border-color:var(--line-2); color:var(--ash); }
.btn-ghost:hover{ border-color:var(--ash); }
.btn .arw{ transition:transform .35s var(--ease); }
.btn:hover .arw{ transform:translateX(4px); }

/* =========================================================================
   HEADER / NAV
   ========================================================================= */
.site-header{
  position:sticky; top:0; z-index:100;
  backdrop-filter:saturate(140%) blur(10px);
  background:linear-gradient(var(--bg) ,rgba(21,16,12,.72));
  border-bottom:1px solid transparent;
  transition:border-color .4s, background .4s;
}
.site-header.is-stuck{ border-color:var(--line); background:rgba(18,13,10,.86); }
.header-inner{ display:flex; align-items:center; justify-content:space-between; gap:2rem; padding-block:1.05rem; }
.brand{ display:flex; align-items:baseline; gap:.55rem; line-height:1; }
.brand-name{ font-family:var(--display); font-size:1.42rem; font-weight:420; letter-spacing:-.01em; color:var(--ash); }
.brand-tag{ font:500 .62rem/1 var(--mono); letter-spacing:.34em; text-transform:uppercase; color:var(--ember); }
.brand:hover .brand-tag{ color:var(--ember-lt); }

.site-nav{ display:flex; align-items:center; gap:.3rem; }
.site-nav a{
  position:relative; padding:.6rem .95rem; font:500 .82rem/1 var(--mono);
  letter-spacing:.05em; text-transform:uppercase; color:var(--ash-2); border-radius:var(--radius);
  transition:color .25s;
}
.site-nav a::after{
  content:""; position:absolute; left:.95rem; right:.95rem; bottom:.34rem; height:1px;
  background:var(--ember); transform:scaleX(0); transform-origin:left; transition:transform .3s var(--ease);
}
.site-nav a:hover{ color:var(--ash); }
.site-nav a:hover::after, .site-nav a.is-active::after{ transform:scaleX(1); }
.site-nav a.is-active{ color:var(--ash); }
.site-nav a.cta-link{ color:var(--ember); }

.nav-toggle{ display:none; flex-direction:column; gap:5px; background:none; border:0; padding:.5rem; }
.nav-toggle span{ width:24px; height:1.5px; background:var(--ash); transition:transform .3s, opacity .3s; }

/* =========================================================================
   HERO
   ========================================================================= */
.hero{ position:relative; padding-top:clamp(40px,6vw,80px); padding-bottom:clamp(56px,8vw,110px); }
.hero-grid{
  display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,5vw,72px); align-items:center;
}
.hero-copy{ max-width:36ch; }
.hero h1{
  font-size:clamp(3.1rem, 1.6rem + 7.6vw, 7.4rem); font-weight:300; line-height:.92;
  letter-spacing:-.03em; margin:.2em 0 .42em;
}
.hero h1 .it{ font-style:italic; font-weight:340; }
.hero .lede{ margin-bottom:2.2rem; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:.8rem; }
.hero-meta{ margin-top:2.6rem; display:flex; gap:2.2rem; }
.hero-meta div{ display:flex; flex-direction:column; gap:.25rem; }
.hero-meta b{ font-family:var(--display); font-weight:380; font-size:1.7rem; color:var(--ash); }
.hero-meta span{ font:500 .68rem/1.2 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }

.hero-figure{ position:relative; justify-self:end; width:100%; }
.hero-figure .glow{
  position:absolute; inset:-12% -8% -16% -8%; z-index:0;
  background:radial-gradient(60% 55% at 50% 42%, rgba(208,106,51,.4), rgba(199,154,70,.12) 45%, transparent 72%);
  filter:blur(8px);
}
.hero-figure img{
  position:relative; z-index:1; width:100%; border-radius:var(--radius);
  box-shadow:0 40px 80px -30px rgba(0,0,0,.85), 0 0 0 1px var(--line);
  animation:floaty 9s var(--ease) infinite;
}
.hero-figure figcaption{
  position:absolute; z-index:2; right:-6px; bottom:24px;
  background:rgba(18,13,10,.82); backdrop-filter:blur(6px); border:1px solid var(--line);
  padding:.7rem 1rem; font:500 .68rem/1.5 var(--mono); letter-spacing:.06em; text-transform:uppercase;
  color:var(--ash-2); max-width:62%;
}
.hero-figure figcaption b{ color:var(--ember); font-weight:500; }
@keyframes floaty{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-12px); } }
@media (prefers-reduced-motion: reduce){ .hero-figure img{ animation:none; } }

/* =========================================================================
   SHOWCASE GRID + PLACARD (the signature)
   ========================================================================= */
.section-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:1.5rem; flex-wrap:wrap; margin-bottom:clamp(28px,4vw,52px); }
.section-head .lede{ margin-top:.7rem; }
.section-head .head-link{ font:500 .78rem/1 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--ember); display:inline-flex; gap:.5em; align-items:center; }
.section-head .head-link:hover{ color:var(--ember-lt); }

/* filter bar */
.filter{ display:flex; gap:.4rem; flex-wrap:wrap; align-items:center; margin-bottom:clamp(24px,3vw,40px); }
.filter a{
  font:500 .76rem/1 var(--mono); letter-spacing:.06em; text-transform:uppercase;
  padding:.7em 1.1em; border:1px solid var(--line); border-radius:100px; color:var(--ash-2);
  transition:border-color .25s,color .25s,background .25s;
}
.filter a .n{ color:var(--muted-2); margin-left:.5em; }
.filter a:hover{ border-color:var(--line-2); color:var(--ash); }
.filter a.is-on{ background:var(--ash); color:#1a120c; border-color:var(--ash); }
.filter a.is-on .n{ color:rgba(26,18,12,.55); }

/* gallery wall — irregular masonry via CSS columns */
.gallery{ columns:4; column-gap:18px; }
.gallery--home{ columns:3; }
@media (max-width:1100px){ .gallery{ columns:3; } }
@media (max-width:760px){ .gallery, .gallery--home{ columns:2; column-gap:12px; } }
@media (max-width:420px){ .gallery, .gallery--home{ columns:1; } }

.piece{
  break-inside:avoid; margin-bottom:18px; position:relative; display:block;
  border-radius:var(--radius); overflow:hidden; background:var(--bg-2);
  border:1px solid var(--line); cursor:pointer;
  transition:transform .5s var(--ease), border-color .4s, box-shadow .5s;
}
.piece img{ width:100%; transition:transform .9s var(--ease), filter .5s; filter:saturate(.96) brightness(.97); }
.piece::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(14,9,6,.92) 0%, rgba(14,9,6,.35) 32%, transparent 58%);
  opacity:0; transition:opacity .45s var(--ease);
}
.piece:hover{ transform:translateY(-4px); border-color:var(--line-2); box-shadow:0 30px 50px -28px rgba(0,0,0,.8); }
.piece:hover img{ transform:scale(1.045); filter:saturate(1.05) brightness(1.02); }
.piece:hover::after{ opacity:1; }
.piece.is-sold img{ filter:saturate(.7) brightness(.82); }

/* the museum placard */
.placard{
  position:absolute; left:0; right:0; bottom:0; z-index:2; padding:1rem 1.05rem 1.05rem;
  transform:translateY(8px); opacity:0; transition:transform .5s var(--ease), opacity .45s;
  font-family:var(--mono);
}
.piece:hover .placard{ transform:translateY(0); opacity:1; }
.placard .p-name{ font-family:var(--display); font-size:1.05rem; font-weight:400; letter-spacing:-.01em; color:var(--ash); line-height:1.2; margin-bottom:.45rem; }
.placard .p-spec{ font-size:.72rem; letter-spacing:.03em; color:var(--ash-2); display:flex; flex-wrap:wrap; gap:.5em; align-items:center; }
.placard .p-price{ color:var(--ember-lt); }
.status-dot{ display:inline-flex; align-items:center; gap:.45em; font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; }
.status-dot::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--glass); box-shadow:0 0 0 3px rgba(154,168,125,.18); }
.status-dot.is-sold{ color:var(--muted); }
.status-dot.is-sold::before{ background:var(--muted-2); box-shadow:none; }

/* a tiny always-on corner tag for sold pieces */
.sold-tag{
  position:absolute; top:10px; left:10px; z-index:3;
  font:500 .6rem/1 var(--mono); letter-spacing:.18em; text-transform:uppercase; color:var(--ash-2);
  background:rgba(14,9,6,.7); border:1px solid var(--line); padding:.45em .7em; border-radius:100px;
}

/* =========================================================================
   LIGHTBOX
   ========================================================================= */
.lightbox{ position:fixed; inset:0; z-index:300; display:none; place-items:center; padding:clamp(16px,4vw,56px);
  background:rgba(10,7,5,.94); backdrop-filter:blur(4px); }
.lightbox.is-open{ display:grid; }
.lb-stage{ display:flex; flex-direction:column; align-items:center; gap:1.2rem; max-width:1100px; max-height:100%; }
.lb-img{ max-width:100%; max-height:74vh; width:auto; border-radius:var(--radius); box-shadow:0 40px 90px -30px #000; }
.lb-cap{ text-align:center; font-family:var(--mono); }
.lb-cap .p-name{ font-family:var(--display); font-size:1.5rem; color:var(--ash); margin-bottom:.4rem; }
.lb-cap .p-spec{ font-size:.82rem; letter-spacing:.04em; color:var(--ash-2); display:flex; gap:.8em; justify-content:center; flex-wrap:wrap; align-items:center; }
.lb-cap .p-price{ color:var(--ember-lt); }
.lb-close,.lb-nav{ position:absolute; background:rgba(34,26,19,.7); border:1px solid var(--line-2); color:var(--ash);
  width:52px; height:52px; border-radius:50%; display:grid; place-items:center; font-size:1.3rem; transition:background .25s,transform .25s; }
.lb-close:hover,.lb-nav:hover{ background:var(--ember); color:#190f08; }
.lb-close{ top:24px; right:24px; }
.lb-nav{ top:50%; transform:translateY(-50%); }
.lb-prev{ left:18px; } .lb-next{ right:18px; }
.lb-prev:hover{ transform:translateY(-50%) translateX(-3px); } .lb-next:hover{ transform:translateY(-50%) translateX(3px); }

/* =========================================================================
   CALENDAR
   ========================================================================= */
.cal-layout{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(32px,5vw,68px); align-items:start; }
.upcoming-list{ display:flex; flex-direction:column; }
.evt{
  display:grid; grid-template-columns:auto 1fr auto; gap:1.3rem; align-items:center;
  padding:1.5rem 0; border-top:1px solid var(--line);
}
.upcoming-list .evt:last-child{ border-bottom:1px solid var(--line); }
.evt-date{ text-align:center; min-width:64px; font-family:var(--mono); line-height:1; }
.evt-date .mo{ font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ember); display:block; margin-bottom:.35rem; }
.evt-date .dy{ font-family:var(--display); font-size:2.3rem; font-weight:340; color:var(--ash); }
.evt-date .dy .ord{ font-size:.34em; vertical-align:super; font-family:var(--mono); color:var(--muted); margin-left:.06em; letter-spacing:.02em; }
.evt-date .yr{ display:block; font-size:.62rem; letter-spacing:.16em; color:var(--muted-2); margin-top:.3rem; }
.evt-body .evt-name{ font-family:var(--display); font-size:1.22rem; font-weight:400; color:var(--ash); line-height:1.25; margin-bottom:.35rem; }
.evt-meta{ display:flex; flex-wrap:wrap; gap:.4em 1.1em; font:500 .74rem/1.4 var(--mono); letter-spacing:.03em; color:var(--muted); }
.evt-meta .loc{ color:var(--ash-2); }
.evt-dir{ font:500 .72rem/1 var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--ember); white-space:nowrap; display:inline-flex; gap:.45em; align-items:center; }
.evt-dir:hover{ color:var(--ember-lt); }
.evt.is-next{ background:linear-gradient(90deg, rgba(208,106,51,.08), transparent 60%); margin-inline:calc(-1*var(--gut)); padding-inline:var(--gut); border-radius:var(--radius); }
.evt.is-next .evt-date .dy{ color:var(--ember-lt); }

/* month grid */
.cal-card{ background:var(--bg-2); border:1px solid var(--line); border-radius:var(--radius); padding:clamp(18px,2.5vw,28px); position:sticky; top:90px; }
.cal-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:1.2rem; }
.cal-top h3{ font-family:var(--display); font-size:1.45rem; font-weight:360; }
.cal-nav-btn{ width:38px; height:38px; border:1px solid var(--line); background:none; border-radius:50%; color:var(--ash); display:grid; place-items:center; transition:border-color .25s,background .25s; }
.cal-nav-btn:hover{ border-color:var(--ember); color:var(--ember-lt); }
.cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:3px; }
.cal-dow{ font:500 .62rem/2 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--muted-2); text-align:center; }
.cal-day{ aspect-ratio:1; display:flex; flex-direction:column; align-items:center; justify-content:center; position:relative;
  font-family:var(--mono); font-size:.86rem; color:var(--ash-2); border-radius:var(--radius); border:1px solid transparent; }
.cal-day.empty{ visibility:hidden; }
.cal-day.is-today{ border-color:var(--line-2); color:var(--ash); }
.cal-day.has-evt{ cursor:pointer; color:var(--ash); background:rgba(208,106,51,.1); }
.cal-day.has-evt::after{ content:""; width:5px; height:5px; border-radius:50%; background:var(--ember); position:absolute; bottom:7px; }
.cal-day.has-evt:hover, .cal-day.sel{ background:var(--ember); color:#190f08; }
.cal-day.has-evt:hover::after, .cal-day.sel::after{ background:#190f08; }
.cal-detail{ margin-top:1.2rem; padding-top:1.2rem; border-top:1px solid var(--line); min-height:48px; font-size:.92rem; }
.cal-detail .cd-empty{ color:var(--muted); font-family:var(--mono); font-size:.8rem; letter-spacing:.04em; }
.cal-detail .cd-evt{ margin-bottom:.8rem; }
.cal-detail .cd-evt b{ font-family:var(--display); font-weight:400; color:var(--ash); display:block; }
.cal-detail .cd-evt span{ font:500 .74rem/1.5 var(--mono); color:var(--muted); }

.past-shows{ margin-top:clamp(48px,6vw,84px); }
.past-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.past-grid .ps{ background:var(--bg); padding:1.1rem 1.2rem; }
.past-grid .ps .d{ font:500 .68rem/1 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--ember); }
.past-grid .ps .t{ font-family:var(--display); font-size:1rem; color:var(--ash-2); margin-top:.4rem; line-height:1.3; }

/* =========================================================================
   JOURNAL / NEWS
   ========================================================================= */
.journal-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(310px,1fr)); gap:clamp(20px,3vw,38px); }
.jcard{ display:flex; flex-direction:column; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--bg-2); transition:transform .4s var(--ease),border-color .4s; }
.jcard:hover{ transform:translateY(-4px); border-color:var(--line-2); }
.jcard-img{ aspect-ratio:3/2; overflow:hidden; background:var(--bg-3); }
.jcard-img img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
.jcard:hover .jcard-img img{ transform:scale(1.05); }
.jcard-body{ padding:1.4rem 1.5rem 1.6rem; display:flex; flex-direction:column; flex:1; }
.jcard .date{ font:500 .68rem/1 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:.8rem; }
.jcard h3{ font-size:1.32rem; font-weight:400; line-height:1.2; margin-bottom:.6rem; }
.jcard p{ color:var(--muted); font-size:.95rem; line-height:1.6; margin:0 0 1.2rem; }
.jcard .more{ margin-top:auto; font:500 .74rem/1 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--ember); }

/* article */
.article{ max-width:720px; margin-inline:auto; }
.article-head{ text-align:center; margin-bottom:clamp(32px,4vw,56px); }
.article-head h1{ font-size:clamp(2.2rem,1.4rem + 3vw,3.4rem); margin:.6rem 0; }
.article-body{ font-size:1.1rem; line-height:1.8; color:var(--ash-2); }
.article-body p{ margin:0 0 1.3rem; }
.article-body img{ border-radius:var(--radius); margin:1.8rem 0; border:1px solid var(--line); }
.back-link{ font:500 .76rem/1 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--ember); display:inline-flex; gap:.5em; }

/* =========================================================================
   ABOUT
   ========================================================================= */
.about-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,6vw,80px); align-items:center; }
.about-figure{ position:relative; }
.about-figure img{ width:100%; border-radius:var(--radius); box-shadow:0 40px 70px -34px rgba(0,0,0,.8); border:1px solid var(--line); }
.about-figure .mark-chip{ position:absolute; right:-14px; bottom:-14px; }
.about-body p{ margin:0 0 1.3rem; color:var(--ash-2); font-size:1.08rem; line-height:1.8; }
.about-body p:first-of-type{ font-family:var(--display); font-size:1.4rem; line-height:1.5; color:var(--ash); font-weight:360; }
.mark-chip{ display:inline-flex; background:#f4efe4; border-radius:var(--radius); padding:.9rem 1.1rem; box-shadow:0 16px 30px -16px rgba(0,0,0,.7); }
.mark-chip img{ width:120px; height:auto; }

/* =========================================================================
   CONTACT
   ========================================================================= */
.contact-grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(32px,5vw,68px); align-items:start; }
.contact-aside .lede{ margin-bottom:2rem; }
.contact-line{ display:flex; flex-direction:column; gap:.3rem; padding:1.1rem 0; border-top:1px solid var(--line); }
.contact-line .k{ font:500 .68rem/1 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.contact-line a,.contact-line span.v{ font-family:var(--display); font-size:1.2rem; color:var(--ash); }
.contact-line a:hover{ color:var(--ember-lt); }
.form{ display:grid; gap:1.1rem; }
.field{ display:flex; flex-direction:column; gap:.5rem; }
.field label{ font:500 .7rem/1 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.field input,.field textarea{
  background:var(--bg-2); border:1px solid var(--line); border-radius:var(--radius); color:var(--ash);
  padding:.95rem 1.05rem; font:inherit; font-size:1rem; transition:border-color .25s,background .25s;
}
.field input:focus,.field textarea:focus{ outline:none; border-color:var(--ember); background:var(--bg-3); }
.field textarea{ min-height:150px; resize:vertical; }
.form .btn{ justify-self:start; }
.flash{ padding:1.1rem 1.3rem; border-radius:var(--radius); border:1px solid var(--glass); background:rgba(154,168,125,.1); color:var(--ash); font-size:.96rem; margin-bottom:1.4rem; }

/* =========================================================================
   FOOTER
   ========================================================================= */
.site-footer{ border-top:1px solid var(--line); margin-top:clamp(40px,6vw,90px); background:linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.25)); }
.footer-inner{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:clamp(28px,4vw,60px); padding-block:clamp(48px,6vw,80px); }
.footer-h{ font:500 .66rem/1 var(--mono); letter-spacing:.18em; text-transform:uppercase; color:var(--muted-2); margin-bottom:1.3rem; display:block; }
.footer-brand .mark-chip{ margin-bottom:1.2rem; }
.footer-tag{ font-family:var(--display); font-style:italic; font-size:1.5rem; color:var(--ash-2); margin:0; font-weight:340; }
.footer-nav{ display:flex; flex-direction:column; gap:.7rem; }
.footer-nav a{ color:var(--ash-2); font-size:.96rem; width:fit-content; transition:color .2s; }
.footer-nav a:hover{ color:var(--ember-lt); }
.footer-connect{ display:flex; flex-direction:column; gap:.8rem; align-items:flex-start; }
.footer-connect a{ color:var(--ash-2); transition:color .2s; }
.footer-connect a:hover{ color:var(--ember-lt); }
.footer-next{ display:flex; flex-direction:column; gap:.2rem; padding:.7rem 0; }
.footer-next-date{ font:500 .82rem/1 var(--mono); letter-spacing:.1em; color:var(--ember); }
.footer-base{ display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; padding-block:1.6rem; border-top:1px solid var(--line); font-size:.84rem; color:var(--muted); }
.footer-base p{ margin:0; }

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width:920px){
  .hero-grid, .cal-layout, .about-grid, .contact-grid{ grid-template-columns:1fr; }
  .hero-figure{ justify-self:center; max-width:440px; order:-1; }
  .cal-card{ position:static; }
  .footer-inner{ grid-template-columns:1fr 1fr; }
  .about-figure{ max-width:460px; }
}
@media (max-width:680px){
  .nav-toggle{ display:flex; z-index:120; }
  .site-nav{
    position:fixed; inset:0 0 0 auto; width:min(78vw,320px); flex-direction:column; align-items:flex-start; justify-content:center; gap:.4rem;
    background:var(--bg-2); border-left:1px solid var(--line); padding:2rem; transform:translateX(100%); transition:transform .4s var(--ease);
  }
  .site-nav.is-open{ transform:translateX(0); }
  .site-nav a{ font-size:1rem; padding:.8rem 0; }
  .site-nav a::after{ left:0; right:auto; width:0; }
  .footer-inner{ grid-template-columns:1fr; }
  .evt{ grid-template-columns:auto 1fr; }
  .evt-dir{ grid-column:2; justify-self:start; margin-top:.3rem; }
  .hero-meta{ gap:1.6rem; }
}