/* Montgomery Leather — generated stylesheet. Do not edit by hand;
   it is produced by the site build and will be overwritten. */

/* ---- tokens -------------------------------------------------------------
   Colors are sampled from the client's own logo card, tooled leather and
   product photography. Every text token is checked by the static gate against
   EVERY ground it sits on — paper, wash and wash-warm — not just white.      */
:root {
  --paper: #FFFCF6;
  --wash: #F7EEDD;
  --wash-warm: #F0E3C8;
  --ink: #241F19;
  --heading: #191512;
  --muted: #5A4E42;
  --cognac: #7A4526;
  --cognac-lite: #93674A;
  --dark: #1E1712;
  --rule: #DCCCAE;

  /* on-dark tokens — the footer and the dark bands */
  --on-dark: #F7EEDD;
  --on-dark-muted: #C9B79A;

  --serif: Georgia, "Iowan Old Style", "Palatino Linotype", "Book Antiqua",
           "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;

  --wrap: 1180px;
  --gut: clamp(18px, 5vw, 64px);
  --radius: 3px;
}

/* ---- reset --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important;
    animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 17px/1.65 var(--sans);
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }

/* An svg with a viewBox and no intrinsic size expands to fill its container —
   this has previously rendered a 16px icon at ~250px tall. Low specificity so
   class rules can still override it. */
svg { width: 18px; height: 18px; flex: none; }

h1, h2, h3, h4 {
  font-family: var(--serif);
  color: var(--heading);
  line-height: 1.15;
  margin: 0 0 .5em;
  font-weight: 700;
  letter-spacing: -.01em;
}
h1 { font-size: clamp(32px, 5.2vw, 54px); }
h2 { font-size: clamp(26px, 3.6vw, 38px); }
h3 { font-size: clamp(19px, 2.2vw, 23px); }
p { margin: 0 0 1.1em; }
a { color: var(--cognac); text-underline-offset: .18em; }
a:hover { color: var(--heading); }
:focus-visible { outline: 3px solid var(--cognac); outline-offset: 3px; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }
.section { padding-block: clamp(46px, 7vw, 92px); }
.section--wash { background: var(--wash); }
.section--warm { background: var(--wash-warm); }
.section--dark { background: var(--dark); color: var(--on-dark); }
.lede { font-size: clamp(18px, 2.1vw, 21px); color: var(--muted); max-width: 62ch; }
.muted { color: var(--muted); }
.kicker {
  font: 600 12px/1 var(--sans);
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--cognac); margin: 0 0 14px;
}
.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--dark); color: var(--on-dark); padding: 12px 18px; z-index: 100;
}
.skip:focus { left: 8px; top: 8px; }

/* ---- header --------------------------------------------------------------
   The client's mark is dark ink on a cream card, so the header ground MUST
   stay light. The dark footer uses a knockout variant instead. The static gate
   asserts both, because this constraint inverts from client to client.       */
.site-header {
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  position: sticky; top: 0; z-index: 40;
}
.header-in { display: flex; align-items: center; gap: 20px; min-height: 76px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; margin-right: auto; }
.brand img { height: 46px; width: auto; }
.brand-name {
  font-family: var(--serif); font-size: 20px; font-weight: 700;
  color: var(--heading); letter-spacing: .01em; white-space: nowrap;
}
.nav { display: flex; align-items: center; gap: 22px; }
.nav a {
  font: 500 15px/1 var(--sans); color: var(--ink);
  text-decoration: none; padding: 8px 0; border-bottom: 2px solid transparent;
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--cognac); border-bottom-color: var(--cognac); }

/* The call button lives inside the nav so it is reachable when the mobile menu
   is open, and is hidden above the breakpoint where the header has its own.
   Without this the desktop header shows it twice.
   The color rule is not redundant: ".nav a" is specificity 0-1-1 and beats
   ".btn--primary" at 0-1-0, so the button rendered dark ink on cognac at
   2.11:1. Only the browser gate could see that. */
