/* Shared stylesheet for the five-page artist preview — extracted from the
   original single-scroll rig when it split into real pages (2026-08-11). */
* { box-sizing:border-box; margin:0; }
:root { --paper:#FAF7F0; --ink:#1A1A1A; --faint:#6E6A62; --hair:#E5E0D5; --seal:#C73E3A; }
body { background:var(--paper); color:var(--ink); font-family:'Inter',system-ui,sans-serif; line-height:1.7; overflow-x:clip; }
.serif { font-family:'Shippori Mincho',Georgia,serif; }
.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:#E8C9A0; }

header { padding:26px 0; }
header .row { display:flex; justify-content:space-between; align-items:baseline; gap:18px; flex-wrap:wrap; }
.mast { font-family:'Shippori Mincho',serif; font-size:20px; font-weight:600; letter-spacing:.02em; 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(--seal); }

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

section { padding:72px 0 0; }
h1.page { font-family:'Shippori Mincho',serif; font-weight:500; font-size:clamp(24px,3.4vw,34px); margin-bottom:10px; letter-spacing:.02em; }
h2 { font-family:'Shippori Mincho',serif; font-weight:500; font-size:clamp(22px,3vw,30px); margin-bottom:10px; letter-spacing:.02em; }
.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(--seal); 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:'Shippori Mincho',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:'Shippori Mincho',serif; font-weight:600; font-size:17px; margin:26px 0 6px; }
.about p { color:#3A362E; font-size:15.5px; }
.pull { font-family:'Shippori Mincho',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:'「 '; color:var(--seal); }
.pull::after { content:' 」'; color:var(--seal); }

.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:'Shippori Mincho',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; }
.pricesRow b { font-family:'Shippori Mincho',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(--seal); font-weight:700; text-decoration:none; border-bottom:1.5px solid var(--seal); padding-bottom:2px; }
.inquire .list { margin-top:16px; font-size:14px; color:var(--faint); }

/* Multi-page additions */
.door { margin-top:34px; }
.door a { font-size:15px; color:var(--seal); font-weight:700; text-decoration:none; border-bottom:1.5px solid var(--seal); padding-bottom:2px; }
.teaser { border-top:1px solid var(--hair); margin-top:82px; padding-top:60px; }
.exh { margin-top:24px; max-width:560px; }
.exh div { display:flex; gap:22px; padding:11px 0; border-top:1px solid var(--hair); font-size:15px; }
.exh b { min-width:52px; font-weight:600; color:var(--faint); }

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(--seal); }

@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:#16181A; --faint:#5F666D; --hair:#E8EAEC; --seal:#33506B; }
[data-theme="calm"] section { padding-top:88px; }
[data-theme="calm"] .hero h1 { font-weight:400; letter-spacing:.06em; }
[data-theme="calm"] nav { letter-spacing:.04em; }

:root[data-theme="trade"] { --paper:#F5F1E8; --ink:#141210; --faint:#5C554A; --hair:#DED6C4; --seal:#A6261D; }
[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(640px, 94%); }
[data-theme="trade"] .door a, [data-theme="trade"] .inquire a.mail { border-bottom-width:3px; }

:root[data-theme="warm"] { --paper:#F6EDDD; --ink:#3A2E22; --faint:#6E5F4C; --hair:#E4D5BC; --seal:#8A4B23; }
[data-theme="warm"] .work img, [data-theme="warm"] .hero img { border-radius:6px; }

:root[data-theme="editorial"] { --paper:#FBFAF7; --ink:#1C1B18; --faint:#615D52; --hair:#E6E2D6; --seal:#29434E; }
[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:'Shippori Mincho',serif; font-style:italic; letter-spacing:.02em; }

:root[data-theme="darkpremium"] { --paper:#161511; --ink:#EAE4D6; --faint:#A39B87; --hair:#33302A; --seal:#C9A227; }
[data-theme="darkpremium"] .previewBand { background:#000; color:#EAE4D6; }
[data-theme="darkpremium"] .previewBand b { color:#C9A227; }
/* Dark gallery walls need the work isolated — a mat restores the contrast
   the wall takes away (the convention real galleries use, and the reason
   ink paintings are mounted on paper before they're hung). */
[data-theme="darkpremium"] .work img, [data-theme="darkpremium"] .hero img { border:1px solid #3D392F; background:#FBF9F4; padding:10px; }
[data-theme="darkpremium"] .about p { color:#CFC7B4; }