/* ============================================================
   THE BARN WOODSHOP
   Identity: Route A — "Heirloom"
   Display  Cormorant Garamond 300 · Text  Jost 300/400/500
   Ground   Ivory #F2EBDD · Ink Espresso #2E2827 · Accent Brass #9A8058

   Seven pages share this sheet: index, craft, services, barn,
   history, gallery, inquire.

   Night mode is drawn from the same six brand colors — Espresso
   becomes the ground and Parchment becomes the ink. No new hues.

   ------------------------------------------------------------
   Written by hand, rule by rule, by
   J E S S I C A   I .   C H A N G   ( jeshcuhh ).
   No framework, no reset library, no generated output.
   See section 26 at the foot of this sheet.
   ------------------------------------------------------------
   ============================================================ */

/* ---------- 1. TOKENS ---------- */

:root {
  color-scheme: light;

  /* Brand constants */
  --espresso:  #2E2827;
  --walnut:    #4A3628;
  --taupe:     #7A726B;
  --brass:     #9A8058;
  --parchment: #E4DCC3;
  --ivory:     #F2EBDD;

  /* Applied — light */
  --ground:      var(--ivory);
  --ground-2:    var(--parchment);
  --ground-deep: var(--espresso);
  --ink:         var(--espresso);
  --ink-2:       var(--walnut);
  --ink-soft:    #6B615A;
  --rule:        rgba(46, 40, 39, .16);
  --rule-mid:    rgba(46, 40, 39, .3);
  --rule-strong: rgba(46, 40, 39, .55);
  --brass-mark:  var(--brass);
  --brass-text:  #7A6236;
  --field:       #FBF7EE;
  --cast:        0 1px 2px rgba(46, 40, 39, .07), 0 18px 40px -24px rgba(46, 40, 39, .35);

  /* Scale */
  --shell: 1200px;
  --pad:   clamp(1.15rem, 4vw, 3.5rem);
  --band:  clamp(3.25rem, 8vw, 7rem);
  --gap:   clamp(1.25rem, 3vw, 2.5rem);

  /* Colophon — inert strings, carried so the credit travels with
     the sheet wherever it ends up. See section 26.            */
  --built-by: "Jessica I. Chang";
  --handle:   "jeshcuhh";
  --built:    "Designed and hand-coded by Jessica I. Chang (jeshcuhh)";

  --ease:  cubic-bezier(.22, .61, .36, 1);
  --serif: "Cormorant Garamond", "Hoefler Text", Georgia, serif;
  --sans:  "Jost", "Avenir Next", "Segoe UI", system-ui, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --ground:      #211D1B;
    --ground-2:    var(--espresso);
    --ground-deep: #191614;
    --ink:         var(--parchment);
    --ink-2:       #EDE6D2;
    --ink-soft:    #A79C88;
    --rule:        rgba(228, 220, 195, .15);
    --rule-mid:    rgba(228, 220, 195, .28);
    --rule-strong: rgba(228, 220, 195, .5);
    --brass-text:  #C4A46A;
    --field:       #2A2523;
    --cast:        0 1px 2px rgba(0, 0, 0, .5), 0 20px 44px -26px rgba(0, 0, 0, .85);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --ground:      #211D1B;
  --ground-2:    var(--espresso);
  --ground-deep: #191614;
  --ink:         var(--parchment);
  --ink-2:       #EDE6D2;
  --ink-soft:    #A79C88;
  --rule:        rgba(228, 220, 195, .15);
  --rule-mid:    rgba(228, 220, 195, .28);
  --rule-strong: rgba(228, 220, 195, .5);
  --brass-text:  #C4A46A;
  --field:       #2A2523;
  --cast:        0 1px 2px rgba(0, 0, 0, .5), 0 20px 44px -26px rgba(0, 0, 0, .85);
}

