/* ============================================================================
 * SHUG / SIGNAL — byshug.com
 *
 * Scene: an unmanned transmission room at night. Nobody is sitting there;
 * the signal goes out on schedule anyway.
 *
 * Source of truth: ./DESIGN.md — change that first.
 *
 * Numbers are the largest thing on the page. Lime marks state, never
 * decoration. No cards, no radii, no shadows, no gradients, no warm paper.
 * ========================================================================= */

:root {
    --paper: #f4f4f2;
    --paper-2: #e9e9e6;

    --ink: #101012;
    --ink-2: #55555c;
    --ink-3: #6b6b73;

    --line: #dedede;

    --signal: #c9f227;
    --signal-ink: #101012;

    /* ── 声の色 ──────────────────────────────────────────────
     *   白（明るい面では黒）＝ 本人
     *   ピンク            ＝ 当時のAI
     * 地の文とうさぎは線を持たない。**色を増やさない。**
     * 3本目の線を足した時点で、読者は覚えるのをやめる。 */
    --voice-user: #101012;
    --voice-ai: #e0468f;

    --gh-font-heading: Archivo, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
    --gh-font-body: Archivo, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
    --sans: var(--gh-font-heading);
    --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;

    --t-micro: 11px;
    --t-meta: 13px;
    --t-body: 17px;
    --t-lede: 20px;
    --t-item: clamp(22px, 2.4vw, 32px);
    --t-hero: clamp(34px, 5.6vw, 76px);
    --t-number: clamp(34px, 4.6vw, 64px);
    /* 404 の数字はページの主役なので、記事の番号とは別に持つ */
    --t-errorcode: clamp(60px, 12vw, 190px);

    --s1: 4px;
    --s2: 8px;
    --s3: 12px;
    --s4: 16px;
    --s6: 24px;
    --s8: 32px;
    --s12: 48px;
    --s16: 64px;
    --s24: 96px;
    --s32: 128px;
    --s48: 192px;

    --measure: 62ch;
    --page: 1240px;
    --rail: 128px;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--gh-font-body);
    font-size: var(--t-meta);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

::selection {
    background: var(--signal);
    color: var(--signal-ink);
}

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

a {
    color: inherit;
    text-decoration: none;
}

:focus-visible {
    outline: 2px solid var(--signal-ink);
    outline-offset: 3px;
    background: var(--signal);
    color: var(--signal-ink);
}

/* Titles are set large and in caps, at medium weight. Size carries them. */
h1,
h2,
h3 {
    font-family: var(--gh-font-heading);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    line-height: 1.02;
    margin: 0;
}

/* Machine-side text: counts, times, states. */
.meta {
    font-family: var(--mono);
    font-size: var(--t-micro);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-3);
}

.wrap {
    max-width: var(--page);
    margin: 0 auto;
    padding: 0 var(--s8);
}

/* ── Head ───────────────────────────────────────────────────────────────── */

.head-inner {
    display: flex;
    align-items: center;
    gap: var(--s6);
    padding: var(--s6) 0 var(--s16);
}

/* 上は三つ組の印だけ。名前（SHUG）は下に置く。
   下と同じ partial を使う。**画像を2枚持たない。** currentColor で描くので
   明暗の切り替えも拡大も、こちらで何もしなくていい。 */
.brand {
    display: inline-flex;
    align-items: center;
    line-height: 0;
}

/* 上の印は文字と同じインク。下の印は控えめ（--ink-3）のまま差を付ける */
.brand .marks {
    color: var(--ink);
}

.brand .marks svg {
    height: 30px;
}

.head-nav {
    margin-left: auto;
}

.head-nav ul {
    display: flex;
    align-items: center;
    gap: var(--s6);
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: var(--t-meta);
    font-weight: 500;
}

.head-nav a {
    color: var(--ink-2);
    padding-bottom: 2px;
    border-bottom: 2px solid transparent;
}

