/* Emberside — embersideapp.com
   Palette and type are the app's own (src/theme/tokens.ts), pitched louder. */

:root{
  --cream:#f5ead8; --cream-lift:#faf3e6; --surface:#ebddc5;
  --ink:#201e1d; --ink-soft:#544c42; --ink-mute:#675e51;
  --clay:#c67139; --clay-deep:#8c491a; --cta:#b35f2c;
  --sage:#728157;
  --night:#1a1816; --night-lift:#2a2521;
  --edge:rgba(32,30,29,.13);

  /* --- surfaces that are dark in BOTH themes -----------------------------
     --cream and --ink swap roles between the themes, which is right for the
     page but wrong for anything that is dark either way. `.band-dark` used
     `color:var(--cream)`, so in dark mode it painted #1a1816 text onto a
     #1a1816 band: a contrast ratio of 1:1, and the headline and both lists
     simply vanished. These three are the foreground for those surfaces and
     must NEVER be redefined in a dark block. */
  --on-night:#f5ead8; --on-night-soft:#c9bfae; --on-night-mute:#a49a8a;

  /* The band's own background. It lifts in dark mode — the page is already
     #1a1816 there, so an unlifted band stops reading as a band at all. */
  --band:#1a1816;
}
:root[data-theme="dark"]{
  --cream:#1a1816; --cream-lift:#221f1c; --surface:#2a2521;
  --ink:#f5ead8; --ink-soft:#c9bfae; --ink-mute:#9b9182;
  --edge:rgba(245,234,216,.14);
  --band:#2a2521;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --cream:#1a1816; --cream-lift:#221f1c; --surface:#2a2521;
    --ink:#f5ead8; --ink-soft:#c9bfae; --ink-mute:#9b9182;
    --edge:rgba(245,234,216,.14);
    --band:#2a2521;
  }
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *{transition:none!important} }

body{
  margin:0; background:var(--cream); color:var(--ink);
  font-family:Figtree,ui-sans-serif,system-ui,sans-serif;
  font-size:17px; line-height:1.62; -webkit-font-smoothing:antialiased;
}
.wrap{max-width:1120px;margin:0 auto;padding:0 28px}
.narrow{max-width:680px}

h1,h2,h3{font-family:Caprasimo,Georgia,serif;font-weight:400;margin:0;text-wrap:balance;line-height:1.06}
h1{font-size:clamp(38px,6vw,68px)}
h2{font-size:clamp(28px,4vw,42px)}
h3{font-size:21px;line-height:1.2}
p{margin:0}
a{color:inherit}

.eyebrow{font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
         color:var(--ink-mute);margin:0 0 14px}
.lede{font-size:clamp(17.5px,2vw,20px);line-height:1.56;color:var(--ink-soft)}
.stack{display:flex;flex-direction:column;gap:20px}

/* nav */
nav{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--cream) 90%,transparent);
    backdrop-filter:blur(9px);border-bottom:1px solid var(--edge)}
nav .wrap{display:flex;align-items:center;gap:6px;height:70px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;margin-right:auto}
.brand b{font-family:Caprasimo,Georgia,serif;font-weight:400;font-size:23px;line-height:1}
.tabs{display:flex;align-items:center;flex-wrap:wrap;gap:2px}
nav a.tab{font-size:14.5px;color:var(--ink-mute);text-decoration:none;padding:8px 12px;border-radius:8px}
nav a.tab:hover{color:var(--ink);background:var(--surface)}
nav a.tab[aria-current="page"]{color:var(--ink);font-weight:600}
/* On a phone the nav wraps, and a sixth tab (Home) tipped it to 192px — 24% of
   an iPhone screen, permanently, because the bar is sticky. Reordering pulls
   the CTA up beside the wordmark instead of leaving it a row of its own, which
   buys back more than the tab cost. Measured, not guessed: 192px -> ~115px. */
@media(max-width:720px){
  nav .wrap{height:auto;flex-wrap:wrap;padding-top:10px;padding-bottom:10px;
            gap:2px;row-gap:4px}
  .brand{order:1;width:auto;margin-right:auto;margin-bottom:0}
  .brand b{font-size:20px}
  .brand svg{width:30px;height:30px}
  nav .btn{order:2;font-size:14px;padding:9px 16px}
  .tabs{order:3;width:100%;gap:1px}
  nav a.tab{padding:5px 9px;font-size:13.5px}
}

