/* ============================================================
   Fountain Pens & Inks — style.css
   Fonts: Fraunces (headings) | Plus Jakarta Sans (body/UI)

   TWO COLOUR SCHEMES — swap the active :root block to change.
   ============================================================

   SCHEME A (active): "Midnight Ink"
   Deep navy + warm cream + gold nib accent.
   Rich, editorial, premium stationery feel.

   SCHEME B (commented out): "Slate & Sage"
   Warm grey + soft sage green + terracotta accent.
   Clean, contemporary, lifestyle blog feel.
   To use: comment out Scheme A :root, uncomment Scheme B :root.

   ============================================================ */

/* ---- SCHEME A: Midnight Ink (active) ---------------------- */
:root {
  --c-bg:         #FAFAF8;   /* warm near-white page bg        */
  --c-bg-card:    #FFFFFF;   /* card / input bg                */
  --c-bg-dark:    #0F1D2E;   /* dark panel / footer            */
  --c-border:     #E4E1DA;   /* dividers, input borders        */
  --c-text:       #3D3D3A;   /* body copy                      */
  --c-text-light: #7A7A75;   /* captions, meta                 */
  --c-heading:    #0F1D2E;   /* headings                       */
  --c-accent:     #1B4B8A;   /* primary — navy blue            */
  --c-accent-h:   #153A6B;   /* hover state                    */
  --c-accent-lt:  #EBF1FA;   /* pale tint for badges           */
  --c-gold:       #B07D2A;   /* nib gold accent                */
  --c-gold-lt:    #FBF4E8;   /* gold tint                      */
  --c-success:    #2E7D52;
  --c-error:      #C0392B;
}

/* ---- SCHEME B: Slate & Sage (swap to activate) ------------
:root {
  --c-bg:         #F8F7F4;
  --c-bg-card:    #FFFFFF;
  --c-bg-dark:    #2C2C2A;
  --c-border:     #E0DDD6;
  --c-text:       #3C3C38;
  --c-text-light: #7C7C76;
  --c-heading:    #2C2C2A;
  --c-accent:     #4A7B6B;
  --c-accent-h:   #38604F;
  --c-accent-lt:  #EAF3EF;
  --c-gold:       #C0622A;
  --c-gold-lt:    #FBF0EA;
  --c-success:    #2E7D52;
  --c-error:      #C0392B;
}
------------------------------------------------------------ */

/* ---- Shared tokens --------------------------------------- */
:root {
  --font-head: 'Fraunces', Georgia, serif;
  --font-body: 'Plus Jakarta Sans', system-ui, sans-serif;

  --r:          6px;
  --r-lg:       12px;
  --t:          0.22s ease;
  --sh-sm:      0 1px 3px rgba(0,0,0,.06), 0 1px 8px rgba(0,0,0,.04);
  --sh:         0 4px 16px rgba(0,0,0,.09);
  --sh-lg:      0 8px 32px rgba(0,0,0,.13);
  --hdr:        68px;
  --wrap:       1120px;
}

/* ============================================================
   RESET
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  color: var(--c-text);
  background: var(--c-bg);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}
ul  { list-style: none; }
img { max-width: 100%; display: block; }
a   { color: var(--c-accent); text-decoration: none; transition: color var(--t); }
a:hover { color: var(--c-accent-h); }
p   { margin-bottom: .9rem; }
p:last-child { margin-bottom: 0; }

/* ---- Headings -------------------------------------------- */
h1, h2, h3, h4, h5 {
  font-family: var(--font-head);
  color: var(--c-heading);
  line-height: 1.18;
  letter-spacing: -.025em;
  font-weight: 500;
}
h1 { font-size: clamp(1.9rem, 4.5vw, 3.2rem); }
h2 { font-size: clamp(1.5rem, 3.5vw, 2.4rem); }
h3 { font-size: clamp(1.1rem, 2vw,   1.45rem); }
h4 {
  font-family: var(--font-body);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-text-light);
}

/* ---- Utility --------------------------------------------- */
.wrap {
  width: min(var(--wrap), 94vw);
  margin: 0 auto;
}

/* ============================================================
   HEADER
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 500;
  height: var(--hdr);
  background: var(--c-bg-card);
  border-bottom: 1px solid var(--c-border);
  box-shadow: var(--sh-sm);
}
.hdr-inner {
  width: min(var(--wrap), 94vw);
  margin: 0 auto;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

/* Logo */
.logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
}
.logo-img {
  height: 44px;
  width: auto;
  display: block;
  transition: opacity var(--t);
}
.logo:hover .logo-img { opacity: .82; }

/* Desktop nav */
.site-nav ul {
  display: flex;
  gap: 2.5rem;
  align-items: center;
}
.site-nav a {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--c-text);
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
  transition: color var(--t), border-color var(--t);
}
.site-nav a:hover,
.site-nav a.active {
  color: var(--c-accent);
  border-bottom-color: var(--c-accent);
}

/* ============================================================
   BURGER BUTTON  — always in DOM, shown via media query only
   ============================================================ */
.burger {
  /* Hidden on desktop */
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 42px;
  height: 42px;
  background: none;
  border: 1.5px solid var(--c-border);
  border-radius: var(--r);
  cursor: pointer;
  gap: 5px;
  padding: 0;
  flex-shrink: 0;
  transition: border-color var(--t);
}
.burger:hover { border-color: var(--c-accent); }
.burger span {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--c-heading);
  border-radius: 2px;
  transition: transform .28s ease, opacity .28s ease;
  pointer-events: none;
}
/* X animation when open */
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Backdrop */
.nav-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 498;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.nav-backdrop.open { display: block; }
body.nav-open { overflow: hidden; }

/* ============================================================
   HERO SLIDER
   ============================================================ */
.hero {
  position: relative;
  height: clamp(260px, 42vh, 500px);
  overflow: hidden;
  background: var(--c-bg-dark);
}
.hero-slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  opacity: 0;
  transition: opacity .8s ease;
  pointer-events: none;
}
.hero-slide.is-active { opacity: 1; pointer-events: auto; }

.s1 {
  background-image: linear-gradient(to right, rgba(10,15,25,.72) 0%, rgba(10,15,25,.45) 60%, rgba(10,15,25,.2) 100%),
                    url('../img/slider/slide1.jpg');
  background-size: cover;
  background-position: center;
}
.s2 {
  background-image: linear-gradient(to right, rgba(10,15,25,.72) 0%, rgba(10,15,25,.45) 60%, rgba(10,15,25,.2) 100%),
                    url('../img/slider/slide2.jpg');
  background-size: cover;
  background-position: center;
}
.s3 {
  background-image: linear-gradient(to right, rgba(10,15,25,.72) 0%, rgba(10,15,25,.45) 60%, rgba(10,15,25,.2) 100%),
                    url('../img/slider/slide3.jpg');
  background-size: cover;
  background-position: center;
}

