/* Shared stylesheet for the five-page woodworker demo — second member of
   the maker species (first: artist-preview). Same skeleton, its own
   register: warm wood tones, a sturdier serif, the heirloom voice. */
* { box-sizing:border-box; margin:0; }
:root { --paper:#FAF6EE; --ink:#241C12; --faint:#6E6350; --hair:#E6DCC8; --accent:#8A4B23; }
body { background:var(--paper); color:var(--ink); font-family:'Inter',system-ui,sans-serif; line-height:1.7; overflow-x:clip; }
.wrap { max-width:860px; margin:0 auto; padding:0 24px; }

.previewBand { background:var(--ink); color:var(--paper); font-size:12.5px; text-align:center; padding:8px 14px; letter-spacing:.04em; }
.previewBand b { color:#E4B57E; }

header { padding:26px 0; }
header .row { display:flex; justify-content:space-between; align-items:baseline; gap:18px; flex-wrap:wrap; }
.mast { font-family:'Fraunces',Georgia,serif; font-size:20px; font-weight:600; letter-spacing:.01em; text-decoration:none; color:var(--ink); }
nav { display:flex; gap:6px 26px; font-size:14px; flex-wrap:wrap; justify-content:flex-end; }
@media (max-width:420px) { nav { gap:6px 16px; justify-content:center; } }
nav a { color:var(--faint); text-decoration:none; font-weight:600; }
nav a:hover, nav a.here { color:var(--accent); }

.hero { padding:34px 0 10px; text-align:center; }
.hero img { max-width:min(680px, 94%); height:auto; display:block; margin:0 auto; }
.hero h1 { font-family:'Fraunces',serif; font-weight:500; font-size:clamp(26px,4vw,38px); margin-top:34px; letter-spacing:.01em; }
.hero .line { color:var(--faint); margin-top:8px; font-size:15.5px; }

section { padding:72px 0 0; }
h1.page { font-family:'Fraunces',serif; font-weight:500; font-size:clamp(24px,3.4vw,34px); margin-bottom:10px; }
h2 { font-family:'Fraunces',serif; font-weight:500; font-size:clamp(22px,3vw,30px); margin-bottom:10px; }
.lead { color:var(--faint); max-width:62ch; }

.work { margin-top:44px; }
.work img { max-width:100%; height:auto; display:block; margin:0 auto; }
.cap { display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; margin:14px auto 0; max-width:640px;
  font-size:13px; letter-spacing:.06em; color:var(--faint); }
.cap .t i { font-style:normal; color:var(--ink); font-weight:600; }
.cap .avail { white-space:nowrap; }
.cap .avail.sold { color:var(--ink); }
.cap .avail a { color:var(--accent); text-decoration:none; font-weight:700; }
.worknote { max-width:640px; margin:10px auto 0; font-size:14px; color:var(--faint); font-style:italic; }
.work + .work { margin-top:78px; }

.duo { display:grid; grid-template-columns:1fr 1fr; gap:34px 28px; margin-top:44px; }
.duo .work { margin-top:0; }
@media (max-width:700px) { .duo { grid-template-columns:1fr; gap:56px; } }

.statement { max-width:620px; margin:0 auto; text-align:center; }
.statement p { font-family:'Fraunces',serif; font-size:19px; line-height:1.9; }
.statement .mats { margin-top:18px; font-size:14px; color:var(--faint); letter-spacing:.04em; }

.about .cols { display:grid; grid-template-columns:1fr 1fr; gap:40px; margin-top:30px; align-items:start; }
@media (max-width:700px) { .about .cols { grid-template-columns:1fr; } }
.about h3 { font-family:'Fraunces',serif; font-weight:600; font-size:17px; margin:26px 0 6px; }
.about p { color:#3C332A; font-size:15.5px; }
.pull { font-family:'Fraunces',serif; font-size:clamp(21px,2.6vw,27px); line-height:1.7; margin:48px auto 0; max-width:560px; text-align:center; }
.pull::before { content:'\201C'; color:var(--accent); }
.pull::after { content:'\201D'; color:var(--accent); }

.steps { margin-top:26px; max-width:640px; }
.steps div { display:flex; gap:18px; padding:16px 0; border-top:1px solid var(--hair); font-size:15.5px; }
.steps b { font-family:'Fraunces',serif; min-width:26px; color:var(--faint); font-weight:500; }

.pricesRow { display:flex; gap:44px; flex-wrap:wrap; margin-top:26px; }
.pricesRow div { min-width:210px; max-width:330px; }
.pricesRow b { font-family:'Fraunces',serif; font-size:18px; font-weight:600; display:block; margin-bottom:4px; }
.pricesRow p { color:var(--faint); font-size:14.5px; }

.inquire { text-align:center; padding-bottom:20px; }
.inquire a.mail { display:inline-block; margin-top:20px; font-size:17px; color:var(--accent); font-weight:700; text-decoration:none; border-bottom:1.5px solid var(--accent); padding-bottom:2px; }
.inquire .list { margin-top:16px; font-size:14px; color:var(--faint); }

.door { margin-top:34px; }
.door a { font-size:15px; color:var(--accent); font-weight:700; text-decoration:none; border-bottom:1.5px solid var(--accent); padding-bottom:2px; }
.teaser { border-top:1px solid var(--hair); margin-top:82px; padding-top:60px; }

footer { margin-top:88px; border-top:1px solid var(--hair); padding:26px 0 50px; font-size:12.5px; color:var(--faint); }
footer p + p { margin-top:8px; }
footer .fnav a { color:var(--ink); text-decoration:none; font-weight:600; font-size:13.5px; }
footer .fnav a:hover { color:var(--accent); }

@media (prefers-reduced-motion: no-preference) {
  .work img, .hero img { opacity:0; transition:opacity 1.1s ease; }
  .work img.in, .hero img.in { opacity:1; }
}

/* ---- Theme variants (showcase style chips; ?theme=<school> carries across
   all five pages via the head script). No param = the natural fit above.
   Chip labels: calm=Clean, trade=Bold, warm=Warm, editorial=Classic,
   darkpremium=Premium dark. Colors chosen to hold WCAG AA on their paper. */
:root[data-theme="calm"] { --paper:#FFFFFF; --ink:#1C1E21; --faint:#5D6470; --hair:#E7E9ED; --accent:#3E5C76; }
[data-theme="calm"] section { padding-top:88px; }
[data-theme="calm"] .hero h1 { font-weight:400; letter-spacing:.04em; }
[data-theme="calm"] nav { letter-spacing:.04em; }

:root[data-theme="trade"] { --paper:#EFEAE0; --ink:#17130E; --faint:#584F41; --hair:#DBD2C0; --accent:#A6431B; }
[data-theme="trade"] .hero h1, [data-theme="trade"] h2, [data-theme="trade"] h1.page { font-weight:600; }
[data-theme="trade"] .hero img { max-width:min(720px, 94%); }
[data-theme="trade"] .door a, [data-theme="trade"] .inquire a.mail { border-bottom-width:3px; }

:root[data-theme="warm"] { --paper:#F3E4CC; --ink:#37271A; --faint:#6E5B44; --hair:#E2CDA8; --accent:#8F4E1F; }
[data-theme="warm"] .work img, [data-theme="warm"] .hero img { border-radius:6px; }

:root[data-theme="editorial"] { --paper:#FAF9F5; --ink:#1B1A16; --faint:#5F5B50; --hair:#E5E1D5; --accent:#2E4B3F; }
[data-theme="editorial"] h2, [data-theme="editorial"] h1.page { text-align:center; }
[data-theme="editorial"] .lead { margin-left:auto; margin-right:auto; text-align:center; }
[data-theme="editorial"] .cap, [data-theme="editorial"] .worknote { font-family:'Fraunces',serif; font-style:italic; letter-spacing:.02em; }

:root[data-theme="darkpremium"] { --paper:#191410; --ink:#EDE5D6; --faint:#A3947E; --hair:#322A21; --accent:#C9A227; }
[data-theme="darkpremium"] .previewBand { background:#000; color:#EDE5D6; }
[data-theme="darkpremium"] .previewBand b { color:#C9A227; }
[data-theme="darkpremium"] .work img, [data-theme="darkpremium"] .hero img { border:1px solid #322A21; }
[data-theme="darkpremium"] .about p { color:#D2C8B6; }