/* ===================================================================
   Inspirations — site-wide foundations
   -------------------------------------------------------------------
   Brand tokens live here. Change a colour or a font once in this file
   and it changes on every page. Everything below the tokens is shared
   furniture: skip link, mobile menu, footer social row, and the rules
   that let real photographs drop into the drawn frame placeholders.
   =================================================================== */

:root {
  /* --- brand palette --------------------------------------------- */
  --ground:      #F5F4EA;   /* page background          */
  --surface:     #FFFFFF;   /* raised panels            */
  --forest:      #00291C;   /* primary ink / dark bands */
  --forest-soft: #102B2A;
  --rust:        #954130;   /* accent + primary buttons */
  --cream:       #F0E7C2;   /* text on dark             */
  --acid:        #F0FF8B;
  --muted:       #5F6F66;
  --line:        #DCDACB;
  --line-soft:   #E6E4D7;

  /* --- drawn frame placeholders ---------------------------------- */
  --mould-walnut: #4A3527;
  --mould-oak:    #B8925E;
  --mould-black:  #1C1A17;
  --mould-gilt:   #C4A053;
  --mould-sage:   #6E7F6B;
  --mould-white:  #EDE9DE;
  --mount:        #EFEADB;
  --aperture:     #DBD6C6;
  --slot:         #DBD6C6;
  --slot-warm:    #E2DBC8;

  /* --- type & metrics -------------------------------------------- */
  --font-display: 'Playfair Display', 'Iowan Old Style', Georgia, serif;
  --font-body:    'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --r-card: 24px;
  --r-btn: 8px;
  --gutter: 40px;
}

@media (max-width: 700px) { :root { --gutter: 22px; } }

/* ---------- accessibility helpers ---------- */

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: #954130; color: #F0E7C2;
  padding: 12px 18px; border-radius: 8px;
  font: 500 15px/1 'IBM Plex Sans', sans-serif; text-decoration: none;
  transition: top 140ms ease;
}
.skip-link:focus { top: 12px; }

/* ---------- mobile menu ---------- */

.nav-toggle {
  display: none;
  align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0;
  background: transparent; border: 1px solid var(--line);
  border-radius: var(--r-btn); cursor: pointer;
  color: var(--forest);
}
.nav-toggle .bars { display: flex; flex-direction: column; gap: 4px; }
.nav-toggle .bars i {
  display: block; width: 18px; height: 1.5px;
  background: currentColor; border-radius: 2px;
  transition: transform 160ms ease, opacity 160ms ease;
}
.nav-toggle[aria-expanded="true"] .bars i:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .bars i:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .bars i:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

.mobile-nav { display: none; border-top: 1px solid var(--line); }
/* the page stylesheet styles every .wrap inside header.site as a flex row,
   so this needs the extra specificity to stack instead */
header.site .mobile-nav .wrap {
  display: flex; flex-direction: column; align-items: stretch;
  gap: 0; padding-top: 6px; padding-bottom: 18px;
}
.mobile-nav a {
  padding: 15px 0; text-decoration: none;
  font-size: 18px; color: var(--forest);
  border-bottom: 1px solid var(--line-soft);
}
.mobile-nav a:last-child { border-bottom: 0; }
.mobile-nav .mob-phone { color: var(--rust); font-weight: 500; }

@media (max-width: 900px) {
  .nav-toggle { display: inline-flex; }
  .mobile-nav { display: block; }
  .mobile-nav[hidden] { display: none; }
}
@media (max-width: 620px) {
  .header-cta { gap: 10px; }
  .header-cta .btn {
    padding: 12px 15px; font-size: 14.5px; gap: 9px;
    white-space: nowrap;
  }
  .brand { font-size: 22px; }
}
@media (max-width: 400px) {
  .header-cta .btn { padding: 11px 13px; font-size: 14px; }
  .header-cta .btn .dot { display: none; }
  .brand { font-size: 20px; }
  .nav-toggle { width: 40px; height: 40px; }
}

/* ---------- footer: social row + linked contact lines ---------- */

.social { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.social-note {
  font-size: 15.5px; font-weight: 300; line-height: 1.5;
  margin: 10px 0 0; opacity: 0.8; max-width: 42ch;
}
.footer-contact a.line { text-decoration: none; }
.footer-contact a.line:hover { text-decoration: underline; }

/* ---------- card links ---------- */

a.frame-card, a.shop-card { text-decoration: none; color: inherit; }
a.frame-card h3, a.shop-card h3 { transition: color 140ms ease; }
a.frame-card:hover h3, a.shop-card:hover h3 { color: var(--rust); }
a.shop-card:hover { border-color: var(--rust); }

/* ---------- dropping real photography into the drawn frames ----------
   Every placeholder is <div class="aperture"><p class="slot">…</p></div>.
   Swap the <p class="slot"> for an <img> and it fills the frame:
     <div class="aperture"><img src="images/your-photo.jpg" alt="…"></div>
   The same works for .shelf, .swatch and .plain blocks on the shop and
   homepage. Keep the alt text descriptive — it is read by Google too.
   -------------------------------------------------------------------- */

.aperture img,
.shelf > img,
.swatch > img,
.plain > img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; border-radius: inherit;
}
/* !important because each page's own stylesheet sets the padding that
   frames the placeholder label — an actual photo has to sit flush. */
.aperture:has(> img),
.shelf:has(> img),
.swatch:has(> img),
.plain:has(> img) {
  padding: 0 !important;
  overflow: hidden;
}