/* ============================================================
   Habits to Habitats — shared stylesheet
   One system, seven pages. No build step: plain CSS custom
   properties, no preprocessor.
   ============================================================ */

:root{
  --paper:#F2EEE4;
  --paper-deep:#E8E2D3;
  --paper-card:#F8F5EC;
  --ink:#2B2620;
  --ink-soft:#5C5548;
  --clay:#B5502F;
  --clay-soft:#C97050;
  --ochre:#8C6A2F;
  --line:#C9C0AC;
  --line-soft:rgba(43,38,32,0.1);

  --serif:'Fraunces', serif;
  --serif-body:'Newsreader', serif;
  --mono:'JetBrains Mono', monospace;

  --max:1120px;
}

*{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--serif-body);
  font-size:1.08rem;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; }
  html{ scroll-behavior:auto; }
}

img{ max-width:100%; display:block; }
a{ color:inherit; }
:focus-visible{ outline:2px solid var(--clay); outline-offset:3px; }

.wrap{ max-width:var(--max); margin:0 auto; padding:0 2rem; }

/* ---------- texture: faint field-notebook grid ---------- */
.grid-bg{
  position:absolute; inset:0;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:38px 38px;
  opacity:0.15;
  pointer-events:none;
}

/* ---------- type ---------- */

h1, h2, h3, h4, .display{
  font-family:var(--serif);
  font-weight:600;
  line-height:1.12;
  letter-spacing:-0.01em;
  margin:0 0 0.6em;
  color:var(--ink);
}

h1{ font-size:clamp(2.3rem, 5.6vw, 3.9rem); }
h2{ font-size:clamp(1.7rem, 3.4vw, 2.5rem); max-width:20ch; }
h3{ font-size:clamp(1.15rem, 2vw, 1.4rem); }

p{ margin:0 0 1.2em; max-width:62ch; }

.lede{ font-size:1.2rem; color:var(--ink-soft); max-width:52ch; }

.mono-label{
  font-family:var(--mono);
  font-size:0.74rem;
  letter-spacing:0.1em;
  color:var(--ink-soft);
  text-transform:uppercase;
}

/* ---------- label-margin eyebrow ---------- */

.label-margin{
  font-family:var(--mono);
  font-size:0.76rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--ochre);
  margin-bottom:1.3rem;
  display:flex;
  align-items:center;
  gap:0.6rem;
}
.label-margin::before{ content:""; width:26px; height:1px; background:var(--ochre); }
.label-margin.on-dark{ color:#D9B978; }
.label-margin.on-dark::before{ background:#D9B978; }

/* ---------- nav ---------- */

.site-nav{
  position:sticky; top:0; z-index:50;
  background:rgba(242,238,228,0.92);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
}
.site-nav .wrap{
  display:flex; align-items:center; justify-content:space-between;
  height:4.4rem;
}
.brand{
  font-family:var(--mono); font-size:0.82rem; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--ink-soft);
  text-decoration:none; display:flex; align-items:center; gap:0.6rem;
}
.brand .mark{
  width:20px; height:20px; border-radius:50%; border:1.5px solid var(--ink);
  position:relative; flex:none;
}
.brand .mark::after{
  content:""; position:absolute; left:50%; top:50%;
  width:1px; height:8px; background:var(--clay);
  transform:translate(-50%,-88%);
}
.brand b{ color:var(--ink); font-weight:600; }

.nav-toggle{
  display:none; background:none; border:1px solid var(--line); border-radius:3px;
  width:2.3rem; height:2.3rem; font-family:var(--mono); cursor:pointer; color:var(--ink);
}

.nav-links{
  display:flex; gap:1.9rem; list-style:none; margin:0; padding:0;
}
.nav-links a{
  text-decoration:none; font-family:var(--mono); font-size:0.78rem;
  letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-soft);
  padding-bottom:3px; border-bottom:1px solid transparent;
  transition:color .15s ease, border-color .15s ease;
}
.nav-links a:hover, .nav-links a[aria-current="page"]{
  color:var(--ink); border-color:var(--clay);
}

@media (max-width:760px){
  .nav-toggle{ display:block; }
  .nav-links{
    position:absolute; top:4.4rem; left:0; right:0;
    background:var(--paper); border-bottom:1px solid var(--line);
    flex-direction:column; gap:0; padding:0.4rem 2rem 1.2rem; display:none;
  }
  .nav-links.open{ display:flex; }
  .nav-links li{ padding:0.7rem 0; border-bottom:1px solid var(--line-soft); }
}