/* ---------- 2. BASE ---------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 300;
  font-size: clamp(15px, .5vw + 13.6px, 17px);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: .002em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

a { color: inherit; }

:where(a, button, input, select, textarea, summary) {
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(154, 128, 88, .18);
}

:where(a, button, input, select, textarea):focus-visible {
  outline: 2px solid var(--brass-text);
  outline-offset: 3px;
  border-radius: 1px;
}

:target { scroll-margin-top: 6.5rem; }
section[id] { scroll-margin-top: 5.5rem; }

.skip {
  position: absolute;
  left: -9999px; top: 0; z-index: 200;
  background: var(--ink);
  color: var(--ground);
  padding: .8rem 1.3rem;
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
}
.skip:focus { left: .5rem; top: .5rem; }

.shell {
  width: min(var(--shell), 100% - (var(--pad) * 2));
  margin-inline: auto;
}

.num {
  font-variant-numeric: tabular-nums;
  letter-spacing: .07em;
}

.eyebrow {
  font-family: var(--sans);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--brass-text);
  margin: 0 0 .85rem;
}

.lede {
  font-size: clamp(1.02rem, 1.1vw + .8rem, 1.2rem);
  color: var(--ink-soft);
  max-width: 46ch;
}

/* ---------- 3. WORDMARK ---------- */

.mark {
  display: inline-grid;
  justify-items: center;
  gap: .3rem;
  text-decoration: none;
  line-height: 1;
}

/* The middle band of the lockup: brass rule, barn, brass rule. */
.mark__mid {
  display: flex;
  align-items: center;
  gap: clamp(.35rem, 1vw, .6rem);
  width: 100%;
}
.mark__mid .mark__rule { flex: 1 1 0; width: auto; }

/* The full pen-and-ink drawing, sitting in the middle band between the rules
   so the lockup reads THE BARN / drawing / WOODSHOP. Shown while the header is
   still at the top of the page and there is room for it. At 26px the traced
   linework is a smudge; near 100px it is the barn. An <img> rather than a mask:
   the drawing carries its own colour, and an image is not subject to the CORS
   check that blanks a mask on file://.

   flex: none keeps the rules from squeezing the drawing -- they are
   flex: 1 1 0 and would otherwise win. */
.mark__art {
  display: block;
  height: clamp(44px, 6vw, 72px);
  width: auto;
  flex: none;
  transition: height .32s var(--ease);
}

/* Once the header sticks the drawing shrinks rather than swapping out, so the
   sticky bar stays shallow while the mark stays the same barn. */
.site-head.is-stuck .mark__art {
  height: clamp(26px, 2.6vw, 30px);
}

.mark__top {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.35rem, 2.4vw, 1.75rem);
  letter-spacing: .17em;
  text-indent: .17em;
  text-transform: uppercase;
  white-space: nowrap;
}
.mark__rule {
  width: 100%;
  height: 1px;
  background: var(--brass-mark);
}
.mark__bot {
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(.54rem, 1vw, .66rem);
  letter-spacing: .48em;
  text-indent: .48em;
  text-transform: uppercase;
  color: var(--ink-soft);
  white-space: nowrap;
}

/* ---------- 4. HEADER + NAV ---------- */

.site-head {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--ground) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease), background-color .3s var(--ease);
  padding-top: env(safe-area-inset-top);
}
.site-head.is-stuck { border-bottom-color: var(--rule); }

.site-head__inner {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 1rem;
  padding-block: .85rem;
}

.nav { display: flex; align-items: center; gap: clamp(1rem, 2.5vw, 2.25rem); margin-inline-start: auto; }

.nav__list {
  display: flex;
  gap: clamp(.9rem, 2vw, 1.9rem);
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav__list a {
  font-size: .74rem;
  font-weight: 400;
  letter-spacing: .15em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-soft);
  padding-block: .3rem;
  border-bottom: 1px solid transparent;
  transition: color .25s var(--ease), border-color .25s var(--ease);
}
.nav__list a:hover { color: var(--ink); border-bottom-color: var(--brass-mark); }