.hero-inner {
  width: min(var(--wrap), 94vw);
  margin: 0 auto;
  padding: 2rem 0;
}
.hero-inner small {
  display: block;
  font-family: var(--font-body);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.45);
  margin-bottom: .7rem;
}
.hero-inner h2 {
  color: #fff;
  font-weight: 300;
  font-size: clamp(1.7rem, 4vw, 3rem);
  letter-spacing: -.03em;
  max-width: 540px;
  margin-bottom: .9rem;
}
.hero-inner p {
  color: rgba(255,255,255,.68);
  font-size: .95rem;
  max-width: 420px;
  line-height: 1.8;
  margin: 0;
}

/* Dots */
.hero-dots {
  position: absolute;
  bottom: 1.25rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: .5rem;
  z-index: 10;
}
.hero-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.45);
  background: transparent;
  cursor: pointer;
  padding: 0;
  transition: background var(--t), border-color var(--t);
}
.hero-dot.is-active {
  background: #fff;
  border-color: #fff;
}

/* Arrows */
.hero-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.2);
  color: #fff;
  font-size: .95rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--t);
  z-index: 10;
}
.hero-arrow:hover { background: rgba(255,255,255,.28); }
.ha-prev { left: 1.25rem; }
.ha-next { right: 1.25rem; }

/* ============================================================
   MAIN CONTENT
   ============================================================ */
#main-content {
  min-height: 55vh;
  padding: 3.5rem 0 5rem;
}

/* ============================================================
   PAGE HEADER BLOCK  (pen-shows, contact)
   ============================================================ */
