/* ============================================================
   Moon Dust Foundry
   Palette : cast plaster + cooled bronze
   Type    : Jost       — the Foundry (maker, apps, structure)
             Newsreader — the Stories (books, narrative)
   Idea    : everything drawn is a line and a point. Nothing else.

   The site is pinned to its daylight palette on purpose, so a
   visitor whose phone is in dark mode still sees it as intended.
   ============================================================ */

:root{
  --ground:   #e9e8e4;
  --raise:    #f4f3f0;
  --ink:      #191a1c;
  --ink-2:    #6d6e73;
  --ink-3:    #93949a;
  --rule:     rgba(25,26,28,.16);
  --rule-2:   rgba(25,26,28,.08);
  --bronze:   #7f6a4a;
  --bronze-t: rgba(127,106,74,.30);
  --shade:    rgba(25,26,28,.05);

  --measure: 62ch;
  --gutter: clamp(20px, 5vw, 56px);
  --colw: 168px;

  --t-xs: 10.5px;
  --t-sm: 13px;
  --t-base: 16px;
  --t-lg: 18.5px;

  color-scheme: light;
}

*{box-sizing:border-box}
body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:'Jost',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-weight:300;
  font-size:var(--t-base);
  line-height:1.72;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit}
img{max-width:100%;display:block}
button{font:inherit;color:inherit}
:focus-visible{outline:1.5px solid var(--bronze);outline-offset:3px}

html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
  html{scroll-behavior:auto!important}
}

/* ---------- shell ---------- */
.shell{max-width:1080px;margin:0 auto;padding:0 var(--gutter)}

/* ---------- the marginal grid ----------
   Section labels sit in the left margin like notes on a printed page.
   Below 900px they fold above the text block. */
.band{
  display:grid;
  grid-template-columns:var(--colw) minmax(0,1fr);
  gap:0 clamp(24px,4vw,52px);
  padding:clamp(52px,7vw,86px) 0;
  border-top:1px solid var(--rule-2);
}
.band-label{
  font-size:var(--t-xs);
  letter-spacing:.30em;
  text-transform:uppercase;
  color:var(--ink-3);
  font-weight:400;
  padding-top:.55em;
}
.band-main{min-width:0}
/* a band with no margin note runs the full measure instead of indenting */
.band-full{
  grid-template-columns:minmax(0,1fr);
  border-top:none;                       /* the list draws its own rule */
  padding-top:clamp(26px,3.5vw,44px);
}
@media (max-width:900px){
  .band{grid-template-columns:1fr;gap:0}
  .band-label{padding-top:0;margin-bottom:22px}
  .band-label:empty{display:none}
}

.h2{
  font-family:'Newsreader',Georgia,serif;
  font-weight:300;
  font-size:clamp(30px,4.4vw,42px);
  line-height:1.12;
  letter-spacing:-.005em;
  margin:0 0 14px;
  text-wrap:balance;
}
.lede{
  max-width:var(--measure);
  color:var(--ink-2);
  font-size:var(--t-lg);
  line-height:1.75;
  margin:0 0 34px;
}
.lede:last-child{margin-bottom:0}

/* ---------- brand ----------
   logo.png is the full lockup; logo-mark.png is just the M, for inner pages.
   Both are transparent PNGs in --ink, so they sit straight on the ground.
   Replace those three files to change the logo; no markup changes needed. */
.brand{display:inline-block;text-decoration:none;line-height:0}
.logo{width:min(300px,66vw);height:auto}
.logo-mark{width:44px;height:auto}

/* ---------- hero ---------- */
.hero{padding:clamp(56px,9vw,104px) 0 clamp(40px,6vw,64px)}
.hero-line{
  font-family:'Newsreader',Georgia,serif;
  font-style:italic;
  font-weight:300;
  font-size:clamp(20px,3.0vw,27px);
  line-height:1.32;
  letter-spacing:-.005em;
  max-width:none;
  margin:clamp(30px,4.4vw,44px) 0 0;
  text-wrap:balance;
}
.hero-sub{
  margin:16px 0 0;
  color:var(--ink-2);
  font-size:var(--t-sm);
  letter-spacing:.13em;
  text-transform:uppercase;
}

