/* C. Williams Furniture, version A2: Big Tree Country workshop, refined */
@font-face { font-family: "Alegreya"; src: url(/fonts/alegreya.woff2) format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Alegreya Sans"; src: url(/fonts/alegreya-sans-400.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Alegreya Sans"; src: url(/fonts/alegreya-sans-700.woff2) format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

@font-face { font-family: "Alegreya Fallback"; src: local("Georgia"); size-adjust: 91.7%; }
@font-face { font-family: "Alegreya Sans Fallback"; src: local("Arial"), local("Helvetica"); size-adjust: 86.6%; }

:root {
  /* Big Tree Country: Douglas fir and spruce, autumn larch, birch bark, Tay slate */
  --paper: #eef0eb;      /* birch bark */
  --lichen: #dfe6df;     /* lichen on a dyke */
  --moss-deep: #13302a;  /* fir, the dark band colour */
  --moss: #1f4a40;       /* spruce */
  --moss-soft: #9fb8ad;
  --slate: #2b4654;      /* Tay slate */
  --oak: #9c5419;        /* larch in October, buttons */
  --oak-deep: #7a3f10;
  --oak-light: #e3a861;  /* larch on dark grounds */
  --ink: #16211d;
  --ink-soft: #44524c;
  --on-dark: #d6e2db;
  --rule: #c3ccc4;
  --serif: "Alegreya", "Alegreya Fallback", Georgia, serif;
  --sans: "Alegreya Sans", "Alegreya Sans Fallback", Arial, sans-serif;
  --g: clamp(16px, 4vw, 56px);
  --wide: 1240px;
  --grain: image-set(url(/img/wood-grain-knot-close-up-960.webp) 1x, url(/img/wood-grain-knot-close-up-1600.webp) 2x);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 1.125rem/1.6 var(--sans); overflow-x: hidden; }
img { display: block; max-width: 100%; height: auto; }
picture { display: block; }
a { color: var(--oak-deep); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--oak); }
:focus-visible { outline: 3px solid var(--oak-light); outline-offset: 3px; }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.08; letter-spacing: -.01em; margin: 0 0 .5em; text-wrap: balance; color: inherit; }
h1 { font-size: clamp(2.3rem, 1.4rem + 3.6vw, 4.4rem); }
h2 { font-size: clamp(1.8rem, 1.3rem + 2vw, 3rem); }
h3 { font-size: 1.35rem; }
p { margin: 0 0 1em; max-width: 38rem; }
figure { margin: 0; }
figcaption { font-size: .95rem; color: var(--ink-soft); margin-top: .6rem; max-width: 40rem; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--paper); padding: 8px 12px; z-index: 50; }
.skip:focus { left: 8px; }

/* buttons */
.btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 1.5rem; }
.btn { display: inline-flex; align-items: center; min-height: 48px; padding: 0 22px; border-radius: 2px; font-weight: 700; text-decoration: none; font-size: 1.05rem; transition: background-color .2s, color .2s, border-color .2s; }
.btn-oak { background: var(--oak); color: var(--paper); }
.btn-oak:hover { background: var(--oak-deep); color: var(--paper); }
.btn-line { border: 1.5px solid var(--ink); color: var(--ink); }
.btn-line:hover { background: var(--ink); color: var(--paper); }
.btn-line-light { border: 1.5px solid var(--paper); color: var(--paper); }
.btn-line-light:hover { background: var(--paper); color: var(--moss-deep); }
.arrow { font-weight: 700; text-decoration: none; border-bottom: 1.5px solid currentColor; }
.arrow::after { content: " \2192"; }

