:root {
  --ink:#1c2230;
  --muted:#6d7481;
  --paper:#f5efe4;
  --panel:#fffaf2;
  --line:#d8cdbd;
  --accent:#b24b2b;
  --accent-2:#263f50;
  --soft:#efe4d5;
  --ok:#335c4b;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--ink);
  background:
    radial-gradient(circle at 20% 0%, rgba(255,255,255,.65), transparent 34rem),
    linear-gradient(180deg,#efe7da 0%,#f8f3ea 34%,#efe8de 100%);
  font-family: ui-serif, Georgia, Cambria, "Times New Roman", serif;
  line-height:1.72;
}
body:before{
  content:"";
  position:fixed; inset:0; pointer-events:none; opacity:.16;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
}
.shell{width:min(1120px,calc(100% - 28px));margin:0 auto;padding:34px 0 70px}
.hero{padding:30px 0 26px;border-bottom:1px solid var(--line)}
.eyebrow{font:700 12px/1.4 ui-sans-serif,system-ui,sans-serif;letter-spacing:.16em;color:var(--accent-2);margin-bottom:24px}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(280px,.72fr);gap:28px;align-items:end}
.kicker{font:600 15px/1.4 ui-sans-serif,system-ui,sans-serif;color:var(--accent);margin:0 0 10px}
h1{font-size:clamp(64px,10vw,136px);line-height:.85;letter-spacing:-.065em;margin:0 0 26px;font-weight:700}
.lead{font-size:clamp(24px,3.2vw,42px);line-height:1.16;max-width:900px;margin:0 0 24px}
.intro{max-width:780px;font-size:18px;color:#353b47}
.actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}.pill{border:1px solid var(--line);padding:7px 10px;border-radius:999px;font:700 11px/1 ui-sans-serif,system-ui,sans-serif;letter-spacing:.08em;background:rgba(255,255,255,.35)}.pill.live{background:var(--ok);color:white;border-color:var(--ok)}
.note-card{background:var(--accent-2);color:#f9f1e5;padding:26px;border-radius:2px;box-shadow:0 18px 42px rgba(26,36,44,.12)}
.fox{font-size:46px;margin-bottom:22px}.quote{font-size:20px;line-height:1.5;margin:0 0 18px}.sig{font:600 12px/1.5 ui-sans-serif,system-ui,sans-serif;opacity:.72;margin:0}
.panel{background:rgba(255,250,242,.72);border:1px solid var(--line);padding:34px;margin-top:22px;backdrop-filter:blur(1.5px)}
.section-no{font:800 11px/1 ui-sans-serif,system-ui,sans-serif;letter-spacing:.18em;color:var(--accent);margin:0 0 16px}
h2{font-size:clamp(30px,4vw,48px);line-height:1.08;margin:0 0 20px;letter-spacing:-.025em}
.panel p{font-size:18px;margin:0 0 18px}.panel p:last-child{margin-bottom:0}
.statement{margin-top:24px;padding:18px 20px;border-left:4px solid var(--accent);background:var(--soft);font-size:19px;font-weight:700}.statement.soft{font-weight:600;border-color:var(--accent-2)}
.timeline{list-style:none;padding:0;margin:8px 0 0;border-top:1px solid var(--line)}.timeline li{display:grid;grid-template-columns:130px 1fr;gap:18px;padding:16px 0;border-bottom:1px solid var(--line);font-size:17px}.timeline strong{font-family:ui-sans-serif,system-ui,sans-serif;color:var(--accent-2)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:22px}.split .panel{margin-top:22px}.panel ul{margin:0;padding-left:20px}.panel li{margin:9px 0;font-size:17px}.emphasis{font-weight:700;color:var(--accent-2)}
.rule-grid,.status-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:26px}.status-grid{grid-template-columns:repeat(4,1fr)}.rule-grid div,.status-grid div{border:1px solid var(--line);padding:16px;background:rgba(255,255,255,.36)}.rule-grid span,.status-grid span{display:block;font:700 11px/1.35 ui-sans-serif,system-ui,sans-serif;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:8px}.rule-grid strong,.status-grid strong{font-size:16px;line-height:1.35}.status .closing{margin-top:24px;font-weight:700}
footer{display:flex;justify-content:space-between;gap:20px;padding:28px 4px 0;font:600 12px/1.5 ui-sans-serif,system-ui,sans-serif;color:var(--muted)}
@media (max-width:820px){.hero-grid,.split{grid-template-columns:1fr}.note-card{margin-top:10px}.timeline li{grid-template-columns:1fr;gap:5px}.rule-grid,.status-grid{grid-template-columns:1fr 1fr}h1{font-size:clamp(58px,18vw,100px)}.panel{padding:26px}}
@media (max-width:520px){.shell{width:min(100% - 18px,1120px);padding-top:20px}.panel{padding:22px 18px}.rule-grid,.status-grid{grid-template-columns:1fr}.lead{font-size:25px}.intro,.panel p{font-size:16px}footer{flex-direction:column}}


