/* =========================================================
   hase lab — theme.css
   トークンは theme.json 側で定義。ここは構造とコンポーネント。
   クラスは全て hl- 接頭辞。コアブロックのCSSと衝突させない。
   ========================================================= */

:root{
  --hl-paper:    var(--wp--preset--color--paper, #FAFAF7);
  --hl-grid:     var(--wp--preset--color--grid, #E4E5DE);
  --hl-ink:      var(--wp--preset--color--ink, #2A2622);
  --hl-sub:      var(--wp--preset--color--sub, #6E6A63);
  --hl-koji:     var(--wp--preset--color--koji, #D9A227);
  --hl-espresso: var(--wp--preset--color--espresso, #4A3B2E);
  --hl-mono:     var(--wp--preset--font-family--mono, "IBM Plex Mono", monospace);
  --hl-sans:     var(--wp--preset--font-family--sans, "IBM Plex Sans JP", sans-serif);
}

/* ---------- 下地：方眼 ---------- */
body{
  background-color: var(--hl-paper);
  background-image:
    repeating-linear-gradient(to right, var(--hl-grid) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(to bottom, var(--hl-grid) 0 1px, transparent 1px 24px);
  font-feature-settings: "palt" 1;
}
body::before{
  content:"";
  position:fixed; inset:0;
  background: var(--hl-paper);
  opacity:.62;
  pointer-events:none;
  z-index:0;
}
.wp-site-blocks{ position:relative; z-index:1; }

/* 角丸を全面的に殺す */
.wp-block-button__link,
.wp-block-image img,
.wp-block-post-featured-image img,
.wp-block-search__input,
.wp-block-search__button{ border-radius:0; }

:focus-visible{ outline:2px solid var(--hl-koji); outline-offset:3px; }

/* ---------- 汎用 ---------- */
.hl-label{
  font-family: var(--hl-mono);
  font-size:.75rem; font-weight:500;
  letter-spacing:.12em; text-transform:uppercase;
  color: var(--hl-sub);
}
.hl-ico{
  display:inline-block; vertical-align:-.2em;
  flex:none;
}
.hl-inline{ display:flex; align-items:center; gap:8px; }
.hl-rule{ height:1px; background:var(--hl-ink); }
.hl-hair{ height:1px; background:var(--hl-grid); }

.hl-go{
  font-family: var(--hl-mono);
  font-size:.75rem; letter-spacing:.12em;
  display:inline-flex; align-items:center; gap:10px;
  border-bottom:1px solid var(--hl-koji);
  padding-bottom:4px;
}

/* セクション見出し（ラベル＋罫線） */
.hl-sec-head{ display:flex; align-items:baseline; gap:16px; margin-bottom:44px; }
.hl-sec-head .hl-line{ flex:1; height:1px; background:var(--hl-grid); }

/* ---------- ヘッダー ---------- */
.hl-header{
  border-bottom:1px solid var(--hl-ink);
  background:var(--hl-paper);
  position:sticky; top:0; z-index:20;
}
.hl-header .hl-bar{
  display:flex; align-items:center; justify-content:space-between;
  min-height:72px;
}
.hl-mark{
  font-family: var(--hl-mono);
  font-weight:600; font-size:1.125rem; letter-spacing:.02em;
}
.hl-header .wp-block-navigation{ gap:26px; }
.hl-header .wp-block-navigation-item__content{
  font-family: var(--hl-mono);
  font-size:.75rem; letter-spacing:.12em; text-transform:uppercase;
  padding-bottom:2px; border-bottom:1px solid transparent;
}
.hl-header .wp-block-navigation-item__content:hover{ border-bottom-color:var(--hl-koji); }

/* ---------- ヒーロー ---------- */
.hl-hero{
  position:relative;
  min-height:clamp(360px, 62vh, 600px);
  background:var(--hl-espresso);
  overflow:hidden;
}
.hl-hero .hl-hero-media{ position:absolute; inset:0; }
.hl-hero .hl-hero-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.hl-hero .hl-mesh{
  position:absolute; inset:0;
  background-image:
    repeating-linear-gradient(to right, rgba(250,250,247,.07) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(to bottom, rgba(250,250,247,.07) 0 1px, transparent 1px 24px);
}
.hl-hero .hl-scrim{
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(42,38,34,.72) 0%, rgba(42,38,34,.28) 46%, transparent 78%);
}
.hl-crop{ position:absolute; width:18px; height:18px; }
.hl-crop.tl{ top:20px; left:20px;  border-top:1px solid rgba(250,250,247,.5); border-left:1px solid rgba(250,250,247,.5); }
.hl-crop.tr{ top:20px; right:20px; border-top:1px solid rgba(250,250,247,.5); border-right:1px solid rgba(250,250,247,.5); }
.hl-crop.bl{ bottom:20px; left:20px;  border-bottom:1px solid rgba(250,250,247,.5); border-left:1px solid rgba(250,250,247,.5); }
.hl-crop.br{ bottom:20px; right:20px; border-bottom:1px solid rgba(250,250,247,.5); border-right:1px solid rgba(250,250,247,.5); }
.hl-hero .hl-thesis{
  position:absolute; left:48px; right:48px; bottom:104px;
  color:var(--hl-paper);
  font-size:clamp(1.375rem, 3.4vw, 2.125rem);
  font-weight:700; line-height:1.55; letter-spacing:-.01em;
  max-width:20em;
  animation:hl-fade .8s ease-out both .1s;
}
.hl-hero .hl-thesis .hl-accent{ border-bottom:3px solid var(--hl-koji); padding-bottom:2px; }
.hl-hero .hl-cap{
  position:absolute; left:48px; bottom:44px;
  color:var(--hl-paper);
  font-family: var(--hl-mono);
  font-size:.8125rem; letter-spacing:.04em;
  display:flex; align-items:center; gap:12px;
  animation:hl-fade .8s ease-out both .25s;
}
.hl-hero .hl-cap .hl-bar{ width:36px; height:1px; background:var(--hl-koji); }
@keyframes hl-fade{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }

/* ---------- ブランドブロック ---------- */
.hl-brand .hl-big{
  font-family: var(--hl-mono);
  font-size:clamp(2.5rem, 8vw, 3.5rem);
  font-weight:600; letter-spacing:-.025em; line-height:1.05;
}
.hl-brand .hl-sub{ display:flex; align-items:center; gap:14px; margin-top:14px; }
.hl-brand .hl-sub .hl-bar{ width:56px; height:1px; background:var(--hl-ink); }
.hl-brand .hl-sub span{ font-size:.9375rem; letter-spacing:.18em; color:var(--hl-sub); }
.hl-brand .hl-lead{ margin-top:36px; max-width:33em; font-size:1.0625rem; }
.hl-brand .hl-lead em{ font-style:normal; font-weight:600; border-bottom:2px solid var(--hl-koji); }

/* ---------- 記事カード（Query Loop） ---------- */
.hl-cards .wp-block-post-template{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:0;
  border-top:1px solid var(--hl-ink);
  border-left:1px solid var(--hl-grid);
  margin:0; padding:0; list-style:none;
}
.hl-cards .wp-block-post{
  border-right:1px solid var(--hl-grid);
  border-bottom:1px solid var(--hl-grid);
  padding:24px;
  display:flex; flex-direction:column; gap:14px;
  min-height:300px;
  transition:background .18s;
}
.hl-cards .wp-block-post:hover{ background:rgba(217,162,39,.05); }
.hl-cards .wp-block-post-featured-image{ margin:0; }
.hl-cards .wp-block-post-featured-image img{ width:100%; height:132px; object-fit:cover; }
.hl-cards .wp-block-post-title{ font-size:1.0625rem; font-weight:700; line-height:1.6; margin:0; }
.hl-cards .wp-block-post-date,
.hl-cards .wp-block-post-terms{
  font-family: var(--hl-mono);
  font-size:.75rem; color:var(--hl-sub); letter-spacing:.04em;
}
.hl-cards .wp-block-post-terms a{ border-bottom:1px solid transparent; }
.hl-cards .wp-block-post-terms a:hover{ border-bottom-color:var(--hl-koji); }
.hl-cards .hl-meta{ margin-top:auto; }

/* ---------- カテゴリ導線 ---------- */
.hl-cats{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:1px; background:var(--hl-grid); border:1px solid var(--hl-grid);
}
.hl-cat{
  background:var(--hl-paper); padding:32px 24px;
  display:flex; flex-direction:column; gap:14px;
  transition:background .18s;
}
.hl-cat:hover{ background:rgba(217,162,39,.05); }
.hl-cat .hl-n{ font-family:var(--hl-mono); font-size:.75rem; color:var(--hl-sub); letter-spacing:.08em; }
.hl-cat h3{ font-size:1.0625rem; font-weight:700; margin:0; }
.hl-cat p{ font-size:.875rem; color:var(--hl-sub); line-height:1.8; margin:0; }

/* ---------- About ---------- */
.hl-about{ display:grid; grid-template-columns:320px 1fr; gap:56px; align-items:start; }
.hl-about .hl-portrait img{ width:100%; aspect-ratio:4/5; object-fit:cover; }
.hl-about h2{ font-size:1.375rem; line-height:1.65; margin:14px 0 20px; }

/* ---------- 数値ストリップ ---------- */
.hl-metrics{ background:var(--hl-espresso); color:var(--hl-paper); padding:72px 0; }
.hl-metrics .hl-label{ color:rgba(250,250,247,.55); }
.hl-metrics .hl-grid{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:1px; background:rgba(250,250,247,.16); border:1px solid rgba(250,250,247,.16);
  margin-top:24px;
}
.hl-metric{ background:var(--hl-espresso); padding:28px 24px; }
.hl-metric .hl-k{
  font-family:var(--hl-mono); font-size:.6875rem; letter-spacing:.14em;
  color:rgba(250,250,247,.55); text-transform:uppercase;
}
.hl-metric .hl-v{
  font-family:var(--hl-mono); font-size:2rem; font-weight:600;
  font-variant-numeric:tabular-nums; margin-top:10px; letter-spacing:-.01em;
}
.hl-metric .hl-v small{ font-size:.875rem; font-weight:400; color:rgba(250,250,247,.6); margin-left:4px; }
.hl-metrics .hl-note{
  margin-top:20px; font-family:var(--hl-mono); font-size:.6875rem;
  letter-spacing:.08em; color:rgba(250,250,247,.5);
}

/* ---------- 2枚パネル ---------- */
.hl-duo{ display:grid; grid-template-columns:1.4fr 1fr; gap:1px; background:var(--hl-grid); border:1px solid var(--hl-grid); }
.hl-panel{ background:var(--hl-paper); padding:40px 32px; display:flex; flex-direction:column; gap:14px; }
.hl-panel h3{ font-size:1.25rem; font-weight:700; margin:0; }
.hl-panel p{ font-size:.9375rem; color:var(--hl-sub); margin:0; }
.hl-panel .hl-go{ margin-top:auto; padding-top:20px; align-self:flex-start; }
.hl-panel.hl-invert{ background:var(--hl-espresso); color:var(--hl-paper); }
.hl-panel.hl-invert p{ color:rgba(250,250,247,.72); }
.hl-panel.hl-invert .hl-label{ color:var(--hl-koji); }
.hl-panel.hl-invert .hl-go{ color:var(--hl-koji); }

/* =========================================================
   PROTOCOL — 署名要素
   ========================================================= */
.hl-protocol{
  margin:40px 0;
  border-top:1px solid var(--hl-ink);
  border-bottom:1px solid var(--hl-ink);
}
.hl-protocol .wp-block-table{ margin:0; }
.hl-protocol table{ width:100%; border-collapse:collapse; }
.hl-protocol th,
.hl-protocol td{
  padding:9px 0;
  border:0;
  border-bottom:1px solid var(--hl-grid);
  vertical-align:baseline;
  font-family: var(--hl-mono);
  font-size:.875rem;
}
.hl-protocol tr:last-child th,
.hl-protocol tr:last-child td{ border-bottom:0; }
.hl-protocol th{
  text-align:left; font-weight:500; color:var(--hl-sub);
  letter-spacing:.06em; width:7.5em;
}
.hl-protocol td{ text-align:right; font-weight:500; font-variant-numeric:tabular-nums; }
.hl-protocol td .hl-unit{ color:var(--hl-sub); font-weight:400; margin-left:2px; }
/* 見出し行：セル内を <strong> にすると群見出しになる */
.hl-protocol th strong{
  color:var(--hl-ink); font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; font-size:.6875rem;
}
.hl-protocol tr:has(th strong) th{ padding-top:20px; }
.hl-protocol tr:has(th strong) td{ border-bottom:1px solid var(--hl-ink); }

/* ---------- 記事本文 ---------- */
.hl-article .wp-block-post-title{ margin-bottom:16px; }
.hl-byline{
  display:flex; gap:16px; flex-wrap:wrap;
  font-family:var(--hl-mono); font-size:.75rem; letter-spacing:.08em; color:var(--hl-sub);
}
.hl-article .wp-block-post-content > *{ margin-bottom:1.6em; }
.hl-article ol.hl-steps{ list-style:none; counter-reset:hl-s; margin:24px 0; padding:0; }
.hl-article ol.hl-steps li{
  counter-increment:hl-s;
  display:grid; grid-template-columns:40px 1fr; gap:16px;
  padding:16px 0; border-bottom:1px solid var(--hl-grid);
  margin:0;
}
.hl-article ol.hl-steps li::before{
  content:counter(hl-s, decimal-leading-zero);
  font-family:var(--hl-mono); font-size:.8125rem; color:var(--hl-koji);
  padding-top:.35em;
}
.hl-notes{
  margin:40px 0; padding:24px;
  border-left:2px solid var(--hl-koji);
  background:rgba(217,162,39,.06);
}
.hl-notes .hl-label{ margin-bottom:10px; display:block; }
.hl-notes p{ font-size:.9375rem; margin:0; }

/* 記事末のお米部導線 */
.hl-cta{ margin-top:64px; padding:40px 32px; background:var(--hl-espresso); color:var(--hl-paper); }
.hl-cta .hl-label{ color:var(--hl-koji); }
.hl-cta h3{ font-size:1.25rem; font-weight:700; margin:12px 0 10px; }
.hl-cta p{ font-size:.9375rem; color:rgba(250,250,247,.72); max-width:32em; margin:0; }
.hl-cta .hl-go{ margin-top:24px; color:var(--hl-paper); }

/* ---------- フッター ---------- */
.hl-footer{ background:var(--hl-espresso); color:var(--hl-paper); padding:72px 0 40px; }
.hl-footer .hl-mark{ color:var(--hl-paper); }
.hl-footer .hl-sub{ margin-top:10px; font-size:.8125rem; letter-spacing:.18em; color:rgba(250,250,247,.6); }
.hl-footer .hl-top{ display:flex; justify-content:space-between; gap:48px; flex-wrap:wrap; }
.hl-footer .wp-block-navigation-item__content{ font-size:.875rem; color:rgba(250,250,247,.8); }
.hl-footer .wp-block-navigation-item__content:hover{ color:var(--hl-koji); }
.hl-social{ display:flex; gap:14px; margin-top:32px; }
.hl-social .hl-ph{
  font-family:var(--hl-mono); font-size:.6875rem; letter-spacing:.1em;
  color:rgba(250,250,247,.5); border:1px solid rgba(250,250,247,.25); padding:5px 10px;
}
.hl-copy{
  margin-top:52px; padding-top:20px;
  border-top:1px solid rgba(250,250,247,.16);
  font-family:var(--hl-mono); font-size:.6875rem; letter-spacing:.08em;
  color:rgba(250,250,247,.5);
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
}

/* ---------- ページネーション / 検索 ---------- */
.wp-block-query-pagination{
  font-family:var(--hl-mono); font-size:.8125rem; letter-spacing:.08em;
  margin-top:40px;
}
.wp-block-query-pagination .page-numbers.current{ border-bottom:2px solid var(--hl-koji); }
.wp-block-search__input{ border:1px solid var(--hl-grid); background:var(--hl-paper); padding:10px 12px; font-family:var(--hl-sans); }
.wp-block-search__button{
  background:var(--hl-ink); color:var(--hl-paper); border:0; padding:10px 18px;
  font-family:var(--hl-mono); font-size:.75rem; letter-spacing:.1em;
}

/* ---------- レスポンシブ ---------- */
@media (max-width: 900px){
  .hl-cards .wp-block-post-template{ grid-template-columns:1fr; border-left:0; }
  .hl-cats, .hl-metrics .hl-grid, .hl-duo{ grid-template-columns:1fr; }
  .hl-about{ grid-template-columns:1fr; gap:32px; }
  .hl-about .hl-portrait{ max-width:260px; }
  .hl-hero .hl-thesis{ left:24px; right:24px; bottom:76px; }
  .hl-hero .hl-cap{ left:24px; bottom:24px; font-size:.6875rem; }
  .hl-header .wp-block-navigation__responsive-container-open{ display:flex; }
}

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