/* Hybrid Magazine WP (Light) — styles.css */
:root{
  --brand-h: 258; --brand-s: 90%; --brand-l: 56%;
  --accent: hsl(var(--brand-h) var(--brand-s) var(--brand-l));
  --accent-600: hsl(var(--brand-h) var(--brand-s) calc(var(--brand-l) - 8%));
  --accent-700: hsl(var(--brand-h) var(--brand-s) calc(var(--brand-l) - 14%));
  --bg: #ffffff; --bg-soft:#f6f7f8; --surface:#ffffff; --surface-2:#fff;
  --border:#e6e7eb; --text-1:#0f1115; --text-2:#4b5563; --muted:#6b7280;
  --ring: var(--accent-600);
  --radius: 14px; --radius-sm: 10px;
  --shadow-1: 0 1px 2px rgba(0,0,0,.05);
  --shadow-2: 0 10px 30px rgba(0,0,0,.06);
  --container: min(1200px, 92vw);
  --space-1: clamp(.5rem, .4rem + .5vw, .8rem);
  --space-2: clamp(.8rem, .7rem + .6vw, 1.1rem);
  --space-3: clamp(1.1rem, .9rem + .8vw, 1.6rem);
  --space-4: clamp(1.6rem, 1.2rem + 1vw, 2.2rem);
  --space-5: clamp(2.2rem, 1.6rem + 1.4vw, 3rem);
  --gap: clamp(16px, 1.6vw, 22px);
  --font-sans: system-ui, -apple-system, "Segoe UI", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Meiryo", Roboto, "Helvetica Neue", Arial, sans-serif;
  --title: clamp(1.6rem, 1.1rem + 1.8vw, 2.4rem);
  --h2: clamp(1.2rem, 1rem + 1.2vw, 1.6rem);
  --h3: clamp(1.05rem, .95rem + .8vw, 1.25rem);
  --p: clamp(.96rem, .9rem + .3vw, 1.05rem);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text-1);font-family:var(--font-sans);font-size:16px;line-height:1.6}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
a:hover{color:var(--accent)}
.container{width:var(--container);margin-inline:auto;padding-inline:clamp(8px,1vw,12px)}
.hide{display:none}
:where(a,button,input,select,textarea):focus-visible{outline:2px solid var(--ring);outline-offset:2px}

/* Header */
.header{position:sticky;top:0;z-index:50;background:color-mix(in oklab, var(--bg) 88%, white 12%);backdrop-filter:blur(8px);border-bottom:1px solid var(--border);transition: background .2s ease, border-color .2s ease}
.header.is-scrolled{background:color-mix(in oklab, var(--bg) 82%, white 18%);border-color:color-mix(in oklab, var(--border), var(--accent) 10%)}
.header .wrap{display:flex;align-items:center;gap:var(--gap);padding:10px 0}
.brand{font-weight:800;letter-spacing:.2px}
.brand a{display:flex;align-items:center;gap:.6rem}
.brand__dot{width:.6rem;height:.6rem;border-radius:50%;background:var(--accent);display:inline-block}
.nav{margin-left:auto;display:flex;gap:1.2rem;align-items:center}
.nav a{font-size:.95rem;color:var(--text-2)}
.nav .current-menu-item > a{color:var(--text-1);font-weight:600}
.search{margin-left:auto;display:flex;align-items:center;gap:.6rem}
.search input{width:clamp(160px,24vw,280px);padding:.55rem .8rem;border-radius:999px;border:1px solid var(--border);background:var(--surface);color:var(--text-1);outline:none}
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.55rem .9rem;border-radius:999px;border:1px solid var(--border);background:var(--surface)}
.icon{width:1.1rem;height:1.1rem;opacity:.85}
.burger{display:none}
@media (max-width:960px){ .nav{display:none} .burger{display:inline-flex;margin-left:auto} .search{display:none} }

