/* Palette, headline face, cards, and the night toggle. Shared by every page.

   Headline face is Libre Baskerville 700. Zilla Slab was a slab and Bodoni a
   Didone. Both read as a display face fighting the sans around them. Baskerville
   is an ordinary book serif, so it sits under Space Grotesk and Space Mono
   instead of arguing with them, and at 700 it still lands hard on paper. */

/* Day is the teal field. Plain white paper left the page reading as black ink
   on nothing, with the teal and brass only findable if you went looking. The
   stock is tinted, the section bands are teal, and the range is inked teal on
   every ridge instead of near-black on the front one. */
:root{
  --bg:#e9f0ec;--ink:#0d1a16;--ink-2:rgba(13,26,22,.76);--ink-3:rgba(13,26,22,.5);
  --line:rgba(12,90,78,.24);--panel:rgba(12,90,78,.04);
  --teal:#0c5a4e;--brass:#7a5a1f;
  --headerbg:rgba(233,240,236,.92);
  --brassline:rgba(122,90,31,.42);--brassfill:rgba(122,90,31,.1);
  --brassglow:rgba(122,90,31,.18);
  --plateline:rgba(12,90,78,.32);--platebg:rgba(248,251,249,.7);
  --markRing:#0c5a4e;--markDot:#7a5a1f;
  --wm:#000000;
  --scroll:rgba(13,26,22,.26);--scroll-hi:rgba(13,26,22,.44);

  /* card surface, one step off the paper so a plate is visibly a plate */
  --surface:#f8fbf9;
  --surface-line:rgba(12,90,78,.2);
  --band-wash:rgba(12,90,78,.06);

  /* per-app accents. Deepened for paper, lifted again under night. */
  --nous:#22608e;      --nous-wash:rgba(34,96,142,.075);
  --minerva:#5a3f8e;   --minerva-wash:rgba(90,63,142,.075);
  --ponos:#8a2f2f;     --ponos-wash:rgba(138,47,47,.075);
  --pheme:#9c3f66;     --pheme-wash:rgba(156,63,102,.075);
}
:root[data-theme="night"]{
  --bg:#050f0d;--ink:#e3ece7;--ink-2:rgba(227,236,231,.64);--ink-3:rgba(227,236,231,.34);
  --line:rgba(227,236,231,.13);--panel:rgba(227,236,231,.03);
  --teal:#5cb69f;--brass:#cfa96a;
  --headerbg:rgba(5,15,13,.88);
  --brassline:rgba(207,169,106,.32);--brassfill:rgba(207,169,106,.1);
  --brassglow:rgba(207,169,106,.16);
  --plateline:rgba(227,236,231,.2);--platebg:rgba(227,236,231,.028);
  --markRing:#2f7d6c;--markDot:#cfa96a;
  --wm:#ffffff;
  --scroll:rgba(227,236,231,.18);--scroll-hi:rgba(227,236,231,.3);

  --surface:rgba(227,236,231,.035);
  --surface-line:rgba(227,236,231,.14);
  --band-wash:transparent;

  --nous:#6cb1ff;      --nous-wash:rgba(108,177,255,.07);
  --minerva:#a78bfa;   --minerva-wash:rgba(167,139,250,.07);
  --ponos:#d4736f;     --ponos-wash:rgba(212,115,111,.07);
  --pheme:#e585ab;     --pheme-wash:rgba(229,133,171,.07);
}

body{transition:background-color .7s var(--ease),color .7s var(--ease)}
.veil{background:linear-gradient(90deg,var(--bg) 0%,var(--bg) 26%,transparent 54%)}

/* The wordmark reads as ink, not as another teal element. ISO stays brass. */
.wm{color:var(--wm)}

/* A scrollbar that belongs to the page instead of the OS. */
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-corner{background:transparent}
::-webkit-scrollbar-thumb{background:var(--scroll);border-radius:99px;
  border:3px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:var(--scroll-hi);
  border:3px solid transparent;background-clip:padding-box}
html{scrollbar-width:thin;scrollbar-color:var(--scroll) transparent}

/* ---------- headline face ---------- */
h1,h2{font-family:"Libre Baskerville",Baskerville,Georgia,serif;font-weight:700;
      letter-spacing:-.022em;text-transform:none;color:var(--ink)}