.page-hdr {
  padding-bottom: 2rem;
  margin-bottom: 2.5rem;
  border-bottom: 1px solid var(--c-border);
}
.page-hdr .eyebrow {
  display: block;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--c-accent);
  margin-bottom: .35rem;
}
.page-hdr p {
  color: var(--c-text-light);
  font-size: .95rem;
  max-width: 580px;
  margin: .5rem 0 0;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-block;
  padding: .65rem 1.5rem;
  background: var(--c-accent);
  color: #fff;
  border: 2px solid var(--c-accent);
  border-radius: var(--r);
  font-family: var(--font-body);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .04em;
  cursor: pointer;
  transition: background var(--t), border-color var(--t), color var(--t);
  white-space: nowrap;
  text-align: center;
  line-height: 1.4;
}
.btn:hover { background: var(--c-accent-h); border-color: var(--c-accent-h); color: #fff; }
.btn-ghost {
  background: transparent;
  color: var(--c-accent);
}
.btn-ghost:hover { background: var(--c-accent); color: #fff; }
.btn-white {
  background: #fff;
  color: var(--c-bg-dark);
  border-color: #fff;
}
.btn-white:hover { background: #f0f0f0; border-color: #f0f0f0; color: var(--c-bg-dark); }

/* ============================================================
   HOME PAGE
   ============================================================ */
.home-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 3rem;
  align-items: start;
}

/* Under construction badge */
.uc-badge {
  display: inline-block;
  background: var(--c-gold-lt);
  color: var(--c-gold);
  border: 1px solid var(--c-gold);
  border-radius: 2rem;
  padding: .28rem 1rem;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: 1.25rem;
}
/* Under construction banner — used on directory and other WIP pages */
.uc-banner {
  display: flex;
  align-items: flex-start;
  gap: .85rem;
  background: var(--c-gold-lt);
  border: 1.5px solid var(--c-gold);
  border-radius: var(--r);
  padding: 1rem 1.25rem;
  margin-bottom: 2rem;
  font-size: .88rem;
  color: #6B4B10;
  line-height: 1.6;
}
.uc-banner i { color: var(--c-gold); font-size: 1.1rem; margin-top: .15rem; flex-shrink: 0; }
.uc-banner a { color: #6B4B10; font-weight: 700; text-decoration: underline; }
.home-main h1 { margin-bottom: 1rem; font-weight: 300; }
.home-intro {
  font-size: 1rem;
  color: var(--c-text-light);
  max-width: 540px;
  line-height: 1.85;
  margin-bottom: 2.5rem;
}

/* Feature grid */
.feat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 2.5rem;
}
.feat-card {
  background: var(--c-bg-card);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: 1.5rem;
  transition: box-shadow var(--t), transform var(--t);
}
.feat-card-link {
  display: block;
  text-decoration: none;
  color: inherit;
}
.feat-card-link:hover { box-shadow: var(--sh); transform: translateY(-2px); }
.feat-card:hover      { box-shadow: var(--sh); transform: translateY(-2px); }
.feat-icon { font-size: 1.4rem; margin-bottom: .6rem; color: var(--c-accent); }
.feat-card h3 { font-size: 1rem; margin-bottom: .35rem; color: var(--c-heading); }
.feat-card p  { font-size: .85rem; color: var(--c-text-light); margin: 0; }

/* Progress section */
.progress-block {
  background: var(--c-bg-dark);
  color: rgba(255,255,255,.8);
  border-radius: var(--r-lg);
  padding: 2rem 1.75rem;
  margin-bottom: 2rem;
}
.progress-block h3 { color: #fff; font-size: 1.05rem; margin-bottom: 1rem; }
.progress-list li {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .55rem 0;
  font-size: .88rem;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.progress-list li:last-child { border: none; }
.dot-status {
  width: 9px; height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}
.ds-done    { background: #48BB78; }
.ds-wip     { background: var(--c-gold); animation: blink 1.4s infinite; }
.ds-planned { background: rgba(255,255,255,.25); }
@keyframes blink { 0%,100%{opacity:1}50%{opacity:.3} }

/* Notify form */
.notify-wrap { margin-top: 1.5rem; }
.notify-wrap p { font-size: .9rem; color: var(--c-text-light); margin-bottom: .75rem; }
.notify-form {
  display: flex;
  gap: .6rem;
}
.notify-form input[type="email"] {
  flex: 1;
  padding: .65rem .9rem;
  border: 1.5px solid var(--c-border);
  border-radius: var(--r);
  font-family: var(--font-body);
  font-size: .88rem;
  background: var(--c-bg-card);
  color: var(--c-heading);
  outline: none;
  min-width: 0;
  transition: border-color var(--t), box-shadow var(--t);
}
.notify-form input[type="email"]:focus {
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px rgba(27,75,138,.12);
}
.notify-ok { color: var(--c-accent); font-weight: 600; font-size: .9rem; }

/* ============================================================
   PEN SHOWS PAGE
   ============================================================ */
.info-note {
  background: var(--c-accent-lt);
  border-left: 3px solid var(--c-accent);
  padding: .8rem 1.15rem;
  font-size: .85rem;
  color: var(--c-accent-h);
  border-radius: 0 var(--r) var(--r) 0;
  margin-bottom: 2.5rem;
}

.yr-head {
  font-family: var(--font-head);
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: -.02em;
  color: var(--c-heading);
  padding-bottom: .5rem;
  margin: 2.5rem 0 1.25rem;
  border-bottom: 2px solid var(--c-accent);
}
.yr-head:first-of-type { margin-top: 0; }

.ev-grid { display: grid; gap: .9rem; }

.ev-card {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  gap: 1.25rem;
  align-items: start;
  background: var(--c-bg-card);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: 1.25rem;
  transition: box-shadow var(--t), border-color var(--t);
}
.ev-card:hover { box-shadow: var(--sh); border-color: var(--c-accent); }
.ev-card.is-past { opacity: .5; }

.ev-date {
  background: var(--c-accent);
  color: #fff;
  border-radius: var(--r);
  text-align: center;
  padding: .65rem .4rem;
}
.ev-date .d { display: block; font-family: var(--font-head); font-size: 1.85rem; line-height: 1; font-weight: 500; letter-spacing: -.03em; }
.ev-date .m { display: block; font-size: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; margin-top: .2rem; opacity: .8; }
.ev-date .y { display: block; font-size: .6rem; opacity: .55; }
.ev-card.is-past .ev-date { background: var(--c-text-light); }

.ev-info h3  { font-size: 1.05rem; margin-bottom: .3rem; }
.ev-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem 1rem;
  font-size: .8rem;
  color: var(--c-text-light);
  margin: .35rem 0 .6rem;
}
.ev-tag {
  display: inline-block;
  background: var(--c-accent-lt);
  color: var(--c-accent-h);
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: .18rem .65rem;
  border-radius: 2rem;
}
.ev-tag.past { background: var(--c-border); color: var(--c-text-light); }

.ev-actions { display: flex; flex-direction: column; gap: .45rem; align-items: flex-end; }
.ev-actions .btn { font-size: .72rem; padding: .4rem .85rem; }

/* ============================================================
   CONTACT PAGE
   ============================================================ */
.contact-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 3rem;
  align-items: start;
}
.contact-col { min-width: 0; }

/* Alerts */
.alert {
  display: flex;
  align-items: flex-start;
  gap: .9rem;
  padding: 1.1rem 1.3rem;
  border-radius: var(--r);
  margin-bottom: 1.75rem;
  font-size: .9rem;
}
.alert-icon { font-size: 1.2rem; line-height: 1.3; flex-shrink: 0; }
.alert-ok  { background: #EDF7EE; border: 1px solid #8BC48B; color: #1F5C2A; }
.alert-err { background: #FDF0EE; border: 1px solid #E8A39A; color: #7A1F17; }
.alert strong { display: block; margin-bottom: .15rem; }

/* Form */
.cf {
  display: flex;
  flex-direction: column;
  gap: 1.35rem;
}
.cf-field {
  display: flex;
  flex-direction: column;
  gap: .35rem;
}
.cf-field label {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--c-text);
}
.req { color: var(--c-accent); }

.cf-field input[type="text"],
.cf-field input[type="email"],
.cf-field input[type="url"],
.cf-field input[type="tel"],
.cf-field textarea,
.cf-field select {
  width: 100%;
  padding: .75rem .95rem;
  border: 1.5px solid var(--c-border);
  border-radius: var(--r);
  font-family: var(--font-body);
  font-size: .92rem;
  color: var(--c-heading);
  background: var(--c-bg-card);
  outline: none;
  transition: border-color var(--t), box-shadow var(--t);
  -webkit-appearance: none;
  appearance: none;
}
.cf-field input:focus,
.cf-field textarea:focus,
.cf-field select:focus {
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px rgba(27,75,138,.11);
}
.cf-field.is-err input,
.cf-field.is-err textarea,
.cf-field.is-err .sel-wrap {
  border-color: var(--c-error);
}
.cf-err { font-size: .78rem; font-weight: 600; color: var(--c-error); }

.cf-field textarea {
  resize: vertical;
  min-height: 150px;
  line-height: 1.7;
}

/* Custom select wrapper */
.sel-wrap {
  position: relative;
  border: 1.5px solid var(--c-border);
  border-radius: var(--r);
  background: var(--c-bg-card);
  transition: border-color var(--t), box-shadow var(--t);
}
.sel-wrap:focus-within {
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px rgba(27,75,138,.11);
}
.sel-wrap select {
  border: none;
  background: transparent;
  padding-right: 2.5rem;
  cursor: pointer;
}
.sel-arrow {
  position: absolute;
  right: .85rem;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--c-text-light);
  font-size: .85rem;
}

.char-count { font-size: .73rem; color: var(--c-text-light); text-align: right; }
.char-count.ok { color: var(--c-success); }

.cf-note { font-size: .78rem; color: var(--c-text-light); line-height: 1.6; }

/* Honeypot — guaranteed invisible */
.hp { display: none !important; }

/* Sidebar cards */
.sc-cards {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  position: sticky;
  top: calc(var(--hdr) + 1.5rem);
}
.sc {
  background: var(--c-bg-card);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: 1.35rem;
}
.sc h3 { font-size: .98rem; margin-bottom: .5rem; }
.sc p  { font-size: .85rem; color: var(--c-text-light); line-height: 1.7; }
.sc-dark { background: var(--c-bg-dark); border-color: var(--c-bg-dark); }
.sc-dark h3 { color: #fff; }
.sc-dark p  { color: rgba(255,255,255,.65); }
.sc-list {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  font-size: .85rem;
  color: var(--c-text);
}
.sc-list li { display: flex; gap: .5rem; align-items: baseline; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  background: var(--c-bg-dark);
  color: rgba(255,255,255,.6);
}
.ftr-inner {
  width: min(var(--wrap), 94vw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.5fr;
  gap: 3rem;
  padding: 4rem 0 3rem;
}
.ftr-brand-name { font-family: var(--font-head); font-size: 1.05rem; color: #fff; display: block; margin-bottom: .4rem; font-weight: 500; }
.ftr-brand p    { font-size: .83rem; line-height: 1.7; }
.ftr-nav h4,
.ftr-links h4,
.ftr-contact h4 { color: rgba(255,255,255,.35); margin-bottom: .9rem; }
.ftr-nav ul li,
.ftr-links ul li { margin-bottom: .45rem; }
.ftr-nav a,
.ftr-links a { color: rgba(255,255,255,.55); font-size: .85rem; transition: color var(--t); }
.ftr-nav a:hover,
.ftr-links a:hover { color: #fff; }
.ftr-contact p  { font-size: .85rem; }
.ftr-contact a  { color: var(--c-gold); }
.ftr-contact a:hover { color: #fff; }
.ftr-note { font-size: .73rem; color: rgba(255,255,255,.28); margin-top: .6rem; line-height: 1.65; }
.ftr-note a { color: rgba(255,255,255,.35); }
.ftr-bar {
  border-top: 1px solid rgba(255,255,255,.07);
  text-align: center;
  padding: 1.1rem;
  font-size: .76rem;
  color: rgba(255,255,255,.25);
}

/* ============================================================
   VIDEOS PAGE
   ============================================================ */

/* Category filter bar */
.vid-filters {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 2rem;
}
.vid-filter-btn {
  display: inline-block;
  padding: .4rem 1rem;
  border: 1.5px solid var(--c-border);
  border-radius: 2rem;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .05em;
  color: var(--c-text);
  background: var(--c-bg-card);
  transition: border-color var(--t), background var(--t), color var(--t);
  white-space: nowrap;
}
.vid-filter-btn:hover {
  border-color: var(--c-accent);
  color: var(--c-accent);
}
.vid-filter-btn.is-active {
  background: var(--c-accent);
  border-color: var(--c-accent);
  color: #fff;
}
.vid-count {
  display: inline-block;
  background: rgba(0,0,0,.12);
  border-radius: 2rem;
  padding: 0 .45rem;
  font-size: .68rem;
  margin-left: .25rem;
  font-weight: 600;
}
.vid-filter-btn.is-active .vid-count { background: rgba(255,255,255,.25); }

/* Video grid */
.vid-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
  margin-bottom: 2.5rem;
}

/* Video card — entire card is a link */
.vid-card {
  display: flex;
  flex-direction: column;
  background: var(--c-bg-card);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  overflow: hidden;
  color: var(--c-text);
  transition: box-shadow var(--t), border-color var(--t), transform var(--t);
  text-decoration: none;
}
.vid-card:hover {
  box-shadow: var(--sh-lg);
  border-color: var(--c-accent);
  transform: translateY(-3px);
  color: var(--c-text);
}

/* Thumbnail */
.vid-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #0F1D2E;
  flex-shrink: 0;
}
.vid-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--t);
}
.vid-card:hover .vid-thumb img { transform: scale(1.03); }

/* Play button overlay */
.vid-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.2rem;
  color: #fff;
  background: rgba(0,0,0,.3);
  opacity: 0;
  transition: opacity var(--t);
}
.vid-card:hover .vid-play { opacity: 1; }

/* Card info */
.vid-info {
  padding: 1.1rem 1.25rem 1.25rem;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: .35rem;
}
.vid-cat {
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-accent);
}
.vid-info h3 {
  font-size: 1rem;
  margin: 0;
  line-height: 1.3;
  color: var(--c-heading);
}
.vid-info p {
  font-size: .82rem;
  color: var(--c-text-light);
  line-height: 1.6;
  margin: .1rem 0 0;
  flex: 1;
}
.vid-link {
  display: block;
  margin-top: .75rem;
  font-size: .75rem;
  font-weight: 700;
  color: var(--c-accent);
  letter-spacing: .03em;
}
.vid-card:hover .vid-link { color: var(--c-accent-h); }

/* Empty state */
.vid-empty {
  padding: 3rem 2rem;
  text-align: center;
  background: var(--c-bg-card);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  color: var(--c-text-light);
}
.vid-empty code {
  background: var(--c-bg);
  padding: .1rem .4rem;
  border-radius: 3px;
  font-size: .88rem;
  color: var(--c-accent);
}

/* Footer note */
.vid-footer-note {
  border-top: 1px solid var(--c-border);
  padding-top: 1.5rem;
  font-size: .85rem;
  color: var(--c-text-light);
}

/* ============================================================
   NIB & INK DIRECTORY
   ============================================================ */

/* Search bar */
.dir-search-bar {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
  align-items: center;
  margin-bottom: 1.25rem;
  padding: 1.25rem;
  background: var(--c-bg-card);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
}
.dir-search-input-wrap {
  position: relative;
  flex: 1;
  min-width: 220px;
}
.dir-search-icon {
  position: absolute;
  left: .85rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: .9rem;
  color: var(--c-text-light);
  pointer-events: none;
}
.dir-search-bar input[type="search"] {
  width: 100%;
  padding: .7rem .9rem .7rem 2.4rem;
  border: 1.5px solid var(--c-border);
  border-radius: var(--r);
  font-family: var(--font-body);
  font-size: .92rem;
  color: var(--c-heading);
  background: var(--c-bg);
  outline: none;
  transition: border-color var(--t), box-shadow var(--t);
  -webkit-appearance: none;
  appearance: none;
}
.dir-search-bar input[type="search"]:focus {
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px rgba(27,75,138,.11);
}
.dir-search-bar select {
  padding: .7rem 2.2rem .7rem .9rem;
  border: 1.5px solid var(--c-border);
  border-radius: var(--r);
  font-family: var(--font-body);
  font-size: .88rem;
  color: var(--c-heading);
  background: var(--c-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%237A7A75'/%3E%3C/svg%3E") no-repeat right .8rem center;
  outline: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color var(--t);
}
.dir-search-bar select:focus { border-color: var(--c-accent); }

/* Results summary */
.dir-summary {
  font-size: .85rem;
  color: var(--c-text-light);
  margin-bottom: 1.25rem;
}

/* Store grid */
.dir-grid {
  display: grid;
  gap: 1rem;
  margin-bottom: 2rem;
}

/* Store card */
.dir-card {
  background: var(--c-bg-card);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: 1.4rem;
  transition: box-shadow var(--t), border-color var(--t);
}
.dir-card:hover {
  box-shadow: var(--sh);
  border-color: var(--c-accent);
}

.dir-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: .6rem;
  flex-wrap: wrap;
}
/* Category label above store name */
.dir-cat-label {
  display: block;
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-text-light);
  margin-bottom: .2rem;
}

/* Artisan card left accent */
.dir-card--artisan { border-left: 3px solid var(--c-gold); }
.dir-card--artisan .dir-cat-label { color: var(--c-gold); }

/* Badges column */
.dir-badges { display: flex; flex-direction: column; align-items: flex-end; gap: .35rem; flex-shrink: 0; }
.badge-open   { background: #EAF3EF; color: #2E7D52; }
.badge-closed { background: #FDF0EE; color: #C0392B; }

/* Artisan detail rows on card */
.dir-artisan-row { display: flex; gap: .75rem; font-size: .83rem; color: var(--c-text); margin-bottom: .3rem; align-items: baseline; }
.dir-artisan-label { font-weight: 700; color: var(--c-text-light); font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; min-width: 90px; flex-shrink: 0; }

/* Artisan fields block in form */
.dir-artisan-fields { border-top: 1px solid var(--c-border); padding-top: 1rem; display: flex; flex-direction: column; gap: 1.25rem; }

/* Radio groups */
.dir-radio-group { display: flex; gap: 1rem; flex-wrap: wrap; }
.dir-radio {
  display: flex;
  align-items: center;
  gap: .45rem;
  font-size: .9rem;
  cursor: pointer;
  padding: .6rem 1rem;
  border: 1.5px solid var(--c-border);
  border-radius: var(--r);
  background: var(--c-bg-card);
  transition: border-color var(--t), background var(--t);
}
.dir-radio:hover { border-color: var(--c-accent); }
.dir-radio input[type="radio"] { accent-color: var(--c-accent); width: 16px; height: 16px; flex-shrink: 0; }
.dir-radio:has(input:checked) { border-color: var(--c-accent); background: var(--c-accent-lt); }

/* Page info line */
.dir-page-info { text-align: center; font-size: .8rem; color: var(--c-text-light); margin-top: .5rem; }

.dir-name {
  font-size: 1.1rem;
  margin: 0 0 .15rem;
  line-height: 1.25;
}
.dir-location {
  font-size: .82rem;
  color: var(--c-text-light);
  margin: 0;
}

/* Type badges */
.dir-badge {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .05em;
  padding: .28rem .75rem;
  border-radius: 2rem;
  white-space: nowrap;
  flex-shrink: 0;
}
.badge-store    { background: #EBF1FA; color: var(--c-accent-h); }
.badge-artisan  { background: var(--c-gold-lt); color: var(--c-gold); }
.badge-physical { background: #EAF3EF; color: #2E7D52; }
.badge-web      { background: var(--c-accent-lt); color: var(--c-accent-h); }
.badge-both     { background: #F0EBF8; color: #6B3FA0; }
.badge-open     { background: #EAF3EF; color: #2E7D52; }
.badge-closed   { background: #FDF0EE; color: #C0392B; }

/* Instagram action button */
.dir-btn-instagram {
  background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888) !important;
  color: #fff !important;
  border-color: transparent !important;
}
.dir-btn-instagram:hover { opacity: .88; }

/* Description */
.dir-desc {
  font-size: .88rem;
  color: var(--c-text);
  line-height: 1.65;
  margin: 0 0 .75rem;
}

/* Specialisms */
.dir-specialisms {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin-bottom: .85rem;
}
.dir-spec-tag {
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: 2rem;
  padding: .15rem .65rem;
  font-size: .7rem;
  font-weight: 600;
  color: var(--c-text);
  letter-spacing: .03em;
}

/* Meta row */
.dir-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem 1.25rem;
  font-size: .8rem;
  color: var(--c-text-light);
  margin-bottom: .9rem;
}
.dir-meta-item {
  display: flex;
  align-items: baseline;
  gap: .3rem;
}

/* Actions row */
.dir-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
}
.dir-actions .btn { font-size: .75rem; padding: .4rem .9rem; }
.dir-email-btn {
  cursor: pointer;
  font-size: .75rem;
  padding: .4rem .9rem;
  display: inline-block;
}
.dir-email-link {
  font-size: .82rem;
  color: var(--c-accent);
  font-weight: 500;
}

/* Empty state */
.dir-empty {
  padding: 3rem 2rem;
  text-align: center;
  background: var(--c-bg-card);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  color: var(--c-text-light);
  font-size: .95rem;
}

/* Pagination */
.dir-pagination {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  justify-content: center;
  margin: 1.5rem 0 2.5rem;
}
.dir-page-btn {
  display: inline-block;
  padding: .45rem .9rem;
  border: 1.5px solid var(--c-border);
  border-radius: var(--r);
  font-size: .8rem;
  font-weight: 600;
  color: var(--c-text);
  background: var(--c-bg-card);
  transition: border-color var(--t), background var(--t), color var(--t);
}
.dir-page-btn:hover { border-color: var(--c-accent); color: var(--c-accent); }
.dir-page-btn.is-active {
  background: var(--c-accent);
  border-color: var(--c-accent);
  color: #fff;
}

/* Submit section */
.dir-submit-section {
  margin-top: 3.5rem;
  padding-top: 3rem;
  border-top: 1px solid var(--c-border);
}
.dir-submit-inner {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 3rem;
  align-items: start;
}
.dir-submit-intro h2 { font-size: 1.5rem; margin-bottom: .6rem; }
.dir-submit-intro p  { font-size: .9rem; color: var(--c-text-light); line-height: 1.7; }
.dir-submit-notes {
  list-style: none;
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: .4rem;
  font-size: .85rem;
  color: var(--c-text-light);
}
.dir-submit-notes li::before { content: none; }

.dir-submit-form-wrap { min-width: 0; }
.dir-submit-form { display: flex; flex-direction: column; gap: 1.25rem; }

.dir-submit-section-label {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-accent);
  margin-bottom: -.25rem;
  padding-top: .5rem;
}

/* Two-column form rows */
.dir-submit-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.dir-submit-row--3 { grid-template-columns: 1fr 1fr 1fr; }

.cf-hint {
  font-size: .72rem;
  font-weight: 400;
  color: var(--c-text-light);
  margin-left: .25rem;
  text-transform: none;
  letter-spacing: 0;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* ---- Medium: 960px --------------------------------------- */
@media (max-width: 960px) {
  .ftr-inner { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .home-layout { grid-template-columns: 1fr; }
  .vid-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
  .contact-layout { grid-template-columns: 1fr; }
  .sc-cards { position: static; flex-direction: row; flex-wrap: wrap; }
  .sc { flex: 1 1 200px; }
  .dir-submit-inner { grid-template-columns: 1fr; gap: 1.5rem; }
  .dir-submit-row--3 { grid-template-columns: 1fr 1fr; }
}

/* ---- Mobile: 768px  — burger activates ------------------ */
@media (max-width: 768px) {

  /* Show burger */
  .burger { display: flex; }

  /* Nav panel slides in from right */
  .site-nav {
    position: fixed;
    top: 0;
    right: -110%;
    width: min(280px, 82vw);
    height: 100%;
    background: var(--c-bg-card);
    border-left: 1px solid var(--c-border);
    z-index: 499;
    overflow-y: auto;
    padding: calc(var(--hdr) + 1.5rem) 1.75rem 2rem;
    transition: right .32s cubic-bezier(.4,0,.2,1);
    box-shadow: -6px 0 28px rgba(0,0,0,.14);
  }
  .site-nav.is-open { right: 0; }

  .site-nav ul { flex-direction: column; gap: 0; }
  .site-nav li { border-bottom: 1px solid var(--c-border); }
  .site-nav a {
    display: block;
    padding: .9rem 0;
    font-size: .9rem;
    text-transform: none;
    letter-spacing: .02em;
    border-bottom: none;
  }
  .site-nav a.active,
  .site-nav a:hover { color: var(--c-accent); padding-left: .4rem; }

  /* Hero */
  .hero-arrow { display: none; }

  /* Video grid */
  .vid-grid { grid-template-columns: 1fr; }
  .vid-filters { gap: .4rem; }

  /* Event cards */
  .ev-card { grid-template-columns: 72px 1fr; }
  .ev-actions { flex-direction: row; grid-column: 1 / -1; flex-wrap: wrap; }

  /* Footer */
  .ftr-inner { grid-template-columns: 1fr; padding: 2.5rem 0; gap: 1.5rem; }

  /* Forms */
  .notify-form { flex-direction: column; }
  .feat-grid { grid-template-columns: 1fr; }
}

/* ---- Small: 480px ---------------------------------------- */
@media (max-width: 480px) {
  #main-content { padding: 2rem 0 3rem; }
  .ev-card { grid-template-columns: 1fr; }
  .ev-date { display: flex; align-items: center; gap: .6rem; padding: .5rem .75rem; }
  .ev-date .d { font-size: 1.4rem; }
  .ftr-inner { grid-template-columns: 1fr; }
  .sc-cards { flex-direction: column; }
  .vid-grid { grid-template-columns: 1fr; gap: 1rem; }
  .dir-search-bar { flex-direction: column; align-items: stretch; }
  .dir-search-bar select { width: 100%; }
  .dir-submit-row,
  .dir-submit-row--3 { grid-template-columns: 1fr; }
  .dir-card-head { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   BLOG — listing, single post, home sidebar card
   ============================================================ */

/* ---- Tag cloud (blog.php) -------------------------------- */
.blog-tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin-bottom: 2rem;
}
.blog-tag {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .35rem .9rem;
  border: 1.5px solid var(--c-border);
  border-radius: 2rem;
  font-size: .75rem;
  font-weight: 600;
  color: var(--c-text);
  background: var(--c-bg-card);
  text-decoration: none;
  transition: border-color var(--t), background var(--t), color var(--t);
}
.blog-tag:hover { border-color: var(--c-accent); color: var(--c-accent); }
.blog-tag.is-active { background: var(--c-accent); border-color: var(--c-accent); color: #fff; }
.blog-tag-count {
  background: rgba(0,0,0,.1);
  border-radius: 2rem;
  padding: 0 .4rem;
  font-size: .68rem;
  font-weight: 700;
}
.blog-tag.is-active .blog-tag-count { background: rgba(255,255,255,.25); }

/* ---- Tag pill (used in cards, post header, sidebar) ------ */
.blog-pill {
  display: inline-block;
  background: var(--c-accent-lt);
  color: var(--c-accent-h);
  border-radius: 2rem;
  padding: .18rem .65rem;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background var(--t), color var(--t);
}
.blog-pill:hover,
.blog-pill.is-active { background: var(--c-accent); color: #fff; }

/* ---- Blog listing grid ----------------------------------- */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.75rem;
  margin-bottom: 2.5rem;
}

.blog-card {
  background: var(--c-bg-card);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--t), transform var(--t);
}
.blog-card:hover { box-shadow: var(--sh-lg); transform: translateY(-3px); }

.blog-card-img-wrap {
  display: block;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: var(--c-bg-dark);
  flex-shrink: 0;
}
.blog-card-img-wrap img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--t);
}
.blog-card:hover .blog-card-img-wrap img { transform: scale(1.04); }

.blog-card-body {
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: .5rem;
}
.blog-card-tags { display: flex; flex-wrap: wrap; gap: .3rem; }
.blog-card-title { font-size: 1.08rem; margin: 0; line-height: 1.3; }
.blog-card-title a { color: var(--c-heading); text-decoration: none; }
.blog-card-title a:hover { color: var(--c-accent); }
.blog-card-excerpt { font-size: .86rem; color: var(--c-text-light); line-height: 1.65; margin: 0; flex: 1; }
.blog-card-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: .78rem;
  color: var(--c-text-light);
  margin-top: .25rem;
  padding-top: .75rem;
  border-top: 1px solid var(--c-border);
}
.blog-read-more {
  font-size: .78rem;
  font-weight: 700;
  color: var(--c-accent);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: .3rem;
}
.blog-read-more:hover { color: var(--c-accent-h); }

/* ---- Single post layout ---------------------------------- */
.post-layout {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 3rem;
  align-items: start;
}

/* Post article */
.post-article { min-width: 0; }

.post-featured-img {
  margin-bottom: 2rem;
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: 16/9;
  background: var(--c-bg-dark);
}
.post-featured-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

.post-header { margin-bottom: 2rem; }
.post-tags   { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .75rem; }
.post-title  { font-size: clamp(1.6rem, 3.5vw, 2.4rem); margin-bottom: .5rem; line-height: 1.2; }
.post-meta   { font-size: .82rem; color: var(--c-text-light); display: flex; gap: 1rem; flex-wrap: wrap; }

/* Post content body */
.post-content {
  font-size: 1rem;
  line-height: 1.85;
  color: var(--c-text);
}
.post-content p   { margin-bottom: 1.2rem; }
.post-content h2  { font-size: 1.4rem; margin: 2rem 0 .75rem; color: var(--c-heading); }
.post-content h3  { font-size: 1.15rem; margin: 1.5rem 0 .6rem; color: var(--c-heading); }
.post-content ul,
.post-content ol  { margin: .75rem 0 1.2rem 1.5rem; }
.post-content li  { margin-bottom: .4rem; }
.post-content strong { font-weight: 700; color: var(--c-heading); }
.post-content em  { font-style: italic; }
.post-content a   { color: var(--c-accent); text-decoration: underline; }
.post-content blockquote {
  border-left: 3px solid var(--c-accent);
  padding: .75rem 1.25rem;
  margin: 1.25rem 0;
  background: var(--c-accent-lt);
  border-radius: 0 var(--r) var(--r) 0;
  font-style: italic;
  color: var(--c-accent-h);
}

/* Gallery */
.post-gallery { margin: 2.5rem 0; }
.post-gallery-title { font-size: 1rem; margin-bottom: 1rem; color: var(--c-heading); }
.post-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
}
.post-gallery-item { margin: 0; }
.post-gallery-item img {
  width: 100%; aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: var(--r);
  display: block;
  transition: transform var(--t);
}
.post-gallery-item:hover img { transform: scale(1.02); }
.post-gallery-item figcaption {
  font-size: .75rem;
  color: var(--c-text-light);
  margin-top: .4rem;
  line-height: 1.4;
}

/* Post footer */
.post-footer {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
  padding: 1.25rem 0;
  margin-top: 2rem;
  border-top: 1px solid var(--c-border);
}
.post-footer-label { font-size: .78rem; font-weight: 700; color: var(--c-text-light); }

/* Prev/next nav */
.post-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin: 2rem 0 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--c-border);
}
.post-nav-link {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  padding: 1rem;
  background: var(--c-bg-card);
  border: 1px solid var(--c-border);
  border-radius: var(--r);
  text-decoration: none;
  transition: border-color var(--t), box-shadow var(--t);
}
.post-nav-link:hover { border-color: var(--c-accent); box-shadow: var(--sh); }
.post-nav-next { text-align: right; }
.post-nav-dir  { font-size: .72rem; font-weight: 700; text-transform: uppercase;
                 letter-spacing: .07em; color: var(--c-accent); }
.post-nav-title { font-size: .88rem; color: var(--c-heading); font-weight: 600; line-height: 1.35; }

/* Post sidebar */
.post-sidebar {
  position: sticky;
  top: calc(var(--hdr) + 1.5rem);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  min-width: 0;
}
.post-sidebar-card {
  background: var(--c-bg-card);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: 1.25rem;
}
.post-sidebar-card h4 {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-text-light);
  margin-bottom: .9rem;
  display: flex;
  align-items: center;
  gap: .4rem;
}
.post-recent-list { list-style: none; display: flex; flex-direction: column; gap: 0; }
.post-recent-list li {
  padding: .55rem 0;
  border-bottom: 1px solid var(--c-border);
  display: flex;
  flex-direction: column;
  gap: .15rem;
}
.post-recent-list li:last-child { border: none; }
.post-recent-list li.is-current a { color: var(--c-accent); font-weight: 700; }
.post-recent-list a { font-size: .85rem; color: var(--c-heading); text-decoration: none; font-weight: 600; line-height: 1.3; }
.post-recent-list a:hover { color: var(--c-accent); }
.post-recent-list span { font-size: .72rem; color: var(--c-text-light); }
.post-sidebar-tags { display: flex; flex-wrap: wrap; gap: .35rem; }

