/* ============================================================
   Daylight · the AIDC newsletter (/newsletter, /newsletter/<NNN>; built by scripts/build-newsletter.mjs).
   An editorial exception page like /designbook (docs/site-design.md §7): magazine masthead, full-bleed
   photographs (Design Book「日光」, Cameo series: black-and-white with one Adis toy in colour), one accent
   per block. Site nav, footer and button shapes as usual; containers are filled surfaces, no frames.
   Class prefix dl-.
   ============================================================ */

.dl {
  --dl-serif: "Instrument Serif", "Songti SC", "STSong", "Noto Serif SC", "Hiragino Mincho ProN", Georgia, serif;
  --dl-num: "Archivo", var(--font-display);
  --dl-ink: #0d0d0d;
  --dl-noon: #faf8f3;
  background: var(--bg);
  color: var(--ink);
}
.dl main { display: block; }
.dl .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.dl main a:not(.btn) { color: inherit; }
.dl-mut { color: var(--mut); font-size: 0.9rem; }
.dl-pill-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--signal)); margin: 0 7px 1px 0; vertical-align: middle; }
.dl-h-k { font-family: var(--font-mono); font-size: 0.8rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mut); margin: 0 0 18px; }
.dl-h-k::before { content: "// "; color: var(--signal); }
.dl-h2 { font-family: var(--font-display); font-size: clamp(2rem, 4.2vw, 3.4rem); font-weight: 650; line-height: 1.04; letter-spacing: -0.035em; margin: 0; color: var(--ink-strong); text-wrap: balance; }
.dl-sub { font-size: clamp(1.02rem, 1.3vw, 1.15rem); line-height: 1.6; color: var(--mut); margin: 14px 0 0; max-width: 40em; }
.dl-sec-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px 48px; align-items: end; margin-bottom: clamp(28px, 4vw, 48px); }
.dl-sec-head .dl-sub { margin: 0; }

/* ---------- masthead ---------- */
.dl-mast { padding-top: clamp(28px, 4vw, 48px); }
.dl-mast-top { display: flex; flex-wrap: wrap; gap: 6px 22px; align-items: baseline; font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--mut); padding-bottom: 14px; box-shadow: inset 0 -1px 0 var(--line); }
.dl-mast-no a { color: var(--signal); font-weight: 500; }
.dl-mast-every { margin-left: auto; }
.dl-word { margin: 0; font-family: var(--dl-serif); font-style: italic; font-weight: 400; font-size: clamp(84px, 19.5vw, 300px); line-height: 0.86; letter-spacing: -0.045em; color: var(--ink-strong); padding: clamp(10px, 2vw, 24px) 0 clamp(6px, 1vw, 14px); white-space: nowrap; }
.dl-word a { text-decoration: none; display: inline-flex; align-items: baseline; }
.dl-slash { font-family: var(--dl-num); font-style: normal; font-weight: 800; font-size: 0.62em; letter-spacing: -0.12em; color: var(--signal); margin-left: 0.06em; display: inline-block; transform-origin: 50% 70%; animation: dl-blink 5.4s 1.2s infinite; }
@keyframes dl-blink { 0%, 94%, 100% { transform: scaleY(1); } 96% { transform: scaleY(0.08); } }
.dl-mast-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 10px 32px; padding: 14px 0 clamp(28px, 4vw, 44px); box-shadow: inset 0 1px 0 var(--line); }
.dl-motto { margin: 0; font-size: clamp(1.05rem, 1.6vw, 1.3rem); line-height: 1.45; color: var(--ink-strong); max-width: 34em; }
.dl-voice { margin: 0; font-family: var(--dl-serif); font-style: italic; font-size: clamp(1.25rem, 2vw, 1.7rem); color: var(--ink-strong); }
.dl-voice [lang="zh-CN"], .dl-voice [lang="ja"] { font-style: normal; }
.dl-mast--small .dl-word { font-size: clamp(56px, 9vw, 128px); padding-bottom: clamp(18px, 3vw, 32px); }

