/* Machina Institute, Field Guide. Bone paper, ink lines, numbered plates. */
:root{
  --bone:#EFEAE0;
  --paper:#F6F3EC;
  --ink:#22201C;
  --ink-soft:#4A4640;
  --rule:#C8C0B1;
  --rule-soft:#DCD5C7;
  --sage:#7A8B6F;
  --sage-ink:#556347;
  --rust:#A65D3A;
  --rust-ink:#8A4526;
  --indigo:#4A5568;
  --indigo-soft:#6B7688;
  --stamp:#8A4526;
  --serif:Georgia,"Iowan Old Style","Palatino Linotype",Palatino,"Times New Roman",serif;
  --sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --shadow:none;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bone:#1B1A17;
    --paper:#242219;
    --ink:#EFEAE0;
    --ink-soft:#C3BCAD;
    --rule:#4C4739;
    --rule-soft:#37342B;
    --sage:#9DAE92;
    --sage-ink:#A8B99C;
    --rust:#C9805A;
    --rust-ink:#DD9067;
    --indigo:#9AA6BA;
    --indigo-soft:#8791A3;
    --stamp:#DD9067;
  }
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bone);color:var(--ink);
  font:1rem/1.5 var(--serif);
  overflow-x:hidden;
}
img,svg{max-width:100%}
a{color:inherit}
h1,h2,h3,h4,p,ul,ol,figure,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}

.wrap{max-width:60rem;margin:0 auto;padding:0 16px;width:100%}
.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}

/* shared type */
.lab{font-family:var(--sans);font-size:0.6562rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;line-height:1.4}
.cap{font-style:italic;font-size:0.8438rem;line-height:1.45;color:var(--ink-soft)}
.h-plate{font-size:clamp(1.25rem,5.2vw,1.8125rem);line-height:1.2;font-weight:400;letter-spacing:-.005em}
.body{font-size:0.9688rem;line-height:1.6;color:var(--ink-soft)}
.num{font-family:var(--sans);font-variant-numeric:tabular-nums}

/* plates */
.plate{position:relative;border:1px solid var(--rule);background:var(--paper);padding:22px 15px 18px}
.plate::after{content:"";position:absolute;inset:3px;border:1px solid var(--rule-soft);pointer-events:none}
.plate > *{position:relative;z-index:1}
.plate__no{position:absolute;top:-7px;left:12px;z-index:2;background:var(--paper);padding:0 7px;color:var(--rust-ink)}
.plate__ttl{position:absolute;bottom:-7px;right:12px;z-index:2;background:var(--paper);padding:0 7px;color:var(--indigo)}
.section{padding:26px 0 0}
.section:last-of-type{padding-bottom:26px}
.strip__no{color:var(--rust-ink);padding-bottom:8px}
.rule-x{border:0;border-top:1px solid var(--rule);margin:0}

/* header */
.top{border-bottom:1px solid var(--rule);background:var(--bone)}
.top__in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 10px}
.mark{display:flex;align-items:center;min-height:44px;gap:7px;text-decoration:none}
.mark svg{width:17px;height:17px;color:var(--rust);flex:none}
.mark b{font-family:var(--sans);font-size:.65rem;letter-spacing:.13em;text-transform:uppercase;font-weight:700}
.mark i{font-style:italic;font-size:0.6875rem;color:var(--ink-soft);display:none}
.topnav{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:0 11px;font-size:.5625rem}
.topnav a[data-wide]{display:none}
.topnav a{display:flex;align-items:center;min-height:44px;color:var(--ink-soft);text-decoration:none}
.topnav a:hover,.topnav a:focus-visible{color:var(--rust-ink);text-decoration:underline}