/* Hero */
.hero{padding:var(--space-3) 0 var(--space-4);border-bottom:1px solid var(--border);background:var(--bg-soft)}
.hero-grid{display:grid;grid-template-columns:2.2fr 1.2fr;gap:var(--gap)}
@media (max-width:980px){ .hero-grid{grid-template-columns:1fr} }
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-1);transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease}
.card:hover{transform:translateY(-2px);box-shadow:var(--shadow-2);border-color:color-mix(in oklab, var(--border), var(--accent) 20%)}
.media{aspect-ratio:16/9;background:linear-gradient(135deg, color-mix(in oklab, var(--accent) 18%, #fff 82%), var(--surface));display:block}
.card__body{padding:clamp(14px, 1.2vw, 18px)}
.badge{display:inline-flex;align-items:center;gap:.5rem;font-size:.72rem;font-weight:700;letter-spacing:.25px;padding:.35rem .6rem;border-radius:999px;background:color-mix(in oklab, var(--accent) 10%, var(--surface) 90%);color:var(--accent-700);border:1px solid color-mix(in oklab, var(--accent) 30%, var(--border) 70%)}
.meta{display:flex;gap:.8rem;align-items:center;color:var(--muted);font-size:.85rem}
.title{margin:.6rem 0;font-weight:800;font-size:var(--h2);line-height:1.3}
.excerpt{color:var(--text-2);font-size:var(--p)}

/* Main */
.main{padding:var(--space-4) 0}
.layout{display:grid;grid-template-columns: 1fr 320px;gap:var(--gap)}
@media (max-width:1100px){ .layout{grid-template-columns:1fr} }
.grid{display:grid;grid-template-columns: repeat(2, 1fr);gap:var(--gap)}
@media (max-width:1100px){ .grid{grid-template-columns: repeat(2, 1fr)} }
@media (max-width:680px){ .grid{grid-template-columns: 1fr} }
.card--grid .title{font-size:var(--h3)}
.load-more{display:flex;justify-content:center;margin-top:var(--space-3)}
.empty{color:var(--muted);text-align:center;margin-top:var(--space-2)}

/* Sidebar */
.sidebar{position:sticky;top:74px;height:fit-content}
.widget{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:var(--space-2);margin-bottom:var(--space-2)}
.widget h3{margin:0 0 .6rem 0;font-size:1rem}
.tabs{display:flex;gap:.4rem;margin-bottom:.6rem}
.tabs button{flex:1;border:1px solid var(--border);background:var(--bg-soft);padding:.45rem .6rem;border-radius:999px;font-weight:600;color:var(--text-2)}
.tabs button.active{background:var(--accent);border-color:var(--accent-700);color:#fff}
.rank{display:grid;gap:.8rem}
.rank__item{display:grid;grid-template-columns: 42px 1fr;gap:.6rem;align-items:center}
.rank__num{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;font-weight:800;color:var(--accent-700);border:1px solid var(--border);background:var(--bg-soft)}
.rank__title{font-size:.95rem;line-height:1.3}

/* Footer */
.footer{border-top:1px solid var(--border);padding:var(--space-4) 0;margin-top:var(--space-5);background:var(--bg-soft)}
.footer .cols{display:grid;grid-template-columns:2fr 1fr 1fr;gap:var(--gap)}
.footer small{color:var(--muted)}
@media (max-width:900px){.footer .cols{grid-template-columns:1fr}}

/* Article */
.article{padding:var(--space-4) 0}
.article .title{font-size:var(--title)}
.article .prose{font-size:var(--p);color:var(--text-1)}
.prose p{margin:1rem 0}
.prose h2{font-size:var(--h2);margin:2rem 0 .8rem 0}
.prose h3{font-size:var(--h3);margin:1.2rem 0 .5rem 0}
.callout{border:1px solid var(--border);background:var(--bg-soft);padding:1rem;border-radius:var(--radius)}
.share{display:flex;gap:.6rem;align-items:center}
.tag{font-size:.8rem;background:var(--bg-soft);border:1px solid var(--border);padding:.25rem .55rem;border-radius:999px}

/* Breadcrumb */
.breadcrumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem;margin:0 0 1rem 0;padding:0}
.breadcrumb a{color:var(--text-2)}
.breadcrumb li[aria-current]{color:var(--text-1)}

/* TOC */
.article-layout{display:grid;grid-template-columns:1fr 260px;gap:var(--gap);align-items:start}
@media (max-width:980px){ .article-layout{grid-template-columns:1fr} }
.toc{position:sticky;top:74px}
.toc nav ol{list-style:none;margin:0;padding-left:0;display:grid;gap:.5rem}
.toc nav a{display:inline-block;padding:.25rem .25rem;border-radius:8px;color:var(--text-2)}
.toc nav a:hover{color:var(--text-1)}
.toc nav a.active{color:var(--accent-700);background:color-mix(in oklab, var(--accent) 12%, var(--surface) 88%)}

/* Reading progress */
#read-progress{position:fixed;inset:0 auto auto 0;height:3px;background:linear-gradient(90deg, var(--accent), var(--accent-600));width:0;z-index:60;border-radius:0 2px 2px 0}

/* WP block content defaults */
.alignwide{max-width:min(1200px, 92vw);margin-inline:auto}
.alignfull{max-width:100vw}
.wp-block-image img{border-radius:12px}

/* Full-card link tweaks */
a.card{display:block}
.card--link:hover,.card--link:focus{color:inherit}


/* ===== HM Patch: Pretty TOC & Heading Emphasis & Skip link ===== */
.toc{
  border:2px solid #A7E1B1;
  background:#F9FEF9;
  border-radius:12px;
  padding:1rem 1rem 1.1rem;
  box-shadow: var(--shadow-1, 0 1px 2px rgba(0,0,0,.06));
}
.toc h3{
  font-size:.95rem;
  margin:0 0 .5rem;
  color:var(--text-2, #555);
  font-weight:600;
}
.toc nav ol{
  counter-reset: toc;
  list-style:none;
  display:grid;
  gap:.45rem;
  margin:0;
  padding:0;
}
.toc nav li{
  display:grid;
  grid-template-columns:1.6rem 1fr;
  align-items:start;
  column-gap:.6rem;
}
.toc nav li::before{
  counter-increment: toc;
  content: counter(toc);
  display:grid;
  place-items:center;
  width:1.45rem; height:1.45rem;
  border-radius:999px;
  background: var(--accent, #2b6cb0);
  color:#fff;
  font-size:.8rem; font-weight:700; line-height:1;
  margin-top:.1rem;
}
.toc nav a{ padding:.1rem 0; border-radius:6px; color:var(--text-2, #555); text-decoration:none; }
.toc nav a:hover{ color:var(--text-1, #222); }
.toc nav a.active{
  color: color-mix(in oklab, var(--accent, #2b6cb0) 80%, #000);
  background: color-mix(in oklab, var(--accent, #2b6cb0) 12%, #fff 88%);
}

/* Headings */
#article-prose h2{
  font-size: var(--h2, clamp(1.25rem, 1.1rem + 1.2vw, 1.8rem));
  margin-top: clamp(1.8rem, 1.4rem + 1.8vw, 2.4rem);
  padding-bottom:.2rem;
  border-bottom:3px solid var(--text-1, #111);
}
#article-prose h3{
  font-size: var(--h3, clamp(1.125rem, 1rem + 0.8vw, 1.4rem));
  margin-top: clamp(1.2rem, 1rem + 1.2vw, 1.6rem);
  padding-left:.6rem;
  border-left:4px solid var(--accent, #2b6cb0);
}

/* Skip link: visually hidden except on focus */
.skip-link{
  position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{
  left:12px; top:12px; width:auto; height:auto;
  padding:.5rem .75rem; background:#111; color:#fff;
  border-radius:8px; box-shadow:0 4px 24px rgba(0,0,0,.25); z-index:1000;
}



/* HM Patch v2: Uniform card media ratio (16:9) and TOC visibility control */
.card .media{
  display:block;
  aspect-ratio: 16 / 9;
  overflow:hidden;
  background:#f3f4f6;
}
.card .media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* Single posts: show only the in-article TOC, make it sticky */
.single .toc:not(.toc--inline){ display:none; }
.toc--inline{ position: sticky; top: var(--toc-sticky-top, 80px); z-index: 3; }



/* HM Patch v3: Inline TOC should NOT be sticky */
.toc--inline{
  position: static !important;
  top: auto !important;
  z-index: auto !important;
}