.head-nav a:hover,
.head-nav .nav-current a {
    color: var(--ink);
    border-bottom-color: var(--signal);
}

.clock {
    font-family: var(--mono);
    font-size: var(--t-micro);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.1em;
    color: var(--ink-3);
}

/* The one filled element on the page. */
.cta {
    display: inline-block;
    padding: var(--s2) var(--s4);
    background: var(--signal);
    color: var(--signal-ink);
    font-size: var(--t-meta);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.cta:hover {
    background: var(--ink);
    color: var(--paper);
}

/* ── Hero ───────────────────────────────────────────────────────────────── */

.hero {
    padding-bottom: var(--s24);
}

.hero-series {
    font-size: var(--t-hero);
    max-width: 18ch;
    letter-spacing: -0.02em;
}

.hero-tagline {
    font-family: var(--gh-font-heading);
    font-size: var(--t-lede);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--ink-2);
    margin: var(--s8) 0 0;
}

/* The latest transmission is stepped one column right of everything else.
   The asymmetry is the point; it must not cost readability. */
.latest {
    display: block;
    margin-top: var(--s32);
    padding-left: var(--rail);
}

.latest-label {
    display: inline-block;
    background: var(--signal);
    color: var(--signal-ink);
    padding: 2px var(--s2);
    font-family: var(--mono);
    font-size: var(--t-micro);
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

/* The title stays the largest thing. The number sits just under it.
   It used to be 60-190px and drowned the title; 24-48px was too timid.
   Keep it below --t-hero so the title still wins. */
.number {
    display: block;
    font-family: var(--gh-font-heading);
    font-size: var(--t-number);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.04em;
    line-height: 0.8;
    margin: var(--s6) 0 var(--s6);
}

.latest-title {
    font-size: clamp(28px, 4vw, 54px);
    max-width: 22ch;
}

.latest-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--s6);
    margin-top: var(--s8);
}

.read {
    font-size: var(--t-meta);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-bottom: 2px solid var(--signal);
    padding-bottom: 2px;
}

.latest:hover .read {
    background: var(--signal);
    color: var(--signal-ink);
}

.free {
    font-family: var(--mono);
    font-size: var(--t-micro);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    background: var(--signal);
    color: var(--signal-ink);
    padding: 1px var(--s2);
}

.gate-note {
    max-width: 46ch;
    margin: var(--s3) 0 0;
    color: var(--ink-2);
}

/* ── Share ─────────────────────────────────────────────────────────────────
 * 読み終えた直後に置く一行。**アイコンを使わない。**
 * この面の語彙は等幅の小さな大文字で、丸いアイコンを混ぜるとここだけ
 * 別のサイトになる。ボタンも見た目はリンクに揃える（押せるものが2種類
 * あるように見せない）。 */
.share {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--s6);
    /* **本文の最後の一行から、大きく離す。**
     * 読み終えた息を、次の操作で潰さない。ここが詰まっていると、
     * 最後の一行が「共有してください」の前置きに読める。 */
    margin-top: var(--s48);
    padding-top: var(--s6);
    border-top: 1px solid var(--line);
}

.share-link {
    font-family: var(--mono);
    font-size: var(--t-micro);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-2);
    text-decoration: none;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
}

.share-link:hover {
    color: var(--ink);
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* 押したことが分かる。**別の場所に何かを出さない。**
 * その語がそのまま返事になる。 */
.share-link[data-copied] {
    color: var(--signal-ink);
    background: var(--signal);
    padding: 1px var(--s2);
    text-decoration: none;
}

/* ── Archive ────────────────────────────────────────────────────────────── */

.archive-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s4);
    padding-bottom: var(--s6);
}

.entry {
    display: grid;
    grid-template-columns: var(--rail) 1fr auto;
    align-items: start;
    gap: var(--s6);
    padding: var(--s8) 0;
    border-top: 1px solid var(--line);
}

.entry:hover {
    border-top-color: var(--ink);
}

