/* Caletta Labs — shared page style.
 *
 * Design language: the caletta.io coastal system (sand paper, harbor ink,
 * cove teal) applied to the gists' measurement-broadsheet layout. The pages
 * argue about ledgers, ratios, and what is measured versus merely asserted,
 * so the sheet keeps its ruled structure and left gutter for marginalia and
 * status stamps; the palette, type, and furniture now match caletta.io.
 *
 * Rules of the system, so pages stay coherent:
 *   - No rounded corners and no floating white cards. Emphasis comes from
 *     rules, indentation, and column position, never from a box shadow.
 *   - Colour carries an epistemic claim; do not spend it on decoration.
 *     Cove teal is structure and links. Ledger blue is reserved for state
 *     that is actually measured. Amber is in flight. Grey is everything
 *     not yet measured.
 *   - The text column sits right of centre. The gutter to its left is a real
 *     column: section numbers, sidenotes, and stamps live there.
 *
 * Display serif is self-hosted (OFL 1.1), same files caletta.io ships:
 *   Source Serif 4 (Adobe) — variable, roman + italic.
 * Sans and mono use the same stacks as caletta.io/styles.css.
 */

@font-face{
  font-family:"Source Serif 4";
  src:url("fonts/source-serif-4-roman.woff2") format("woff2");
  font-weight:200 900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Source Serif 4";
  src:url("fonts/source-serif-4-italic.woff2") format("woff2");
  font-weight:200 900; font-style:italic; font-display:swap;
}

:root{
  /* coastal palette — caletta.io/styles.css */
  --paper:#F5F1E8;       /* sand paper */
  --paper-sunk:#EFEADD;  /* sand muted */
  --ink:#112027;         /* harbor ink — headings, strong */
  --ink-2:#2C3E47;       /* harbor body — prose */
  --ink-3:#5A6F76;       /* harbor mid — furniture */
  --teal:#1F6A6E;        /* cove teal — structure and links */
  --teal-hover:#195558;
  --teal-soft:#7BA6A8;
  --blue:#20415E;        /* ledger blue — measured, and only measured */
  --amber:#A86F00;       /* in flight / caution (site --warn-base) */
  --amber-soft:#C08A2E;
  --rule:rgba(17,32,39,.22);
  --rule-faint:rgba(17,32,39,.11);

  --serif:"Source Serif 4","Source Serif Pro",Georgia,"Iowan Old Style",
          "Times New Roman",serif;
  --sans:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",
         Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:"Berkeley Mono","JetBrains Mono",ui-monospace,SFMono-Regular,
         Menlo,Consolas,"Liberation Mono",monospace;

  --measure:38rem;
  --gutter:15rem;

  /* Compatibility aliases. Pages carry bespoke rules written against the old
     token names; mapping them here re-skins that CSS instead of rewriting it.
     New rules should use the names above. */
  --oxide:var(--teal);
  --oxide-soft:var(--teal-soft);
  --accent:var(--teal);
  --accent-soft:var(--paper-sunk);
  --slate:var(--ink-3);
  --line:var(--rule);
  --white:var(--paper-sunk);
  --caution:var(--amber);
}

/* The old pages built emphasis out of floating rounded cards, which is the
   look this design exists to remove. Bespoke page CSS is re-skinned by the
   aliases above, but corners and shadows are overridden outright. */
.wrap *,.wrap *::before,.wrap *::after{border-radius:0 !important;box-shadow:none !important}

@media (prefers-color-scheme:dark){
  :root{
    --paper:#0E1A1F;       /* deep harbor */
    --paper-sunk:#142128;
    --ink:#EAE3D2;         /* sand on dark */
    --ink-2:#C7D3D8;
    --ink-3:#8A9CA3;
    --teal:#4FA4A8;
    --teal-hover:#6BBDC1;
    --teal-soft:#3C6A6D;
    --blue:#8AB0CE;
    --amber:#C9963B;
    --amber-soft:#A87E35;
    --rule:rgba(234,227,210,.22);
    --rule-faint:rgba(234,227,210,.11);
  }
}

*{box-sizing:border-box}

html,body{background:var(--paper);color:var(--ink-2)}