.btn{display:inline-block;background:var(--cta);color:#fff;text-decoration:none;
     font-weight:600;font-size:15.5px;padding:13px 24px;border-radius:999px;
     transition:background .18s ease,transform .18s ease}
.btn:hover{background:var(--clay-deep);transform:translateY(-1px)}
.btn.lg{font-size:17px;padding:17px 32px}
.btn.ghost{background:transparent;color:var(--ink);border:1.5px solid var(--edge)}
.btn.ghost:hover{background:var(--surface);color:var(--ink)}
:focus-visible{outline:2.5px solid var(--clay);outline-offset:3px;border-radius:6px}

/* sections */
section{padding:clamp(52px,7vw,88px) 0}
/* Currently used by no page — privacy.html's band became `band-lift`. Kept
   because it is now correct in both themes, and re-deriving it is how the
   invisible-text bug comes back. */
.band-dark{background:var(--band);color:var(--on-night)}
.band-dark .eyebrow{color:var(--on-night-mute)}
.band-dark .lede{color:var(--on-night-soft)}
.band-lift{background:var(--cream-lift)}
.hero{padding:clamp(44px,7vw,84px) 0 clamp(52px,7vw,88px)}

.split{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px, 100%), 1fr));
       gap:clamp(28px,5vw,62px);align-items:center}
.split.reverse > :first-child{order:2}
@media(max-width:760px){ .split.reverse > :first-child{order:0} }

.shot{display:block;width:100%;height:auto;max-width:360px;border-radius:20px;
      box-shadow:0 22px 52px -22px rgba(32,30,29,.42),0 2px 8px rgba(32,30,29,.09);
      border:1px solid var(--edge)}
.hero-shot{max-width:380px;margin-left:auto;transform:rotate(1.1deg)}
@media(max-width:860px){ .hero-shot{transform:none;margin:6px auto 0;max-width:320px} }

.quote{font-family:Caprasimo,Georgia,serif;font-size:clamp(21px,2.7vw,28px);line-height:1.28;
       margin:24px 0 0;padding-left:20px;border-left:3px solid var(--clay)}
.quote small{display:block;font-family:Figtree,sans-serif;font-size:14px;font-weight:500;
             color:var(--ink-mute);margin-top:11px}

/* cards */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(258px, 100%), 1fr));gap:18px;margin-top:40px}
.card{background:var(--cream-lift);border:1px solid var(--edge);border-radius:20px;padding:26px;
      text-decoration:none;display:flex;flex-direction:column;gap:10px;
      transition:transform .18s ease,border-color .18s ease}
.card:hover{transform:translateY(-3px);border-color:var(--clay)}
.card p{font-size:15.5px;color:var(--ink-soft)}
.card .more{font-size:14px;font-weight:600;color:var(--clay-deep);margin-top:auto;padding-top:6px}
:root[data-theme="dark"] .card .more{color:var(--clay)}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .card .more{color:var(--clay)}
}

/* the counted / never-counted lists */
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px, 100%), 1fr));gap:36px;margin-top:40px}
.listing{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:13px}
.listing li{display:flex;gap:12px;align-items:flex-start;font-size:17px}
.listing .m{flex:0 0 auto;width:19px;height:19px;border-radius:50%;margin-top:3px;
            display:grid;place-items:center;font-size:11px;font-weight:700;line-height:1}
.no .m{background:var(--edge);color:var(--ink-soft)}
.yes .m{background:var(--sage);color:#0f0d0c}

/* pricing */
.tiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(250px, 100%), 1fr));gap:18px;margin-top:38px}
.tier{background:var(--cream-lift);border:1px solid var(--edge);border-radius:20px;padding:28px 25px;
      display:flex;flex-direction:column;gap:10px}
.tier.feature{background:var(--surface);border-color:transparent}
.tier .n{font-family:Caprasimo,Georgia,serif;font-size:42px;line-height:1}
.tier .u{font-size:12.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-mute);font-weight:600}
.tier p{font-size:15.5px;color:var(--ink-soft)}