.nav__tel {
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-decoration: none;
  color: var(--brass-text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  padding: .5rem .95rem;
  border: 1px solid var(--rule-mid);
  transition: border-color .25s var(--ease), color .25s var(--ease);
}
.nav__tel:hover { border-color: var(--brass-mark); color: var(--ink); }

.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  padding: 0;
  border: 1px solid var(--rule-mid);
  background: transparent;
  cursor: pointer;
  place-content: center;
  gap: 6px;
}
.nav-toggle__bar {
  display: block;
  width: 20px; height: 1px;
  margin-inline: auto;
  background: var(--ink);
  transition: transform .3s var(--ease), opacity .2s var(--ease);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:first-child { transform: translateY(3.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:last-child  { transform: translateY(-3.5px) rotate(-45deg); }

/* ---------- 4b. LIGHT / DARK ----------
   One 15px mark that morphs between a bare ring by day and a
   crescent by night. Drawn in the same 1px line as the phone
   pill and the menu button next to it, and left without a frame
   until it is hovered, so it sits in the header rather than
   announcing itself.

   The state is read off the theme itself, not off the button, so
   the crescent is right for a visitor who has never touched it
   and is simply running a dark system.                        */

.theme-toggle {
  flex: none;
  display: grid;
  place-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background: transparent;
  border: 1px solid transparent;
  color: var(--ink-soft);
  cursor: pointer;
  transition: color .25s var(--ease), border-color .25s var(--ease);
}
.theme-toggle:hover { color: var(--brass-text); border-color: var(--rule-mid); }

.theme-toggle__glyph {
  position: relative;
  display: block;
  width: 15px;
  height: 15px;
  border: 1px solid currentColor;
  border-radius: 50%;
  overflow: hidden;
}
/* The disc that fills the moon... */
.theme-toggle__glyph::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: currentColor;
}
/* ...and the bite taken out of it. By day the bite swells past the
   rim until only the ring is left standing, which is the sun. */
.theme-toggle__glyph::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--ground);
  transform: scale(1.4);
  transition: transform .5s var(--ease);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle__glyph::after {
    transform: translate(-40%, -24%);
  }
}
:root[data-theme="dark"] .theme-toggle__glyph::after {
  transform: translate(-40%, -24%);
}

/* ---------- 4c. TURNING THE LIGHTS ----------
   Day and night change over rather than snap. Browsers that have
   view transitions crossfade the whole rendered page, photographs
   and all; the rest fall back to a colour transition on every
   element, hung on a class that script.js only leaves in place
   while the change is in flight — a permanent blanket rule would
   drag every hover state on the site down to this timing.

   Both paths sit behind no-preference. The global reduced-motion
   block later in this sheet cannot reach either one: its selector
   is weaker than .is-turning, and view transitions are driven from
   script, not CSS.                                              */

@media (prefers-reduced-motion: no-preference) {

  :root.is-turning,
  :root.is-turning *,
  :root.is-turning *::before,
  :root.is-turning *::after {
    transition: background-color .5s var(--ease),
                border-color     .5s var(--ease),
                color            .5s var(--ease),
                fill             .5s var(--ease),
                box-shadow       .5s var(--ease),
                transform        .5s var(--ease) !important;
  }

  /* transform is in that list so the moon keeps its own swing;
     the shorthand would otherwise wipe it for half a second. */

  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: .5s;
    animation-timing-function: cubic-bezier(.22, .61, .36, 1);
  }
}

@media (max-width: 899px) {
  .nav-toggle { display: grid; }

  /* The drawer leaves the flow, so the right-hand group is now the
     toggle and the menu button. The toggle comes first in reading
     order and carries the auto margin the nav had. */
  .theme-toggle { margin-inline-start: auto; }
  .nav-toggle   { order: 1; }

  .nav {
    position: absolute;
    margin-inline-start: 0;
    inset-inline: 0;
    top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--ground);
    border-block: 1px solid var(--rule);
    padding: .5rem var(--pad) 1.5rem;
    box-shadow: var(--cast);
    display: none;
  }
  .nav.is-open { display: flex; }

  .nav__list { flex-direction: column; gap: 0; }
  .nav__list a {
    display: block;
    padding-block: .85rem;
    font-size: .82rem;
    border-bottom: 1px solid var(--rule);
  }
  .nav__list a:hover { border-bottom-color: var(--rule); }
  .nav__tel { margin-top: 1.1rem; text-align: center; }
}

/* ---------- 5. HERO ---------- */

.hero { padding-block: clamp(2.5rem, 7vw, 5.5rem) var(--band); }