/* hero */
.hero{padding:4px 0 4px}
.hero__no{color:var(--rust-ink);display:block;margin-bottom:1px}
.hero h1{font-size:clamp(1.25rem,5.5vw,2.5rem);line-height:1.14;font-weight:400;letter-spacing:-.01em;margin-bottom:4px}
.hero__sub{font-size:0.8125rem;line-height:1.3;color:var(--ink-soft);margin-bottom:5px}
.hero__facts{font-family:var(--sans);font-size:0.7188rem;line-height:1.33;margin-bottom:4px}
.hero__facts b{font-weight:700;color:var(--rust-ink)}
.hero__facts span{display:block;color:var(--indigo)}
.gauge{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.gauge__track{position:relative;flex:1;height:8px;border:1px solid var(--rule);background:transparent}
.gauge__fill{position:absolute;inset:0 auto 0 0;width:38.8%;background:repeating-linear-gradient(135deg,var(--sage) 0 2px,transparent 2px 4px);border-right:1px solid var(--sage-ink)}
.gauge__n{font-family:var(--sans);font-size:0.6875rem;color:var(--ink-soft);min-width:0}
form.join{display:flex;gap:6px}
.join input{flex:1;min-width:0;height:44px;padding:0 11px;font:0.9375rem var(--serif);color:var(--ink);
  background:var(--paper);border:1px solid var(--ink);border-radius:0}
.join input::placeholder{color:var(--ink-soft);opacity:.75}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:44px;padding:0 15px;
  font-family:var(--sans);font-size:0.7812rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  background:var(--ink);color:var(--bone);border:1px solid var(--ink);text-decoration:none;cursor:pointer;border-radius:0}
.btn svg{width:14px;height:14px;flex:none}
.btn:hover{background:var(--rust-ink);border-color:var(--rust-ink)}
.btn--ghost{background:transparent;color:var(--ink);border:1px solid var(--ink)}
.btn--ghost:hover{background:var(--ink);color:var(--bone)}
.micro{font-family:var(--sans);font-size:0.6562rem;color:var(--ink-soft);margin-top:4px;letter-spacing:.02em}
.hero__art{display:none}

/* proof strip */
.proof{display:grid;grid-template-columns:repeat(2,1fr);border-top:1px solid var(--rule);border-left:1px solid var(--rule)}
.proof li{border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:9px 10px}
.proof li:last-child{grid-column:1 / -1}
.proof b{display:block;font-family:var(--sans);font-size:1.4375rem;font-weight:700;line-height:1.1;font-variant-numeric:tabular-nums}
.proof span{display:block;font-family:var(--sans);font-size:0.625rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);margin-top:2px}

/* specimen sheet (decorative) */
.sheet{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:16px;border-top:1px solid var(--rule-soft);padding-top:14px}
.sheet figure{text-align:center;color:var(--sage-ink)}
.sheet svg{width:34px;height:34px}
.sheet figcaption{font-family:var(--sans);font-size:0.5938rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);margin-top:3px}

/* anatomy */
.anat{margin-top:16px;border-top:1px solid var(--rule-soft)}
.anat li{display:grid;grid-template-columns:52px 1fr;gap:12px;padding:13px 0;border-bottom:1px solid var(--rule-soft)}
.anat__fig{text-align:center;color:var(--sage-ink)}
.anat__fig svg{width:38px;height:38px}
.anat__fig .cap{display:block;font-size:0.6875rem;margin-top:2px;color:var(--rust-ink);font-style:italic}
.anat h3{font-size:1.0312rem;font-weight:400}
.anat h3 em{font-style:normal;font-family:var(--sans);font-size:0.625rem;letter-spacing:.14em;color:var(--indigo);margin-right:7px}
.anat p{font-size:0.875rem;line-height:1.5;color:var(--ink-soft);margin-top:2px}
.anat__tot{display:flex;justify-content:space-between;padding:11px 0 0;font-family:var(--sans);font-size:0.6875rem;letter-spacing:.12em;text-transform:uppercase}
.anat__tot b{color:var(--rust-ink)}

/* index of courses */
.idx{margin-top:14px}
.idx li{display:grid;grid-template-columns:26px 1fr;gap:10px;padding:11px 0;border-top:1px solid var(--rule-soft)}
.idx li:first-child{border-top:0}
.idx__n{font-family:var(--sans);font-size:0.75rem;font-weight:700;color:var(--indigo);padding-top:3px;font-variant-numeric:tabular-nums}
.idx h3{font-size:1.0312rem;font-weight:400;line-height:1.25}
.idx__meta{font-family:var(--sans);font-size:0.6562rem;letter-spacing:.06em;color:var(--ink-soft);margin-top:3px}
.idx__meta b{color:var(--ink);font-weight:600}
.idx .cap{margin-top:3px}
.idx__pre{margin-top:3px;color:var(--indigo)}
.flag{display:inline-flex;align-items:center;gap:4px;font-family:var(--sans);font-size:0.5938rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--rust-ink);border:1px solid var(--rust);padding:1px 5px;margin-left:6px;vertical-align:2px;white-space:nowrap}
.flag svg{width:9px;height:9px}
.note{margin-top:14px;padding-top:12px;border-top:1px solid var(--rule);font-style:italic;font-size:0.8438rem;color:var(--ink-soft)}