/* header */
.top { display: flex; align-items: center; gap: 24px; padding: 14px var(--g); background: var(--paper); position: relative; z-index: 5; }
.brand img { width: auto; height: 46px; }
.menu-wide { display: none; margin-left: auto; }
.menu-wide ul, .menu nav ul { list-style: none; margin: 0; padding: 0; }
.menu-wide ul { display: flex; gap: 22px; }
.menu-wide a, .menu a { color: var(--ink); text-decoration: none; font-size: 1.02rem; }
.menu-wide a:hover, .menu-wide a[aria-current] { color: var(--oak-deep); text-decoration: underline; }
.top-tel { display: none; font-weight: 700; color: var(--ink); text-decoration: none; white-space: nowrap; }
.menu { margin-left: auto; }
.menu summary { list-style: none; cursor: pointer; min-height: 44px; display: flex; align-items: center; padding: 0 14px; border: 1.5px solid var(--ink); font-weight: 700; }
.menu summary::-webkit-details-marker { display: none; }
.menu[open] summary { background: var(--ink); color: var(--paper); }
.menu nav { position: absolute; left: 0; right: 0; top: 100%; background: var(--moss-deep); padding: 8px var(--g) 20px; }
.menu nav a { display: block; color: var(--paper); padding: 12px 0; font-family: var(--serif); font-size: 1.4rem; border-bottom: 1px solid var(--moss); }
@media (min-width: 1080px) {
  .menu { display: none; }
  .menu-wide { display: block; }
  .top-tel { display: inline; }
  .brand img { height: 54px; }
}

/* hero: fir band, words left, a framed photo set on a grain panel right.
   Photos are shown at or below their real size so they stay sharp. */
.hero { background: var(--moss-deep); color: var(--paper); display: grid; overflow: hidden; }
.hero-text { padding: 36px var(--g) 36px; }
.hero h1 { font-size: clamp(2.2rem, 1.5rem + 2.6vw, 3.7rem); max-width: 15ch; }
.hero .lede { font-size: 1.2rem; color: var(--on-dark); max-width: 33rem; }
.hero-art { position: relative; padding: 4px calc(var(--g) + 10px) 44px; }
@media (max-width: 899px) { .hero-frame { outline-offset: 7px; } }
.hero-grain { position: absolute; inset: 56px 0 0 0; background: linear-gradient(90deg, rgba(19,48,42,.8), rgba(19,48,42,.38)), var(--grain) 30% 50% / cover; }
.hero-frame { position: relative; margin: 0; max-width: 600px; box-shadow: 0 18px 40px rgba(6,20,16,.45); outline: 1px solid rgba(227,168,97,.55); outline-offset: 10px; }
.hero-frame img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.hero-detail { display: none; }
@media (min-width: 900px) {
  .hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; min-height: 600px; }
  .hero-text { padding: 72px 24px 80px max(var(--g), calc((100vw - var(--wide)) / 2)); }
  .hero-art { align-self: stretch; display: flex; align-items: center; padding: 64px var(--g) 64px 0; }
  .hero-grain { inset: 0 0 0 22%; }
  .hero-frame { width: 100%; max-width: 560px; }
  .hero-detail { display: block; position: absolute; width: 168px; right: max(var(--g), 6%); bottom: 34px; border: 6px solid var(--paper); box-shadow: 0 10px 24px rgba(6,20,16,.4); }
  .hero-detail img { width: 100%; aspect-ratio: 1; object-fit: cover; }
}
@media (min-width: 1280px) { .hero-art { padding-right: max(var(--g), calc((100vw - var(--wide)) / 2)); } }

/* home: opening split with bleeding photo */
.opening { display: grid; gap: 32px; padding: clamp(48px, 8vw, 120px) 0 clamp(48px, 8vw, 120px); }
.opening-text { padding: 0 var(--g); }
.opening-img img { width: 100%; height: 100%; object-fit: cover; max-height: 760px; }
@media (min-width: 900px) {
  .opening { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 64px; align-items: stretch; }
  .opening-text { padding-right: 0; padding-left: calc(var(--g) + 4vw); align-self: center; }
}

/* before/after proof block */
.proof { padding: clamp(56px, 8vw, 110px) var(--g); background: var(--lichen); }
.proof > h2, .proof-lede { max-width: 1000px; margin-left: auto; margin-right: auto; }
.proof-lede { max-width: 1000px; }
.proof .ba { max-width: 1000px; margin: 28px auto 0; }

