/* ═══════════════════════════════════════════════════════════════════════
   chautari — the drawings, and the pages built out of source files

   Loaded only by /body-house and /process. Everything else on the site
   needs none of it.

   ── The token bridge ──────────────────────────────────────────────────
   The twenty sheets are lifted out of the Claude Design exports verbatim —
   every path, every dimension string, every number — by
   tools/build-pages.mjs. They were authored against that system's tokens,
   and rather than rewrite a thousand inline styles (and risk touching a
   drawing while doing it), the tokens are simply re-declared here, scoped
   to .sheet, in this site's palette. The markup is untouched and stays
   diffable against the export; only what the names mean changes.

   So: warm neutrals off the same ground as the rest of the site, gold in
   place of the system's orange accent, moss in place of its green, and
   the two typefaces this site already loads. Radii come down from 28px
   pills to the 2–3px this site uses everywhere.
   ═══════════════════════════════════════════════════════════════════════ */

.sheet{
  /* ground and ink */
  --color-bg:#f3ead6;
  --color-surface:#f6efdf;
  --color-text:#1e1810;
  --color-divider:rgba(36,29,21,.16);

  /* neutrals — near-white warm, down to the site's ink */
  --color-neutral-100:#fbf6ea;
  --color-neutral-200:#f3ecdb;
  --color-neutral-300:#e2d7be;
  --color-neutral-400:#c7b99b;
  --color-neutral-500:#a6987b;
  --color-neutral-600:#847960;
  --color-neutral-700:#574c3c;
  --color-neutral-800:#3a3226;
  --color-neutral-900:#241d15;

  /* accent — the site's gold */
  --color-accent:#9d6a12;
  --color-accent-100:#fdf6e6;
  --color-accent-200:#f2e2c0;
  --color-accent-300:#e5cb92;
  --color-accent-400:#cfa24d;
  --color-accent-500:#bd8a2a;
  --color-accent-600:#a9761a;
  --color-accent-700:#9d6a12;
  --color-accent-800:#7a5210;
  --color-accent-900:#54390c;

  /* second accent — the site's moss */
  --color-accent-2:#4f6b41;
  --color-accent-2-100:#eef2e9;
  --color-accent-2-200:#dbe4d2;
  --color-accent-2-300:#c2d0b5;
  --color-accent-2-400:#9db08e;
  --color-accent-2-500:#7d9370;
  --color-accent-2-600:#637a56;
  --color-accent-2-700:#4f6b41;
  --color-accent-2-800:#3a4f30;
  --color-accent-2-900:#26331f;

  --font-heading:var(--serif);
  --font-body:var(--sans);

  --radius-sm:2px;
  --radius-md:2px;
  --radius-lg:3px;

  --shadow-sm:none;
  --shadow-md:0 3px 10px rgba(36,29,21,.1);
  --shadow-lg:0 12px 32px rgba(36,29,21,.16);
}

/* ── the sheet as a plate ──────────────────────────────────────────────
   The generator strips the section's own background and padding, so the
   drawing arrives as a plate like everything else on this site rather than
   as an embedded document sitting on top of it.                          */
.sheet{
  margin:0 auto clamp(1.1rem,2.2vw,2rem);
  max-width:76rem;
  padding:clamp(1.5rem,2.6vw,2.4rem) clamp(1.1rem,2.4vw,2.2rem) clamp(1.4rem,2.2vw,2rem);
  color:var(--color-text);
  font-family:var(--sans);
  scroll-margin-top:5.5rem;
}
.sheet.superseded{opacity:.86}
.sheet.superseded::before{
  content:"Superseded";
  position:absolute;top:0;right:0;z-index:2;
  padding:.42rem .8rem;
  font-size:.55rem;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(36,29,21,.5);
  border-left:1px solid var(--line);border-bottom:1px solid var(--line);
}

/* the sheets set their own type sizes in px, which is right for a drawing
   sheet — these only stop the site's own rules from fighting them */
.sheet h2{font-family:var(--serif);font-weight:300;letter-spacing:-.008em;line-height:1.1}
.sheet h3,.sheet h4{font-family:var(--serif);font-weight:400}
.sheet p{font-size:inherit;line-height:inherit;color:inherit;margin:0}
.sheet p + p{margin-top:0}
.sheet strong{font-weight:400;color:var(--color-text)}
.sheet svg text{font-family:var(--sans)}
.sheet svg{max-width:100%}

