/* ==========================================================================
   Orbics — shared stylesheet
   Loaded on every page BEFORE that page's own <style> block, which now
   only holds CSS specific to that page. Base resets, the nav, the
   hamburger/mobile menu, the footer, and shared animations all live here
   once instead of being repeated inline on every page.
   ========================================================================== */


* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; background-color: var(--bg-parchment); }

::selection { background: var(--accent); color: var(--btn-text); }

html { scroll-behavior: smooth; }

button, .pill-option, .chip, .intensity-dot, .ring, a {
  -webkit-tap-highlight-color: transparent;
}

.site-nav {
  position: relative;
  z-index: 500;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  background: transparent;
}

.brand-logo-img {
  display: block;
  width: auto;
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.nav-logo-img { height: 28px; max-height: 28px; max-width: 100%; }

.brand-tag-logo { height: 20px; max-height: 20px; max-width: 100%; }

.site-nav-links {
  display: none;
  align-items: center;
  gap: 30px;
}

.site-nav-link {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-decoration: none;
  cursor: pointer;
  position: relative;
  padding: 4px 0;
}

.site-nav-link::after {
  content: "";
  position: absolute;
  left: 0; right: 100%;
  bottom: -2px;
  height: 1px;
  background: var(--accent);
  transition: right 0.25s ease;
}

.site-nav-link:hover { color: var(--text-primary); }

.site-nav-link:hover::after { right: 0; }

.hamburger {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 3px;
  background: none;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  z-index: 600;
  transition: background 0.2s ease;
}

.hamburger span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--brand-color);
  border-radius: 2px;
  transition: transform 0.28s cubic-bezier(.65,0,.35,1), opacity 0.2s ease;
}

.hamburger:hover, .hamburger:focus-visible { background: rgba(75, 46, 43, 0.08); }

.hamburger:focus-visible { outline: 1px solid var(--brand-color); outline-offset: 2px; }

.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }

.hamburger.open span:nth-child(2) { opacity: 0; }

.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-menu {
  position: fixed;
  top: var(--nav-h);
  left: 0; right: 0;
  z-index: 490;
  background: var(--footer-bg);
  border-bottom: 1px solid rgba(255, 248, 240, 0.1);
  box-shadow: 0 16px 32px rgba(20, 14, 11, 0.28);
  display: flex;
  flex-direction: column;
  padding: 8px 24px 26px;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.32s cubic-bezier(.4,0,.2,1), opacity 0.22s ease;
}

.mobile-menu.open { max-height: 420px; opacity: 1; }

.mobile-menu a:hover, .mobile-menu a:active { color: var(--footer-text); }

@media (min-width: 900px) {
  .site-nav-links { display: flex; }
  .hamburger, .mobile-menu { display: none; }
  .site-nav { padding: 0 40px; }
}

@media (min-width: 1280px) {
  .site-nav { padding: 0 64px; }
}

#custom-cursor { display: none; }

body {
  min-height: 100vh;
  width: 100%;
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
}

.footer-marquee:hover .marquee-track { animation-play-state: paused; }

.marquee-track .marquee-dot { color: var(--accent); font-weight: 400; }

@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.site-footer {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 44px 20px 30px;
  background: var(--footer-bg);
  border-top: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
}

.footer-top {
  width: 100%;
  max-width: 1080px;
  display: flex;
  flex-direction: column;
  gap: 36px;
  padding-bottom: 36px;
}

.footer-brand-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.footer-tagline {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--footer-text-muted);
  max-width: 260px;
  text-align: left;
  margin: 0;
}

.footer-cols {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px 20px;
  width: 100%;
}

.footer-col-title {
  position: relative;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--footer-text);
  margin: 0 0 16px 0;
  padding-bottom: 10px;
}

.footer-col-title::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 18px;
  height: 2px;
  background: var(--accent);
  border-radius: 1px;
}

.footer-nav {
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.footer-nav a {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--footer-text-muted);
  text-decoration: none;
  cursor: pointer;
  transition: color 0.2s ease, padding-left 0.2s ease;
}

.footer-nav a:hover { color: var(--footer-text); padding-left: 3px; }

.footer-mid {
  width: 100%;
  max-width: 1080px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 28px 0;
  border-top: 1px solid rgba(255, 248, 240, 0.1);
}

