/* Bygone's site. Every value comes from bygone-tokens.html (the brand palette, the type roles,
   spacing, the button); nothing here is re-derived. System fonts only, and no request leaves
   this folder: the privacy page says Bygone collects no data, and the site that says it collects
   none either. */

:root{
  /* Primitives: the brand palette's six (§ Brand). Referenced only by the roles below. */
  --night:     #13110F;
  --shade:     #1D1916;
  --edge:      #302A25;
  --cream:     #EDE6DA;
  --cream-dim: #9A9185;

  /* Roles, as the token sheet names them. Pages use these, never a primitive. */
  --color-background:           var(--night);
  --color-surface:              var(--shade);
  --color-hairline:             var(--edge);
  --color-text:                 var(--cream);
  --color-text-secondary:       var(--cream-dim);
  --color-button-primary-fill:  var(--cream);
  --color-button-primary-text:  var(--night);
  --lamp-glow: radial-gradient(120% 55% at 50% -12%, rgba(232,160,74,.26) 0%, rgba(232,160,74,.091) 45%, rgba(232,160,74,0) 75%);

  --s1: 4px; --s2: 8px; --s3: 16px; --s4: 24px; --s5: 40px; --s6: 72px;
  --r: 10px;
  --hair: 1px;
  --button-height: 54px;
  --press-opacity: .6;
  --press-in: 100ms;

  --sans:  -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  --serif: ui-serif, "New York", Georgia, "Times New Roman", serif;

  --measure: 34rem;        /* reading width: the policy pages, and the home page on a phone */
  --measure-wide: 65rem;   /* the home page on a wide screen, with the screenshots beside the pitch */
  --shot-ratio: 1320 / 2868; /* an iPhone 6.9-inch store screenshot, portrait */
  color-scheme: dark;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;background:var(--color-background)}
body{
  /* Under the lamp, as the app's way-in screens are: the glow falls from the top edge. */
  background:var(--lamp-glow) no-repeat top center / 100% 100vh, var(--color-background);
  color:var(--color-text);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

.page{width:100%;max-width:calc(var(--measure) + 2 * var(--s4));margin:0 auto;padding:0 var(--s4);flex:1;display:flex;flex-direction:column}

a{color:inherit;text-decoration:underline;text-decoration-color:var(--color-text-secondary);text-underline-offset:.18em;text-decoration-thickness:var(--hair)}
a:active{opacity:var(--press-opacity);transition:opacity var(--press-in)}
:focus-visible{outline:2px solid var(--color-text);outline-offset:3px;border-radius:2px}

/* The lockup: the icon beside the wordmark, never inside it (§ Brand, W4). */
.mast{padding:var(--s5) 0 var(--s4)}
.lockup{display:inline-flex;align-items:center;gap:12px;text-decoration:none}
.lockup .icon{width:40px;height:40px;border-radius:calc(40px * .2237);display:block}
.lockup .word{height:30px;width:auto;display:block;transform:translateY(12%)}

main{flex:1}

/* The home page */
.lead{font-size:28px;font-weight:600;letter-spacing:-.01em;line-height:1.2;margin-top:var(--s5)}
.button{
  display:flex;align-items:center;justify-content:center;
  min-height:var(--button-height);margin-top:var(--s5);padding:0 var(--s4);
  border-radius:var(--r);
  background:var(--color-button-primary-fill);color:var(--color-button-primary-text);
  font-size:17px;font-weight:500;text-decoration:none;
}

/* The screenshots: on a phone, a strip that swipes on its own (the page never scrolls sideways);
   on a wide screen, beside the pitch. */
.shots{
  list-style:none;display:flex;gap:var(--s3);
  margin:var(--s5) calc(-1 * var(--s4)) 0;padding:0 var(--s4);
  overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 var(--s4);
  scrollbar-width:none;
}
.shots::-webkit-scrollbar{display:none}
.shot{
  flex:0 0 62%;aspect-ratio:var(--shot-ratio);scroll-snap-align:start;
  border-radius:var(--r);background:var(--color-surface);border:var(--hair) solid var(--color-hairline);
  display:flex;align-items:center;justify-content:center;padding:var(--s3);
  font-size:13px;color:var(--color-text-secondary);text-align:center;
}
.shot img{display:block;width:100%;height:100%;object-fit:cover;border-radius:inherit}

.claims{list-style:none;margin-top:var(--s5);border-top:var(--hair) solid var(--color-hairline)}
.claims li{font-weight:500;padding:var(--s3) 0;border-bottom:var(--hair) solid var(--color-hairline)}
.caveat{font-size:15px;font-weight:500;color:var(--color-text-secondary);margin-top:var(--s4)}

/* The page ends on one line in the serif, with nothing to tap, the way a session's close does. */
.closing-line{font-family:var(--serif);font-size:26px;font-weight:400;letter-spacing:-.01em;line-height:1.3;text-align:center;margin:var(--s6) auto 0;max-width:22em}

/* The privacy and support pages */
.doc h1{font-size:28px;font-weight:600;letter-spacing:-.01em;line-height:1.2;margin-top:var(--s4)}
.doc .updated{font-size:15px;font-weight:500;color:var(--color-text-secondary);margin-top:var(--s2)}
.doc p, .doc ul{margin-top:var(--s3)}
.doc h1 + p, .doc .updated + p{margin-top:var(--s4)}
.doc ul{padding-left:1.2em}
.doc li + li{margin-top:var(--s2)}
.doc strong{font-weight:600}
.doc .group{margin-top:var(--s5);font-weight:600}
.doc .sign{margin-top:var(--s5);color:var(--color-text-secondary)}

/* The foot */
.foot{
  margin-top:var(--s6);padding:var(--s4) 0 var(--s5);border-top:var(--hair) solid var(--color-hairline);
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:0 var(--s4);
  font-size:15px;font-weight:500;color:var(--color-text-secondary);
}
.foot nav{display:flex;flex-wrap:wrap;gap:0 var(--s4)}
.foot a{text-decoration:none;display:inline-block;padding:var(--s2) 0}
.foot a[aria-current]{color:var(--color-text)}
.foot .copyright{padding:var(--s2) 0}

@media (min-width:720px){
  .mast{padding-top:var(--s6)}
  .lockup{gap:16px}
  .lockup .icon{width:56px;height:56px;border-radius:calc(56px * .2237)}
  .lockup .word{height:42px}
  .lead{font-size:40px;margin-top:var(--s6)}
  .button{display:inline-flex;min-width:16rem}
  .shot{flex-basis:40%}
}

/* Wide: the pitch and claims on the left, the three screenshots beside them. Without the
   screenshots, the home page keeps the reading width. */
@media (min-width:960px){
  .page.home:has(.shots){max-width:calc(var(--measure-wide) + 2 * var(--s5));padding:0 var(--s5)}
  .home .hero:has(.shots){
    display:grid;grid-template-columns:minmax(0,30rem) minmax(0,1fr);
    grid-template-areas:"pitch shots" "claims shots";
    column-gap:var(--s5);align-items:start;
  }
  .home .pitch{grid-area:pitch}
  .home .claims-wrap{grid-area:claims}
  .home .shots{
    grid-area:shots;align-self:center;
    margin:var(--s6) 0 0;padding:0;overflow:visible;
  }
  .home .shot{flex:1 1 0}
  .home .shot:nth-child(2){transform:translateY(calc(-1 * var(--s5)))}
}