/* Skyrule — shared styles
   Tokens are named for their job, never their appearance, so light and dark
   are two printings of the same plate rather than two designs. */

:root{
  --ground:#0C1226;
  --ground-2:#111935;
  --ground-3:#161E3C;
  --ornament:#C69B5E;
  --ornament-a:0.30;
  --star:#F1EDE2;
  --ink:#EFEAE0;
  --ink-soft:#9A94A8;
  --ink-faint:#66607A;
  --rule:#262E4A;
  --node-fill:#171E38;

  /* pigments carry meaning — hue never flips between modes */
  --tense:#C4566E;
  --ease:#3FA88E;
  --neutral:#4C5470;
  --romance:#E8739A;
  --making:#E0A33F;
  --closeness:#7B9FE8;

  --display:"EB Garamond",Garamond,serif;
  --body:"Source Serif 4",Georgia,serif;
  --data:"IBM Plex Mono",ui-monospace,monospace;
  --measure:64ch;
}

[data-mode="light"]{
  --ground:#EDEAE0;
  --ground-2:#E5E1D4;
  --ground-3:#DCD7C6;
  --ornament:#8A6A3A;
  --ornament-a:0.26;
  --star:#3A3529;
  --ink:#1C1A16;
  --ink-soft:#5A554B;
  --ink-faint:#8F8878;
  --rule:#CFC9B8;
  --node-fill:#F6F3EA;

  --tense:#A6435A;
  --ease:#2C7D68;
  --neutral:#A49C8A;
  --romance:#C4577C;
  --making:#A9761A;
  --closeness:#4E6FB5;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:var(--body);
  font-weight:300;
  font-size:18px;
  line-height:1.72;
  -webkit-font-smoothing:antialiased;
  transition:background .45s ease,color .45s ease;
}
img,svg{max-width:100%}

a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--ornament)}
a:hover{color:var(--ornament)}
a:focus-visible,button:focus-visible{outline:2px solid var(--ornament);outline-offset:3px}

.wrap{max-width:1180px;margin:0 auto;padding:0 26px}

/* ---------- nav ---------- */
nav{
  display:flex;align-items:center;gap:26px;
  padding:20px 0 14px;border-bottom:1px solid var(--rule);
  flex-wrap:wrap;
}
.mark{
  font-family:var(--data);font-size:15px;letter-spacing:.34em;
  font-weight:400;border:0;color:var(--ink);
}
.mark span{color:var(--ink-faint)}
nav .links{display:flex;gap:22px;margin-left:auto;flex-wrap:wrap;align-items:center}
nav .links a{
  font-family:var(--data);font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-soft);border:0;padding:4px 0;
}
nav .links a:hover{color:var(--ink)}
nav .links a[aria-current="page"]{color:var(--ink);border-bottom:1px solid var(--ornament)}

button{
  font-family:var(--data);font-size:10.5px;letter-spacing:.16em;
  background:transparent;color:var(--ink-soft);border:1px solid var(--rule);
  padding:8px 14px;cursor:pointer;border-radius:2px;transition:all .2s;
}
button:hover{color:var(--ink);border-color:var(--ink-faint)}
button[aria-pressed="true"]{color:var(--ground);background:var(--ink);border-color:var(--ink)}

/* ---------- page furniture ---------- */
.eyebrow{
  font-family:var(--data);font-size:10.5px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--ink-faint);margin:0 0 14px;
}
h1{
  font-family:var(--display);font-weight:400;
  font-size:clamp(38px,6.4vw,72px);line-height:1.02;
  letter-spacing:.01em;margin:0 0 20px;
}
h2{
  font-family:var(--display);font-weight:400;
  font-size:clamp(26px,3.4vw,36px);line-height:1.18;margin:0 0 20px;
}
h3{
  font-family:var(--data);font-weight:400;font-size:11px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft);
  margin:0 0 12px;
}
p{margin:0 0 20px;max-width:var(--measure)}
.standfirst{
  font-family:var(--display);font-style:italic;
  font-size:clamp(21px,2.5vw,27px);line-height:1.5;
  color:var(--ink-soft);max-width:34ch;
}

/* annotated two-column entries */
.entry{
  display:grid;grid-template-columns:190px minmax(0,var(--measure));
  gap:0 54px;justify-content:start;
  padding:54px 0;border-bottom:1px solid var(--rule);
}
.margin{
  font-family:var(--data);font-size:11.5px;line-height:1.8;
  color:var(--ink-faint);text-align:right;padding-top:8px;
}
.margin b{
  display:block;color:var(--ink-soft);font-weight:400;
  letter-spacing:.16em;text-transform:uppercase;font-size:10px;margin-bottom:7px;
}
.margin hr{border:0;border-top:1px solid var(--rule);margin:14px 0 14px auto;width:44px}

.lede::first-letter{
  font-family:var(--display);font-size:3.4em;line-height:.84;
  float:left;padding:.06em .1em 0 0;color:var(--ornament);
}
blockquote{
  margin:30px 0;padding:0 0 0 22px;border-left:2px solid var(--ease);
  font-family:var(--display);font-style:italic;font-size:22px;line-height:1.5;
  color:var(--ink-soft);max-width:var(--measure);
}
.pull{
  font-family:var(--display);font-size:26px;font-style:italic;
  line-height:1.44;margin:32px 0;text-align:center;color:var(--ink);
}

/* ledger of commitments */
.ledger{margin:26px 0 0;padding:0;list-style:none;max-width:var(--measure)}
.ledger li{
  display:grid;grid-template-columns:24px 1fr;gap:14px;
  padding:12px 0;border-bottom:1px solid var(--rule);font-size:17px;
}
.ledger span:first-child{font-family:var(--data);font-size:14px;padding-top:3px}
.yes{color:var(--ease)}
.no{color:var(--tense)}

