/* ====================================================================
   Yurutto Pet — Editorial Magazine Theme
   References observed: PETOKOTO / 北欧、暮らしの道具店 / &Premium
   ==================================================================== */

/* ---------- Tokens ---------- */
:root{
  /* Color — warm paper + deep ink + single accent */
  --c-bg:        #FAF7F2;
  --c-surface:   #FFFFFF;
  --c-paper:     #F3EEE5;
  --c-ink:       #1A1715;   /* primary text — nearly black */
  --c-ink-2:     #595149;   /* secondary text */
  --c-ink-3:     #8E847A;   /* muted */
  --c-line:      #E5DDD0;
  --c-line-soft: #EFE9DD;
  --c-accent:    #B5734B;   /* warm clay — used very sparingly */
  --c-accent-d:  #8E5634;
  --c-tint:      #F1E9DC;   /* faint accent tint for callouts */

  /* Type — Editorial gothic, with a thin mincho only for accent labels */
  --ff-display: "Zen Kaku Gothic New", "Hiragino Sans", "Noto Sans JP", -apple-system, "Yu Gothic UI", "Meiryo", sans-serif;
  --ff-sans:    "Noto Sans JP", "Hiragino Sans", -apple-system, "Yu Gothic UI", "Meiryo", sans-serif;
  --ff-accent:  "Shippori Mincho", "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --ff-mono:    "JetBrains Mono", "SFMono-Regular", Consolas, monospace;

  /* Legacy alias (--ff-serif is kept pointing to display so we don't break stray rules) */
  --ff-serif: var(--ff-display);

  /* Sizing */
  --container:        1180px;
  --container-narrow:  720px;

  /* Radii — kept small and editorial */
  --r-xs: 2px;
  --r-sm: 4px;
  --r-md: 6px;
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--c-bg);
  color:var(--c-ink);
  font-family:var(--ff-sans);
  font-size:16px;
  line-height:1.9;
  letter-spacing:.02em;
  font-feature-settings:"palt";
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg,video,picture{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none;transition:color .2s ease, opacity .2s ease}
a:hover{color:var(--c-accent-d)}
button{font:inherit;cursor:pointer;background:none;border:0;color:inherit;padding:0}
:focus-visible{outline:2px solid var(--c-accent);outline-offset:3px}
hr{border:0;border-top:1px solid var(--c-line);margin:0}

.skip-link{position:absolute;left:-9999px}
.skip-link:focus{left:1rem;top:1rem;background:#fff;padding:.5rem 1rem;z-index:9999;border:1px solid var(--c-line)}

/* ---------- Layout primitives ---------- */
.container{width:min(100% - 40px, var(--container));margin-inline:auto}
.container-narrow{width:min(100% - 32px, var(--container-narrow));margin-inline:auto}
.section{padding-block:clamp(48px,7vw,96px)}

/* ---------- Header ---------- */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(250,247,242,.92);
  backdrop-filter:saturate(140%) blur(10px);
  -webkit-backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--c-line-soft);
}
.site-header__inner{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:18px 0;
}
.site-logo{display:inline-flex;align-items:baseline;gap:.7rem;color:var(--c-ink)}
.site-logo:hover{color:var(--c-ink)}
.site-logo__text{
  font-family:var(--ff-display);font-weight:700;
  font-size:1.3rem;letter-spacing:.04em;line-height:1;
}
.site-logo__tagline{
  display:none;font-size:.72rem;color:var(--c-ink-3);letter-spacing:.18em;
}
@media(min-width:680px){.site-logo__tagline{display:inline}}

.site-nav{display:none}
@media(min-width:980px){
  .site-nav{display:flex;align-items:center;gap:2rem}
  .site-nav a{
    font-size:.86rem;letter-spacing:.12em;color:var(--c-ink-2);
    position:relative;padding:.3rem 0;
  }
  .site-nav a:hover{color:var(--c-ink)}
  .site-nav a:hover::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:1px;background:var(--c-ink)}
}

.nav-toggle{
  display:inline-flex;align-items:center;justify-content:center;
  width:42px;height:42px;color:var(--c-ink);
}
@media(min-width:980px){.nav-toggle{display:none}}
.nav-toggle__bar{display:block;width:20px;height:1px;background:currentColor;position:relative}
.nav-toggle__bar::before,.nav-toggle__bar::after{
  content:"";position:absolute;left:0;width:100%;height:1px;background:currentColor;
}
.nav-toggle__bar::before{top:-6px}
.nav-toggle__bar::after{top:6px}