/* ---------- cover ---------- */
.dl-cover { padding-bottom: clamp(56px, 7vw, 96px); }
.dl-cover-art { display: block; overflow: hidden; background: var(--surface); }
.dl-cover-img { display: block; width: 100%; height: auto; max-height: 88vh; object-fit: cover; aspect-ratio: 3 / 2; transition: transform 1.2s var(--ease); }
.dl-cover-art:hover .dl-cover-img { transform: scale(1.012); }
.dl-cover-text { display: grid; grid-template-columns: minmax(0, 1fr); padding-top: clamp(28px, 3.5vw, 44px); max-width: 1180px; }
.dl-cover-k { margin: 0 0 18px; font-size: 0.86rem; font-weight: 600; color: var(--ink-strong); display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.dl-num { font-family: var(--dl-num); font-stretch: 62%; font-weight: 900; font-size: 1.05rem; color: var(--signal); margin-right: 10px; letter-spacing: 0.02em; }
.dl-cover-h { margin: 0; font-family: var(--dl-serif); font-weight: 400; font-size: clamp(2.6rem, 6.4vw, 6rem); line-height: 1.0; letter-spacing: -0.03em; color: var(--ink-strong); text-wrap: balance; max-width: 16em; }
.dl-cover-h :is([lang="zh-CN"], [lang="ja"]) { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em; line-height: 1.12; font-size: 0.82em; }
.dl-cover-h a { text-decoration: none; }
.dl-cover-h a:hover { color: var(--signal); }
.dl-cover-dek { margin: 20px 0 0; font-size: clamp(1.1rem, 1.6vw, 1.36rem); line-height: 1.5; color: var(--mut); max-width: 40em; text-wrap: pretty; }
.dl-cover-act { margin: 28px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }

/* ---------- letter + this week ---------- */
.dl-issue { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); padding-bottom: clamp(80px, 10vw, 136px); }
.dl-letter { align-self: start; position: sticky; top: calc(var(--nav-h, 64px) + 24px); padding: clamp(24px, 3vw, 36px); border-radius: var(--radius-lg); background: var(--surface); }
.dl-letter-title { margin: 0 0 18px; font-family: var(--dl-serif); font-style: italic; font-size: clamp(1.7rem, 2.6vw, 2.3rem); line-height: 1.08; color: var(--ink-strong); letter-spacing: -0.015em; }
.dl-letter-title :is([lang="zh-CN"], [lang="ja"]) { font-style: normal; font-family: var(--font-display); font-weight: 650; font-size: 0.86em; }
.dl-letter-body p { margin: 0 0 1em; font-size: 1.04rem; line-height: 1.72; color: var(--ink); }
.dl-letter-body > [lang="en"] > p:first-child::first-letter,
.dl-letter-body > [lang="de"] > p:first-child::first-letter { float: left; font-family: var(--dl-serif); font-size: 3.6em; line-height: 0.8; padding: 0.08em 0.1em 0 0; color: var(--signal); }
.dl-sign { margin: 6px 0 0; font-size: 0.9rem; color: var(--mut); }
.dl-week-d { margin: -8px 0 28px; color: var(--mut); line-height: 1.55; }
.dl-briefs { list-style: none; margin: 0; padding: 0; }
.dl-brief { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 0 12px; padding: 26px 0; box-shadow: inset 0 -1px 0 var(--line); }
.dl-brief:first-child { padding-top: 4px; }
.dl-brief-n { font-family: var(--dl-num); font-stretch: 62%; font-weight: 900; font-size: 2.6rem; line-height: 0.9; color: var(--ink-strong); opacity: 0.16; }
.dl-brief-k { margin: 0 0 8px; font-size: 0.8rem; font-weight: 600; color: var(--mut); }
.dl-brief h3 { margin: 0 0 10px; font-size: clamp(1.18rem, 1.6vw, 1.36rem); line-height: 1.3; letter-spacing: -0.015em; color: var(--ink-strong); text-wrap: balance; }
.dl-brief-take { margin: 0 0 10px; line-height: 1.65; color: var(--ink); }
.dl-brief-take a { text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--signal) 55%, transparent); text-underline-offset: 3px; }
.dl-brief-src { margin: 0; font-size: 0.84rem; color: var(--mut); }
.dl-brief-src a { color: var(--ink-strong); font-weight: 500; }
.dl-brief-src a:hover { color: var(--signal); }