/* ── keeping a drawing readable ────────────────────────────────────────
   A drawing that shrinks to the width of a phone is not a drawing, it is a
   picture of one. So every svg sits in a frame that scrolls sideways below
   about a tablet, with the drawing held at a width its annotation is still
   legible at. On a wide screen the frame does nothing at all.

   sheets.js adds a zoom control on top of this; without JavaScript the
   frame still pans, which is the part that matters.                       */
.sheet .draw{
  position:relative;
  overflow-x:auto;overflow-y:hidden;
  overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
  scrollbar-color:rgba(157,106,18,.4) transparent;
}
.sheet .draw > svg{display:block;width:100%;height:auto}
.sheet .draw::-webkit-scrollbar{height:7px}
.sheet .draw::-webkit-scrollbar-thumb{
  background:rgba(157,106,18,.34);border-radius:4px;
}
.sheet .draw::-webkit-scrollbar-track{background:rgba(36,29,21,.06)}

/* the !important is not laziness: the width being overridden is an inline
   style on the exported svg, and the alternative is editing the drawing */
@media (max-width:1000px){
  .sheet .draw > svg{
    width:var(--draw-w,1000px)!important;
    min-width:var(--draw-w,1000px);
    max-width:none;
  }
}
.sheet .draw[data-zoom="2"] > svg{width:calc(var(--draw-w,1000px) * 1.6)!important;max-width:none}
.sheet .draw[data-zoom="3"] > svg{width:calc(var(--draw-w,1000px) * 2.4)!important;max-width:none}

/* the exported sheets lay details out in fixed multi-column grids, which
   is right on a sheet of A3 and wrong on a phone */
@media (max-width:820px){
  .sheet [style*="grid-template-columns"]{grid-template-columns:1fr!important}
}

.draw-bar{
  display:flex;align-items:center;justify-content:flex-end;gap:.4rem;
  margin:.5rem 0 0;
}
.draw-hint{
  margin-right:auto;
  font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-faint);
}
.draw-bar button{
  font-family:var(--sans);font-weight:300;
  font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(36,29,21,.6);background:transparent;cursor:pointer;
  border:1px solid transparent;border-radius:2px;
  padding:.4rem .7rem;
  transition:color .4s ease,border-color .4s ease,background .4s ease;
}
.draw-bar button:hover{color:var(--gold)}
.draw-bar button[aria-pressed="true"]{
  color:var(--gold);border-color:rgba(157,106,18,.32);
  background:linear-gradient(157deg,rgba(255,253,247,.8),rgba(254,247,231,.6));
}

/* ── the sheet index ───────────────────────────────────────────────────
   Twenty sheets is too many to scroll blind. On a wide screen the rail
   sits alongside and follows you; below that it becomes an ordinary list
   of links above the drawings, which is all it ever needs to be.          */
.sheets{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:clamp(1rem,2vw,1.6rem);
  padding:0 var(--pad);
}
.sheet-flow{min-width:0}
.sheet-flow .band{padding-left:0;padding-right:0}
.sheet-flow .stage{padding-top:clamp(2.5rem,6vh,4.5rem)}

.rail-inner{padding:clamp(1.1rem,1.8vw,1.5rem) clamp(1rem,1.6vw,1.3rem)}
.rail-head{
  font-size:.6rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--gold);margin-bottom:.9rem;
}
.rail-stage{
  font-size:.58rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink-faint);margin:1.1rem 0 .5rem;
}
.rail-stage:first-of-type{margin-top:0}
.rail-list{list-style:none;margin:0;padding:0}
.rail-list a{
  display:flex;gap:.6rem;align-items:baseline;
  padding:.3rem 0;
  font-size:.76rem;line-height:1.4;
  color:rgba(36,29,21,.66);text-decoration:none;
  transition:color .35s ease;
}
.rail-list a b{
  font-weight:400;font-size:.62rem;letter-spacing:.1em;
  color:var(--ink-faint);min-width:1.3rem;
}
.rail-list a:hover,.rail-list a:focus-visible{color:var(--gold)}
.rail-list a.here{color:var(--gold)}
.rail-list a.here b{color:var(--gold)}