.entry-no {
    font-family: var(--gh-font-heading);
    font-size: 26px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    line-height: 1;
    color: var(--ink-3);
}

.entry:hover .entry-no {
    color: var(--ink);
}

.entry-title {
    font-size: var(--t-item);
    max-width: 34ch;
}

.entry:hover .entry-title {
    text-decoration: underline;
    text-decoration-thickness: 3px;
    text-decoration-color: var(--signal);
    text-underline-offset: 0.12em;
}

.entry-side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--s2);
    padding-top: var(--s1);
}

.pagination {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s6);
    padding: var(--s12) 0 var(--s24);
    font-family: var(--mono);
    font-size: var(--t-micro);
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.pagination a:hover {
    border-bottom: 2px solid var(--signal);
}

/* ── Transmission ───────────────────────────────────────────────────────── */

.article {
    padding-bottom: var(--s16);
}

.article-head {
    padding-left: var(--rail);
}

.article-title {
    font-size: var(--t-hero);
    max-width: 22ch;
    margin-bottom: var(--s8);
}

.article-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s6);
}

.figure {
    margin: var(--s16) 0 0;
    padding-left: var(--rail);
}

.figure figcaption,
.prose figcaption {
    font-family: var(--mono);
    font-size: var(--t-micro);
    letter-spacing: 0.06em;
    color: var(--ink-3);
    padding-top: var(--s2);
}

.prose {
    max-width: var(--measure);
    margin: var(--s16) 0 0 var(--rail);
    font-family: var(--gh-font-body);
    font-size: var(--t-body);
    line-height: 1.65;
}

.prose > * {
    margin: 0 0 1.3em;
}

.prose > *:last-child {
    margin-bottom: 0;
}

.prose h2,
.prose h3 {
    font-size: 22px;
    margin: 2.2em 0 0.7em;
}

.prose h3 {
    font-size: 18px;
    color: var(--ink-2);
}

.prose a {
    border-bottom: 2px solid var(--signal);
}

.prose a:hover {
    background: var(--signal);
    color: var(--signal-ink);
}

/* 声を線の色で分ける。**推測しない。**
 *
 *   本人      箱＋白い線＋太字
 *   当時のAI  箱＋ピンクの線
 *
 * 見分けは `<strong>` があるかどうか。**`<strong>` は本人の声にしか出ない**
 * ことを layers.mjs が保証している（当時のAIの中の強調は `<em>`）。
 * 約束があるので `:has(strong)` は推測ではなく事実になる。
 *
 * 一度これを `:only-child` でやって壊した。`:only-child` は文字ノードを数えないので、
 * 「Yeah, <strong>強調</strong>」のような当時のAIの発言まで本人扱いになった。
 * **見た目の出し分けを、中身の形の推測に頼らないこと。** */
.prose blockquote {
    margin: 1.8em 0;
    padding: var(--s4) var(--s6);
    border-left: 2px solid var(--voice-ai);
    background: var(--paper-2);
}

.prose blockquote:has(strong) {
    border-left-color: var(--voice-user);
}

.prose blockquote > *:last-child {
    margin-bottom: 0;
}

/* 地の文の途中の強調。箱の外なので声にはならない。 */
.prose p > strong {
    font-weight: 700;
}

/* うさぎ。**線も箱も持たない。斜体だけ。**
 * ここに線を足すと声が3種類になり、白とピンクの対比が効かなくなる。 */
.prose p > em:only-child {
    display: block;
    font-style: italic;
    color: var(--ink-2);
    margin: 1.8em 0;
}


.prose hr {
    height: 0;
    margin: 2.6em 0;
    border: 0;
    border-top: 1px solid var(--line);
}

.prose figure {
    margin: 2em 0;
}

.prose pre {
    overflow-x: auto;
    padding: var(--s4);
    background: var(--paper-2);
    font-family: var(--mono);
    font-size: 14px;
    line-height: 1.6;
}