/* ---------- buttons ---------- */

.btn{
  display:inline-flex; align-items:center; gap:0.6rem;
  font-family:var(--mono); font-size:0.8rem; letter-spacing:0.06em;
  text-transform:uppercase; text-decoration:none;
  padding:0.85rem 1.5rem; border-radius:2px; border:1px solid currentColor;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
}
.btn-primary{ background:var(--ink); border-color:var(--ink); color:var(--paper); }
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 6px 0 var(--clay); }
.btn-ghost{ background:transparent; border-color:var(--line); color:var(--ink-soft); }
.btn-ghost:hover{ border-color:var(--ink); color:var(--ink); }
.btn-outline{ border-color:var(--ink); color:var(--ink); }
.btn-outline:hover{ background:var(--ink); color:var(--paper); }
.btn-row{ display:flex; gap:1rem; flex-wrap:wrap; margin-top:1.8rem; }

/* ---------- sections ---------- */

section{ padding:5.5rem 0; position:relative; }
.section-alt{ background:var(--paper-deep); }
.section-ink{ background:var(--ink); color:var(--paper); }
.section-ink p, .section-ink .lede{ color:#C9C2B2; }
.section-ink h2{ color:var(--paper); }

.rule{ border:none; border-top:1px solid var(--line); margin:0; }

.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:3.5rem; align-items:start; }
@media (max-width:860px){ .grid-2{ grid-template-columns:1fr; } }

/* ---------- hero (generic, per-page) ---------- */

.page-hero{
  position:relative; overflow:hidden;
  padding:4.2rem 0 3.6rem;
  border-bottom:1px solid var(--line);
}
.page-hero .wrap{ position:relative; z-index:2; }
.page-hero h1{ max-width:16ch; }

/* ---------- reveal on scroll ---------- */

.reveal{ opacity:0; transform:translateY(20px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in{ opacity:1; transform:none; }

/* ---------- cards ---------- */

.card-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  gap:1px; background:var(--line); border:1px solid var(--line);
  margin-top:2.6rem;
}
.card{
  background:var(--paper); padding:2.1rem; transition:background .15s ease;
}
.card:hover{ background:var(--paper-card); }
.card .mono-label{ display:block; margin-bottom:0.9rem; }
.card h3{ margin-bottom:0.6rem; }
.card .field-q{
  font-family:var(--serif); font-style:italic; font-size:1.02rem;
  color:var(--clay); margin-bottom:1rem;
}
.card ul{ list-style:none; margin:1rem 0 0; padding:0; border-top:1px solid var(--line-soft); }
.card li{ padding:0.55rem 0; border-bottom:1px solid var(--line-soft); font-family:var(--mono); font-size:0.83rem; }
.card li a{ text-decoration:none; }
.card li a:hover{ color:var(--clay); }
.card p{ font-size:0.98rem; color:var(--ink-soft); }

.placeholder-tag{
  display:inline-block; font-family:var(--mono); font-size:0.68rem;
  letter-spacing:0.06em; text-transform:uppercase; color:var(--ink-soft);
  border:1px dashed var(--line); padding:0.2rem 0.55rem; margin-top:0.9rem;
}

/* ---------- instrument: linear track (sequences) ---------- */

.track-wrap{ margin:2.6rem 0 0; }
.track{
  position:relative; display:flex; align-items:center; justify-content:space-between;
  padding:0 1.2rem; margin-bottom:0;
}
.track::before{
  content:""; position:absolute; left:1.2rem; right:1.2rem; top:50%;
  height:1px; background:var(--line); z-index:0;
}
.track-node{
  position:relative; z-index:1; display:flex; flex-direction:column; align-items:center;
  gap:0.7rem; background:none; border:none; cursor:pointer; font-family:var(--mono);
  padding:0.5rem; flex:1;
}
.track-node .dot{
  width:46px; height:46px; border-radius:50%; background:var(--paper);
  border:1.5px solid var(--ink); display:flex; align-items:center; justify-content:center;
  font-family:var(--serif); font-weight:700; font-size:0.95rem; color:var(--ink);
  transition:background .2s, color .2s, border-color .2s, transform .2s;
}
.track-node:hover .dot, .track-node:focus-visible .dot{ transform:scale(1.08); }
.track-node[aria-pressed="true"] .dot{ background:var(--clay); border-color:var(--clay); color:var(--paper); }
.track-node .label{
  font-size:0.72rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-soft);
  text-align:center; max-width:9ch;
}
.track-node[aria-pressed="true"] .label{ color:var(--clay); font-weight:600; }
.track-node.is-leverage .dot{ border-color:var(--clay); }

