/* =========================================================================
   tantan-room — Design System
   ダークモノトーン・淡々トーン。全ページ共通のトークンとコンポーネント。
   設計メモは DESIGN.md / styleguide.html を参照。
   ========================================================================= */

/* ---- Design Tokens --------------------------------------------------- */
:root {
  /* Color — surfaces (light / white base) */
  --c-bg:        #ffffff;
  --c-surface:   #f7f7f8;
  --c-surface-2: #efeff1;

  /* Color — lines */
  --c-line:        #e4e4e7;
  --c-line-strong: #cdcdd2;

  /* Color — text */
  --c-text:   #1b1b1d;
  --c-muted:  #6b6b72;
  --c-faint:  #9c9ca3;

  /* Color — accent (monotone, no hue) */
  --c-accent:       #2b2b30;
  --c-accent-hover: #000000;
  --c-on-accent:    #ffffff;

  /* Color — 試し読みCTA だけの差し色（くすみピンク） */
  --c-read:       #d27a96;
  --c-read-hover: #c2657f;
  --c-on-read:    #ffffff;

  /* Typography */
  --font-sans: "Helvetica Neue", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP", sans-serif;
  --fs-xs:   0.6875rem;  /* 11 */
  --fs-sm:   0.8125rem;  /* 13 */
  --fs-base: 1rem;       /* 16 */
  --fs-md:   1.125rem;   /* 18 */
  --fs-lg:   1.25rem;    /* 20 */
  --fs-xl:   1.5rem;     /* 24 */
  --fs-2xl:  1.625rem;   /* 26 */
  --lh-tight: 1.5;
  --lh-base:  1.9;
  --lh-prose: 1.95;
  --ls-tight: 0.02em;
  --ls-wide:  0.08em;
  --ls-brand: 0.22em;

  /* Spacing scale */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;

  /* Layout */
  --maxw-prose: 720px;
  --maxw-wide:  860px;
  --gutter: 24px;

  /* Borders / radius / motion */
  --border:        1px solid var(--c-line);
  --border-strong: 1px solid var(--c-line-strong);
  --radius: 0;          /* シャープな角を基調 */
  --transition: 0.2s ease;
}

/* ナイトモード（data-theme="dark"）：色トークンだけ反転 */
:root[data-theme="dark"] {
  --c-bg: #0e0e10;
  --c-surface: #161618;
  --c-surface-2: #1d1d20;
  --c-line: #2a2a2e;
  --c-line-strong: #3a3a40;
  --c-text: #e8e8ea;
  --c-muted: #9a9aa0;
  --c-faint: #66666c;
  --c-accent: #c4c4c8;
  --c-accent-hover: #ffffff;
  --c-on-accent: #0e0e10;
  --c-read: #d27a96;
  --c-read-hover: #e0a9bd;
  --c-on-read: #0e0e10;
}

