/* workshop.css — overlay on ../styles.css for the Woodcraft page.
   Same bones as the consulting site, different clothes: serif headings,
   walnut and purpleheart accents, board-stripe rules, softer corners. */

body[data-bg="cream"] {
  --rad: 8px;
  --serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --walnut: #4a2c1a;
  --maple: #e6d3ab;
  --cherry: #a4482e;
  --purple: #5e2750;
  --stripe: linear-gradient(90deg,
    var(--maple) 0 22%, var(--walnut) 22% 34%, var(--purple) 34% 37%, var(--maple) 37% 52%,
    var(--cherry) 52% 58%, var(--walnut) 58% 76%, var(--purple) 76% 79%, var(--maple) 79% 100%);
}

/* ── Shared pieces, re-dressed ────────────────────────────────────────────── */
.sww-band { height: 7px; background: var(--stripe); }
.sws-nav .sws-wm__mark { width: 30px; height: 20px; }
.sws-nav .sws-wm__b { color: var(--purple); }
.sws-nav__links a.is-active { color: var(--purple); }
.sws-nav__cta, .sws-form__submit { background: var(--walnut); }
.sws-sechd { border-bottom: 0; padding-bottom: clamp(28px, 4vw, 48px); background: var(--stripe) left bottom / 100% 5px no-repeat; }
.sws-sechd__num { font-family: var(--serif); font-style: italic; font-size: 22px; color: var(--purple); }
.sws-sechd__kicker { color: var(--walnut); }
.sws-sechd__h2 { font-family: var(--serif); font-weight: 600; letter-spacing: -0.02em; line-height: 1.06; }
.sws-section--firm::before { background-image: linear-gradient(to right, rgba(74,44,26,0.07) 1px, transparent 1px); }
.sws-footer__motto-a, .sws-footer__motto-b { font-family: var(--serif); }
.sws-footer__motto-mark { width: 72px; height: 44px; }
.sws-footer__name em { color: var(--purple); }
::selection { background: var(--purple); color: #fff; }

/* ── Hero ─────────────────────────────────────────────────────────────────── */
.sww-hero { padding: clamp(56px, 8vw, 120px) 0 clamp(40px, 6vw, 80px); position: relative; overflow: hidden; }
.sww-hero::after { content: ""; position: absolute; right: -6%; top: 8%; width: 48%; aspect-ratio: 496 / 300; background: url(img/dove-woodcraft.png) center / contain no-repeat; opacity: 0.05; pointer-events: none; }
.sww-hero > .sws-shell { position: relative; }
.sww-hero__banner { display: block; width: min(560px, 100%); height: auto; margin: 0 0 clamp(28px, 4vw, 48px); mix-blend-mode: multiply; }
.sww-hero__eyebrow { font-family: var(--display); font-size: 11.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 20px; }
.sww-hero h1 { margin: 0 0 22px; font-family: var(--serif); font-weight: 600; font-size: clamp(40px, 6.4vw, 88px); line-height: 0.98; letter-spacing: -0.03em; text-wrap: balance; }
.sww-hero h1 em { font-style: italic; font-weight: 300; color: var(--purple); }
.sww-hero__lede { max-width: 62ch; margin: 0; font-family: var(--display); font-size: clamp(17px, 1.8vw, 22px); line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }
.sww-hero__tag { margin: 28px 0 0; font-family: var(--display); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
.sww-hero__tag span + span::before { content: "·"; margin: 0 12px; color: var(--ink-4); }

/* ── Photo strip under the hero ───────────────────────────────────────────── */
.sww-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.sww-strip a { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--bg-3); }
.sww-strip img, .sww-grid img, .sww-story__img img, .sww-stock__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.sww-strip a:hover img, .sww-grid a:hover img, .sww-story__img:hover img, .sww-stock__img:hover img { transform: scale(1.03); }
@media (max-width: 760px) { .sww-strip { grid-template-columns: repeat(2, 1fr); } }

/* ── Three plain columns ──────────────────────────────────────────────────── */
.sww-what { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.sww-what > a { display: flex; flex-direction: column; padding: 28px; border: 1px solid var(--hair); border-radius: var(--rad); background: var(--bg); color: inherit; transition: transform .3s ease, box-shadow .3s ease; }
.sww-what > a:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(74, 44, 26, 0.14); }
.sww-what__go { margin-top: auto; padding-top: 18px; font-family: var(--display); font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--purple); }
.sww-what__go::after { content: " →"; }
.sww-what > a:hover .sww-what__go { color: var(--walnut); }
.sww-what > a { border-top: 4px solid var(--walnut); }
.sww-what > a:nth-child(2) { border-top-color: var(--purple); }
.sww-what > a:nth-child(3) { border-top-color: var(--cherry); }
.sww-what h3 { margin: 0 0 12px; font-family: var(--serif); font-weight: 600; font-size: 22px; letter-spacing: -0.01em; }
.sww-what p { margin: 0; color: var(--ink-2); font-size: 15px; line-height: 1.6; }
@media (max-width: 880px) { .sww-what { grid-template-columns: 1fr; } }