/* ---------- the three-line list ---------- */
.contents{border-top:1px solid var(--rule)}
.entry{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:baseline;
  gap:16px 24px;
  padding:26px 0;
  border-bottom:1px solid var(--rule-2);
  text-decoration:none;
  transition:padding-left .3s cubic-bezier(.22,.61,.36,1);
}
.entry:hover,.entry:focus-visible{padding-left:10px}
.entry-t{
  font-family:'Newsreader',Georgia,serif;
  font-weight:300;
  font-size:clamp(25px,3.6vw,34px);
  line-height:1.15;
}
.entry-d{
  grid-column:1/2;
  color:var(--ink-2);
  font-size:var(--t-sm);
  max-width:46ch;
  margin-top:4px;
}
.entry-go{
  font-size:var(--t-xs);
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--ink-3);
  white-space:nowrap;
  align-self:center;
  grid-row:1/3;
  grid-column:2/3;
}
.entry:hover .entry-go,.entry:focus-visible .entry-go{color:var(--bronze)}
@media (max-width:620px){
  .entry{grid-template-columns:minmax(0,1fr);gap:0}
  .entry-go{grid-row:auto;grid-column:1/2;align-self:start;margin-top:12px}
}
.entry-lead{border-bottom-color:var(--rule)}
.entry-lead .entry-go{color:var(--bronze)}
.entry-tag{
  display:inline-block;
  vertical-align:middle;
  margin-left:14px;
  font-size:var(--t-xs);
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--bronze);
  border:1px solid var(--bronze-t);
  border-radius:999px;
  padding:3px 11px 2px;
  text-indent:.22em;
  line-height:1.6;
}

/* ---------- an app, listed under Apps ---------- */
.app-item{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:clamp(22px,3.5vw,42px);
  align-items:start;
  text-decoration:none;
  padding:30px 0 6px;
  border-top:1px solid var(--rule);
  transition:padding-left .3s cubic-bezier(.22,.61,.36,1);
}
.app-item:hover,.app-item:focus-visible{padding-left:10px}
.app-item-tx{display:block;min-width:0}
.app-item-d{
  display:block;color:var(--ink-2);
  font-size:var(--t-lg);line-height:1.75;
  max-width:var(--measure);margin-bottom:26px;
}
.app-item:hover .link,.app-item:focus-visible .link{color:var(--bronze);border-bottom-color:var(--bronze)}
@media (max-width:620px){.app-item{grid-template-columns:1fr}}

/* Aura's placeholder mark: a field and a point — the same vocabulary
   as the Foundry mark. Nothing pictorial. */
.aura-mark{
  position:relative;
  width:clamp(108px,17vw,150px);
  aspect-ratio:1;
  border:1px solid var(--rule);
  border-radius:50%;
  display:grid;
  place-items:center;
  background:radial-gradient(circle at 50% 42%, var(--shade) 0%, transparent 68%);
}
.aura-mark::after{
  content:"";width:7px;height:7px;border-radius:50%;
  background:var(--bronze);
  transform:translateY(-6%);
}
.aura-name{
  display:block;
  font-family:'Newsreader',Georgia,serif;
  font-weight:300;
  font-size:clamp(25px,3.4vw,32px);
  line-height:1.12;
  color:var(--ink);
  margin:0 0 7px;
}
.aura-sub{
  display:block;
  font-size:var(--t-xs);letter-spacing:.24em;text-transform:uppercase;
  color:var(--bronze);margin:0 0 20px;
}

/* ---------- links ---------- */
.link{
  display:inline-block;
  font-size:var(--t-xs);
  letter-spacing:.22em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--ink);
  border-bottom:1px solid var(--bronze-t);
  padding-bottom:5px;
  transition:border-color .2s,color .2s;
}
.link:hover,.link:focus-visible{color:var(--bronze);border-bottom-color:var(--bronze)}

/* ---------- the shelf: five covers, always one row ---------- */
.shelf{
  display:grid;
  /* minmax(0,1fr) — not plain 1fr. A bare 1fr refuses to shrink below the
     widest word in a caption ("Zandeldena"), which pushes the columns to
     unequal widths and overflows the page on narrow screens. */
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:clamp(7px,1.7vw,26px);
  align-items:start;
}
/* On a phone, five across makes postage stamps. Two rows of three and two. */
@media (max-width:680px){
  .shelf{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px 14px}
}
.vol{
  display:block;width:100%;padding:0;border:0;background:none;
  text-align:left;cursor:pointer;
}
.vol-cover{
  display:block;
  position:relative;
  aspect-ratio:1600/2600;
  overflow:hidden;
  background:var(--shade);
  transition:transform .4s cubic-bezier(.22,.61,.36,1);
}
.vol-cover img{width:100%;height:100%;object-fit:cover}
.vol:hover .vol-cover,.vol:focus-visible .vol-cover{transform:translateY(-6px)}
.vol:active .vol-cover{transform:scale(.975);transition-duration:.12s}
.vol-t{
  display:block;
  font-family:'Newsreader',Georgia,serif;
  font-size:clamp(10px,1.15vw,13px);
  font-weight:400;
  line-height:1.34;
  margin-top:clamp(8px,1.2vw,14px);
  color:var(--ink);
  overflow-wrap:break-word;
}
.vol-g{
  display:block;
  font-family:'Jost',sans-serif;
  font-size:clamp(8.5px,.85vw,10.5px);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-3);
  margin-top:4px;
}

