
*{box-sizing:border-box}
:root{
  --bg:#f5f0e6;--paper:#fffdf8;--ink:#151515;--muted:#736c62;--line:#d2c8bb;
  --yellow:#f0c43d;--blue:#b9d5e7;--salmon:#e8a99b;--sage:#cbdcc7;--black:#151515;
}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;line-height:1.75}
a{color:inherit;text-decoration:none}
img{display:block;width:100%;height:100%;object-fit:cover}
button,input{font:inherit}
.wrap{width:min(1180px,94vw);margin:auto}
header{position:sticky;top:0;z-index:40;background:rgba(245,240,230,.94);backdrop-filter:blur(14px);border-bottom:1px solid rgba(0,0,0,.08)}
.head{min-height:72px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.logo{font:900 42px/1 Georgia,serif;letter-spacing:-.075em}.logo i{font-style:normal}
.logo small{display:block;font:800 8px/1.3 sans-serif;letter-spacing:.12em;margin-top:7px}
nav{display:flex;gap:25px;align-items:center;font-size:11px;font-weight:900}
.search-icon{font-size:18px}
.menu-icon{font-size:20px}
.eyebrow{font-size:9px;font-weight:900;letter-spacing:.13em}
.hand{font-family:"Yu Mincho","Hiragino Mincho ProN",serif}
.new{display:inline-flex;background:var(--yellow);border-radius:999px;padding:6px 9px;font-size:9px;font-weight:900;line-height:1}
.arrow{font-size:17px}
.btn{display:inline-flex;align-items:center;gap:14px;border:1px solid #111;padding:11px 16px;font-size:11px;font-weight:900;background:transparent}
.btn.dark{background:#111;color:#fff}
.btn:hover{transform:translateY(-1px)}
/* HERO */
.hero{display:grid;grid-template-columns:.72fr 1.23fr .55fr;gap:20px;padding:28px 0 26px;align-items:stretch}
.hero-copy{padding:30px 0 16px}
.hero-copy h1{font-family:"Yu Mincho","Hiragino Mincho ProN",serif;font-size:clamp(52px,6.5vw,88px);line-height:1.08;letter-spacing:-.055em;margin:0 0 22px}
.hero-copy h1 span{background:linear-gradient(transparent 72%,rgba(240,196,61,.75) 72%)}
.hero-copy .lead{font-size:15px;font-weight:800;margin-bottom:22px}
.hero-copy p{font-size:13px;line-height:2;margin:0 0 13px;max-width:360px}
.hero-photo{min-height:370px;border:1px solid var(--line);overflow:hidden}
.editor-note{border-top:1px solid;border-bottom:1px solid;padding:24px 0;display:flex;flex-direction:column;justify-content:space-between}
.editor-note h3{font-size:14px;margin:0 0 18px}
.editor-note p{font-family:"Yu Mincho","Hiragino Mincho ProN",serif;font-size:15px;line-height:1.9;margin:0 0 18px}
.editor-mini{height:145px;overflow:hidden;margin-top:16px}
/* issue + start */
.issue-start{display:grid;grid-template-columns:.36fr .64fr;gap:24px;border-top:1px solid var(--line);padding-top:26px}
.issue-card{position:relative;border:1px solid var(--line);overflow:hidden;min-height:390px}
.issue-card .new{position:absolute;top:15px;left:15px;z-index:3}
.issue-card .issue-cta{position:absolute;left:16px;bottom:16px;z-index:3}
.start-block{padding-top:2px}
.section-title{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:18px}
.section-title h2{font-family:"Yu Mincho","Hiragino Mincho ProN",serif;font-size:30px;margin:0}
.section-title .sub{font-size:10px;color:#c48873;margin-left:7px}
.start-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.story-card{border:1px solid var(--line);background:rgba(255,255,255,.35);position:relative}
.story-card .num{position:absolute;top:0;left:0;padding:7px 10px;font:900 14px Georgia;background:var(--blue);z-index:3}
.story-card:nth-child(2) .num{background:var(--yellow)}
.story-card:nth-child(3) .num{background:var(--salmon)}
.story-card .thumb{height:145px;overflow:hidden}
.story-card .body{padding:15px}
.story-card h3{font-family:"Yu Mincho","Hiragino Mincho ProN",serif;font-size:20px;line-height:1.45;margin:0 0 8px}
.story-card p{font-size:11px;color:var(--muted);margin:0 0 14px}
.story-card .cta{font-size:11px;font-weight:900;border-bottom:1px solid;padding-bottom:3px}
/* pickup */
.section{padding:45px 0;border-top:1px solid var(--line)}
.pick-grid{display:grid;grid-template-columns:repeat(4,1fr) .95fr;gap:12px}
.pick-card{border:1px solid var(--line);background:rgba(255,255,255,.38)}
.pick-card .thumb{height:130px}
.pick-card .body{padding:13px}
.pick-card h3{font-family:"Yu Mincho","Hiragino Mincho ProN",serif;font-size:17px;line-height:1.5;margin:6px 0}
.pick-card .labels{display:flex;gap:5px}.pick-card .labels span{font-size:8px;padding:4px 6px;background:#e7ead7;border-radius:4px}
.pick-card .cta{font-size:10px;font-weight:900}
.request-card{background:#fbf7e8;border:1px solid var(--line);padding:24px;position:relative;transform:rotate(-1deg)}
.request-card:before,.request-card:after{content:"";position:absolute;width:55px;height:16px;background:rgba(228,198,130,.55);top:-8px}
.request-card:before{left:17px;transform:rotate(-5deg)}.request-card:after{right:18px;transform:rotate(5deg)}
.request-card h3{font-family:"Yu Mincho","Hiragino Mincho ProN",serif;font-size:20px;line-height:1.6}
.request-card p{font-size:11px;line-height:1.9}
/* three pillars */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.pillar{border-right:1px solid var(--line);padding-right:18px}
.pillar:last-child{border-right:0;padding-right:0}
.pillar-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.pillar-head h2{font-size:24px;margin:0}.pillar .visual{height:185px;overflow:hidden;border:1px solid var(--line)}
.pillar h3{font-family:"Yu Mincho","Hiragino Mincho ProN",serif;font-size:20px;margin:12px 0 4px}
.pillar p{font-size:11px;color:var(--muted);margin:0 0 8px}
/* ranking/back */
.bottom-grid{display:grid;grid-template-columns:.29fr .41fr .30fr;gap:24px;padding-bottom:45px}
.ranking ol{list-style:none;padding:0;margin:12px 0 0}.ranking li{display:grid;grid-template-columns:28px 1fr auto;gap:8px;padding:7px 0;border-bottom:1px solid rgba(0,0,0,.08);font-size:10px}.ranking .rank{background:var(--yellow);text-align:center;font-weight:900;padding-top:2px}
.back-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}.back-cover{aspect-ratio:3/4;background:linear-gradient(145deg,#c7d6dd,#efe1c8);padding:10px;display:flex;align-items:end;font-family:"Yu Mincho",serif;font-size:10px;border:1px solid var(--line)}
.whats-next{background:#d8e3e2;padding:25px;min-height:220px;position:relative}.whats-next h3{font-family:"Yu Mincho",serif;font-size:25px;margin:3px 0}.whats-next p{font-size:11px}
footer{background:#111;color:#fff;padding:20px 0}.footer-inner{display:flex;justify-content:space-between;gap:25px;align-items:center;font-size:9px}.footer-links{display:flex;gap:20px}
@media(max-width:900px){
  nav a:not(.search-icon):not(.menu-icon){display:none}
  .hero{grid-template-columns:1fr}.hero-photo{min-height:320px}.editor-note{display:none}
  .issue-start{grid-template-columns:1fr}.issue-card{min-height:460px}
  .pick-grid{grid-template-columns:1fr 1fr}.request-card{grid-column:1/-1}
  .pillars,.bottom-grid{grid-template-columns:1fr}.pillar{border-right:0;border-bottom:1px solid var(--line);padding:0 0 22px}
}
@media(max-width:560px){
  .start-grid,.pick-grid{grid-template-columns:1fr}
  .head{min-height:64px}.logo{font-size:34px}
  .hero-copy h1{font-size:54px}
  .issue-card{min-height:410px}
}