.footer-blurb {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--footer-text-muted);
  max-width: 380px;
  margin: 0;
  text-align: left;
}

.footer-swatch {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.footer-swatch-strip {
  display: flex;
  width: 160px;
  height: 8px;
  border-radius: 4px;
  overflow: hidden;
}

.footer-swatch-strip span { flex: 1; }

.footer-swatch-strip span:nth-child(1) { background: var(--accent); }

.footer-swatch-strip span:nth-child(2) { background: var(--accent-2); }

.footer-swatch-strip span:nth-child(3) { background: var(--footer-text); }

.footer-swatch-caption {
  font-family: 'EB Garamond', Georgia, serif;
  font-style: italic;
  font-size: 12.5px;
  color: var(--footer-text-muted);
}

.footer-bottom {
  width: 100%;
  max-width: 1080px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 0 30px;
  border-top: 1px solid rgba(255, 248, 240, 0.12);
}

.footer-copy, .footer-credit {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  color: var(--footer-text-muted);
  letter-spacing: 0.02em;
}

.footer-back-top {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--footer-text-muted);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 0;
  transition: color 0.2s ease;
}

.footer-back-top:hover { color: var(--footer-text); }

@media (min-width: 640px) {
  .footer-top { flex-direction: row; justify-content: space-between; }
  .footer-cols { grid-template-columns: repeat(4, 1fr); flex: 1; max-width: 620px; margin-left: 40px; }
  .footer-mid { flex-direction: row; align-items: flex-end; justify-content: space-between; }
}

#skeleton-overlay.sk-hidden { opacity: 0; transform: scale(1.01); pointer-events: none; }

#skeleton-overlay::after {
  content: "";
  position: absolute;
  top: -10%; left: -60%;
  width: 35%; height: 120%;
  background: linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.55) 48%, rgba(255,255,255,0) 100%);
  transform: skewX(-14deg);
  animation: sk-glare 2.6s ease-in-out infinite;
  pointer-events: none;
  mix-blend-mode: overlay;
  z-index: 2;
}

@keyframes sk-glare {
  0%   { left: -60%; }
  55%  { left: 130%; }
  100% { left: 130%; }
}

.sk-block:nth-child(2) { animation-delay: 0.06s; }

.sk-block:nth-child(3) { animation-delay: 0.12s; }

.sk-block:nth-child(4) { animation-delay: 0.18s; }

@keyframes sk-shimmer {
  0% { background-position: 220% 0; }
  100% { background-position: -60% 0; }
}


:root {
  --bg-parchment: #FFF8F0;
  --text-primary: #2B211C;
  --text-muted: #6B5D48;
  --border-color: #D8C2A0;
  --border-focus: #4B2E2B;
  --btn-bg: #4B2E2B;
  --btn-text: #FFF8F0;
  --brand-color: #4B2E2B;
  --accent: #C08552;
  --accent-2: #8C5A3C;
  --error: #B5442E;
  --footer-bg: #4B2E2B;
  --footer-text: #FFF8F0;
  --footer-text-muted: #C4AE97;
  --skeleton-base: #EEE1D0;
  --skeleton-shine: #FBF3E7;
  --card-radius: 20px;
  --nav-h: 64px;
}

.footer-social a, .footer-nav a, .site-nav-link {
  transition: transform 0.15s cubic-bezier(.4,0,.2,1), background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease, color 0.2s ease;
  will-change: transform;
}

.site-nav-brand {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  text-decoration: none;
}

.site-nav-link.active { color: var(--text-primary); font-weight: 600; }

.site-nav-link.active::after { right: 0; }

.site-nav-link:focus-visible, .site-nav-brand:focus-visible {
  outline: 1px solid var(--brand-color);
  outline-offset: 3px;
}

.mobile-menu a {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--footer-text-muted);
  text-decoration: none;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255, 248, 240, 0.08);
  cursor: pointer;
}

.about-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--brand-color);
  margin-bottom: 20px;
  opacity: 0;
  animation: about-fade-up 0.6s 0.1s ease forwards;
}

.about-eyebrow::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 2px;
  background: var(--accent);
  border-radius: 1px;
}