/* ---- Home sidebar — latest post card --------------------- */
.home-latest-post { padding: 1.25rem; }
.home-latest-img-wrap {
  display: block;
  aspect-ratio: 16/9;
  overflow: hidden;
  border-radius: var(--r);
  margin-bottom: .75rem;
  background: var(--c-bg-dark);
}
.home-latest-img-wrap img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--t);
}
.home-latest-img-wrap:hover img { transform: scale(1.04); }
.home-latest-title { font-size: .98rem; margin-bottom: .3rem; line-height: 1.3; }
.home-latest-title a { color: var(--c-heading); text-decoration: none; }
.home-latest-title a:hover { color: var(--c-accent); }
.home-latest-date { font-size: .75rem; color: var(--c-text-light); margin-bottom: .4rem; }
.home-latest-excerpt { font-size: .82rem; color: var(--c-text-light); line-height: 1.6; }

/* ---- Responsive ------------------------------------------ */
@media (max-width: 900px) {
  .post-layout { grid-template-columns: 1fr; }
  .post-sidebar { position: static; }
  .blog-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
}
@media (max-width: 600px) {
  .blog-grid { grid-template-columns: 1fr; }
  .post-nav  { grid-template-columns: 1fr; }
  .post-gallery-grid { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   INLINE POST IMAGES  (inserted via image inserter in editor)
   ============================================================ */
.post-img {
  margin: 1.25rem 0;
  max-width: 100%;
}
.post-img img {
  width: 100%;
  height: auto;
  border-radius: var(--r);
  display: block;
}
.post-img figcaption {
  font-size: .78rem;
  color: var(--c-text-light);
  margin-top: .4rem;
  line-height: 1.5;
  font-style: italic;
}

/* Float left — text wraps on the right */
.post-img--left {
  float: left;
  width: 42%;
  margin: .25rem 1.75rem 1rem 0;
}

/* Float right — text wraps on the left */
.post-img--right {
  float: right;
  width: 42%;
  margin: .25rem 0 1rem 1.75rem;
}

/* Full width — breaks out of text flow */
.post-img--full {
  float: none;
  width: 100%;
  clear: both;
  margin: 1.75rem 0;
}

/* Centred — fixed width, centred */
.post-img--centre {
  float: none;
  width: 65%;
  margin: 1.5rem auto;
  clear: both;
  display: block;
}

/* Clearfix so content after floated images clears properly */
.post-content::after {
  content: '';
  display: table;
  clear: both;
}

/* Responsive — stack all images full width on small screens */
@media (max-width: 640px) {
  .post-img--left,
  .post-img--right,
  .post-img--centre {
    float: none;
    width: 100%;
    margin: 1.25rem 0;
  }
}

/* ============================================================
   ABOUT PAGE
   ============================================================ */

.about-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 3.5rem;
  align-items: start;
}

/* Sidebar */
.about-sidebar {
  position: sticky;
  top: calc(var(--hdr) + 1.5rem);
}

.about-photo-wrap {
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-bottom: 1.25rem;
  box-shadow: var(--sh-lg);
}
.about-photo {
  width: 100%;
  height: auto;
  display: block;
}

.about-facts {
  background: var(--c-bg-card);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: 1.1rem 1.25rem;
}
.about-facts-title {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-text-light);
  margin-bottom: .85rem;
}
.about-facts-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: .7rem;
}
.about-facts-list li {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  font-size: .85rem;
  color: var(--c-text);
  line-height: 1.4;
}
.about-facts-list i {
  color: var(--c-accent);
  width: 16px;
  flex-shrink: 0;
  margin-top: .1rem;
}
.about-facts-list a {
  color: var(--c-accent);
  text-decoration: none;
  font-weight: 600;
}
.about-facts-list a:hover { text-decoration: underline; }

