:root {
    --bg: #ffffff;
    --ink: #0a0a0a;
    --soft: #4a4a4a;
    --mute: #888;
    --line: #d8d8d8;
    --line-soft: #ececec;
    --accent: #0a0a0a;       /* tweakable */
    --hover-bg: #f6f5f1;     /* tweakable */
    --row-h: 14px;           /* tweakable density */
    --blob-intensity: 1;     /* 動畫升級版 motion.js 的冷霧本身已很淡，用 1 為設計基準 */
    --sans: "Inter", "Noto Sans TC", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --serif: "Noto Serif TC", serif;
    --mono: "JetBrains Mono", ui-monospace, monospace;
  }
  *,*:before,*:after { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; background: var(--bg); color: var(--ink); }
  body {
    font-family: var(--sans);
    font-size: 13px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    letter-spacing: .01em;
    cursor: none;
  }
  a, button, [class*="work"], [class*="row"] { cursor: none; }
  a { color: inherit; text-decoration: none; }
  ::selection { background: var(--ink); color: var(--bg); }
  body::-webkit-scrollbar { width: 0; }

  /* ── Cross-hair cursor ─────────────────────── */
  .xh-v, .xh-h {
    position: fixed; pointer-events: none; z-index: 9999;
    background: rgba(0, 0, 0, 0.18);
    transition: opacity .25s;
    will-change: transform;
  }
  .xh-v { top: 0; left: 0; width: 1px; height: 100vh; transform: translateX(-1px); }
  .xh-h { top: 0; left: 0; height: 1px; width: 100vw; transform: translateY(-1px); }
  .xh-dot {
    position: fixed; pointer-events: none; z-index: 9999;
    width: 18px; height: 18px;
    border: 1.5px solid rgba(0, 0, 0, 0.7);
    transform: translate(-50%, -50%);
    transition: width .2s, height .2s, background .2s, border-color .2s;
    background: transparent;
  }
  .xh-dot.hover {
    width: 40px; height: 40px;
    background: var(--accent);
    border-color: var(--accent);
  }
  .xh-label {
    position: fixed; pointer-events: none; z-index: 9999;
    font-family: var(--mono); font-size: 9px;
    letter-spacing: .25em; text-transform: uppercase;
    color: var(--accent); background: var(--bg);
    padding: 4px 7px; border: 1px solid var(--accent);
    transform: translate(20px, 14px);
    opacity: 0; transition: opacity .2s;
    white-space: nowrap;
  }
  .xh-label.show { opacity: 1; }

  /* ── Top bar ───────────────────────────────── */
  .topbar {
    position: fixed; top: 0; left: 0; right: 0; z-index: 50;
    display: grid; grid-template-columns: 1fr auto 1fr;
    padding: 14px 28px;
    background: rgba(244,241,234,.82);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--line);
    font-family: var(--mono); font-size: 11px;
    letter-spacing: .12em; text-transform: uppercase;
    transition: background .4s, border-color .4s;
  }
  /* 捲動過 hero 後變實白（由 motion.js 加上 .solid） */
  .topbar.solid { background: rgba(255,255,255,.94); }
  .topbar .brand { display: flex; gap: 10px; align-items: center; }
  .topbar .brand img { width: 18px; height: 18px; }
  .topbar nav { display: flex; gap: 22px; }
  .topbar nav a {
    padding: 4px 0;
    position: relative;
    transition: color .25s;
  }
  .topbar nav a::after {
    content: ""; position: absolute; left: 0; right: 100%; bottom: 0;
    height: 1px; background: var(--accent);
    transition: right .4s cubic-bezier(.2,.8,.2,1);
  }
  .topbar nav a:hover { color: var(--accent); }
  .topbar nav a:hover::after { right: 0; }
  .topbar .right {
    text-align: right; color: var(--mute);
    display: flex; gap: 16px; justify-content: flex-end; align-items: center;
  }
  .topbar .right .live::before {
    content: "";
    display: inline-block;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--accent);
    margin-right: 6px;
    vertical-align: middle;
    animation: pulse 1.8s ease-in-out infinite;
  }
  @keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .25; } }

  main { padding-top: 50px; }

  /* ── Intro · CLOUD-MOUNTAIN LIGHT HERO (空中樓閣) ──────── */
  .intro {
    position: relative;
    min-height: calc(100vh - 50px);
    border-bottom: 1px solid var(--line);
    overflow: hidden;
    background: linear-gradient(180deg, #fcfcfa 0%, #f5f7f6 52%, #eef2f1 100%);
    display: grid;
    grid-template-rows: 1fr auto;
    isolation: isolate;
  }
  /* layered scenery */
  .intro-scene { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
  .intro-mountain {
    position: absolute;
    left: 50%; bottom: 0%;
    width: min(70vw, 820px);
    transform: translateX(-50%);
    opacity: .8;
    mix-blend-mode: multiply;
    -webkit-mask-image: radial-gradient(ellipse 64% 74% at 50% 46%, #000 42%, transparent 82%);
            mask-image: radial-gradient(ellipse 64% 74% at 50% 46%, #000 42%, transparent 82%);
    animation: mtnDrift 30s ease-in-out infinite;
  }
  @keyframes mtnDrift {
    0%, 100% { transform: translateX(-50%) scale(1); }
    50% { transform: translateX(-50%) scale(1.025); }
  }
  .intro-clouds {
    position: absolute;
    left: 0; right: 0; bottom: -28px;
    height: 520px;
    z-index: 3;
    background-image: url("/kiaa-design/assets/cloud-strip.png");
    background-repeat: repeat-x;
    background-size: 2400px 560px;
    background-position: 0 bottom;
    filter: brightness(1.04) saturate(.88) contrast(1.05);
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 86%, transparent 100%);
            mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 86%, transparent 100%);
    animation: cloudFlow 150s linear infinite;
  }
  .intro-clouds.back {
    height: 380px; bottom: 26%;
    opacity: .4;
    background-size: 2400px 400px;
    filter: brightness(1.14) saturate(.72) blur(2px);
    z-index: 1;
    animation: cloudFlow 240s linear infinite reverse;
  }
  @keyframes cloudFlow {
    from { background-position-x: 0; }
    to { background-position-x: 2400px; }
  }
  /* atmospheric canvas (light motes / mist) */
  .intro-blobs { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; pointer-events: none; }

  /* Center stage: floating pavilion (空中樓閣) */
  .intro-stage {
    position: relative; z-index: 3;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding: 40px 28px 0;
  }
  .intro-mark-wrap {
    position: relative;
    display: flex; align-items: center; justify-content: center;
    animation: markFloat 8s ease-in-out infinite;
  }
  .intro-mark-wrap::before {
    content: "";
    position: absolute;
    width: 200%; height: 200%;
    left: -50%; top: -50%;
    background: radial-gradient(circle, rgba(255,255,255,.95) 0%, rgba(255,255,255,.5) 38%, transparent 66%);
    z-index: -1;
    animation: glowPulse 7s ease-in-out infinite;
  }
  .intro-mark {
    width: min(20vw, 184px);
    height: auto;
    filter: drop-shadow(0 16px 28px rgba(50,70,80,.28));
  }
  @keyframes markFloat {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-14px) rotate(-1deg); }
  }
  @keyframes glowPulse {
    0%, 100% { opacity: .65; transform: scale(1); }
    50% { opacity: .95; transform: scale(1.06); }
  }

  /* Floating glass data chips */
  .intro-chips {
    position: absolute; z-index: 4;
    right: clamp(20px, 5vw, 80px);
    top: 48%; transform: translateY(-50%);
    display: flex; flex-direction: column; gap: 14px;
  }
  .chip {
    backdrop-filter: blur(10px) saturate(120%);
    background: rgba(255,255,255,.55);
    border: 1px solid rgba(255,255,255,.85);
    box-shadow: 0 8px 24px rgba(70,90,100,.10);
    border-radius: 14px;
    padding: 15px 20px; min-width: 132px;
    transition: transform .4s cubic-bezier(.2,.8,.2,1), background .4s;
  }
  .chip:hover { transform: translateX(-6px); background: rgba(255,255,255,.78); }
  .chip .v {
    font-family: var(--serif); font-size: 30px; font-weight: 500;
    color: var(--ink); line-height: 1;
    display: flex; align-items: baseline; gap: 3px;
  }
  .chip .v sup { font-size: 13px; color: #5f8a80; font-family: var(--mono); }
  .chip .k {
    margin-top: 7px;
    font-family: var(--mono); font-size: 9.5px;
    letter-spacing: .2em; text-transform: uppercase; color: var(--mute);
  }

  /* Lower glass title card */
  .intro-foot {
    position: relative; z-index: 4;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: end; gap: 24px;
    padding: 0 clamp(20px, 5vw, 80px) clamp(28px, 5vh, 56px);
  }
  .intro-card {
    backdrop-filter: blur(14px) saturate(130%);
    background: rgba(255,255,255,.5);
    border: 1px solid rgba(255,255,255,.85);
    box-shadow: 0 12px 40px rgba(70,90,100,.12);
    border-radius: 18px;
    padding: 26px 30px 28px; max-width: 430px;
  }
  .intro-card .lbl {
    font-family: var(--mono); font-size: 10px;
    letter-spacing: .25em; text-transform: uppercase;
    color: var(--mute); margin-bottom: 14px;
    display: flex; align-items: center; gap: 10px;
  }
  .intro-card .lbl .idx { color: #5f8a80; }
  .intro-wordmark {
    font-family: var(--serif); font-weight: 500;
    font-size: clamp(44px, 6.5vw, 84px);
    line-height: .96; letter-spacing: .04em;
    margin: 0; color: var(--ink);
  }
  .intro-wordmark .num { display: none; }
  .intro-wordmark .ch { display: inline-block; opacity: 0; transform: translateY(40%); }
  .intro-tag {
    margin-top: 16px;
    font-family: var(--sans); font-weight: 400;
    font-size: 14px; color: var(--soft);
    letter-spacing: .02em; line-height: 1.6;
  }
  .intro-tag .hl { color: var(--ink); font-weight: 500; }
  .intro-more {
    display: inline-flex; align-items: center; gap: 10px;
    margin-top: 22px; padding: 11px 20px;
    border: 1px solid var(--ink); border-radius: 999px;
    font-family: var(--mono); font-size: 11px;
    letter-spacing: .15em; text-transform: uppercase;
    color: var(--ink);
    transition: background .3s, color .3s;
  }
  .intro-more:hover { background: var(--ink); color: #fff; }
  .intro-more .ar { transition: transform .3s; }
  .intro-more:hover .ar { transform: translateX(4px); }

  .intro-foot .mid { justify-self: center; align-self: end; }
  .intro-foot .right { justify-self: end; }

  /* Circular SCROLL indicator */
  .scroll-disc { position: relative; width: 92px; height: 92px; display: grid; place-items: center; }
  .scroll-disc svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: spin 16s linear infinite; }
  .scroll-disc svg text { fill: var(--mute); font-family: var(--mono); font-size: 8.4px; letter-spacing: .26em; }
  .scroll-disc .arr { font-size: 15px; color: var(--ink); animation: bob 2s ease-in-out infinite; }
  @keyframes spin { to { transform: rotate(360deg); } }
  @keyframes bob { 0%,100% { transform: translateY(-2px); } 50% { transform: translateY(3px); } }

  .intro-corner {
    font-family: var(--mono); font-size: 10px;
    letter-spacing: .18em; color: var(--mute);
    line-height: 1.9; text-align: right;
  }
  .intro-corner b { color: var(--ink); }

  /* About — soft cloud continuity from hero */
  #about { position: relative; }
  #about::before {
    content: "";
    position: absolute; left: 0; right: 0; top: -150px; height: 320px;
    background-image: url("/kiaa-design/assets/cloud-strip.png");
    background-repeat: repeat-x;
    background-size: 2400px 320px;
    background-position: 0 bottom;
    filter: brightness(1.06) saturate(.78) contrast(1.02) blur(1px);
    opacity: .5;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.45) 50%, transparent 88%);
            mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.45) 50%, transparent 88%);
    pointer-events: none; z-index: 0;
    animation: cloudFlow 90s linear infinite;
  }
  #about > * { position: relative; z-index: 1; }

  /* Contact — 頁尾回到山：山脈 bookend + 雲海（動畫升級版） */
  #contact { position: relative; overflow: hidden; }
  #contact > .contact-range {
    position: absolute; left: 0; right: 0; bottom: 0;
    height: 440px;
    z-index: 0; pointer-events: none;
    overflow: hidden;
  }
  .contact-range img {
    position: absolute;
    height: auto;
    mix-blend-mode: multiply;
  }
  .contact-range .m-center {
    left: 50%; transform: translateX(-50%);
    width: min(46vw, 540px); bottom: -22%;
    opacity: .92;
    animation: mtnDrift 32s ease-in-out infinite;
  }
  .contact-range .m-left {
    left: -4%; width: min(34vw, 400px); bottom: -30%;
    opacity: .6;
    transform-origin: bottom center;
    animation: mtnBreath 40s ease-in-out infinite;
  }
  .contact-range .m-right {
    right: -2%; width: min(38vw, 450px); bottom: -26%;
    opacity: .72;
    transform-origin: bottom center;
    animation: mtnBreath 36s ease-in-out infinite reverse;
  }
  @keyframes mtnBreath {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.03); }
  }
  #contact::after {
    content: "";
    position: absolute; left: 0; right: 0; bottom: 0; height: 210px;
    background-image: url("/kiaa-design/assets/cloud-strip.png");
    background-repeat: repeat-x;
    background-size: 2400px 260px;
    background-position: 0 bottom;
    filter: brightness(1.05) saturate(.82) contrast(1.04);
    opacity: .72;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 48%, #000 100%);
            mask-image: linear-gradient(180deg, transparent 0%, #000 48%, #000 100%);
    pointer-events: none; z-index: 0;
    animation: cloudFlow 150s linear infinite;
  }
  #contact > * { position: relative; z-index: 1; }

  .about-stats {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-top: 48px;
    padding-top: 26px;
    border-top: 1px solid var(--line);
  }
  .about-stats h6 {
    margin: 0 0 5px;
    font-family: var(--mono); font-size: 9.5px;
    letter-spacing: .25em; text-transform: uppercase;
    color: var(--mute); font-weight: 400;
  }
  .about-stats p {
    margin: 0; color: var(--ink);
    font-family: var(--sans); font-size: 15px; font-weight: 500;
  }
  .about-stats .tick { font-variant-numeric: tabular-nums; }

  /* ── Block: numbered section ──────────────── */
  section.blk { padding: 80px 28px 60px; border-bottom: 1px solid var(--line); }
  section.blk h2 {
    display: grid; grid-template-columns: 80px 1fr auto;
    align-items: baseline;
    gap: 24px;
    margin: 0 0 56px;
    font-family: var(--sans);
    font-size: 36px;
    font-weight: 700;
    letter-spacing: -.02em;
  }
  section.blk h2 .nn { font-family: var(--mono); font-size: 12px; letter-spacing: .15em; color: var(--mute); font-weight: 400; padding-top: 12px; }
  section.blk h2 .ext { font-family: var(--mono); font-size: 11px; letter-spacing: .15em; color: var(--mute); font-weight: 400; }

  /* About */
  .about-text {
    display: grid; grid-template-columns: 80px 1fr 1fr 1fr;
    gap: 24px;
    padding: 0 0 20px;
  }
  .about-text p {
    margin: 0;
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.75;
    color: var(--soft);
  }
  .about-text .lede {
    font-size: 22px; color: var(--ink); font-weight: 400; line-height: 1.55;
    grid-column: 2 / 4;
    letter-spacing: -.005em;
  }
  .about-text .corner {
    font-family: var(--mono); font-size: 10.5px;
    text-align: right;
    color: var(--mute); letter-spacing: .12em;
  }

  /* Index list */
  .idx {
    border-top: 1px solid var(--ink);
  }
  .idx .row {
    display: grid;
    grid-template-columns: 60px 80px 1.4fr 1fr 90px 70px 24px;
    align-items: baseline;
    gap: 16px;
    padding: var(--row-h) 0;
    border-bottom: 1px solid var(--line);
    transition: padding .25s, background .25s;
    cursor: pointer;
  }
  .idx .row:hover { padding-inline: 12px; background: var(--hover-bg); }
  .idx .row .c-id, .idx .row .c-yr, .idx .row .c-tag, .idx .row .c-loc {
    font-family: var(--mono); font-size: 11px;
    color: var(--mute); letter-spacing: .1em;
  }
  .idx .row .c-id { color: var(--ink); font-weight: 500; }
  .idx .row .c-yr { color: var(--ink); }
  .idx .row .c-title {
    font-family: var(--sans); font-weight: 600;
    font-size: 15px; color: var(--ink);
    letter-spacing: 0;
  }
  .idx .row .c-title small {
    display: block; font-size: 12px; color: var(--mute);
    font-weight: 400; margin-top: 1px;
    letter-spacing: .04em;
  }
  .idx .row .c-note {
    font-family: var(--sans); font-size: 13px; color: var(--soft);
    line-height: 1.55;
  }
  .idx .row .c-arrow { text-align: right; font-family: var(--mono); font-size: 14px; color: var(--mute); transition: transform .3s, color .3s; }
  .idx .row:hover .c-arrow { color: var(--accent); transform: translateX(4px); }
  .idx .row:hover .c-title { color: var(--accent); }

  /* Works thumbnails */
  .works-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px 16px;
    margin-top: 8px;
  }
  .work {
    cursor: pointer;
    display: flex; flex-direction: column;
  }
  .work .thumb {
    aspect-ratio: 4/3;
    background: #ededed;
    border: 1px solid var(--line);
    position: relative;
    overflow: hidden;
    margin-bottom: 12px;
    transition: filter .3s;
  }
  .work .thumb svg { width: 100%; height: 100%; display: block; }
  .work .thumb-img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s cubic-bezier(.2,.8,.2,1); }
  .work:hover .thumb-img { transform: scale(1.045); }
  .work .thumb .ph {
    position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    background: rgba(255,255,255,.95);
    border: 1px solid var(--ink);
    padding: 5px 10px;
    font-family: var(--mono); font-size: 9.5px;
    letter-spacing: .2em; text-transform: uppercase;
  }
  .work:hover .thumb svg { filter: invert(.05); }
  .work:hover .thumb .ph { background: var(--accent); color: #fff; border-color: var(--accent); }
  .work .topline {
    display: flex; justify-content: space-between;
    font-family: var(--mono); font-size: 10px; letter-spacing: .15em;
    color: var(--mute); margin-bottom: 4px;
  }
  .work .ttl {
    font-family: var(--sans); font-weight: 600; font-size: 14px;
    color: var(--ink); margin-bottom: 2px;
    transition: color .3s;
  }
  .work .ttl small {
    display: block; font-weight: 400; color: var(--mute);
    font-size: 12px;
  }
  .work:hover .ttl { color: var(--accent); }
  .work .meta-bot {
    margin-top: 6px;
    font-family: var(--mono); font-size: 10px;
    color: var(--soft); letter-spacing: .1em;
  }

  /* Foot strip */
  footer.strip {
    padding: 28px;
    border-top: 1px solid var(--line);
    display: flex; justify-content: space-between; align-items: center;
    font-family: var(--mono); font-size: 10.5px;
    color: var(--mute); letter-spacing: .15em; text-transform: uppercase;
  }
  footer.strip .right { display: flex; gap: 18px; }
  footer.strip a:hover { color: var(--accent); }

  /* All links get an animated underline */
  .idx .row .c-title a,
  footer.strip a {
    position: relative;
    padding-bottom: 1px;
  }
  .idx .row .c-title a::after,
  footer.strip a::after {
    content: ""; position: absolute; left: 0; right: 100%; bottom: -2px;
    height: 1px; background: var(--accent);
    transition: right .4s cubic-bezier(.2,.8,.2,1);
  }
  .idx .row .c-title a:hover::after,
  footer.strip a:hover::after { right: 0; }

  /* ── Number ticker styling ────────────────── */
  .num-ticker {
    font-variant-numeric: tabular-nums;
    display: inline-block;
  }

  @media (max-width: 1000px) {
    .intro-foot { grid-template-columns: 1fr; gap: 16px; }
    .intro-foot .mid, .intro-foot .right { display: none; }
    .intro-ghost { font-size: 34vw; }
    .about-stats { grid-template-columns: repeat(2, 1fr); }
    .works-grid { grid-template-columns: repeat(2, 1fr); }
    .idx .row { grid-template-columns: 1fr 24px; }
    .idx .row .c-title { grid-column: 1; }
    .idx .row .c-arrow { grid-column: 2; }
    .idx .row .c-id, .idx .row .c-yr, .idx .row .c-loc, .idx .row .c-tag, .idx .row .c-note { display: none; }
    .topbar nav { display: none; }
  }

  /* ══ 分頁（列表頁／詳頁，套用首頁設計語言） ══════════════ */
  body.subpage { background: linear-gradient(180deg, #fcfcfa 0%, #f7f8f7 100%); min-height: 100vh; }
  body.subpage main { padding-top: 96px; min-height: calc(100vh - 220px); }

  /* 閱讀進度條 */
  .read-progress {
    position: fixed; top: 0; left: 0; height: 3px; width: 0;
    background: var(--ink); z-index: 60;
    transition: width .1s linear;
  }

  .subpage-blk { padding: 24px clamp(20px, 5vw, 80px) 80px; border-bottom: none; }
  .subpage-empty { color: var(--mute); font-family: var(--mono); padding: 20px 0; }

  /* 詳頁 / 閱讀版面 */
  .reader { max-width: 820px; margin: 0 auto; padding: 40px clamp(20px, 5vw, 40px) 100px; }
  .reader-head { border-bottom: 1px solid var(--line); padding-bottom: 28px; margin-bottom: 8px; }
  .reader-head .eyebrow {
    font-family: var(--mono); font-size: 11px; letter-spacing: .18em;
    text-transform: uppercase; color: #5f8a80;
  }
  .reader-head h1 {
    font-family: var(--serif); font-weight: 500;
    font-size: clamp(30px, 4.4vw, 50px); line-height: 1.2;
    letter-spacing: .01em; margin: 16px 0 0; color: var(--ink);
  }
  .reader-head .lede {
    margin: 18px 0 0; font-size: 16px; line-height: 1.8;
    color: var(--soft); font-family: var(--sans);
  }
  .reader-actions { display: flex; gap: 12px; margin-top: 24px; flex-wrap: wrap; }
  .reader-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 18px; border: 1px solid var(--ink); border-radius: 999px;
    font-family: var(--mono); font-size: 11px; letter-spacing: .12em;
    text-transform: uppercase; color: var(--ink); transition: background .3s, color .3s;
  }
  .reader-btn:hover { background: var(--ink); color: #fff; }
  .reader-btn.primary { background: var(--ink); color: #fff; }
  .reader-btn.primary:hover { background: #333; }

  /* 內文 prose */
  .content { line-height: 1.95; font-size: 16px; color: #2f2c28; padding-top: 8px; }
  .content p, .content ul, .content ol { margin: 1.2em 0; }
  .content h2, .content h3 {
    font-family: var(--serif); font-weight: 500; color: var(--ink);
    margin: 2.2em 0 .6em; line-height: 1.4;
  }
  .content h2 { font-size: 1.5em; }
  .content h3 { font-size: 1.25em; }
  .content a { color: var(--accent); text-decoration: underline; text-underline-offset: 4px; }
  .content blockquote {
    margin: 1.8em 0; padding: 4px 0 4px 20px;
    border-left: 3px solid var(--line); color: var(--mute); font-style: normal;
  }
  .content img {
    width: 100%; margin: 2.4em 0 .8em; border-radius: 10px;
    box-shadow: 0 10px 30px rgba(40,50,55,.12);
  }
  .content img + em, .content p > em:only-child {
    display: block; margin-bottom: 2.4em; font-size: .86em;
    color: #8a857e; font-style: normal;
  }

  .reader-foot {
    display: flex; justify-content: space-between; gap: 16px;
    margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--line);
    font-family: var(--mono); font-size: 12px; letter-spacing: .08em;
  }
  .reader-foot a { color: var(--mute); }
  .reader-foot a:hover { color: var(--ink); }

  @media (max-width: 760px) {
    .reader { padding: 24px 20px 80px; }
    .reader-head h1 { font-size: 28px; }
  }