/* Horizontal section navigation and compact game screenshot reading. */
.shell{margin-left:0}
.site-header{position:sticky;top:0;z-index:25;background:#fff;border-bottom:1px solid var(--line)}
.header-main{max-width:1200px;min-height:82px;padding:14px 28px;margin:auto;display:grid;grid-template-columns:220px minmax(220px,1fr);align-items:center;gap:32px}
.header-brand{display:flex;align-items:center;gap:12px;width:max-content}
.header-brand .brand-stone{width:43px;height:44px;font-size:20px;border-radius:13px 17px 12px 15px}
.header-brand strong{display:block;color:var(--forest);font-size:21px;letter-spacing:2px;line-height:1.3}
.header-brand small{display:block;font-size:10px;color:var(--muted);letter-spacing:2px;margin-top:5px}
.header-main .search{width:100%;max-width:540px;justify-self:end;height:41px;background:var(--paper)}
.header-main .source-link{display:block;margin-left:auto;font-size:11px}
.category-bar{border-top:1px solid #f0f3ee}
#nav{max-width:1200px;margin:auto;padding:0 28px;display:flex;align-items:center;gap:26px;overflow-x:auto;scrollbar-width:thin;flex:none}
.category-tab{position:relative;display:block;flex:0 0 auto;padding:14px 0 13px;font-size:13px;font-weight:600;line-height:1.5;color:#758274;white-space:nowrap;border-bottom:3px solid transparent}
.category-tab:hover{color:var(--green)}
.category-tab.active{color:var(--green);border-bottom-color:var(--green)}
main{max-width:1180px;min-height:calc(100vh - 209px);padding:30px 28px 48px;scroll-margin-top:145px}
.site-footer{max-width:1180px;padding:22px 28px}
.site-footer a{color:var(--green)}
.hero{display:grid;grid-template-columns:1.05fr 1fr;border-radius:12px}
.hero .hero-art{height:260px;width:100%;object-fit:cover;object-position:center 42%}
.hero .hero-caption{padding:28px 34px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:22px}
.hero h1{font-size:30px}
.hero .hero-caption p{font-size:13px;max-width:28em}
.hero .hero-actions{flex-wrap:wrap;flex-shrink:1;gap:10px}
.home-columns{grid-template-columns:1.3fr 1fr}
.article{max-width:940px;padding:30px 38px 36px}
.article h1{font-size:28px}
.article-header{padding-bottom:20px;margin-bottom:24px}
.article-body{font-size:15px;line-height:2}
.article-body h2{font-size:20px;margin-top:27px}
.source-paragraph{max-width:72ch}
.media-gallery{display:flex;flex-wrap:wrap;justify-content:flex-start;align-items:flex-start;gap:22px 24px;margin:20px 0 27px;max-width:100%}
.article .media-figure{margin:0;flex:0 1 auto;max-width:100%;min-width:0}
.article .media-panel{width:320px}
.article .media-screen{width:640px}
.article .article-image{display:block;height:auto;max-width:100%;max-height:none;object-fit:contain;margin:0;border:1px solid #e1e7dd}
.article .media-figure figcaption{text-align:left;font-size:10px;line-height:1.7;color:#8a9785;margin-top:7px}
.article .article-image:focus-visible{outline:3px solid var(--sun);outline-offset:4px}
.article .subpage-link{padding-left:0;padding-right:3px}
.topic-header{padding:8px 0 29px;border-bottom:1px solid var(--line);margin-bottom:9px}
.topic-header h1{font-size:30px;line-height:1.4;margin:0 0 13px;color:var(--forest)}
.topic-header p{font-size:14px;color:#7c8b74;line-height:1.9;max-width:62ch;margin:0 0 13px}
.overview-link{font-size:12px;color:var(--green);text-decoration:underline;text-underline-offset:4px}
.topic-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:34px}
.topic-link{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:24px 3px;border-bottom:1px solid var(--line);min-width:0}
.topic-link h3{margin:0 0 9px;font-size:17px;line-height:1.6;color:var(--forest)}
.topic-link p{margin:0 0 10px;color:#839079;font-size:12px;line-height:1.9;max-width:46ch;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.topic-link small{font-size:10px;color:var(--green)}
.topic-link>span{font-size:24px;color:#a4b19a;flex-shrink:0}
.topic-link:hover h3,.topic-link:hover>span{color:var(--green)}
.topic-section .section-heading{margin-bottom:0}
.topic-section .section-heading h2{font-size:21px}
.toast{left:50%}
@media(max-width:1000px){
  .header-main{grid-template-columns:190px minmax(200px,1fr);gap:24px}
  #nav{gap:22px}
  .header-main .source-link{font-size:0}
  .header-main .source-link span{font-size:15px}
  .hero .hero-caption{padding:25px}
  .hero h1{font-size:28px}
}
@media(max-width:720px){
  .header-main{min-height:0;grid-template-columns:1fr;gap:13px 20px;padding:14px 20px 13px}
  .header-brand{grid-column:1;grid-row:1;gap:10px}
  .header-brand .brand-stone{width:34px;height:35px;font-size:17px;border-radius:10px 13px 9px 11px}
  .header-brand strong{font-size:18px}
  .header-brand small{font-size:9px;letter-spacing:1px;margin-top:3px}
  .header-main .search{grid-row:2;grid-column:1/-1;height:38px;max-width:none}
  .header-main .source-link{grid-row:1;grid-column:2;font-size:11px}
  .header-main .source-link span{font-size:11px;margin-left:2px}
  #nav{padding:0 20px;gap:23px;scrollbar-width:none}
  #nav::-webkit-scrollbar{display:none}
  .category-tab{padding:11px 0 10px;font-size:12px}
  main{padding:22px 20px 38px;scroll-margin-top:165px}
  .site-footer{padding:20px;line-height:1.8}
  .hero{grid-template-columns:1fr}
  .hero .hero-art{height:195px;object-position:center 44%}
  .hero .hero-caption{padding:23px;gap:19px}
  .hero h1{font-size:27px}
  .home-columns{grid-template-columns:1fr}
  .article{padding:25px 23px}
  .article h1{font-size:26px}
  .article-body{font-size:14px}
  .media-gallery{gap:18px;margin:18px 0 24px}
  .article .media-panel{width:320px}
  .article .media-screen{width:640px}
  .topic-header h1{font-size:27px}
  .topic-grid{grid-template-columns:1fr}
  .topic-link{padding:22px 2px}
  .topic-link h3{font-size:16px}
  .topic-link p{max-width:55ch}
}
@media(max-width:440px){
  .header-main{padding:13px 15px 11px;gap:12px}
  #nav{padding:0 15px;gap:22px}
  main{padding:18px 15px 32px}
  .hero .hero-art{height:180px}
  .hero .hero-caption{padding:21px}
  .hero h1{font-size:26px}
  .hero .hero-caption p{font-size:12px}
  .article{padding:23px 18px}
  .article h1{font-size:24px}
  .article-body h2{font-size:18px}
  .article-meta{gap:9px;font-size:10px}
  .article .media-figure figcaption{font-size:10px}
  .site-footer{padding:20px 15px}
}
@media print{
  .site-header{display:none!important}
  main{padding:0}
  .article{padding:0;max-width:none}
  .media-gallery{gap:12px}
}