/* ── Stories ──────────────────────────────────────────────────────────────── */
.sww-stories { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3vw, 48px); }
.sww-story__img { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--bg-3); border-radius: var(--rad); transition: transform .35s ease, box-shadow .35s ease; }
.sww-story__img:hover { transform: rotate(-0.8deg) translateY(-2px); box-shadow: 0 14px 30px rgba(74, 44, 26, 0.18); }
.sww-story__body { padding: 22px 4px 0; }
.sww-story__body h3 { margin: 0 0 10px; font-family: var(--serif); font-weight: 600; font-size: 24px; letter-spacing: -0.01em; }
.sww-story__body p { margin: 0; color: var(--ink-2); font-size: 15px; line-height: 1.6; text-wrap: pretty; }
@media (max-width: 1000px) { .sww-stories { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .sww-stories { grid-template-columns: 1fr; } }

/* ── The shop: text beside the tool chest ─────────────────────────────────── */
.sww-shop { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.sww-shop__txt p { margin: 0 0 18px; color: var(--ink-2); font-size: 16.5px; line-height: 1.65; max-width: 58ch; text-wrap: pretty; }
.sww-shop__txt p:last-child { margin-bottom: 0; }
.sww-shop__txt h3 { margin: 32px 0 12px; font-family: var(--serif); font-weight: 600; font-size: 22px; color: var(--walnut); }
.sww-shop__txt h3:first-child { margin-top: 0; }
.sww-shop__img { position: sticky; top: 96px; }
.sww-shop__img a { display: block; overflow: hidden; border-radius: var(--rad); background: var(--bg-3); }
.sww-shop__img img { width: 100%; height: auto; display: block; }
.sww-shop__cap { margin: 12px 0 0; font-family: var(--display); font-size: 12px; letter-spacing: 0.06em; color: var(--ink-3); }
@media (max-width: 880px) { .sww-shop { grid-template-columns: 1fr; } .sww-shop__img { position: static; } }

/* ── Gallery grid ─────────────────────────────────────────────────────────── */
.sww-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.sww-grid a { display: block; aspect-ratio: 1; overflow: hidden; background: var(--bg-3); }
@media (max-width: 880px) { .sww-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .sww-grid { grid-template-columns: repeat(2, 1fr); } }

/* ── Restoration ──────────────────────────────────────────────────────────── */
.sww-resto { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.sww-resto__img a { display: block; overflow: hidden; border-radius: var(--rad); }
.sww-resto__img img { width: 100%; height: auto; display: block; }
.sww-resto__txt p { margin: 0 0 18px; color: var(--ink-2); font-size: 16.5px; line-height: 1.65; max-width: 58ch; text-wrap: pretty; }
.sww-resto__txt ul { margin: 0; padding-left: 18px; color: var(--ink-2); font-size: 15.5px; line-height: 1.7; }
@media (max-width: 880px) { .sww-resto { grid-template-columns: 1fr; } }

/* ── In stock ─────────────────────────────────────────────────────────────── */
.sww-stockgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.sww-stock { border: 1px solid var(--hair); border-radius: var(--rad); background: var(--bg); overflow: hidden; display: flex; flex-direction: column; transition: transform .3s ease, box-shadow .3s ease; }
.sww-stock:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(74, 44, 26, 0.14); }
.sww-stock__img { display: block; position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--bg-3); }
.sww-stock__sold { position: absolute; top: 12px; left: 12px; padding: 5px 10px; background: var(--purple); color: #fff; font-family: var(--display); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; }
.sww-stock.is-sold .sww-stock__img img { filter: grayscale(0.6); opacity: 0.7; }
.sww-stock__body { padding: 22px 22px 24px; display: flex; flex-direction: column; gap: 14px; flex: 1; }
.sww-stock__body h3 { margin: 0; font-family: var(--serif); font-weight: 600; font-size: 20px; letter-spacing: -0.01em; }
.sww-stock dl div:last-child dd { font-family: var(--serif); font-size: 17px; font-weight: 600; color: var(--walnut); }
.sww-stock dl { margin: 0; display: grid; gap: 6px; }
.sww-stock dl div { display: grid; grid-template-columns: 56px 1fr; gap: 12px; font-size: 14px; }
.sww-stock dt { font-family: var(--display); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-4); padding-top: 3px; }
.sww-stock dd { margin: 0; color: var(--ink-2); }
.sww-stock__body p { margin: 0; color: var(--ink-3); font-size: 14px; line-height: 1.55; }
.sww-stock__ask { margin-top: auto; align-self: flex-start; display: inline-flex; gap: 10px; align-items: center; padding: 11px 16px; border: 1px solid var(--walnut); background: transparent; color: var(--walnut); border-radius: 999px; font-family: var(--display); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; transition: background .2s, color .2s; }
.sww-stock__ask:hover { background: var(--walnut); color: #fff; }
.sww-stock__empty { color: var(--ink-3); grid-column: 1 / -1; }
.sww-stock__terms { margin: 32px 0 0; font-family: var(--display); font-size: 12.5px; letter-spacing: 0.02em; color: var(--ink-3); max-width: 70ch; line-height: 1.6; }
@media (max-width: 880px) { .sww-stockgrid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .sww-stockgrid { grid-template-columns: 1fr; } }

/* ── Lightbox ─────────────────────────────────────────────────────────────── */
#lightbox { border: 0; padding: 0; background: transparent; max-width: 96vw; max-height: 96vh; cursor: zoom-out; }
#lightbox::backdrop { background: rgba(12, 12, 12, 0.88); }
#lightbox img { max-width: 96vw; max-height: 96vh; display: block; }