.article-main{padding:0;background:var(--paper)}
.article-main article{margin:0}
.article-hero{position:relative;isolation:isolate;overflow:hidden;min-height:680px;padding:160px clamp(22px,5vw,72px) 45px;background:var(--night);color:var(--paper)}.article-hero:before{content:"";position:absolute;z-index:-2;inset:-18px;background:var(--article-bg) center/cover no-repeat;filter:blur(10px);transform:scale(1.06)}.article-hero:after{content:"";position:absolute;z-index:-1;inset:0;background:linear-gradient(90deg,rgba(8,11,13,.99),rgba(8,11,13,.93) 44%,rgba(8,11,13,.62))}
.article-hero-inner{display:grid;grid-template-columns:minmax(290px,.72fr) minmax(0,1.28fr);align-items:end;max-width:1320px;min-height:475px;margin:0 auto}
.article-header{position:relative;z-index:2;padding:34px 45px 34px 0}
.article-meta{display:flex;justify-content:space-between;margin-bottom:32px;font:500 10px/1 var(--mono);letter-spacing:.13em;color:var(--cyan)}
.article-header h1{margin:0;font:900 clamp(27px,3.4vw,46px)/1.35 var(--serif);letter-spacing:-.06em;text-wrap:pretty;color:#fff;text-shadow:0 3px 28px rgba(0,0,0,.55)}
.article-header h1 small{font-size:.48em;font-weight:700;letter-spacing:-.04em}
.article-date{display:flex;align-items:center;gap:24px;margin-top:38px;font:500 11px/1 var(--mono)}
.article-date time{color:var(--cyan)}.article-date span{color:rgba(245,246,244,.55)}
.article-visual{position:relative;margin:0;aspect-ratio:16/9;overflow:hidden;background:var(--night);-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 15%,#000 100%);mask-image:linear-gradient(90deg,transparent 0,#000 15%,#000 100%)}.article-visual:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(13,17,20,.62),transparent 25%);pointer-events:none}
.article-visual img{width:100%;height:100%;display:block;object-fit:cover}
.article-paper{padding:clamp(75px,10vw,135px) 22px clamp(80px,10vw,140px);background:var(--paper)}
.article-body{max-width:700px;margin:70px auto 0;font-family:var(--serif);font-size:17px;line-height:2.15}
.article-paper .article-body{margin-top:0}
.article-body p{margin:0 0 var(--para-gap);text-wrap:pretty}
.article-body .disclaim{margin-bottom:50px;padding:22px 24px;border:1px solid rgba(16,18,20,.24);background:var(--night);color:var(--paper);box-shadow:4px 4px 0 var(--cyan);font-family:var(--sans);font-size:13px;font-weight:700;line-height:1.9}
.article-body .standalone{margin:2.4em 0;font-size:clamp(23px,3vw,31px);font-weight:700;line-height:1.6}
.article-body blockquote{margin:42px 0;padding:28px 0;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);font-weight:700;line-height:2.15;text-wrap:pretty}
.article-body .byline{margin-top:70px;padding-top:20px;border-top:1px solid rgba(23,19,31,.25);font:500 11px/1.8 var(--mono);color:#7c737f}
.article-body .byline a{color:#317b7d;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}.article-body .byline a:hover{color:var(--ink)}
.article-more{max-width:1120px;margin:clamp(95px,12vw,150px) auto 0;padding-top:46px;border-top:2px solid var(--ink)}.article-more>header{display:flex;align-items:end;justify-content:space-between;gap:35px;margin-bottom:42px}.article-more>header .eyebrow{margin-bottom:13px}.article-more h2{margin:0;font:900 clamp(34px,4.6vw,62px)/1.15 var(--sans);letter-spacing:-.055em}.article-more>header>a{flex:0 0 auto;padding:12px 14px;border:2px solid var(--ink);background:#fff;box-shadow:3px 3px 0 var(--ink);font-size:11px;font-weight:700;transition:transform .12s,box-shadow .12s}.article-more>header>a:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--ink)}.article-more>header>a:active{transform:translate(3px,3px);box-shadow:none}
.recommend-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.5vw,34px)}.recommend-card{--mx:50%;--my:50%;position:relative;isolation:isolate;display:flex;min-width:0;flex-direction:column;gap:18px;padding:0 0 22px;border-bottom:1px solid rgba(16,18,20,.28);transition:opacity .85s cubic-bezier(.16,1,.3,1),transform .5s cubic-bezier(.16,1,.3,1)}.recommend-card:before{content:"";position:absolute;z-index:-1;inset:-14px;background:radial-gradient(circle at var(--mx) var(--my),rgba(114,191,192,.3),rgba(255,255,255,.78) 30%,transparent 72%);opacity:0;box-shadow:0 24px 60px rgba(13,17,20,0);transition:opacity .3s,box-shadow .45s}.recommend-card.is-visible:hover{transform:translateY(-8px)}.recommend-card:hover:before{opacity:1;box-shadow:0 24px 60px rgba(13,17,20,.11)}.recommend-card figure{overflow:hidden;margin:0;aspect-ratio:16/10;background:var(--night)}.recommend-card figure img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .55s}.recommend-card:hover figure img{transform:scale(1.035)}.recommend-card>div{min-width:0}.recommend-kind{display:inline-block;margin-bottom:12px;padding:5px 8px;background:var(--night);color:var(--paper);font:500 8px/1 var(--mono);letter-spacing:.1em}.recommend-card.is-next .recommend-kind{background:#317b7d}.recommend-card p{margin:0 0 10px;font:500 9px/1.6 var(--mono);color:#687174}.recommend-card h3{margin:0;font:700 clamp(15px,1.25vw,18px)/1.6 var(--sans);letter-spacing:-.035em;text-wrap:pretty}.recommend-card:hover h3{color:#317b7d}
.article-nav{display:flex;justify-content:space-between;gap:30px;max-width:700px;margin:70px auto 0;padding-top:28px;border-top:2px solid var(--ink);font:500 11px/1.5 var(--mono)}
.article-nav a{color:#317b7d}
.archive-main{padding:0;background:var(--paper)}.archive-header{position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:1fr 1.5fr;gap:40px;align-items:end;min-height:500px;margin:0;padding:190px clamp(22px,5vw,72px) 72px;background:var(--night);color:var(--paper)}.archive-header:before{content:"";position:absolute;z-index:-2;inset:-18px;background:url('./assets/thumbs/01-lunar-standard-time.webp') center/cover no-repeat;filter:blur(10px);transform:scale(1.06)}.archive-header:after{content:"";position:absolute;z-index:-1;inset:0;background:linear-gradient(90deg,rgba(8,11,13,.98),rgba(8,11,13,.91) 55%,rgba(8,11,13,.68))}.archive-header .eyebrow{position:relative;grid-column:1/-1}.archive-header h1{position:relative;margin:0;font:900 clamp(52px,8vw,110px)/1 var(--serif);letter-spacing:-.07em;color:#fff}.archive-header>p:last-child{position:relative;margin:0;max-width:38em;font-size:14px;line-height:2;color:rgba(245,246,244,.72)}.archive-content{padding:clamp(70px,9vw,115px) clamp(22px,5vw,72px) 120px}.archive-tools{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:28px;margin-bottom:42px;padding:18px 20px;background:rgba(255,255,255,.45);border:1px solid rgba(255,255,255,.92);box-shadow:0 16px 40px rgba(13,17,20,.07),inset 0 1px 0 #fff;-webkit-backdrop-filter:blur(16px) saturate(1.2);backdrop-filter:blur(16px) saturate(1.2)}.archive-tools:before{content:"";position:absolute;z-index:-1;inset:-100% -20%;background:radial-gradient(ellipse at 24% 52%,rgba(114,191,192,.23),transparent 26%),linear-gradient(112deg,transparent 38%,rgba(255,255,255,.72) 50%,transparent 62%);animation:waterDrift 10s ease-in-out infinite alternate}.archive-tools>p{margin:0;font:500 10px/1 var(--mono);white-space:nowrap}.archive-filters{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:12px}.archive-filters button{position:relative;appearance:none;padding:10px 14px;border:2px solid var(--ink);border-radius:0;background:rgba(255,255,255,.7);color:var(--ink);font:500 11px/1 var(--sans);box-shadow:3px 3px 0 var(--ink);cursor:pointer;transition:transform .12s,box-shadow .12s}.archive-filters button:hover,.archive-filters button:focus-visible{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--ink)}.archive-filters button:active{transform:translate(3px,3px);box-shadow:none}.archive-filters button.is-active{background:var(--ink);color:#fff;border-color:var(--ink);box-shadow:3px 3px 0 var(--cyan)}.archive-list{border-top:2px solid var(--ink)}.archive-card{display:grid;grid-template-columns:54px minmax(180px,250px) minmax(0,1fr) auto;gap:clamp(22px,3.5vw,48px);align-items:center;padding:34px 0;border-bottom:1px solid rgba(23,19,31,.22)}.archive-card[hidden]{display:none}.archive-card figure{position:relative;overflow:hidden;margin:0;aspect-ratio:16/10;background:var(--night)}.archive-card figure img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .55s}.archive-card:hover figure img{transform:scale(1.035)}.archive-no{align-self:start;padding-top:5px;font:500 23px/1 var(--mono);color:#317b7d}.archive-card h2{margin:9px 0 10px;font:700 clamp(17px,1.5vw,21px)/1.6 var(--serif);letter-spacing:-.04em}.archive-card p{margin:0;max-width:48em;font-size:13px;line-height:1.9;color:#687174}.archive-card time{font:500 10px/1 var(--mono);writing-mode:vertical-rl}.archive-card:hover h2{color:#317b7d}
@media(max-width:760px){.archive-header{grid-template-columns:1fr;min-height:460px;padding-top:155px}.archive-header .eyebrow{grid-column:auto}.archive-content{padding-top:60px}.archive-tools{align-items:flex-start;flex-direction:column}.archive-filters{justify-content:flex-start}.archive-card{grid-template-columns:42px 1fr;gap:18px}.archive-card figure{grid-column:2}.archive-card>div{grid-column:2}.archive-card time{display:none}}
@media(prefers-reduced-motion:reduce){.archive-tools:before{animation:none}}
@media(max-width:760px){.recommend-grid{grid-template-columns:1fr}.recommend-card{display:grid;grid-template-columns:minmax(120px,.7fr) minmax(0,1.3fr);align-items:center;padding-bottom:18px}.recommend-card figure{aspect-ratio:4/3}.article-more>header{align-items:flex-start;flex-direction:column}}
@media(max-width:600px){.article-hero{min-height:690px;padding:138px 18px 24px}.article-hero-inner{grid-template-columns:1fr;align-content:end;min-height:525px}.article-header{z-index:3;max-width:96%;margin-bottom:-20px;padding:24px 24px 32px 0;text-shadow:0 2px 20px rgba(0,0,0,.7)}.article-header h1{font-size:7.6vw}.article-meta{margin-bottom:24px}.article-date{align-items:flex-start;flex-direction:column;gap:12px}.article-visual{aspect-ratio:4/3;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 14%,#000 100%);mask-image:linear-gradient(180deg,transparent 0,#000 14%,#000 100%)}.article-visual:after{background:linear-gradient(180deg,rgba(13,17,20,.62),transparent 24%)}.article-paper{padding-top:65px}.article-body{font-size:16px}.article-nav span{display:none}}
@media(max-width:460px){.recommend-card{grid-template-columns:1fr}.recommend-card figure{aspect-ratio:16/10}}

/* --- TYPE-SCALE (2026-08-26) --------------------------------------------
   見出しが全体に大きすぎたので、一段ずつ下げた。変更したのは次の5か所。

     .article-header h1  72px → 46px   スマホ 11vw → 7.6vw   ← style.css
     .hero-copy h1       62px → 42px   スマホ 11vw → 7.6vw   ← site.css
     .story-card h3      30px → 20px                        ← site.css
     .recommend-card h3  27px → 18px                        ← style.css
     .archive-card h2    32px → 21px   スマホ 16px          ← style.css

   記事HEROは、長い見出しが .article-hero の overflow:hidden に
   切り取られて最終行が消えていた（例：「めぐり調整続く」の「く」）。
   文字を下げたことで320px幅でも3行に収まり、はみ出しは解消している。
   下限を下げるときは、記事HEROの行数が増えて再発しないか実機幅で確認すること。 */
@media(max-width:760px){
  .archive-card h2{margin:7px 0 9px;font-size:16px;line-height:1.65}
}

/* --- SOFT-EDGES (2026-08-26) --------------------------------------------
   暗いHEROと明るい本文の境目が直線で切れていて硬かったので、
   HEROの次に来るセクションの上端に「夜の色 → 紙の色」のグラデーションを敷き、
   HEROがそのまま溶けて本文に変わるように見せる。
   グラデーションの高さは、必ずそのセクションの上端パディングより短くすること。
   長いと本文の1行目がグレーの上に載って読めなくなる（実測で確認済み）。
   いまの上端パディングの最小値は archive-content の PC 115px / スマホ 60px。
   HERO側ではなく次のセクション側に敷いているのは、HEROの中には写真や
   キャプションが載っていて、そこに覆いをかけると文字まで薄くなるため。 */
.article-paper{background:linear-gradient(180deg,#0d1114 0,#1b2023 22%,#3f4548 48%,#8f9591 74%,#f5f6f4 100%) no-repeat top/100% 100px,var(--paper)}
.archive-content{background:linear-gradient(180deg,#0d1114 0,#1b2023 22%,#3f4548 48%,#8f9591 74%,#f5f6f4 100%) no-repeat top/100% 100px,var(--paper)}
@media(max-width:760px){
  .article-paper{background:linear-gradient(180deg,#0d1114 0,#1b2023 22%,#3f4548 48%,#8f9591 74%,#f5f6f4 100%) no-repeat top/100% 56px,var(--paper)}
  .archive-content{background:linear-gradient(180deg,#0d1114 0,#1b2023 22%,#3f4548 48%,#8f9591 74%,#f5f6f4 100%) no-repeat top/100% 56px,var(--paper)}
}