.track-panel{
  margin-top:2rem; padding:1.7rem 2rem; background:var(--paper-card);
  border-left:2px solid var(--clay); min-height:96px;
}
.track-panel .panel-name{ font-family:var(--serif); font-weight:600; font-size:1.25rem; margin-bottom:0.3rem; }
.track-panel .panel-desc{ font-size:0.98rem; color:var(--ink-soft); margin:0; max-width:60ch; }
.track-hint{
  font-family:var(--mono); font-size:0.78rem; color:var(--ink-soft); margin-top:1.2rem;
}
.track-hint b{ color:var(--clay); }

@media (max-width:720px){
  .track{ flex-direction:column; align-items:stretch; gap:1.6rem; padding:0; }
  .track::before{ left:22px; right:auto; top:1.2rem; bottom:1.2rem; width:1px; height:auto; background:var(--line); }
  .track-node{ flex-direction:row; justify-content:flex-start; }
  .track-node .label{ text-align:left; max-width:none; }
}

/* ---------- instrument: bezel (non-sequential composites) ---------- */

.bezel-wrap{ display:flex; justify-content:center; margin:2.6rem 0 0.8rem; }
.bezel{
  position:relative; width:min(440px, 88vw); aspect-ratio:1/1;
  border-radius:50%; border:1.5px solid var(--ink);
  display:flex; align-items:center; justify-content:center;
}
.bezel::before{
  content:""; position:absolute; inset:14px; border-radius:50%; border:1px solid var(--line);
}
.bezel-centre{
  font-family:var(--mono); font-size:0.72rem; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--ink-soft); text-align:center; max-width:150px; line-height:1.5;
}
.bezel-centre .word{
  font-family:var(--serif); font-size:1rem; color:var(--ink); font-weight:600;
  letter-spacing:0.02em; margin-bottom:0.4rem; display:block; text-transform:none;
}
.bezel-tick{
  position:absolute; width:52px; height:52px; margin:-26px 0 0 -26px;
  display:flex; align-items:center; justify-content:center; border-radius:50%;
  background:var(--paper); border:1.5px solid var(--ink); font-family:var(--serif);
  font-weight:700; font-size:0.95rem; color:var(--ink); cursor:pointer;
  transition:background .2s, color .2s, transform .2s, border-color .2s; user-select:none;
}
.bezel-tick:hover, .bezel-tick:focus-visible{ transform:scale(1.08); }
.bezel-tick[aria-pressed="true"]{ background:var(--clay); border-color:var(--clay); color:var(--paper); }

/* ---------- maps: framework block wrapper ---------- */

.map-block{ padding:4.2rem 0; border-bottom:1px solid var(--line); }
.map-block:last-of-type{ border-bottom:none; }
.map-block .map-num{ font-family:var(--mono); font-size:0.8rem; color:var(--clay); }
.map-block .map-links{ margin-top:1rem; font-size:0.92rem; color:var(--ink-soft); }
.map-block .map-links a{ color:var(--clay); text-decoration:none; }
.map-block .map-links a:hover{ text-decoration:underline; }

/* ---------- home hero ---------- */

.home-hero{ padding:4.6rem 0 5rem; }

/* visually hidden but accessible — keeps a real page <h1> for a11y/SEO
   while the hero-cycle below carries the visible, rotating headline */
.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;
}

/* ---------- hero headline (crossfade cycle) ---------- */

.hero-cycle{
  display:grid;
  margin:0 0 1.4rem;
  max-width:56ch;
}
.hero-cycle-item{
  grid-area:1 / 1;
  font-family:var(--serif);
  font-weight:500;
  font-variation-settings:'opsz' 40;
  font-size:clamp(1.5rem, 3.6vw, 2.5rem);
  line-height:1.2;
  color:var(--ink-soft);
  margin:0;
  opacity:0;
  transition:opacity 0.7s ease;
  pointer-events:none;
}
.hero-cycle-item.is-active{
  opacity:1;
  pointer-events:auto;
}