/* before/after component */
.ba-frame { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ba-layer { position: relative; }
.ba-tag { position: absolute; top: 10px; left: 10px; background: var(--moss-deep); color: var(--paper); font-size: .9rem; font-weight: 700; padding: 3px 10px; }
.js .ba .ba-frame { display: block; position: relative; aspect-ratio: var(--ar); overflow: hidden; background: var(--moss-deep); touch-action: pan-y; }
.js .ba .ba-layer { position: absolute; inset: 0; }
.js .ba .ba-layer img { width: 100%; height: 100%; object-fit: cover; }
.js .ba .ba-after { clip-path: inset(0 0 0 var(--pos, 50%)); }
.js .ba .ba-after .ba-tag { left: auto; right: 10px; }
.ba-handle { position: absolute; top: 0; bottom: 0; left: var(--pos, 50%); width: 2px; margin-left: -1px; background: var(--paper); pointer-events: none; box-shadow: 0 0 0 1px rgba(29,37,32,.25); }
.ba-knob { position: absolute; top: 50%; left: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; background: var(--paper); box-shadow: 0 2px 10px rgba(29,37,32,.35); }
.ba-knob::before, .ba-knob::after { content: ""; position: absolute; top: 50%; width: 0; height: 0; border: 7px solid transparent; margin-top: -7px; }
.ba-knob::before { left: 5px; border-right-color: var(--oak); }
.ba-knob::after { right: 5px; border-left-color: var(--oak); }
.ba-range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; touch-action: pan-y; -webkit-appearance: none; appearance: none; }
.ba-range::-webkit-slider-thumb { -webkit-appearance: none; width: 48px; height: 600px; }
.ba-range::-moz-range-thumb { width: 48px; height: 600px; border: 0; }
.ba-frame:has(.ba-range:focus-visible) .ba-knob { outline: 3px solid var(--oak-light); outline-offset: 3px; }

/* home: the four services as an index, small sharp thumbnails */
.services { padding: clamp(56px, 8vw, 110px) var(--g); max-width: calc(var(--wide) + 2 * var(--g)); margin: 0 auto; }
.services > p { color: var(--ink-soft); }
.svc { list-style: none; margin: 28px 0 0; padding: 0; border-top: 1px solid var(--ink); }
.svc a { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 4px 18px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--rule); color: var(--ink); text-decoration: none; }
.svc-thumb { grid-row: 1 / 3; overflow: hidden; }
.svc-thumb img { width: 92px; height: 92px; object-fit: cover; transition: transform .5s cubic-bezier(.22,1,.36,1); }
.svc-name { font-family: var(--serif); font-weight: 600; font-size: 1.45rem; line-height: 1.1; align-self: end; }
.svc-line { color: var(--ink-soft); font-size: 1rem; line-height: 1.4; align-self: start; }
.svc-go { display: none; }
.svc a:hover .svc-name { color: var(--oak-deep); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .15em; }
.svc a:hover img { transform: scale(1.05); }
@media (min-width: 900px) {
  .svc a { grid-template-columns: 168px minmax(0, 1fr) minmax(0, 1.2fr) 40px; gap: 40px; padding: 22px 0; }
  .svc-thumb { grid-row: auto; }
  .svc-thumb img { width: 168px; height: 112px; }
  .svc-name { font-size: 2rem; align-self: center; }
  .svc-line { font-size: 1.08rem; align-self: center; }
  .svc-go { display: block; font-size: 1.6rem; color: var(--oak); justify-self: end; transition: transform .3s; }
  .svc a:hover .svc-go { transform: translateX(6px); }
}

