/* lasiplist.com
 *
 * Colours are the app's Palette (App/DesignSystem/Palette.swift), nothing added.
 * Faces are hers (three-faces-only): Georgia for headings, Inter for text; her
 * wordmark art stands in for Recoleta, whose trial licence cannot go on the web.
 *
 * Measured against matcharadar.app, her reference for a simple app page, 26 Sep:
 * one left edge for everything, a 392px lede at 18/1.6, gaps of 24, 36 and 13
 * (here 32 under the lockup, the 36 opened to 56 for her, "another 20px gap between
 * the text and badge", and the 13 to 20, "a bit of breathing space", both 26 Sep),
 * shadows pulled in with a negative spread and cast in the darkest brand ink, the
 * icon centred on the copy block. Those are the numbers below.
 */
:root {
  --paper: #FEFDFC;      /* Palette.cream, flat: what the app paints behind its lockup (sampled) */
  --cream: #FEFDFC;      /* Palette.cream */
  --coffee: #4A3324;     /* Palette.coffee */
  --ink: #453B32;        /* Palette.ink */
  --muted: #82715F;      /* Palette.muted */
  --edge: #E5DED6;       /* Palette.cardEdge */
  --cta-top: #513A29;    /* Palette.ctaTop */
  --cta-mid: #4E3626;    /* Palette.ctaMid */
  --shade: 53, 35, 26;   /* #35231A, the old icon tile's deepest stop: shadows only */
  --measure: 1080px;
  --gutter: 28px;
}

/* The same font, compressed: Inter.woff2 is Inter.ttf re-saved by fontTools (all
   518 glyphs and the weight axis kept), 48 KB instead of 120. The TTF stays as the
   fallback for a browser without WOFF2. */
@font-face {
  font-family: "Inter";
  src: url("/assets/Inter.woff2") format("woff2"), url("/assets/Inter.ttf") format("truetype");
  font-weight: 100 900;
  font-display: swap;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  color: var(--ink);
  font: 400 16px/1.5 Inter, -apple-system, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; }
a:focus-visible { outline: 2px solid var(--coffee); outline-offset: 3px; border-radius: 4px; }

/* One measure for the header, the page and the footer, so they share a left edge. */
.top, .hero, .foot { width: 100%; max-width: var(--measure); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }

.top { padding-top: 28px; }
.wordmark { display: block; height: 26px; width: auto; }
.wordmark.small { height: 24px; }

/* ------------------------------------------------------------------ THE HOME */
.hero {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 560px) minmax(0, 1fr);
  column-gap: 64px;
  align-items: center;
  padding-top: clamp(40px, 9vh, 88px);
  padding-bottom: clamp(48px, 10vh, 96px);
}

h1 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
  color: var(--coffee);
}
/* The headline is her wordmark lockup (option B, her choice, 26 Sep): the app's own
   splash lockup scaled from its 40pt wordmark: city 12.5 at 2.5 tracking, 6 below.
   Built as the app builds it (HomeLockup, SplashScreen): a column centred on the
   wordmark, and the city's trailing tracking given back on its left, which is what
   `trackedAndCentred` does with its tracking/2 offset. The lockup itself keeps the
   page's left edge. */
.brand {
  --mk: clamp(56px, 6.4vw, 84px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--mk) * 0.15);
  width: fit-content;
}
.brand .mark { height: var(--mk); width: auto; display: block; }
.brand .city {
  font: 400 calc(var(--mk) * 0.3125) / 1 Inter, sans-serif;
  letter-spacing: 0.2em;
  padding-left: 0.2em;        /* the tracking after the last letter, balanced */
  text-transform: uppercase;
  color: var(--muted);
}

.lede {
  margin: 32px 0 56px;          /* 36, and "another 20px" for her, 26 Sep */
  max-width: 400px;
  font-size: 18px;
  line-height: 1.6;
  color: var(--ink);
  text-wrap: pretty;
}

