/* Woodsong Fine Furniture
 *
 * Quiet, photograph-led layout. The one bold element is Kim's oval brand
 * mark; everything else stays disciplined so the furniture leads.
 *
 * Palette (contrast checked against --paper):
 *   --paper   limewash background
 *   --ink     charred timber, body text (12.9:1)
 *   --ink-soft secondary text (6.3:1)
 *   --olive   links; Kim's old theme green, darkened (6.0:1)
 *   --olive-deep contact band background (paper text 8.8:1)
 *   --oak     focus rings only (non-text, 4.4:1)
 *
 * Type: Alegreya for headings and body (classic scale 14/18/21/24/36/48),
 * Alegreya Sans for navigation, captions and small labels.
 */

/* ---------- Fonts (self-hosted, OFL) ---------- */
@font-face { font-family: "Alegreya"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/alegreya-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Alegreya"; font-style: italic; font-weight: 400; font-display: swap; src: url("/assets/fonts/alegreya-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Alegreya"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/alegreya-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Alegreya"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/alegreya-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Alegreya Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/alegreya-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Alegreya Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/alegreya-sans-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Alegreya Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/alegreya-sans-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Alegreya Sans"; font-style: normal; font-weight: 800; font-display: swap; src: url("/assets/fonts/alegreya-sans-latin-800-normal.woff2") format("woff2"); }

/* ---------- Tokens ---------- */
:root {
  --paper: #EDEEE8;
  --paper-deep: #E1E2D9;
  --ink: #2A2622;
  --ink-soft: #5C554D;
  --burn: #3B2A1E;
  --olive: #4E5E38;
  --olive-deep: #38452A;
  --oak: #A15C26;
  --oak-light: #E0A66A;
  --line: #C9CABF;

  --serif: "Alegreya", Georgia, "Times New Roman", serif;
  --sans: "Alegreya Sans", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --step-small: 0.875rem;   /* 14 */
  --step-body: 1.125rem;    /* 18 */
  --step-lead: 1.3125rem;   /* 21 */
  --step-h3: 1.5rem;        /* 24 */
  --step-h2: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);   /* 24 to 36 */
  --step-h1: clamp(2rem, 1.3rem + 2.6vw, 3rem);         /* 32 to 48 */

  --gutter: clamp(1rem, 4vw, 2.5rem);
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: clamp(3rem, 6vw, 5rem);
  --gap: clamp(0.5rem, 1.2vw, 0.875rem);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: var(--step-body);
  line-height: 1.6;
  font-variant-numeric: oldstyle-nums proportional-nums;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
picture { display: contents; }
/* With <picture> as display: contents its <source> elements would otherwise
   become grid/flex items in layouts like the concept pair. */
picture > source { display: none; }
a { color: var(--olive); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--ink); text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--oak); outline-offset: 3px; border-radius: 2px; }
h1, h2, h3 { font-family: var(--serif); font-weight: 500; line-height: 1.2; color: var(--burn); margin: 0 0 var(--space-2); text-wrap: balance; }
h1 { font-size: var(--step-h1); letter-spacing: -0.005em; }
h2 { font-size: var(--step-h2); }
h3 { font-size: var(--step-h3); }
p { margin: 0 0 var(--space-2); }
main { display: block; }
main:focus { outline: none; }

.wrap { width: min(100% - 2 * var(--gutter), 80rem); margin-inline: auto; }
.visually-hidden {
  position: absolute !important; 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: var(--gutter); top: -4rem; z-index: 100;
  background: var(--ink); color: var(--paper); padding: 0.6rem 1rem;
  font-family: var(--sans); font-weight: 500; text-decoration: none;
}
.skip-link:focus { top: 0.75rem; color: var(--paper); }

.prose > * { max-width: 38rem; }
.prose p { text-wrap: pretty; }

/* ---------- Brand mark ---------- */
.brand-mark .brand-arc { font-family: var(--sans); font-weight: 500; font-size: 27px; letter-spacing: 1.5px; }
.brand-mark .brand-word { font-family: var(--sans); font-weight: 800; font-size: 62px; letter-spacing: -0.5px; }

