/*
Theme Name: Model
Theme URI: https://example.com
Author: Shinsuke Nakano
Description: MODEL から PRODUCT へ。粘体が固まっていく過程をそのまま画面にした、余白の多い1枚もののテーマ。
Version: 1.2.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: model
Tags: one-column, custom-colors, portfolio
*/

:root{
  --paper:#ececec;
  --ink:#14140f;
  --mute:#8b8a82;
  --faint:#b7b5ad;
  --line:rgba(20,20,15,.13);
  /* 見出しは隅の小さな文字と同じ等幅にそろえる。書体は2つだけ。 */
  --grot:"IBM Plex Mono", "Zen Kaku Gothic New", monospace;
  --sans:"Zen Kaku Gothic New", -apple-system, sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, monospace;
  --pad:clamp(20px,4vw,64px);
  --ease:cubic-bezier(.22,.61,.36,1);
}
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
html{ background:var(--paper); }
body{
  margin:0; background:transparent; color:var(--ink);
  font-family:var(--sans); font-size:15px; line-height:2.1;
  letter-spacing:.02em; font-feature-settings:"palt" 1;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
h1,h2,p,figure{ margin:0; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--ink); color:var(--paper); }
:focus-visible{ outline:1px solid var(--ink); outline-offset:5px; }

.mono{
  font-family:var(--mono); font-size:11px; line-height:1.6;
  letter-spacing:.16em; text-transform:uppercase; color:var(--mute);
}
.mono--ink{ color:var(--ink); }
.shell{ padding-inline:var(--pad); }

/* ---------------- 方眼 ----------------
   MODEL のうちは気配だけ。PRODUCT に近づくほど、
   はっきりした方眼になって余白に寸法が入る。 */
.grid{ position:fixed; inset:0; z-index:-1; pointer-events:none; }
.grid__cols{
  position:absolute; inset:0 var(--pad);
  display:grid; grid-template-columns:repeat(8,1fr);
  opacity:calc(.16 + var(--g,0) * .84);
}
.grid__cols i{ border-left:1px solid var(--line); }
.grid__cols i:last-child{ border-right:1px solid var(--line); }
.grid__rows{
  position:absolute; inset:0;
  background-image:repeating-linear-gradient(to bottom, var(--line) 0 1px, transparent 1px 128px);
  opacity:calc(var(--g,0) * var(--g,0) * .85);
}
.hero,.section,.colophon{ position:relative; }

/* ---------------- hero ---------------- */
.hero{
  position:relative;
  height:100svh; min-height:560px;
  display:grid; place-items:center;
  overflow:hidden;
}
.goo{
  position:absolute; inset:0; width:100%; height:100%;
  display:block; pointer-events:none;
}
.goo circle{ fill:var(--ink); }

.corner{
  position:absolute; z-index:3;
  display:flex; gap:10px;
}
.corner--bl{ bottom:var(--pad); left:var(--pad); }

/* ---------------- 見出しと道しるべ ----------------
   四隅の極小テキストと同じ扱いで、上端に固定する。 */
.masthead{
  position:fixed; z-index:20;
  top:var(--pad); left:var(--pad); right:var(--pad);
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:20px; pointer-events:none;
}
.masthead > *{ pointer-events:auto; }
.masthead__id{ display:flex; flex-direction:column; align-items:flex-start; gap:5px; }
.masthead__id h1, .masthead__id span{ margin:0; font-weight:400; }
.masthead__right{ display:flex; flex-direction:column; align-items:flex-end; gap:9px; }

.nav{ display:flex; gap:clamp(13px,2.2vw,30px); }
.nav a{ position:relative; padding-bottom:2px; transition:color .3s var(--ease); }
.nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:right;
  transition:transform .45s var(--ease);
}
.nav a:hover, .nav a[aria-current="page"]{ color:var(--ink); }
.nav a:hover::after{ transform:scaleX(1); transform-origin:left; }
@media (max-width:640px){ .nav{ gap:12px; } }


