:root{
  --bg:#16130f; --paper:#efe3c7; --ink:#251d15; --rust:#9c3f25;
  --gold:#c59645; --sage:#66735a; --night:#1f2e35; --line:#d4bc8a;
}
*{box-sizing:border-box} html{scroll-behavior:smooth}
body{margin:0;background:
 radial-gradient(circle at 10% 10%,#3d291c66,transparent 32%),
 linear-gradient(135deg,#100e0c,#211a14 55%,#111917);
 color:var(--paper);font-family:"Yu Gothic","Hiragino Kaku Gothic ProN",system-ui,sans-serif}
a{color:inherit}.wrap{max-width:1180px;margin:auto;padding:0 22px}
header{position:relative;overflow:hidden;padding:68px 0 45px;border-bottom:1px solid #7f6644}
header:before{content:"";position:absolute;inset:0;pointer-events:none;background:
 linear-gradient(115deg,transparent 0 48%,#c5964510 48% 52%,transparent 52%),
 repeating-linear-gradient(45deg,#fff0 0 24px,#c5964508 24px 26px)}
.kicker{letter-spacing:.22em;color:#e0bb72;font-weight:800;font-size:.78rem}
h1{font-family:Georgia,"Yu Mincho",serif;font-size:clamp(2.3rem,6vw,5.2rem);line-height:.94;margin:.22em 0}
.subtitle{max-width:760px;font-size:1.05rem;line-height:1.9;color:#dfd1b6}
.notice{background:#241e17;border:1px solid #7b684a;border-left:5px solid var(--gold);padding:16px 18px;margin:25px 0;line-height:1.8}
.toolbar{position:sticky;top:0;z-index:5;background:#17130feb;backdrop-filter:blur(12px);border-bottom:1px solid #584832;padding:14px 0}
.tools{display:flex;gap:10px;flex-wrap:wrap}
input,select{appearance:none;background:#f3e8d0;color:#251d15;border:0;border-radius:8px;padding:12px 14px;font-size:1rem}
input{flex:1;min-width:220px}select{min-width:210px}
.stats{display:flex;gap:18px;flex-wrap:wrap;padding:26px 0 8px;color:#d9c49b}
.stats strong{font-size:1.65rem;color:#f0cb78}
.region-title{font-family:Georgia,"Yu Mincho",serif;font-size:2rem;margin:44px 0 17px;border-bottom:1px solid #715c3e;padding-bottom:8px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(245px,1fr));gap:18px}
.card{display:block;text-decoration:none;background:#e8dcc2;color:var(--ink);border:1px solid #bda170;border-radius:13px;overflow:hidden;transition:.2s;box-shadow:0 10px 30px #0005}
.card:hover{transform:translateY(-5px);box-shadow:0 18px 40px #0008}
.art{height:156px;position:relative;display:flex;align-items:center;justify-content:center;background:
 radial-gradient(circle at 68% 28%,#f4d98f 0 7%,transparent 8%),
 linear-gradient(155deg,#6d7860 0 35%,#bd7741 35% 57%,#402f27 57% 100%)}
.art:before,.art:after{content:"";position:absolute;border:2px solid #f6e7bd66;transform:rotate(45deg)}
.art:before{width:74px;height:74px}.art:after{width:110px;height:110px}
.monogram{font-family:Georgia,serif;font-size:2.7rem;font-weight:900;color:#fff4d5;text-shadow:0 3px 12px #000;z-index:1}
.card-body{padding:17px}.region-tag{font-size:.72rem;letter-spacing:.12em;color:var(--rust);font-weight:900}
.card h3{margin:5px 0 0;font-family:Georgia,"Yu Mincho",serif;font-size:1.34rem}
.en{font-size:.9rem;color:#6d5b48;margin-top:3px}.self{font-size:.82rem;color:#4d6855;margin-top:9px}
.tags{display:flex;gap:5px;flex-wrap:wrap;margin-top:12px}.tag{font-size:.72rem;border:1px solid #aa946d;border-radius:999px;padding:3px 7px}
footer{margin-top:60px;padding:36px 0;border-top:1px solid #665338;color:#c7b99f;line-height:1.8}
.hidden{display:none!important}
.detail-body{background:linear-gradient(135deg,#16130f,#262017)}
.back{display:inline-block;margin:22px 0;text-decoration:none;color:#edc976}
.hero-detail{display:grid;grid-template-columns:310px 1fr;gap:34px;align-items:center;padding:30px 0}
.hero-detail .art{height:310px;border-radius:14px;border:1px solid #927748}
.hero-detail h1{font-size:clamp(2.3rem,5vw,4.5rem)}
.fact-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:17px;margin:20px 0 40px}
.fact{background:#eee1c5;color:#211a13;border-radius:11px;padding:21px;border-top:5px solid var(--gold)}
.fact h2{font-family:Georgia,"Yu Mincho",serif;font-size:1.15rem;margin:0 0 8px;color:#87351f}
.fact p{line-height:1.85;margin:0}
.actions{display:flex;gap:10px;flex-wrap:wrap;margin:26px 0}
.btn{display:inline-block;text-decoration:none;background:#a74629;color:white;padding:11px 15px;border-radius:7px;font-weight:800}
.btn.alt{background:#53604b}.btn.dark{background:#263941}
.source-note{font-size:.9rem;color:#c9bda8;border-top:1px solid #68563c;padding-top:20px}
@media(max-width:720px){.hero-detail{grid-template-columns:1fr}.hero-detail .art{height:230px}.fact-grid{grid-template-columns:1fr}header{padding-top:46px}}


.map-section{padding-top:34px;padding-bottom:32px}
.map-heading{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:end;margin-bottom:18px}
.map-heading h2{font-family:Georgia,"Yu Mincho",serif;font-size:clamp(1.8rem,4vw,3rem);margin:.2em 0 0}
.map-heading p{margin:0;color:#d6c7aa;line-height:1.85}
.map-frame{position:relative;display:block;border:1px solid #8d744d;border-radius:14px;overflow:hidden;background:#e8dcc2;box-shadow:0 16px 40px #0007;text-decoration:none}
.map-frame img{display:block;width:100%;height:auto}
.map-frame:after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px #f5e9c833;pointer-events:none}
.map-zoom{position:absolute;right:14px;bottom:14px;background:#17130ed9;color:#f2d28a;border:1px solid #b89552;padding:9px 12px;border-radius:999px;font-size:.82rem;font-weight:800;backdrop-filter:blur(8px)}
.map-caption{margin:11px 3px 0;color:#c9b99b;font-size:.9rem;line-height:1.7}
@media(max-width:720px){
  .map-heading{grid-template-columns:1fr;gap:10px}
  .map-section{padding-top:24px}
  .map-zoom{font-size:.72rem;right:9px;bottom:9px}
}

.art.has-cover{position:relative;overflow:hidden;background:#3e3022}
.art.has-cover:before,.art.has-cover:after{display:none}
.art.has-cover .cover-img{display:block;width:100%;height:100%;object-fit:cover}

.detail-cover{height:310px!important;border-radius:14px;border:1px solid #927748;background:#2e281f}
.detail-cover img{width:100%;height:100%;object-fit:cover;display:block}
.detailed-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.detailed-grid .fact{min-height:235px}
.detailed-grid .fact p{font-size:.98rem;line-height:1.95}
@media(max-width:720px){.detail-cover{height:230px!important}.detailed-grid{grid-template-columns:1fr}.detailed-grid .fact{min-height:auto}}


/* Clickable historical map — fixed */
.clickable-map{position:relative;display:block;overflow:hidden}
.clickable-map>img{display:block;width:100%;height:auto;position:relative;z-index:1}
.map-hotspot{
  position:absolute;
  z-index:10;
  display:block;
  cursor:pointer;
  border:2px solid transparent;
  border-radius:6px;
  background:transparent;
  text-decoration:none;
  transition:background .16s ease,border-color .16s ease,box-shadow .16s ease;
}
.map-hotspot span{
  position:absolute;
  left:50%;
  bottom:calc(100% + 5px);
  transform:translateX(-50%);
  display:none;
  white-space:nowrap;
  padding:5px 8px;
  border-radius:5px;
  background:#21170de8;
  color:#f4d38b;
  border:1px solid #c79d51;
  font-size:.76rem;
  font-weight:800;
  box-shadow:0 5px 15px #0008;
  pointer-events:none;
}
.map-hotspot:hover,.map-hotspot:focus-visible{
  border-color:#f0c765;
  background:#f0c7652e;
  box-shadow:0 0 0 2px #21170d99,0 0 18px #f0c76599;
  outline:none;
}
.map-hotspot:hover span,.map-hotspot:focus-visible span{display:block}
.clickable-map .map-zoom{z-index:20}
@media(max-width:720px){
  .map-hotspot{min-width:22px;min-height:22px;border-radius:4px}
  .map-hotspot span{display:none!important}
  .map-hotspot:active{border-color:#f1c766;background:#f1c76645}
}


/* Timeline entry point */
.timeline-cta{margin:8px auto 34px;padding:25px 27px;display:flex;align-items:center;justify-content:space-between;gap:28px;background:linear-gradient(110deg,#2c2117,#3a291b);border:1px solid #8a6d42;border-radius:13px;box-shadow:0 12px 28px #0005}
.timeline-cta h2{font-family:Georgia,"Yu Mincho",serif;font-size:clamp(1.45rem,3vw,2.2rem);margin:5px 0 8px}.timeline-cta p{margin:0;color:#d8c8aa;line-height:1.75;max-width:790px}
.timeline-cta-btn{flex:none;text-decoration:none;background:#c28d3f;color:#21170e;padding:13px 19px;border-radius:8px;font-weight:900;box-shadow:0 5px 15px #0005}.timeline-cta-btn:hover{background:#e1b76b}
.detail-nav{display:flex;align-items:center;justify-content:space-between;gap:16px}.timeline-link{text-align:right}

/* Chronology page */
.timeline-body{background:linear-gradient(145deg,#100e0c,#21180f 58%,#101718)}
.timeline-hero{padding-top:24px}.timeline-hero h1 span{font-size:.62em;color:#ddb86f}.timeline-main{padding-top:30px}
.timeline-controls{position:sticky;top:0;z-index:30;background:#17130ff2;border:1px solid #685338;border-radius:12px;padding:15px;margin-bottom:34px;backdrop-filter:blur(12px);box-shadow:0 10px 25px #0006}
.timeline-controls input{width:100%;margin-bottom:11px}.timeline-filters{display:flex;gap:7px;flex-wrap:wrap}.timeline-filters button{border:1px solid #8e754e;background:#2a2118;color:#e5d4b5;padding:7px 10px;border-radius:999px;cursor:pointer;font-size:.78rem}.timeline-filters button:hover,.timeline-filters button.active{background:#c49548;color:#21170e;border-color:#e4bd74}.timeline-result{margin-top:10px;color:#cdbb9b;font-size:.85rem}
.timeline{position:relative;max-width:980px;margin:0 auto}.timeline:before{content:"";position:absolute;left:132px;top:0;bottom:0;width:2px;background:linear-gradient(#d6aa5d,#705433,#d6aa5d)}
.timeline-item{position:relative;display:grid;grid-template-columns:115px 1fr;gap:42px;margin:0 0 23px;align-items:start}.timeline-dot{position:absolute;left:125px;top:20px;width:16px;height:16px;border-radius:50%;background:#e0b76b;border:3px solid #251b12;box-shadow:0 0 0 2px #a3783d,0 0 16px #dba54c88}.timeline-date{text-align:right;padding-top:18px;color:#f1cb7c;font-family:Georgia,"Yu Mincho",serif;font-size:1.03rem;font-weight:800}.timeline-card{background:#eee1c6;color:#241c14;border:1px solid #bda171;border-left:6px solid #a34b2b;border-radius:11px;padding:19px 21px;box-shadow:0 9px 25px #0005}.timeline-card h2{font-family:Georgia,"Yu Mincho",serif;margin:5px 0 9px;font-size:1.27rem}.timeline-card p{margin:0;line-height:1.85}.timeline-meta{display:flex;gap:8px;flex-wrap:wrap;font-size:.71rem}.timeline-meta span,.timeline-meta em{font-style:normal;border:1px solid #a99470;border-radius:999px;padding:3px 7px}.timeline-meta span{background:#ded0b2;color:#6b4029}.timeline-meta em{background:#65705c;color:#fff}
.timeline-sources{max-width:980px;margin:48px auto 0;padding:25px;background:#241d16;border:1px solid #70583a;border-radius:12px}.timeline-sources h2{font-family:Georgia,"Yu Mincho",serif;margin-top:0}.timeline-sources p{line-height:1.8;color:#d6c6aa}.source-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.source-links a{display:block;text-decoration:none;background:#33271c;border:1px solid #6f583b;border-radius:7px;padding:10px;color:#eacb8b}.source-links a:hover{background:#493521}
@media(max-width:720px){.timeline-cta{align-items:flex-start;flex-direction:column}.timeline-cta-btn{width:100%;text-align:center}.detail-nav{align-items:flex-start;flex-direction:column}.timeline-link{text-align:left;margin-top:-12px}.timeline-controls{position:relative}.timeline:before{left:9px}.timeline-item{grid-template-columns:1fr;gap:5px;padding-left:31px}.timeline-dot{left:2px;top:11px}.timeline-date{text-align:left;padding-top:0}.timeline-card{padding:16px}.source-links{grid-template-columns:1fr}}


/* Japan and Indigenous North America feature */
.relation-cta{background:linear-gradient(110deg,#182626,#38251b)}
.relation-body{background:linear-gradient(145deg,#100e0c,#1c1913 48%,#101d1d)}
.relation-hero{padding-bottom:52px;background:radial-gradient(circle at 82% 30%,#80552b66,transparent 27%),radial-gradient(circle at 12% 75%,#345b5666,transparent 28%),linear-gradient(145deg,#17130f,#2a2117)}
.relation-hero h1 span{font-size:.7em;color:#e0b86b}.relation-main{padding-top:34px;padding-bottom:30px}
.relation-toc{position:sticky;top:0;z-index:25;display:flex;gap:8px;flex-wrap:wrap;padding:12px;margin-bottom:30px;background:#17130ff0;border:1px solid #6e593b;border-radius:10px;backdrop-filter:blur(10px)}
.relation-toc a{text-decoration:none;color:#ead5ac;border:1px solid #806743;border-radius:999px;padding:7px 10px;font-size:.8rem}.relation-toc a:hover{background:#c39148;color:#21170e}
.relation-lead,.relation-section{scroll-margin-top:86px;margin:0 0 34px;padding:29px;background:#211b15;border:1px solid #6d583b;border-radius:14px;box-shadow:0 12px 30px #0005}
.relation-lead{background:linear-gradient(130deg,#2e2419,#1c2927)}.relation-section h2,.relation-lead h2{font-family:Georgia,"Yu Mincho",serif;font-size:clamp(1.7rem,3.5vw,2.5rem);margin:5px 0 18px}.relation-lead p,.relation-section>p{line-height:2;color:#dfd1b8}
.relation-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}.relation-grid article{background:#eadfc7;color:#251d15;border-radius:10px;padding:20px;border-top:4px solid #b44f2d}.relation-grid article h3{font-family:Georgia,"Yu Mincho",serif;margin:0 0 9px;color:#80361f;font-size:1.12rem}.relation-grid article p{margin:0;line-height:1.9}
.section-label{display:inline-block;border-radius:999px;padding:5px 9px;font-size:.72rem;font-weight:900;letter-spacing:.1em}.fact-label{background:#b24d2b;color:#fff}.thought-label{background:#46675f;color:#fff}
.analysis-box{margin-top:17px;padding:20px;border-left:5px solid #5f8278;background:#172522;border-radius:8px}.analysis-box p{margin:8px 0 0;line-height:1.95;color:#dfd5c0}.relation-highlight{border-color:#a06f37;background:linear-gradient(135deg,#2a1e15,#272015)}.section-intro{font-size:1.05rem}.warning-box{border-left-color:#c29142;background:#2c2418}
.comparison-table{display:grid;grid-template-columns:1fr 1fr;border:1px solid #86704e;border-radius:10px;overflow:hidden}.comparison-table>div{padding:17px;background:#eadfc7;color:#251d15;border-bottom:1px solid #b7a37d}.comparison-table>div:nth-child(odd){border-right:1px solid #b7a37d}.comparison-head{background:#5d4930!important;color:#f5dfb3!important;font-weight:900}.relation-sources{max-width:none}.source-caution{margin-top:18px;font-size:.9rem;color:#d7c4a3!important}
@media(max-width:720px){.relation-toc{position:relative}.relation-lead,.relation-section{padding:20px}.relation-grid{grid-template-columns:1fr}.comparison-table{grid-template-columns:1fr}.comparison-table>div:nth-child(odd){border-right:0}.comparison-head:nth-child(2){display:none}}


/* Clothing and food culture section */
.lifestyle-section{margin:8px 0 34px;padding:24px;background:linear-gradient(135deg,#211b15,#1a241f);border:1px solid #6f5b3d;border-radius:14px;box-shadow:0 12px 28px #0005}
.lifestyle-section h2{font-family:Georgia,"Yu Mincho",serif;font-size:clamp(1.45rem,3vw,2.15rem);margin:0 0 12px;color:#f0d496}
.lifestyle-lead{margin:0 0 16px;color:#dfd1b8;line-height:1.95}
.lifestyle-figure{margin:0;overflow:hidden;border-radius:12px;border:1px solid #8a724a;background:#14110d;box-shadow:0 10px 24px #0005}
.lifestyle-figure img{display:block;width:100%;height:auto}
.lifestyle-figure figcaption{background:#eee2c8;color:#241c14;padding:12px 15px;line-height:1.75;font-size:.95rem}
.lifestyle-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:16px}
.lifestyle-card{background:#eee1c5;color:#211a13;border-radius:11px;padding:18px;border-top:4px solid var(--gold)}
.lifestyle-card h3{margin:0 0 8px;font-family:Georgia,"Yu Mincho",serif;color:#87351f;font-size:1.08rem}
.lifestyle-card p{margin:0;line-height:1.9}
.interpret-note{margin:14px 0 0;color:#d0c1a3;font-size:.92rem;line-height:1.8}
@media(max-width:720px){.lifestyle-section{padding:18px}.lifestyle-grid{grid-template-columns:1fr}.lifestyle-figure figcaption{font-size:.9rem}}

header>.wrap{position:relative;z-index:1}