.prose code {
    font-family: var(--mono);
    font-size: 0.92em;
}

.prose .kg-width-wide {
    position: relative;
    width: 100vw;
    max-width: 52rem;
    margin-left: 50%;
    transform: translateX(-50%);
}

.prose .kg-width-full {
    position: relative;
    width: 100vw;
    max-width: 100vw;
    margin-left: 50%;
    transform: translateX(-50%);
}

.prose .kg-width-full img {
    width: 100%;
}

/* ── Original ───────────────────────────────────────────────────────────── */
/* 日本語の原文。翻訳ではなく元の文章なので、英語本文と同じ組版に押し込めない。
   Archivo に かな漢字が無いこともあり、この節だけ和文の設定へ切り替える。
   Ghost の HTML→lexical 変換で class が落ちないよう、publisher 側は
   <!--kg-card-begin: html--> の HTML card で囲って出す。 */

.prose .original {
    margin-top: var(--s16);
    padding-top: var(--s6);
    border-top: 1px solid var(--line);
}

.prose .original > h2 {
    font-family: var(--mono);
    font-size: var(--t-micro);
    font-weight: 400;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin: 0 0 var(--s8);
}

.prose .original > p {
    /* 和文は 1 文字 1em。40 字前後で折り返す */
    max-width: 40em;
    margin: 0 0 1.4em;
    font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic Medium", "Yu Gothic", "Noto Sans JP", sans-serif;
    font-size: 16px;
    line-height: 1.95;
    font-feature-settings: "palt" 1;
}

.prose .original > p:last-child {
    margin-bottom: 0;
}

.prose .original blockquote {
    max-width: 40em;
    font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic Medium", "Yu Gothic", "Noto Sans JP", sans-serif;
    line-height: 1.95;
}

/* ── The line ───────────────────────────────────────────────────────────── */

.gate {
    max-width: var(--measure);
    margin: var(--s16) 0 0 var(--rail);
    padding-top: var(--s6);
    border-top: 2px solid var(--signal);
}

.gate-title {
    font-size: var(--t-lede);
    margin-bottom: var(--s3);
}

.gate-tiers {
    font-family: var(--mono);
    font-size: var(--t-micro);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin: 0 0 var(--s6);
}

.gate-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s6);
    font-size: var(--t-meta);
}

.gate-signin {
    color: var(--ink-2);
    border-bottom: 1px solid var(--line);
}

.gate-signin:hover {
    color: var(--ink);
    border-bottom-color: var(--ink);
}

/* ── Adjacent ───────────────────────────────────────────────────────────── */

/* **返信は、次への導線の下。** 本文からは大きく離す。
 * Ghost の枠は iframe なので中身の色は触れない。周りの余白と罫線だけを合わせる。 */
.comments {
    margin-top: var(--s48);
    padding-top: var(--s6);
    padding-left: var(--rail);
    border-top: 1px solid var(--line);
}

.comments .meta {
    display: block;
    margin-bottom: var(--s6);
}

.adjacent {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s8);
    margin-top: var(--s24);
    padding-left: var(--rail);
}

.adjacent-next {
    text-align: right;
}

.adjacent .meta {
    display: block;
    margin-bottom: var(--s3);
}

.adjacent-link {
    font-family: var(--gh-font-heading);
    font-size: 18px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    line-height: 1.15;
}

.adjacent-link:hover {
    border-bottom: 3px solid var(--signal);
}

/* ── Page / error ───────────────────────────────────────────────────────── */

.page-title {
    font-size: var(--t-hero);
    max-width: 20ch;
    padding-left: var(--rail);
}

.error {
    padding: var(--s24) 0;
    padding-left: var(--rail);
}

.error-code {
    font-family: var(--gh-font-heading);
    font-size: var(--t-errorcode);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    line-height: 0.8;
    letter-spacing: -0.04em;
    margin: 0 0 var(--s8);
}

