:root { --bg: #fffaf5; --surface: #ffffff; --ink: #252328; --muted: #927d7c; --accent: #ff526e; --accent2: #ffb321; --line: #ffe0d7; --shape: 14px; --shadow: 0 16px 40px rgba(0,0,0,.12); }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; background:var(--bg); color:var(--ink); font-family:Arial,"Microsoft YaHei",sans-serif; font-size:16px; line-height:1.65; } a { color:inherit; text-decoration:none; } img { display:block; max-width:100%; height:auto; } .shell { width:min(1180px,calc(100% - 48px)); margin:auto; }
.site-header { border-bottom:1px solid var(--line); background:var(--bg); position:relative; z-index:5; } .top-line { min-height:76px; display:flex; align-items:center; gap:28px; } .logo { display:inline-flex; align-items:center; gap:10px; font-weight:800; white-space:nowrap; } .logo-mark { color:var(--accent); font-size:23px; } .logo-name { font-size:18px; } .main-nav { display:flex; align-items:center; gap:20px; margin-left:auto; font-size:14px; color:var(--muted); } .main-nav a:hover,.text-link:hover,.site-footer a:hover { color:var(--accent); } .search-link { font-size:28px; line-height:1; color:var(--accent); } .nav-toggle { display:none; margin-left:auto; background:none; border:1px solid var(--line); color:var(--ink); padding:7px 10px; border-radius:var(--shape); }
.hero,.cyber-hero,.campus-hero,.magazine-mast,.oriental-hero,.youth-hero,.data-hero,.retro-hero { padding:76px 0 68px; display:grid; grid-template-columns:1fr 1.05fr; align-items:center; gap:70px; } .hero-copy h1,.cyber-hero h1,.campus-hero h1,.magazine-mast h1,.oriental-hero h1,.youth-hero h1,.data-hero h1,.retro-hero h1,.minimal-hero h1 { font-size:clamp(42px,6vw,76px); line-height:1.08; letter-spacing:-.05em; margin:12px 0 22px; } .hero-copy p:not(.eyebrow),.cyber-hero p:not(.eyebrow),.campus-hero p:not(.eyebrow),.magazine-mast p:not(.eyebrow),.oriental-hero p:not(.eyebrow),.youth-hero p:not(.eyebrow),.data-hero p:not(.eyebrow),.retro-hero p:not(.eyebrow),.minimal-hero>p:not(.eyebrow) { color:var(--muted); max-width:560px; font-size:18px; } .eyebrow { font-size:11px; text-transform:uppercase; letter-spacing:.18em; color:var(--accent); font-weight:800; margin:0 0 8px; } .hero-actions { display:flex; align-items:center; gap:22px; margin-top:30px; } .button { display:inline-flex; align-items:center; justify-content:center; background:var(--accent); color:#fff; padding:12px 19px; border-radius:var(--shape); font-weight:700; transition:transform .2s ease,box-shadow .2s ease; } .button:hover { transform:translateY(-3px); box-shadow:var(--shadow); } .text-link,.plain-link { color:var(--accent); font-weight:700; } .hero-art,.hero-photo,.telemetry,.scroll-art,.dashboard-art,.poster,.minimal-image { overflow:hidden; border-radius:var(--shape); box-shadow:var(--shadow); position:relative; } .hero-art img,.hero-photo img,.telemetry img,.scroll-art img,.dashboard-art img,.poster img,.minimal-image img { width:100%; aspect-ratio:3/1; object-fit:cover; }
.section { padding:60px 0; } .section-head { display:flex; align-items:end; justify-content:space-between; gap:20px; margin-bottom:24px; } .section-head h2,.panel h2,.signal-card h2,.note-board h2,.news-board h2,.feature-spread h2,.ink-map h2,.data-news h2,.minimal-columns h2 { font-size:clamp(25px,3vw,38px); line-height:1.15; margin:0; } .section-head>a,.section-head>span { color:var(--accent); font-size:14px; font-weight:700; } .manga-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:22px; } .manga-card { min-width:0; border:1px solid var(--line); background:var(--surface); border-radius:var(--shape); overflow:hidden; transition:transform .25s ease,box-shadow .25s ease; } .manga-card:hover { transform:translateY(-6px); box-shadow:var(--shadow); } .manga-card img { width:100%; aspect-ratio:5/7; object-fit:cover; } .card-body { padding:16px; } .card-body span,.manga-card p,.muted { color:var(--muted); font-size:13px; } .manga-card h2,.manga-card h3 { font-size:18px; line-height:1.25; margin:5px 0; } .manga-card p { margin:0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.panel,.signal-card,.note-board,.news-board,.index-box,.clipping-box,.matrix-panel,.table-panel { border:1px solid var(--line); background:var(--surface); padding:28px; border-radius:var(--shape); } .night-columns,.signal-grid,.campus-columns,.retro-columns,.data-columns,.minimal-columns { display:grid; grid-template-columns:1.3fr .8fr; gap:24px; padding-bottom:70px; } .category-list,.campus-links,.map-links,.mood-grid,.index-box,.clipping-box,.matrix-panel { display:grid; gap:9px; margin-top:22px; } .category-list a,.campus-links a,.map-links a,.mood-grid a,.index-box a,.clipping-box a,.matrix-panel a { display:flex; align-items:center; gap:14px; padding:12px 0; border-bottom:1px solid var(--line); } .category-list a:hover,.campus-links a:hover,.map-links a:hover,.mood-grid a:hover,.index-box a:hover,.clipping-box a:hover,.matrix-panel a:hover { color:var(--accent); } .category-list span,.map-links span,.index-box span { color:var(--accent); font-size:12px; } .category-list em,.campus-links b,.map-links small,.mood-grid span,.index-box em { margin-left:auto; color:var(--muted); font-style:normal; font-size:12px; } .rank-row { display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid var(--line); } .rank-row b,.rank-item>b,.data-row>b { font-size:18px; color:var(--accent); min-width:22px; } .rank-row img,.rank-item img,.data-row img { object-fit:cover; border-radius:calc(var(--shape) / 2); } .rank-row span,.data-row span { display:grid; gap:3px; } .rank-row small,.data-row small { color:var(--muted); font-size:12px; } .news-list { border-top:1px solid var(--line); } .news-list a,.article-feed a,.quick-news a,.scroll-news>a,.data-news>a,.minimal-columns>div>a { display:flex; align-items:center; gap:18px; padding:18px 0; border-bottom:1px solid var(--line); } .news-list time,.article-feed time,.data-news time,.minimal-columns time { color:var(--accent); font-size:12px; min-width:42px; } .news-list span { display:grid; gap:3px; flex:1; } .news-list small { color:var(--muted); } .faq,.campus-faq,.oriental-faq,.youth-faq,.minimal-faq { padding:40px 0 80px; max-width:850px; } details { border-bottom:1px solid var(--line); padding:16px 0; } summary { cursor:pointer; font-weight:700; } details p { color:var(--muted); max-width:670px; }
.site-footer { border-top:1px solid var(--line); } .footer-grid { padding:44px 0 30px; display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:35px; color:var(--muted); } .footer-grid h2 { font-size:13px; color:var(--ink); margin:0 0 6px; } .footer-grid p { margin:5px 0; font-size:14px; } .footer-bottom { border-top:1px solid var(--line); padding:16px 0 24px; color:var(--muted); font-size:12px; display:flex; gap:8px; } .breadcrumbs { color:var(--muted); font-size:13px; padding-top:30px; } .listing-page,.article-list-page,.rank-page,.sitemap-page,.detail-page { padding-bottom:80px; } .listing-intro { padding:55px 0 34px; max-width:720px; } .listing-intro h1,.search-page h1,.article-detail h1 { font-size:clamp(34px,5vw,62px); line-height:1.08; letter-spacing:-.05em; margin:5px 0 12px; } .listing-intro>p:last-child { color:var(--muted); margin:0; font-size:17px; } .detail-hero { display:grid; grid-template-columns:300px 1fr; gap:55px; align-items:center; padding:55px 0 65px; } .detail-cover img { width:100%; border-radius:var(--shape); box-shadow:var(--shadow); } .detail-copy h1 { font-size:clamp(36px,5vw,66px); line-height:1.08; margin:8px 0 16px; } .lead { font-size:18px; color:var(--muted); } dl { display:flex; gap:28px; padding:18px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin:25px 0; } dt { color:var(--muted); font-size:12px; } dd { margin:3px 0 0; font-weight:700; } .reading-content { max-width:820px; } .content-body { font-size:17px; line-height:2; color:var(--ink); } .image-list { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; margin:25px 0 60px; } .image-list img { width:100%; border:1px solid var(--line); border-radius:var(--shape); } .related { padding-top:35px; }
.article-stream { display:grid; gap:18px; max-width:940px; } .article-stream article { border-bottom:1px solid var(--line); padding-bottom:18px; } .article-stream a { display:grid; grid-template-columns:280px 1fr; gap:25px; align-items:center; } .article-stream img { width:100%; aspect-ratio:8/5; object-fit:cover; border-radius:var(--shape); } .article-stream time,.article-meta { color:var(--muted); font-size:13px; } .article-stream h2 { margin:6px 0; font-size:25px; } .article-stream p { color:var(--muted); margin:0 0 8px; } .article-stream span { color:var(--accent); font-weight:700; font-size:13px; } .article-detail { display:grid; grid-template-columns:minmax(0,850px) 240px; gap:65px; padding-bottom:80px; } .article-detail>article { padding-top:48px; } .article-detail header img { width:100%; aspect-ratio:8/5; object-fit:cover; border-radius:var(--shape); margin-top:26px; } .article-detail aside { padding-top:100px; } .article-detail aside a { display:block; border-bottom:1px solid var(--line); padding:12px 0; font-size:14px; } .prev-next { display:grid; grid-template-columns:1fr 1fr; gap:20px; border-top:1px solid var(--line); margin-top:45px; padding-top:20px; } .prev-next div { color:var(--muted); font-size:13px; } .prev-next span { display:block; color:var(--accent); font-size:11px; text-transform:uppercase; } .rank-board { max-width:860px; border-top:1px solid var(--line); } .rank-item { display:grid; grid-template-columns:35px 64px 1fr 100px; align-items:center; gap:18px; padding:14px 0; border-bottom:1px solid var(--line); } .rank-item span { display:grid; gap:3px; } .rank-item small { display:block; color:var(--muted); font-size:12px; } .rank-item em { font-style:normal; color:var(--accent); text-align:right; font-weight:700; } .sitemap-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; padding-bottom:80px; } .sitemap-grid section { border-top:2px solid var(--accent); padding-top:16px; } .sitemap-grid h2 { font-size:20px; margin:0 0 12px; } .sitemap-grid a:not(h2 a) { display:block; color:var(--muted); padding:5px 0; } .search-page { padding:90px 0 130px; min-height:520px; } .search-form { display:flex; max-width:760px; margin:28px 0 15px; border:1px solid var(--line); border-radius:var(--shape); overflow:hidden; background:var(--surface); } .search-form input { flex:1; border:0; background:transparent; color:var(--ink); font:inherit; padding:16px 18px; outline:0; min-width:0; } .search-form button { border:0; background:var(--accent); color:#fff; padding:0 22px; font-weight:700; } .result-list { max-width:850px; border-top:1px solid var(--line); margin-top:45px; } .result-list a { display:grid; grid-template-columns:180px 1fr; gap:20px; align-items:center; border-bottom:1px solid var(--line); padding:16px 0; } .result-list img { width:180px; height:120px; object-fit:cover; border-radius:var(--shape); } .result-list span { display:grid; gap:5px; } .result-list small { color:var(--muted); } .empty-page { padding:120px 0 180px; } .empty-page h1 { font-size:clamp(42px,7vw,80px); line-height:1; margin:10px 0 20px; }
.signal-line { height:2px; background:linear-gradient(90deg,transparent,var(--accent),transparent); } .telemetry-data { position:absolute; bottom:14px; left:18px; right:18px; display:flex; justify-content:space-between; color:var(--accent); font-size:11px; } .bar-chart { height:160px; display:flex; align-items:end; gap:12px; padding:25px 0; } .bar-chart i { display:block; flex:1; background:linear-gradient(var(--accent),transparent); border-top:2px solid var(--accent); } .tag-cloud { display:flex; flex-wrap:wrap; gap:10px; margin-top:20px; } .tag-cloud a { border:1px solid var(--line); padding:8px 10px; color:var(--accent); font-size:13px; } .cyber-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; } .cyber-cards article { border:1px solid var(--line); padding:12px; position:relative; background:var(--surface); } .cyber-cards img { aspect-ratio:4/5; object-fit:cover; } .code-index { position:absolute; z-index:1; top:20px; left:20px; color:var(--accent); font-size:12px; } .article-feed { display:grid; grid-template-columns:1fr .7fr; gap:60px; padding:65px 0 90px; } .article-feed a { justify-content:space-between; } .article-feed a strong { flex:1; } .article-feed aside { border-left:1px solid var(--line); padding-left:30px; } .hero-card { background:var(--surface); padding:45px; border-radius:28px; box-shadow:var(--shadow); } .campus-hero { grid-template-columns:1fr 1fr; } .round-link,.bubble-link { border:1px solid var(--line); padding:10px 16px; border-radius:99px; color:var(--accent); } .date-note { color:var(--accent2); font-weight:700; font-size:12px; } .campus-shelf { display:grid; grid-template-columns:repeat(5,1fr); gap:18px; } .campus-shelf article img { width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:var(--shape); } .cover-frame { position:relative; } .cover-frame span { position:absolute; top:10px; right:10px; background:var(--accent2); color:#fff; font-size:10px; padding:3px 6px; border-radius:99px; } .campus-shelf h3 { font-size:17px; margin:10px 0 2px; } .campus-shelf p { color:var(--muted); font-size:12px; margin:0; } .news-board a { display:grid; grid-template-columns:10px 1fr auto; gap:10px; padding:14px 0; border-bottom:1px dashed var(--line); } .news-board time { color:var(--muted); font-size:12px; } .issue-strip { border-bottom:1px solid var(--line); text-align:center; font-size:10px; letter-spacing:.18em; padding:7px; color:var(--muted); } .feature-spread { display:grid; grid-template-columns:1fr 280px; gap:40px; border-top:2px solid var(--accent); border-bottom:1px solid var(--line); padding:28px 0 55px; } .spread-label { grid-column:1/-1; color:var(--accent); font-size:12px; } .spread-main>a { display:grid; grid-template-columns:220px 1fr; gap:28px; align-items:center; } .spread-main img { width:100%; aspect-ratio:4/5; object-fit:cover; } .spread-main h2 { font-size:36px; line-height:1.1; margin:10px 0; } .spread-main p:not(.eyebrow) { color:var(--muted); } .spread-main span { color:var(--accent); font-weight:700; } .feature-spread aside { border-left:1px solid var(--line); padding-left:25px; } .feature-spread aside a { display:grid; grid-template-columns:28px 1fr; gap:8px; border-bottom:1px solid var(--line); padding:12px 0; font-size:14px; } .magazine-grid { grid-template-columns:1fr 270px; } .mag-card { border:0; background:none; } .mag-card img { border-radius:0; aspect-ratio:4/5; } .timeline a { display:grid; grid-template-columns:45px 1fr; gap:8px; border-bottom:1px solid var(--line); padding:13px 0; font-size:14px; } .timeline time { color:var(--accent); } .quote-panel,.retro-quote { border-top:4px solid var(--accent); padding:40px 0 80px; display:flex; justify-content:space-between; align-items:center; } .quote-panel p,.retro-quote p { font-size:24px; margin:0; } .chapter-row { display:grid; grid-template-columns:250px 1fr; gap:35px; border-top:1px solid var(--line); padding:55px 0; } .chapter-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; } .chapter-cards img { width:100%; aspect-ratio:4/5; object-fit:cover; } .chapter-cards strong,.chapter-cards small { display:block; margin-top:8px; } .chapter-cards small { color:var(--muted); font-size:12px; } .ink-map { display:grid; grid-template-columns:1fr 260px; gap:60px; padding:25px 0 65px; } .map-links { grid-template-columns:repeat(2,1fr); } .seal-box { display:grid; place-items:center; border:1px solid var(--accent2); padding:30px; min-height:220px; text-align:center; } .seal-box span { border:2px solid var(--accent); padding:15px 18px; font-size:34px; } .scroll-news>a { display:grid; grid-template-columns:45px 1fr auto; } .theme-youth .youth-hero { position:relative; background:linear-gradient(120deg,#fff0e7,#fff 55%,#ffe3ee); padding-left:54px; padding-right:54px; border-radius:28px; margin-top:45px; } .theme-youth .youth-hero>img { border-radius:22px; } .sticker { position:absolute; background:var(--accent2); color:#fff; font-weight:900; padding:10px 12px; border-radius:50%; transform:rotate(-12deg); z-index:1; } .sticker-one { top:24px; right:42%; font-size:13px; } .color-cards { display:grid; grid-template-columns:repeat(6,1fr); gap:14px; } .color-cards article:nth-child(3n+1) { transform:translateY(12px); } .color-cover { position:relative; } .color-cover img { aspect-ratio:4/5; object-fit:cover; border-radius:var(--shape); } .color-cover i { position:absolute; bottom:9px; right:9px; background:var(--accent); color:#fff; font-style:normal; font-size:11px; padding:3px 6px; border-radius:99px; } .color-cards h3 { font-size:16px; margin:10px 0 2px; } .color-cards p { margin:0; color:var(--muted); font-size:12px; } .youth-split { grid-template-columns:1.2fr .8fr; } .mood-grid { grid-template-columns:repeat(2,1fr); } .mood-grid a { background:var(--bg); padding:14px; border-radius:var(--shape); border:0; } .quick-news a { gap:12px; } .quick-news b { background:var(--accent); color:#fff; padding:3px 7px; border-radius:50%; } .theme-data .data-hero { grid-template-columns:1fr 1.3fr; } .dashboard-art { border:1px solid var(--line); } .metric-row { position:absolute; bottom:0; left:0; right:0; background:rgba(17,23,34,.9); display:flex; justify-content:space-around; padding:12px; color:var(--muted); font-size:11px; } .metric-row b { display:block; color:var(--accent); font-size:20px; } .stat-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; padding:10px 0 55px; } .stat-card { background:var(--surface); border:1px solid var(--line); padding:20px; border-radius:var(--shape); } .stat-card span,.stat-card small { display:block; color:var(--muted); font-size:12px; } .stat-card strong { font-size:30px; display:block; margin:8px 0; color:var(--accent); } .data-columns { grid-template-columns:1.25fr .75fr; } .data-row { display:grid; grid-template-columns:30px 64px 1fr 80px; align-items:center; gap:14px; padding:12px 0; border-bottom:1px solid var(--line); } .data-row em { font-style:normal; text-align:right; color:var(--accent); } .matrix-panel a { display:grid; grid-template-columns:90px 1fr 20px; gap:10px; } .matrix-panel i { height:6px; background:var(--accent2); align-self:center; display:block; } .data-news { border-top:1px solid var(--line); padding:40px 0 80px; display:grid; grid-template-columns:1.3fr repeat(3,1fr); gap:20px; } .data-news>a { display:block; border-left:1px solid var(--line); padding:0 15px; } .data-news strong { display:block; margin-top:8px; } .print-rule { height:7px; background:repeating-linear-gradient(90deg,var(--accent) 0 25px,transparent 25px 30px); } .retro-hero { grid-template-columns:1fr 1.25fr; } .retro-title { position:relative; padding-left:24px; border-left:5px solid var(--accent); } .stamp { position:absolute; top:-25px; right:20px; border:2px solid var(--accent); color:var(--accent); padding:3px 7px; font-size:11px; transform:rotate(8deg); } .poster img { filter:sepia(.3); } .poster span { position:absolute; bottom:16px; left:20px; color:var(--accent); font-weight:700; } .retro-shelf { display:grid; grid-template-columns:repeat(6,1fr); gap:16px; border-bottom:5px double var(--accent); padding-bottom:24px; } .retro-shelf article { position:relative; } .retro-shelf img { aspect-ratio:4/5; object-fit:cover; border:5px solid var(--surface); outline:1px solid var(--line); } .retro-shelf h3 { font-size:15px; line-height:1.25; margin:10px 0 2px; } .retro-shelf p { font-size:12px; color:var(--muted); margin:0; } .number { position:absolute; top:8px; left:8px; background:var(--accent); color:var(--surface); padding:3px 6px; font-size:11px; z-index:1; } .retro-columns { grid-template-columns:1fr 1fr; padding-top:60px; } .retro-quote a { border-bottom:1px solid var(--accent); margin-left:18px; color:var(--accent); } .minimal-hero { padding:105px 0 70px; } .minimal-hero>p { max-width:530px; } .minimal-hero>div { display:flex; gap:22px; align-items:center; margin-top:28px; } .minimal-image { border-radius:0; box-shadow:none; border-top:1px solid var(--line); border-bottom:1px solid var(--line); } .minimal-feature { padding:85px 0; } .minimal-list { display:grid; grid-template-columns:repeat(2,1fr); gap:20px; } .minimal-list article { border-top:1px solid var(--line); padding-top:16px; } .minimal-list a { display:grid; grid-template-columns:140px 1fr; gap:20px; } .minimal-list img { width:140px; aspect-ratio:4/5; object-fit:cover; } .minimal-list h3 { font-size:24px; line-height:1.15; margin:8px 0; } .minimal-list p { color:var(--muted); font-size:13px; } .minimal-list b { color:var(--accent); font-size:13px; } .minimal-columns { grid-template-columns:1fr 1fr; border-top:1px solid var(--line); padding-top:55px; } .minimal-columns>div>a { justify-content:space-between; }
@media(max-width:800px) { .shell { width:min(calc(100% - 32px),620px); } .top-line { min-height:64px; } .nav-toggle { display:block; } .main-nav { display:none; position:absolute; top:64px; left:16px; right:16px; background:var(--surface); border:1px solid var(--line); padding:14px; flex-direction:column; align-items:stretch; gap:0; box-shadow:var(--shadow); } .main-nav.is-open { display:flex; } .main-nav a { padding:11px 5px; border-bottom:1px solid var(--line); } .hero,.cyber-hero,.campus-hero,.magazine-mast,.oriental-hero,.youth-hero,.data-hero,.retro-hero,.campus-hero { grid-template-columns:1fr; gap:30px; padding:55px 0; } .hero-copy h1,.cyber-hero h1,.campus-hero h1,.magazine-mast h1,.oriental-hero h1,.youth-hero h1,.data-hero h1,.retro-hero h1,.minimal-hero h1 { font-size:clamp(38px,12vw,62px); } .manga-grid { grid-template-columns:repeat(2,1fr); gap:14px; } .campus-shelf { grid-template-columns:repeat(2,1fr); } .color-cards { grid-template-columns:repeat(3,1fr); } .retro-shelf { grid-template-columns:repeat(3,1fr); } .night-columns,.signal-grid,.campus-columns,.retro-columns,.data-columns,.minimal-columns,.article-feed,.feature-spread,.article-detail,.magazine-grid,.chapter-row,.ink-map,.data-news { grid-template-columns:1fr; gap:25px; } .spread-main>a { grid-template-columns:140px 1fr; } .feature-spread aside,.article-detail aside { border-left:0; padding-left:0; padding-top:0; } .image-list { grid-template-columns:1fr; } .article-stream a { grid-template-columns:130px 1fr; gap:15px; } .article-stream h2 { font-size:18px; } .rank-item { grid-template-columns:28px 52px 1fr 60px; gap:9px; } .rank-item img,.data-row img { width:52px; height:68px; } .sitemap-grid { grid-template-columns:1fr 1fr; } .minimal-list { grid-template-columns:1fr; } .minimal-list a { grid-template-columns:105px 1fr; } .minimal-list img { width:105px; } .footer-grid { grid-template-columns:1fr; gap:18px; } .footer-bottom { flex-wrap:wrap; } .youth-hero { padding-left:25px; padding-right:25px; margin-top:25px; } .data-news { display:block; } .data-news>a { border-left:0; border-top:1px solid var(--line); padding:14px 0; } .stat-grid { grid-template-columns:repeat(2,1fr); } .detail-hero { grid-template-columns:150px 1fr; gap:20px; } .detail-copy h1 { font-size:34px; } dl { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; } .quote-panel,.retro-quote { display:block; } .quote-panel a,.retro-quote a { display:inline-block; margin:10px 10px 0 0; } }
@media(max-width:480px) { .manga-grid { gap:10px; } .card-body { padding:11px; } .manga-card h2,.manga-card h3 { font-size:15px; } .campus-shelf { gap:12px; } .color-cards { grid-template-columns:repeat(2,1fr); } .retro-shelf { grid-template-columns:repeat(2,1fr); } .sitemap-grid { grid-template-columns:1fr; } .article-stream a { grid-template-columns:1fr; } .article-stream img { aspect-ratio:16/9; } .detail-hero { grid-template-columns:1fr; } .detail-cover { max-width:190px; } .hero-art img,.hero-photo img,.telemetry img,.scroll-art img,.dashboard-art img,.poster img,.minimal-image img { aspect-ratio:16/8; } .stat-card strong { font-size:23px; } }