/* ---- Reset ----------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

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

body {
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  letter-spacing: var(--ls-tight);
  -webkit-font-smoothing: antialiased;
}

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

a { color: inherit; }

:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }

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

/* ---- Layout ---------------------------------------------------------- */
.wrap { max-width: var(--maxw-prose); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--wide { max-width: var(--maxw-wide); }

/* ---- Age gate -------------------------------------------------------- */
.age-gate {
  border-bottom: var(--border);
  padding: 9px var(--gutter);
  font-size: var(--fs-xs);
  color: var(--c-faint);
  text-align: center;
  letter-spacing: var(--ls-wide);
}

/* ---- Header / brand -------------------------------------------------- */
.site-header { border-bottom: var(--border); padding-block: var(--sp-6) var(--sp-5); }
.site-header--hero { padding-block: var(--sp-5) var(--sp-5); }
.brand { font-size: var(--fs-md); letter-spacing: var(--ls-brand); font-weight: 300; }
.brand a { text-decoration: none; color: var(--c-text); }
.brand--lg { font-size: var(--fs-2xl); letter-spacing: 0.28em; }
/* ロゴのあしらい：控えめなアウトラインのハート */
.brand::after {
  content: "";
  display: inline-block;
  width: 0.62em;
  height: 0.62em;
  margin-left: 0.5em;
  vertical-align: 0.04em;
  background: var(--c-faint);
  opacity: 0.85;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M12%2021.35l-1.45-1.32C5.4%2015.36%202%2012.28%202%208.5%202%205.42%204.42%203%207.5%203c1.74%200%203.41.81%204.5%202.09C13.09%203.81%2014.76%203%2016.5%203%2019.58%203%2022%205.42%2022%208.5c0%203.78-3.4%206.86-8.55%2011.54L12%2021.35z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M12%2021.35l-1.45-1.32C5.4%2015.36%202%2012.28%202%208.5%202%205.42%204.42%203%207.5%203c1.74%200%203.41.81%204.5%202.09C13.09%203.81%2014.76%203%2016.5%203%2019.58%203%2022%205.42%2022%208.5c0%203.78-3.4%206.86-8.55%2011.54L12%2021.35z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.hero-tagline { font-size: var(--fs-sm); color: var(--c-muted); margin-top: var(--sp-4); line-height: 1.8; }

/* ---- Badges --------------------------------------------------------- */
.pr-badge {
  display: inline-block;
  font-size: var(--fs-xs);
  color: var(--c-faint);
  border: var(--border);
  padding: 3px 10px;
  margin-block: var(--sp-4);
  letter-spacing: 0.1em;
}

/* ---- Breadcrumb ----------------------------------------------------- */
.breadcrumb { font-size: var(--fs-xs); color: var(--c-faint); margin-block: var(--sp-4) var(--sp-2); letter-spacing: 0.04em; }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5em; }
.breadcrumb li::after { content: "›"; margin-left: 0.5em; color: var(--c-line-strong); }
.breadcrumb li:last-child::after { content: ""; }
.breadcrumb a { color: var(--c-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--c-text); }

/* ---- Article -------------------------------------------------------- */
.article h1 { font-size: var(--fs-xl); line-height: var(--lh-tight); margin: var(--sp-3) 0 var(--sp-5); font-weight: 400; }
.section-title,
.article h2 {
  font-size: var(--fs-sm);
  margin: var(--sp-7) 0 var(--sp-3);
  color: var(--c-accent);
  font-weight: 500;
  letter-spacing: var(--ls-wide);
  padding-left: 12px;
  border-left: 2px solid var(--c-accent);
}

.cover { max-width: 280px; width: 100%; border: var(--border); }
.meta { font-size: var(--fs-sm); color: var(--c-muted); margin-block: var(--sp-3); }
.guide { font-size: var(--fs-xs); color: var(--c-faint); margin-top: var(--sp-2); letter-spacing: 0.06em; }
.note { font-size: var(--fs-xs); color: var(--c-faint); margin-block: var(--sp-2); }

.editorial { line-height: var(--lh-prose); }
.editorial p { margin-bottom: 1.2em; }
.editorial p:last-child { margin-bottom: 0; }
.editorial a, .article a { color: var(--c-text); text-decoration: underline; text-underline-offset: 2px; }
.editorial h3, .feature-work__body h3 { font-size: var(--fs-sm); margin: var(--sp-4) 0 var(--sp-2); color: var(--c-accent); font-weight: 500; }
.editorial ul { margin: 0 0 1.2em 1.3em; }
.editorial li { margin-bottom: 0.4em; }

/* ---- CTA ------------------------------------------------------------ */
.cta {
  display: block;
  text-align: center;
  border: 1px solid var(--c-accent);
  color: var(--c-text);
  text-decoration: none;
  font-size: var(--fs-sm);
  padding: var(--sp-4);
  margin-block: var(--sp-5);
  letter-spacing: 0.1em;
  transition: background var(--transition), color var(--transition);
}
.cta:hover { background: var(--c-accent); color: var(--c-on-accent); }
.cta--read { border-color: var(--c-read); background: var(--c-read); color: var(--c-on-read); }
.cta--read:hover { background: var(--c-read-hover); border-color: var(--c-read-hover); color: var(--c-on-read); }

/* ---- Sample images -------------------------------------------------- */
.samples { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-block: var(--sp-3); }
.samples img { width: calc(33.33% - 6px); border: var(--border); }

/* ---- Card grid ------------------------------------------------------ */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--sp-5) var(--sp-4);
  margin-block: var(--sp-3) var(--sp-6);
}
.card { text-decoration: none; color: var(--c-text); display: block; }
.card__img { width: 100%; border: var(--border); aspect-ratio: 3 / 4; object-fit: cover; transition: border-color var(--transition); }
.card:hover .card__img { border-color: var(--c-accent); }
.card__title { font-size: var(--fs-sm); line-height: var(--lh-tight); margin: var(--sp-2) 0 2px; }
.card__sub { font-size: var(--fs-xs); color: var(--c-faint); }

