:root {
  --white:#fff; --paper:#fafaf7; --ink:#2d3a2e; --muted:#6a7a6a; --sage:#7fa87f; --sage-soft:#e6eee4; --line:#e6e6dc;
  --f-display:'Zen Maru Gothic','Noto Sans JP',sans-serif; --f-body:'Noto Sans JP',sans-serif; --f-latin:'Inter','Noto Sans JP',sans-serif;
  --ease-expo:cubic-bezier(.16,1,.3,1); --ease-out:cubic-bezier(.22,1,.36,1); --ease-pop:cubic-bezier(.34,1.56,.64,1);
  --admin-offset:0px;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:110px; }
body { margin:0; background:var(--white); color:var(--ink); font-family:var(--f-body); line-height:1.8; -webkit-font-smoothing:antialiased; overflow-x:clip; }
a { color:inherit; text-decoration:none; }
h1,h2,h3,h4,h5,h6 { font-family:var(--f-display); margin:0; text-wrap:pretty; overflow-wrap:anywhere; }
img { max-width:100%; height:auto; vertical-align:middle; }
button,input,textarea,select { font:inherit; }
button { cursor:pointer; }
button:disabled { cursor:wait; }
[hidden] { display:none !important; }
:focus-visible { outline:3px solid #4f784f; outline-offset:5px; }
.screen-reader-text { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.skip-link:focus { position:fixed; top:calc(12px + var(--admin-offset)); left:12px; z-index:10000; padding:14px 24px; width:auto; height:auto; clip-path:none; background:var(--ink); color:#fff; border-radius:999px; }
.cover { position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:cover; }
.ph { position:absolute; inset:0; display:block; background:repeating-linear-gradient(135deg,#eef2ec 0 10px,#f6f8f4 10px 20px); }
.ph-leaf { position:absolute; width:28%; aspect-ratio:1; top:50%; left:50%; transform:translate(-50%,-50%) rotate(-15deg); border-radius:50% 50% 50% 8%; background:linear-gradient(135deg,#cedfc9,#a9c3a2); box-shadow:16px 24px 40px #2d3a2e12; }
.progress { position:fixed; top:var(--admin-offset); left:0; right:0; height:3px; z-index:100; background:var(--sage); transform:scaleX(0); transform-origin:left; }
@keyframes reveal { from { opacity:0; transform:translateY(24px); filter:blur(8px); } to { opacity:1; transform:none; filter:blur(0); } }
.motion-ready .reveal { animation:reveal 1s var(--ease-expo) backwards; animation-delay:calc(var(--i,0)*90ms + 100ms); }
.split .ch { display:inline-block; white-space:pre; animation:reveal 1s var(--ease-expo) backwards; animation-delay:calc(var(--i)*45ms + 250ms); }
.motion-ready .io { opacity:0; transform:translateY(36px); transition:opacity .9s var(--ease-expo),transform .9s var(--ease-expo); transition-delay:calc(var(--d,0)*90ms); }
.motion-ready .io.in { opacity:1; transform:none; }
.motion-ready .wipe { clip-path:inset(0 100% 0 0 round 24px); transition:clip-path 1.2s var(--ease-expo) .15s; }
.motion-ready .in .wipe,.motion-ready .wipe.in { clip-path:inset(0 round 24px); }
.nav { position:fixed; top:calc(16px + var(--admin-offset)); left:50%; transform:translateX(-50%); z-index:60; width:min(1180px,calc(100% - 32px)); display:flex; align-items:center; gap:32px; padding:12px 14px 12px 22px; border-radius:999px; background:rgba(255,255,255,.72); -webkit-backdrop-filter:blur(14px) saturate(1.4); backdrop-filter:blur(14px) saturate(1.4); border:1px solid rgba(45,58,46,.06); transition:box-shadow .4s; }
.nav.scrolled { top:calc(10px + var(--admin-offset)); padding-top:8px; padding-bottom:8px; box-shadow:0 8px 30px #2d3a2e14; }
.logo { display:flex; align-items:center; gap:10px; font:900 18px var(--f-display); flex-shrink:0; }
.logo b { color:var(--sage); font-weight:900; }
.logo-mark { width:26px; height:26px; border-radius:50% 50% 50% 8px; background:var(--sage); transition:transform .6s var(--ease-pop); flex-shrink:0; }
.logo:hover .logo-mark { transform:rotate(-45deg) scale(1.08); }
.custom-logo-link { flex-shrink:0; }
.custom-logo { width:auto; max-width:180px; height:36px; object-fit:contain; }
.nav-links { flex:1; }
.menu { list-style:none; padding:0; margin:0; }
.nav-links > .menu { display:flex; gap:6px; justify-content:center; }
.nav-links a { display:block; padding:8px 16px; border-radius:999px; font-size:13.5px; font-weight:500; white-space:nowrap; transition:background .3s,color .3s; }
.nav-links a:hover,.nav-links .current-menu-item > a { background:var(--sage-soft); }
.nav-links li { position:relative; }
.sub-menu { list-style:none; margin:0; padding:8px; position:absolute; top:100%; left:0; min-width:180px; border-radius:18px; background:#fff; box-shadow:0 8px 30px #2d3a2e14; visibility:hidden; opacity:0; }
.menu li:hover > .sub-menu,.menu li:focus-within > .sub-menu { visibility:visible; opacity:1; }
.nav-cta { display:inline-block; background:var(--ink); color:#fff; padding:10px 20px; border-radius:999px; font-size:13px; font-weight:700; white-space:nowrap; }
.menu-toggle { display:none; flex-shrink:0; width:44px; height:44px; border:0; border-radius:50%; background:var(--sage-soft); color:var(--ink); }
.menu-icon,.menu-icon::before,.menu-icon::after { display:block; width:18px; height:2px; background:currentColor; position:relative; margin:auto; }
.menu-icon::before,.menu-icon::after { content:''; position:absolute; left:0; top:-6px; }
.menu-icon::after { top:6px; }
.btn { display:inline-flex; align-items:center; gap:10px; padding:16px 28px; border-radius:999px; font:700 14.5px var(--f-display); transition:background .3s,color .3s,box-shadow .3s; }
.btn .arrow,.read-link .arrow { display:inline-block; transition:transform .4s var(--ease-pop); }
.btn:hover .arrow,.feat-card:hover .arrow { transform:translateX(5px); }
.btn-primary { background:var(--sage); color:#fff; box-shadow:0 10px 30px #7fa87f59; }
.btn-primary:hover { background:#6e9a6e; }
.btn-ghost { border:1.5px solid var(--ink); }
.btn-ghost:hover { background:var(--ink); color:#fff; }
.magnetic { transition:transform .35s var(--ease-out),background .3s,color .3s; }
.hero { position:relative; min-height:100vh; padding:160px 0 100px; overflow:hidden; background:var(--paper); display:flex; align-items:center; }
.blob { position:absolute; border-radius:50%; filter:blur(60px); opacity:.7; pointer-events:none; }
.blob-1 { width:560px; height:560px; background:#dfeadb; top:-140px; right:-80px; animation:drift 18s ease-in-out infinite alternate; }
.blob-2 { width:420px; height:420px; background:#f1efe4; bottom:-120px; left:-100px; animation:drift 22s ease-in-out infinite alternate-reverse; }
@keyframes drift { to { transform:translate(-60px,50px) scale(1.12); } }
.hero-inner { position:relative; z-index:3; width:min(1180px,calc(100% - 64px)); margin:0 auto; }
.hero-inner > * { max-width:58%; }
.eyebrow { font:600 12px/1.7 var(--f-latin); letter-spacing:.14em; color:var(--sage); margin:0 0 28px; }
.hero-title { font-weight:900; font-size:clamp(40px,5.6vw,84px); line-height:1.15; letter-spacing:-.01em; margin-bottom:32px; }
.accent { color:var(--sage); }
.hero-sub { font-size:16px; color:var(--muted); line-height:2; margin:0 0 40px; max-width:520px; }
.hero-actions { display:flex; gap:14px; flex-wrap:wrap; }
.hero-float { position:absolute; inset:0; z-index:2; pointer-events:none; }
.float-card { position:absolute; border-radius:28px; overflow:hidden; background:#fff; box-shadow:0 30px 60px #2d3a2e1f; animation:bob 7s ease-in-out infinite; }
.fc-1 { width:280px; height:340px; right:4%; top:16%; }
.fc-2 { width:180px; height:180px; right:26%; top:62%; border-radius:50%; animation-delay:-2s; }
.fc-3 { width:230px; height:170px; right:2%; top:66%; animation-delay:-4s; }
@keyframes bob { 50% { translate:0 -14px; } }
.fc-tag { position:absolute; top:14px; left:14px; max-width:calc(100% - 28px); background:#fff; font:700 11.5px/1.5 var(--f-display); padding:6px 12px; border-radius:999px; }
.scroll-hint { position:absolute; left:50%; bottom:28px; transform:translateX(-50%); z-index:3; display:flex; flex-direction:column; align-items:center; gap:8px; font:600 10.5px var(--f-latin); letter-spacing:.2em; text-transform:uppercase; color:var(--muted); }
.scroll-hint span { width:1.5px; height:40px; background:linear-gradient(var(--sage),transparent); animation:hint 2s var(--ease-out) infinite; transform-origin:top; }
@keyframes hint { 0% { transform:scaleY(0); } 50% { transform:scaleY(1); } 100% { transform:scaleY(1); opacity:0; } }
.marquee { background:var(--ink); color:#fff; overflow:hidden; padding:22px 0; }
.marquee-track { display:flex; align-items:center; width:max-content; animation:marquee 32s linear infinite; }
.marquee span { font:900 26px var(--f-display); padding:0 28px; white-space:nowrap; }
.marquee i { width:10px; height:10px; border-radius:50%; background:var(--sage); flex-shrink:0; }
@keyframes marquee { to { transform:translate3d(-50%,0,0); } }
.section { width:min(1180px,calc(100% - 64px)); margin:0 auto; padding:130px 0 40px; }
.sec-head { margin-bottom:48px; }
.sec-en { display:inline-block; font:600 12px var(--f-latin); letter-spacing:.16em; text-transform:uppercase; color:var(--sage); margin-bottom:14px; }
.sec-head h1,.sec-head h2,.hscroll-head h2,.about h2 { font-weight:900; font-size:clamp(30px,3.6vw,48px); line-height:1.3; }
.pill { display:inline-block; background:var(--sage-soft); font:700 11.5px/1.6 var(--f-display); padding:5px 14px; border-radius:999px; }
.feat-card { display:grid; grid-template-columns:1.15fr 1fr; gap:56px; align-items:center; transform-style:preserve-3d; transition:transform .5s var(--ease-out); }
.feat-img { position:relative; aspect-ratio:4/3; border-radius:24px; overflow:hidden; }
.feat-img > .cover,.feat-img > .ph { transition:transform 1.2s var(--ease-expo); }
.feat-card:hover .feat-img > * { transform:scale(1.05); }
.feat-body h3 { font-weight:900; font-size:clamp(22px,2.3vw,30px); line-height:1.5; margin:18px 0; }
.feat-body p { color:var(--muted); font-size:14.5px; margin:0 0 22px; }
.feat-meta { display:flex; gap:18px; font:500 12px var(--f-latin); color:#9aa79a; margin-bottom:28px; }
.read-link { font:700 15px var(--f-display); color:var(--sage); border-bottom:2px solid var(--sage); padding-bottom:4px; }
/* Native horizontal scrolling is the baseline; pinning is progressive enhancement. */
.hscroll { position:relative; margin-top:120px; background:var(--paper); }
.hscroll-sticky { display:flex; align-items:center; gap:48px; padding:90px 0 90px max(32px,calc((100% - 1180px)/2)); }
.hscroll-head { flex:0 0 340px; }
.hscroll-head p { color:var(--muted); font-size:14.5px; margin:20px 0 32px; }
.hscroll-bar { width:160px; height:3px; background:var(--line); border-radius:3px; overflow:hidden; }
.hscroll-bar span { display:block; height:100%; background:var(--sage); transform-origin:left; transform:scaleX(0); }
.hscroll-viewport { flex:1; min-width:0; overflow-x:auto; padding:20px 0 35px; scroll-snap-type:x mandatory; overscroll-behavior-x:contain; }
.hscroll-track { display:flex; width:max-content; gap:24px; padding-right:60px; }
.hscroll.is-pinned { height:320vh; }
.is-pinned .hscroll-sticky { position:sticky; top:var(--admin-offset); height:calc(100vh - var(--admin-offset)); padding-top:70px; padding-bottom:30px; }
.is-pinned .hscroll-viewport { scrollbar-width:none; scroll-snap-type:none; }
.is-pinned .hscroll-viewport::-webkit-scrollbar { display:none; }
.h-card { flex:0 0 340px; width:340px; height:460px; position:relative; border-radius:28px; overflow:hidden; background:#fff; display:flex; flex-direction:column; box-shadow:0 20px 50px #2d3a2e12; transition:transform .5s var(--ease-pop); scroll-snap-align:start; }
.h-card:hover { transform:translateY(-10px) rotate(-1deg); }
.h-card:focus-visible { outline-offset:-4px; }
.h-image { position:relative; min-height:150px; flex:1; }
.h-body { padding:22px 26px 26px; position:relative; }
.h-period { position:absolute; top:-38px; right:22px; width:76px; height:76px; border-radius:50%; background:var(--sage); color:#fff; display:flex; align-items:baseline; justify-content:center; padding-top:18px; font:700 26px var(--f-latin); box-shadow:0 10px 24px #7fa87f66; }
.h-period small { font:700 11px var(--f-display); margin-left:1px; }
.h-body:has(.h-period) { padding-top:42px; }
.h-body h3 { font-weight:900; font-size:19px; line-height:1.6; margin-bottom:4px; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.h-body p { margin:0; color:var(--muted); font-size:13.5px; }
.is-empty .hscroll-track { width:auto; }
.bento { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); grid-auto-rows:210px; gap:18px; }
.bento-item { position:relative; border-radius:26px; overflow:hidden; background:var(--paper); isolation:isolate; }
.b-lg { grid-column:span 2; grid-row:span 2; }
.b-tall { grid-row:span 2; }
.bento-item > .cover,.bento-item > .ph { transition:transform 1s var(--ease-expo); }
.bento-item:hover > .cover,.bento-item:hover > .ph { transform:scale(1.06); }
.b-label { position:absolute; left:14px; right:14px; bottom:14px; z-index:2; background:#fff; border-radius:18px; padding:16px 18px; display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; transition:transform .5s var(--ease-pop); }
.bento-item:hover .b-label { transform:translateY(-4px); }
.b-label h3 { font-weight:900; font-size:16px; }
.b-label span { font:600 11.5px var(--f-latin); color:var(--sage); white-space:nowrap; }
.bento-item.solid { background:var(--sage); }
.solid .b-label { background:transparent; color:#fff; top:22px; bottom:auto; flex-direction:column; align-items:flex-start; }
.solid .b-label h3 { font-size:26px; }
.solid .b-label span { color:#fff; }
.bento-item.outline { background:#fff; border:1.5px dashed #c9d6c6; }
.outline .b-label { background:transparent; inset:0; justify-content:center; flex-direction:column; }
.spot::before { content:''; position:absolute; inset:0; z-index:1; pointer-events:none; opacity:0; transition:opacity .4s; background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),#ffffff8c,transparent 60%); }
.spot:hover::before { opacity:1; }
.latest-grid { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:48px; }
.cards { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:40px 28px; }
.card { min-width:0; }
.card-img { position:relative; aspect-ratio:16/10; border-radius:20px; overflow:hidden; margin-bottom:16px; }
.card-img > .cover,.card-img > .ph { transition:transform 1s var(--ease-expo); }
.card:hover .card-img > .cover,.card:hover .card-img > .ph { transform:scale(1.06); }
.card-img .pill { position:absolute; top:12px; left:12px; max-width:calc(100% - 24px); background:#fff; }
.card h3 { font-weight:700; font-size:16.5px; line-height:1.6; transition:color .3s; }
.card:hover h3 { color:var(--sage); }
.card-meta { font:500 12px/1.6 var(--f-latin); color:#9aa79a; margin-top:8px; }
.side { display:flex; flex-direction:column; gap:20px; position:sticky; top:calc(100px + var(--admin-offset)); align-self:start; min-width:0; }
.side-box { background:var(--paper); border-radius:22px; padding:24px; overflow-wrap:anywhere; }
.side-title { font-weight:900; font-size:15px; margin-bottom:14px; }
.rank { list-style:none; margin:0; padding:0; counter-reset:r; }
.rank li { counter-increment:r; display:flex; gap:12px; padding:11px 0; border-top:1px solid var(--line); font-size:13px; line-height:1.6; }
.rank li:first-child { border-top:0; }
.rank li::before { content:counter(r); font:700 13px var(--f-latin); color:#fff; background:var(--sage); width:22px; height:22px; border-radius:50%; display:grid; place-items:center; flex-shrink:0; }
.rank a:hover { color:var(--sage); }
.search-field { display:flex; align-items:center; background:#fff; border:1px solid var(--line); border-radius:999px; padding:5px 6px 5px 18px; font-size:13px; }
.search-field input { min-width:0; width:100%; border:0; background:transparent; color:var(--ink); padding:8px 0; }
.search-field button { border:0; border-radius:50%; width:40px; height:40px; background:var(--sage-soft); color:var(--ink); flex-shrink:0; }
.more-wrap { text-align:center; margin-top:64px; }
.about { background:var(--paper); margin-top:130px; padding:120px 0; }
.about-inner { width:min(1000px,calc(100% - 64px)); margin:0 auto; display:grid; grid-template-columns:360px minmax(0,1fr); gap:72px; align-items:center; }
.about-photo { position:relative; aspect-ratio:1; border-radius:50%; overflow:hidden; }
.motion-ready .about-photo.wipe { clip-path:circle(0% at 50% 50%); transition:clip-path 1.4s var(--ease-expo),opacity .9s,transform .9s var(--ease-expo); }
.motion-ready .about-photo.wipe.in { clip-path:circle(50% at 50% 50%); }
.about-role { font:700 13px/1.8 var(--f-display); color:var(--sage); margin:10px 0 22px; }
.about-text > p:not(.about-role) { color:var(--muted); font-size:15px; line-height:2; margin:0 0 30px; }
.sns { display:flex; gap:10px; flex-wrap:wrap; }
.sns a { display:inline-block; padding:10px 20px; border-radius:999px; background:#fff; font:600 13px var(--f-latin); border:1px solid var(--line); }
.sns a:hover { background:var(--sage); color:#fff; }
.footer { background:var(--ink); color:#dfe7dd; padding:70px 0 28px; overflow:hidden; }
.footer-big-track { display:flex; width:max-content; animation:marquee 40s linear infinite; }
.footer-big span { font:900 clamp(70px,11vw,160px)/1 var(--f-display); padding-right:80px; white-space:nowrap; color:transparent; -webkit-text-stroke:1.5px #dfe7dd66; }
.footer-big span:nth-child(odd) { color:var(--sage); -webkit-text-stroke:0; }
.footer-row { width:min(1180px,calc(100% - 64px)); margin:56px auto 0; display:flex; justify-content:space-between; font:500 12.5px/1.8 var(--f-latin); flex-wrap:wrap; gap:16px; }
.footer-row .menu { display:flex; gap:24px; flex-wrap:wrap; }
.footer-row a:hover { color:var(--sage); }
.motion-toggle { color:inherit; background:transparent; padding:5px 12px; border:1px solid #dfe7dd66; border-radius:999px; font-size:11px; }
.archive-main,.page-main { padding-top:170px; padding-bottom:120px; min-height:70vh; }
.archive-description { color:var(--muted); margin-top:20px; }
.archive-main .sec-head .search-field { max-width:480px; margin-top:30px; }
.page-main { max-width:940px; }
.page-main .prose { margin:auto; }
.page-eyecatch { position:relative; aspect-ratio:21/9; border-radius:28px; overflow:hidden; margin-bottom:48px; }
.empty-state { color:var(--muted); background:var(--paper); padding:32px; border-radius:22px; grid-column:1/-1; }
.empty-state h2 { font-size:22px; color:var(--ink); }
.pagination { margin-top:64px; }
.pagination .nav-links { display:flex; justify-content:center; gap:8px; flex-wrap:wrap; }
.pagination .page-numbers { padding:10px 16px; border:1px solid var(--line); border-radius:50px; }
.pagination .current { background:var(--sage); color:#fff; }
.error-main { padding-top:200px; padding-bottom:140px; }
.error-main h1 { font-size:clamp(30px,4vw,56px); }
.error-main .search-field { max-width:480px; margin:32px 0; }
body.admin-bar { --admin-offset:32px; }
@media (max-width:1100px) and (min-width:901px) { .nav { gap:14px; } .nav-links a { padding:8px 10px; } .hscroll-head { flex-basis:300px; } .hero-title { font-size:5.4vw; } }
@media (max-width:900px) {
  .nav { gap:12px; justify-content:space-between; }
  .nav .nav-links { display:none; }
  .menu-ready .menu-toggle { display:block; }
  .nav-cta { margin-left:auto; }
  .menu-open .nav .nav-links { display:block; position:absolute; top:calc(100% + 10px); left:0; right:0; padding:14px; background:#fff; border:1px solid var(--line); border-radius:24px; box-shadow:0 15px 40px #2d3a2e1f; max-height:70vh; overflow:auto; }
  .nav-links > .menu { flex-direction:column; }
  .sub-menu { position:static; visibility:visible; opacity:1; box-shadow:none; padding:0 0 0 16px; }
  body:not(.menu-ready) .nav { position:relative; top:0; margin:12px 0; flex-wrap:wrap; border-radius:24px; }
  body:not(.menu-ready) .nav .nav-links { display:block; order:3; flex-basis:100%; }
  body:not(.menu-ready) .nav-links > .menu { flex-direction:row; flex-wrap:wrap; }
  .hero { padding-top:130px; align-items:flex-start; flex-direction:column; }
  .hero-inner > * { max-width:none; }
  .hero-float { position:relative; inset:auto; width:100%; height:300px; margin-top:30px; }
  .fc-1 { width:180px; height:220px; right:6%; top:0; }
  .fc-2 { width:120px; height:120px; left:8%; right:auto; top:140px; }
  .fc-3,.scroll-hint { display:none; }
  .feat-card { grid-template-columns:1fr; gap:28px; }
  .hscroll.is-pinned { height:auto; }
  .hscroll-sticky,.is-pinned .hscroll-sticky { position:relative; top:0; height:auto; flex-direction:column; align-items:flex-start; gap:28px; padding:80px 24px; }
  .hscroll-head { flex:none; }
  .hscroll-viewport { flex:none; width:100%; }
  .h-card { flex-basis:270px; width:270px; height:400px; }
  .bento { grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-rows:170px; }
  .b-lg { grid-column:span 2; }
  .b-label { padding:12px; }
  .b-label h3 { font-size:15px; }
  .solid .b-label h3 { font-size:22px; }
  .latest-grid { grid-template-columns:minmax(0,1fr); }
  .cards { grid-template-columns:minmax(0,1fr); }
  .side { position:static; }
  .about-inner { grid-template-columns:minmax(0,1fr); gap:40px; justify-items:center; text-align:center; }
  .about-photo { width:240px; }
  .sns { justify-content:center; }
  .section,.hero-inner,.about-inner,.footer-row { width:calc(100% - 48px); }
  .section { padding-top:90px; }
  .archive-main,.page-main { padding-top:140px; }
}
@media (max-width:782px) { body.admin-bar { --admin-offset:46px; } }
@media (max-width:600px) { body.admin-bar .nav { --admin-offset:0px; } body.admin-bar .nav:not(.scrolled) { top:62px; } body.admin-bar .progress { top:0; } }
@media (max-width:380px) { .nav { padding-left:14px; gap:8px; } .logo { font-size:16px; gap:6px; } .nav-cta { padding:10px 12px; font-size:11px; } .hero-title { font-size:38px; } }
/* Motion can be paused via the footer as well as the operating system. */
.motion-paused *,.motion-paused *::before,.motion-paused *::after { animation:none !important; transition:none !important; }
.motion-paused { scroll-behavior:auto; }
.motion-paused .io { opacity:1 !important; transform:none !important; }
.motion-paused .wipe { clip-path:none !important; }
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation:none !important; transition:none !important; }
  .motion-ready .io { opacity:1; transform:none; }
  .motion-ready .wipe { clip-path:none !important; }
}

/* Editorial layout: keep the key visual together at any viewport height. */
h1,h2,h3,h4,h5,h6 { overflow-wrap:break-word; word-break:normal; line-break:strict; }
.hero { min-height:0; padding:146px 0 84px; display:block; }
.hero-shell { position:relative; z-index:2; width:min(1180px,calc(100% - 64px)); margin:auto; display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:56px; align-items:center; }
.hero-inner { width:100%; margin:0; }
.hero-inner > * { max-width:100%; }
.hero .eyebrow { font-size:10px; letter-spacing:.12em; margin-bottom:24px; }
.hero-title { font-size:clamp(34px,3.8vw,52px); line-height:1.4; letter-spacing:-.055em; margin-bottom:24px; text-wrap:initial; }
.hero-line { display:block; }
.hero-title .accent,.hero-ending { display:inline-block; white-space:nowrap; }
.hero-sub { max-width:460px; font-size:14px; line-height:2.1; margin-bottom:30px; }
.hero-actions { gap:12px; }
.hero-actions .btn { padding:15px 20px; font-size:13px; white-space:nowrap; }
.hero-float { position:relative; inset:auto; width:100%; height:auto; margin:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; pointer-events:auto; }
.hero-float::before { content:''; position:absolute; inset:-24px -22px; z-index:-1; border-radius:48px; background:linear-gradient(145deg,#e6eee480,#f1efe440); transform:rotate(3deg); }
.hero-float .float-card { position:relative; inset:auto; width:auto; height:auto; border-radius:18px; animation:none; box-shadow:0 12px 32px #2d3a2e12; display:block; transition:transform .5s var(--ease-out),box-shadow .5s; }
.hero-float .float-card:hover { transform:translateY(-5px); box-shadow:0 18px 40px #2d3a2e20; }
.hero-float .fc-1 { grid-column:1/-1; }
.kv-image { position:relative; aspect-ratio:16/9; overflow:hidden; background:#eef2ec; }
.kv-image .cover { object-fit:contain; transition:transform .7s var(--ease-expo); }
.kv-caption { position:relative; padding:12px 36px 14px 16px; background:#fff; }
.kv-label { display:block; font:700 9px/1.5 var(--f-latin); color:#658665; letter-spacing:.12em; margin-bottom:4px; }
.kv-title { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; font:700 12px/1.6 var(--f-display); }
.fc-1 .kv-title { -webkit-line-clamp:1; font-size:14px; }
.kv-arrow { position:absolute; right:14px; top:50%; transform:translateY(-50%); color:var(--sage); font-size:18px; }
.kv-placeholder { position:relative; grid-column:1/-1; aspect-ratio:16/10; border-radius:24px; overflow:hidden; }
.kv-placeholder-label { position:absolute; bottom:24px; left:24px; font:700 18px var(--f-display); }
.hero .scroll-hint { display:none; }
.marquee { padding:17px 0; }
.marquee span { font-size:20px; }
.section { padding-top:96px; }
.sec-head { margin-bottom:36px; }
.sec-head h1,.sec-head h2,.about h2 { font-size:clamp(27px,3vw,40px); line-height:1.5; text-wrap:balance; }
.feat-card { gap:44px; }
.feat-img { aspect-ratio:16/10; background:var(--paper); }
.feat-img > .cover { object-fit:contain; }
.feat-body h3 { font-size:clamp(20px,2vw,26px); line-height:1.75; text-wrap:initial; }
.feat-body p { line-height:1.95; }
.hscroll { margin-top:72px; }
.hscroll-head { flex-basis:360px; }
.hscroll-head h2 { font-size:clamp(27px,2.3vw,32px); line-height:1.65; letter-spacing:-.035em; }
.heading-phrase { display:block; }
.hscroll.is-empty .hscroll-sticky { max-width:1180px; margin:auto; padding:52px 0; gap:48px; }
.is-empty .hscroll-head { flex-basis:50%; }
.is-empty .hscroll-head p { margin-bottom:0; }
.is-empty .hscroll-bar { display:none; }
.is-empty .empty-state { padding:24px 28px; background:#fff; border:1px dashed #c9d6c6; font-size:14px; }
.bento { grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-rows:auto; gap:22px; }
.bento-item { aspect-ratio:1.9; border-radius:24px; }
.b-lg,.b-tall { grid-column:auto; grid-row:auto; }
.bento-item > .cover { width:52%; object-fit:contain; background:#eef2ec; }
.bento-item > .ph { right:48%; }
.bento-item .b-label { left:52%; right:0; top:0; bottom:0; border-radius:0; background:var(--paper); padding:24px; flex-direction:column; align-items:flex-start; justify-content:center; gap:10px; }
.bento-item .b-label h3 { font-size:21px; }
.bento-item.solid .b-label { left:0; padding:32px; background:var(--sage); }
.solid::after { content:'↗'; position:absolute; right:28px; bottom:16px; font-size:64px; color:#ffffff50; }
.category-all { display:flex; justify-content:flex-end; align-items:center; gap:24px; margin-top:26px; }
.category-all > span { font:500 12px var(--f-latin); color:var(--muted); }
.category-all .read-link { font-size:13px; }
.latest-grid { align-items:start; }
.cards { align-content:start; }
.latest .more-wrap { text-align:left; margin-top:36px; }
.latest .side { position:static; }
.about { margin-top:80px; padding:80px 0; }
.about-inner { grid-template-columns:280px minmax(0,1fr); gap:64px; }
.archive-main,.page-main { padding-top:170px; }
@media (min-width:901px) and (max-width:1100px) {
  .hero-shell { gap:32px; }
  .hero-title { font-size:40px; }
  .hero-actions .btn { padding:13px 16px; font-size:12px; }
  .hscroll-head { flex-basis:320px; }
  .hscroll-head h2 { font-size:29px; }
}
@media (max-width:900px) {
  .hero { padding:120px 0 56px; }
  .hero-shell { width:calc(100% - 48px); max-width:620px; grid-template-columns:minmax(0,1fr); gap:38px; }
  .hero-inner { width:100%; }
  .hero-title { font-size:clamp(28px,7.8vw,48px); line-height:1.45; letter-spacing:-.055em; margin-bottom:18px; }
  .hero .eyebrow { font-size:9px; letter-spacing:.07em; margin-bottom:18px; }
  .hero-sub { font-size:13px; margin-bottom:24px; }
  .hero-actions { gap:10px; }
  .hero-actions .btn { padding:13px 17px; font-size:12px; }
  .hero-float { width:100%; height:auto; margin:0; gap:12px; }
  .hero-float::before { inset:-12px; border-radius:32px; }
  .hero-float .fc-3 { display:block; }
  .kv-caption { padding:10px 28px 12px 12px; }
  .kv-title { font-size:11px; }
  .fc-1 .kv-title { font-size:13px; }
  .kv-arrow { right:10px; font-size:15px; }
  .section { padding-top:64px; padding-bottom:24px; }
  .sec-head { margin-bottom:26px; }
  .sec-head h1,.sec-head h2,.about h2 { font-size:clamp(24px,6.4vw,34px); }
  .feat-card { gap:24px; }
  .feat-body h3 { font-size:21px; line-height:1.8; }
  .hscroll { margin-top:48px; }
  .hscroll-head h2 { font-size:clamp(24px,6.3vw,30px); }
  .hscroll-sticky,.is-pinned .hscroll-sticky { padding:52px 24px; }
  .hscroll.is-empty .hscroll-sticky { width:calc(100% - 48px); padding:36px 0; gap:16px; }
  .hscroll.is-empty .hscroll-head { flex-basis:auto; }
  .is-empty .hscroll-viewport { padding:0; }
  .is-empty .hscroll-track { padding-right:0; }
  .bento { grid-template-columns:minmax(0,1fr); grid-auto-rows:auto; gap:14px; }
  .bento-item { aspect-ratio:2.5; border-radius:18px; }
  .bento-item .b-label { padding:18px; }
  .bento-item .b-label h3 { font-size:18px; }
  .bento-item.solid { aspect-ratio:auto; min-height:116px; }
  .bento-item.solid .b-label { padding:22px; }
  .category-all { justify-content:space-between; gap:12px; }
  .latest-grid { gap:36px; }
  .latest .side { display:grid; grid-template-columns:minmax(0,1fr); gap:16px; }
  .latest .more-wrap { text-align:center; }
  .about { margin-top:48px; padding:56px 0; }
  .about-inner { grid-template-columns:minmax(0,1fr); gap:28px; }
  .about-photo { width:180px; }
  .footer { padding-top:48px; }
  .archive-main,.page-main { padding-top:140px; }
}