/* What both pages share: the fonts, the colours, the top bar and the foot.
   Anything that belongs to one page only stays inline in that page. */

@font-face{
  font-family:Spectral;
  src:url("fonts/Spectral.ttf") format("truetype");
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:Spectral;
  src:url("fonts/Spectral-Italic.ttf") format("truetype");
  font-weight:400;font-style:italic;font-display:swap;
}

/* dark is the default; :root[data-theme="light"] below overrides it */
:root{
  --bg:#0c0c0c;
  --ink:#ece7df;
  --dim:#8a8378;
  --line:rgba(236,231,223,.14);
  --accent:#c8912f;
  --gold:#c8912f;
  --rubric:#b6472f;
  --glow:rgba(200,145,47,.20);
  --glow-soft:rgba(200,145,47,.05);
  --plate:#15130f;
  /* the bands of the mark, inner to outer: G earth, O water, U air, D fire */
  --band-g:#EFE2D2;
  --band-o:#DCE8F0;
  --band-u:#F2F6F8;
  --band-d:#F6DED8;
}

:root[data-theme="light"]{
  --bg:#f4f5f7;
  --ink:#14110e;
  --dim:#6b6357;
  --line:rgba(20,17,14,.16);
  --accent:#9b6f1c;
  --gold:#c8912f;
  --rubric:#9d3421;
  --glow:rgba(200,145,47,.26);
  --glow-soft:rgba(200,145,47,.07);
  --plate:#ece7dc;
  --band-g:#2A1D12;
  --band-o:#0D1B28;
  --band-u:#1C2429;
  --band-d:#24100C;
}

*{box-sizing:border-box}

/* The mark's own glow and spark are allowed to paint outside it; clip rather than
   hidden, so nothing here can ever turn into a sideways scroll on a phone. */
html{height:100%;overflow-x:clip}

body{
  margin:0;min-height:100%;
  background:var(--bg);color:var(--ink);
  font-family:Spectral,Georgia,"Times New Roman",serif;
  font-size:18px;line-height:1.7;
  -webkit-font-smoothing:antialiased;
  display:flex;flex-direction:column;
  overflow-x:hidden;
  transition:background .35s ease,color .35s ease;
}

.bar{
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:18px clamp(20px,5vw,56px);
  border-bottom:1px solid var(--line);
  font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--dim);
}
.bar a{color:inherit;text-decoration:none;transition:color .2s}
.bar a:hover,.bar a:focus-visible{color:var(--accent)}
.bar .right{display:flex;align-items:center;gap:clamp(14px,3vw,28px)}
.bar .project{color:var(--accent)}
.bar .project b{font-weight:400}
.bar .project i{font-style:normal;color:var(--dim)}

.themer{
  appearance:none;border:1px solid var(--line);background:transparent;
  color:var(--dim);font:inherit;font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  padding:7px 12px;border-radius:1px;cursor:pointer;
  transition:color .2s,border-color .2s;
}
.themer:hover,.themer:focus-visible{color:var(--accent);border-color:var(--accent)}

footer{
  padding:20px clamp(20px,5vw,56px);
  border-top:1px solid var(--line);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-size:11px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--dim);
}
footer a{color:inherit;text-decoration:none;transition:color .2s}
footer a:hover,footer a:focus-visible{color:var(--accent)}

@media (max-width:820px){
  .bar{font-size:10px;letter-spacing:.18em;flex-wrap:wrap}
}