/* ---------- Header + navigation ---------- */
.site-header { padding-block: clamp(1rem, 2.5vw, 1.75rem); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.brand { color: var(--burn); display: block; width: clamp(7.25rem, 11vw, 9.5rem); flex: none; border-radius: 50%; }
.brand:hover { color: var(--olive); }

.site-nav { font-family: var(--sans); font-size: 1.0625rem; font-weight: 500; }
.nav-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem clamp(0.75rem, 1.6vw, 1.5rem); }
.nav-item { position: relative; display: flex; align-items: center; }
.nav-item > a { color: var(--ink); text-decoration: none; padding: 0.4rem 0; border-bottom: 2px solid transparent; }
.nav-item > a:hover { color: var(--olive); border-bottom-color: currentColor; }
.nav-item.is-current > a { color: var(--olive); border-bottom-color: currentColor; }

.sub-toggle {
  display: inline-grid; place-items: center; width: 1.75rem; height: 1.75rem; margin-left: 0.1rem;
  border: 0; background: none; color: var(--ink-soft); cursor: pointer; border-radius: 2px; padding: 0;
}
.sub-toggle svg { width: 0.75rem; height: 0.5rem; transition: transform 0.15s ease; }
.sub-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.sub-list {
  list-style: none; margin: 0; padding: 0.5rem 0;
  position: absolute; top: 100%; left: -1rem; z-index: 20; min-width: 17rem;
  background: var(--paper); border: 1px solid var(--line); box-shadow: 0 0.75rem 2rem rgb(42 38 34 / 0.12);
  display: none;
}
.sub-list a { display: block; padding: 0.45rem 1rem; color: var(--ink); text-decoration: none; }
.sub-list a:hover, .sub-list a[aria-current="page"] { color: var(--olive); background: var(--paper-deep); }
.has-sub:hover > .sub-list,
.has-sub:focus-within > .sub-list,
.sub-toggle[aria-expanded="true"] + .sub-list { display: block; }
.js .has-sub:focus-within > .sub-list { display: none; }
.js .has-sub:hover > .sub-list,
.js .sub-toggle[aria-expanded="true"] + .sub-list { display: block; }
@media (min-width: 64rem) {
  .js .has-sub.hover-off:hover > .sub-toggle[aria-expanded="false"] + .sub-list { display: none; }
}

.nav-toggle {
  display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.55rem 0.9rem;
  font: inherit; color: var(--ink); background: transparent; border: 1px solid var(--line); border-radius: 2px; cursor: pointer;
}
.nav-toggle-bars, .nav-toggle-bars::before, .nav-toggle-bars::after {
  display: block; width: 1.1rem; height: 2px; background: currentColor; position: relative;
}
.nav-toggle-bars::before, .nav-toggle-bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle-bars::before { top: -6px; }
.nav-toggle-bars::after { top: 6px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::after { top: 0; transform: rotate(-45deg); }

/* Phone/tablet: collapsible menu (only when JS is running; without JS the
   list simply wraps under the brand). */
@media (max-width: 63.99rem) {
  .js .site-nav { margin-left: auto; }
  .js .nav-list {
    display: none; position: absolute; left: 0; right: 0; top: 100%; z-index: 30;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--paper); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
    padding: 0.5rem var(--gutter) 1rem; box-shadow: 0 1rem 2rem rgb(42 38 34 / 0.12);
  }
  .js .site-nav.is-open .nav-list { display: flex; }
  .js .nav-item { flex-wrap: wrap; border-bottom: 1px solid var(--line); }
  .js .nav-item:last-child { border-bottom: 0; }
  .js .nav-item > a { flex: 1; padding: 0.8rem 0; border-bottom: 0; font-size: 1.125rem; }
  .js .nav-item.is-current > a { border-bottom: 0; }
  .js .sub-toggle { display: none; }
  .js .sub-list, .js .has-sub:hover > .sub-list, .js .has-sub:focus-within > .sub-list {
    display: block; position: static; width: 100%; min-width: 0; border: 0; box-shadow: none;
    padding: 0 0 0.6rem 1rem; background: transparent;
  }
  .js .sub-list a { padding: 0.4rem 0; }
  .js .sub-list a:hover, .js .sub-list a[aria-current="page"] { background: transparent; }
  .site-header { position: relative; }
}
@media (min-width: 64rem) {
  .nav-toggle { display: none !important; }
}