/* source stack */
.stack{list-style:none;margin:24px 0 0;padding:0;max-width:var(--measure)}
.stack li{padding:18px 0;border-bottom:1px solid var(--rule)}
.stack li:first-child{border-top:1px solid var(--rule)}
.stack .work{font-family:var(--display);font-size:22px;display:block}
.stack .meta{
  font-family:var(--data);font-size:11.5px;color:var(--ink-faint);
  letter-spacing:.04em;display:block;margin-top:4px;
}
.stack .note{display:block;margin-top:8px;font-size:16px;color:var(--ink-soft)}

.chart{
  width:100%;max-width:var(--measure);border-collapse:collapse;
  font-family:var(--data);font-size:12.5px;margin:24px 0 8px;
}
.chart th{
  text-align:left;font-weight:400;letter-spacing:.16em;text-transform:uppercase;
  font-size:9.5px;color:var(--ink-faint);padding:0 10px 9px 0;
  border-bottom:1px solid var(--rule);
}
.chart td{padding:9px 10px;border-bottom:1px solid var(--rule);vertical-align:top}
.chart td:first-child{padding-left:0}
.chart td:last-child{font-family:var(--body);font-size:15px;color:var(--ink-soft)}
.dig{color:var(--ease)}

footer{
  padding:44px 0 66px;margin-top:10px;
  font-family:var(--data);font-size:11px;letter-spacing:.06em;color:var(--ink-faint);
}
footer .tag{letter-spacing:.2em;text-transform:uppercase;margin-bottom:8px;color:var(--ink-soft)}

@media(max-width:900px){
  body{font-size:17px}
  .entry{grid-template-columns:minmax(0,1fr);gap:0;padding:40px 0}
  .margin{text-align:left;padding:0 0 20px}
  .margin hr{margin-left:0}
  nav .links{gap:16px}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---------- forms ---------- */
.form{max-width:var(--measure);margin-top:26px}
.field{margin-bottom:22px}
.field label{
  display:block;font-family:var(--data);font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-soft);margin-bottom:8px;
}
.field .hint{
  display:block;font-family:var(--data);font-size:11px;color:var(--ink-faint);
  margin-top:6px;letter-spacing:.02em;
}
input[type=text],input[type=email],input[type=url],input[type=number],select,textarea{
  width:100%;background:transparent;border:1px solid var(--rule);border-radius:2px;
  color:var(--ink);font-family:var(--body);font-size:16px;font-weight:300;
  padding:11px 13px;transition:border-color .2s;
}
textarea{min-height:140px;line-height:1.6;resize:vertical}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--ornament)}
input::placeholder,textarea::placeholder{color:var(--ink-faint)}
select{appearance:none;cursor:pointer}
.submit{
  font-family:var(--data);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  background:var(--ink);color:var(--ground);border:1px solid var(--ink);
  padding:13px 26px;cursor:pointer;border-radius:2px;
}
.submit:hover{background:transparent;color:var(--ink)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}
@media(max-width:640px){.two{grid-template-columns:1fr}}

/* ---------- tier table ---------- */
.tiers{width:100%;max-width:var(--measure);border-collapse:collapse;
  font-family:var(--data);font-size:13px;margin:26px 0 10px}
.tiers th{text-align:left;font-weight:400;letter-spacing:.16em;text-transform:uppercase;
  font-size:9.5px;color:var(--ink-faint);padding:0 12px 10px 0;border-bottom:1px solid var(--rule)}
.tiers td{padding:13px 12px 13px 0;border-bottom:1px solid var(--rule)}
.tiers .pc{color:var(--ease);font-size:16px}
.tiers .nm{font-family:var(--display);font-size:19px;color:var(--ink)}

/* ---------- fun ---------- */
.toys{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:20px;margin:36px 0 10px}
.toy{
  border:1px solid var(--rule);border-radius:2px;padding:30px 26px 26px;
  background:var(--ground-2);text-align:center;display:block;
  transition:border-color .25s,transform .25s;
}
.toy:hover{border-color:var(--ornament);transform:translateY(-2px)}
.toy .glyph{display:block;margin:0 auto 18px}
.toy .name{font-family:var(--display);font-size:26px;display:block;margin-bottom:8px}
.toy .sub{font-family:var(--data);font-size:11px;letter-spacing:.08em;
  color:var(--ink-faint);display:block;line-height:1.7}

.toybox{max-width:560px;margin:44px auto 0;text-align:center}
.answer{
  min-height:150px;display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-size:clamp(21px,3.2vw,28px);line-height:1.45;
  padding:26px;border:1px solid var(--rule);border-radius:2px;
  background:var(--ground-2);color:var(--ink);margin:26px 0;
}
.answer.empty{color:var(--ink-faint);font-style:italic}
.sky-note{font-family:var(--data);font-size:11px;letter-spacing:.06em;
  color:var(--ink-faint);line-height:1.8}
.upsell{
  margin-top:40px;padding-top:24px;border-top:1px solid var(--rule);
  font-family:var(--data);font-size:11.5px;letter-spacing:.06em;color:var(--ink-faint);
}
.upsell a{color:var(--ink-soft)}
@media(prefers-reduced-motion:no-preference){
  .shake{animation:sh .55s cubic-bezier(.36,.07,.19,.97)}
  @keyframes sh{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(4px)}
    30%,50%,70%{transform:translateX(-7px)}40%,60%{transform:translateX(7px)}}
  .reveal{animation:rv .6s ease-out}
  @keyframes rv{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
}