/* The look of the front page, shared by every other page: the same night
   sky behind, the same engraved gold labels, light serif headings with a
   gold italic line, hairline square frames and outlined gold buttons. */

:root{
  --void:#05060E;
  --deep:#0A0F24;
  --nebula:#2B1F4A;
  --star:#F4F1E4;
  --brass:#C9A227;
  --brass-dim:#7A6318;
  --giant:#6FA8C7;
  --ink:rgba(244,241,228,.78);
  --dust:rgba(244,241,228,.62);
  --hair:rgba(244,241,228,.13);
  --panel:rgba(10,15,36,.55);
  --ok:#8fd6a0;
  --bad:#f0a8a8;

  --display:"Cormorant Garamond",Georgia,serif;
  --engrave:"Cinzel",Georgia,serif;
  --body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;

  --gut:clamp(1.25rem,5vw,5.5rem);
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{background:var(--void);color-scheme:dark}
body{
  margin:0;min-height:100vh;position:relative;
  color:var(--star);font-family:var(--body);font-weight:300;line-height:1.7;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
body.with-topnav{padding-top:64px}

/* the sky: nebula glow, then two layers of stars, then a little grain */
body::before{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    url("/images/sky-bright.svg") 0 0/1100px 1100px,
    url("/images/sky-dust.svg") 0 0/420px 420px,
    radial-gradient(120% 80% at 78% 8%,rgba(43,31,74,.55),transparent 62%),
    radial-gradient(90% 60% at 12% 96%,rgba(10,15,36,.9),transparent 60%),
    radial-gradient(140% 100% at 50% 50%,transparent 42%,rgba(5,6,14,.85) 100%),
    var(--void);
}
body::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

::selection{background:var(--brass);color:var(--void)}
img{max-width:100%}
a{color:var(--brass);text-decoration-color:rgba(201,162,39,.45);text-underline-offset:3px}
a:hover{text-decoration-color:var(--brass)}
:focus-visible{outline:2px solid var(--giant);outline-offset:3px;border-radius:2px}
b,strong{font-weight:400;color:var(--star)}
code{font-family:var(--mono);font-size:.9em;color:var(--brass)}

.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--brass);color:var(--void);
  padding:.7rem 1.1rem;font-family:var(--engrave);letter-spacing:.18em;text-decoration:none}
.skip:focus{left:.6rem;top:.6rem}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.wrap{max-width:1180px;margin:0 auto;padding:0 var(--gut)}

/* ---- type ---- */
.eyebrow{
  font-family:var(--engrave);font-size:.68rem;font-weight:500;
  letter-spacing:.42em;text-transform:uppercase;color:var(--brass);
  display:flex;align-items:center;gap:.9rem;margin:0 0 1.4rem;
}
.eyebrow::after{content:"";flex:1;height:1px;max-width:180px;
  background:linear-gradient(90deg,var(--brass-dim),transparent)}
.eyebrow.plain::after{display:none}

h1,h2,h3{font-family:var(--display);font-weight:300;line-height:1.04;letter-spacing:-.015em;color:var(--star)}
h1{font-size:clamp(2.6rem,6.4vw,4.8rem);margin:0 0 1.2rem}
h2{font-size:clamp(1.9rem,3.6vw,2.8rem);margin:0 0 1rem}
h3{font-size:clamp(1.35rem,2vw,1.6rem);margin:0 0 .5rem}
h1 em,h2 em,h3 em{font-style:italic;color:var(--brass)}
h1 .ln{display:block}

p,li{color:var(--ink)}
.lede{font-size:clamp(1.02rem,1.5vw,1.16rem);color:rgba(244,241,228,.85);max-width:58ch}
.small,.doc .small{font-size:.86rem}
.updated,.doc .updated{font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--dust);margin:0 0 2.4rem}

/* ---- buttons ---- */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.8rem;
  min-height:48px;padding:.95rem 1.9rem;border:1px solid var(--brass-dim);background:transparent;
  font-family:var(--engrave);font-size:.74rem;font-weight:500;line-height:1.3;
  letter-spacing:.24em;text-transform:uppercase;color:var(--star);text-align:center;
  cursor:pointer;overflow:hidden;text-decoration:none;isolation:isolate;
  transition:border-color .4s var(--ease),color .4s var(--ease);
}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--brass);
  transform:translateX(-101%);transition:transform .55s var(--ease)}