/* ---------- Photo rows (shared by the home showcase and galleries) ----------
   Each tile's flex-basis and flex-grow are its aspect ratio, so a row's tiles
   grow by the same factor: equal heights, full width, nothing cropped. The
   ::after filler stops the last row from stretching. */
.photo-grid, .showcase-row {
  --row-h: clamp(9rem, 20vw, 15rem);
  display: flex; flex-wrap: wrap; gap: var(--gap); align-items: flex-start;
}
.photo-grid::after, .showcase-row::after { content: ""; flex: 1000 1 0; }
.tile { margin: 0; flex: var(--ar) 1 calc(var(--ar) * var(--row-h)); min-width: 0; }
.tile > a { display: block; background: var(--paper-deep); }
.tile img { width: 100%; aspect-ratio: var(--ar); object-fit: cover; }
.tile figcaption {
  font-family: var(--sans); font-size: 0.9375rem; line-height: 1.35; color: var(--ink-soft);
  padding: 0.4rem 0.1rem 0.6rem; overflow-wrap: anywhere;
}
.tile > a:hover img { filter: brightness(1.04) contrast(1.02); }

/* ---------- Home ---------- */
.showcase { padding-top: clamp(0.25rem, 1.5vw, 1rem); }
.showcase-row { --row-h: clamp(8rem, 30vw, 19rem); }
.showcase-row::after { display: none; }
/* Desktop: the four curated photos always share one row (shrinking keeps
   their heights equal because flex-shrink is weighted by flex-basis). */
@media (min-width: 48rem) {
  .showcase-row { flex-wrap: nowrap; }
}

.intro {
  display: grid; gap: var(--space-4); padding-block: var(--space-5) var(--space-4);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 52rem) {
  .intro { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; }
}
.statement { font-size: var(--step-h1); margin: 0; max-width: 18em; }
.qualities { list-style: none; margin: 0; padding: 0; font-size: var(--step-lead); font-style: italic; color: var(--ink); }
.qualities li { padding: 0.65rem 0; border-top: 1px solid var(--line); line-height: 1.35; }
.qualities li:last-child { border-bottom: 1px solid var(--line); }

.collections { padding-bottom: var(--space-5); }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-3); }
.section-head h2 { margin: 0; }
.quiet-link { font-family: var(--sans); font-weight: 500; }
.collection-grid {
  list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4) var(--space-3);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15.5rem), 1fr));
}
.collection-card { display: grid; gap: 0.15rem; color: var(--ink); text-decoration: none; }
.collection-photo { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--paper-deep); margin-bottom: 0.6rem; }
.collection-photo img { width: 100%; height: 100%; object-fit: cover; }
.collection-title { font-size: 1.3125rem; font-weight: 500; color: var(--burn); line-height: 1.25; }
.collection-count { font-family: var(--sans); font-size: var(--step-small); color: var(--ink-soft); }
.collection-card:hover .collection-title { color: var(--olive); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }

