/* Lucille site tokens. Shared by every page on lucille.lol.
   Layout idea: the crescent moon on Lucille's forehead is the one shape. It bites the
   hero stage, masks the cat plate, marks list items and closes the footer. */
:root{
  color-scheme: dark;
  --ground:#19121B;      /* night */
  --tone:#251B28;        /* one step up */
  --tone-2:#30233A;      /* two steps up */
  --ink:#FFF4EC;         /* cream */
  --muted:#E2D0DB;       /* secondary, 11:1 on ground */
  --rose:#F07195;        /* the accent: motif + action */
  --pink:#F7A6C2;
  --peach:#F9BEAD;
  --plum:#B98AA6;
  --on-accent:#1C1622;
  --discord:#313338; --discord-card:#2B2D31; --discord-line:#3F4147; --discord-text:#DBDEE1; --discord-muted:#A2A9B4;

  --display:"Fredoka","Nunito",ui-rounded,system-ui,sans-serif;
  --text:"Nunito","Fredoka",ui-rounded,system-ui,sans-serif;

  /* five sizes, no more */
  --s-hero:clamp(52px,6.4vw,104px);
  --s-head:clamp(36px,4.2vw,64px);
  --s-state:clamp(24px,2.6vw,36px);
  --s-body:18px;
  --s-small:15px;

  --margin:clamp(16px,3.2vw,48px);
  --gap-section:clamp(120px,14vw,200px);
  --radius:999px;
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--ink);font:400 var(--s-body)/1.55 var(--text);
  padding-left:max(var(--margin),env(safe-area-inset-left,0px));padding-right:max(var(--margin),env(safe-area-inset-right,0px))}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--peach);outline-offset:3px;border-radius:6px}
::selection{background:var(--rose);color:var(--on-accent)}
h1,h2,h3{font-family:var(--display);font-weight:600;margin:0;text-wrap:balance;letter-spacing:-.02em}
p{margin:0}

/* buttons: one shape, fully round, like the moon */
.btn{display:inline-flex;align-items:center;gap:10px;height:52px;padding:0 26px;border-radius:var(--radius);
  background:var(--rose);color:var(--on-accent);font:600 var(--s-body) var(--display);text-decoration:none;border:0;cursor:pointer;
  transition:transform .18s var(--ease),background .18s var(--ease)}