/* Mobile drawer */
.mobile-drawer{display:none;position:fixed;inset:0;background:rgba(26,23,21,.4);z-index:60}
.mobile-drawer.is-open{display:block}
.mobile-drawer__panel{
  position:absolute;top:0;right:0;height:100%;width:min(86vw,360px);
  background:var(--c-bg);padding:28px 28px 40px;overflow:auto;
}
.mobile-drawer__close{
  position:absolute;top:18px;right:18px;width:40px;height:40px;
  font-size:24px;color:var(--c-ink);line-height:1;
}
.mobile-drawer h3{
  font-family:var(--ff-accent);font-size:.85rem;
  letter-spacing:.18em;color:var(--c-ink-3);margin:2rem 0 .8rem;font-weight:500;
}
.mobile-drawer ul{list-style:none;margin:0;padding:0}
.mobile-drawer li{border-bottom:1px solid var(--c-line)}
.mobile-drawer li a{display:block;padding:1rem .2rem;color:var(--c-ink);font-size:.95rem}

/* ---------- Section eyebrow + title ---------- */
.eyebrow{
  display:block;font-family:var(--ff-accent);
  font-size:.78rem;letter-spacing:.3em;color:var(--c-accent);
  margin-bottom:.9rem;text-transform:uppercase;
}
.section-head{
  margin:0 0 2.4rem;
  display:flex;align-items:end;justify-content:space-between;gap:1rem;flex-wrap:wrap;
}
.section-head h2{
  margin:0;font-family:var(--ff-display);font-weight:700;
  font-size:clamp(1.5rem,1.2rem + 1.2vw,2rem);
  line-height:1.55;letter-spacing:.02em;color:var(--c-ink);
}
.section-head .more{
  font-size:.82rem;letter-spacing:.16em;color:var(--c-ink-2);
  border-bottom:1px solid var(--c-ink-2);padding-bottom:2px;
}
.section-head .more:hover{color:var(--c-ink);border-color:var(--c-ink)}

/* ---------- Breadcrumb ---------- */
.breadcrumb{font-size:.78rem;color:var(--c-ink-3);padding:16px 0 0;letter-spacing:.06em}
.breadcrumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem;padding:0;margin:0}
.breadcrumb li{display:inline-flex;align-items:center;gap:.55rem}
.breadcrumb li:not(:last-child)::after{content:"/";color:var(--c-ink-3);opacity:.55}
.breadcrumb a{color:var(--c-ink-2)}
.breadcrumb a:hover{color:var(--c-ink)}

/* ---------- Hero (editorial pickup) ---------- */
.hero{padding:clamp(40px,5vw,72px) 0 clamp(56px,7vw,96px)}
.hero__grid{display:grid;gap:36px;align-items:end}
@media(min-width:920px){.hero__grid{grid-template-columns:1.25fr 1fr;gap:64px}}

.hero__media{
  position:relative;aspect-ratio:5/6;
  overflow:hidden;background:var(--c-paper);
}
.hero__media img{width:100%;height:100%;object-fit:cover;display:block}
.hero__num{
  position:absolute;left:20px;top:18px;
  font-family:var(--ff-accent);font-size:.78rem;letter-spacing:.3em;
  color:#fff;mix-blend-mode:difference;
}
.hero__copy{padding-bottom:.5rem}
.hero__kicker{
  display:inline-block;font-family:var(--ff-accent);
  font-size:.74rem;letter-spacing:.3em;color:var(--c-accent);
  margin-bottom:1.2rem;text-transform:uppercase;
}
.hero__title{
  font-family:var(--ff-display);font-weight:700;
  font-size:clamp(1.85rem,1.3rem + 2.4vw,2.8rem);
  line-height:1.6;letter-spacing:.02em;color:var(--c-ink);
  margin:0 0 1.4rem;
}
.hero__lead{
  font-size:.98rem;line-height:2;color:var(--c-ink-2);
  margin:0 0 2rem;max-width:42em;
}
.hero__meta{
  display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap;
  font-size:.78rem;letter-spacing:.14em;color:var(--c-ink-3);
}
.hero__meta a{color:var(--c-ink-2);border-bottom:1px solid currentColor;padding-bottom:2px}