/* certificate */
.cert{margin-top:16px;border:1px solid var(--rule);padding:16px 12px;text-align:center;background:transparent}
.cert svg{width:66px;height:66px;color:var(--sage-ink)}
.cert__stamp{display:inline-block;margin-top:10px;padding:6px 11px;border:1.5px solid var(--stamp);color:var(--stamp);
  font-family:var(--sans);font-size:0.6875rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;transform:rotate(-2.2deg)}
.cert figcaption{margin-top:12px}

/* lists */
.ticks{margin-top:14px}
.ticks li{display:grid;grid-template-columns:20px 1fr;gap:9px;padding:9px 0;border-top:1px solid var(--rule-soft);font-size:0.9062rem;line-height:1.5}
.ticks li:first-child{border-top:0}
.ticks svg{width:15px;height:15px;margin-top:3px;color:var(--sage-ink)}
.ticks--no svg{color:var(--indigo)}
.aud{margin-top:16px;border-top:1px solid var(--rule-soft);padding-top:14px}
.aud + .aud{margin-top:20px}
.aud h3{font-size:1.0625rem;font-weight:400}

/* final */
.final{text-align:left}
.final .btn{width:100%;margin-top:12px}
.cond{margin-top:14px;padding-top:12px;border-top:1px solid var(--rule);font-size:0.8438rem;line-height:1.55;color:var(--ink-soft)}

/* footer */
.foot{border-top:1px solid var(--rule);margin-top:8px;padding:18px 0 96px;font-size:0.7812rem;color:var(--ink-soft)}
.foot a{color:var(--rust-ink)}
.foot p + p{margin-top:6px}

/* sticky mobile CTA */
.sticky{position:fixed;left:0;right:0;bottom:0;z-index:40;background:var(--bone);border-top:1px solid var(--ink);
  padding:8px 16px calc(8px + env(safe-area-inset-bottom));display:flex;align-items:center;gap:10px}
.sticky p{font-family:var(--sans);font-size:0.6562rem;line-height:1.3;color:var(--ink-soft);flex:1}
.sticky p b{display:block;color:var(--ink);font-size:0.6875rem}
.sticky .btn{min-height:44px}

/* path.html */
.skip{position:absolute;left:-999px;top:0;z-index:99;display:inline-flex;align-items:center;min-height:44px}
.skip:focus{left:8px;top:8px;position:fixed;display:inline-flex;align-items:center;min-height:44px;
  background:var(--ink);color:var(--bone);padding:0 16px;
  font-family:var(--sans);font-size:0.75rem;letter-spacing:.08em;text-transform:uppercase;text-decoration:none}

.pathtop{border-bottom:1px solid var(--rule);background:var(--bone)}
.who{display:flex;align-items:center;gap:10px;padding:10px 0 9px}
.who__id{min-width:38px;min-height:38px;padding:2px 6px;flex:none;border:1px solid var(--rule);display:grid;place-items:center;
  font-family:var(--sans);font-size:0.7812rem;font-weight:700;letter-spacing:.06em;color:var(--indigo)}
.who__t b{display:block;font-size:0.9062rem;font-weight:400}
.who__t span{display:block;font-family:var(--sans);font-size:0.625rem;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-soft);margin-top:2px}

.cadence{display:flex;align-items:center;gap:9px;padding:0 0 10px}
.cadence__marks{display:flex;gap:5px}
.cadence__marks svg{width:15px;height:15px;color:var(--sage-ink)}
.cadence__t{font-family:var(--sans);font-size:0.6875rem;letter-spacing:.05em;color:var(--ink-soft)}
.cadence__t b{color:var(--ink)}

.resume{margin:14px 0 0;border:1.5px solid var(--ink);background:var(--paper);padding:20px 14px 15px;position:relative}
.resume__no{position:absolute;top:-8px;left:12px;background:var(--paper);padding:0 7px;color:var(--rust-ink)}
.resume h2{font-size:1.1875rem;line-height:1.25;font-weight:400;margin-bottom:6px}
.resume h2 em{display:block;font-style:normal;font-family:var(--sans);font-size:0.6562rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--indigo);margin-bottom:4px}
.resume__meta{font-family:var(--sans);font-size:0.7188rem;color:var(--ink-soft);line-height:1.5}
.resume__meta b{color:var(--ink)}
.steps{display:flex;gap:4px;margin:9px 0 11px}
.steps svg{width:14px;height:14px;color:var(--sage-ink)}
.resume .btn{width:100%}