.about-title {
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 6vw;
  font-size: clamp(36px, 6vw, 56px);
  line-height: 1.15;
  font-weight: 200;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  margin: 0 auto 16px;
  max-width: 700px;
  opacity: 0;
  animation: about-fade-up 0.7s 0.2s ease forwards;
}

.about-title em {
  font-style: italic;
  font-weight: 500;
  color: var(--brand-color);
}

.about-subtitle {
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-muted);
  max-width: 520px;
  margin: 0 auto;
  opacity: 0;
  animation: about-fade-up 0.7s 0.35s ease forwards;
}

@keyframes about-fade-up {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

.footer-marquee {
  width: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--footer-bg);
  border-top: 1px solid rgba(255, 248, 240, 0.14);
  padding: 14px 0;
}

.marquee-track {
  display: flex;
  align-items: center;
  width: max-content;
  
  animation: marquee-scroll 26s linear infinite;
}

.marquee-track span { margin-right: 32px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--footer-text-muted);
  white-space: nowrap;
}

.footer-logo {
  font-family: 'EB Garamond', serif;
  font-size: 17px;
  letter-spacing: 0.32em;
  font-weight: 500;
  text-transform: uppercase;
  color: var(--footer-text);
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}

.footer-wordmark {
  width: 100%;
  overflow: hidden;
  font-family: 'EB Garamond', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: 16vw;
  font-size: clamp(56px, 16vw, 200px);
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--footer-text);
  opacity: 0.14;
  text-align: center;
  margin: 12px 0 0;
  padding-bottom: 0.08em;
  user-select: none;
  white-space: nowrap;
}

#skeleton-overlay {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 999;
  background: var(--bg-parchment);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  width: 100%;
  padding: 40px 20px;
  box-sizing: border-box;
  overflow: hidden;
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.sk-block {
  position: relative;
  overflow: hidden;
  border-radius: 6px;
  background: linear-gradient(100deg, var(--skeleton-base) 25%, var(--skeleton-shine) 50%, var(--skeleton-base) 75%);
  background-size: 260% 100%;
  animation: sk-shimmer 1.6s ease-in-out infinite;
}

