/* =========================================================
   MACHIKADO ROOMS — マチカドルームス
   不動産サテライト型オウンドメディア / Design system
   「街角（角）」と「お部屋（四角）」をモチーフにした遊び心のあるエディトリアル
   （Claude Design 出力を no-build 構成へ移植）
   ========================================================= */

*{box-sizing:border-box}
body{margin:0}

/* ============================================================
   TOKENS  ── ライト/ダーク両対応・CSS変数でトークン化
   ============================================================ */
.mr{
  --paper:      oklch(0.945 0.010 85);
  --surface:    oklch(0.978 0.008 85);
  --surface-2:  oklch(0.915 0.013 80);
  --line:       oklch(0.862 0.016 75);
  --muted:      oklch(0.505 0.013 70);
  --ink:        oklch(0.255 0.014 70);
  --brick:      oklch(0.545 0.115 42);
  --brick-soft: oklch(0.545 0.115 42 / 0.12);
  --olive:      oklch(0.560 0.085 122);
  --olive-soft: oklch(0.560 0.085 122 / 0.14);

  --maxw: 1180px;
  --readw: 720px;
  --font-mincho: "Shippori Mincho", "Hiragino Mincho ProN", serif;
  --font-gothic: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", sans-serif;
  --font-mono:   "DM Mono", ui-monospace, monospace;

  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-gothic);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background .3s ease, color .3s ease;
}
.mr[data-theme="dark"]{
  --paper:      oklch(0.232 0.012 70);
  --surface:    oklch(0.278 0.013 70);
  --surface-2:  oklch(0.200 0.012 70);
  --line:       oklch(0.358 0.015 72);
  --muted:      oklch(0.668 0.013 78);
  --ink:        oklch(0.928 0.010 88);
  --brick:      oklch(0.645 0.120 44);
  --brick-soft: oklch(0.645 0.120 44 / 0.18);
  --olive:      oklch(0.665 0.090 122);
  --olive-soft: oklch(0.665 0.090 122 / 0.18);
}

/* ============================================================
   UTILITIES
   ============================================================ */