.nav .btn { display: none; }
.nav a.btn--primary, .nav a.btn--primary:hover { color: #FFFCF6; border-bottom-color: transparent; }
.nav-toggle {
  display: none; background: none; border: 1px solid var(--rule);
  border-radius: var(--radius); padding: 9px 12px; cursor: pointer; color: var(--ink);
  font: 500 15px/1 var(--sans); align-items: center; gap: 8px;
}
.header-cta { display: flex; gap: 10px; }

@media (max-width: 900px) {
  .nav-toggle { display: inline-flex; }
  .header-cta { display: none; }
  .nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--paper); border-bottom: 1px solid var(--rule);
    padding: 8px var(--gut) 18px;
  }
  .nav.is-open { display: flex; }
  .nav a { padding: 13px 0; border-bottom: 1px solid var(--rule); }
  .nav a:hover, .nav a[aria-current="page"] { border-bottom-color: var(--rule); }
  .nav .btn { display: inline-flex; margin-top: 14px; text-align: center; }
}

/* ---- buttons ------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font: 600 15px/1 var(--sans); text-decoration: none; cursor: pointer;
  padding: 14px 22px; border-radius: var(--radius); border: 1.5px solid transparent;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.btn--primary { background: var(--cognac); color: #FFFCF6; border-color: var(--cognac); }
.btn--primary:hover { background: var(--heading); border-color: var(--heading); color: #FFFCF6; }
.btn--ghost { background: transparent; color: var(--heading); border-color: var(--rule); }
.btn--ghost:hover { border-color: var(--cognac); color: var(--cognac); }
.btn--on-dark { background: transparent; color: var(--on-dark); border-color: rgba(247,238,221,.42); }
.btn--on-dark:hover { background: var(--on-dark); color: var(--dark); border-color: var(--on-dark); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

/* ---- hero ---------------------------------------------------------------- */
.hero { background: var(--wash); border-bottom: 1px solid var(--rule); }
.hero-in {
  display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px, 5vw, 64px);
  align-items: center; padding-block: clamp(44px, 6.5vw, 88px);
}
.hero-media { position: relative; }
.hero-media img {
  width: 100%; border-radius: var(--radius);
  border: 1px solid var(--rule);
  box-shadow: 0 18px 44px rgba(30,23,18,.16);
}
.hero h1 { margin-bottom: .35em; }
@media (max-width: 860px) {
  .hero-in { grid-template-columns: 1fr; }
  .hero-media { order: -1; }
}

.page-head { background: var(--wash); border-bottom: 1px solid var(--rule); }
.page-head .wrap { padding-block: clamp(34px, 5vw, 62px); }

/* ---- breadcrumbs --------------------------------------------------------- */
.crumbs { font: 400 14px/1.4 var(--sans); color: var(--muted); margin-bottom: 14px; }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--cognac); }
.crumbs span { padding: 0 6px; }

/* ---- grids --------------------------------------------------------------- */
.grid { display: grid; gap: clamp(20px, 3vw, 34px); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 900px) { .grid--3 { grid-template-columns: repeat(2, 1fr); } }
/* Two-column prose collapses at 860, not 620: at 768 the text column came out
   around 330px wide, which is too narrow to read comfortably. */
@media (max-width: 860px) { .grid--2 { grid-template-columns: 1fr; } }
@media (max-width: 620px) { .grid--3 { grid-template-columns: 1fr; } }