/* ---- Shelves (index) — 四角タイルで密に配置 -------------------------- */
.shelves { display: grid; grid-template-columns: repeat(auto-fill, minmax(146px, 1fr)); gap: var(--sp-2); }
.shelf {
  border: var(--border);
  padding: var(--sp-3);
  text-decoration: none;
  color: var(--c-text);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  aspect-ratio: 1 / 1;
  transition: border-color var(--transition), background var(--transition);
}
.shelf:hover { border-color: var(--c-accent); background: var(--c-surface); }
.shelf__name { font-size: var(--fs-sm); letter-spacing: 0.06em; }
.shelf__desc { font-size: var(--fs-xs); color: var(--c-faint); margin-top: var(--sp-2); line-height: 1.6; }

/* ---- Features (特集記事) -------------------------------------------- */
.features { display: grid; gap: var(--sp-3); }
.feature-card { display: block; border: var(--border); padding: var(--sp-4) var(--sp-5); text-decoration: none; color: var(--c-text); transition: border-color var(--transition), background var(--transition); }
.feature-card:hover { border-color: var(--c-accent); background: var(--c-surface); }
.feature-card__title { font-size: var(--fs-md); font-weight: 400; line-height: 1.5; }
.feature-card__meta { font-size: var(--fs-xs); color: var(--c-faint); margin-top: var(--sp-1); }
.feature-card__desc { font-size: var(--fs-sm); color: var(--c-muted); margin-top: var(--sp-2); line-height: 1.7; }
.feature-card--media { display: flex; gap: var(--sp-4); align-items: flex-start; }
.feature-card__thumb { width: 72px; flex: 0 0 72px; aspect-ratio: 3 / 4; object-fit: cover; border: var(--border); }
.feature-card__text { flex: 1; min-width: 0; }

/* 特集記事内：表紙付きの作品カード */
.feature-lead { margin: var(--sp-4) 0; line-height: var(--lh-prose); }
.feature-work { display: flex; gap: var(--sp-4); margin: var(--sp-5) 0; padding-bottom: var(--sp-5); border-bottom: 1px solid var(--c-line); }
.feature-work:last-of-type { border-bottom: 0; }
.feature-work__cover { flex: 0 0 110px; display: block; }
.feature-work__cover img { width: 110px; aspect-ratio: 3 / 4; object-fit: cover; border: var(--border); transition: border-color var(--transition); }
.feature-work__cover:hover img { border-color: var(--c-accent); }
.feature-work__body { flex: 1; min-width: 0; }
.feature-work__body h2 { border-left: 0; padding-left: 0; margin: 0 0 var(--sp-2); color: var(--c-text); font-size: var(--fs-md); }
@media (max-width: 480px) { .feature-work__cover { flex-basis: 88px; } .feature-work__cover img { width: 88px; } }

/* ---- Section / nav -------------------------------------------------- */
.section { margin-block: var(--sp-7); }
.lead { font-size: var(--fs-sm); color: var(--c-muted); margin-bottom: var(--sp-5); }
.tabs { display: flex; flex-wrap: wrap; gap: 14px; font-size: var(--fs-xs); margin: var(--sp-2) 0 var(--sp-6); color: var(--c-faint); letter-spacing: 0.06em; }
.tabs a { color: var(--c-muted); text-decoration: none; padding-bottom: 2px; }
.tabs a.is-active { color: var(--c-text); border-bottom: 1px solid var(--c-accent); }
.inline-links { font-size: var(--fs-sm); color: var(--c-muted); margin-top: var(--sp-3); }
.inline-links a { color: var(--c-muted); text-decoration: none; margin-right: 14px; }