/* ---------- Inline link buttons (minimal, editorial) ---------- */
.link-arrow{
  display:inline-flex;align-items:center;gap:.55rem;
  font-size:.85rem;letter-spacing:.14em;color:var(--c-ink);
  border-bottom:1px solid var(--c-ink);padding-bottom:3px;
}
.link-arrow::after{content:"→";font-family:var(--ff-sans);transition:transform .2s ease}
.link-arrow:hover{color:var(--c-accent-d)}
.link-arrow:hover::after{transform:translateX(4px)}

/* ---------- Pickup row (3 columns under hero) ---------- */
.pickup{
  border-top:1px solid var(--c-line);
  padding-top:clamp(40px,5vw,64px);
  margin-top:clamp(40px,5vw,64px);
  display:grid;gap:32px;
}
@media(min-width:780px){.pickup{grid-template-columns:repeat(3, minmax(0,1fr));gap:36px}}
.pickup-card{display:block}
.pickup-card__num{
  font-family:var(--ff-accent);font-size:.74rem;letter-spacing:.3em;
  color:var(--c-accent);margin-bottom:.6rem;
}
.pickup-card__title{
  font-family:var(--ff-display);font-weight:700;
  font-size:1.12rem;line-height:1.7;letter-spacing:.02em;color:var(--c-ink);
  margin:0 0 .8rem;
}
.pickup-card:hover .pickup-card__title{color:var(--c-accent-d)}
.pickup-card__meta{font-size:.75rem;letter-spacing:.12em;color:var(--c-ink-3)}

/* ---------- Topic strip (categories — list style, not buttons) ---------- */
.topics{
  border-top:1px solid var(--c-line);
  border-bottom:1px solid var(--c-line);
  padding:24px 0;
}
.topics__inner{
  display:grid;gap:18px 28px;
  grid-template-columns:repeat(2, minmax(0,1fr));
}
@media(min-width:680px){.topics__inner{grid-template-columns:repeat(4, minmax(0,1fr))}}
@media(min-width:1000px){.topics__inner{grid-template-columns:repeat(8, minmax(0,1fr))}}
.topic-link{
  display:flex;flex-direction:column;gap:.3rem;
  font-size:.95rem;color:var(--c-ink);letter-spacing:.04em;
}
.topic-link .num{font-family:var(--ff-accent);font-size:.7rem;letter-spacing:.24em;color:var(--c-ink-3)}
.topic-link:hover{color:var(--c-accent-d)}

/* ---------- Article cards (post grid) ---------- */
.post-grid{
  display:grid;gap:40px 32px;
  grid-template-columns:1fr;
}
@media(min-width:680px){.post-grid{grid-template-columns:repeat(2, minmax(0,1fr));gap:48px 36px}}
@media(min-width:1040px){.post-grid{grid-template-columns:repeat(3, minmax(0,1fr));gap:56px 40px}}

