:root { --paper:#f4efe5; --ink:#263b32; --red:#943c2b; --gold:#a88943; --line:#d9d0bd; --muted:#6a6b5e; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:'Yu Mincho','Hiragino Mincho ProN',Georgia,serif; line-height:1.85; }
a { color:inherit; text-underline-offset:5px; }
button,input { font:inherit; }
button,.button { display:inline-block; background:var(--red); color:white; border:1px solid var(--red); padding:12px 26px; text-decoration:none; cursor:pointer; }
button:disabled { opacity:.5; cursor:wait; }
a:focus-visible,button:focus-visible,input:focus-visible { outline:3px solid var(--gold); outline-offset:4px; }
.skip { position:absolute; left:10px; top:-100px; background:white; padding:12px; z-index:10; }
.skip:focus { top:10px; }
.notice { text-align:center; background:var(--ink); color:#fff; font:12px/1.6 sans-serif; letter-spacing:.12em; padding:9px 15px; }
header { display:flex; align-items:center; justify-content:space-between; gap:20px; max-width:1380px; margin:auto; padding:25px 5%; border-bottom:1px solid var(--line); }
.brand { display:flex; gap:15px; align-items:center; text-decoration:none; }
.seal { width:56px; height:62px; display:grid; place-items:center; border:2px solid var(--red); color:var(--red); font-size:21px; letter-spacing:2px; line-height:1.05; }
.brand strong { display:block; font-size:25px; letter-spacing:.16em; }
.brand small { font:10px sans-serif; letter-spacing:.25em; }
nav { display:flex; flex-wrap:wrap; gap:25px; font:13px sans-serif; }
nav a { text-decoration:none; }
main { min-height:60vh; }
.hero { display:grid; grid-template-columns:1fr 1.08fr; max-width:1380px; margin:auto; }
.hero-copy { padding:75px 9% 70px; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; }
.eyebrow { color:var(--red); font:11px/1.6 sans-serif; letter-spacing:.2em; text-transform:uppercase; }
h1 { font-weight:500; font-size:clamp(34px,3.5vw,53px); line-height:1.5; letter-spacing:.08em; margin:20px 0; }
h2 { font-weight:500; font-size:30px; line-height:1.6; letter-spacing:.09em; margin:12px 0 22px; }
h3 { font-weight:500; font-size:21px; }
p { margin:0 0 20px; }
.hero-copy p { max-width:440px; font-size:15px; }
.hero-visual { position:relative; min-height:560px; background:#a88943; overflow:hidden; }
.hero-visual img { width:100%; height:100%; object-fit:cover; position:absolute; filter:brightness(.88); }
.hero-caption { position:absolute; bottom:25px; left:30px; right:30px; color:white; font:11px sans-serif; letter-spacing:.1em; }
section,.page { max-width:1200px; margin:auto; padding:75px 35px; }
.section-head { display:flex; justify-content:space-between; gap:20px; align-items:flex-end; }
.section-head p { color:var(--muted); font-size:14px; max-width:430px; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.categories { grid-template-columns:repeat(4,1fr); gap:0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.category { padding:28px 22px; border-right:1px solid var(--line); text-decoration:none; }
.category:last-child { border-right:0; }
.category span { color:var(--gold); font-size:13px; }
.category p { font-size:13px; color:var(--muted); margin:0; }
.product { text-decoration:none; display:block; }
.motif { height:220px; display:grid; place-items:center; background:#e8dfce; position:relative; }
.motif::before { content:''; width:110px; height:145px; border:1px solid currentColor; transform:rotate(-8deg); position:absolute; background:#f5eddc; box-shadow:7px 8px 0 #d4c5a7; }
.motif b { position:relative; font-size:48px; font-weight:400; }
.sample { position:absolute; bottom:10px; right:12px; font:10px sans-serif; color:#686252; }
.product h3 { margin:15px 0 3px; }
.product p { font:12px/1.8 sans-serif; color:var(--muted); }
.sample-note { border-left:2px solid var(--gold); padding:15px 20px; margin:30px 0; font:13px/1.9 sans-serif; color:var(--muted); }
.story-band { background:var(--ink); color:var(--paper); }
.story-band section { display:grid; grid-template-columns:.8fr 1.2fr; gap:80px; }
.story-band .eyebrow { color:#d2b66f; }
.story-route { font-size:32px; line-height:2.4; padding-top:20px; border-top:1px solid #617064; }
.story-route span { font:12px sans-serif; display:block; color:#c2c6b9; }
.story-band p { font-size:14px; }
.split { display:grid; grid-template-columns:1fr 1fr; gap:65px; }
table { width:100%; border-collapse:collapse; font-size:14px; }
th,td { text-align:left; padding:16px 12px; border-bottom:1px solid var(--line); vertical-align:top; }
details { border-bottom:1px solid var(--line); padding:18px 0; }
summary { cursor:pointer; font-size:15px; }
details p { padding-top:15px; font-size:14px; }
footer { background:#e8e1d3; padding:45px 6%; display:flex; justify-content:space-between; gap:30px; font:12px/2 sans-serif; }
footer nav { max-width:650px; gap:14px 25px; }
.page { max-width:1050px; }
.page h1 { font-size:38px; }
.page .intro { font-size:18px; max-width:750px; }
.breadcrumb { font:12px sans-serif; color:var(--muted); margin-bottom:30px; }
.product-detail { display:grid; grid-template-columns:1fr 1fr; gap:50px; }
.product-detail .motif { height:400px; }
.product-detail .motif::before { width:170px; height:240px; }
.product-detail .motif b { font-size:70px; }
.error { color:var(--red); }
.cart-line { display:flex; align-items:center; gap:20px; border-bottom:1px solid var(--line); padding:20px 0; }
.cart-line strong { flex:1; }
input[type=number] { width:80px; padding:8px; border:1px solid var(--line); background:white; }
@media(max-width:760px) { header { align-items:flex-start; padding:20px; } nav { gap:12px; font-size:11px; max-width:190px; } .brand strong { font-size:19px; } .seal { width:42px; height:50px; font-size:17px; } .hero { grid-template-columns:1fr; } .hero-copy { padding:45px 25px; } .hero-visual { min-height:330px; } section,.page { padding:48px 22px; } .section-head { display:block; } .categories { grid-template-columns:1fr 1fr; } .category { border-bottom:1px solid var(--line); padding:22px 14px; } .grid { grid-template-columns:1fr 1fr; gap:20px; } .motif { height:170px; } .story-band section,.split,.product-detail { grid-template-columns:1fr; gap:25px; } footer { flex-direction:column; } h2 { font-size:25px; } .product-detail .motif { height:300px; } .cart-line { flex-wrap:wrap; } }