/* ---- Share（Xシェア） ---------------------------------------------- */
.share { display: flex; align-items: center; gap: var(--sp-3); margin: var(--sp-5) 0; }
.share__label { font-size: var(--fs-xs); color: var(--c-faint); letter-spacing: 0.06em; }
.share__x { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--c-line-strong); color: var(--c-text); text-decoration: none; font-size: var(--fs-xs); padding: 8px 16px; letter-spacing: 0.08em; transition: background var(--transition), color var(--transition), border-color var(--transition); }
.share__x::before { content: "𝕏"; font-size: 1.05em; line-height: 1; }
.share__x:hover { background: var(--c-text); color: var(--c-bg); border-color: var(--c-text); }

/* ---- Related -------------------------------------------------------- */
.related { margin-top: var(--sp-6); }

/* ---- Ranking list（順位番号つき） ----------------------------------- */
.rank-list { list-style: none; display: flex; flex-direction: column; gap: var(--sp-3); margin: var(--sp-3) 0 var(--sp-6); padding: 0; }
.rank-item { display: flex; gap: var(--sp-3); align-items: center; border: var(--border); padding: var(--sp-3) var(--sp-4); text-decoration: none; color: var(--c-text); transition: border-color var(--transition), background var(--transition); }
.rank-item:hover { border-color: var(--c-accent); background: var(--c-surface); }
.rank-item__num { flex: 0 0 1.6em; font-size: var(--fs-xl); font-weight: 300; color: var(--c-faint); text-align: center; font-variant-numeric: tabular-nums; line-height: 1; }
.rank-item--top .rank-item__num { color: var(--c-read); font-weight: 500; }
.rank-item__cover { flex: 0 0 56px; width: 56px; aspect-ratio: 3 / 4; object-fit: cover; border: var(--border); }
.rank-item__body { flex: 1; min-width: 0; }
.rank-item__title { font-size: var(--fs-sm); line-height: 1.5; }
.rank-item__meta { font-size: var(--fs-xs); color: var(--c-muted); margin-top: 3px; }
.rank-item__guide { font-size: var(--fs-xs); color: var(--c-faint); margin-top: 2px; }

/* ---- Search -------------------------------------------------------- */
.search-box {
  width: 100%;
  font: inherit;
  font-size: var(--fs-base);
  color: var(--c-text);
  background: var(--c-surface);
  border: var(--border);
  padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-3);
}
.search-box:focus { outline: none; border-color: var(--c-accent); }

/* ---- Tag list（作者・ジャンルの索引） ------------------------------- */
.taglist { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: var(--sp-4) 0 var(--sp-6); }
.taglist a { font-size: var(--fs-sm); color: var(--c-muted); text-decoration: none; border: var(--border); padding: 6px 12px; transition: border-color var(--transition), color var(--transition); }
.taglist a:hover { border-color: var(--c-accent); color: var(--c-text); }
.taglist a .n { color: var(--c-faint); font-size: var(--fs-xs); margin-left: 4px; }

/* ---- Guides（案内人紹介） ------------------------------------------- */
.guides { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--sp-4); margin: var(--sp-4) 0 var(--sp-6); }
.guide-card { border: var(--border); padding: var(--sp-5); display: block; text-decoration: none; color: var(--c-text); transition: border-color var(--transition); }
.guide-card:hover { border-color: var(--c-accent); }
.guide-card__name { font-size: var(--fs-md); font-weight: 400; }
.guide-card__shelf { font-size: var(--fs-xs); color: var(--c-read); margin-top: 4px; letter-spacing: 0.06em; }
.guide-card__bio { font-size: var(--fs-sm); color: var(--c-muted); margin-top: var(--sp-3); line-height: 1.8; }
.guide-card__tone { font-size: var(--fs-xs); color: var(--c-faint); margin-top: var(--sp-2); }