.btn:hover,.btn:focus-visible{border-color:var(--brass);color:var(--void)}
.btn:hover::before,.btn:focus-visible::before{transform:translateX(0)}
.btn.primary{background:var(--brass);border-color:var(--brass);color:var(--void)}
.btn.primary::before{background:var(--star)}
.btn.ghost{border-color:var(--hair);color:var(--dust)}
.btn.ghost::before{background:rgba(244,241,228,.06)}
.btn.ghost:hover,.btn.ghost:focus-visible{border-color:var(--star);color:var(--star)}
.btn[disabled]{opacity:.6;cursor:wait}
@media (prefers-reduced-motion:reduce){.btn::before{transition:none}}

/* ---- framed boxes, like the front page's figures ---- */
.frame{position:relative;border:1px solid var(--hair);background:var(--panel)}
.frame::before,.frame::after{content:"";position:absolute;width:12px;height:12px;pointer-events:none}
.frame::before{top:6px;left:6px;border-top:1px solid var(--brass-dim);border-left:1px solid var(--brass-dim)}
.frame::after{bottom:6px;right:6px;border-bottom:1px solid var(--brass-dim);border-right:1px solid var(--brass-dim)}

/* ---- text pages: terms, privacy, returns, accessibility, contact ---- */
.doc{max-width:780px;margin:0 auto;padding:clamp(3rem,9vh,6rem) var(--gut) 5rem}
.doc h2{font-size:clamp(1.65rem,3vw,2.15rem);margin:3.2rem 0 .9rem;padding-top:1.6rem;border-top:1px solid var(--hair)}
.doc h3{font-size:1.3rem;margin:1.8rem 0 .5rem}
.doc p,.doc li{font-size:.98rem}
.doc ul,.doc ol{padding-left:1.3rem}
.doc li{margin:.35rem 0}
.doc li::marker{color:var(--brass-dim)}

.toc,.summary,.quick{padding:1.4rem 1.6rem;margin:0 0 2.4rem}
.toc ol,.summary ul,.quick ul{margin:0;padding-left:1.3rem}
.toc li{font-size:.92rem;margin:.2rem 0}
.toc li::marker{font-family:var(--mono);font-size:.8em;color:var(--brass)}

table{width:100%;border-collapse:collapse;margin:1.2rem 0;font-size:.92rem}
th,td{text-align:left;padding:.75rem .6rem;border-bottom:1px solid var(--hair);vertical-align:top}
th{font-family:var(--mono);font-size:.62rem;font-weight:400;letter-spacing:.18em;text-transform:uppercase;color:var(--dust)}
td{color:var(--ink)}
td:first-child{color:var(--star)}
table:focus-visible{outline:2px solid var(--giant);outline-offset:2px}
@media (max-width:600px){table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}}

/* ---- forms, like the front page's name field ---- */
label{display:block;font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--dust);margin-bottom:.6rem}
input,select,textarea{width:100%;font:inherit;font-size:1rem;color:var(--star);
  background:rgba(10,15,36,.5);border:1px solid var(--hair);border-radius:0;padding:.8rem 1rem;min-height:48px}
select{appearance:none;-webkit-appearance:none;padding-right:2.6rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' stroke='%23C9A227' stroke-width='1.4' fill='none'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1rem center;background-size:12px}
select option{background:var(--deep);color:var(--star)}
textarea{min-height:170px;resize:vertical;line-height:1.6}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--brass)}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--giant);outline-offset:2px}
::placeholder{color:rgba(244,241,228,.3)}

/* ---- questions, like the front page's ---- */
details.q{border-bottom:1px solid var(--hair)}
details.q summary{list-style:none;cursor:pointer;padding:1.15rem 2rem 1.15rem 0;position:relative;
  font-family:var(--display);font-size:1.3rem;color:var(--star)}
details.q summary::-webkit-details-marker{display:none}
details.q summary::after{content:"+";position:absolute;right:.3rem;top:1.1rem;
  font-family:var(--mono);font-size:1rem;color:var(--brass);transition:transform .3s}
details.q[open] summary::after{transform:rotate(45deg)}
details.q p{margin:0;padding:0 0 1.3rem;font-size:.96rem}

/* ---- footer, like the front page's ---- */
.site-foot{border-top:1px solid var(--hair);padding:2.6rem 0;margin-top:3rem}
.foot-nav{display:flex;flex-wrap:wrap;gap:.4rem 1.8rem;margin:0 0 1.2rem}
.foot-nav a{display:inline-flex;align-items:center;min-height:32px;font-family:var(--mono);font-size:.62rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--dust);text-decoration:none;border-bottom:1px solid transparent}
.foot-nav a:hover{color:var(--star);border-bottom-color:var(--hair)}
.site-foot p{font-size:.76rem;line-height:1.7;color:var(--dust);max-width:64ch;margin:0}

@media (max-width:560px){
  .eyebrow{letter-spacing:.3em;font-size:.64rem}
  .eyebrow::after{max-width:60px}
}