@media (min-width: 900px) and (hover: hover) and (pointer: fine) {
  body.has-fine-pointer, body.has-fine-pointer a, body.has-fine-pointer button,
  body.has-fine-pointer .pill-option, body.has-fine-pointer .chip,
  body.has-fine-pointer .intensity-dot, body.has-fine-pointer input,
  body.has-fine-pointer textarea { cursor: none; }
  #custom-cursor { display: block; position: fixed; left: 0; top: 0; width: 0; height: 0; z-index: 2000; pointer-events: none; transform: translate3d(-100px, -100px, 0); mix-blend-mode: difference; }
  .cursor-ring { position: absolute; top: 0; left: 0; width: 34px; height: 34px; transform: translate(-50%, -50%); border-radius: 50%; background: conic-gradient(#FFFFFF calc(var(--cursor-progress, 0) * 360deg), rgba(255, 255, 255, 0.35) 0deg); -webkit-mask: radial-gradient(circle, transparent 12px, #000 13px); mask: radial-gradient(circle, transparent 12px, #000 13px); transition: transform 0.18s cubic-bezier(.4,0,.2,1); }
  .cursor-dot { position: absolute; top: 0; left: 0; width: 6px; height: 6px; background: #FFF; border-radius: 50%; transform: translate(-50%, -50%); transition: transform 0.18s cubic-bezier(.4,0,.2,1); }
  #custom-cursor.cursor-hover .cursor-ring { transform: translate(-50%, -50%) scale(1.35); }
  #custom-cursor.cursor-hover .cursor-dot { transform: scale(1.6); }
}

/* ==========================================================================
   Orbics — shared UI-chrome refinements (nav / hamburger / footer)
   Loaded on every page AFTER the page's own <style> block. Every rule here
   uses a "-v2" or otherwise new class name — nothing here overrides or
   depends on the page's existing CSS, so it can't break anything already
   working. Uses ONLY the site's existing custom-property palette.
   ========================================================================== */

/* ---------------------------------------------------------------------- */
/* Login CTA — outlined brown by default, fills brown on hover/tap.        */
/* Shared by the desktop nav pill (.site-nav-cta-link on inner pages,      */
/* .site-nav-cta on the home page) and the mobile-menu footer CTA.         */
/* ---------------------------------------------------------------------- */
.site-nav-cta-link,
.site-nav-cta,
.mobile-menu-v2-cta {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand-color);
  background: transparent;
  border: 1.5px solid var(--brand-color);
  border-radius: 0;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
}
.site-nav-cta-link:hover, .site-nav-cta-link:active,
.site-nav-cta:hover, .site-nav-cta:active,
.mobile-menu-v2-cta:hover, .mobile-menu-v2-cta:active {
  background: var(--brand-color);
  color: var(--btn-text);
}

.site-nav-cta-link, .site-nav-cta {
  font-size: 12.5px;
  padding: 9px 20px;
  display: inline-flex;
  align-items: center;
}
.site-nav-cta-link:hover, .site-nav-cta:hover { transform: translateY(-1px); }
.site-nav-cta-link:active, .site-nav-cta:active { transform: translateY(0) scale(0.97); }

/* The floating nav CTA has no place on mobile — the slide-in menu already
   carries its own Login button in its footer. Left unhidden, this pill sat
   in the top bar next to the hamburger and visually overlapped the open
   mobile menu panel. */
@media (max-width: 899px) {
  .site-nav-cta-link, .site-nav-cta { display: none; }
}

/* Fix: the hamburger button's own bars still morphed into an "X" on open
   (leftover from the old top-down accordion), and that button sits in the
   same top-right corner as the new slide-in panel's own X close button —
   so the two rendered on top of each other as a doubled/blurred X. The
   panel already has a dedicated close control, so the hamburger now fades
   out once the panel is open instead of turning into a second X. */
@media (max-width: 899px) {
  .hamburger {
    transition: background 0.2s ease, opacity 0.2s ease;
  }
  .hamburger.open {
    opacity: 0;
    pointer-events: none;
  }
}

/* ---------------------------------------------------------------------- */
/* Redesigned mobile menu — slide-in panel + dimmed backdrop, replaces    */
/* the old top-down accordion. Same hamburger button triggers it.         */
/* Light (site background) theme with brown text, structured into the     */
/* same section groups as the footer, and every page of the site listed.  */
/* ---------------------------------------------------------------------- */
/* Fix: the top nav bar (with the logo) is z-index 500 on every page, but
   this panel was 490 and its backdrop 480 — both BELOW the nav. So the
   logo/nav bar kept rendering on top of the open slide-in panel instead
   of being covered by it. Pushed both above the nav's 500 so the panel
   now sits over the whole page, logo included, while it's open. */
.mobile-menu-backdrop {
  position: fixed; inset: 0; z-index: 540;
  background: rgba(20, 14, 11, 0.38);
  opacity: 0; pointer-events: none;
  transition: opacity 0.25s ease;
}
.mobile-menu-backdrop.open { opacity: 1; pointer-events: auto; }

.mobile-menu-v2 {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(84vw, 360px);
  z-index: 550;
  background: var(--bg-parchment);
  box-shadow: -16px 0 40px rgba(20, 14, 11, 0.28);
  display: flex;
  flex-direction: column;
  padding: 18px 0 26px;
  transform: translateX(100%);
  transition: transform 0.32s cubic-bezier(.4,0,.2,1);
  overflow-y: auto;
}
.mobile-menu-v2.open { transform: translateX(0); }

.mobile-menu-v2-head {
  display: flex; align-items: center; justify-content: flex-end;
  padding: 0 20px 14px;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 4px;
}
.mobile-menu-v2-close {
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(75, 46, 43, 0.07);
  border: none; color: var(--brand-color);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background 0.2s ease;
  flex-shrink: 0;
}
.mobile-menu-v2-close:hover { background: rgba(75, 46, 43, 0.14); }
.mobile-menu-v2-close svg { width: 16px; height: 16px; }

.mobile-menu-v2-links {
  display: flex; flex-direction: column; padding: 2px 20px 0; flex: 1;
}
.mobile-menu-v2-group { display: flex; flex-direction: column; }
.mobile-menu-v2-group-title {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-2);
  padding: 16px 0 6px;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.mobile-menu-v2.open .mobile-menu-v2-group-title { opacity: 1; }
.mobile-menu-v2-links a {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13.5px;
  font-weight: 400;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-primary);
  text-decoration: none;
  padding: 12px 0;
  border-bottom: 1px solid var(--border-color);
  opacity: 0;
  transform: translateX(10px);
  transition: opacity 0.3s ease, transform 0.3s ease, color 0.2s ease;
}
.mobile-menu-v2.open .mobile-menu-v2-links a { opacity: 1; transform: translateX(0); }
.mobile-menu-v2-group:nth-of-type(1) a, .mobile-menu-v2-group:nth-of-type(1) .mobile-menu-v2-group-title { transition-delay: 0.04s; }
.mobile-menu-v2-group:nth-of-type(2) a, .mobile-menu-v2-group:nth-of-type(2) .mobile-menu-v2-group-title { transition-delay: 0.10s; }
.mobile-menu-v2-group:nth-of-type(3) a, .mobile-menu-v2-group:nth-of-type(3) .mobile-menu-v2-group-title { transition-delay: 0.16s; }
.mobile-menu-v2-links a:hover, .mobile-menu-v2-links a:active { color: var(--accent-2); }

.mobile-menu-v2-foot { padding: 18px 20px 0; }
.mobile-menu-v2-cta {
  display: flex; align-items: center; justify-content: center;
  width: 100%;
  font-size: 13px;
  padding: 15px 16px;
  text-align: center;
}

body.menu-lock { overflow: hidden; }

@media (min-width: 900px) {
  .mobile-menu-v2, .mobile-menu-backdrop { display: none; }
}

/* ---------------------------------------------------------------------- */
/* Footer — logo mark image (pairs with the existing text wordmark)        */
/* ---------------------------------------------------------------------- */
.footer-logo-mark {
  display: flex; align-items: center; gap: 10px;
}
.footer-logo-mark img { height: 26px; max-height: 26px; width: auto; max-width: 100%; display: block; }

/* Fix: the footer's dark brand-brown background made the brown logo mark
   invisible on the home page footer (every other page already lightens
   the mark with this filter so it reads on the dark background). */
.footer-logo-img {
  height: 24px;
  max-height: 24px;
  width: auto;
  max-width: 100%;
  filter: brightness(0) invert(97%) sepia(3%) saturate(1476%) hue-rotate(323deg) brightness(108%) contrast(105%);
}

/* ---------------------------------------------------------------------- */
/* Footer — social icon buttons, replacing plain text links                */
/* ---------------------------------------------------------------------- */
.footer-social-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.social-icon-link {
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 248, 240, 0.08);
  border: 1px solid rgba(255, 248, 240, 0.14);
  color: var(--footer-text-muted);
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}
.social-icon-link:hover {
  background: var(--accent-2);
  border-color: var(--accent-2);
  color: var(--footer-text);
  transform: translateY(-2px);
}
.social-icon-link svg { width: 16px; height: 16px; fill: currentColor; }