.wrap{ width: min(100% - 48px, var(--maxw)); margin-inline: auto; }
.mono{ font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
a{ color: inherit; }
.frame{ position: relative; }

/* 街角モチーフ：コーナーマーク（L字ブラケット） */
.cm{ position:absolute; width:15px; height:15px; border:2px solid var(--brick); pointer-events:none; z-index:2; }
.cm--tl{ top:-1px; left:-1px;  border-right:0; border-bottom:0; }
.cm--tr{ top:-1px; right:-1px; border-left:0;  border-bottom:0; }
.cm--bl{ bottom:-1px; left:-1px;  border-right:0; border-top:0; }
.cm--br{ bottom:-1px; right:-1px; border-left:0;  border-top:0; }
.frame--olive .cm{ border-color: var(--olive); }

/* 斜線プレースホルダー */
.ph{
  position: relative;
  background-color: var(--surface-2);
  background-image: repeating-linear-gradient(135deg,
    transparent 0 13px,
    color-mix(in oklch, var(--ink) 7%, transparent) 13px 14px);
  overflow: hidden;
}
.ph__label{
  position:absolute; left:12px; bottom:11px;
  font-family: var(--font-mono); font-size:10px; letter-spacing:.1em;
  color: var(--muted); background: var(--surface);
  padding:4px 8px; border:1px solid var(--line);
}

/* 実画像メディア（eyecatch）— .ph の代わりに使う */
.has-img{ position:relative; overflow:hidden; background: var(--surface-2); }
.has-img > .media-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

.tag{ display:inline-flex; align-items:center; padding:4px 10px; font-size:11px; font-weight:700; letter-spacing:.06em; line-height:1; }
.tag--brick{ background: var(--brick-soft); color: var(--brick); }
.tag--olive{ background: var(--olive-soft); color: var(--olive); }

.readlink{
  display:inline-flex; align-items:center; gap:10px;
  color: var(--brick); font-weight:700; font-size:14px; text-decoration:none;
  width: fit-content; cursor:pointer; background:none; border:0; padding:0;
}
.readlink span{ transition: transform .25s ease; }
.readlink:hover span{ transform: translateX(5px); }

/* セクション見出し（角を強調した罫線） */
.section{ padding-block: 60px; }
.sec-head{ display:flex; align-items:baseline; gap:16px; margin-bottom:30px; padding-bottom:14px; border-bottom:1px solid var(--line); position:relative; }
.sec-head::after{ content:""; position:absolute; left:0; bottom:-1px; width:52px; height:3px; background: var(--brick); }
.sec-idx{ font-family: var(--font-mono); font-size:12px; width:32px; height:32px; display:grid; place-items:center; border:1.5px solid var(--ink); color: var(--ink); flex:none; }
.sec-title{ font-family: var(--font-mincho); font-weight:600; font-size:23px; margin:0; letter-spacing:.02em; }
.sec-title .en{ font-family: var(--font-mono); font-size:11px; letter-spacing:.16em; color: var(--muted); margin-left:12px; }
.sec-more{ margin-left:auto; font-family: var(--font-mono); font-size:11px; letter-spacing:.1em; color: var(--muted); text-decoration:none; align-self:center; cursor:pointer; }
.sec-more:hover{ color: var(--brick); }

/* ============================================================
   HEADER
   ============================================================ */
.site-header{ position: sticky; top:0; z-index:50; background: color-mix(in oklch, var(--paper) 86%, transparent); backdrop-filter: blur(10px); border-bottom:1px solid var(--line); }
.site-header__inner{ display:flex; align-items:center; gap:28px; height:68px; }
.brand{ display:flex; align-items:center; gap:12px; text-decoration:none; cursor:pointer; }
.brand-mark{ display:grid; grid-template:repeat(2,1fr)/repeat(2,1fr); gap:2px; width:24px; height:24px; flex:none; }
.brand-mark i{ display:block; background: var(--ink); }
.brand-mark i:nth-child(2){ background: transparent; }
.brand-mark i:nth-child(4){ background: var(--brick); }
.brand-name{ font-family: var(--font-mono); font-weight:500; font-size:15px; letter-spacing:.1em; line-height:1.1; display:block; }
.brand-sub{ font-size:10px; letter-spacing:.32em; color: var(--muted); display:block; margin-top:2px; }
.site-nav{ display:flex; gap:22px; margin-left:8px; }
.site-nav a{ text-decoration:none; font-size:14px; font-weight:500; padding:6px 0; position:relative; cursor:pointer; }
.site-nav a::after{ content:""; position:absolute; left:0; bottom:0; width:0; height:2px; background: var(--brick); transition: width .2s ease; }
.site-nav a:hover{ color: var(--brick); }
.site-nav a:hover::after{ width:100%; }
.site-header__tools{ margin-left:auto; display:flex; align-items:center; gap:12px; }
.search-pill{ display:flex; align-items:center; gap:8px; border:1px solid var(--line); background: var(--surface); padding:7px 12px; cursor:pointer; color: var(--muted); font-family: var(--font-mono); font-size:11px; letter-spacing:.08em; }
.search-pill .sq{ width:8px; height:8px; border:1.5px solid var(--muted); }
.theme-toggle{ display:flex; align-items:center; gap:8px; border:1px solid var(--ink); background: transparent; color: var(--ink); padding:7px 11px; cursor:pointer; }
.theme-toggle .sq{ width:13px; height:13px; border:1.5px solid var(--ink); background: linear-gradient(135deg, var(--ink) 50%, transparent 50%); }
.theme-toggle .mono{ color: var(--ink); }

/* ============================================================
   HERO
   ============================================================ */
.hero{ display:grid; grid-template-columns: 1.18fr .82fr; gap:48px; align-items:center; padding-block:56px 72px; }
.hero__media{ aspect-ratio: 4/3; display:block; text-decoration:none; }
.hero__serial{ position:absolute; top:14px; left:14px; z-index:3; display:flex; align-items:center; gap:0; }
.hero__serial .n{ font-family: var(--font-mono); font-size:11px; letter-spacing:.1em; background: var(--ink); color: var(--paper); padding:4px 9px; }
.eyebrow{ display:flex; align-items:center; gap:14px; margin-bottom:22px; }
.hero__title{ font-family: var(--font-mincho); font-weight:700; font-size: clamp(32px, 4vw, 50px); line-height:1.28; letter-spacing:.02em; margin:0 0 22px; cursor:pointer; }
.hero__title em{ font-style:normal; color: var(--brick); }
.hero__lead{ font-size:15px; line-height:2.05; color: var(--muted); margin:0 0 28px; max-width:38ch; }

/* ============================================================
   CATEGORY NAV  ── 売る/買う/リフォーム/投資
   ============================================================ */
.cat-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap:14px; }
.cat-card{ position:relative; display:flex; flex-direction:column; min-height:240px; padding:24px 22px; border:1px solid var(--line); background: var(--surface); text-decoration:none; transition: transform .2s ease, border-color .2s ease; cursor:pointer; }
.cat-card:hover{ transform: translateY(-3px); border-color: var(--brick); }
.cat-card.frame--olive:hover{ border-color: var(--olive); }
.cat-card__num{ font-family: var(--font-mono); font-size:12px; color: var(--muted); }
.cat-card__en{ font-family: var(--font-mono); font-size:10px; letter-spacing:.18em; color: var(--muted); margin-top:4px; }
.cat-card__jp{ font-family: var(--font-mincho); font-weight:700; font-size:30px; margin:14px 0 10px; letter-spacing:.04em; }
.cat-card__desc{ font-size:12.5px; line-height:1.85; color: var(--muted); margin:0; }
.cat-card__arrow{ margin-top:auto; padding-top:14px; color: var(--brick); font-size:18px; }
.cat-card.frame--olive .cat-card__arrow{ color: var(--olive); }