body{
  margin:0;
  font-family:var(--sans);
  font-size:16px;
  line-height:1.625;
  font-feature-settings:"tnum" 1,"zero" 1,"kern" 1,"liga" 1;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* ---------------------------------------------------------------- masthead */

.masthead{
  position:sticky;top:0;z-index:20;
  background:color-mix(in srgb,var(--paper),transparent 12%);
  backdrop-filter:saturate(1.4) blur(8px);
  -webkit-backdrop-filter:saturate(1.4) blur(8px);
  border-bottom:1px solid var(--rule);
  margin-bottom:clamp(2.5rem,6vw,4.5rem);
}
.masthead .bar{
  max-width:64rem;margin:0 auto;padding:.75rem 1.5rem .7rem;
  display:flex;gap:.6rem 1.5rem;flex-wrap:wrap;
  align-items:baseline;justify-content:space-between;
  font-family:var(--mono);font-size:.8rem;color:var(--ink-3);
}
.masthead .bar b{font-family:var(--sans);font-weight:500;font-size:.95rem;
  letter-spacing:-.005em;color:var(--ink)}
.masthead .bar b .wordmark__accent{color:var(--teal)}
.masthead .bar b::after{content:" \2014";color:var(--teal)}
.masthead .bar a{color:var(--ink-3);text-decoration:none;border-bottom:1px solid transparent;
  transition:color 120ms ease-out,border-color 120ms ease-out}
.masthead .bar a:hover{color:var(--teal);border-bottom-color:var(--teal)}
.masthead .bar .right{white-space:nowrap}

/* Long identifiers in prose must never widen the sheet. */
p,li,td,th,blockquote,.status,.mark{overflow-wrap:break-word}

/* ------------------------------------------------------------------- sheet */

.wrap{max-width:64rem;margin:0 auto;padding:0 1.5rem 7rem}
.col,.wrap > *{max-width:var(--measure)}
.wrap{counter-reset:sect}
.col{margin-left:var(--gutter);max-width:var(--measure);counter-reset:sect}

/* Legacy pages put content directly in .wrap; give them the same offset. */
.wrap > p,.wrap > h1,.wrap > h2,.wrap > ul,.wrap > ol,.wrap > blockquote,
.wrap > hr,.wrap > table,.wrap > .tablewrap,.wrap > figure,.wrap > footer,
.wrap > section,.wrap > div{margin-left:var(--gutter)}
.wrap > .full{margin-left:0}
.full{max-width:none}

/* ------------------------------------------------------------- typography */

h1{
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(2.2rem,5.5vw,3.25rem);
  line-height:1.08;letter-spacing:-.012em;
  color:var(--ink);
  margin:0 0 1.2rem;text-wrap:balance;
}
h1 em{font-style:italic;font-weight:500;color:var(--teal)}

.eyebrow{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--teal);
  margin:0 0 1.6rem;
}

.lede{
  font-size:1.125rem;line-height:1.55;
  color:var(--ink-2);margin:0 0 0;font-style:normal;
  border-bottom:1px solid var(--rule);padding-bottom:1.8rem;
}
.lede em{font-style:italic}
.lede + .kicker,.lede + hr + .kicker{border-top:0;padding-top:0;margin-top:1.6rem}
.lede + hr{display:none}

h2{
  font-family:var(--serif);
  font-weight:500;font-size:clamp(1.6rem,3vw,1.9rem);
  line-height:1.15;letter-spacing:-.008em;
  color:var(--ink);
  margin:0 0 1.2rem;text-wrap:balance;position:relative;
}
/* Section number, set in the gutter. */
h2::before{
  counter-increment:sect;
  content:counter(sect,decimal-leading-zero);
  position:absolute;left:calc(-1 * var(--gutter));top:.42em;width:calc(var(--gutter) - 3rem);
  font-family:var(--mono);font-size:.78rem;letter-spacing:.1em;
  color:var(--teal);text-align:right;
}
h2.nonum::before{content:none}

h3{
  font-family:var(--sans);
  font-weight:500;font-size:1.06rem;color:var(--ink);
  margin:2.4rem 0 .5rem;letter-spacing:-.005em;
}

/* The kicker is a rubric: it sits on the rule that opens the section, so
   sections are announced by structure (site .section-label). */
.kicker{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);
  margin:3.2rem 0 .8rem;padding-top:.7rem;
  border-top:1px solid var(--rule);
}
.kicker + h2{margin-top:0}
.kicker:first-child{margin-top:0}
/* Legacy pages open each section with an <hr> AND a kicker. The kicker draws
   its own rule, so when it follows an hr the hr is the rule and the kicker
   stops drawing one. */
hr.rule + .kicker,hr + .kicker{border-top:0;padding-top:0;margin-top:1.1rem}

p{margin:0 0 1.2rem}
strong{font-weight:600;color:var(--ink)}
em{font-style:italic}