/* ---------------------------------------------------------------------- */
/* Desktop scrollbar — themed to match the brand palette instead of the   */
/* browser default. Firefox uses scrollbar-color; WebKit/Blink browsers   */
/* use the ::-webkit-scrollbar pseudo-elements.                           */
/* ---------------------------------------------------------------------- */
html {
  scrollbar-width: thin;
  scrollbar-color: var(--accent-2) var(--bg-parchment);
}
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--bg-parchment); }
::-webkit-scrollbar-thumb {
  background-color: var(--accent-2);
  border-radius: 999px;
  border: 3px solid var(--bg-parchment);
}
::-webkit-scrollbar-thumb:hover { background-color: var(--brand-color); }
::-webkit-scrollbar-corner { background: var(--bg-parchment); }

/* ---------------------------------------------------------------------- */
/* Flexbox gap fallback for older browsers (Android 9, iOS 12, etc.)       */
/* ---------------------------------------------------------------------- */
/* Gap fallback: older browsers ignore 'gap' in flexbox.
   These margin rules provide equivalent spacing. Modern browsers
   that support flex gap will use gap and these margins add a tiny
   extra but it's visually negligible since gap already handles it.
   We scope with negative margins on the parent to cancel the
   outer edges so the layout stays flush. */
.site-nav-links > a { margin: 0 15px; }
.site-nav-links > a:first-child { margin-left: 0; }
.site-nav-links > a:last-child { margin-right: 0; }
.hamburger span + span { margin-top: 3px; }
.footer-cols > .footer-col { margin-bottom: 20px; }
.footer-nav > a + a { margin-top: 6px; }
.footer-swatch-strip > span + span { margin-left: 4px; }
.mobile-menu > a + a { margin-top: 4px; }