/* ---- Legal pages ---------------------------------------------------- */
.legal h1 { font-size: var(--fs-lg); font-weight: 400; margin: var(--sp-6) 0 var(--sp-5); }
.legal h2 { font-size: var(--fs-sm); color: var(--c-accent); margin: var(--sp-6) 0 var(--sp-2); letter-spacing: 0.06em; font-weight: 500; }
.legal p { font-size: var(--fs-sm); margin-bottom: var(--sp-3); }
.legal dl { margin-bottom: var(--sp-6); }
.legal dt { font-size: var(--fs-sm); color: var(--c-accent); margin: var(--sp-4) 0 var(--sp-1); letter-spacing: 0.06em; }
.legal dd { font-size: var(--fs-sm); margin-bottom: 2px; }

/* ---- Footer --------------------------------------------------------- */
.site-footer { border-top: var(--border); margin-top: var(--sp-8); padding: var(--sp-6) 0 var(--sp-8); font-size: var(--fs-xs); color: var(--c-faint); letter-spacing: 0.06em; }
.site-footer a { color: var(--c-muted); text-decoration: none; }
.site-footer a:hover { color: var(--c-text); }

/* ---- Age gate (法的：年齢確認のインタースティシャル) ------------------ */
/* 本文はDOMに残したまま不透明オーバーレイで覆う（年齢確認はGoogleの
   インタースティシャル規制の例外。コンテンツはクロール可能なまま）。 */
.agegate {
  position: fixed;
  inset: 0;
  z-index: 100000;
  background: var(--c-bg);
  color: var(--c-text);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--gutter);
}
.agegate__box { max-width: 460px; text-align: center; }
.agegate__brand { font-size: var(--fs-md); letter-spacing: var(--ls-brand); font-weight: 300; margin-bottom: var(--sp-5); }
.agegate__title { font-size: var(--fs-lg); font-weight: 400; margin-bottom: var(--sp-3); }
.agegate__text { font-size: var(--fs-sm); color: var(--c-muted); margin-bottom: var(--sp-6); line-height: 1.9; }
.agegate__btns { display: flex; gap: var(--sp-3); justify-content: center; flex-wrap: wrap; }
.agegate__btn {
  border: 1px solid var(--c-accent);
  background: none;
  color: var(--c-text);
  font: inherit;
  font-size: var(--fs-sm);
  padding: var(--sp-3) var(--sp-6);
  cursor: pointer;
  letter-spacing: 0.08em;
  transition: background var(--transition), color var(--transition);
}
.agegate__btn--yes:hover { background: var(--c-accent); color: var(--c-on-accent); }
.agegate__btn--no { border-color: var(--c-line-strong); color: var(--c-muted); }
.agegate__btn--no:hover { color: var(--c-text); }
.agegate__note { font-size: var(--fs-xs); color: var(--c-faint); margin-top: var(--sp-5); line-height: 1.8; }

/* ---- Site menu (hamburger) ------------------------------------------ */
/* 上部の固定メニューバー */
.topbar { position: sticky; top: 0; z-index: 100; background: var(--c-bg); border-bottom: 1px solid var(--c-line); }
.topbar__inner { max-width: var(--maxw-wide); margin-inline: auto; padding: 0 var(--gutter); min-height: 48px; display: flex; align-items: center; gap: var(--sp-4); }
.topbar__brand { font-size: var(--fs-sm); letter-spacing: var(--ls-brand); font-weight: 300; text-decoration: none; color: var(--c-text); white-space: nowrap; }
.topnav { display: none; align-items: center; gap: var(--sp-5); margin-left: auto; }
.topnav a { font-size: var(--fs-sm); color: var(--c-muted); text-decoration: none; letter-spacing: 0.04em; white-space: nowrap; }
.topnav a:hover { color: var(--c-text); }
.navtoggle {
  margin-left: auto;
  width: 40px;
  height: 40px;
  border: 1px solid var(--c-line);
  background: var(--c-bg);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  padding: 0;
}
.themetoggle { width: 38px; height: 38px; border: 1px solid var(--c-line); background: var(--c-bg); color: var(--c-text); cursor: pointer; font-size: 15px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; padding: 0; margin-left: var(--sp-3); }
.themetoggle:hover { border-color: var(--c-accent); }
@media (min-width: 760px) {
  .topnav { display: flex; }
  .navtoggle { display: none; }
}
@media (max-width: 759px) {
  .topnav { display: none; }
  .themetoggle { margin-left: auto; }
}