/* ---------- sections ---------- */
.dl-sections { padding-bottom: clamp(88px, 11vw, 144px); }
.dl-sec-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(36px, 4vw, 56px) clamp(20px, 3vw, 36px); }
.dl-sec { display: flex; flex-direction: column; gap: 18px; text-decoration: none; }
.dl-sec-art { border-radius: var(--radius-lg); overflow: hidden; background: var(--surface); aspect-ratio: 3 / 2; }
.dl-sec-art img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.dl-sec:hover .dl-sec-art img { transform: scale(1.025); }
.dl-sec-text { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; align-items: baseline; }
.dl-sec-n { font-family: var(--font-mono); font-size: 0.8rem; color: var(--signal); }
.dl-sec h3 { margin: 0; font-family: var(--dl-serif); font-weight: 400; font-size: clamp(1.9rem, 2.8vw, 2.5rem); line-height: 1; letter-spacing: -0.02em; color: var(--ink-strong); transition: color .15s; }
.dl-sec h3 :is([lang="zh-CN"], [lang="ja"]) { font-family: var(--font-display); font-weight: 650; font-size: 0.8em; }
.dl-sec:hover h3 { color: var(--signal); }
.dl-sec p { grid-column: 2; margin: 4px 0 0; color: var(--mut); line-height: 1.55; max-width: 32em; }

