/*
  The note and the footer every page of marigold.cash shares.

  The header is the specimen note from the front page: the same note on every
  page, with the page's own title on its face and the row of buttons as tabs,
  the current page marked. Pages keep their own styles for what sits under the
  note; this file only owns .sky, .note and everything inside it, and .site-foot.

  tools/chrome.py stamps the header and footer markup into each page between
  the chrome:header and chrome:footer markers; edit the template there, not the
  pages. Design tokens are repeated here so the file stands alone.
*/
:root{
  --ink:#141f19; --note:#18291f; --note-edge:#0f1813; --gold:#e4a33d;
  --amber:#c9761f; --petal:#f3cf82; --cream:#efe7d3; --moss:#9aa894;
  /* the page under the note: day */
  --page-bg:#efe7d3; --page-fg:#141f19;
  --text:#3d4a42; --text-2:#4a5c52; --text-3:#2f3d35;
  --card:#fff; --line:#e5dcc4; --line-2:#d8cfb8; --line-3:#c9bfa4;
  --hair:rgba(154,168,148,.35); --hair-2:rgba(154,168,148,.45);
  --code-bg:#e5dcc4; --shadow:rgba(20,31,25,.5); --link-hover:#8a4c12;
}
/* night, for a reader who has not chosen; an explicit day choice still wins */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --page-bg:#0f1813; --page-fg:#e7dfcb;
    --text:#cfc7b3; --text-2:#b5ad9a; --text-3:#d9d1bd;
    --card:#18291f; --line:rgba(228,163,61,.22); --line-2:rgba(228,163,61,.3); --line-3:rgba(228,163,61,.35);
    --hair:rgba(239,231,211,.16); --hair-2:rgba(239,231,211,.22);
    --code-bg:rgba(228,163,61,.2); --shadow:rgba(0,0,0,.6); --link-hover:#f3cf82;
  }
}
/* night, chosen */
:root[data-theme="dark"]{
  --page-bg:#0f1813; --page-fg:#e7dfcb;
  --text:#cfc7b3; --text-2:#b5ad9a; --text-3:#d9d1bd;
  --card:#18291f; --line:rgba(228,163,61,.22); --line-2:rgba(228,163,61,.3); --line-3:rgba(228,163,61,.35);
  --hair:rgba(239,231,211,.16); --hair-2:rgba(239,231,211,.22);
  --code-bg:rgba(228,163,61,.2); --shadow:rgba(0,0,0,.6); --link-hover:#f3cf82;
}