/* ---------- retailer rows ---------- */
.stores{
  display:flex;flex-wrap:wrap;
  gap:0 26px;
  margin:0;padding:0;list-style:none;
}
.stores li{border-bottom:1px solid var(--rule-2)}
.stores a{
  display:block;
  padding:11px 0;
  text-decoration:none;
  font-size:var(--t-sm);
  letter-spacing:.06em;
  color:var(--ink-2);
  transition:color .2s;
}
.stores a:hover,.stores a:focus-visible{color:var(--bronze)}
.shelf + .stores{margin-top:clamp(34px,5vw,52px)}

/* ---------- contact ---------- */
.contact-row{display:flex;flex-wrap:wrap;align-items:center;gap:18px 32px;margin-top:30px}
.socials{display:flex;gap:24px;list-style:none;margin:0;padding:0}
.socials a{
  text-decoration:none;font-size:var(--t-xs);letter-spacing:.22em;
  text-transform:uppercase;color:var(--ink-3);transition:color .2s;
}
.socials a:hover,.socials a:focus-visible{color:var(--ink)}

/* ---------- inner pages ---------- */
.topbar{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:34px 0 0;
}
.topbar .logo-mark{width:40px}
.topbar .back{
  font-size:var(--t-xs);letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink-3);text-decoration:none;transition:color .2s;
}
.topbar .back:hover,.topbar .back:focus-visible{color:var(--ink)}

.app-hero{padding:clamp(56px,9vw,110px) 0 clamp(40px,6vw,64px)}
.app-hero .aura-mark{width:clamp(120px,19vw,168px);margin-bottom:clamp(34px,5vw,52px)}
.app-title{
  font-family:'Newsreader',Georgia,serif;
  font-weight:300;
  font-size:clamp(48px,10vw,88px);
  line-height:1;
  letter-spacing:-.02em;
  margin:0;
}
.app-tag{
  font-family:'Newsreader',Georgia,serif;
  font-style:italic;font-weight:300;
  font-size:clamp(21px,3.4vw,29px);
  color:var(--ink-2);
  margin:18px 0 0;
  max-width:24ch;
}
.app-meta{
  margin-top:26px;
  font-size:var(--t-xs);letter-spacing:.28em;text-transform:uppercase;color:var(--bronze);
}

.prose{max-width:var(--measure)}
.prose p{margin:0 0 20px;color:var(--ink-2);font-size:var(--t-lg);line-height:1.78}
.prose p:last-child{margin-bottom:0}
.prose strong{color:var(--ink);font-weight:400}
.prose .close{
  font-family:'Newsreader',Georgia,serif;
  font-style:italic;font-size:clamp(19px,2.6vw,24px);
  color:var(--ink);line-height:1.5;
  margin-top:34px;padding-top:28px;border-top:1px solid var(--rule-2);
}

/* the three spaces */
.spaces{display:grid;gap:1px;background:var(--rule-2);border-block:1px solid var(--rule-2)}
.space{background:var(--ground);padding:28px 0 30px}
.space-n{
  font-family:'Newsreader',Georgia,serif;
  font-weight:300;font-size:clamp(24px,3.2vw,30px);margin:0 0 2px;
}
.space-a{
  font-size:var(--t-xs);letter-spacing:.24em;text-transform:uppercase;
  color:var(--bronze);margin:0 0 12px;
}
.space-d{margin:0;color:var(--ink-2);font-size:var(--t-base);max-width:54ch}

/* the ritual — a genuine sequence, so it is numbered */
.steps{list-style:none;margin:0;padding:0;counter-reset:s}
.steps li{
  counter-increment:s;
  display:grid;grid-template-columns:44px minmax(0,1fr);gap:0 20px;
  padding:22px 0;border-bottom:1px solid var(--rule-2);
}
.steps li:first-child{border-top:1px solid var(--rule-2)}
.steps li::before{
  content:counter(s,decimal-leading-zero);
  font-size:var(--t-xs);letter-spacing:.12em;color:var(--ink-3);
  padding-top:.5em;font-variant-numeric:tabular-nums;
}
.steps h3{
  font-family:'Newsreader',Georgia,serif;
  font-weight:400;font-size:var(--t-lg);margin:0 0 4px;
}
.steps p{margin:0;color:var(--ink-2);font-size:var(--t-sm);max-width:52ch}