.card {
  background: var(--paper); border: 1px solid var(--rule);
  border-radius: var(--radius); overflow: hidden;
  display: flex; flex-direction: column;
}
.card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.card-body { padding: 22px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.card h3 { margin-bottom: .35em; }
.card h3 a { text-decoration: none; color: var(--heading); }
.card h3 a:hover { color: var(--cognac); }
.card p { color: var(--muted); font-size: 15.5px; margin-bottom: 1em; }
.card .card-more { margin-top: auto; font: 600 14px/1 var(--sans); color: var(--cognac); text-decoration: none; }
.card .card-more:hover { text-decoration: underline; }

/* ---- pillars ------------------------------------------------------------- */
.pillar { border-top: 2px solid var(--cognac); padding-top: 20px; }
.pillar h3 { margin-bottom: .4em; }
.pillar p { color: var(--muted); margin: 0; }

/* ---- named pieces -------------------------------------------------------- */
.pieces { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 12px; }
.pieces li {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px;
  padding: 14px 18px; background: var(--paper);
  border: 1px solid var(--rule); border-left: 3px solid var(--cognac);
  border-radius: var(--radius);
}
.pieces .piece-name { font-family: var(--serif); font-size: 19px; font-weight: 700; color: var(--heading); }
.pieces .piece-note { color: var(--muted); font-size: 15px; }

/* ---- gallery ------------------------------------------------------------- */
.gallery { display: grid; gap: clamp(14px, 2vw, 22px); grid-template-columns: repeat(3, 1fr); }
@media (max-width: 860px) { .gallery { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .gallery { grid-template-columns: 1fr; } }
.gallery figure { margin: 0; }
.gallery img { width: 100%; border-radius: var(--radius); border: 1px solid var(--rule); }
.gallery figcaption { font-size: 14px; color: var(--muted); padding-top: 9px; }

/* ---- pull quote ---------------------------------------------------------- */
.pull {
  margin: 0; padding: clamp(24px, 4vw, 40px);
  background: var(--wash-warm); border-left: 4px solid var(--cognac);
  border-radius: var(--radius);
}
.pull p {
  font-family: var(--serif); font-size: clamp(19px, 2.4vw, 25px);
  line-height: 1.42; color: var(--heading); margin: 0 0 .6em;
}
.pull footer { font: 500 14px/1.5 var(--sans); color: var(--muted); }
.pull cite { font-style: normal; font-weight: 600; color: var(--ink); }

/* ---- channels (where to find us) ----------------------------------------- */
.channels { display: grid; gap: 18px; margin-top: 30px; }
.channel {
  background: var(--paper); border: 1px solid var(--rule);
  border-radius: var(--radius); padding: 24px 26px;
}
.channel h3 { margin-bottom: .35em; }
.channel p { color: var(--muted); margin-bottom: 0; }
.channel .btn { margin-top: 18px; }

/* ---- contact ------------------------------------------------------------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 48px); align-items: start; }
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; }
.contact-list li { border-bottom: 1px solid var(--rule); padding-bottom: 18px; }
.contact-list li:last-child { border-bottom: 0; }
.contact-label {
  font: 600 12px/1 var(--sans); letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted); display: block; margin-bottom: 8px;
}
.contact-value { font-family: var(--serif); font-size: 21px; color: var(--heading); text-decoration: none; }
a.contact-value:hover { color: var(--cognac); }

/* ---- prose --------------------------------------------------------------- */
.prose { max-width: 68ch; }
.prose h2 { margin-top: 1.6em; }
.prose h2:first-child { margin-top: 0; }
.prose ul { padding-left: 1.15em; }
.prose li { margin-bottom: .5em; }

/* ---- cta band ------------------------------------------------------------ */
.cta-band { background: var(--dark); color: var(--on-dark); }
.cta-band h2 { color: var(--on-dark); }
.cta-band p { color: var(--on-dark-muted); max-width: 58ch; }

/* ---- footer -------------------------------------------------------------- */
.site-footer { background: var(--dark); color: var(--on-dark-muted); }
.site-footer .wrap { padding-block: clamp(40px, 5vw, 64px); }
.footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: clamp(24px, 4vw, 48px); }
@media (max-width: 800px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } }
.site-footer img.footer-logo { height: 74px; width: auto; margin-bottom: 16px; }
.site-footer h4 {
  font: 600 12px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase;
  color: var(--on-dark); margin: 0 0 16px;
}
.site-footer a { color: var(--on-dark); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; color: var(--on-dark); }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 15px; }
.footer-bottom {
  border-top: 1px solid rgba(247,238,221,.16); margin-top: 38px; padding-top: 22px;
  display: flex; flex-wrap: wrap; gap: 10px 26px; font-size: 14px;
}
.footer-bottom p { margin: 0; }

/* Any dark-text token that lands inside a dark region is a bug — a shared
   component reused in the footer has rendered at 1.07:1 before. Force the
   light tokens here so a reused block cannot inherit the light-ground ones. */
.site-footer, .cta-band, .section--dark { --heading: #F7EEDD; --ink: #F7EEDD; --muted: #C9B79A; }
.site-footer h2, .site-footer h3, .cta-band h3, .section--dark h2,
.section--dark h3, .section--dark p { color: var(--on-dark); }

/* ---- social row ---------------------------------------------------------- */
.social { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 4px; }
.social a { display: inline-flex; align-items: center; gap: 7px; font-size: 15px; }

/* ---- notice -------------------------------------------------------------- */
.notice {
  background: var(--wash-warm); border: 1px solid var(--rule);
  border-left: 3px solid var(--cognac);
  border-radius: var(--radius); padding: 18px 22px; font-size: 15.5px; color: var(--ink);
}
.notice p:last-child { margin-bottom: 0; }

/* ---- 404 ----------------------------------------------------------------- */
.err { text-align: center; padding-block: clamp(60px, 10vw, 130px); }
.err .btn-row { justify-content: center; }