@media (min-width:1180px){
  .sheets{grid-template-columns:15rem minmax(0,1fr)}
  .rail{position:sticky;top:5.5rem;align-self:start;max-height:calc(100svh - 7rem);overflow-y:auto}
}
@media (max-width:1179px){
  .rail{margin-bottom:1.4rem}
  .rail-list{columns:2;column-gap:1.2rem}
  .rail-list li{break-inside:avoid}
}
@media (max-width:640px){
  .rail-list{columns:1}
}

/* ── connective copy between sheets ────────────────────────────────────
   A narrow plate that reads as a margin note rather than as another
   section heading. It is the site talking, not the drawing.              */
.connect{
  max-width:44rem;margin:0 auto clamp(.8rem,1.4vw,1.2rem);
  padding:clamp(1.1rem,1.8vw,1.5rem) clamp(1.1rem,2vw,1.7rem);
  border-left:2px solid rgba(157,106,18,.34);
}
.connect p{font-size:.9rem;line-height:1.8;margin:0}
.connect p + p{margin-top:.8rem}
.connect b{font-weight:400;color:#1e1810}

/* ── the facts strip in the hero ───────────────────────────────────────  */
.facts{
  list-style:none;display:flex;flex-wrap:wrap;gap:.4rem 1.6rem;
  margin:1.6rem 0 0;padding:0;
}
.facts li{display:flex;flex-direction:column;gap:.15rem}
.facts b{
  font-family:var(--serif);font-weight:400;font-size:1.06rem;
  color:#1e1810;line-height:1.1;
}
.facts span{
  font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-faint);
}

/* ── the process page ──────────────────────────────────────────────────  */
.fixes,.vers{list-style:none;margin:0;padding:0;display:grid;gap:clamp(.8rem,1.6vw,1.3rem)}

.fix{padding:clamp(1.6rem,2.6vw,2.3rem) clamp(1.3rem,2.4vw,2rem)}
.fix-tag{
  font-size:.58rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--gold);margin-bottom:.7rem;
}
.fix h3{font-size:clamp(1.2rem,2vw,1.6rem);line-height:1.2;margin-bottom:1rem}
.fix p{font-size:.92rem;line-height:1.82}
.fix p + p{margin-top:.9rem}
.fix b{font-weight:400;color:#1e1810;border-bottom:1px solid rgba(157,106,18,.3)}
.fix i{font-style:italic;font-family:var(--serif);font-size:1.06em;color:#6b563a}
.calc{
  font-family:var(--serif);font-size:1.16rem!important;
  letter-spacing:.01em;color:#1e1810;
  padding:.9rem 1.1rem;margin:1.1rem 0;
  background:rgba(255,253,246,.7);
  box-shadow:inset 0 0 0 1px rgba(157,106,18,.16);
}
.calc b{border-bottom:none;color:var(--gold)}
.fix-out{
  margin-top:1.2rem!important;padding-top:1.1rem;
  border-top:1px solid var(--line);
  color:var(--ink-soft);
}

.ver{padding:clamp(1.4rem,2.2vw,1.9rem) clamp(1.2rem,2.2vw,1.8rem)}
.ver-head{margin-bottom:1rem}
.ver-head .eyebrow{margin-bottom:.4rem}
.ver h3{font-size:clamp(1.1rem,1.7vw,1.35rem)}
.ver-body{margin:0}
.ver-body dt{
  font-family:var(--serif);font-weight:400;
  font-size:1.02rem;color:#1e1810;line-height:1.3;
  padding-top:.9rem;margin-top:.9rem;border-top:1px solid var(--line);
}
.ver-body dt:first-child{padding-top:0;margin-top:0;border-top:none}
.ver-body dd{margin:.35rem 0 0;font-size:.87rem;line-height:1.72;color:var(--ink-soft)}
.ver-foot{
  margin-top:1.2rem;padding-top:.9rem;border-top:1px solid var(--line);
  font-size:.72rem;letter-spacing:.04em;color:var(--ink-faint);
}

@media (max-width:640px){
  .sheet{padding-left:.9rem;padding-right:.9rem}
  .facts{gap:.4rem 1.1rem}
}