/* ============================================================
   ARTICLE GRID
   ============================================================ */
.article-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:30px 26px; }
.article-card{ display:flex; flex-direction:column; text-decoration:none; cursor:pointer; }
.article-card__media{ aspect-ratio: 3/2; margin-bottom:16px; }
.article-card__media .cm{ width:13px; height:13px; }
.article-card__cat{ margin-bottom:12px; }
.article-card__title{ font-family: var(--font-mincho); font-weight:600; font-size:19px; line-height:1.55; margin:0 0 12px; letter-spacing:.01em; transition: color .2s ease; }
.article-card:hover .article-card__title{ color: var(--brick); }
.article-card__meta{ margin-top:auto; font-family: var(--font-mono); font-size:11px; letter-spacing:.08em; color: var(--muted); }

/* ============================================================
   FEATURE STRIP  ── 連載：街角採集（オリーブ差し色）
   ============================================================ */
.feature__inner{ display:grid; grid-template-columns: .9fr 1.1fr; gap:0; border:1px solid var(--line); background: var(--olive-soft); }
.feature__media{ aspect-ratio: 16/11; }
.feature__body{ padding:44px 48px; display:flex; flex-direction:column; justify-content:center; }
.feature__kicker{ font-family: var(--font-mono); font-size:11px; letter-spacing:.16em; color: var(--olive); margin-bottom:16px; }
.feature__title{ font-family: var(--font-mincho); font-weight:700; font-size:38px; letter-spacing:.06em; margin:0 0 16px; }
.feature__text{ font-size:14px; line-height:2; color: var(--muted); margin:0 0 26px; max-width:34ch; }
.feature .readlink{ color: var(--olive); }