.tablewrap{overflow-x:auto;margin-top:34px;border:1px solid var(--edge);border-radius:18px}
table{width:100%;border-collapse:collapse;font-size:16px;min-width:520px}
caption{text-align:left;padding:20px 22px 0;font-size:14px;color:var(--ink-mute)}
th,td{text-align:left;padding:15px 22px;border-bottom:1px solid var(--edge)}
tbody tr:last-child td{border-bottom:0}
thead th{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-mute);font-weight:600}
td{font-variant-numeric:tabular-nums}
td:first-child{font-weight:600}
tbody tr:hover{background:var(--cream-lift)}

/* video slot */
.video{aspect-ratio:16/9;border-radius:22px;background:var(--night-lift);
       border:1px solid rgba(245,234,216,.14);display:grid;place-items:center;
       text-align:center;padding:24px;margin-top:34px}
.video p{color:var(--on-night-mute);font-size:15px}

/* gallery */
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(250px, 100%), 1fr));gap:28px;margin-top:40px}
.gallery figure{margin:0}
.gallery img{width:100%;height:auto;border-radius:16px;border:1px solid var(--edge);
             box-shadow:0 14px 32px -16px rgba(32,30,29,.4)}
.gallery figcaption{font-size:14.5px;color:var(--ink-soft);margin-top:12px}
.gallery b{display:block;color:var(--ink);font-weight:600}

footer{border-top:1px solid var(--edge);padding:42px 0 56px;font-size:14.5px;color:var(--ink-mute)}
footer .wrap{display:flex;gap:20px;flex-wrap:wrap;align-items:center}
footer a{color:var(--ink-soft)}
footer .sp{margin-left:auto}

/* ── click a screen to see it bigger ────────────────────────────────── */
.zoom{display:block;width:100%;border:0;padding:0;background:none;cursor:zoom-in;
      border-radius:16px;line-height:0}
.zoom img{display:block;width:100%;height:auto;border-radius:16px;border:1px solid var(--edge);
          box-shadow:0 14px 32px -16px rgba(32,30,29,.4);transition:transform .18s ease}
.zoom:hover img{transform:translateY(-3px)}

dialog#lb{border:0;padding:0;background:transparent;max-width:100vw;max-height:100vh;
          width:100%;height:100%;overflow:auto}
dialog#lb::backdrop{background:rgba(16,14,13,.86);backdrop-filter:blur(3px)}
/* The screenshots are portrait (800x1156), so on any desktop it is HEIGHT that
   decides how big they can be — a width cap just wastes the screen. This used
   to be `max-width:min(430px,88vw)`, which on a 1440x900 viewport opened a
   336px thumbnail to 430px: it popped out without getting bigger.

   Fitting the viewport is not enough on its own either. A portrait image inside
   a landscape window runs out of height first, and measured against the 336px
   thumbnail a pure fit gives 1.24x on a 1366x768 laptop and **0.89x** — smaller
   than the thumbnail — on a 600px-tall window. So there is a floor: below about
   850px of window height the image stops shrinking and the dialog scrolls
   instead, which is the right trade for something you opened to look at.

   `width/height:auto` lets the intrinsic aspect do the work between the caps,
   and neither cap exceeds the natural size, so it never upscales into mush. */
#lb .box{min-height:100%;display:grid;place-items:center;padding:64px 20px 24px}
#lb img{max-width:min(96vw,800px);max-height:max(calc(100vh - 152px),700px);
        width:auto;height:auto;border-radius:20px;
        box-shadow:0 30px 70px -20px rgba(0,0,0,.6)}
#lb figcaption{color:#e8ded0;font-size:15px;text-align:center;margin-top:16px;max-width:44ch}
#lb .close{position:fixed;top:16px;right:18px;background:rgba(245,234,216,.14);color:#f5ead8;
           border:0;border-radius:999px;width:42px;height:42px;font-size:21px;cursor:pointer;
           line-height:1}
#lb .close:hover{background:rgba(245,234,216,.26)}

/* the counted / never lists — deliberately not a scoreboard */
.pair{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px, 100%), 1fr));
      gap:30px;margin-top:36px}
/* These sat on the dark band and were styled with light-on-dark literals.
   The band is now `band-lift` like every other page's, so they follow the
   theme the way .card and .tier do. --ink-soft rather than --ink-mute on the
   sub: it is a sentence people read, not a label. */
.pane{border:1px solid var(--edge);border-radius:20px;padding:26px}
.pane.off{background:var(--surface)}
.pane h3{font-size:19px;margin-bottom:4px}
.pane .sub{font-size:14px;color:var(--ink-soft);margin-bottom:18px}