/* timber heritage band, the section Ron liked: fir ground, grain in a green duotone */
.timber { background: var(--moss-deep); color: var(--paper); display: grid; position: relative; overflow: hidden; }
.timber-img img { width: 100%; height: 240px; object-fit: cover; opacity: .62; }
.timber-text { padding: 44px var(--g) clamp(56px, 8vw, 110px); position: relative; }
.timber-text h2 { max-width: 16ch; }
.timber-text p { color: var(--on-dark); }
.timber .cols p { break-inside: avoid; }
.timber .cols { border-top: 1px solid rgba(227,168,97,.45); padding-top: 24px; margin-top: 8px; }
.timber-places { font-family: var(--serif); font-size: 1.25rem; line-height: 1.45; color: var(--paper) !important; max-width: 46rem !important; margin-top: 1.4em; }
.timber-places a { color: var(--oak-light); }
.timber-places a:hover { color: var(--paper); }
@media (min-width: 900px) {
  .timber { grid-template-columns: 1.55fr 1fr; }
  .timber-img { order: 2; }
  .timber-img img { height: 100%; -webkit-mask-image: linear-gradient(90deg, transparent, #000 40%); mask-image: linear-gradient(90deg, transparent, #000 40%); opacity: .75; }
  .timber-text { padding: clamp(72px, 9vw, 130px) 0 clamp(72px, 9vw, 130px) max(var(--g), calc((100vw - var(--wide)) / 2)); }
  .timber .cols { column-count: 2; column-gap: 44px; }
}

/* reviews: compact, heading left, three short quotes right */
.voices { padding: clamp(56px, 8vw, 100px) var(--g); max-width: calc(var(--wide) + 2 * var(--g)); margin: 0 auto; display: grid; gap: 20px 72px; }
.voices h2 { font-size: clamp(1.7rem, 1.3rem + 1.5vw, 2.5rem); max-width: 14ch; }
.voices-note { color: var(--ink-soft); }
.voices-note a { white-space: nowrap; }
.quotes { margin: 0; padding: 0; list-style: none; }
.quotes { border-top: 1px solid var(--ink); }
.quotes blockquote { margin: 0; padding: 20px 0; border-bottom: 1px solid var(--rule); }
.quotes p { font-family: var(--serif); font-size: 1.35rem; line-height: 1.3; margin: 0; color: var(--moss-deep); max-width: none; }
.quotes footer { font-size: .95rem; color: var(--ink-soft); margin-top: 6px; }
@media (min-width: 900px) { .voices { grid-template-columns: 1fr 1.7fr; align-items: start; } }

/* send a photo: lichen band, words, checklist and one small framed example */
.send { background: var(--lichen); padding: clamp(56px, 8vw, 110px) var(--g); }
.send-in { max-width: var(--wide); margin: 0 auto; display: grid; gap: 32px; }
.send-list { background: var(--paper); padding: 26px 26px 14px; border-top: 3px solid var(--oak); }
.send-list h3 { font-size: 1.3rem; }
.shots { padding-left: 1.3em; margin: 0 0 1em; }
.shots li { margin-bottom: .5em; padding-left: .2em; }
.shots li::marker { color: var(--oak); font-weight: 700; }
.send-pic { max-width: 300px; }
.send-pic img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
@media (min-width: 900px) {
  .send-in { grid-template-columns: 1.25fr 1fr 0.7fr; gap: 48px; align-items: start; }
  .send-pic { margin-top: 8px; }
}

/* intro split + aside list */
.intro-split { display: grid; gap: 36px; padding: clamp(56px, 8vw, 110px) var(--g); max-width: calc(var(--wide) + 2 * var(--g)); margin: 0 auto; }
.suits { border-top: 3px solid var(--oak); padding-top: 18px; }
.suits ul { list-style: none; padding: 0; margin: 0; }
.suits li { padding: 10px 0; border-bottom: 1px solid var(--rule); }
@media (min-width: 900px) { .intro-split { grid-template-columns: 1.6fr 1fr; gap: 80px; align-items: start; } }

/* horizontal filmstrip */
.strip { padding: 0 0 clamp(56px, 8vw, 110px); }
.strip h2, .strip-hint { padding: 0 var(--g); }
.strip-hint { color: var(--ink-soft); }
.strip-list { list-style: none; margin: 0; padding: 8px var(--g) 18px; display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--g); scrollbar-color: var(--moss) transparent; }
.strip-list li { flex: 0 0 auto; scroll-snap-align: start; }
.strip-list img { height: clamp(300px, 52vh, 520px); width: auto; max-width: none; }
.strip-list figcaption { max-width: 22rem; }

/* comparison table */
.compare, .dist { padding: clamp(56px, 8vw, 110px) var(--g); max-width: calc(980px + 2 * var(--g)); margin: 0 auto; }
.table-wrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 1.02rem; }
caption { caption-side: bottom; text-align: left; color: var(--ink-soft); font-size: .95rem; padding-top: 12px; }
th, td { text-align: left; vertical-align: top; padding: 14px 16px 14px 0; border-bottom: 1px solid var(--rule); }
thead th { font-family: var(--serif); font-size: 1.25rem; font-weight: 600; border-bottom: 2px solid var(--ink); }
tbody th { font-weight: 700; }
.dist td { font-variant-numeric: tabular-nums; }