/* THE BADGE: an App Store badge's shape and weight, her Continue button's gradient
   and corner, her monogram where Apple's mark would go. Not a link: there is
   nothing to download yet. */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: 58px;
  padding: 0 24px 0 18px;
  border-radius: 14px;
  background: linear-gradient(var(--cta-top), var(--cta-mid) 55%, var(--coffee));
  box-shadow:
    inset 0 1px 0 rgba(254, 253, 252, .10),
    0 12px 22px -12px rgba(var(--shade), .55),
    0 1px 2px rgba(var(--shade), .18);
  color: var(--cream);
  user-select: none;
}
.badge-mark {
  width: 24px;
  height: 29px;
  background: var(--cream);
  -webkit-mask: url("/assets/monogram.png") center / contain no-repeat;
          mask: url("/assets/monogram.png") center / contain no-repeat;
}
.badge-words {
  display: flex;
  flex-direction: column;
  font: 600 19px/1.05 Inter, sans-serif;
  letter-spacing: -0.01em;
}
.badge-words small {
  font: 500 11px/1.2 Inter, sans-serif;
  letter-spacing: 0.01em;
  opacity: .78;
}
.note { margin: 20px 0 0; font-size: 13px; line-height: 1.5; color: var(--muted); }

.art { display: flex; justify-content: center; }
.icon {
  width: min(300px, 100%);
  height: auto;
  display: block;
  border-radius: 22.37%;     /* iOS's own icon mask, so the shadow follows it */
  box-shadow:
    0 18px 34px -16px rgba(var(--shade), .50),
    0 2px 6px -1px rgba(var(--shade), .14);
}

@media (max-width: 820px) {
  /* align-content: start, or the grid shares the spare height between its two rows
     and the icon floats a hundred pixels above the lockup. */
  .hero { grid-template-columns: minmax(0, 1fr); padding-top: 32px; row-gap: 36px; align-items: start; align-content: start; }
  .art { order: -1; justify-content: flex-start; }
  .icon { width: 112px; box-shadow: 0 12px 22px -12px rgba(var(--shade), .5), 0 1px 4px rgba(var(--shade), .12); }
}
@media (max-width: 380px) {
  :root { --gutter: 20px; }
  .badge { height: 54px; padding: 0 20px 0 16px; }
  .badge-words { font-size: 17px; }
}

/* ------------------------------------------------------------------ THE FOOT */
.foot { padding-top: 22px; padding-bottom: 30px; text-align: center; }
.foot nav { display: flex; justify-content: center; gap: 8px 28px; flex-wrap: wrap; font-size: 14px; }
.foot a { color: var(--coffee); text-decoration: none; }
.foot a:hover { text-decoration: underline; text-underline-offset: 3px; }
.credit {
  margin: 12px 0 0;
  font: 400 10px/1 Inter, sans-serif;
  letter-spacing: 0.35em;
  text-transform: uppercase;   /* her splash's own sign-off, "Brewed by Julia" */
  color: var(--muted);
}

/* ------------------------------------------------------------- THE DOCUMENTS */
.bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.switch { display: flex; gap: 8px; }
.switch a {
  text-decoration: none;
  font: 500 14px/1 Inter, sans-serif;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid var(--edge);
  color: var(--coffee);
  background: var(--cream);
}
.switch a[aria-current="page"] { background: var(--coffee); color: var(--cream); border-color: var(--coffee); }
.doc { flex: 1; width: 100%; max-width: 720px; margin: 0 auto; padding: 48px var(--gutter) 64px; }
.doc h1 { font-size: clamp(38px, 6vw, 56px); line-height: 1.05; letter-spacing: -0.02em; margin-bottom: 28px; }
.doc h2 { font: 600 17px/1.35 Inter, sans-serif; color: var(--coffee); margin: 36px 0 10px; }
.doc p { font-size: 15px; line-height: 1.65; margin: 0 0 12px; color: var(--ink); }
.doc b { font-weight: 600; color: var(--coffee); }
.doc .lead { font-size: 17px; line-height: 1.6; margin-bottom: 8px; }
.doc a { color: var(--coffee); text-underline-offset: 3px; }
.updated {
  display: inline-block;
  font: 500 12px/1 Inter, sans-serif !important;
  color: var(--muted) !important;
  border: 1px solid var(--edge);
  border-radius: 999px;
  padding: 7px 12px;
  margin-bottom: 18px !important;
}