/* Content */
.about-content { min-width: 0; }

.about-intro {
  font-size: 1.2rem;
  color: var(--c-heading);
  margin-bottom: 1.25rem;
  line-height: 1.6;
}
.about-content p {
  font-size: 1rem;
  line-height: 1.9;
  color: var(--c-text);
  margin-bottom: 1.25rem;
}
.about-content strong { color: var(--c-heading); }

.about-cta {
  display: flex;
  gap: .85rem;
  flex-wrap: wrap;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--c-border);
}

/* ── Home sidebar author card ── */
.home-author-card { padding: 1rem; }
.home-author-inner {
  display: flex;
  gap: .9rem;
  align-items: center;
}
.home-author-avatar {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  border: 2.5px solid var(--c-gold);
  flex-shrink: 0;
}
.home-author-text { min-width: 0; }
.home-author-name {
  display: block;
  font-size: .95rem;
  font-weight: 700;
  color: var(--c-heading);
  margin-bottom: .2rem;
}
.home-author-tagline {
  font-size: .78rem;
  color: var(--c-text-light);
  line-height: 1.5;
  margin-bottom: .4rem;
}
.home-author-link {
  font-size: .75rem;
  font-weight: 700;
  color: var(--c-accent);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
}
.home-author-link:hover { color: var(--c-accent-h); }