/* ---------- the top bar: day and night, and the languages where a page has them ---------- */
  .topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:.5rem;
          background:var(--ink);border-bottom:1px solid rgba(228,163,61,.28);
          padding:.35rem .6rem;min-height:2.9rem}
  .topbar .grow{flex:1}
  .tgl{display:inline-flex;align-items:center;justify-content:center;width:2.4rem;height:2.4rem;
       background:none;border:1px solid rgba(228,163,61,.35);border-radius:6px;color:var(--petal);cursor:pointer}
  .tgl svg{width:1.1rem;height:1.1rem;display:block;fill:none;stroke:currentColor;stroke-width:1.6;
           stroke-linecap:round;stroke-linejoin:round}
  .tgl .moon{display:none}
  :root[data-theme="dark"] .tgl .moon{display:block}
  :root[data-theme="dark"] .tgl .sun{display:none}
  .langpick{display:inline-flex;align-items:center;gap:.4rem;border:1px solid rgba(228,163,61,.35);
            border-radius:6px;padding:0 .2rem 0 .55rem;height:2.4rem;color:var(--petal)}
  .langpick svg{width:1rem;height:1rem;flex:none;fill:none;stroke:currentColor;stroke-width:1.5}
  .langpick select{appearance:none;-webkit-appearance:none;background:none;border:0;color:var(--petal);
                   font-family:"IBM Plex Mono",monospace;font-size:16px;line-height:1;padding:.4rem 1.5rem .4rem .1rem;
                   cursor:pointer;background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
                   background-position:calc(100% - 12px) 52%,calc(100% - 7px) 52%;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
  .langpick select option{background:#18291f;color:#efe7d3}
  .sr{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
  @media (prefers-color-scheme:dark){
    :root:not([data-theme="light"]) .tgl .moon{display:block}
    :root:not([data-theme="light"]) .tgl .sun{display:none}
  }
.topbar .langpick[hidden]{display:none}
.tgl:focus-visible,.langpick:focus-within{outline:2px solid var(--gold);outline-offset:2px}

.sky{
  background:var(--ink);
  display:flex; flex-direction:column; align-items:center;
  padding:2.6rem 1rem 3.2rem;
  margin:0;
}

/* ---------- the note ---------- */
.note{
  position:relative;
  width:min(860px,94vw);
  margin:0;
  text-align:center;
  background:radial-gradient(120% 160% at 50% 38%, #1d3226 0%, var(--note) 46%, var(--note-edge) 100%);
  border:1px solid rgba(228,163,61,.55);
  border-radius:0;
  box-shadow:0 0 0 4px var(--ink), 0 0 0 5px rgba(228,163,61,.28), 0 24px 60px -24px rgba(0,0,0,.8);
  padding:2.6rem 2.8rem 2.2rem;
  color:var(--cream);
  opacity:0; transform:translateY(14px);
  animation:note-settle .9s cubic-bezier(.2,.7,.2,1) .15s forwards;
}
@keyframes note-settle{to{opacity:1;transform:none}}
.note::before{
  content:""; position:absolute; inset:10px;
  border:1px solid rgba(228,163,61,.35); pointer-events:none;
}

.note .micro{
  position:absolute; left:26px; right:26px;
  font-family:"IBM Plex Mono",monospace; font-size:6px; letter-spacing:.35em;
  white-space:nowrap; overflow:hidden; color:rgba(228,163,61,.38);
  text-transform:uppercase; user-select:none; margin:0;
}
.note .micro.top{top:15px}
.note .micro.bottom{bottom:15px}

.note .corner{
  position:absolute; font-family:"Fraunces",serif; font-weight:600; font-size:1.05rem;
  color:var(--gold); letter-spacing:.02em; font-variant-numeric:tabular-nums;
}
.note .corner.tl{top:26px;left:32px}
.note .corner.tr{top:26px;right:32px}
.note .corner.bl{bottom:26px;left:32px}
.note .corner.br{bottom:26px;right:32px}

/* ---------- the face ---------- */
.note .face{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:1.15rem; padding:1.2rem 0 .9rem;
}
.note .rosette{
  width:118px; height:118px; display:block; margin:0;
  animation:note-bloom 1.4s cubic-bezier(.2,.7,.25,1) .35s both;
}
@keyframes note-bloom{
  from{transform:rotate(-14deg) scale(.86);opacity:0}
  to{transform:none;opacity:1}
}

/* the wordmark: an h1 on the front page, a plain line everywhere else */
.note .wordmark{
  font-family:"Fraunces",serif;
  font-size:clamp(2.3rem,6vw,3.4rem); font-weight:500; line-height:1.1;
  letter-spacing:.34em; text-indent:.34em; /* optically recenter spaced caps */
  color:var(--cream); text-transform:uppercase; margin:0;
}
.note .wordmark a{color:inherit;text-decoration:none}

/* the page's title and strapline, on the face of the note */
.note .title,.note .head-text h1{
  font-family:"Fraunces",serif;
  font-size:clamp(1.35rem,3.4vw,1.9rem); font-weight:400; line-height:1.25;
  letter-spacing:.01em; text-transform:none; text-indent:0;
  color:var(--petal); margin:0; max-width:24em; text-wrap:balance;
}
.note .tagline,.note .tag{
  font-family:"Fraunces",serif;
  font-size:clamp(1.02rem,2.4vw,1.2rem); font-weight:300; font-style:normal;
  max-width:34em; line-height:1.55; color:var(--moss); margin:0;
}
.note .tagline strong{color:var(--petal);font-weight:400}

.note .divider{
  width:110px; height:1px; margin:0;
  background:linear-gradient(90deg,transparent,rgba(228,163,61,.7),transparent);
}

.note .status{
  font-family:"IBM Plex Mono",monospace; font-size:.72rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--gold); margin:0;
}
.note .status a{
  color:var(--gold); text-decoration:none;
  border-bottom:1px solid rgba(228,163,61,.45); padding-bottom:.15em;
}
.note .status a:hover,.note .status a:focus-visible{border-bottom-color:var(--gold);outline:none}

/* the litepaper's head-text block (one per language) sits on the face too */
.note .head-text > * + *{margin-top:1.15rem}
.note .actions{margin:0;display:flex;gap:.75rem;justify-content:center;flex-wrap:wrap}

/* ---------- the tabs ---------- */
.note .ways{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:.6rem .9rem; margin:.2rem 0 0; padding:0;
  font-family:"IBM Plex Mono",monospace; font-size:.68rem;
  letter-spacing:.14em; text-transform:uppercase;
}
.note .ways a{
  color:rgba(239,231,211,.7); text-decoration:none;
  padding:.45em .9em; border:1px solid rgba(228,163,61,.28); border-radius:0;
  background:none; transition:color .2s,border-color .2s;
}
.note .ways a:hover,.note .ways a:focus-visible{color:var(--petal);border-color:rgba(228,163,61,.7);outline:none}
.note .ways a[aria-current="page"]{color:var(--ink);background:var(--gold);border-color:var(--gold);font-weight:500}
.note .ways a.take{color:var(--ink);background:var(--gold);border-color:var(--gold);font-weight:500}
.note .ways a.take:hover,.note .ways a.take:focus-visible{background:var(--petal);border-color:var(--petal);color:var(--ink)}

/* serial row */
.note .serial-row{
  display:flex; justify-content:space-between;
  padding:0 2.6rem; margin:1.6rem 0 0;
  font-family:"IBM Plex Mono",monospace; font-size:.7rem; letter-spacing:.14em;
  color:rgba(239,231,211,.55);
}

/* a page that is not the front page carries the same note a little tighter */
.note.compact{padding:2.2rem 2.8rem 1.9rem}
.note.compact .face{gap:.95rem;padding:.9rem 0 .6rem}
.note.compact .rosette{width:84px;height:84px}
.note.compact .wordmark{font-size:clamp(1.5rem,4vw,2.1rem)}

@media (max-width:560px){
  .note,.note.compact{padding:2.2rem 1.3rem 1.8rem}
  .note .corner{font-size:.85rem}
  .note .corner.tl{left:22px}.note .corner.tr{right:22px}
  .note .corner.bl{left:22px}.note .corner.br{right:22px}
  .note .serial-row{flex-direction:column;gap:.4rem;align-items:center;margin-top:1.3rem}
  .note .wordmark{letter-spacing:.22em;text-indent:.22em}
}
@media (prefers-reduced-motion:reduce){
  .note,.note .rosette{animation:none;opacity:1;transform:none}
}

/* ---------- the footer: a full-width band in the note's green, the page ends there ---------- */
.site-foot{
  background:var(--ink); color:var(--moss);
  margin:4rem 0 0; padding:2.6rem 1.2rem 3rem;
  font-family:"IBM Plex Mono",monospace; font-size:.72rem; letter-spacing:.12em;
  text-transform:uppercase; line-height:2.2; text-align:center;
}
.site-foot .inner{max-width:62rem;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:.9rem}
.site-foot .lead{
  margin:0; font-family:"Fraunces",serif; font-size:.95rem; font-weight:300; letter-spacing:0;
  text-transform:none; line-height:1.75; color:var(--moss);
}
.site-foot .lead a{color:var(--petal);border:0}
.site-foot hr{width:100%;max-width:62rem;height:1px;border:0;margin:.6rem 0 1rem;background:rgba(228,163,61,.22)}
.site-foot .links{display:flex;flex-wrap:wrap;justify-content:center;gap:.2rem 1.6rem;margin:0;padding:0;list-style:none}
.site-foot a{color:var(--gold);text-decoration:none;border-bottom:1px solid rgba(228,163,61,.35);padding-bottom:.1em}
.site-foot a:hover,.site-foot a:focus-visible{color:var(--petal);border-bottom-color:var(--petal);outline:none}
/* inside another page's own green band (the litepaper): just the links under a hairline */
.site-foot.inband{background:none;margin:1.6rem auto 0;padding:1.4rem 0 0;border-top:1px solid rgba(228,163,61,.22);max-width:62rem}

/* ---------- back to the top: appears once the note has scrolled away ---------- */
.to-top{
  position:fixed; right:1.1rem; bottom:1.1rem; z-index:30;
  display:inline-flex; align-items:center; justify-content:center;
  width:2.6rem; height:2.6rem; border-radius:6px;
  background:var(--ink); color:var(--petal); border:1px solid rgba(228,163,61,.45);
  box-shadow:0 10px 24px -12px rgba(0,0,0,.7); text-decoration:none;
  opacity:.92; transition:opacity .2s,border-color .2s;
}
.to-top svg{width:1.1rem;height:1.1rem;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.to-top:hover,.to-top:focus-visible{opacity:1;border-color:var(--gold);outline:none;color:var(--gold)}
.to-top[hidden]{display:none}
@media (prefers-reduced-motion:reduce){.to-top{transition:none}}