/* One entrance, once: the copy, then the icon. Nothing else moves. */
@media (prefers-reduced-motion: no-preference) {
  .home .copy, .home .art { animation: arrive .7s cubic-bezier(.22, 1, .36, 1) both; }
  .home .art { animation-delay: .12s; }
  @keyframes arrive { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
}

/* ------------------------------------------------ THE CENTRED HOME (draft, 26 Sep)
   Corner's layout, her reference (corner.inc, 26 Sep): the logo top left, the
   links in the middle, one button top right, and everything else centred on
   one axis. Her colours and faces, nothing added. */
.topbar { width: 100%; max-width: var(--measure); margin: 0 auto; padding: 24px var(--gutter) 0;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.topbar-mark img { display: block; height: 24px; width: auto; }
.topbar-links { display: flex; gap: 32px; font-size: 15px; }
.topbar-links a { color: var(--coffee); text-decoration: none; }
.topbar-links a:hover { text-decoration: underline; text-underline-offset: 3px; }
.topbar-pill { justify-self: end; font: 500 14px/1 Inter, sans-serif; color: var(--cream); padding: 11px 18px; border-radius: 999px;
  background: linear-gradient(var(--cta-top), var(--cta-mid) 55%, var(--coffee)); user-select: none; }
.centred .hero { display: flex; flex-direction: column; align-items: center; text-align: center; justify-content: center; gap: 0; }
.centred .brand { --mk: clamp(64px, 9vw, 120px); margin: 0 auto; }
.centred .lede { margin: 28px auto 56px; max-width: 460px; font-size: 20px; }
.centred .note { margin-top: 20px; }
.centred .foot nav { display: none; }   /* the links live in the top bar now */
@media (max-width: 820px) {
  .topbar { grid-template-columns: 1fr auto; row-gap: 14px; }
  .topbar-links { grid-column: 1 / -1; grid-row: 2; justify-content: center; gap: 26px; font-size: 14px; }
  .centred .hero { padding-top: 72px; }
  .centred .lede { font-size: 18px; }
}
@media (prefers-reduced-motion: no-preference) {
  .home.centred .hero { animation: arrive .7s cubic-bezier(.22, 1, .36, 1) both; }
}

/* ---------------------------------------------- THE HOME ON THE COFFEE GROUND
   The app's sign-in ground: the swirl (coffeePoster, still; ground.mp4, moving) under
   CoffeeGround's own scrim, #1A1310, weighted only where the type sits, as the app
   solves it per band. Type as the app sets it on dark: the wordmark white through its
   own alpha, the city reversedMuted, the text cream, and the buttons light, as the
   Apple button went white on the reversed entry. */
.on-swirl { --scrim: 26, 19, 16; --reversed-muted: #E3D9CD; position: relative; color: var(--cream);
  background: rgb(var(--scrim)) url("/assets/swirl.webp") center / cover no-repeat; }
.on-swirl::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(var(--scrim), .60) 0%, rgba(var(--scrim), .28) 11%, rgba(var(--scrim), 0) 18%),
    linear-gradient(to top, rgba(var(--scrim), .60) 0%, rgba(var(--scrim), .25) 8%, rgba(var(--scrim), 0) 14%),
    radial-gradient(ellipse 44% 52% at 50% 52%, rgba(var(--scrim), .70) 0%, rgba(var(--scrim), .66) 55%, rgba(var(--scrim), .42) 82%, rgba(var(--scrim), .34) 100%); }
.on-swirl .topbar, .on-swirl .hero, .on-swirl .foot { position: relative; z-index: 1; }
.ground-video { position: fixed; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 86%;
  z-index: -1; opacity: 0; transition: opacity .9s ease; pointer-events: none; }
.ground-video.on { opacity: 1; }
.on-swirl .topbar-links a { color: var(--cream); }
.on-swirl .topbar-pill { background: var(--cream); color: var(--coffee); }
.on-swirl .hero-icon { width: 96px; height: auto; margin-bottom: 26px; border-radius: 22.37%;
  box-shadow: 0 16px 34px -14px rgba(0, 0, 0, .6), 0 0 0 1px rgba(254, 253, 252, .10); }
.on-swirl .brand .city { color: var(--reversed-muted); }
.on-swirl .lede { color: var(--cream); }
.on-swirl .badge { background: var(--cream); color: var(--coffee); box-shadow: 0 12px 24px -12px rgba(var(--scrim), .7), 0 1px 2px rgba(var(--scrim), .25); }
.on-swirl .badge-mark { background: var(--coffee); }
.on-swirl .note, .on-swirl .credit { color: var(--reversed-muted); }
.on-swirl a:focus-visible { outline-color: var(--cream); }
@media (max-width: 820px) {
  .on-swirl { background-position: center; }
  .ground-video { object-position: center; }
  .on-swirl::before { background:
    linear-gradient(to bottom, rgba(var(--scrim), .70) 0%, rgba(var(--scrim), .72) 79%, rgba(var(--scrim), .38) 85%, rgba(var(--scrim), .38) 88%, rgba(var(--scrim), .74) 93%, rgba(var(--scrim), .76) 100%); }
  .on-swirl .hero-icon { width: 76px; margin-bottom: 22px; }
}