.pathwrap{padding-top:24px}
.pathwrap h2.lab{color:var(--indigo);padding-bottom:10px;border-bottom:1px solid var(--rule)}
.trail{padding-top:4px}
.node{display:grid;grid-template-columns:46px 1fr;gap:11px;position:relative;padding:9px 0;min-height:56px}
.node__mark{position:relative;display:flex;justify-content:center;padding-top:3px}
.node__mark::before{content:"";position:absolute;left:22px;top:0;bottom:-18px;width:1px;
  background:repeating-linear-gradient(to bottom,var(--rule) 0 5px,transparent 5px 9px)}
.node:last-child .node__mark::before{display:none}
.node__glyph{position:relative;z-index:1;width:38px;height:38px;flex:none;display:grid;place-items:center;
  border:1px solid var(--rule);border-radius:50%;background:var(--paper);color:var(--sage-ink)}
.node__glyph svg{width:20px;height:20px}
.node:nth-of-type(even) .node__glyph{transform:translateX(3px)}
.node:nth-of-type(3n) .node__glyph{transform:translateX(-3px)}
.node__body{padding-top:1px;min-width:0;overflow-wrap:break-word}
.node__id{font-family:var(--sans);font-size:0.625rem;letter-spacing:.13em;text-transform:uppercase;color:var(--indigo);display:block;margin-bottom:2px}
.node__ttl{display:flex;align-items:center;min-height:44px;margin:-4px 0 0;overflow-wrap:anywhere;
  font-size:1rem;line-height:1.28;font-weight:400;color:var(--ink);text-decoration:none}
a.node__ttl{text-decoration:underline;text-decoration-color:var(--rule);text-underline-offset:3px}
a.node__ttl:hover,a.node__ttl:focus-visible{text-decoration-color:var(--rust-ink);color:var(--rust-ink)}
.node__st{display:flex;align-items:flex-start;gap:6px;margin-top:4px;font-family:var(--sans);font-size:0.7188rem;
  line-height:1.4;color:var(--ink-soft)}
.node__st svg{width:14px;height:14px;flex:none;margin-top:1px}

.st-held svg,.st-done svg{color:var(--sage-ink)}
.st-in_progress svg{color:var(--rust-ink)}
.st-needs_revision svg,.st-retake svg{color:var(--rust-ink)}
.st-scheduled svg{color:var(--indigo)}
.st-skipped svg,.st-locked svg{color:var(--ink-soft)}
.node--locked .node__glyph{border-style:dashed;color:var(--ink-soft);background:transparent}
.node--held .node__glyph,.node--done .node__glyph{background:var(--sage);color:var(--paper);border-color:var(--sage-ink)}
.node--today .node__glyph{border:1.5px solid var(--rust-ink);color:var(--rust-ink)}

.node--mod{grid-template-columns:1fr;gap:0;padding:26px 0 6px;min-height:0}
.mod{position:relative;border-top:1px solid var(--ink);border-bottom:1px solid var(--rule);padding:13px 0 10px}
.mod__l{display:block;color:var(--rust-ink);margin-bottom:4px}
.mod h3{font-size:1.125rem;line-height:1.25;font-weight:400;font-style:italic}

.node--today{border:1.5px solid var(--rust-ink);background:var(--paper);padding:13px 11px;margin:6px 0;
  grid-template-columns:46px 1fr;gap:11px}
.node--today .node__mark::before{display:none}
.outcome{margin-top:8px;padding-top:8px;border-top:1px solid var(--rule-soft);font-style:italic;font-size:0.8438rem;
  line-height:1.45;color:var(--ink-soft)}

.node--marker{grid-template-columns:1fr;gap:0;padding:14px 0;min-height:0}
.marker{display:flex;align-items:center;gap:9px}
.marker svg{width:15px;height:15px;flex:none;color:var(--indigo)}
.marker span{font-family:var(--sans);font-size:0.625rem;letter-spacing:.14em;text-transform:uppercase;color:var(--indigo);min-width:0}
.marker::after{content:"";flex:1 0 12px;height:0;border-top:1px dashed var(--indigo)}

.copyplate{margin:26px 0 0;border:1px solid var(--rule);background:var(--paper);padding:20px 13px 14px;position:relative}
.copyplate__no{position:absolute;top:-7px;left:12px;background:var(--paper);padding:0 7px;color:var(--rust-ink)}
.copyplate h2{font-size:1rem;font-weight:400;margin-bottom:9px}
.copyplate pre{margin:0;padding:11px;border:1px solid var(--rule-soft);background:var(--bone);
  font:0.8125rem/1.55 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;white-space:pre-wrap;word-break:break-word;color:var(--ink)}