/* v0.2 — project origin */
.site-nav{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:0 0 22px;margin-bottom:8px;border-bottom:1px solid var(--line);
  font-family:ui-sans-serif,system-ui,sans-serif;
}
.site-nav a{color:var(--ink);text-decoration:none}
.site-nav .brand{font-weight:850;letter-spacing:-.02em}
.nav-links{display:flex;gap:18px;flex-wrap:wrap}
.nav-links a{font-size:12px;font-weight:750;letter-spacing:.04em;color:var(--muted);padding:5px 0;border-bottom:2px solid transparent}
.nav-links a[aria-current="page"]{color:var(--accent-2);border-bottom-color:var(--accent)}
.text-link{
  display:inline-flex;align-items:center;border:1px solid var(--line);background:rgba(255,255,255,.42);
  color:var(--accent-2);text-decoration:none;padding:8px 12px;border-radius:999px;
  font:750 11px/1 ui-sans-serif,system-ui,sans-serif;letter-spacing:.055em;
}
.origin-hero{padding:38px 0 30px;border-bottom:1px solid var(--line)}
.origin-title{font-size:clamp(54px,9vw,116px);line-height:.9;max-width:980px}
.origin-lead{font-size:clamp(22px,3vw,36px);line-height:1.25;max-width:900px;margin:0 0 24px}
.origin-note{
  max-width:900px;border-left:4px solid var(--accent);padding:18px 20px;background:var(--soft);
  font-size:18px;font-weight:650;
}
.pullquote{
  margin:28px 0;padding:24px 26px;border-left:4px solid var(--accent-2);
  background:rgba(38,63,80,.07);font-size:clamp(21px,2.5vw,31px);line-height:1.38;
  font-weight:700;letter-spacing:-.015em;
}
.pullquote.final{border-left-color:var(--accent);background:var(--soft)}
.rule-grid.two{grid-template-columns:repeat(2,1fr)}
.rule-grid p{font-size:15px;line-height:1.55;color:var(--muted);margin:10px 0 0}
.origin-ending{margin-top:32px;border-width:2px}
.button-link{
  display:inline-block;background:var(--accent-2);color:#fff;text-decoration:none;
  padding:11px 15px;font:800 12px/1 ui-sans-serif,system-ui,sans-serif;letter-spacing:.04em
}
@media (max-width:700px){
  .site-nav{align-items:flex-start;flex-direction:column}
  .nav-links{gap:12px}
  .rule-grid.two{grid-template-columns:1fr}
}

.rule-grid.three{grid-template-columns:repeat(3,1fr)}
@media (max-width:800px){
  .rule-grid.three{grid-template-columns:1fr}
}


/* v0.4 — interview orientation + opening window */
.quiet-note{
  color:var(--muted);
  font-size:14px !important;
  font-family:ui-sans-serif,system-ui,sans-serif;
}
.clock-page{
  min-height:100vh;
  background:#f4eee4;
}
.clock-page:before{opacity:.08}
.clock-shell{
  min-height:100vh;
  width:min(1200px,calc(100% - 36px));
  margin:0 auto;
  display:grid;
  grid-template-rows:auto 1fr auto;
  padding:28px 0 26px;
}
.clock-back{
  justify-self:start;
  color:var(--muted);
  text-decoration:none;
  font:750 11px/1 ui-sans-serif,system-ui,sans-serif;
  letter-spacing:.06em;
}
.clock-stage{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:40px 0;
}
.clock-eyebrow{
  margin:0 0 22px;
  font:800 12px/1 ui-sans-serif,system-ui,sans-serif;
  letter-spacing:.22em;
  color:var(--accent);
}
.clock-number{
  margin:0;
  font-size:clamp(88px,18vw,260px);
  line-height:.78;
  letter-spacing:-.075em;
}
.clock-caption{
  max-width:520px;
  margin:34px 0 0;
  color:var(--muted);
  font:650 13px/1.6 ui-sans-serif,system-ui,sans-serif;
}
.clock-foot{
  margin:0;
  text-align:center;
  color:var(--muted);
  font:650 11px/1.5 ui-sans-serif,system-ui,sans-serif;
  letter-spacing:.04em;
}


/* v0.5 — Haru Café core principle */
.core-principle{
  margin:28px 0;
  padding:clamp(34px,6vw,72px) clamp(22px,6vw,76px);
  border:1px solid var(--line);
  border-radius:28px;
  text-align:center;
  background:rgba(255,255,255,.34);
}
.core-label{
  margin:0 0 20px;
  color:var(--accent);
  font:800 11px/1 ui-sans-serif,system-ui,sans-serif;
  letter-spacing:.18em;
}
.core-question{
  margin:0;
  font-size:clamp(28px,4.4vw,58px);
  line-height:1.08;
  letter-spacing:-.035em;
  font-weight:650;
}
.core-yes{
  margin:18px 0 0;
  font-size:clamp(18px,2.2vw,28px);
  line-height:1.35;
  font-weight:800;
}
.interview-core-question{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.interview-core-question strong{
  font-style:normal;
  font-weight:850;
}

.interview-core-question em{
  font-style:normal;
  font-weight:700;
  color:var(--muted);
}