h1{font-size:clamp(37px,4.6vw,76px);line-height:1.03}
h2{font-size:clamp(26px,3.1vw,48px);line-height:1.1}
h1 .lo,h2 .lo{font-style:italic;font-weight:400;color:var(--teal)}
.serif{font-family:"Libre Baskerville",Baskerville,Georgia,serif;font-style:italic;
       font-weight:400;color:var(--teal);font-size:clamp(19px,2.2vw,31px);line-height:1.4}

.night-btn{background:none;border:1px solid var(--line);color:var(--ink-3);cursor:pointer;
  width:32px;height:32px;display:grid;place-items:center;margin-left:14px;flex:0 0 auto;
  transition:color .4s var(--ease),border-color .4s var(--ease)}
.night-btn:hover{color:var(--brass);border-color:var(--brassline)}
.night-btn svg{width:15px;height:15px}
:root[data-theme="night"] .night-btn .moon{display:none}
:root:not([data-theme="night"]) .night-btn .sun{display:none}
.hr{display:flex;align-items:center;gap:0;min-width:0}

/* ---------- plates ----------
   One card component. The apps carry their own accent, the numbered rules
   carry brass. Border only on hover, never an opacity fade. */
.plates{display:grid;gap:clamp(15px,1.7vw,22px);margin-top:16px;
  grid-template-columns:repeat(2,1fr)}
.plates.three{grid-template-columns:repeat(3,1fr)}

.plate{
  --app:var(--teal);--app-wash:transparent;
  position:relative;display:flex;flex-direction:column;
  background:linear-gradient(180deg,var(--app-wash),transparent 200px),var(--surface);
  border:1px solid var(--surface-line);
  border-top:2px solid var(--app);
  padding:clamp(24px,2.3vw,32px) clamp(22px,2.1vw,30px) clamp(26px,2.4vw,32px);
  transition:border-color .5s var(--ease);
}
.plate:hover{border-color:var(--app)}
.plate.nous{--app:var(--nous);--app-wash:var(--nous-wash)}
.plate.minerva{--app:var(--minerva);--app-wash:var(--minerva-wash)}
.plate.ponos{--app:var(--ponos);--app-wash:var(--ponos-wash)}
.plate.pheme{--app:var(--pheme);--app-wash:var(--pheme-wash)}

.plate h3{
  font-family:"Libre Baskerville",Baskerville,Georgia,serif;font-weight:700;
  font-size:clamp(21px,1.9vw,28px);line-height:1.15;letter-spacing:-.018em;
  color:var(--ink);margin-bottom:5px;
}
.plate .gloss{
  font-family:"Libre Baskerville",Baskerville,Georgia,serif;font-style:italic;
  font-weight:400;font-size:14px;line-height:1.5;color:var(--app);margin-bottom:15px;
}
.plate .note{
  font-family:"Space Mono",monospace;font-size:9.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:15px;margin-top:-9px;
}
.plate p{max-width:none;font-size:14.5px;line-height:1.82;margin-bottom:0}
.plate .with{
  margin-top:16px;font-size:13.5px;line-height:1.75;color:var(--ink-3);
  border-left:2px solid var(--app);padding-left:14px;
}
.plate .with b{color:var(--ink-2);font-weight:500}
.plate .n{
  font-family:"Space Mono",monospace;font-size:10.5px;letter-spacing:.22em;
  color:var(--app);display:block;margin-bottom:16px;
}

/* the numbered rules are plates with the brass accent */
.rules{list-style:none;display:grid;gap:clamp(15px,1.7vw,22px);margin-top:16px;
  grid-template-columns:repeat(3,1fr);max-width:1180px}
.rules.two{grid-template-columns:repeat(2,1fr)}
.rules > li{
  --app:var(--brass);--app-wash:transparent;
  display:flex;flex-direction:column;
  background:var(--surface);border:1px solid var(--surface-line);
  border-top:2px solid var(--brass);
  padding:clamp(24px,2.3vw,32px) clamp(22px,2.1vw,30px) clamp(26px,2.4vw,32px);
  transition:border-color .5s var(--ease);
}
.rules > li:hover{border-color:var(--brassline)}
.rules .n{font-family:"Space Mono",monospace;font-size:10.5px;letter-spacing:.22em;
  color:var(--brass);display:block;margin-bottom:16px}