/* If the browser supports gap in flex, undo the margin hacks */
@supports (gap: 1px) {
  .site-nav-links > a { margin: 0; }
  .hamburger span + span { margin-top: 0; }
  .footer-cols > .footer-col { margin-bottom: 0; }
  .footer-nav > a + a { margin-top: 0; }
  .footer-swatch-strip > span + span { margin-left: 0; }
  .mobile-menu > a + a { margin-top: 0; }
}

/* ==========================================================================
   Global responsive safety net — prevents any element (oversized image,
   long unbroken string, decorative graphic) from ever causing horizontal
   overflow / cut-off content on any screen size.
   ========================================================================== */
html, body {
  overflow-x: hidden;
  max-width: 100%;
}
img, svg, video {
  max-width: 100%;
  height: auto;
}

/* ==========================================================================
   Auth popup (login / signup) + My Account page
   Self-contained (own input/button classes) so it works identically on
   every page that includes partials/auth_modal.php, regardless of what
   that page's own inline <style> block does or doesn't define.
   ========================================================================== */

.authmodal-backdrop {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(43, 33, 28, 0.55);
  opacity: 0; pointer-events: none;
  transition: opacity 0.18s ease;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.authmodal-backdrop.open { opacity: 1; pointer-events: auto; }

.authmodal-card {
  background: var(--bg-parchment);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  max-width: 380px; width: 100%;
  padding: 28px 26px 26px;
  position: relative;
  transform: translateY(10px) scale(0.98);
  transition: transform 0.18s ease;
  box-shadow: 0 20px 60px rgba(43, 33, 28, 0.25);
  font-family: 'EB Garamond', serif;
}
.authmodal-backdrop.open .authmodal-card { transform: translateY(0) scale(1); }

.authmodal-close {
  position: absolute; top: 14px; right: 14px;
  width: 30px; height: 30px; border-radius: 50%;
  border: none; background: transparent; color: var(--text-muted);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.authmodal-close:hover { background: rgba(75,46,43,0.08); color: var(--text-primary); }
.authmodal-close svg { width: 16px; height: 16px; }

.authmodal-heading { font-size: 24px; font-weight: 500; color: var(--text-primary); margin: 0 0 4px; }
.authmodal-heading em { font-style: italic; color: var(--accent-2); }
.authmodal-sub { font-size: 14px; color: var(--text-muted); margin: 0 0 20px; line-height: 1.5; }

.authmodal-input {
  width: 100%; box-sizing: border-box;
  padding: 12px 14px; margin-bottom: 10px;
  border: 1.5px solid var(--border-color); border-radius: 0px;
  background: #fff; color: var(--text-primary);
  font-family: 'EB Garamond', serif; font-size: 15px;
}
.authmodal-input:focus { outline: none; border-color: var(--border-focus); box-shadow: 0 0 0 3px rgba(75, 46, 43, 0.08); }

.authmodal-error {
  color: var(--error); font-size: 13.5px; margin: 0 0 10px; display: none;
}
.authmodal-error.show { display: block; }

.authmodal-submit {
  width: 100%; padding: 13px; border: none; border-radius: 0px;
  background: var(--btn-bg); color: var(--btn-text);
  font-family: 'EB Garamond', serif; font-size: 15px; font-weight: 600;
  letter-spacing: 0.02em; cursor: pointer; margin-top: 4px;
}
.authmodal-submit:hover { opacity: 0.9; }
.authmodal-submit:disabled { opacity: 0.6; cursor: default; }

.authmodal-switch {
  text-align: center; margin-top: 16px; font-size: 13.5px;
  color: var(--text-muted); background: none; border: none; cursor: pointer;
  width: 100%; font-family: 'EB Garamond', serif;
}
.authmodal-switch:hover { color: var(--accent-2); }

.authmodal-guest {
  width: 100%; padding: 11px; margin-top: 10px;
  border: 1.5px solid var(--border-color); border-radius: 0px;
  background: transparent; color: var(--text-primary);
  font-family: 'EB Garamond', serif; font-size: 14px; cursor: pointer;
}
.authmodal-guest:hover { background: var(--bg-parchment); border-color: var(--accent-2); }

/* ---- My Account page ---- */
.acct-page { max-width: 760px; margin: 0 auto; padding: 48px 20px 80px; font-family: 'EB Garamond', serif; }
.acct-eyebrow { font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent-2); margin-bottom: 6px; }
.acct-title { font-size: 34px; font-weight: 500; color: var(--text-primary); margin: 0 0 32px; }
.acct-title em { font-style: italic; color: var(--accent-2); }

.acct-card {
  border: 1px solid var(--border-color); border-radius: 12px;
  padding: 22px 24px; margin-bottom: 18px; background: rgba(255,255,255,0.4);
}
.acct-card h2 { font-size: 19px; font-weight: 600; color: var(--text-primary); margin: 0 0 12px; }
.acct-card p.acct-note { color: var(--text-muted); font-size: 14.5px; margin: 0 0 14px; line-height: 1.5; }

.acct-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--border-color); gap: 16px; }
.acct-row:last-child { border-bottom: none; }
.acct-row-label { color: var(--text-muted); font-size: 13.5px; }
.acct-row-value { color: var(--text-primary); font-size: 15px; text-align: right; }