/* ---------- Gallery pages ---------- */
.gallery-layout {
  display: grid; gap: var(--space-3) var(--space-5); padding-block: var(--space-3) var(--space-5);
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "crumb" "intro" "photos" "nav";
}
.gallery-layout.is-index { grid-template-areas: "intro" "nav" "photos"; }
@media (min-width: 56rem) {
  .gallery-layout, .gallery-layout.is-index {
    grid-template-columns: minmax(0, 1fr) minmax(14rem, 18rem);
    grid-template-areas: "crumb crumb" "intro nav" "photos photos";
    align-items: start;
  }
  .gallery-layout.is-index { grid-template-columns: minmax(0, 1fr); grid-template-areas: "intro" "nav" "photos"; }
  .is-index .collection-nav ul { columns: 2 16rem; column-gap: var(--space-5); max-width: 44rem; border-top: 0; }
  .is-index .collection-nav li { break-inside: avoid; }
  .gallery-photos { margin-top: var(--space-2); }
}
.gallery-layout .breadcrumb { grid-area: crumb; }
.gallery-intro { grid-area: intro; }
.collection-nav { grid-area: nav; }
.gallery-photos { grid-area: photos; min-width: 0; }
.breadcrumb { font-family: var(--sans); font-size: var(--step-small); }
.breadcrumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.breadcrumb li + li::before { content: "/"; color: var(--ink-soft); margin-right: 0.4rem; }
.breadcrumb a[aria-current="page"] { color: var(--ink-soft); text-decoration: none; }
.gallery-intro h1 { margin-bottom: var(--space-3); }

.collection-nav { font-family: var(--sans); }
.collection-nav h2 { font-family: var(--sans); font-size: 1rem; font-weight: 700; color: var(--ink-soft); margin: 0 0 0.5rem; }
.collection-nav ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.collection-nav li { border-bottom: 1px solid var(--line); }
.collection-nav a {
  display: flex; justify-content: space-between; gap: 1rem; padding: 0.5rem 0.25rem 0.5rem 0.75rem;
  color: var(--ink); text-decoration: none; border-left: 3px solid transparent;
}
.collection-nav a:hover { color: var(--olive); background: var(--paper-deep); }
.collection-nav a[aria-current="page"] { border-left-color: var(--olive); color: var(--olive); font-weight: 700; }
.collection-nav .count { color: var(--ink-soft); font-weight: 400; font-variant-numeric: lining-nums tabular-nums; }

/* ---------- Plain pages ---------- */
.page-article { padding-block: var(--space-3) var(--space-5); }

/* ---------- 404 page ----------
   The inlaid plaque picture beside the text on wide screens, above it on
   narrow ones. The picture's background is pure white, so multiply turns it
   into the page colour and leaves just the plaque and its own shadow. */
.not-found {
  display: grid; gap: var(--space-3) var(--space-5); align-items: center;
  padding-block: var(--space-4) var(--space-5);
}
@media (min-width: 48rem) {
  .not-found { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
}
.plaque-404 { display: block; width: 100%; max-width: 20rem; height: auto; mix-blend-mode: multiply; }
@media (min-width: 48rem) {
  .plaque-404 { max-width: 30rem; } /* the column is never wider than this */
}
.not-found-text h1 { margin-bottom: var(--space-2); }

/* ---------- Text pages: Articles, Timber, For sale, Commissions, ... ----------
   Each entry puts Kim's text beside its photo on wide screens and stacks
   them on narrow ones. Photos never grow past their real size. */
.entries-head { padding-block: var(--space-3); }
.entries-head h1 { margin-bottom: var(--space-2); }
.lead { font-size: var(--step-lead); line-height: 1.5; max-width: 36rem; }
.jump-list ul {
  list-style: none; margin: var(--space-3) 0 0; padding: var(--space-2) 0 0; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 0.4rem 1.5rem; font-family: var(--sans); font-weight: 500;
}
.entries { padding-bottom: var(--space-5); }
.entry {
  display: grid; gap: var(--space-3) var(--space-5); grid-template-columns: minmax(0, 1fr);
  padding-block: var(--space-4); border-top: 1px solid var(--line); scroll-margin-top: 1rem;
}
.entries > .entry:first-child { border-top: 0; padding-top: var(--space-2); }
.page-entries .entries-head + .wrap .photo-grid { margin-bottom: var(--space-3); }
@media (min-width: 64rem) {
  .entry { grid-template-columns: minmax(0, 38rem) minmax(0, 1fr); align-items: start; }
  .entry-figure { padding-top: 0.4rem; }
}
.entry-figure { margin: 0; min-width: 0; }
.entry-figure > img, .entry-figure > picture > img { width: auto; max-width: 100%; }
.entry-figure figcaption, .concept-pair figcaption {
  font-family: var(--sans); font-size: 0.9375rem; color: var(--ink-soft); margin-top: 0.5rem;
}
.signoff { font-style: italic; color: var(--ink-soft); }
.entry-closing { margin: 0; padding-block: var(--space-4) 0; border-top: 1px solid var(--line); scroll-margin-top: 1rem; }
.entry-closing img { width: auto; max-width: 100%; }
.prose ul { padding-left: 1.25rem; }
.prose li { margin-bottom: 0.35rem; }
.timber-columns { columns: 2 11rem; column-gap: var(--space-4); }
.timber-columns li { break-inside: avoid; }
.concept-images { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); max-width: 40rem; }
.concept-images img { width: 100%; }
.contact-list { list-style: none; padding: 0; margin: var(--space-3) 0 0; border-top: 1px solid var(--line); }
.contact-list li { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; padding: 0.7rem 0; margin: 0; border-bottom: 1px solid var(--line); font-size: 1.25rem; }
.contact-label { font-family: var(--sans); font-size: 1rem; font-weight: 700; color: var(--ink-soft); min-width: 5rem; padding-top: 0.2rem; }
.page-photos { padding-bottom: var(--space-5); }