a{color:var(--teal);text-decoration:underline;
  text-decoration-thickness:1px;text-underline-offset:.18em;
  transition:color 120ms ease-out}
a:hover{color:var(--teal-hover)}
a:focus-visible{outline:2px solid var(--teal);outline-offset:2px}

code{
  font-family:var(--mono);font-size:.88em;color:var(--ink);
}
a code{color:inherit}

hr,.rule{
  height:0;border:0;border-top:1px solid var(--rule);
  margin:3.4rem 0 0;max-width:var(--measure);
}
hr + *{margin-top:1.4rem}
/* A major break gets a double rule, the way a ledger closes a page. */
.rule.major{border-top:3px double var(--rule)}

/* ------------------------------------------------------------- marginalia */

/* Sidenotes float into the gutter. Place <span class="mark"> as the first
   child of the paragraph it annotates. */
.mark{
  display:block;float:left;clear:left;
  width:calc(var(--gutter) - 3rem);
  margin-left:calc(-1 * var(--gutter));
  margin-bottom:1rem;
  font-family:var(--mono);font-size:.7rem;line-height:1.5;
  letter-spacing:.01em;color:var(--ink-3);text-align:right;
}
.mark b{display:block;font-weight:400;color:var(--teal);
  text-transform:uppercase;letter-spacing:.1em;font-size:.62rem;margin-bottom:.3rem}
.mark a{color:var(--ink-3);text-decoration-color:var(--rule)}
.mark a:hover{color:var(--teal)}

/* --------------------------------------------------------------- stamps */

/* Status stamps carry the epistemic claim. Blue is measured, amber is in
   flight, grey is asserted but not yet demonstrated. Never restyle these to
   agree with a page's mood; they mean something. */
.stamp{
  display:inline-block;font-family:var(--mono);
  font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;
  padding:.2em .5em .16em;border:1px solid currentColor;
  color:var(--ink-3);vertical-align:.14em;white-space:nowrap;
}
.stamp.measured{color:var(--blue)}
.stamp.building{color:var(--amber)}
.stamp.pending{color:var(--ink-3);border-style:dashed}

/* Pages tag component state with .tag now|meas|build|plan|spec. These are the
   same claim the stamps make, so they share the ranking: filled blue is the
   strongest evidence, dashed grey the weakest. Ordered deliberately —
   measured outranks running, because running is not a measurement. */
.tag{
  display:inline-block;font-family:var(--mono);
  font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;font-weight:400;
  padding:.24em .5em .2em;white-space:nowrap;align-self:center;
  border:1px solid currentColor;color:var(--ink-3);background:none;
}
.tag.meas{background:var(--blue);border-color:var(--blue);color:var(--paper)}
.tag.now{color:var(--blue)}
.tag.build{color:var(--amber)}
.tag.spec{color:var(--amber-soft)}
.tag.plan{color:var(--ink-3);border-style:dashed}

/* A stamp set in the gutter rather than inline, so it labels the paragraph
   from outside the column instead of repeating its opening words. */
.gutstamp{
  float:left;clear:left;
  width:calc(var(--gutter) - 3rem);
  margin-left:calc(-1 * var(--gutter));
  text-align:right;
}

/* ------------------------------------------------------- emphasis blocks */

/* A pulled statement: serif on a teal rule, sitting on the paper rather than
   above it (site .quote-strip). */
blockquote{
  margin:2rem 0;padding:.2rem 0 .2rem 1.6rem;
  border-left:3px solid var(--teal);
  font-family:var(--serif);
  font-size:1.3rem;line-height:1.38;
  color:var(--ink);font-style:italic;font-weight:400;
}
blockquote em{font-style:normal}
.testquote{font-size:1.42rem;border-left-width:4px}

/* A single stated definition: a tinted band off a teal rule (site .status). */
.oneline,.decl,.spec,.note,.gatehint{
  margin:1.8rem 0;padding:.9rem 1.1rem;
  background:var(--paper-sunk);
  border-left:3px solid var(--teal);
  font-size:1rem;line-height:1.55;
}

.caution{
  margin:1.8rem 0;padding:.9rem 1.1rem;
  background:var(--paper-sunk);
  border-left:3px solid var(--amber);
  color:var(--ink-2);font-size:.95rem;
}

/* ------------------------------------------------------------------ lists */

ul,ol{padding-left:1.2rem;margin:1.2rem 0}
li{margin:0 0 .5rem}
li::marker{color:var(--ink-3)}