.error-message {
    font-size: var(--t-lede);
    max-width: 22ch;
    margin: 0 0 var(--s8);
    color: var(--ink-2);
}

/* ── Foot ───────────────────────────────────────────────────────────────── */

.foot {
    margin-top: var(--s24);
}

.foot-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s6);
    padding: var(--s8) 0 var(--s24);
}

/* 図案はひと続きの1枚（うさぎ／挫折の線／AI）。
   高さで揃えて、幅は比率まかせにする。currentColor なので色は文字に従う。 */
.marks {
    display: inline-flex;
    align-items: center;
    color: var(--ink-3);
    line-height: 0;
}

.marks svg {
    height: 22px;
    width: auto;
    display: block;
}

.foot-brand {
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.foot-nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s6);
    margin-left: auto;
    font-family: var(--mono);
    font-size: var(--t-micro);
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.foot-nav ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s6);
    list-style: none;
    margin: 0;
    padding: 0;
}

.foot a {
    color: var(--ink-3);
}

.foot a:hover {
    color: var(--ink);
    border-bottom: 2px solid var(--signal);
}

/* ── Widths ─────────────────────────────────────────────────────────────── */

@media (max-width: 1000px) {
    :root {
        --rail: 72px;
    }
}

@media (max-width: 720px) {
    :root {
        --rail: 0px;
    }

    .wrap {
        padding: 0 var(--s4);
    }

    .head-inner {
        flex-wrap: wrap;
        gap: var(--s3);
        padding-bottom: var(--s12);
    }

    .brand {
        flex: 1 0 100%;
    }

    .head-nav {
        margin-left: 0;
    }

    .clock {
        display: none;
    }

    .latest {
        margin-top: var(--s16);
    }

    /* 番号は rail から本文の上へ移す。狭い幅で列に割ると読み順が壊れる */
    .entry {
        grid-template-columns: 1fr auto;
        gap: var(--s2) var(--s4);
        padding: var(--s6) 0;
    }

    .entry-no {
        font-size: 22px;
    }

    /* 自動配置に任せると日付が題の下に落ちる。番号と日付を1行目に固定する */
    .entry-no {
        grid-column: 1;
        grid-row: 1;
    }

    .entry-side {
        grid-column: 2;
        grid-row: 1;
        align-items: flex-end;
    }

    .entry-title {
        grid-column: 1 / -1;
        grid-row: 2;
        max-width: none;
    }

    .adjacent {
        grid-template-columns: 1fr;
        gap: var(--s6);
    }

    .adjacent-next {
        text-align: left;
    }
}

/* ── Night ──────────────────────────────────────────────────────────────── */

@media (prefers-color-scheme: dark) {
    :root {
        --paper: #0b0b0c;
        --paper-2: #151517;
        --ink: #f2f2f0;
        --ink-2: #9c9ca6;
        --ink-3: #83838d;
        --line: #232326;
        --signal: #d4ff2e;
        --voice-user: #ffffff;
        --voice-ai: #ff5fa2;
    }
}

@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
        animation: none !important;
    }
}

/* ── Roman numerals past 3999 ────────────────────────────────────────────
 *
 * 4000 以上は上線で千倍を表す。線は文字ではなく CSS で引く。合成用の
 * 上線文字を使うと字ごとに線が分断され、ブラウザと OS でずれる。それを
 * 永続データへ焼き込むと後から直せない。
 *
 * class 名は scripts/life/departments/page-number.mjs の OVERLINE_CLASS と
 * 結ばれている。tests/life-page-number.test.mjs が片方だけの改名を止める。
 */
.roman-overline {
    text-decoration: overline;
    /* 既定の上線は字に近すぎて詰まって見える。少し離して細くする。 */
    text-decoration-thickness: 0.06em;
    text-underline-offset: 0;
}

/* 上線部と通常部は連続した一つの数として読ませる。字間を空けない。 */
.roman-overline + span {
    margin-left: 0;
}