/* ---- PCサイドバー（PCのみ・本文カラムの真横にアンカー） ------------ */
.site-sidebar { display: none; }
@media (min-width: 1340px) {
  .site-sidebar {
    display: block;
    position: fixed;
    top: 150px;
    width: 208px;
    max-height: calc(100vh - 170px);
    overflow-y: auto;
    z-index: 40;
    padding-bottom: var(--sp-5);
  }
}
/* ホームは長いヒーローがあるので、被らないようさらに下げる（body.is-homeで確実に） */
@media (min-width: 1340px) {
  .is-home .site-sidebar { top: 324px; max-height: calc(100vh - 344px); }
  /* 中央の本文カラム(最大860px)のすぐ外側に配置 */
  .site-sidebar--right { left: calc(50% + 430px + 28px); }
  .site-sidebar--left { right: calc(50% + 430px + 28px); }
}
@media (min-width: 1700px) {
  .site-sidebar { width: 230px; }
}
.sb { margin-bottom: var(--sp-6); }
.sb__h { font-size: var(--fs-xs); color: var(--c-muted); letter-spacing: 0.12em; font-weight: 500; padding-left: 10px; border-left: 2px solid var(--c-accent); margin-bottom: var(--sp-3); }
.sb__rank { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.sb__rank li { display: flex; gap: 8px; align-items: baseline; font-size: var(--fs-xs); }
.sb__rank li span { color: var(--c-read); font-weight: 500; flex: 0 0 1em; }
.sb__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; font-size: var(--fs-xs); }
.sb__rank a, .sb__list a { color: var(--c-muted); text-decoration: none; line-height: 1.5; }
.sb__rank a:hover, .sb__list a:hover { color: var(--c-text); }
.sb__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.sb__tags a { font-size: var(--fs-xs); color: var(--c-muted); text-decoration: none; border: var(--border); padding: 3px 8px; }
.sb__tags a:hover { border-color: var(--c-accent); color: var(--c-text); }
.sb__more { display: inline-block; margin-top: 8px; font-size: var(--fs-xs); color: var(--c-faint); text-decoration: none; }
.sb__more:hover { color: var(--c-text); }
.navtoggle span { display: block; width: 18px; height: 1.5px; background: var(--c-text); transition: transform .2s ease, opacity .2s ease; }
.menu-open .navtoggle span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.menu-open .navtoggle span:nth-child(2) { opacity: 0; }
.menu-open .navtoggle span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.sitemenu {
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  width: 268px;
  max-width: 80vw;
  background: var(--c-surface);
  border-left: 1px solid var(--c-line);
  z-index: 10001;
  transform: translateX(100%);
  transition: transform .25s ease;
  padding: 64px 0 24px;
  overflow-y: auto;
}
.menu-open .sitemenu { transform: translateX(0); }
.sitemenu__head { font-size: var(--fs-sm); letter-spacing: var(--ls-brand); color: var(--c-muted); padding: 0 24px 12px; margin-bottom: 8px; border-bottom: 1px solid var(--c-line); }
.sitemenu a { display: block; padding: 15px 24px; color: var(--c-text); text-decoration: none; font-size: var(--fs-sm); border-bottom: 1px solid var(--c-line); transition: background var(--transition); }
.sitemenu a:hover { background: var(--c-surface-2); }
.sitemenu-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 10000; opacity: 0; visibility: hidden; transition: opacity .25s ease; }
.menu-open .sitemenu-backdrop { opacity: 1; visibility: visible; }
.menu-open { overflow: hidden; }

/* ---- Styleguide page ------------------------------------------------ */
.sg-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--sp-3); margin-block: var(--sp-4); }
.sg-swatch { border: var(--border); padding: var(--sp-3); font-size: var(--fs-xs); color: var(--c-muted); }
.sg-chip { height: 48px; border: var(--border); margin-bottom: var(--sp-2); }