/* ============================================================
   COLUMN LIST  ── 街角コラム
   ============================================================ */
.column-list{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }
.column-item{ display:flex; align-items:center; gap:24px; padding:22px 4px; border-bottom:1px solid var(--line); text-decoration:none; transition: padding-left .2s ease; cursor:pointer; }
.column-item:hover{ padding-left:14px; }
.column-item__n{ font-family: var(--font-mono); font-size:13px; width:38px; height:38px; flex:none; display:grid; place-items:center; border:1.5px solid var(--line); color: var(--muted); }
.column-item:hover .column-item__n{ border-color: var(--brick); color: var(--brick); }
.column-item__title{ font-family: var(--font-mincho); font-weight:600; font-size:19px; margin:0; letter-spacing:.02em; }
.column-item__date{ font-family: var(--font-mono); font-size:11px; color: var(--muted); margin-left:auto; }
.column-item__arrow{ color: var(--brick); font-size:16px; }

/* ============================================================
   CTA
   ============================================================ */
.cta{ display:flex; align-items:center; justify-content:space-between; gap:40px; flex-wrap:wrap; padding:46px 48px; border:1px solid var(--line); background: var(--brick-soft); }
.cta__title{ font-family: var(--font-mincho); font-weight:700; font-size:30px; margin:0 0 10px; letter-spacing:.04em; }
.cta__text{ font-size:13.5px; line-height:1.9; color: var(--muted); margin:0; }
.cta__form{ display:flex; gap:10px; }
.cta__form input{ font-family: var(--font-gothic); font-size:14px; padding:13px 16px; border:1px solid var(--line); background: var(--surface); color: var(--ink); width:240px; }
.cta__form input::placeholder{ color: var(--muted); }
.cta__form button{ font-family: var(--font-gothic); font-weight:700; font-size:14px; padding:13px 24px; border:none; background: var(--brick); color: var(--paper); cursor:pointer; }
.cta__form button:hover{ filter: brightness(1.08); }

/* ============================================================
   BREADCRUMB（カテゴリ／記事ページ）
   ============================================================ */
.breadcrumb{ display:flex; align-items:center; gap:10px; padding-top:26px; font-family: var(--font-mono); font-size:11px; letter-spacing:.08em; color: var(--muted); flex-wrap:wrap; }
.breadcrumb a{ text-decoration:none; cursor:pointer; }
.breadcrumb a:hover{ color: var(--brick); }
.breadcrumb .sep{ color: var(--line); }

/* ============================================================
   CATEGORY HERO
   ============================================================ */
.cat-hero{ display:grid; grid-template-columns: 1fr auto; align-items:end; gap:40px; padding:34px 0 40px; border-bottom:1px solid var(--line); position:relative; }
.cat-hero::after{ content:""; position:absolute; left:0; bottom:-1px; width:64px; height:3px; background: var(--brick); }
.cat-hero__eyebrow{ display:flex; align-items:center; gap:12px; margin-bottom:18px; }
.cat-hero__en{ font-family: var(--font-mono); font-size:13px; letter-spacing:.22em; color: var(--brick); }
.cat-hero__title{ font-family: var(--font-mincho); font-weight:800; font-size: clamp(46px, 7vw, 88px); line-height:1; letter-spacing:.04em; margin:0 0 22px; }
.cat-hero__lead{ font-size:15px; line-height:2; color: var(--muted); margin:0; max-width:46ch; }
.cat-hero__count{ padding:18px 22px; border:1px solid var(--line); background: var(--surface); text-align:center; }
.cat-hero__count .n{ font-family: var(--font-mincho); font-weight:700; font-size:46px; line-height:1; display:block; }
.cat-hero__count .l{ font-family: var(--font-mono); font-size:10px; letter-spacing:.16em; color: var(--muted); display:block; margin-top:8px; }

/* ============================================================
   FILTER BAR  ── 四角いチップ／街角モチーフ
   ============================================================ */