/* ---------- Contact band ---------- */
.contact-band { background: var(--olive-deep); color: var(--paper); padding-block: var(--space-5); }
.contact-band-inner { display: grid; gap: var(--space-3) var(--space-5); grid-template-columns: minmax(0, 1fr); align-items: center; }
@media (min-width: 56rem) { .contact-band-inner { grid-template-columns: minmax(0, 1fr) auto; } }
.contact-band h2 { color: var(--paper); margin-bottom: var(--space-1); }
.contact-band p { max-width: 36rem; margin: 0; }
.contact-band :focus-visible { outline-color: var(--oak-light); }
.contact-actions { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.action {
  display: grid; gap: 0.1rem; padding: 0.8rem 1.25rem; min-width: 12rem;
  color: var(--paper); text-decoration: none; border: 1px solid rgb(237 238 232 / 0.45); border-radius: 2px;
}
.action:hover { color: var(--paper); background: rgb(237 238 232 / 0.1); border-color: var(--paper); }
.action .action-label { font-family: var(--sans); font-size: var(--step-small); font-weight: 500; opacity: 0.85; }
.action .contact-text { font-size: 1.25rem; font-variant-numeric: lining-nums; overflow-wrap: anywhere; }

/* ---------- Footer ---------- */
.site-footer { background: var(--paper-deep); padding-block: var(--space-5) var(--space-4); font-size: 1rem; }
.footer-inner { display: grid; gap: var(--space-4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 48rem) { .footer-inner { grid-template-columns: 10rem minmax(0, 1fr); } .footer-meta { grid-column: 2; } }
@media (min-width: 72rem) { .footer-inner { grid-template-columns: 11rem minmax(0, 1fr) 15rem; } .footer-meta { grid-column: auto; } }
.footer-brand { color: var(--burn); width: clamp(8rem, 30vw, 11rem); }
.footer-timbers h2 { font-family: var(--sans); font-size: 1rem; font-weight: 700; color: var(--ink-soft); margin-bottom: 0.4rem; }
.timber-list { font-size: clamp(1.25rem, 1rem + 1vw, 1.6rem); font-style: italic; color: var(--burn); line-height: 1.4; max-width: 34em; margin-bottom: var(--space-2); }
.footer-meta { font-family: var(--sans); color: var(--ink-soft); }
.footer-meta strong { color: var(--ink); font-weight: 700; }
.copyright { font-size: var(--step-small); }

/* ---------- Lightbox caption (PhotoSwipe) ---------- */
.pswp__custom-caption {
  position: absolute; left: 50%; bottom: 1rem; transform: translateX(-50%);
  width: min(100% - 2rem, 44rem); text-align: center;
  font-family: var(--sans); font-size: 1rem; line-height: 1.4; color: #f3f2ee;
}
.pswp__custom-caption[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}