.copyplate .btn{margin-top:10px;width:100%}
.live{display:block;margin-top:7px;font-family:var(--sans);font-size:0.6875rem;color:var(--sage-ink);min-height:15px}

.jump{position:fixed;right:12px;bottom:calc(70px + env(safe-area-inset-bottom));z-index:35;
  display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 13px;background:var(--paper);
  border:1.5px solid var(--ink);color:var(--ink);text-decoration:none;
  font-family:var(--sans);font-size:0.6875rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.jump svg{width:13px;height:13px;color:var(--rust-ink)}
.jump:hover{background:var(--ink);color:var(--bone)}
.jump:hover svg{color:var(--bone)}

.tabs{position:fixed;left:0;right:0;bottom:0;z-index:40;background:var(--bone);border-top:1px solid var(--ink);
  padding-bottom:env(safe-area-inset-bottom)}
.tabs ul{display:flex}
.tabs li{flex:1;min-width:0}
.tabs a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:56px;
  padding:6px 2px;text-decoration:none;color:var(--ink-soft);
  font-family:var(--sans);font-size:0.5938rem;letter-spacing:.11em;text-transform:uppercase}
.tabs svg{width:17px;height:17px;flex:none}
.tabs span{text-align:center;overflow-wrap:anywhere}
.tabs a[aria-current="page"]{color:var(--rust-ink);box-shadow:inset 0 2px 0 0 var(--rust-ink)}
.tabs a:hover{color:var(--ink)}

.pathfoot{padding:22px 0 130px;font-size:0.7812rem;color:var(--ink-soft)}

/* focus */
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--rust-ink);outline-offset:2px}

/* motion */
@media (prefers-reduced-motion: no-preference){
  .btn,.jump,a.node__ttl{transition:background-color .15s ease,color .15s ease,border-color .15s ease}
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
}

/* 560px and up */
@media (min-width:560px){
  .top__in{padding-top:9px;padding-bottom:8px;gap:16px}
  .topnav{gap:18px}
  .mark i{display:inline}
  .hero{padding:26px 0 8px}
  .hero__sub{font-size:0.9375rem;line-height:1.5;max-width:34em}
  .hero__facts{font-size:0.8125rem}
  .proof{grid-template-columns:repeat(5,1fr)}
  .proof li:last-child{grid-column:auto}
  .proof li{padding:13px 12px}
  .plate{padding:26px 22px 22px}
  .section{padding:38px 0 0}
  .idx li{grid-template-columns:32px 1fr}
  .sheet{grid-template-columns:repeat(6,1fr)}
  .anat li{grid-template-columns:64px 1fr}
  .final .btn{width:auto;min-width:15rem}
  .node{grid-template-columns:56px 1fr;gap:14px}
  .node__glyph{width:46px;height:46px}
  .node__glyph svg{width:24px;height:24px}
  .node__mark::before{left:27px}
  .node__ttl{font-size:1.0625rem}
  .resume{padding:24px 20px 18px}
  .resume h2{font-size:1.375rem}
  .resume .btn{width:auto;min-width:14rem}
  .copyplate{padding:24px 20px 18px}
  .copyplate .btn{width:auto;min-width:12rem}
}

/* 680px and up */
@media (min-width:680px){
  .topnav{font-size:.65625rem}
  .mark b{font-size:.71875rem;letter-spacing:.15em}
  .topnav a[data-wide]{display:flex}
}

/* 900px and up */
@media (min-width:900px){
  .hero{display:grid;grid-template-columns:1fr 250px;gap:36px;align-items:center;padding:44px 0 12px}
  .hero__art{display:block;color:var(--sage-ink);text-align:center}
  .hero__art svg{width:100%;height:auto;max-width:230px}
  .hero__art figcaption{margin-top:8px}
  .hero h1{font-size:2.5rem}
  .join{max-width:30rem}
  .gauge{max-width:30rem}
  .sticky{display:none}
  .foot{padding-bottom:40px}
  .jump{right:24px;bottom:24px}
  .tabs{position:static;border-top:1px solid var(--ink);border-bottom:1px solid var(--rule)}
  .tabs ul{max-width:60rem;margin:0 auto;padding:0 16px}
  .tabs a{flex-direction:row;gap:7px;min-height:48px}
  .pathfoot{padding-bottom:40px}
  .aud{display:block}
}