/* Ruled entries, like line items (site .work-list / .bullets). */
ul.free,ul.plainlist,ul.status-list,ul.steps{list-style:none;padding:0;margin:1.6rem 0}
ul.free li,ul.plainlist li,ul.status-list li,ul.steps li{
  padding:.85rem 0;margin:0;border-top:1px solid var(--rule-faint);
}
ul.free li:last-child,ul.plainlist li:last-child{border-bottom:1px solid var(--rule-faint)}
ul.free b,ul.plainlist b,ul.free strong{font-weight:600}
ul.plainlist li::before{content:none}

/* Hanging figures in the gutter, mono, teal (site .steps numbering). */
ol.lines{counter-reset:line;list-style:none;padding:0;margin:1.8rem 0}
ol.lines > li{
  position:relative;padding:1.1rem 0;margin:0;
  border-top:1px solid var(--rule);
}
ol.lines > li::before{
  counter-increment:line;content:counter(line,decimal-leading-zero);
  position:absolute;left:calc(-1 * var(--gutter));top:1.35rem;
  width:calc(var(--gutter) - 3rem);text-align:right;
  font-family:var(--mono);font-size:.78rem;letter-spacing:.1em;color:var(--teal);
}
ol.lines b{font-weight:600}
.status,.lines .status{
  display:block;margin-top:.5rem;
  font-size:.9rem;line-height:1.5;color:var(--ink-2);
}

/* ----------------------------------------------------------------- tables */

/* Grids and tables are figures, not prose. They break left into the gutter and
   run the full width of the sheet rather than being squeezed to the measure. */
.wide,.nodes,.deal-grid,.tablewrap,.credits{
  max-width:calc(var(--measure) + var(--gutter));
  margin-left:calc(-1 * var(--gutter));
}
/* A negative left margin alone only buys back the gutter. Above the width
   where the sheet stops shrinking, claim the right rail as well so wide
   figures span the whole sheet. 8rem = 61rem sheet - 15rem gutter - 38rem
   measure; guarded by min-width so a shrinking sheet never overflows. */
@media (min-width:66rem){
  .wide,.nodes,.deal-grid,.tablewrap,.credits{margin-right:-8rem;max-width:61rem}
}

/* margin-block only: a `margin` shorthand here would reset the negative
   inline margins that give wide figures their width. */
.tablewrap{overflow-x:auto;margin-block:1.8rem}
table{border-collapse:collapse;width:100%;font-size:.9rem}
th,td{
  text-align:left;padding:.6rem .8rem .55rem 0;
  border-bottom:1px solid var(--rule-faint);vertical-align:top;
}
thead th{
  font-family:var(--mono);font-size:.64rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3);font-weight:400;
  border-bottom:1px solid var(--ink);
}
td.num,th.num,.amt,.c-amt{
  font-family:var(--mono);text-align:right;
  font-feature-settings:"tnum" 1,"lnum" 1;
}

/* --------------------------------------------------------------- footer */

footer{
  margin-top:5rem;padding-top:1.2rem;
  border-top:1px solid var(--rule);
  font-family:var(--mono);font-size:.75rem;line-height:1.7;
  letter-spacing:.03em;color:var(--ink-3);
}
footer a{color:var(--ink-3);text-decoration-color:var(--rule)}
footer a:hover{color:var(--teal)}
footer em{font-style:normal;display:block;margin-top:.6rem;opacity:.8}

/* --------------------------------------------------------------- narrow */

/* Below the fold-out width the gutter cannot hold notes; they become indented
   asides and the section numbers move inline. */
@media (max-width:62rem){
  :root{--gutter:0rem}
  .col,.wrap > *{margin-left:0}
  .mark{
    display:block;float:none;width:auto;margin:1.2rem 0;
    padding-left:1rem;border-left:1px solid var(--teal-soft);
    text-align:left;
  }
  .gutstamp{float:none;width:auto;margin:0 0 .45rem;text-align:left;display:block}
  .wide,.nodes,.deal-grid,.tablewrap,.credits{max-width:none;margin-left:0}
  h2{padding-left:0}
  h2::before{position:static;display:block;width:auto;text-align:left;margin-bottom:.35rem}
  ol.lines > li{padding-left:2.6rem}
  ol.lines > li::before{position:absolute;left:0;top:1.25rem;width:2rem;text-align:left}
}

@media (max-width:40rem){
  body{font-size:15.5px}
  .wrap{padding:0 1.15rem 5rem}
  .masthead .bar{font-size:.72rem;gap:.8rem;padding:.7rem 1.15rem}
}

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

@media print{
  :root{--paper:#fff;--ink:#000;--gutter:0}
  .masthead,footer{border-color:#000}
}