.btn:hover{background:var(--pink)}
.btn:active{transform:scale(.97)}
.btn.quiet{background:var(--tone-2);color:var(--ink)}
.btn.quiet:hover{background:#3C2C46}

/* the motif at text size: a crescent bullet */
.moon{display:inline-block;width:.72em;height:.72em;border-radius:50%;background:var(--peach);
  -webkit-mask:radial-gradient(circle at 72% 30%,transparent 46%,#000 47%);mask:radial-gradient(circle at 72% 30%,transparent 46%,#000 47%);flex:none} /* taste-skill-ignore: crescent-moon mask */

/* top bar */
.bar{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:24px;max-width:1440px;margin:0 auto}
.mark{display:flex;align-items:center;gap:12px;text-decoration:none;font:600 26px var(--display);letter-spacing:-.01em}
.mark img{width:40px;height:40px;border-radius:50%}
.bar nav{display:flex;gap:28px;flex-wrap:wrap}
.bar nav a{text-decoration:none;font-size:var(--s-small);font-weight:700;color:var(--muted);transition:color .15s}
.bar nav a:hover{color:var(--ink)}
@media (max-width:640px){.bar{flex-wrap:wrap;row-gap:14px}.bar nav{width:100%;gap:22px}.bar nav a.hide-sm{display:none}}

/* entrances: content is visible without script; script opts in */
.js [data-rise]{opacity:0;transform:translateY(24px)}
.js [data-rise].in{opacity:1;transform:none;transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:var(--d,0ms)}
@media (prefers-reduced-motion:reduce){.js [data-rise]{opacity:1;transform:none}*{transition-duration:0s!important;animation:none!important}}

/* ---------------- shared by every page ---------------- */
main,.foot{max-width:1440px;margin:0 auto}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hidden{display:none!important}
.bar nav a[aria-current="page"]{color:var(--ink);text-decoration:underline;text-decoration-color:var(--rose);text-decoration-thickness:3px;text-underline-offset:8px}
.e{width:22px;height:22px;display:inline-block;vertical-align:-5px}
code{font:inherit;color:var(--pink)}

/* inner page head: the title on the night ground, a cat on a field bitten by the moon */
.page-head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:end;padding-top:clamp(32px,6vh,72px)}
.page-head .copy{grid-column:1 / span 7;padding-bottom:clamp(16px,3vw,48px)}
.page-head h1{font-size:var(--s-hero);line-height:.98}
.page-head .lede{margin-top:32px;max-width:44ch;font-size:var(--s-body)}
.page-head .lede + .lede{margin-top:12px;color:var(--muted);font-size:var(--s-small)}
.page-plate{grid-column:9 / -1;aspect-ratio:1;background:var(--pink);display:flex;align-items:center;justify-content:center;
  -webkit-mask:radial-gradient(circle at 100% 0,transparent 22%,#000 22.2%);mask:radial-gradient(circle at 100% 0,transparent 22%,#000 22.2%)} /* taste-skill-ignore: crescent-moon mask, a hard-edged cut not a colour gradient */
.page-plate.c-peach{background:var(--peach)}.page-plate.c-plum{background:var(--plum)}.page-plate.c-rose{background:var(--rose)}
.page-plate img{width:76%;height:auto;transition:opacity .25s var(--ease),transform .4s var(--ease)}
@media (max-width:900px){
  .page-head{grid-template-columns:1fr;align-items:start}
  .page-head .copy{grid-column:1;padding-bottom:0}
  .page-head h1{font-size:clamp(44px,12vw,72px)}
  .page-plate{grid-column:1;grid-row:1;width:132px;margin-bottom:24px}
}

/* long reading pages (terms, privacy): heading on the left, words on the right */
.clauses{margin-top:var(--gap-section);display:flex;flex-direction:column;gap:clamp(64px,8vw,112px)}
.clause-row{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px}
.clause-row h2{grid-column:1 / span 4;font-size:var(--s-state);line-height:1.15}
.clause-row .body{grid-column:6 / span 7;display:flex;flex-direction:column;gap:18px;max-width:62ch}
.clause-row ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:12px}
.clause-row li{display:flex;gap:14px;align-items:baseline}
.clause-row li .moon{transform:translateY(.08em)}
.clause-row a{color:var(--pink);text-underline-offset:4px}
.ask-strip{margin-top:var(--gap-section);background:var(--rose);color:var(--on-accent);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:center;
  padding:clamp(32px,5vw,72px) clamp(24px,5vw,80px)}
.ask-strip h2{font-size:var(--s-head);line-height:1}
.ask-strip p{margin-top:16px;max-width:46ch}
.ask-strip .btn{background:var(--ground);color:var(--ink)}
.ask-act{display:flex;align-items:center;gap:24px}
.ask-act img{width:clamp(110px,11vw,170px);height:auto}
.ask-strip .btn:hover{background:var(--tone-2)}
@media (max-width:900px){
  .clause-row{grid-template-columns:1fr;row-gap:20px}
  .clause-row h2,.clause-row .body{grid-column:1}
  .ask-act{flex-wrap:wrap}
  .ask-strip{grid-template-columns:1fr;margin-inline:calc(-1 * max(var(--margin),env(safe-area-inset-left,0px)))}
}

/* ---------------- footer ---------------- */
.foot{margin-top:clamp(96px,10vw,140px);padding-bottom:40px}
.blocks{display:flex;align-items:flex-end;gap:4px;height:34svh;min-height:200px}
.blocks span{flex:1;height:var(--h);background:var(--tone-2);display:flex;align-items:flex-end;justify-content:center;padding-bottom:.08em;
  font:600 clamp(48px,11vw,180px)/1 var(--display);color:var(--ground)}
.blocks span:nth-child(2n){background:var(--rose)}.blocks span:nth-child(3n){background:var(--peach)}
.blocks .mb{background:var(--plum);align-items:center;font-size:clamp(40px,8vw,130px)}
.blocks .moon{background:var(--ink);width:.9em;height:.9em}
.foot-links{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin-top:56px}
.foot-links ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.foot-links a{text-decoration:none;font-size:var(--s-small);font-weight:700}
.foot-links a:hover{color:var(--pink)}
.foot-end{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:56px;font-size:var(--s-small);color:var(--muted)}

@media (max-width:900px){.foot-links{grid-template-columns:1fr 1fr}.blocks{height:22svh}}

/* a little note that floats up when something is copied */
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,24px);opacity:0;background:var(--ink);color:var(--on-accent);
  padding:12px 22px;border-radius:var(--radius);font:600 var(--s-small) var(--display);pointer-events:none;z-index:20;
  box-shadow:0 10px 30px rgba(0,0,0,.35);transition:opacity .2s var(--ease),transform .25s var(--ease)} /* taste-skill-ignore: shadow on a floating toast */
.toast.show{opacity:1;transform:translate(-50%,0)}

/* the short version: a cat and two lines on a tone field */
.gist{margin-top:clamp(80px,9vw,140px);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:center;background:var(--tone);padding:clamp(28px,4vw,56px)}
.gist img{grid-column:1 / span 3;width:100%;max-width:240px;height:auto}
.gist div{grid-column:5 / -1}
.gist h2{font-size:var(--s-state);line-height:1.15}
.gist p{margin-top:16px;font:500 clamp(22px,2.1vw,30px)/1.3 var(--display);max-width:40ch}
@media (max-width:900px){
  .gist{grid-template-columns:1fr;row-gap:20px;margin-inline:calc(-1 * max(var(--margin),env(safe-area-inset-left,0px)))}
  .gist img,.gist div{grid-column:1}.gist img{width:132px}
  .gist p{font-size:19px}
}

/* lucille asleep: a full-bleed band before the footer */
.sleep-band{margin:var(--gap-section) calc(-1 * max(var(--margin),env(safe-area-inset-left,0px))) 0}
.sleep-band img{width:100%;height:auto}