/* ---------- what we care about (ink band) ---------- */
.dl-care { background: var(--dl-ink); color: var(--dl-noon); }
.dl-care-art { position: relative; overflow: hidden; }
.dl-care-img { display: block; width: 100%; height: auto; aspect-ratio: 21 / 9; object-fit: cover; object-position: 50% 42%; }
.dl-care-art::after { content: ""; position: absolute; inset: auto 0 0 0; height: 46%; background: linear-gradient(to bottom, transparent, var(--dl-ink)); pointer-events: none; }
.dl-care-in { padding-top: clamp(8px, 2vw, 24px); padding-bottom: clamp(80px, 10vw, 136px); }
.dl-care-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px 48px; align-items: end; margin-bottom: clamp(36px, 5vw, 64px); }
.dl-care .dl-h2 { color: #fff; }
.dl-care .dl-sub { color: rgba(250, 248, 243, 0.7); margin: 0; }
.dl-pillars { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 28px; }
.dl-pillars li { padding-top: 18px; box-shadow: inset 0 3px 0 var(--c); }
.dl-pillars li[style*="#0D0D0D"], .dl-pillars li[style*="#0d0d0d"] { box-shadow: inset 0 3px 0 #fff; }
.dl-pillar-n { font-family: var(--font-mono); font-size: 0.78rem; color: rgba(250, 248, 243, 0.55); }
.dl-pillars h3 { margin: 10px 0 10px; font-size: 1.16rem; line-height: 1.25; letter-spacing: -0.01em; color: #fff; }
.dl-pillars p { margin: 0; font-size: 0.94rem; line-height: 1.6; color: rgba(250, 248, 243, 0.72); }

/* ---------- how it is made ---------- */
.dl-how { padding-top: clamp(88px, 11vw, 144px); padding-bottom: clamp(80px, 10vw, 128px); }
.dl-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; counter-reset: step; }
.dl-steps li { padding: 24px 22px 26px; border-radius: var(--radius-lg); background: var(--surface); }
.dl-step-n { font-family: var(--font-mono); font-size: 0.8rem; color: var(--signal); }
.dl-steps h3 { margin: 14px 0 8px; font-family: var(--dl-serif); font-weight: 400; font-size: 1.9rem; line-height: 1; letter-spacing: -0.02em; color: var(--ink-strong); }
.dl-steps h3 :is([lang="zh-CN"], [lang="ja"]) { font-family: var(--font-display); font-weight: 650; font-size: 0.8em; }
.dl-steps p { margin: 0; font-size: 0.95rem; line-height: 1.58; color: var(--mut); }

/* ---------- subscribe ---------- */
.dl-subscribe { padding-bottom: clamp(80px, 10vw, 128px); }
.dl-subscribe-in { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 72px); align-items: center; padding-top: clamp(32px, 5vw, 64px); padding-bottom: clamp(32px, 5vw, 64px); border-radius: var(--radius-xl, 32px); background: var(--surface); }
.dl-sub-h { margin: 0; font-family: var(--dl-serif); font-weight: 400; font-style: italic; font-size: clamp(2.6rem, 5.4vw, 4.8rem); line-height: 0.98; letter-spacing: -0.03em; color: var(--ink-strong); }
.dl-sub-h :is([lang="zh-CN"], [lang="ja"]) { font-style: normal; font-family: var(--font-display); font-weight: 700; font-size: 0.78em; letter-spacing: -0.02em; }
.dl-subscribe-text > p { margin: 18px 0 0; line-height: 1.6; color: var(--mut); max-width: 36em; }
.dl-form { display: flex; gap: 10px; margin-top: 26px; max-width: 520px; }
.dl-form input { flex: 1; min-width: 0; height: 48px; padding: 0 20px; border: 0; border-radius: var(--radius-full); background: var(--raised); box-shadow: var(--elev-1); font: inherit; font-size: 1rem; color: var(--ink-strong); outline: none; }
.dl-form input:focus-visible { box-shadow: var(--elev-1), 0 0 0 3px var(--signal-soft, rgba(255, 77, 0, 0.25)); }
.dl-form .btn { height: 48px; padding: 0 26px; }
.dl-form[aria-busy="true"] .btn { opacity: 0.6; pointer-events: none; }
.dl-form-msg { margin: 14px 0 0; font-size: 0.95rem; color: var(--ink-strong); }
.dl-rss { margin: 18px 0 0; font-size: 0.9rem; }
.dl-rss a { color: var(--mut); }
.dl-rss a:hover { color: var(--signal); }
.dl-subscribe-art { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4 / 5; background: var(--bg-2); }
.dl-subscribe-art img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ---------- archive, back, disclosure ---------- */
.dl-archive { padding-bottom: clamp(48px, 6vw, 80px); }
.dl-arch-list { list-style: none; margin: 0; padding: 0; }
.dl-arch-list a { display: grid; grid-template-columns: 90px minmax(0, 1fr) auto; gap: 16px; align-items: baseline; padding: 16px 0; box-shadow: inset 0 -1px 0 var(--line); text-decoration: none; }
.dl-arch-no { font-family: var(--font-mono); font-size: 0.86rem; color: var(--signal); }
.dl-arch-t { font-family: var(--dl-serif); font-size: 1.5rem; line-height: 1.15; color: var(--ink-strong); }
.dl-arch-d { font-size: 0.86rem; color: var(--mut); }
.dl-arch-list a:hover .dl-arch-t { color: var(--signal); }
.dl-back { padding-bottom: clamp(48px, 6vw, 72px); }
.dl-disclose { margin: 0 auto; padding-bottom: clamp(56px, 7vw, 88px); font-size: 0.82rem; line-height: 1.6; color: var(--mut); max-width: var(--w-max); }

/* ---------- unsubscribe ---------- */
.dl-unsub { padding-top: clamp(32px, 5vw, 64px); padding-bottom: clamp(88px, 11vw, 144px); max-width: 760px; }
.dl-unsub .dl-sub { margin-top: 18px; }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .dl-pillars { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 36px; }
  .dl-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .dl-issue { grid-template-columns: minmax(0, 1fr); }
  .dl-letter { position: static; }
  .dl-sec-head, .dl-care-head { grid-template-columns: minmax(0, 1fr); }
  .dl-subscribe-in { grid-template-columns: minmax(0, 1fr); }
  .dl-subscribe-art { max-width: 420px; }
}
@media (max-width: 640px) {
  .dl-mast-every { margin-left: 0; }
  .dl-word { font-size: clamp(64px, 21vw, 120px); }
  .dl-cover-img { aspect-ratio: 4 / 3; }
  .dl-sec-grid { grid-template-columns: minmax(0, 1fr); }
  .dl-pillars, .dl-steps { grid-template-columns: minmax(0, 1fr); }
  .dl-care-img { aspect-ratio: 4 / 3; }
  .dl-brief { grid-template-columns: 44px minmax(0, 1fr); }
  .dl-brief-n { font-size: 2rem; }
  .dl-form { flex-direction: column; }
  .dl-arch-list a { grid-template-columns: 70px minmax(0, 1fr); }
  .dl-arch-d { grid-column: 2; }
}
@media (prefers-reduced-motion: reduce) {
  .dl-slash { animation: none; }
  .dl-cover-img, .dl-sec-art img { transition: none; }
}