.post-card{display:flex;flex-direction:column;gap:1rem}
.post-card__media{
  position:relative;aspect-ratio:4/3;background:var(--c-paper);overflow:hidden;
}
.post-card__media img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.post-card:hover .post-card__media img{transform:scale(1.03)}
.post-card__cat{
  font-family:var(--ff-accent);font-size:.72rem;letter-spacing:.24em;
  color:var(--c-accent);text-transform:uppercase;
}
.post-card__title{
  font-family:var(--ff-display);font-weight:700;
  font-size:1.08rem;line-height:1.7;letter-spacing:.02em;
  color:var(--c-ink);margin:0;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.post-card:hover .post-card__title{color:var(--c-accent-d)}
.post-card__meta{
  font-size:.74rem;letter-spacing:.12em;color:var(--c-ink-3);
  display:flex;gap:1rem;
}

/* Variant: horizontal list card */
.post-row{
  display:grid;grid-template-columns:160px 1fr;gap:24px;
  padding:24px 0;border-bottom:1px solid var(--c-line);
}
.post-row:first-child{border-top:1px solid var(--c-line)}
.post-row__media{aspect-ratio:4/3;background:var(--c-paper);overflow:hidden}
.post-row__media img{width:100%;height:100%;object-fit:cover}
.post-row__body{display:flex;flex-direction:column;justify-content:center;gap:.6rem}
.post-row__title{
  font-family:var(--ff-display);font-weight:700;font-size:1.05rem;line-height:1.7;
  color:var(--c-ink);margin:0;letter-spacing:.02em;
}

/* ---------- Article (single) ---------- */
.article{
  background:transparent;padding:0;
}
.article__header{
  text-align:left;margin:0 0 clamp(36px,5vw,64px);
  padding-bottom:clamp(36px,5vw,64px);border-bottom:1px solid var(--c-line);
}
.article__cat{
  font-family:var(--ff-accent);font-size:.78rem;letter-spacing:.3em;
  color:var(--c-accent);text-transform:uppercase;
  display:inline-block;margin-bottom:1.4rem;
}
.article__title{
  font-family:var(--ff-display);font-weight:700;
  font-size:clamp(1.6rem,1.15rem + 1.8vw,2.3rem);
  line-height:1.65;letter-spacing:.02em;color:var(--c-ink);
  margin:0 0 1.4rem;
}
.article__meta{
  display:flex;flex-wrap:wrap;gap:1rem 1.6rem;
  font-size:.78rem;letter-spacing:.14em;color:var(--c-ink-3);
}
.article__hero{
  margin:0 0 clamp(28px,4vw,48px);
  aspect-ratio:16/9;background:var(--c-paper);overflow:hidden;
}
.article__hero img{width:100%;height:100%;object-fit:cover}

/* TOC */
.toc{
  background:var(--c-surface);
  border:1px solid var(--c-line);
  padding:24px 26px;margin:0 0 clamp(32px,4vw,48px);
}
.toc__title{
  font-family:var(--ff-accent);font-size:.8rem;letter-spacing:.24em;
  color:var(--c-ink);margin:0 0 1rem;font-weight:600;text-transform:uppercase;
}
.toc ol{list-style:none;margin:0;padding:0;counter-reset:toc}
.toc ol ol{padding-left:1.4em;margin-top:.4rem;counter-reset:toc-sub}
.toc li{margin:.45rem 0;font-size:.92rem;line-height:1.7;position:relative;padding-left:2.2em;counter-increment:toc}
.toc li::before{
  content:counter(toc, decimal-leading-zero);
  position:absolute;left:0;top:.1em;
  font-family:var(--ff-accent);font-size:.78rem;letter-spacing:.16em;
  color:var(--c-accent);
}
.toc ol ol li{counter-increment:toc-sub;padding-left:2em}
.toc ol ol li::before{content:counter(toc-sub, decimal-leading-zero)}
.toc a{color:var(--c-ink-2)}
.toc a:hover{color:var(--c-ink)}

/* Article body */
.article__body{font-size:1.02rem;line-height:1.95;color:var(--c-ink)}
.article__body > *{margin-block:1.4em}
.article__body > *:first-child{margin-top:0}

.article__body h2{
  margin-top:2.8em;margin-bottom:1.2em;
  font-family:var(--ff-display);font-weight:700;
  font-size:clamp(1.3rem,1.05rem + .7vw,1.5rem);
  line-height:1.7;letter-spacing:.02em;color:var(--c-ink);
  padding-top:1.4em;position:relative;
}
.article__body h2::before{
  content:"";position:absolute;left:0;top:0;
  width:36px;height:2px;background:var(--c-accent);border-radius:1px;
}
.article__body h3{
  margin-top:2.2em;margin-bottom:.9em;
  font-family:var(--ff-display);font-weight:700;
  font-size:1.16rem;line-height:1.7;letter-spacing:.02em;color:var(--c-ink);
  padding-left:.85em;border-left:3px solid var(--c-line);
}
.article__body h4{margin-top:1.8em;font-size:1.04rem;font-weight:700;color:var(--c-ink);letter-spacing:.02em}
.article__body p{margin-block:1.2em}
.article__body a{color:var(--c-accent-d);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.article__body a:hover{color:var(--c-ink)}
.article__body strong{color:var(--c-ink);font-weight:700}
.article__body img{margin-block:2em;background:var(--c-paper)}
.article__body ul,.article__body ol{padding-left:1.2em}
.article__body ul li,.article__body ol li{margin-block:.5em}
.article__body ul li::marker{color:var(--c-accent)}

.article__body blockquote{
  margin:2em 0;padding:0 0 0 1.6em;
  border-left:2px solid var(--c-accent);
  font-family:var(--ff-accent);font-size:1.04rem;line-height:1.95;
  color:var(--c-ink-2);font-style:normal;letter-spacing:.04em;
}

.article__body code{
  font-family:var(--ff-mono);background:var(--c-tint);padding:.12em .4em;
  border-radius:var(--r-xs);font-size:.92em;color:var(--c-accent-d);
}
.article__body pre{
  background:#1A1715;color:#F0EAE0;padding:1.2em 1.4em;overflow:auto;
  font-family:var(--ff-mono);font-size:.92em;line-height:1.7;
}
.article__body pre code{background:transparent;color:inherit;padding:0;border-radius:0}

.article__body table{
  width:100%;border-collapse:collapse;font-size:.92rem;margin:2em 0;
  border-top:1px solid var(--c-ink);border-bottom:1px solid var(--c-ink);
}
.article__body th,.article__body td{padding:.85em 1em;border-bottom:1px solid var(--c-line);text-align:left;vertical-align:top}
.article__body th{background:transparent;font-family:var(--ff-display);font-weight:700;color:var(--c-ink);letter-spacing:.02em}
.article__body tr:last-child td{border-bottom:0}

/* Callouts — used sparingly */
.callout{
  margin:2em 0;padding:24px 28px;
  background:var(--c-surface);border:1px solid var(--c-line);
  font-size:.95rem;line-height:1.85;
}
.callout--tip{background:var(--c-tint);border-color:#E1D2BD}
.callout--warn{border-left:3px solid var(--c-accent)}
.callout__label{
  display:block;font-family:var(--ff-accent);font-size:.72rem;
  letter-spacing:.3em;color:var(--c-accent);
  text-transform:uppercase;margin-bottom:.6rem;
}
.callout__title{font-weight:700;color:var(--c-ink);margin:0 0 .35em}

/* Drop cap variant (optional, first paragraph of features) */
.article__body p.lede::first-letter{
  font-family:var(--ff-accent);font-weight:600;
  font-size:3.6em;line-height:.95;float:left;
  margin:.08em .12em 0 0;color:var(--c-accent-d);
}

/* Author */
.author-box{
  display:grid;grid-template-columns:60px 1fr;gap:18px;align-items:start;
  margin:3rem 0 0;padding:2rem 0 0;border-top:1px solid var(--c-line);
}
.author-box__avatar{
  width:60px;height:60px;border-radius:50%;
  background:var(--c-paper);overflow:hidden;
}
.author-box__avatar img{width:100%;height:100%;object-fit:cover}
.author-box__role{font-family:var(--ff-accent);font-size:.72rem;letter-spacing:.24em;color:var(--c-ink-3);text-transform:uppercase}
.author-box__name{font-family:var(--ff-display);font-weight:700;font-size:1.05rem;margin:.2rem 0 .4rem;color:var(--c-ink);letter-spacing:.02em}
.author-box__bio{font-size:.88rem;color:var(--c-ink-2);line-height:1.85;margin:0}

/* Share */
.share{
  display:flex;align-items:center;gap:1.2rem;margin-top:2.4rem;
  font-size:.74rem;letter-spacing:.24em;color:var(--c-ink-3);
  text-transform:uppercase;
}
.share a{
  font-family:var(--ff-display);font-weight:500;font-size:.88rem;letter-spacing:.04em;
  color:var(--c-ink);border-bottom:1px solid var(--c-line);padding-bottom:2px;
  text-transform:none;
}
.share a:hover{color:var(--c-accent-d);border-color:var(--c-accent-d)}

/* ---------- Layout: 1 column for single, 2 for archive ---------- */
.layout-single{
  display:grid;grid-template-columns:1fr;gap:0;
  max-width:760px;margin-inline:auto;
}
.layout-2col{display:grid;gap:48px;grid-template-columns:1fr}
@media(min-width:1040px){.layout-2col{grid-template-columns:minmax(0,1fr) 280px;gap:72px}}

/* ---------- Sidebar (used on archive only) ---------- */
.sidebar{display:flex;flex-direction:column;gap:48px}
.widget__title{
  font-family:var(--ff-accent);font-size:.78rem;letter-spacing:.28em;
  color:var(--c-ink);text-transform:uppercase;
  margin:0 0 1.2rem;padding-bottom:.8rem;border-bottom:1px solid var(--c-ink);font-weight:600;
}
.widget ul{list-style:none;margin:0;padding:0}
.widget li{border-bottom:1px solid var(--c-line)}
.widget li:last-child{border-bottom:0}
.widget li a{
  display:flex;justify-content:space-between;align-items:center;gap:.5rem;
  padding:.8rem 0;font-size:.88rem;line-height:1.6;color:var(--c-ink);
}
.widget li a:hover{color:var(--c-accent-d)}
.widget--profile{text-align:left}
.widget--profile .avatar{
  width:72px;height:72px;border-radius:50%;background:var(--c-paper);
  margin-bottom:1rem;overflow:hidden;
}
.widget--profile .name{font-family:var(--ff-display);font-size:1rem;font-weight:700;margin:.2rem 0 .6rem;color:var(--c-ink);letter-spacing:.02em}
.widget--profile .bio{font-size:.84rem;color:var(--c-ink-2);line-height:1.85;margin:0}

/* ---------- Search ---------- */
.search-form{
  display:flex;align-items:center;gap:.5rem;border-bottom:1px solid var(--c-ink);
  padding:.4rem 0;
}
.search-form input[type="search"]{
  flex:1;border:0;background:transparent;font:inherit;padding:.3rem 0;
  color:var(--c-ink);outline:none;min-width:0;
}
.search-form input::placeholder{color:var(--c-ink-3)}
.search-form button{
  font-size:.78rem;letter-spacing:.24em;color:var(--c-ink);text-transform:uppercase;
}

/* ---------- Pagination ---------- */
.pagination{
  display:flex;justify-content:center;gap:.8rem;
  margin-top:4rem;padding-top:2rem;border-top:1px solid var(--c-line);
}
.pagination a, .pagination span{
  font-family:var(--ff-accent);font-size:.95rem;letter-spacing:.08em;
  color:var(--c-ink-2);padding:.4rem .7rem;
}
.pagination a:hover{color:var(--c-ink);border-bottom:1px solid var(--c-ink)}
.pagination .current{color:var(--c-accent);border-bottom:1px solid var(--c-accent)}

/* ---------- Related ---------- */
.related{margin-top:4rem;padding-top:3rem;border-top:1px solid var(--c-line)}

/* ---------- Footer ---------- */
.site-footer{
  margin-top:96px;padding:64px 0 32px;
  border-top:1px solid var(--c-line);
  color:var(--c-ink-2);font-size:.86rem;
}
.site-footer__grid{display:grid;gap:40px;grid-template-columns:1fr}
@media(min-width:760px){.site-footer__grid{grid-template-columns:1.6fr 1fr 1fr 1fr}}
.site-footer h4{
  font-family:var(--ff-accent);font-size:.74rem;letter-spacing:.28em;
  color:var(--c-ink);font-weight:600;margin:0 0 1rem;text-transform:uppercase;
}
.site-footer ul{list-style:none;padding:0;margin:0}
.site-footer li{margin:.55rem 0}
.site-footer a:hover{color:var(--c-ink)}
.site-footer__bottom{
  margin-top:56px;padding-top:24px;border-top:1px solid var(--c-line);
  display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:.8rem;
  font-size:.74rem;letter-spacing:.14em;color:var(--c-ink-3);
}
.site-footer .brand-line{font-family:var(--ff-display);font-weight:700;color:var(--c-ink);font-size:1.05rem;letter-spacing:.04em}
.site-footer .brand-desc{margin-top:1rem;line-height:1.85;max-width:32em}

/* ---------- Empty / 404 ---------- */
.empty{
  text-align:center;padding:80px 24px;
}
.empty__num{
  font-family:var(--ff-accent);font-size:clamp(3rem,2rem + 4vw,5rem);
  letter-spacing:.1em;color:var(--c-ink);margin:0 0 1rem;line-height:1;
}
.empty__title{font-family:var(--ff-display);font-size:1.3rem;font-weight:700;margin:0 0 .6rem;color:var(--c-ink);letter-spacing:.02em}
.empty__lead{color:var(--c-ink-2);margin:0 0 2rem}

/* ---------- Utility ---------- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.text-serif{font-family:var(--ff-accent)}
.hide-mobile{display:none}
@media(min-width:780px){.hide-mobile{display:initial}}

/* Print */
@media print{
  .site-header,.site-footer,.sidebar,.share,.related,.toc,.breadcrumb{display:none !important}
  body{background:#fff;color:#000}
}