/* restoration: problems */
.problems { padding: clamp(56px, 8vw, 110px) var(--g); max-width: calc(var(--wide) + 2 * var(--g)); margin: 0 auto; }
.problems dl { display: grid; gap: 8px 48px; margin: 28px 0 0; }
.problems dl > div { border-top: 1px solid var(--rule); padding: 18px 0; }
.problems dt { font-family: var(--serif); font-weight: 600; font-size: 1.4rem; margin-bottom: 4px; }
.problems dd { margin: 0; color: var(--ink-soft); }
@media (min-width: 700px) { .problems dl { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .problems dl { grid-template-columns: 1.3fr 1fr 1fr; } }

/* stacked sliders */
.stack { background: var(--lichen); padding: clamp(56px, 8vw, 110px) var(--g); }
.stack > h2 { max-width: var(--wide); margin-left: auto; margin-right: auto; }
.stack .ba { max-width: var(--wide); margin: 36px auto 0; }
@media (min-width: 900px) {
  .stack .ba { width: 64%; margin-left: max(0px, calc((100% - var(--wide)) / 2)); }
  .stack .ba-right { margin-left: auto; margin-right: max(0px, calc((100% - var(--wide)) / 2)); }
  .stack .ba-narrow { width: 38%; margin-left: 18%; }
}

/* restoration details grid */
.details { padding: clamp(56px, 8vw, 110px) var(--g); max-width: calc(var(--wide) + 2 * var(--g)); margin: 0 auto; }
.details-grid { display: grid; gap: 28px; margin-top: 28px; }
.details-grid img { width: 100%; object-fit: cover; }
@media (min-width: 900px) {
  .details-grid { grid-template-columns: repeat(12, 1fr); gap: 36px 28px; align-items: end; }
  .d1 { grid-column: 1 / 8; } .d1 img { aspect-ratio: 16/9; }
  .d2 { grid-column: 8 / 13; } .d2 img { aspect-ratio: 4/3; }
  .d3 { grid-column: 2 / 6; } .d3 img { aspect-ratio: 4/3; }
  .d4 { grid-column: 6 / 13; } .d4 img { aspect-ratio: 16/10; }
}

/* chair page */
.jump { padding: 0 var(--g); margin-top: 32px; }
.jump ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 26px; }
.jump a { font-family: var(--serif); font-size: 1.35rem; font-weight: 600; }
@media (min-width: 900px) { .jump { margin-top: 100px; } }
.mat { padding: clamp(56px, 8vw, 110px) var(--g); display: grid; gap: 32px; max-width: calc(var(--wide) + 2 * var(--g)); margin: 0 auto; }
.mat-pics { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.mat-pics img { width: 100%; aspect-ratio: 4/5; object-fit: cover; }
.mat-b { max-width: none; background: var(--moss-deep); color: var(--paper); }
.mat-b p, .mat-b figcaption { color: var(--on-dark); }
.mat-wide img { width: 100%; }
.mat-small { margin-top: 24px; max-width: 26rem; }
.mat-tall img { width: 100%; max-height: 640px; object-fit: cover; }
@media (min-width: 900px) {
  .mat-a { grid-template-columns: 1.1fr 1fr; grid-template-areas: "t s" "p s"; column-gap: 64px; align-items: start; }
  .mat-a .mat-text { grid-area: t; } .mat-a .ba { grid-area: s; } .mat-a .mat-pics { grid-area: p; }
  .mat-b { grid-template-columns: 1.4fr 1fr; gap: 56px; align-items: center; padding-left: var(--g); padding-right: var(--g); }
  .mat-c { grid-template-columns: 1fr 1.1fr; grid-template-areas: "s t" "s p"; column-gap: 64px; align-items: start; }
  .mat-c .mat-text { grid-area: t; } .mat-c .ba { grid-area: s; } .mat-c .mat-pics { grid-area: p; }
  .mat-d { grid-template-columns: 1fr 1fr 0.8fr; gap: 40px; align-items: end; }
}

/* bespoke */
.intro-plain { padding: clamp(56px, 8vw, 110px) var(--g) 24px; max-width: calc(var(--wide) + 2 * var(--g)); margin: 0 auto; }
.twoup { display: grid; gap: 28px; padding: 24px var(--g) clamp(56px, 8vw, 110px); max-width: calc(var(--wide) + 2 * var(--g)); margin: 0 auto; }
.twoup img { width: 100%; object-fit: cover; }
@media (min-width: 900px) {
  .twoup { grid-template-columns: repeat(12, 1fr); gap: 40px 28px; }
  .tu-a { grid-column: 1 / 9; } .tu-a img { aspect-ratio: 4/3; }
  .tu-b { grid-column: 9 / 13; grid-row: 1 / 3; } .tu-b img { height: 100%; max-height: 900px; }
  .tu-c { grid-column: 1 / 5; } .tu-c img { aspect-ratio: 4/3; }
  .tu-d { grid-column: 5 / 9; } .tu-d img { aspect-ratio: 4/3; }
}
.words { background: var(--slate); color: var(--paper); padding: clamp(64px, 9vw, 130px) var(--g); }
.words > * { max-width: 46rem; margin-left: auto; margin-right: auto; }
.words p { font-size: 1.3rem; color: var(--on-dark); }
.cab { display: grid; gap: 32px; padding: clamp(56px, 8vw, 110px) var(--g); max-width: calc(var(--wide) + 2 * var(--g)); margin: 0 auto; }
.cab-img img { width: 100%; max-height: 820px; object-fit: cover; }
.cab-text figure { margin-top: 28px; }
@media (min-width: 900px) { .cab { grid-template-columns: 1fr 1.4fr; gap: 72px; align-items: center; } }

/* work */
.work-head { padding: clamp(48px, 7vw, 100px) var(--g) 24px; max-width: calc(var(--wide) + 2 * var(--g)); margin: 0 auto; }
.work-grid { display: grid; gap: 56px 40px; padding: 24px var(--g) clamp(56px, 8vw, 110px); max-width: calc(var(--wide) + 2 * var(--g)); margin: 0 auto; }
.work-item h2 { font-size: 1.6rem; }
@media (min-width: 900px) {
  .work-grid { grid-template-columns: 1fr 1fr; align-items: start; }
  .work-item.is-portrait .ba { max-width: 78%; }
}
.finished { background: var(--lichen); padding: clamp(56px, 8vw, 110px) var(--g); }
.finished > h2 { max-width: var(--wide); margin: 0 auto 28px; }
.masonry { columns: 1; column-gap: 24px; max-width: var(--wide); margin: 0 auto; }
.masonry figure { break-inside: avoid; margin-bottom: 28px; }
@media (min-width: 640px) { .masonry { columns: 2; } }
@media (min-width: 1000px) { .masonry { columns: 3; } }

/* about */
.about { display: grid; gap: 32px; padding: clamp(48px, 7vw, 100px) var(--g); max-width: calc(var(--wide) + 2 * var(--g)); margin: 0 auto; }
.about-img img { width: 100%; max-height: 780px; object-fit: cover; }
@media (min-width: 900px) { .about { grid-template-columns: 1.3fr 1fr; gap: 72px; align-items: center; } }
.heritage { background: var(--moss-deep); color: var(--paper); }
.heritage h2, .her-cols { padding: 0 var(--g); max-width: calc(var(--wide) + 2 * var(--g)); margin-left: auto; margin-right: auto; }
.heritage h2 { padding-top: clamp(64px, 9vw, 120px); }
.her-cols { display: grid; gap: 4px 48px; padding-bottom: 48px; }
.her-cols p { color: var(--on-dark); }
@media (min-width: 900px) { .her-cols { grid-template-columns: repeat(3, 1fr); } }
.her-img img { width: 100%; height: clamp(240px, 50vh, 560px); object-fit: cover; }
.pointer { padding: clamp(56px, 8vw, 110px) var(--g); max-width: calc(44rem + 2 * var(--g)); margin: 0 auto; }

/* areas */
.areas-head { padding: clamp(48px, 7vw, 100px) var(--g) 0; max-width: calc(980px + 2 * var(--g)); margin: 0 auto; }
.towns { background: var(--lichen); padding: clamp(56px, 8vw, 110px) var(--g); }
.towns > * { max-width: 44rem; margin-left: auto; margin-right: auto; }

/* contact */
.contact { display: grid; gap: 48px; padding: clamp(48px, 7vw, 100px) var(--g); max-width: calc(var(--wide) + 2 * var(--g)); margin: 0 auto; }
.lede-dark { font-size: 1.25rem; color: var(--ink-soft); }
.big-tel { font-family: var(--serif); font-weight: 600; font-size: clamp(2.4rem, 1.5rem + 4vw, 4.4rem); margin: .3em 0 0; line-height: 1; }
.big-tel a { color: var(--moss-deep); text-decoration: none; border-bottom: 3px solid var(--oak); }
.wa { margin-top: 12px; }
.contact-side { background: var(--lichen); padding: 32px clamp(20px, 3vw, 40px); }
@media (min-width: 900px) { .contact { grid-template-columns: 1.2fr 1fr; gap: 72px; align-items: start; } }

/* 404 */
.notfound { position: relative; min-height: 70vh; display: grid; place-items: center; padding: 48px var(--g); background: var(--moss-deep); }
.nf-img { position: absolute; inset: 0; opacity: .45; }
.nf-img img { width: 100%; height: 100%; object-fit: cover; }
.nf-text { position: relative; background: var(--paper); padding: 40px clamp(20px, 4vw, 48px); max-width: 38rem; }

/* footer */
.foot { background: var(--moss-deep); color: var(--on-dark); padding: 64px var(--g) 120px; }
.foot-in { display: grid; gap: 36px; max-width: var(--wide); margin: 0 auto; }
.foot a { color: var(--paper); }
.logo-ink { display: block; width: 260px; aspect-ratio: 640/190; background: var(--paper); -webkit-mask: url(/img/logo-640.png) no-repeat 0 0 / contain; mask: url(/img/logo-640.png) no-repeat 0 0 / contain; margin-bottom: 18px; }
.foot-tel { font-family: var(--serif); font-size: 2rem; font-weight: 600; text-decoration: none; }
.foot-links { list-style: none; padding: 0; margin: 0; columns: 2; column-gap: 24px; }
.foot-links li { margin-bottom: 8px; }
@media (min-width: 900px) { .foot { padding-bottom: 64px; } .foot-in { grid-template-columns: 1.3fr 1fr 1.4fr; } }

/* mobile contact dock */
.dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--moss); padding-bottom: env(safe-area-inset-bottom); }
.dock a { display: flex; align-items: center; justify-content: center; min-height: 56px; font-weight: 700; text-decoration: none; font-size: 1.1rem; }
.dock-call { background: var(--oak); color: var(--paper); }
.dock-text { background: var(--moss-deep); color: var(--paper); }
.dock a:hover { color: var(--paper); }
body { padding-bottom: 56px; }
@media (min-width: 900px) { .dock { display: none; } body { padding-bottom: 0; } }