/* MODEL→PRODUCT のつまみ（見た目上は非表示。裏の自動アニメーションは維持） */
.control{
  display:none;
  position:absolute; z-index:4;
  left:50%; transform:translateX(-50%);
  bottom:clamp(26px,7vh,72px);
  width:min(420px, 62vw);
}
.control__labels{ display:flex; justify-content:space-between; padding-bottom:12px; }
.slider{
  -webkit-appearance:none; appearance:none;
  width:100%; height:26px; background:none; cursor:ew-resize; display:block;
}
.slider::-webkit-slider-runnable-track{ height:1px; background:var(--ink); opacity:.35; }
.slider::-moz-range-track{ height:1px; background:var(--ink); opacity:.35; }
.slider::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:11px; height:11px; margin-top:-5px;
  background:var(--ink); border:0; border-radius:0;
  transition:transform .3s var(--ease);
}
.slider:hover::-webkit-slider-thumb,
.slider:active::-webkit-slider-thumb{ transform:scale(1.5); }
.slider::-moz-range-thumb{
  width:11px; height:11px; background:var(--ink); border:0; border-radius:0;
}
.control__read{ padding-top:12px; text-align:center; }

/* ---------------- 本文。余白を主役にする ---------------- */
.section{ padding-block:clamp(120px,26vh,300px); }
/* 上の一文と同じ位置・同じ幅にそろえて、中央に置く */
.stage{
  max-width:44rem; margin-inline:auto;
  text-align:center;
}
.stage > .mono{
  display:block;
  margin-bottom:clamp(16px,2.6vw,30px);
}
.stage + .stage{ margin-top:clamp(110px,22vh,260px); }
.stage__body{ max-width:none; }
.stage__title{
  font-family:var(--grot); font-weight:500;
  font-size:clamp(1.3rem,2.9vw,2.15rem);
  line-height:1.28; letter-spacing:-.03em;
  margin-bottom:clamp(20px,3vw,34px);
}
.stage__text{ max-width:34rem; margin-inline:auto; }
/* 中央揃えなので、行の長さを揃えて2行に落ち着かせる。
   最後の1行だけ短く残る「はぐれ行」を防ぐ。 */
.stage__text p,
.stage__text{ text-wrap:balance; }
.stage__text + .stage__text{ margin-top:1.7em; }
.stage__text p + p{ margin-top:1.7em; }

.pull{
  max-width:44rem; margin-inline:auto;
  font-family:var(--grot); font-weight:500;
  font-size:clamp(1.25rem,2.7vw,2rem);
  line-height:1.65; letter-spacing:-.025em;
  text-align:center; text-wrap:balance;
}
.rule{ height:1px; background:var(--line); border:0; margin:0; }

.colophon{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px;
  padding:22px var(--pad) 26px;
  border-top:1px solid var(--line);
}

/* 出現 */
.reveal{ opacity:0; transform:translateY(14px); }
.reveal.is-in{
  opacity:1; transform:none;
  transition:opacity .9s var(--ease), transform .9s var(--ease);
  transition-delay:var(--d,0ms);
}

@media (max-width:700px){
  .grid__cols{ grid-template-columns:repeat(4,1fr); }
  .corner--tr{ display:none; }
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
  .reveal{ opacity:1; transform:none; }
}

/* ---------------- WordPress ---------------- */
.screen-reader-text{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}
.skip-link{
  position:fixed; top:8px; left:8px; z-index:999;
  background:var(--ink); color:var(--paper);
  padding:8px 14px; font-family:var(--mono); font-size:11px;
  transform:translateY(-200%);
}
.skip-link:focus{ transform:none; }

.prose{ max-width:38rem; }
.prose > * + *{ margin-top:1.7em; }
.prose h2{ font-family:var(--grot); font-weight:500; font-size:1.3rem; letter-spacing:-.03em; line-height:1.45; }
.prose a{ border-bottom:1px solid var(--line); }
.prose a:hover{ border-bottom-color:var(--ink); }
.prose img{ width:100%; }
.prose figcaption{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; color:var(--mute); margin-top:9px; }

.page-title{
  font-family:var(--grot); font-weight:500;
  font-size:clamp(1.6rem,4.2vw,2.9rem); line-height:1.12; letter-spacing:-.035em;
  margin-bottom:clamp(28px,5vw,52px);
}
.page-body{ padding-top:clamp(150px,22vh,240px); padding-bottom:clamp(80px,14vh,180px); }
.narrow{ max-width:74rem; margin-inline:auto; }