/* ============================================================
   DS BLOG — 瑞士国际主义风格 / Swiss International Style
   白纸 · 黑字 · 红点 · 12 栏网格
   ============================================================ */

:root{
  --paper:#ffffff;
  --ink:#0b0b0b;
  --red:#e30613;
  --gray:#5f5f5f;
  --line:1px solid var(--ink);
  --gutter:clamp(16px,3.5vw,48px);
  --sans:"Helvetica Neue",Helvetica,Arial,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --mono:"SFMono-Regular",Consolas,"Liberation Mono","Courier New",monospace;
}

*{box-sizing:border-box;margin:0;padding:0}

html{scroll-behavior:smooth}

body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

::selection{background:var(--red);color:#fff}

a{color:inherit;text-decoration:none}
a:hover{color:var(--red)}

img{max-width:100%;display:block}

.container{max-width:1240px;margin:0 auto;padding:0 var(--gutter)}

.skip-link{
  position:absolute;left:-9999px;top:0;
  background:var(--red);color:#fff;
  padding:10px 16px;font-size:13px;letter-spacing:.1em;z-index:100;
}
.skip-link:focus{left:0}

/* ---------- 页头 Header ---------- */
.site-header{
  border-bottom:var(--line);
  position:sticky;top:0;background:var(--paper);z-index:50;
}
.header-inner{display:flex;align-items:stretch;justify-content:space-between;min-height:64px}
.brand{display:flex;align-items:center;gap:12px;font-weight:800;letter-spacing:.02em}
.brand-mark{
  background:var(--red);color:#fff;padding:3px 7px 2px;
  font-size:14px;letter-spacing:.08em;line-height:1.2;
}
.brand-text{font-size:14px;text-transform:uppercase;letter-spacing:.06em}
.brand-text em{font-style:normal;color:var(--gray);font-weight:500}
.site-nav{display:flex;align-items:stretch}
.site-nav a{
  display:flex;align-items:center;
  font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;
  padding:0 14px;border-left:1px solid var(--ink);
}
.site-nav a:hover{color:var(--red)}
.site-nav a.nav-search{background:var(--red);color:#fff;border-left:none}
.site-nav a.nav-search:hover{background:var(--ink)}
.nav-toggle{
  display:none;background:none;border:none;cursor:pointer;
  font-family:var(--mono);font-size:12px;letter-spacing:.2em;text-transform:uppercase;
  padding:0 4px;color:var(--ink);
}

/* ---------- 首页 Hero ---------- */
.hero{padding:clamp(56px,9vw,120px) 0 clamp(40px,6vw,80px);border-bottom:var(--line)}
.hero-kicker{
  font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  display:flex;align-items:center;gap:10px;margin-bottom:30px;
}
.red-dot{width:10px;height:10px;background:var(--red);display:inline-block;flex:none}
.hero-title{
  font-size:clamp(44px,9vw,110px);line-height:.98;font-weight:800;
  letter-spacing:-.02em;text-transform:uppercase;
}
.hero-title .red{color:var(--red)}
.hero-en{
  font-family:var(--mono);font-size:clamp(15px,2.2vw,26px);letter-spacing:.1em;
  text-transform:uppercase;margin-top:16px;color:var(--gray);
}
.hero-sub{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gutter);margin-top:clamp(36px,6vw,72px)}
.hero-sub p{grid-column:1/span 5;font-size:clamp(16px,1.6vw,19px);line-height:1.75}
.hero-sub p+p{grid-column:6/span 5;color:var(--gray);font-size:14px}
.hero-actions{display:flex;gap:16px;margin-top:44px;flex-wrap:wrap}

.btn{
  display:inline-flex;align-items:center;gap:10px;padding:14px 26px;
  font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  border:1px solid var(--ink);background:var(--paper);color:var(--ink);
}
.btn-red{background:var(--red);border-color:var(--red);color:#fff}
.btn-red:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.btn-outline:hover{background:var(--ink);color:#fff}

/* ---------- 通用区块 ---------- */
.section{padding:clamp(48px,7vw,96px) 0;border-bottom:var(--line)}
.section-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  margin-bottom:44px;padding-bottom:14px;border-bottom:var(--line);
}
.section-head h2{font-size:clamp(24px,3.4vw,40px);font-weight:800;text-transform:uppercase;letter-spacing:-.01em}
.section-head .index{font-family:var(--mono);color:var(--red);font-size:12px;letter-spacing:.2em}
.section-head .more{font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:700}
.section-head .more:hover{color:var(--red)}

/* ---------- 头条文章 Featured ---------- */
.feature{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gutter);align-items:stretch}
.feature-info{
  grid-column:1/span 7;border:1px solid var(--ink);
  display:flex;flex-direction:column;padding:clamp(24px,4vw,56px);
}
.feature-kicker{
  font-family:var(--mono);font-size:12px;letter-spacing:.18em;color:var(--red);
  text-transform:uppercase;display:flex;gap:10px;align-items:center;margin-bottom:22px;
}
.feature-title{font-size:clamp(30px,4.6vw,54px);font-weight:800;line-height:1.06;letter-spacing:-.01em;text-transform:uppercase}
.feature-title a:hover{color:var(--red)}
.feature-title-en{font-size:13px;color:var(--gray);letter-spacing:.08em;text-transform:uppercase;margin-top:12px;font-family:var(--mono)}
.feature-excerpt{margin-top:36px;font-size:15px;max-width:52ch;color:#2b2b2b}
.feature-meta{font-family:var(--mono);font-size:11px;letter-spacing:.14em;display:flex;gap:20px;flex-wrap:wrap;margin-top:20px;color:var(--gray);text-transform:uppercase}
.feature-visual{
  grid-column:8/span 5;border:1px solid var(--ink);background:var(--ink);color:#fff;
  display:flex;flex-direction:column;justify-content:space-between;
  padding:clamp(24px,4vw,44px);min-height:340px;
}
.feature-num{font-size:clamp(48px,7vw,88px);font-weight:800;line-height:1;color:var(--red)}
.feature-visual-text{font-size:clamp(18px,2.2vw,26px);font-weight:800;line-height:1.3;text-transform:uppercase;margin-top:30px}
.feature-visual-meta{font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:#a7a7a7;text-transform:uppercase}

/* ---------- 文章网格 ---------- */
.post-grid{display:grid;grid-template-columns:repeat(12,1fr);border-top:var(--line)}
.post-card{
  grid-column:span 4;border-bottom:var(--line);border-right:var(--line);
  padding:26px 24px 34px;display:flex;flex-direction:column;min-height:330px;
}
.post-card:nth-child(3n){border-right:none}
.post-card .num{font-family:var(--mono);font-size:12px;color:var(--red);letter-spacing:.2em}
.post-card .cat{
  font-family:var(--mono);font-size:11px;letter-spacing:.18em;color:var(--gray);
  text-transform:uppercase;margin-top:8px;display:block;
}
.post-card h3{margin-top:auto;font-size:21px;font-weight:800;line-height:1.28;text-transform:uppercase;letter-spacing:-.01em;padding-top:24px}
.post-card h3 a:hover{color:var(--red)}
.post-card .en{
  font-family:var(--mono);font-size:11px;color:var(--gray);text-transform:uppercase;
  letter-spacing:.08em;margin-top:8px;line-height:1.6;
}
.post-card .meta{font-family:var(--mono);font-size:11px;margin-top:22px;display:flex;justify-content:space-between;color:var(--gray);letter-spacing:.1em}
.post-card:hover{background:var(--ink);color:#fff}
.post-card:hover .cat,.post-card:hover .en,.post-card:hover .meta{color:#b8b8b8}
.post-card:hover .num{color:var(--red)}

/* ---------- 黑色引语带 ---------- */
.band{background:var(--ink);color:#fff;padding:clamp(64px,10vw,140px) 0;border-bottom:var(--line)}
.band .red-bar{width:56px;height:8px;background:var(--red);margin-bottom:36px}
.band blockquote{
  font-size:clamp(26px,4.6vw,60px);font-weight:800;line-height:1.14;
  text-transform:uppercase;letter-spacing:-.01em;max-width:24ch;
}
.band .band-en{font-family:var(--mono);color:#b8b8b8;letter-spacing:.1em;text-transform:uppercase;font-size:12px;margin-top:26px}
.band cite{
  display:block;margin-top:22px;font-style:normal;font-family:var(--mono);
  font-size:12px;color:var(--red);letter-spacing:.2em;text-transform:uppercase;
}

/* ---------- 统计 ---------- */
.stats{display:grid;grid-template-columns:repeat(12,1fr);border-bottom:var(--line)}
.stat{grid-column:span 4;border-right:var(--line);padding:clamp(32px,5vw,56px) 24px}
.stat:last-child{border-right:none}
.stat b{display:block;font-size:clamp(40px,6vw,72px);font-weight:800;line-height:1;letter-spacing:-.02em}
.stat b em{color:var(--red);font-style:normal}
.stat span{font-family:var(--mono);font-size:11px;letter-spacing:.18em;color:var(--gray);text-transform:uppercase;margin-top:14px;display:block}

/* ---------- 页脚 Footer ---------- */
.site-footer{background:var(--ink);color:#fff}
.footer-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gutter);padding:clamp(48px,7vw,96px) 0}
.footer-grid>div{grid-column:span 3}
.footer-brand{font-size:44px;font-weight:800;letter-spacing:-.02em;line-height:1}
.footer-brand span{color:var(--red)}
.footer-tag{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:#a7a7a7;margin-top:18px;line-height:2.1;text-transform:uppercase}
.footer-h{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--red);margin-bottom:16px;font-weight:700}
.footer-grid a{display:block;color:#fff;font-size:14px;padding:7px 0;border-bottom:1px solid #2e2e2e}
.footer-grid a:hover{color:var(--red)}
.footer-bar{
  border-top:1px solid #2e2e2e;padding:22px 0 26px;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-family:var(--mono);font-size:11px;color:#a7a7a7;letter-spacing:.08em;
}

/* ---------- 文章页 ---------- */
.article-hero{padding:clamp(40px,6vw,80px) 0 0;border-bottom:var(--line)}
.crumb{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--gray);margin-bottom:36px}
.crumb a:hover{color:var(--red)}
.article-hero .kicker{
  font-family:var(--mono);color:var(--red);font-size:12px;letter-spacing:.2em;
  margin-bottom:18px;text-transform:uppercase;display:flex;gap:10px;align-items:center;
}
.article-hero h1{
  font-size:clamp(34px,6vw,72px);font-weight:800;line-height:1.04;
  letter-spacing:-.015em;text-transform:uppercase;
}
.article-hero .title-en{font-family:var(--mono);font-size:13px;letter-spacing:.1em;color:var(--gray);text-transform:uppercase;margin-top:16px}
.article-meta{
  display:flex;flex-wrap:wrap;gap:10px 32px;font-family:var(--mono);
  font-size:12px;letter-spacing:.12em;margin:32px 0 0;color:var(--gray);
  padding-bottom:26px;
}
.article-meta b{color:var(--ink);font-weight:700}
.article-body{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gutter);padding:clamp(40px,6vw,72px) 0}
.article-body .content{grid-column:2/span 9;max-width:760px}
.content .lead{font-size:19px;line-height:1.8;color:#1c1c1c}
.content p{margin-bottom:24px;font-size:16.5px}
.content strong{font-weight:800}
.content h2{
  font-size:clamp(20px,2.6vw,28px);font-weight:800;text-transform:uppercase;
  letter-spacing:-.01em;margin:64px 0 20px;padding-top:20px;border-top:var(--line);
}
.content h2:first-child{margin-top:0;border-top:none;padding-top:0}
.content h2 .num{font-family:var(--mono);color:var(--red);font-size:.72em;letter-spacing:.15em;margin-right:10px}
.content h3{font-size:18px;font-weight:800;margin:36px 0 14px;text-transform:uppercase;letter-spacing:.02em}
.content ul,.content ol{margin:0 0 26px;padding-left:26px}
.content li{margin-bottom:10px;font-size:16px}
.pullquote{
  margin:48px 0;padding:6px 0 6px 28px;border-left:5px solid var(--red);
  font-size:clamp(20px,2.8vw,28px);font-weight:800;line-height:1.4;
  text-transform:uppercase;letter-spacing:-.01em;
}
.pullquote footer{
  font-family:var(--mono);font-weight:400;font-size:11px;color:var(--gray);
  letter-spacing:.18em;margin-top:14px;text-transform:uppercase;
}
.figure{margin:48px 0;border:var(--line)}
.demo-grid{height:280px;position:relative;border-bottom:var(--line);background-image:repeating-linear-gradient(to right,var(--ink) 0 1px,transparent 1px 8.3333%)}
.demo-cell{position:absolute;top:0;left:calc(100%/12*4);width:calc(100%/12);height:100%;background:var(--red)}
.demo-checker{height:280px;position:relative;border-bottom:var(--line);background:conic-gradient(var(--ink) 90deg,#fff 90deg 180deg,var(--ink) 180deg 270deg,#fff 270deg);background-size:44px 44px}
.demo-checker .demo-cell{background:var(--red);opacity:.9}
.figure figcaption{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--gray);padding:14px 16px;text-transform:uppercase}
.code{
  background:var(--ink);color:#f2f2f2;padding:26px;font-family:var(--mono);
  font-size:13px;line-height:1.85;overflow-x:auto;margin:40px 0;border-left:5px solid var(--red);
}
.code .c{color:#8b8b8b}
.code .k{color:#ff5c5c}
.code .s{color:#8fd08f}
.table-wrap{overflow-x:auto;margin:44px 0;border-top:var(--line);border-bottom:var(--line)}
table{width:100%;border-collapse:collapse;font-size:14px}
th{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;text-align:left;padding:12px 14px;border-bottom:1px solid var(--ink);color:var(--red)}
td{padding:14px;border-bottom:1px solid #ddd;font-size:14.5px}
tr:last-child td{border-bottom:none}
.article-nav{border-top:var(--line);display:grid;grid-template-columns:1fr 1fr}
.article-nav a{padding:36px var(--gutter);border-right:var(--line);display:block}
.article-nav a:last-child{border-right:none;text-align:right}
.article-nav a:hover .t{color:var(--red)}
.article-nav .lbl{font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--gray);text-transform:uppercase;display:block;margin-bottom:10px}
.article-nav .t{font-weight:800;font-size:16px;text-transform:uppercase;letter-spacing:-.01em}

/* ---------- 文章列表页 ---------- */
.list-hero{padding:clamp(48px,7vw,96px) 0 36px;border-bottom:var(--line)}
.list-hero h1{font-size:clamp(38px,6.5vw,80px);font-weight:800;text-transform:uppercase;letter-spacing:-.02em;line-height:1}
.list-hero .sub{font-family:var(--mono);font-size:12px;letter-spacing:.18em;color:var(--gray);text-transform:uppercase;margin-top:16px}
.list-head{display:grid;grid-template-columns:repeat(12,1fr);border-bottom:var(--line);font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--gray);text-transform:uppercase;padding:12px 0}
.list-head span{grid-column:span 2}
.list-head span:first-child{grid-column:span 3}
.list-row{display:grid;grid-template-columns:repeat(12,1fr);align-items:baseline;border-bottom:var(--line);padding:26px 0;gap:var(--gutter)}
.list-row .d{grid-column:span 3;font-family:var(--mono);font-size:12px;color:var(--gray);letter-spacing:.1em}
.list-row .t{grid-column:span 5;font-size:clamp(17px,2.2vw,24px);font-weight:800;text-transform:uppercase;letter-spacing:-.01em;line-height:1.25}
.list-row .t small{display:block;font-family:var(--mono);font-size:11px;color:var(--gray);letter-spacing:.08em;text-transform:uppercase;font-weight:400;margin-top:6px}
.list-row .c{grid-column:span 2;font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--red);text-transform:uppercase}
.list-row .l{grid-column:span 2;font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--gray);text-transform:uppercase;text-align:right}
.list-row:hover .t{color:var(--red)}

/* ---------- 归档页 ---------- */
.archive-year h2{
  font-size:clamp(30px,4.5vw,52px);font-weight:800;letter-spacing:-.02em;
  border-bottom:var(--line);padding:clamp(36px,5vw,64px) 0 14px;
}
.archive-row{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gutter);border-bottom:var(--line);padding:22px 0;align-items:baseline}
.archive-row .d{grid-column:span 3;font-family:var(--mono);font-size:12px;color:var(--gray);letter-spacing:.1em}
.archive-row .t{grid-column:span 6;font-size:17px;font-weight:700;text-transform:uppercase;letter-spacing:-.01em}
.archive-row .t small{display:block;font-family:var(--mono);font-size:11px;color:var(--gray);font-weight:400;letter-spacing:.08em;text-transform:uppercase;margin-top:4px}
.archive-row .c{grid-column:span 3;font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--red);text-transform:uppercase;text-align:right}
.archive-row:hover .t{color:var(--red)}

/* ---------- 搜索页 ---------- */
.search-hero{padding:clamp(48px,7vw,96px) 0 40px;border-bottom:var(--line)}
.search-hero h1{font-size:clamp(38px,6.5vw,80px);font-weight:800;text-transform:uppercase;letter-spacing:-.02em;line-height:1}
.search-hero .sub{font-family:var(--mono);font-size:12px;letter-spacing:.18em;color:var(--gray);text-transform:uppercase;margin-top:16px}
.search-box{position:relative;margin-top:40px}
.search-box input{
  width:100%;border:1px solid var(--ink);padding:22px 70px 22px 22px;
  font-family:var(--mono);font-size:clamp(15px,2.2vw,24px);outline:none;
  background:var(--paper);color:var(--ink);
}
.search-box input:focus{border-color:var(--red);box-shadow:4px 4px 0 var(--red)}
.search-box .go{
  position:absolute;right:0;top:0;bottom:0;width:58px;background:var(--ink);
  color:#fff;border:none;cursor:pointer;font-size:20px;
}
.search-box .go:hover{background:var(--red)}
.search-count{font-family:var(--mono);font-size:12px;letter-spacing:.15em;color:var(--gray);margin:24px 0 0;text-transform:uppercase}
.search-count b{color:var(--red)}
.search-results{border-top:var(--line)}
.result{display:block;border-bottom:var(--line);padding:32px 0;transition:padding-left .15s ease}
.result:hover{padding-left:18px}
.result:hover h3{color:var(--red)}
.result-meta{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--gray);text-transform:uppercase;display:flex;gap:18px;flex-wrap:wrap;margin-bottom:10px}
.result h3{font-size:22px;font-weight:800;text-transform:uppercase;letter-spacing:-.01em;line-height:1.25}
.result h3 span{display:block;font-family:var(--mono);font-size:11px;color:var(--gray);letter-spacing:.08em;margin-top:6px;text-transform:uppercase;font-weight:400}
.result p{color:#3d3d3d;font-size:15px;margin-top:12px;max-width:72ch}
.result p.en{font-family:var(--mono);font-size:12px;color:var(--gray)}
mark{background:var(--red);color:#fff;padding:0 3px}
.search-empty{padding:90px 0;text-align:center;border-bottom:var(--line)}
.search-empty .big{font-size:clamp(48px,8vw,90px);font-weight:800;line-height:1}
.search-empty p{font-family:var(--mono);font-size:12px;letter-spacing:.16em;color:var(--gray);margin-top:18px;text-transform:uppercase}

/* ---------- 关于页 ---------- */
.about-lead{font-size:clamp(18px,2.6vw,26px);line-height:1.7;font-weight:500;max-width:34ch}
.about-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gutter);padding:clamp(40px,6vw,80px) 0;border-bottom:var(--line)}
.about-grid .side{grid-column:span 4}
.about-grid .body{grid-column:5/span 8}
.about-grid h2{font-size:clamp(22px,3vw,34px);font-weight:800;text-transform:uppercase;letter-spacing:-.01em;margin-bottom:20px}
.about-grid h2 .num{font-family:var(--mono);color:var(--red);font-size:.7em;letter-spacing:.15em;margin-right:10px}
.about-grid p{font-size:16px;margin-bottom:20px;color:#262626}
.about-grid .en-note{font-family:var(--mono);font-size:13px;color:var(--gray);letter-spacing:.06em;line-height:1.9}
.principle{border-bottom:var(--line);display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gutter)}
.principle .p-num{grid-column:span 2;font-family:var(--mono);color:var(--red);font-size:12px;letter-spacing:.2em;padding:34px 0;text-transform:uppercase}
.principle .p-title{grid-column:span 4;font-size:clamp(20px,2.6vw,30px);font-weight:800;text-transform:uppercase;letter-spacing:-.01em;padding:34px 0;line-height:1.2}
.principle .p-title small{display:block;font-family:var(--mono);font-size:11px;color:var(--gray);letter-spacing:.12em;margin-top:8px;font-weight:400}
.principle .p-body{grid-column:7/span 6;padding:34px 0;color:#262626;font-size:15.5px}
.principle .p-body p{margin-bottom:12px}
.colophon{padding:clamp(48px,7vw,96px) 0}
.colophon .container{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gutter)}
.colophon h2{grid-column:span 12;font-size:clamp(24px,3.4vw,40px);font-weight:800;text-transform:uppercase;margin-bottom:32px}
.colophon .item{grid-column:span 4;border-top:var(--line);padding-top:16px}
.colophon .item h3{font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--red);text-transform:uppercase;margin-bottom:12px}
.colophon .item p{font-size:15px;color:#2b2b2b}

/* ---------- 响应式 ---------- */
@media (max-width:980px){
  .feature-info,.feature-visual{grid-column:1/span 12}
  .post-card{grid-column:span 6}
  .post-card:nth-child(3n){border-right:var(--line)}
  .post-card:nth-child(2n){border-right:none}
  .stat{grid-column:span 6}
  .stat:nth-child(2){border-right:none}
  .stat:nth-child(3){grid-column:span 12;border-right:none;border-top:var(--line)}
  .footer-grid>div{grid-column:span 6}
  .article-body .content{grid-column:1/span 12}
  .list-row .d{grid-column:span 12}
  .list-row .t{grid-column:span 12}
  .list-row .c,.list-row .l{grid-column:span 6}
  .list-row .l{text-align:left}
  .list-head{display:none}
  .archive-row .d{grid-column:span 12}
  .archive-row .t{grid-column:span 12}
  .archive-row .c{grid-column:span 12;text-align:left}
  .about-grid .side,.about-grid .body{grid-column:span 12}
  .principle .p-num,.principle .p-title{grid-column:span 3}
  .principle .p-body{grid-column:span 9}
  .colophon .item{grid-column:span 6}
}
@media (max-width:640px){
  .nav-toggle{display:block}
  .site-nav{
    display:none;position:absolute;top:64px;left:0;right:0;background:var(--paper);
    border-bottom:var(--line);flex-direction:column;align-items:stretch;padding:8px var(--gutter) 14px;
  }
  .site-nav.open{display:flex}
  .site-nav a{padding:15px 0;border-left:none;border-bottom:1px solid #ddd}
  .site-nav a.nav-search{background:none;color:var(--red)}
  .hero-sub p,.hero-sub p+p{grid-column:span 12}
  .post-card{grid-column:span 12;border-right:none;min-height:auto}
  .post-card:nth-child(2n){border-right:none}
  .stat{grid-column:span 12;border-right:none;border-bottom:var(--line)}
  .stat:nth-child(3){border-top:none}
  .footer-grid>div{grid-column:span 12}
  .article-nav{grid-template-columns:1fr}
  .article-nav a{border-right:none;border-bottom:var(--line);text-align:left!important}
  .article-nav a:last-child{border-bottom:none}
  .principle .p-num,.principle .p-title,.principle .p-body{grid-column:span 12}
  .colophon .item{grid-column:span 12}
}

@media print{
  .site-header,.site-footer,.article-nav{display:none}
  .article-body .content{grid-column:span 12;max-width:none}
  body{font-size:12pt}
}