/* pictures that must fill their box */
.timber-img picture, .opening-img picture, .nf-img picture, .tu-b picture { height: 100%; }

/* A2 additions */
.hero-frame img, .hero-detail img { object-position: var(--pos, 50% 50%); }
.her-img { max-width: var(--wide); margin: 0 auto; padding: 0 var(--g) clamp(56px, 8vw, 100px); }
.her-img img { width: 100%; aspect-ratio: 21 / 9; height: auto !important; object-fit: cover; }
.her-img figcaption { color: var(--on-dark); }

/* page heads without a photo hero (work, areas): a slice of the Big Tree band */
.work-head, .areas-head { max-width: none; margin: 0; background: var(--moss-deep); color: var(--paper); position: relative; overflow: hidden;
  padding: clamp(48px, 7vw, 96px) max(var(--g), calc((100vw - var(--wide)) / 2)) clamp(44px, 6vw, 80px); }
.work-head::after, .areas-head::after { content: ""; position: absolute; inset: 0 0 0 45%; background: var(--grain) 70% 50% / cover; opacity: .6;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 60%); mask-image: linear-gradient(90deg, transparent, #000 60%); }
.work-head > *, .areas-head > * { position: relative; z-index: 1; max-width: 40rem; }
.work-head p, .areas-head p { color: var(--on-dark); }
.areas-head + .dist { padding-top: clamp(48px, 6vw, 80px); }
@media (max-width: 899px) { .work-head::after, .areas-head::after { inset: 0 0 0 55%; opacity: .35; } }
.work-head + .work-grid { padding-top: clamp(40px, 6vw, 72px); }
.work-head h1, .areas-head h1 { max-width: 15ch; }