.filterbar{ padding-block:30px; border-bottom:1px solid var(--line); }
.filter-row{ display:flex; align-items:center; gap:14px; }
.filter-row + .filter-row{ margin-top:16px; }
.filter-row__label{ font-family: var(--font-mono); font-size:10px; letter-spacing:.14em; color: var(--muted); width:64px; flex:none; }
.filter-row__sub{ position:relative; padding-left:64px; }
.filter-row__sub::before{ content:""; position:absolute; left:30px; top:50%; width:8px; height:8px; border-left:1.5px solid var(--line); border-bottom:1.5px solid var(--line); transform:translateY(-60%); }
.chips{ display:flex; flex-wrap:wrap; gap:10px; }
.chip{ position:relative; font-family: var(--font-gothic); font-weight:700; font-size:13px; letter-spacing:.02em; padding:9px 16px; border:1px solid var(--line); background: var(--surface); color: var(--ink); cursor:pointer; transition: border-color .18s ease, color .18s ease, background .18s ease; }
.chip .c{ font-family: var(--font-mono); font-weight:400; font-size:10px; color: var(--muted); margin-left:7px; }
.chip:hover{ border-color: var(--brick); color: var(--brick); }
.chip:hover .c{ color: var(--brick); }
.chip.is-active{ background: var(--brick); border-color: var(--brick); color: var(--paper); }
.chip.is-active .c{ color: color-mix(in oklch, var(--paper) 78%, transparent); }
.chip.is-active::before{ content:""; position:absolute; top:-1px; left:-1px; width:9px; height:9px; border-top:2px solid var(--paper); border-left:2px solid var(--paper); }
.chip--sub{ font-size:12px; padding:7px 13px; }

/* ============================================================
   RESULT HEAD
   ============================================================ */
.result-head{ display:flex; align-items:baseline; gap:14px; padding-top:34px; margin-bottom:26px; }
.result-head__title{ font-family: var(--font-mincho); font-weight:600; font-size:20px; margin:0; }
.result-head__count{ font-family: var(--font-mono); font-size:11px; letter-spacing:.1em; color: var(--muted); }
.result-head__sort{ margin-left:auto; font-family: var(--font-mono); font-size:11px; letter-spacing:.08em; color: var(--muted); display:flex; align-items:center; gap:8px; }
.result-head__sort .sq{ width:7px; height:7px; border:1.5px solid var(--muted); }

/* article-card 拡張（カテゴリページ：抄録＋サブ表示） */
.article-card__cat{ display:flex; gap:8px; align-items:center; }
.article-card__sub{ font-family: var(--font-mono); font-size:10px; letter-spacing:.1em; color: var(--muted); }
.article-card__excerpt{ font-size:12.5px; line-height:1.85; color: var(--muted); margin:0 0 14px; }

/* ============================================================
   EMPTY STATE  ── 0件
   ============================================================ */
.empty{ position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; padding:80px 24px; border:1px dashed var(--line); margin-bottom:20px; }
.empty__mark{ display:grid; grid-template:repeat(2,1fr)/repeat(2,1fr); gap:4px; width:52px; height:52px; margin-bottom:24px; }
.empty__mark i{ background: var(--surface-2); }
.empty__mark i:nth-child(1){ background: var(--brick-soft); }
.empty__title{ font-family: var(--font-mincho); font-weight:600; font-size:22px; margin:0 0 12px; }
.empty__text{ font-size:13.5px; line-height:1.9; color: var(--muted); margin:0 0 24px; max-width:34ch; }
.empty__reset{ font-family: var(--font-gothic); font-weight:700; font-size:13px; padding:11px 22px; border:1px solid var(--ink); background:transparent; color: var(--ink); cursor:pointer; }
.empty__reset:hover{ border-color: var(--brick); color: var(--brick); }

/* ============================================================
   PAGER
   ============================================================ */