.hero__grid {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
@media (min-width: 920px) {
  .hero__grid { grid-template-columns: 1.08fr .92fr; }
}

.hero__title {
  font-size: clamp(2.5rem, 6.2vw, 4.6rem);
  margin-bottom: 1.4rem;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 1rem;
  margin-top: 2rem;
}

.btn {
  display: inline-block;
  font-family: var(--sans);
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  text-decoration: none;
  padding: .95rem 1.9rem;
  border: 1px solid var(--ink);
  cursor: pointer;
  transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.btn--solid { background: var(--ink); color: var(--ground); }
.btn--solid:hover { background: var(--walnut); border-color: var(--walnut); }
.btn--quiet { background: transparent; color: var(--ink); border-color: var(--rule-mid); }
.btn--quiet:hover { border-color: var(--ink); }
.btn--full { width: 100%; }

.facts {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 2.75rem;
  margin: 2.75rem 0 0;
  padding-top: 1.4rem;
  border-top: 1px solid var(--rule);
}
.facts__item { display: grid; gap: .15rem; }
.facts dt {
  font-size: .66rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.facts dd {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.5rem;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.hero__fig { margin: 0; }
.hero__fig img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  filter: saturate(.88) contrast(1.03);
  box-shadow: var(--cast);
}
.hero__fig figcaption,
.wide-fig figcaption {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: .75rem;
  padding-top: .55rem;
  border-top: 1px solid var(--rule);
  font-size: .7rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* ---------- 6. BANDS + SECTION HEADS ---------- */

.band { padding-block: var(--band); }
.band--tint { background: var(--ground-2); }

.sec-head { margin-bottom: clamp(2rem, 5vw, 3.5rem); max-width: 60ch; }
.sec-head__title { font-size: clamp(1.95rem, 4.4vw, 3.2rem); }
.sec-head__note {
  margin-top: 1.1rem;
  color: var(--ink-soft);
  max-width: 52ch;
}

.wide-fig { margin: 0 0 clamp(2rem, 5vw, 3.25rem); }
.wide-fig img {
  width: 100%;
  aspect-ratio: 500 / 300;
  object-fit: cover;
  filter: saturate(.88) contrast(1.03);
}
.wide-fig figcaption { justify-content: flex-start; }

/* ---------- 7. PILLARS ---------- */

.cols-3 {
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
}
.pillar { border-top: 1px solid var(--rule-mid); padding-top: 1.1rem; }
.pillar h2 {
  font-family: var(--sans);
  font-weight: 500;
  font-size: .74rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--brass-text);
  margin-bottom: .7rem;
  line-height: 1.5;
}
.pillar p { color: var(--ink-soft); font-size: .95rem; }

/* ---------- 8. SERVICES ---------- */

.services { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule-strong); }

.service {
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: .4rem 1.25rem;
  padding: clamp(1.4rem, 3vw, 2.1rem) 0;
  border-bottom: 1px solid var(--rule);
  align-items: start;
}
@media (min-width: 800px) {
  .service { grid-template-columns: 4rem 1fr 12rem; gap: 2rem; align-items: baseline; }
}

.service__num {
  font-size: .78rem;
  color: var(--brass-text);
  padding-top: .35rem;
}
.service__body h2 {
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  margin-bottom: .5rem;
}
.service__body p { color: var(--ink-soft); font-size: .95rem; max-width: 54ch; margin: 0; }

.service__meta {
  grid-column: 2 / -1;
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding-top: .6rem;
}
@media (min-width: 800px) {
  .service__meta { grid-column: 3; text-align: right; padding-top: 0; }
}

/* ---------- 9. SPLIT (THE BARN) ---------- */

.split {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
@media (min-width: 860px) {
  .split { grid-template-columns: .85fr 1.15fr; }
}
.split__fig { margin: 0; }
.split__fig img {
  width: 100%;
  aspect-ratio: 340 / 620;
  object-fit: cover;
  object-position: center top;
  box-shadow: var(--cast);
}
.split__body p { color: var(--ink-soft); }
.split__body .sec-head__title { margin-bottom: 1.3rem; }
.split__body em { font-family: var(--serif); font-style: italic; font-size: 1.08em; color: var(--ink); }

.ticks { list-style: none; margin: 1.8rem 0 0; padding: 0; }
.ticks li {
  position: relative;
  padding: .6rem 0 .6rem 1.6rem;
  border-top: 1px solid var(--rule);
  font-size: .9rem;
  color: var(--ink-soft);
}
.ticks li::before {
  content: "";
  position: absolute;
  left: 0; top: 1.15rem;
  width: .5rem; height: 1px;
  background: var(--brass-mark);
}

/* ---------- 10. HISTORY ---------- */

.history {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
}
@media (min-width: 900px) {
  .history { grid-template-columns: 1.1fr .9fr; align-items: start; }
}

.timeline { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule-strong); }
.tl {
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  gap: .35rem 1.25rem;
  padding: clamp(1.2rem, 2.5vw, 1.75rem) 0;
  border-bottom: 1px solid var(--rule);
}
.tl__year {
  margin: 0;
  font-size: .8rem;
  color: var(--brass-text);
  padding-top: .3rem;
}
.tl h2 {
  font-size: clamp(1.25rem, 2.2vw, 1.65rem);
  margin-bottom: .45rem;
}
.tl p { color: var(--ink-soft); font-size: .93rem; margin: 0; }

.history__figs { display: grid; gap: 1.5rem; }
.history__figs figure { margin: 0; }
.history__figs img {
  width: 100%;
  object-fit: cover;
  filter: saturate(.72) contrast(1.04);
  box-shadow: var(--cast);
}
.history__figs figure:first-child img { aspect-ratio: 500 / 352; }
.history__figs figure:last-child img  { aspect-ratio: 340 / 765; }

/* ---------- 11. GALLERY ---------- */

.gallery {
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 3 250px;
  column-gap: var(--gap);
}
.gallery > li {
  break-inside: avoid;
  margin-bottom: var(--gap);
}

.shot {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.shot img {
  width: 100%;
  height: auto;
  filter: saturate(.86) contrast(1.02);
  transition: filter .45s var(--ease), transform .45s var(--ease);
}
.shot:hover img { filter: saturate(1) contrast(1.04); transform: scale(1.015); }
.shot__cap {
  display: block;
  margin-top: .7rem;
  padding-top: .5rem;
  border-top: 1px solid var(--rule);
  font-size: .7rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  transition: color .25s var(--ease);
}
.shot:hover .shot__cap { color: var(--ink); }

/* ---------- 12. CONTACT (always dark) ---------- */

.band--dark {
  --ground:     var(--ground-deep);
  --ink:        var(--parchment);
  --ink-soft:   #A79C88;
  --rule:       rgba(228, 220, 195, .16);
  --rule-mid:   rgba(228, 220, 195, .3);
  --rule-strong: rgba(228, 220, 195, .5);
  --brass-text: #C4A46A;
  --field:      rgba(228, 220, 195, .05);
  background: var(--ground-deep);
  color: var(--parchment);
}

.contact {
  display: grid;
  gap: clamp(2.25rem, 5vw, 4.5rem);
}
@media (min-width: 900px) {
  .contact { grid-template-columns: 1.05fr .95fr; align-items: start; }
}
.contact__lead p { color: var(--ink-soft); max-width: 46ch; }
.contact__lead .sec-head__title { margin-bottom: 1.3rem; }

.contact__rows { margin-top: 2.25rem; border-top: 1px solid var(--rule-mid); }
.crow {
  display: grid;
  gap: .1rem .5rem;
  padding: .9rem 0;
  border-bottom: 1px solid var(--rule);
}
@media (min-width: 560px) {
  .crow { grid-template-columns: 8rem 1fr; align-items: baseline; }
}
.crow__k {
  font-size: .66rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.crow__v { font-size: .95rem; color: var(--parchment); text-decoration: none; }
a.crow__v {
  font-variant-numeric: tabular-nums;
  letter-spacing: .06em;
  border-bottom: 1px solid var(--brass-mark);
  padding-bottom: 2px;
  transition: color .25s var(--ease);
}
a.crow__v:hover { color: var(--brass-text); }

/* ---------- 13. FORM ---------- */

.form {
  border: 1px solid var(--rule-mid);
  padding: clamp(1.3rem, 3.5vw, 2.4rem);
  display: grid;
  gap: 1.1rem;
}
.form__title {
  font-family: var(--serif);
  font-size: 1.6rem;
  line-height: 1.1;
  margin: 0 0 .4rem;
}

.field { display: grid; gap: .45rem; }
.field label {
  font-size: .66rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.field .opt { letter-spacing: .1em; text-transform: none; opacity: .75; }

.field input,
.field select,
.field textarea {
  font-family: var(--sans);
  font-weight: 300;
  font-size: .95rem;
  color: var(--parchment);
  background-color: var(--field);
  border: 1px solid var(--rule-mid);
  border-radius: 0;
  padding: .8rem .9rem;
  width: 100%;
  transition: border-color .25s var(--ease);
}
.field textarea { resize: vertical; min-height: 6.5rem; }
.field select { appearance: none; background-image: none; }
.field select option { background-color: #2E2827; color: #E4DCC3; }

.field input::placeholder,
.field textarea::placeholder { color: var(--ink-soft); opacity: .7; }

.field input:hover,
.field select:hover,
.field textarea:hover { border-color: var(--rule-strong); }

.field [aria-invalid="true"] { border-color: #C97A5A; }

.field-error {
  font-size: .74rem;
  letter-spacing: .04em;
  color: #E0A184;
}

.form .btn--solid {
  background: var(--parchment);
  color: var(--espresso);
  border-color: var(--parchment);
  margin-top: .3rem;
}
.form .btn--solid:hover { background: var(--brass-mark); border-color: var(--brass-mark); color: var(--espresso); }

.form__status {
  margin: 0;
  min-height: 1.3em;
  font-size: .76rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--brass-text);
}

/* ---------- 14. FOOTER ---------- */

.site-foot {
  border-top: 1px solid var(--rule-strong);
  padding-block: clamp(2.5rem, 5vw, 4rem) calc(clamp(2rem, 4vw, 3rem) + env(safe-area-inset-bottom));
}
.site-foot__inner {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3rem);
  align-items: start;
}
@media (min-width: 760px) {
  .site-foot__inner { grid-template-columns: auto 1fr auto; }
}

.site-foot__mark { display: inline-grid; justify-items: start; gap: .3rem; }
.site-foot__mark .mark__rule { width: 100%; }
.site-foot__mark .mark__art { height: clamp(30px, 3vw, 38px); }
.site-foot__tag {
  margin: .55rem 0 0;
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.site-foot__nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
}
@media (min-width: 760px) {
  .site-foot__nav ul { justify-content: center; }
}
.site-foot__nav a {
  font-size: .7rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-soft);
  transition: color .25s var(--ease);
}
.site-foot__nav a:hover { color: var(--ink); }

.site-foot__meta {
  margin: 0;
  font-size: .72rem;
  line-height: 2;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
@media (min-width: 760px) { .site-foot__meta { text-align: right; } }
.site-foot__meta a { color: var(--brass-text); text-decoration: none; font-variant-numeric: tabular-nums; }
.site-foot__meta a:hover { color: var(--ink); }

/* ---------- 15. LIGHTBOX ---------- */

.lightbox {
  border: 0;
  padding: 0;
  max-width: min(92vw, 1000px);
  max-height: 92vh;
  background: var(--ground);
  color: var(--ink);
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .6);
  overscroll-behavior: contain;
}
.lightbox::backdrop { background: rgba(25, 22, 20, .82); backdrop-filter: blur(3px); }

.lightbox img {
  width: 100%;
  max-height: 76vh;
  object-fit: contain;
  background: var(--ground-deep);
}
.lightbox__cap {
  margin: 0;
  padding: .9rem 1.2rem 1.1rem;
  font-size: .78rem;
  color: var(--ink-soft);
  border-top: 1px solid var(--rule);
}
.lightbox__close {
  position: absolute;
  top: .4rem; right: .4rem;
  width: 40px; height: 40px;
  display: grid;
  place-content: center;
  font-size: 1.5rem;
  line-height: 1;
  background: var(--ground);
  color: var(--ink);
  border: 1px solid var(--rule-mid);
  cursor: pointer;
  transition: background-color .25s var(--ease);
}
.lightbox__close:hover { background: var(--ground-2); }

/* ---------- 16. LOAD-IN ---------- */

@keyframes rise {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
.hero__body > *  { animation: rise .8s var(--ease) backwards; }
.hero__body > *:nth-child(1) { animation-delay: .05s; }
.hero__body > *:nth-child(2) { animation-delay: .13s; }
.hero__body > *:nth-child(3) { animation-delay: .21s; }
.hero__body > *:nth-child(4) { animation-delay: .29s; }
.hero__body > *:nth-child(5) { animation-delay: .37s; }
.hero__fig { animation: rise .9s var(--ease) .2s backwards; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- 17. PRINT ---------- */

@media print {
  /* Paper is always light, whatever the screen was set to. */
  :root, :root[data-theme] {
    color-scheme: light;
    --ground:      var(--ivory);
    --ground-2:    var(--parchment);
    --ground-deep: var(--espresso);
    --ink:         var(--espresso);
    --ink-2:       var(--walnut);
    --ink-soft:    #6B615A;
    --rule:        rgba(46, 40, 39, .16);
    --rule-mid:    rgba(46, 40, 39, .3);
    --rule-strong: rgba(46, 40, 39, .55);
    --brass-text:  #7A6236;
    --field:       #FBF7EE;
  }
  .site-head, .nav-toggle, .hero__actions, .form, .lightbox { display: none !important; }
  body { background: #fff; color: #000; }
  .band { padding-block: 1.5rem; }
}


/* ---------- 18. INTERIOR PAGE HEAD ---------- */

.page-head {
  padding-block: clamp(2.5rem, 6vw, 5rem) clamp(1.75rem, 4vw, 3rem);
  border-bottom: 1px solid var(--rule);
}
.page-head__inner { position: relative; }
.page-head__title {
  font-size: clamp(2.3rem, 5.6vw, 4.1rem);
  margin-bottom: 1.2rem;
  max-width: 20ch;
}
.page-head__no {
  position: absolute;
  top: -.35em; right: 0;
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(3rem, 7vw, 5.5rem);
  line-height: 1;
  color: var(--brass-mark);
  opacity: .32;
  pointer-events: none;
}
@media (max-width: 700px) { .page-head__no { display: none; } }

/* First band under a page head needs less air above it. */
.band--flush { padding-top: clamp(2.25rem, 5vw, 3.5rem); }

/* ---------- 19. ACTIVE NAV ---------- */

.nav__list a[aria-current="page"] {
  color: var(--ink);
  border-bottom-color: var(--brass-mark);
}

/* ---------- 20. HOME INDEX ---------- */

.index-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--rule-strong);
}
.index-row { border-bottom: 1px solid var(--rule); }
.index-row__link {
  display: grid;
  grid-template-columns: 2.75rem 1fr auto;
  gap: .3rem 1.25rem;
  align-items: baseline;
  padding: clamp(1.1rem, 2.4vw, 1.6rem) 0;
  text-decoration: none;
}
.index-row__no { font-size: .74rem; color: var(--brass-text); }
.index-row__body { display: grid; gap: .3rem; min-width: 0; }
.index-row__title {
  font-family: var(--serif);
  font-size: clamp(1.4rem, 2.8vw, 2rem);
  line-height: 1.1;
  transition: color .25s var(--ease);
}
.index-row__note { font-size: .9rem; color: var(--ink-soft); }
.index-row__go {
  font-size: 1.05rem;
  color: var(--brass-text);
  transition: transform .35s var(--ease);
}
.index-row__link:hover .index-row__go { transform: translateX(6px); }
.index-row__link:hover .index-row__title { color: var(--brass-text); }

/* ---------- 21. PULL QUOTE ---------- */

.quote-block { display: grid; justify-items: center; text-align: center; }
.quote { margin: 0; }
.quote p {
  font-family: var(--serif);
  font-size: clamp(2rem, 5.5vw, 3.6rem);
  line-height: 1.14;
  margin: 0 auto 1.5rem;
  max-width: 16ch;
  text-wrap: balance;
}
.quote cite {
  font-style: normal;
  font-size: .7rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* ---------- 22. CALLOUT ---------- */

.callout {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  border: 1px solid var(--rule-mid);
  padding: clamp(1.5rem, 4vw, 2.75rem);
  display: grid;
  gap: .85rem;
  justify-items: start;
  max-width: 54ch;
}
.callout__lead {
  font-family: var(--serif);
  font-size: clamp(1.35rem, 2.6vw, 1.9rem);
  line-height: 1.15;
  margin: 0;
}
.callout p { color: var(--ink-soft); margin: 0; }
.callout .btn { margin-top: .6rem; }

/* ---------- 23. PREVIOUS / NEXT ---------- */

.pager { border-top: 1px solid var(--rule-strong); }
.pager__inner {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.pager__link {
  display: grid;
  gap: .35rem;
  padding-block: clamp(1.5rem, 3vw, 2.25rem);
  text-decoration: none;
  min-width: 0;
}
.pager__link--next { text-align: right; margin-left: auto; }
.pager__k {
  font-size: .66rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.pager__v {
  font-family: var(--serif);
  font-size: clamp(1.3rem, 2.6vw, 1.8rem);
  line-height: 1.1;
  transition: color .25s var(--ease);
}
.pager__link:hover .pager__v { color: var(--brass-text); }

/* ---------- 24. PAGE-LEVEL VARIANTS ---------- */

.split__fig--wide img { aspect-ratio: 340 / 700; }
.btn--spaced { margin-top: 1.9rem; }

/* ---------- 25. PLACE ----------

   A Leaflet map stood here once, drawn over OpenStreetMap's public
   tiles. Those servers run on donations and their usage policy does
   not cover a shop site borrowing them as a base map; they answered
   with refusal tiles instead of streets.

   What is here now is OpenStreetMap's own share-embed: their page,
   their tiles, served under their own name, which is the thing the
   policy is written to allow. It costs no key, no library and no
   line of script -- if the frame never loads, the address sits
   under it and the page still does its work. To move to Google's
   Embed API later, swap the iframe src; nothing below changes. */

.place { margin: 2.6rem 0 0; }

.place__frame {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  max-height: 24rem;
  border: 1px solid var(--rule-mid);
  background: var(--field);
}
@media (min-width: 900px) {
  .place__frame { aspect-ratio: 16 / 10; }
}

.place__cap {
  display: grid;
  justify-items: start;
  gap: .45rem;
  margin: 0;
  padding-top: .95rem;
}
.place__card {
  font-style: normal;
  display: grid;
  gap: .25rem;
}
.place__k {
  font-size: .66rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.place__addr {
  font-family: var(--serif);
  font-size: clamp(1.15rem, 2.6vw, 1.45rem);
  line-height: 1.3;
  color: var(--ink);
}
.place__dir {
  margin-top: .3rem;
  font-size: .66rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 1px solid var(--brass-mark);
  padding-bottom: 2px;
  transition: color .25s var(--ease);
}
.place__dir:hover { color: var(--brass-text); }

/* On paper the address is the useful part; the frame and the link
   are not. */
@media print {
  .place__frame, .place__dir { display: none !important; }
  .place__cap { padding-top: 0; }
}


/* ---------- 26. COLOPHON + SIGNET ----------
   The credit in the footer of every page is set for screen readers
   and for anyone who opens the source. It is never painted on the
   page; delete the clip below and it becomes visible.

   The signet is the other half: type the handle anywhere on the
   site and script.js raises a small card, then puts it away again.
   -------------------------------------------------------------- */

.colophon {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  white-space: nowrap;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
}

.signet {
  position: fixed;
  left: 50%;
  bottom: clamp(1rem, 4vw, 2.5rem);
  z-index: 120;
  width: min(21rem, calc(100vw - 2rem));
  margin: 0;
  padding: 1.15rem 1.35rem 1.25rem;
  background: var(--ground);
  color: var(--ink);
  border: 1px solid var(--rule-mid);
  box-shadow: var(--cast);
  text-align: center;
  opacity: 0;
  transform: translate(-50%, .9rem);
  transition: opacity .45s var(--ease), transform .45s var(--ease);
  pointer-events: none;
}
.signet[hidden] { display: none !important; }
.signet.is-open { opacity: 1; transform: translate(-50%, 0); }

.signet__rule {
  display: block;
  width: 2.25rem;
  height: 1px;
  margin: 0 auto .75rem;
  background: var(--brass-mark);
}
.signet__eyebrow {
  display: block;
  font-size: .6rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.signet__name {
  display: block;
  margin: .4rem 0 .1rem;
  font-family: var(--serif);
  font-weight: 300;
  font-size: 1.5rem;
  line-height: 1.2;
  letter-spacing: .01em;
}
.signet__handle {
  display: block;
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: lowercase;
  color: var(--brass-text);
}
.signet__note {
  margin: .7rem 0 0;
  font-size: .76rem;
  line-height: 1.55;
  color: var(--ink-soft);
}

@media (prefers-reduced-motion: reduce) {
  .signet { transition: opacity .2s linear; transform: translate(-50%, 0); }
}

@media print {
  .signet { display: none !important; }
}

/* ============================================================
   end of sheet — J. I. C.
   ============================================================ */