.hero-subhead{
  color:var(--ink-soft);
  font-weight:600;
  font-size:clamp(1.05rem, 1.8vw, 1.25rem);
  line-height:1.4;
  margin:0 0 2.2rem;
  max-width:52ch;
}

@media (prefers-reduced-motion: reduce){
  .hero-cycle-item{ transition:none; }
}

/* ---------- pillars (three systems) ---------- */

.pillar-icon{ width:2.5rem; height:2.5rem; stroke:var(--ink); fill:none; stroke-width:1.4; margin-bottom:1rem; }

/* ---------- panel: featured work + live questions ---------- */

.panel{ border:1px solid var(--line); background:var(--paper-deep); }
.panel .wrap{ display:grid; grid-template-columns:1.15fr 1fr; gap:0; padding:0; }
@media (max-width:900px){ .panel .wrap{ grid-template-columns:1fr; } }
.panel-col{ padding:3.2rem 2.6rem; }
.panel-col + .panel-col{ border-left:1px solid var(--line); }
@media (max-width:900px){ .panel-col + .panel-col{ border-left:none; border-top:1px solid var(--line); } }

.book-mock{ position:relative; width:180px; margin:1.6rem 0; }
.book-mock .page-behind{ position:absolute; inset:6px -6px -6px 6px; background:var(--paper); border:1px solid var(--line); }
.book-mock .cover{
  position:relative; background:var(--paper-card); border:1px solid var(--line);
  box-shadow:8px 10px 22px rgba(43,38,32,0.16); padding:1.6rem 1.2rem; text-align:center;
}
.book-mock h4{ font-family:var(--serif); font-size:1.3rem; font-weight:600; margin:0; line-height:1.1; }
.book-mock .arrow{ color:var(--clay); font-size:1.1rem; margin:0.2rem 0; }
.book-mock .tagline{ font-family:var(--serif); font-style:italic; font-size:0.72rem; color:var(--ink-soft); margin:0.8rem 0 1.3rem; line-height:1.3; }
.book-mock .author{ font-family:var(--mono); font-size:0.6rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-soft); }
.book-mock .mark{ width:26px; height:26px; border-radius:50%; border:1.3px solid var(--clay); margin:0.7rem auto 0; position:relative; }
.book-mock .mark::after{ content:""; position:absolute; left:50%; top:50%; width:1px; height:10px; background:var(--clay); transform:translate(-50%,-88%); }

.inquiry-list{ list-style:none; margin:1.6rem 0 0; padding:0; }
.inquiry-item{ display:flex; gap:1.1rem; padding:1.15rem 0; border-bottom:1px solid var(--line-soft); }
.inquiry-item:last-child{ border-bottom:none; }
.inquiry-num{ font-family:var(--mono); font-size:0.85rem; color:var(--clay); padding-top:0.15rem; }
.inquiry-item h4{ font-family:var(--serif); font-size:1.05rem; font-weight:600; margin:0 0 0.3rem; }
.inquiry-item p{ margin:0; font-size:0.92rem; color:var(--ink-soft); }

/* ---------- maps feature (home, LISTEN promoted) ---------- */

.map-feature{
  border:1.5px solid var(--clay);
  background:var(--paper-card);
  padding:2.6rem 2.4rem;
  margin:2.4rem 0 2.8rem;
}
.map-feature .map-feature-diagram{
  font-family:var(--mono); font-size:1.3rem; letter-spacing:0.14em; color:var(--clay);
  margin-bottom:1rem;
}
.map-feature h3{ margin-bottom:0.6rem; font-size:1.4rem; }
.map-feature p{ color:var(--ink-soft); max-width:56ch; }

/* ---------- maps teaser (home) ---------- */