.pager{ display:flex; justify-content:center; gap:8px; padding:34px 0 60px; }
.pager a{ font-family: var(--font-mono); font-size:13px; min-width:40px; height:40px; display:grid; place-items:center; border:1px solid var(--line); text-decoration:none; color: var(--ink); padding:0 6px; cursor:pointer; }
.pager a:hover{ border-color: var(--brick); color: var(--brick); }
.pager a.is-active{ background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* ============================================================
   ARTICLE — reading progress
   ============================================================ */
.progress{ position: fixed; top:0; left:0; right:0; height:3px; z-index:60; background: transparent; }
.progress__fill{ height:100%; width:0%; background: var(--brick); transition: width .08s linear; }

/* ARTICLE HEADER */
.article{ max-width: var(--readw); margin-inline:auto; }
.article-head{ padding:30px 0 8px; }
.article-head__tags{ display:flex; gap:8px; align-items:center; margin-bottom:22px; }
.article-head__cat-en{ font-family: var(--font-mono); font-size:10px; letter-spacing:.16em; color: var(--muted); }
.article-head__title{ font-family: var(--font-mincho); font-weight:800; font-size: clamp(30px, 4.4vw, 46px); line-height:1.4; letter-spacing:.02em; margin:0 0 24px; }
.article-head__lead{ font-size:16px; line-height:2.1; color: var(--muted); margin:0 0 30px; }

/* BYLINE */
.byline{ display:flex; align-items:center; gap:14px; padding:18px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.byline__avatar{ width:46px; height:46px; flex:none; display:grid; place-items:center; background: var(--brick); color: var(--paper); font-family: var(--font-mincho); font-weight:700; font-size:18px; position:relative; }
.byline__avatar::before{ content:""; position:absolute; top:-1px; left:-1px; width:9px; height:9px; border-top:2px solid var(--paper); border-left:2px solid var(--paper); }
.byline__meta{ display:flex; flex-direction:column; gap:3px; }
.byline__name{ font-weight:700; font-size:14px; }
.byline__name .role{ font-weight:400; font-size:12px; color: var(--muted); margin-left:10px; }
.byline__sub{ font-family: var(--font-mono); font-size:11px; letter-spacing:.06em; color: var(--muted); }
.byline__share{ margin-left:auto; display:flex; gap:8px; }
.byline__share button{ width:34px; height:34px; border:1px solid var(--line); background:transparent; color: var(--muted); cursor:pointer; display:grid; place-items:center; }
.byline__share button:hover{ border-color: var(--brick); color: var(--brick); }
.byline__share .sq{ width:11px; height:11px; border:1.5px solid currentColor; }

/* HERO FIGURE */
.article-figure{ margin:42px 0; }
.article-figure__media{ display:block; aspect-ratio: 16/9; }
.article-figure figcaption{ margin-top:12px; font-family: var(--font-mono); font-size:11px; letter-spacing:.04em; color: var(--muted); display:flex; gap:10px; align-items:baseline; }
.article-figure figcaption .sq{ width:7px; height:7px; border:1.5px solid var(--brick); flex:none; transform:translateY(1px); }

/* PROSE  ── 1カラム＋縦組みラベル */
.prose-layout{ position: relative; max-width: var(--readw); margin-inline:auto; }
.prose-rail{ position:absolute; left:-92px; top:6px; bottom:0; width:60px; display:flex; flex-direction:column; align-items:center; gap:14px; }
.prose-rail__label{ writing-mode: vertical-rl; font-family: var(--font-mincho); font-weight:600; font-size:13px; letter-spacing:.3em; color: var(--muted); }
.prose-rail__line{ width:1px; flex:1; background: var(--line); }
.prose-rail__sq{ width:8px; height:8px; border:1.5px solid var(--brick); flex:none; }

.prose{ font-size:16px; line-height:2.15; letter-spacing:.01em; }
.prose > p{ margin:0 0 28px; }
/* リード（lead リッチ）— 本文冒頭の導入 */
.prose__lead{ font-size:17.5px; line-height:2.15; color: var(--ink); margin:0 0 36px; padding-left:16px; border-left:3px solid var(--brick); }
.prose__lead p{ margin:0 0 14px; }
.prose__lead p:last-child{ margin:0; }
.prose h2{ font-family: var(--font-mincho); font-weight:700; font-size:26px; line-height:1.6; letter-spacing:.03em; margin:48px 0 22px; padding-left:18px; position:relative; }
.prose h2::before{ content:""; position:absolute; left:0; top:8px; width:8px; height:26px; background: var(--brick); }
.prose h2 .num{ font-family: var(--font-mono); font-weight:400; font-size:13px; color: var(--muted); margin-right:12px; letter-spacing:.1em; }
.prose strong{ font-weight:700; color: var(--ink); background: linear-gradient(transparent 62%, var(--brick-soft) 62%); }
.prose figure.inline-fig{ margin:34px 0; }
.prose figure.inline-fig .ph{ display:block; aspect-ratio: 3/2; }
.prose figure.inline-fig figcaption{ margin-top:10px; font-family: var(--font-mono); font-size:11px; color: var(--muted); }

/* リッチエディタ出力（HTML）向けのプロース要素 */
.prose h3{ font-family: var(--font-mincho); font-weight:700; font-size:20px; line-height:1.6; letter-spacing:.02em; margin:36px 0 16px; }
.prose a{ color: var(--brick); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; }
.prose ul, .prose ol{ margin:0 0 28px; padding-left:1.4em; }
.prose li{ margin:0 0 10px; }
.prose ul{ list-style:none; }
.prose ul > li{ position:relative; }
.prose ul > li::before{ content:""; position:absolute; left:-1.1em; top:.82em; width:6px; height:6px; background: var(--brick); }
.prose blockquote{ position:relative; margin:36px 0; padding:24px 28px; background: var(--surface); border:1px solid var(--line); border-left:4px solid var(--brick); font-family: var(--font-mincho); font-weight:600; font-size:19px; line-height:1.95; color: var(--ink); }
.prose blockquote p{ margin:0 0 8px; }
.prose blockquote p:last-child{ margin:0; }
.prose blockquote cite, .prose blockquote footer{ display:block; margin-top:10px; font-family: var(--font-mono); font-weight:400; font-size:11px; font-style:normal; letter-spacing:.06em; color: var(--muted); }
.prose img{ display:block; width:100%; height:auto; margin:8px 0; border:1px solid var(--line); }
.prose figure{ margin:34px 0; }
.prose figure img{ margin:0; }
.prose figure figcaption{ margin-top:10px; font-family: var(--font-mono); font-size:11px; letter-spacing:.04em; color: var(--muted); }
.prose code{ font-family: var(--font-mono); font-size:.9em; background: var(--surface-2); padding:2px 6px; border:1px solid var(--line); }
.prose hr{ border:0; border-top:1px solid var(--line); margin:40px 0; }
.prose table{ width:100%; border-collapse:collapse; margin:28px 0; font-size:14px; }
.prose th, .prose td{ border:1px solid var(--line); padding:10px 14px; text-align:left; }
.prose th{ background: var(--surface-2); font-family: var(--font-mono); font-size:11px; letter-spacing:.06em; }

/* QUOTE BLOCK */
.pullquote{ position:relative; margin:40px 0; padding:34px 36px; background: var(--surface); border:1px solid var(--line); }
.pullquote .cm{ width:14px; height:14px; }
.pullquote__text{ font-family: var(--font-mincho); font-weight:600; font-size:22px; line-height:1.95; letter-spacing:.02em; margin:0 0 16px; }
.pullquote__cite{ font-family: var(--font-mono); font-size:11px; letter-spacing:.06em; color: var(--muted); display:flex; align-items:center; gap:10px; }
.pullquote__cite::before{ content:""; width:20px; height:1px; background: var(--brick); }

/* TAG ROW */
.tag-row{ max-width: var(--readw); margin:50px auto 0; display:flex; flex-wrap:wrap; gap:10px; padding-top:30px; border-top:1px solid var(--line); }
.hashtag{ font-family: var(--font-mono); font-size:12px; letter-spacing:.04em; padding:8px 14px; border:1px solid var(--line); background: var(--surface); text-decoration:none; color: var(--muted); transition: border-color .18s, color .18s; cursor:pointer; }
.hashtag:hover{ border-color: var(--brick); color: var(--brick); }

/* AUTHOR BOX */
.author-box{ max-width: var(--readw); margin:40px auto 0; display:flex; gap:22px; padding:30px; border:1px solid var(--line); background: var(--surface); position:relative; }
.author-box__avatar{ width:72px; height:72px; flex:none; display:grid; place-items:center; background: var(--olive); color: var(--paper); font-family: var(--font-mincho); font-weight:700; font-size:28px; position:relative; }
.author-box__avatar::before{ content:""; position:absolute; top:-1px; left:-1px; width:11px; height:11px; border-top:2px solid var(--paper); border-left:2px solid var(--paper); }
.author-box__name{ font-weight:700; font-size:16px; margin:0 0 4px; }
.author-box__role{ font-family: var(--font-mono); font-size:11px; letter-spacing:.06em; color: var(--muted); margin:0 0 14px; }
.author-box__bio{ font-size:13.5px; line-height:1.95; color: var(--muted); margin:0; }

/* RELATED */
.related{ margin-top:80px; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{ background: var(--surface-2); border-top:1px solid var(--line); margin-top:40px; }
.site-footer__inner{ display:grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap:40px; padding-block:56px 30px; }
.foot-brand .brand-name{ font-size:16px; }
.foot-tagline{ font-family: var(--font-mincho); font-size:14px; line-height:1.9; color: var(--muted); margin:18px 0 0; max-width:26ch; }
.foot-col h4{ font-family: var(--font-mono); font-size:11px; letter-spacing:.14em; color: var(--muted); margin:0 0 16px; font-weight:500; }
.foot-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; }
.foot-col a{ text-decoration:none; font-size:13.5px; cursor:pointer; }
.foot-col a:hover{ color: var(--brick); }
.site-footer__bar{ border-top:1px solid var(--line); padding-block:20px; display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; }
.site-footer__bar .mono{ font-size:10px; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1080px){
  .prose-rail{ display:none; }
}
@media (max-width: 900px){
  .hero{ grid-template-columns: 1fr; gap:32px; padding-block:40px 52px; }
  .cat-grid{ grid-template-columns: repeat(2,1fr); }
  .article-grid{ grid-template-columns: repeat(2,1fr); }
  .feature__inner{ grid-template-columns: 1fr; }
  .feature__media{ aspect-ratio: 16/9; }
  .site-footer__inner{ grid-template-columns: 1fr 1fr; }
  .cat-hero{ grid-template-columns: 1fr; align-items:start; gap:24px; }
  .cat-hero__count{ justify-self:start; }
}
@media (max-width: 600px){
  .site-nav{ display:none; }
  .cat-grid{ grid-template-columns: 1fr 1fr; }
  .article-grid{ grid-template-columns: 1fr; }
  .cta{ padding:32px 24px; }
  .cta__form{ flex-direction:column; width:100%; }
  .cta__form input{ width:100%; }
  .site-footer__inner{ grid-template-columns: 1fr; gap:28px; }
  .filter-row{ align-items:flex-start; flex-direction:column; gap:8px; }
  .filter-row__sub{ padding-left:0; }
  .filter-row__sub::before{ display:none; }
  .author-box{ flex-direction:column; gap:16px; }
}

@media (prefers-reduced-motion: reduce){
  *{ transition-duration:.001ms !important; }
}