.acct-list-item { padding: 12px 0; border-bottom: 1px solid var(--border-color); }
.acct-list-item:last-child { border-bottom: none; }
.acct-list-item-top { display: flex; justify-content: space-between; gap: 12px; font-size: 14.5px; color: var(--text-primary); }
.acct-list-item-meta { color: var(--text-muted); font-size: 13px; margin-top: 3px; }
.acct-list-item-msg { color: var(--text-muted); font-size: 13.5px; margin-top: 6px; line-height: 1.5; }

.acct-badge {
  display: inline-block; padding: 3px 11px; border-radius: 999px;
  font-size: 12px; letter-spacing: 0.03em; text-transform: capitalize;
  background: rgba(192, 133, 82, 0.18); color: var(--accent-2); white-space: nowrap;
}
.acct-badge.status-accepted, .acct-badge.status-approved { background: rgba(96, 138, 92, 0.18); color: #4C7048; }
.acct-badge.status-rejected, .acct-badge.status-declined { background: rgba(181, 68, 46, 0.15); color: var(--error); }

.acct-empty { color: var(--text-muted); font-size: 14px; font-style: italic; }

.acct-btn {
  padding: 10px 20px; border-radius: 9px; border: 1.5px solid var(--brand-color);
  background: var(--brand-color); color: var(--btn-text);
  font-family: 'EB Garamond', serif; font-size: 14.5px; cursor: pointer;
}
.acct-btn:hover { opacity: 0.9; }
.acct-btn:disabled { opacity: 0.55; cursor: default; }
.acct-btn.outline { background: transparent; color: var(--brand-color); }
.acct-btn.outline:hover { background: rgba(75,46,43,0.06); }

.acct-inline-form { display: flex; gap: 10px; margin-top: 4px; flex-wrap: wrap; }
.acct-inline-form .authmodal-input { margin-bottom: 0; flex: 1; min-width: 160px; }
.acct-msg { font-size: 13.5px; margin-top: 8px; display: none; }
.acct-msg.show { display: block; }
.acct-msg.ok { color: #4C7048; }
.acct-msg.err { color: var(--error); }

.acct-logout { background: none; border: none; color: var(--text-muted); font-size: 13.5px; cursor: pointer; text-decoration: underline; padding: 0; }
.acct-logout:hover { color: var(--error); }

/* ==========================================================================
   Nav avatar (round icon, sits right before the hamburger button at all
   breakpoints — unlike .site-nav-cta-link, this is never display:none on
   mobile, since it's the whole point of the "next to hamburger" request).
   ========================================================================== */
.nav-avatar-link {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  overflow: hidden; flex-shrink: 0;
  border: 1.5px solid var(--border-color);
  background: var(--bg-parchment);
  text-decoration: none;
  transition: border-color 0.2s ease, transform 0.15s ease;
}
.nav-avatar-link:hover { border-color: var(--brand-color); transform: translateY(-1px); }
.nav-avatar-link:active { transform: translateY(0) scale(0.96); }
.nav-avatar-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nav-avatar-fallback {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  background: var(--brand-color); color: var(--btn-text);
  font-family: 'EB Garamond', serif; font-size: 14px; font-weight: 600;
}

/* ==========================================================================
   Account page v2 — profile header with avatar upload + detailed info card
   ========================================================================== */
.acct-profile-head {
  display: flex; align-items: center; gap: 20px;
  margin-bottom: 32px; flex-wrap: wrap;
}
.acct-avatar-wrap { position: relative; width: 88px; height: 88px; flex-shrink: 0; }
.acct-avatar-circle {
  width: 88px; height: 88px; border-radius: 50%; overflow: hidden;
  border: 2px solid var(--border-color); background: var(--bg-parchment);
  display: flex; align-items: center; justify-content: center;
}
.acct-avatar-circle img { width: 100%; height: 100%; object-fit: cover; display: block; }
.acct-avatar-circle .acct-avatar-fallback {
  font-size: 34px; font-weight: 600; color: var(--btn-text); background: var(--brand-color);
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
}
.acct-avatar-edit-btn {
  position: absolute; bottom: -2px; right: -2px;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--brand-color); color: var(--btn-text);
  border: 2px solid var(--bg-parchment); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.acct-avatar-edit-btn:hover { opacity: 0.9; }
.acct-avatar-edit-btn svg { width: 14px; height: 14px; }
.acct-profile-head-text { flex: 1; min-width: 180px; }
.acct-profile-head-name { font-size: 26px; font-weight: 500; color: var(--text-primary); margin: 0 0 2px; }
.acct-profile-head-meta { color: var(--text-muted); font-size: 14px; }
.acct-avatar-actions { display: flex; gap: 10px; margin-top: 8px; }
.acct-avatar-actions button {
  font-size: 12.5px; background: none; border: none; color: var(--text-muted);
  cursor: pointer; text-decoration: underline; padding: 0;
}
.acct-avatar-actions button:hover { color: var(--brand-color); }

.acct-tabs { display: flex; gap: 6px; margin-bottom: 24px; flex-wrap: wrap; border-bottom: 1px solid var(--border-color); }
.acct-tab {
  padding: 10px 16px; font-size: 14px; color: var(--text-muted);
  background: none; border: none; border-bottom: 2px solid transparent;
  cursor: pointer; font-family: 'EB Garamond', serif; margin-bottom: -1px;
}
.acct-tab.active { color: var(--brand-color); border-bottom-color: var(--brand-color); font-weight: 600; }
.acct-tab:hover { color: var(--brand-color); }
.acct-tabpanel { display: none; }
.acct-tabpanel.active { display: block; }

.acct-field-group { margin-bottom: 14px; }
.acct-field-label { display: block; font-size: 12.5px; color: var(--text-muted); margin-bottom: 5px; letter-spacing: 0.02em; }
.acct-field-group .authmodal-input { margin-bottom: 0; }
textarea.authmodal-input { font-family: 'EB Garamond', serif; }
.acct-field-row { display: flex; gap: 12px; flex-wrap: wrap; }
.acct-field-row .acct-field-group { flex: 1; min-width: 160px; }

@media (max-width: 520px) {
  .acct-profile-head { gap: 14px; }
  .acct-avatar-circle, .acct-avatar-wrap { width: 72px; height: 72px; }
  .acct-avatar-circle .acct-avatar-fallback { font-size: 28px; }
}

/* ==========================================================================
   Nav action group — groups the login/avatar control with the hamburger so
   they sit together as one unit at the right edge (previously they were
   separate flex children of .site-nav's space-between layout and drifted
   apart from each other, especially on mobile).
   ========================================================================== */
.site-nav-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}
.site-nav-actions .hamburger { margin: 0; }
@media (max-width: 899px) {
  .site-nav-actions { gap: 10px; }
}
/* Slightly larger, friendlier tap target than the original 34px, and a
   soft focus ring for keyboard users. */
.nav-avatar-link {
  width: 38px; height: 38px;
}
.nav-avatar-link:focus-visible {
  outline: 2px solid var(--brand-color);
  outline-offset: 2px;
}