/* ── Responsive ── */
@media (max-width: 860px) {
  .about-layout {
    grid-template-columns: 1fr;
  }
  .about-sidebar {
    position: static;
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 1.25rem;
    align-items: start;
  }
  .about-photo-wrap { margin-bottom: 0; }
}
@media (max-width: 520px) {
  .about-sidebar { grid-template-columns: 1fr; }
}

/* ============================================================
   DIRECTORY — v1.2 updates
   ============================================================ */

/* ── Intro blurb ── */
.dir-intro {
  background: var(--c-bg-card);
  border: 1px solid var(--c-border);
  border-left: 3px solid var(--c-accent);
  border-radius: var(--r);
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
  font-size: .92rem;
  line-height: 1.7;
  color: var(--c-text);
}
.dir-intro a { color: var(--c-accent); font-weight: 700; }

/* ── A–Z alpha bar ── */
.dir-alpha-bar {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem;
  margin-bottom: 1.25rem;
}
.dir-alpha-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  padding: 0 .5rem;
  border: 1.5px solid var(--c-border);
  border-radius: 5px;
  font-size: .78rem;
  font-weight: 700;
  color: var(--c-text);
  background: var(--c-bg-card);
  text-decoration: none;
  transition: all var(--t);
}
.dir-alpha-btn:hover:not(.is-empty) { border-color: var(--c-accent); color: var(--c-accent); }
.dir-alpha-btn.is-active { background: var(--c-accent); border-color: var(--c-accent); color: #fff; }
.dir-alpha-btn.is-empty  { opacity: .3; cursor: default; pointer-events: none; }

/* ── 2-column card grid ── */
.dir-grid-2col {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
  margin-bottom: 2rem;
}

/* ── Card name row with flag ── */
.dir-card-name-row {
  display: flex;
  align-items: center;
  gap: .45rem;
  flex-wrap: nowrap;
}
.dir-flag {
  font-size: 1.2rem;
  line-height: 1;
  flex-shrink: 0;
}

/* ── Opening hours (display on card) ── */
.dir-hours {
  margin: .6rem 0;
  font-size: .82rem;
}
.dir-hours summary {
  cursor: pointer;
  color: var(--c-accent);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: .4rem;
  list-style: none;
  padding: .3rem 0;
}
.dir-hours summary::-webkit-details-marker { display: none; }
.dir-hours-list {
  list-style: none;
  margin-top: .5rem;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .2rem .75rem;
  padding: .6rem .75rem;
  background: var(--c-bg);
  border-radius: var(--r);
  border: 1px solid var(--c-border);
}
.dir-hours-list li { display: contents; }
.dir-hours-day  { font-weight: 600; color: var(--c-text); white-space: nowrap; font-size: .78rem; }
.dir-hours-val  { color: var(--c-text-light); font-size: .78rem; }
.dir-hours-val.is-closed { color: var(--c-gold); font-style: italic; }

/* ── Opening hours form ── */
.dir-hours-form {
  border: 1.5px solid var(--c-border);
  border-radius: var(--r);
  padding: .75rem 1rem;
  margin: 1.25rem 0;
}
.dir-hours-form summary {
  cursor: pointer;
  font-weight: 700;
  font-size: .85rem;
  color: var(--c-heading);
  display: flex;
  align-items: center;
  gap: .5rem;
  list-style: none;
}
.dir-hours-form summary::-webkit-details-marker { display: none; }
.dir-hours-grid {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  margin-top: 1rem;
}
.dir-hours-row {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
}
.dir-hours-label {
  width: 110px;
  font-size: .82rem;
  font-weight: 600;
  color: var(--c-text);
  flex-shrink: 0;
}
.dir-hours-time {
  width: 100px;
  padding: .35rem .5rem;
  border: 1.5px solid var(--c-border);
  border-radius: 5px;
  font-size: .82rem;
  font-family: inherit;
}
.dir-hours-sep { color: var(--c-text-light); font-size: .85rem; }
.dir-hours-closed {
  display: flex;
  align-items: center;
  gap: .3rem;
  font-size: .78rem;
  color: var(--c-text-light);
  cursor: pointer;
  margin-left: .25rem;
}
.dir-hours-closed input { width: auto; margin: 0; }

/* ── Responsive ── */
@media (max-width: 900px) {
  .dir-grid-2col { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .dir-alpha-btn { min-width: 28px; height: 28px; font-size: .72rem; }
  .dir-hours-label { width: 80px; }
  .dir-hours-time { width: 80px; }
}