.rules h3{
  font-family:"Libre Baskerville",Baskerville,Georgia,serif;font-weight:700;
  font-size:clamp(19px,1.7vw,25px);line-height:1.18;letter-spacing:-.018em;
  margin:0 0 12px;color:var(--ink);
}
.rules p{max-width:none;font-size:14.5px;line-height:1.82;margin:0}

@media (max-width:1020px){
  .plates,.plates.three,.rules,.rules.two{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
  .plates,.plates.three,.rules,.rules.two{grid-template-columns:1fr}
}

/* ---------- tables and lists used on the inner pages ---------- */
.spec{width:100%;max-width:1180px;border-collapse:collapse;margin-top:8px}
.spec th,.spec td{text-align:left;padding:15px 18px 15px 0;border-bottom:1px solid var(--line);
  vertical-align:top;font-size:14px;line-height:1.75;color:var(--ink-2)}
.spec th{font-family:"Space Mono",monospace;font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--brass);font-weight:400;white-space:nowrap}
.spec td:first-child{font-family:"Space Mono",monospace;font-size:12px;color:var(--ink);
  white-space:nowrap;padding-right:34px}

pre.code{max-width:1180px;overflow-x:auto;border:1px solid var(--surface-line);
  padding:20px 22px;background:var(--surface);
  font-family:"Space Mono",monospace;font-size:12.5px;line-height:1.85;
  color:var(--ink-2);margin-top:6px}
pre.code b{color:var(--brass);font-weight:400}

/* pricing */
.plans{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(15px,1.7vw,22px);
  max-width:1180px;margin-top:16px}
.plan{background:var(--surface);border:1px solid var(--surface-line);
  border-top:2px solid var(--brass);padding:32px 30px 36px}
.plan .tier{font-family:"Space Mono",monospace;font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--brass);margin-bottom:14px}
.plan .price{font-family:"Libre Baskerville",Baskerville,Georgia,serif;font-weight:700;
  font-size:42px;line-height:1;color:var(--ink);margin-bottom:8px;letter-spacing:-.02em}
.plan .price small{font-size:15px;font-weight:400;color:var(--ink-3)}
.plan .who{font-size:14px;color:var(--ink-2);margin-bottom:22px;max-width:none}
.plan ul{list-style:none;margin-bottom:26px}
.plan li{font-size:13.5px;line-height:1.7;color:var(--ink-2);padding:9px 0 9px 20px;
  border-bottom:1px solid var(--line);position:relative}
.plan li:last-child{border-bottom:0}
.plan li::before{content:"";position:absolute;left:0;top:17px;width:7px;height:1px;
  background:var(--brass)}
@media (max-width:820px){.plans{grid-template-columns:1fr}}

/* the quiet app index on the homepage keeps a dot of each app's colour */
.apps a b::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;
  background:var(--app,var(--teal));margin-right:11px;vertical-align:middle;
  position:relative;top:-1px}
.apps a.nous{--app:var(--nous)}
.apps a.minerva{--app:var(--minerva)}
.apps a.ponos{--app:var(--ponos)}
.apps a.pheme{--app:var(--pheme)}

/* ---------- mobile ---------- */
@media (max-width:900px){
  header{padding:14px 16px}
  header nav{display:flex;gap:16px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  header nav::-webkit-scrollbar{display:none}
  header nav a{white-space:nowrap;font-size:9.5px}
  .brand svg{width:28px;height:28px}
  .wm{font-size:10.5px;letter-spacing:.2em}
  main section{padding-top:96px;padding-bottom:80px;min-height:0}
  h1{font-size:clamp(32px,8.4vw,46px)}
  h2{font-size:clamp(24px,6.4vw,34px)}
  .spec td:first-child{white-space:normal}

  /* The range is scenery, not content. On a phone it took half the screen
     behind the text, so it drops back and the words come forward. */
  #bg{opacity:.34}
  .veil{background:linear-gradient(180deg,var(--bg) 0%,var(--bg) 34%,transparent 88%)}
}
@media (max-width:560px){
  .hr{gap:8px}
  header nav{max-width:52vw}
}