.note{
  border-left:1px solid var(--bronze-t);
  padding:4px 0 4px 24px;
  margin-top:8px;
  max-width:var(--measure);
}
.note p{margin:0;color:var(--ink-2);font-size:var(--t-base)}
.note p + p{margin-top:12px}

/* ---------- legal pages ---------- */
.legal h1{
  font-family:'Newsreader',Georgia,serif;
  font-weight:300;
  font-size:clamp(40px,7vw,64px);
  line-height:1.04;
  letter-spacing:-.015em;
  margin:0;
}
.legal-meta{
  margin-top:20px;
  font-size:var(--t-xs);letter-spacing:.28em;text-transform:uppercase;color:var(--bronze);
}
.legal-body p{margin:0 0 18px;color:var(--ink-2);font-size:var(--t-base);line-height:1.8;max-width:var(--measure)}
.legal-body p:last-child{margin-bottom:0}
.legal-body ul{list-style:none;margin:0 0 18px;padding:0;max-width:var(--measure)}
.legal-body li{
  position:relative;padding-left:22px;margin-bottom:12px;
  color:var(--ink-2);font-size:var(--t-base);line-height:1.75;
}
.legal-body li::before{
  content:"";position:absolute;left:2px;top:.75em;
  width:5px;height:5px;border-radius:50%;background:var(--bronze-t);
}
.legal-body li b,.legal-body strong{color:var(--ink);font-weight:400}
.legal-body a{color:var(--ink);border-bottom:1px solid var(--bronze-t);text-decoration:none;transition:.2s}
.legal-body a:hover,.legal-body a:focus-visible{color:var(--bronze);border-bottom-color:var(--bronze)}

/* ---------- footer ---------- */
.foot{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px 30px;
  padding:44px 0 72px;border-top:1px solid var(--rule);
  font-size:var(--t-xs);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);
}
.foot a{text-decoration:none;color:var(--ink-3);transition:color .2s}
.foot a:hover,.foot a:focus-visible{color:var(--ink)}
.foot-links{display:flex;gap:24px;flex-wrap:wrap}

/* ---------- synopsis panel ---------- */
.modal[hidden]{display:none}
.modal{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;padding:28px}
.modal-back{position:absolute;inset:0;background:rgba(12,12,14,.55);backdrop-filter:blur(2px);animation:fade .18s ease}
.modal-panel{
  position:relative;z-index:1;
  display:grid;grid-template-columns:150px minmax(0,1fr);gap:34px;
  width:min(820px,100%);max-height:86vh;overflow-y:auto;
  background:var(--raise);border:1px solid var(--rule);
  padding:38px 40px;
  animation:rise .22s ease;
}
.modal-close{
  position:absolute;top:12px;right:14px;
  background:none;border:0;cursor:pointer;
  width:34px;height:34px;line-height:1;
  font-size:22px;font-weight:200;color:var(--ink-3);transition:color .2s;
}
.modal-close:hover{color:var(--ink)}
.modal-cover img{width:100%;height:auto}
.modal h2{
  font-family:'Newsreader',Georgia,serif;font-weight:300;
  font-size:clamp(26px,3.4vw,34px);line-height:1.15;margin:0 0 4px;
}
.modal-series{
  font-size:var(--t-xs);letter-spacing:.24em;text-transform:uppercase;
  color:var(--bronze);margin:0 0 18px;
}
.modal-series[hidden]{display:none}
.modal-text p{margin:0 0 13px;color:var(--ink-2);font-size:15.5px;line-height:1.75}
.modal-text p:last-child{margin-bottom:0}
.modal-foot{
  margin:22px 0 0;padding-top:16px;border-top:1px solid var(--rule-2);
  font-size:var(--t-xs);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);
}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes sheet{from{transform:translateY(100%)}to{transform:none}}

/* phones: the panel becomes a sheet at the thumb end of the screen */
@media (max-width:700px){
  .modal{padding:0;align-items:flex-end}
  .modal-panel{
    grid-template-columns:1fr;gap:20px;width:100%;max-height:90vh;
    padding:26px 22px calc(30px + env(safe-area-inset-bottom));
    border-bottom:0;
    animation:sheet .3s cubic-bezier(.22,.61,.36,1);
  }
  .modal-panel::before{
    content:"";position:sticky;top:0;justify-self:center;
    width:40px;height:3px;background:var(--rule);margin:-8px 0 2px;
  }
  .modal-cover{width:112px}
}

/* the hidden source the synopsis panel reads from */
.blurb-source{display:none}