.maps-teaser{ display:grid; grid-template-columns:repeat(4, 1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:2.4rem; }
@media (max-width:800px){ .maps-teaser{ grid-template-columns:1fr 1fr; } }
.maps-teaser-item{ background:var(--paper); padding:1.6rem; }
.maps-teaser-item .map-diagram{
  font-family:var(--mono); font-size:0.7rem; color:var(--ink-soft);
  min-height:64px; display:flex; align-items:center; text-align:left; line-height:1.5;
}
.maps-teaser-item h4{ font-family:var(--serif); font-size:1rem; font-weight:600; margin:0.9rem 0 0.3rem; }
.maps-teaser-item p{ font-size:0.85rem; color:var(--ink-soft); margin:0; }

/* ---------- writing rows (essays/recent writing) ---------- */

.writing-list{ margin-top:2rem; border-top:1px solid var(--line); }
.writing-row{
  display:grid; grid-template-columns:1.3fr 2fr auto; gap:1.2rem; align-items:baseline;
  padding:1.3rem 0; border-bottom:1px solid var(--line-soft); text-decoration:none; color:inherit;
}
.writing-row:hover h4{ color:var(--clay); }
.writing-row h4{ font-family:var(--serif); font-weight:600; font-size:1.02rem; margin:0; }
.writing-row .wt-premise{ font-size:0.9rem; color:var(--ink-soft); }
.writing-row .wt-meta{ font-family:var(--mono); font-size:0.72rem; color:var(--ink-soft); white-space:nowrap; text-align:right; }
@media (max-width:760px){
  .writing-row{ grid-template-columns:1fr; gap:0.3rem; }
  .writing-row .wt-meta{ text-align:left; }
}

.register-heading{ margin-top:3.5rem; padding-top:0.4rem; }
.register-heading:first-of-type{ margin-top:0; }

/* ---------- architecture list (book chapters) ---------- */

.arch-list{ list-style:none; margin:2.6rem 0 0; padding:0; border-top:1px solid var(--line); }
.arch-item{ display:grid; grid-template-columns:3.4rem 1fr; gap:1.5rem; padding:1.6rem 0; border-bottom:1px solid var(--line); }
.arch-num{ font-family:var(--mono); font-size:0.85rem; color:var(--clay); padding-top:0.2rem; }
.arch-item h3{ margin-bottom:0.3rem; }
.arch-item p{ margin:0; color:var(--ink-soft); font-size:0.98rem; }
.arch-item.is-synthesis{ background:var(--paper-card); margin:0 -1.2rem; padding-left:1.2rem; padding-right:1.2rem; }
.arch-item.is-synthesis .arch-num, .arch-item.is-synthesis h3{ color:var(--clay); }

/* ---------- footer: nav links + tagline, nothing more ---------- */

.site-footer{ border-top:1px solid var(--line); padding:3.4rem 0 2.6rem; }
.footer-top{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap;
  gap:1.4rem; padding-bottom:2rem;
}
.footer-mark{ width:20px; height:20px; border-radius:50%; border:1.5px solid var(--ink-soft); position:relative; flex:none; }
.footer-mark::after{ content:""; position:absolute; left:50%; top:50%; width:1px; height:8px; background:var(--clay); transform:translate(-50%,-88%); }
.footer-nav{ display:flex; gap:1.6rem; flex-wrap:wrap; }
.footer-nav a{ text-decoration:none; font-family:var(--mono); font-size:0.78rem; letter-spacing:0.06em; text-transform:uppercase; color:var(--ink-soft); }
.footer-nav a:hover{ color:var(--clay); }
.closing-line{
  font-family:var(--serif); font-style:italic; font-size:1rem; color:var(--ink-soft);
  text-align:center; padding-top:2rem; border-top:1px solid var(--line);
}

/* ---------- about strip (home / about page throughline) ---------- */

.about-strip p{ max-width:60ch; }

/* ---------- pull-quote / governing line ---------- */

.quote-section blockquote{
  font-family:var(--serif); font-weight:500; font-size:clamp(1.6rem, 3.6vw, 2.6rem);
  line-height:1.32; text-align:center; margin:0 auto; max-width:840px;
}
.quote-section blockquote .accent{ color:var(--clay-soft); }
.quote-attr{
  text-align:center; margin-top:1.8rem; font-family:var(--mono); font-size:0.78rem;
  letter-spacing:0.1em; text-transform:uppercase; color:#B7AE9C;
}

/* ---------- misc: advisory soft line ---------- */

.advisory-line{
  font-family:var(--serif-body); font-style:italic; color:var(--ink-soft);
  border-left:2px solid var(--clay); padding-left:1.1rem; margin-top:1.6rem; max-width:48ch;
}