/* Weekend Buddy website. The app's Golden Hour design system (app repo docs/02-design-system.md)
   on a web page. One file, hand-written. Tokens first; nothing below hard-codes a colour that has
   a token. */

@font-face {
  font-family: "Fraunces";
  src: url("/fonts/fraunces.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/fonts/inter.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@layer reset, tokens, base, layout, components, home, inner;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; padding: 0; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  img, picture, svg { display: block; max-width: 100%; }
  ul[class], ol[class] { list-style: none; }
}

@layer tokens {
  :root {
    --paper-0: #FFFFFF;
    --paper-50: #FDFAF5;
    --paper-100: #F7F0E5;
    --paper-200: #EFE4D4;
    --ink-900: #1F1A15;
    --ink-700: #4A413A;
    --ink-500: #7A6E63;
    --sunset-700: #B8421C;
    --sunset-500: #F26B3A;
    --sunset-100: #FDEBE2;
    --night-bg: #171310;
    --night-t1: #F5EFE6;
    --night-t2: #D8CCBD;
    --night-accent: #FF8A5C;
    --night-line: rgb(245 239 230 / 0.18);
    /* The five theme fills, from the app's Sources/WeekendCore/Theme.swift. Swatches only:
       the page's accent stays sunset. */
    --theme-sunset: #F26B3A;
    --theme-jacaranda: #A78BDA;
    --theme-cherry: #EB5E63;
    --theme-matcha: #9DBF7A;
    --theme-cobalt: #6690EE;
    --line: rgb(31 26 21 / 0.10);
    --line-strong: rgb(31 26 21 / 0.18);

    --display: "Fraunces", "Iowan Old Style", Georgia, serif;
    --ui: "Inter", "SF Pro Text", system-ui, sans-serif;

    --measure: 68ch;
    --gutter: clamp(1rem, 4vw, 2.5rem);
    --max: 68.75rem;
    --tap: 2.75rem;

    color-scheme: light;
  }
}

@layer base {
  body {
    background: var(--paper-50);
    color: var(--ink-900);
    font-family: var(--ui);
    font-size: 1.0625rem;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
  }
  h1, h2, h3 {
    font-family: var(--display);
    font-weight: 600;
    letter-spacing: -0.015em;
    line-height: 1.08;
    text-wrap: balance;
  }
  p { max-inline-size: var(--measure); text-wrap: pretty; }
  a {
    color: var(--sunset-700);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.16em;
  }
  :focus-visible {
    outline: 2px solid var(--sunset-700);
    outline-offset: 3px;
    border-radius: 4px;
  }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
  }
}

@layer layout {
  .wrap {
    max-inline-size: var(--max);
    margin-inline: auto;
    padding-inline: var(--gutter);
  }

  .skip {
    position: absolute;
    inset-inline-start: var(--gutter);
    inset-block-start: -4rem;
    z-index: 10;
    padding: 0.625rem 1rem;
    background: var(--ink-900);
    color: var(--paper-50);
    border-radius: 999px;
    font-weight: 600;
    &:focus { inset-block-start: 0.75rem; }
  }

  .site-header {
    position: sticky;
    inset-block-start: 0;
    z-index: 5;
    background: var(--paper-50);
    border-block-end: 1px solid var(--line);
  }
  .site-header__inner {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    min-block-size: 4rem;
  }
  .brand {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    min-block-size: var(--tap);
    color: var(--ink-900);
    text-decoration: none;
    font-family: var(--display);
    font-weight: 600;
    font-size: 1.3125rem;
    letter-spacing: -0.01em;
    white-space: nowrap;
  }
  .site-nav {
    margin-inline-start: auto;
    display: flex;
    align-items: center;
    gap: 1.375rem;
    font-size: 0.9375rem;
    font-weight: 500;

    & > a:not(.btn) {
      display: inline-flex;
      align-items: center;
      min-block-size: var(--tap);
      color: var(--ink-700);
      text-decoration: none;
      &:hover, &[aria-current="page"] { color: var(--ink-900); text-decoration: underline; }
    }
  }
  .insta {
    gap: 0.5rem;
    font-weight: 600;
    .site-nav > & { color: var(--ink-900); }
    &::before {
      content: "";
      inline-size: 1.375rem;
      block-size: 1.375rem;
      background: currentColor;
      mask: url("/images/instagram.svg") center / contain no-repeat;
    }
    @media (forced-colors: active) { &::before { background: CanvasText; } }
  }
  @media (max-width: 45rem) {
    .site-header__inner { gap: 0.75rem; }
    .brand { font-size: 1.125rem; gap: 0.5rem; min-inline-size: 0; }
    .site-nav { gap: 0.25rem; }
    .site-nav .btn { padding-inline: 0.875rem; font-size: 0.875rem; }
    .site-nav > a:not(.insta, .btn) { display: none; }
    .insta { min-inline-size: var(--tap); justify-content: center; }
    .insta span { display: none; }
  }

  .site-footer {
    border-block-start: 1px solid var(--line);
    background: var(--paper-100);
    font-size: 0.875rem;
    color: var(--ink-700);
  }
  .site-footer__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1.75rem;
    padding-block: 1.25rem;

    nav { display: flex; flex-wrap: wrap; column-gap: 1.25rem; }
    nav a {
      display: inline-flex;
      align-items: center;
      min-block-size: var(--tap);
      color: var(--ink-700);
    }
  }
  .site-footer__brand {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-block-size: var(--tap);
    color: var(--ink-900);
    text-decoration: none;
    font-family: var(--display);
    font-weight: 600;
    .mark { inline-size: 1.5rem; block-size: 1.5rem; }
  }
  .site-footer__copy { margin-inline-start: auto; color: var(--ink-500); }
}

@layer components {
  .quiet { color: var(--ink-500); font-size: 0.875rem; }

  /* The dog-ear ends the wordmark and the headline, and nothing else. */
  .brand span::after,
  .hero h1::after {
    content: "";
    display: inline-block;
    inline-size: 0.24em;
    block-size: 0.24em;
    margin-inline-start: 0.08em;
    background: var(--sunset-500);
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
  }

  /* The mark is /favicon.svg: three bars on a sunset tile, loosely a W. */
  .mark {
    flex: none;
    inline-size: 1.875rem;
    block-size: 1.875rem;
    border-radius: 20%;
    box-shadow: 0 0 0 1px var(--line);
  }

  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-block-size: var(--tap);
    padding-inline: 1.125rem;
    border-radius: 999px;
    background: var(--ink-900);
    color: var(--paper-50);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9375rem;
    white-space: nowrap;
    &:hover { background: #000; }
  }

  /* Apple's badge artwork, unaltered; see partials/badge.njk. It is black, so the one sunset stays elsewhere. */
  .badge {
    display: inline-block;
    border-radius: 0.5rem;
    line-height: 0;
    img { inline-size: 9.375rem; block-size: auto; }
  }

  /* A capture in a plain device frame. The capture carries its own status bar. */
  /* content-box, so the ratio is the screen's and the border sits outside it; no strip at the bottom. */
  .device {
    --w: 18.75rem;
    --bezel: 0.5rem;
    box-sizing: content-box;
    inline-size: calc(min(var(--w), 72vw) - 2 * var(--bezel));
    aspect-ratio: 1320 / 2868;
    max-inline-size: calc(100% - 2 * var(--bezel));
    border: var(--bezel) solid #1A1613;
    border-radius: 2.75rem;
    overflow: hidden;
    background: var(--paper-50);
    box-shadow: 0 1.875rem 3.75rem -1.25rem rgb(74 65 58 / 0.35), 0 0 0 1px rgb(0 0 0 / 0.4);
    img { inline-size: 100%; block-size: 100%; object-fit: cover; }
  }
  .device--dark { background: var(--night-bg); }
  .device--missing {
    display: grid;
    place-items: center;
    text-align: center;
    font-size: 0.875rem;
    color: var(--ink-500);
    background: repeating-linear-gradient(135deg, var(--paper-100) 0 0.75rem, var(--paper-50) 0.75rem 1.5rem);
    &.device--dark { color: var(--night-t2); background: var(--night-bg); }
  }
}

@layer home {
  .hero {
    padding-block: clamp(2.5rem, 8vw, 6rem) clamp(1.5rem, 5vw, 3.5rem);
    overflow: hidden;
  }
  .hero__inner {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: clamp(1.5rem, 5vw, 4rem);
    align-items: center;
  }
  .hero h1 {
    font-size: clamp(2.5rem, 6.4vw, 4.75rem);
    margin-block-end: 1.25rem;
    letter-spacing: -0.025em;
    line-height: 1.02;
    em { font-style: normal; color: var(--sunset-700); }
  }
  .hero__line {
    font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
    color: var(--ink-700);
    margin-block-end: 1.75rem;
  }
  .cta { display: flex; align-items: center; gap: 0.5rem 1.125rem; flex-wrap: wrap; }
  /* Before release: the form button, then Instagram as a plain link with its icon. */
  .cta .insta { display: inline-flex; align-items: center; min-block-size: var(--tap); color: var(--ink-900); }
  .hero .quiet { margin-block-start: 1rem; }
  .soon { color: var(--ink-700); margin-block-end: 1.25rem; strong { color: var(--ink-900); } }

  /* The golden-hour wash rises behind the phone only, as in the store frames. */
  .hero__art {
    position: relative;
    display: flex;
    justify-content: center;
    padding-block-start: 1.5rem;
    /* Kept inside the hero, which clips overflow: a wash that crossed its bottom edge was cut into a hard-edged box. */
    &::before {
      content: "";
      position: absolute;
      inset: 20% -15% 0;
      background: radial-gradient(closest-side, var(--sunset-100) 30%, transparent 100%);
      pointer-events: none;
    }
    .device { --w: 21.25rem; position: relative; }
  }
  @media (max-width: 51.25rem) {
    .hero__inner { grid-template-columns: 1fr; }
    .hero__art { padding-block-start: 0.5rem; }
  }

  .section { padding-block: clamp(3rem, 7vw, 6rem); }
  .section h2 { font-size: clamp(1.875rem, 4vw, 2.75rem); margin-block-end: clamp(0.5rem, 2vw, 1.5rem); }

  .feature {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(1.5rem, 5vw, 4.5rem);
    align-items: center;
    padding-block: clamp(1.75rem, 4vw, 3.5rem);
    & + & { border-block-start: 1px solid var(--line); }
    > .device { justify-self: center; }
    &:nth-of-type(even) > .device { order: -1; }
    h3 { font-size: clamp(1.5rem, 2.8vw, 2rem); margin-block-end: 0.75rem; }
    p { color: var(--ink-700); }
  }
  @media (max-width: 47.5rem) {
    .feature { grid-template-columns: 1fr; }
    .feature:nth-of-type(even) > .device { order: 0; }
  }

  .strip {
    background: var(--paper-100);
    border-block: 1px solid var(--line);
    h2 { font-size: clamp(1.5rem, 3vw, 2rem); }
    p { color: var(--ink-700); }
  }
  .strip__inner {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 2rem;
    align-items: baseline;
    padding-block: 2.5rem;
  }
  @media (max-width: 47.5rem) {
    .strip__inner { grid-template-columns: 1fr; gap: 0.75rem; }
  }

  .dark-band {
    background: var(--night-bg);
    color: var(--night-t1);
    h2 { font-size: clamp(1.875rem, 4vw, 2.75rem); margin-block-end: 0.75rem; }
    p { color: var(--night-t2); }
    p + p { margin-block-start: 0.75rem; }
    a { color: var(--night-accent); }
  }
  .dark-band__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(1.5rem, 5vw, 4.5rem);
    align-items: center;
    padding-block: clamp(3rem, 7vw, 5.5rem);
    > .device { justify-self: center; }
  }
  @media (max-width: 47.5rem) {
    .dark-band__inner { grid-template-columns: 1fr; }
  }

  /* Supporter and tips. The colours are the product here, so the five swatches are the one
     place on the page that shows more than sunset; each carries its name. */
  .supporter {
    background: var(--paper-100);
    border-block: 1px solid var(--line);
  }
  .supporter__inner {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: clamp(1.5rem, 5vw, 4.5rem);
    align-items: center;
    padding-block: clamp(3rem, 7vw, 5.5rem);
    h2 { font-size: clamp(1.875rem, 4vw, 2.75rem); margin-block-end: 0.75rem; }
  }
  .supporter__line { color: var(--ink-700); }
  .swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.25rem;
    margin-block: 1.5rem 1.75rem;
    li { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9375rem; color: var(--ink-700); }
  }
  .swatch {
    inline-size: 1.5rem;
    block-size: 1.5rem;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgb(31 26 21 / 0.12);
  }
  .swatch--sunset { background: var(--theme-sunset); }
  .swatch--jacaranda { background: var(--theme-jacaranda); }
  .swatch--cherry { background: var(--theme-cherry); }
  .swatch--matcha { background: var(--theme-matcha); }
  .swatch--cobalt { background: var(--theme-cobalt); }
  .ways {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
  }
  .way {
    background: var(--paper-0);
    border: 1px solid var(--line);
    border-radius: 1.25rem;
    padding: 1.25rem 1.375rem;
    h3 { font-size: 1.375rem; margin-block-end: 0.25rem; }
    p { color: var(--ink-700); font-size: 0.9688rem; }
  }
  .way .way__price {
    font-weight: 600;
    color: var(--ink-900);
    margin-block-end: 0.5rem;
  }
  .supporter .quiet { margin-block-start: 1rem; }
  .swatches:has(+ .supporter__origin) { margin-block-end: 0.75rem; }
  .supporter__origin { color: var(--ink-700); font-size: 0.9375rem; margin-block-end: 1.75rem; }
  .supporter__art {
    display: flex;
    justify-content: center;
    .device { --w: 15rem; }
    .device + .device { margin-inline-start: -3.5rem; margin-block-start: 4rem; }
  }
  @media (max-width: 56rem) {
    .supporter__inner { grid-template-columns: 1fr; }
  }
  @media (max-width: 34rem) {
    .ways { grid-template-columns: 1fr; }
    .supporter__art .device { --w: 11.5rem; }
  }

  /* Widgets on the home page: two real captures, Home Screen over Lock Screen. */
  .widgets-band {
    background: var(--paper-100);
    border-block: 1px solid var(--line);
  }
  .widgets-band__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(1.5rem, 5vw, 4.5rem);
    align-items: center;
    padding-block: clamp(3rem, 7vw, 5.5rem);
    h2 { font-size: clamp(1.875rem, 4vw, 2.75rem); margin-block-end: 0.75rem; }
    p { color: var(--ink-700); }
    p + p { margin-block-start: 0.75rem; }
  }
  .widgets-band__art {
    display: grid;
    gap: 1rem;
    justify-items: center;
  }
  @media (max-width: 56rem) {
    .widgets-band__inner { grid-template-columns: 1fr; }
  }

  .promise__inner {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 2rem;
    padding-block: clamp(3rem, 7vw, 5.5rem);
    h2 { font-size: clamp(1.875rem, 4vw, 2.75rem); }
  }
  .facts {
    display: grid;
    gap: 1.375rem;
    li {
      position: relative;
      padding-inline-start: 1.375rem;
      color: var(--ink-700);
      max-inline-size: var(--measure);
      &::before {
        content: "";
        position: absolute;
        inset-inline-start: 0;
        inset-block-start: 0.6em;
        inline-size: 0.625rem;
        block-size: 0.625rem;
        background: var(--sunset-500);
        clip-path: polygon(100% 0, 100% 100%, 0 100%);
      }
    }
    strong { color: var(--ink-900); font-weight: 600; }
    + p { margin-block-start: 1.5rem; }
  }
  @media (max-width: 47.5rem) {
    .promise__inner { grid-template-columns: 1fr; gap: 1rem; }
  }

  .closing {
    text-align: center;
    padding-block: clamp(3.5rem, 8vw, 7rem);
    border-block-start: 1px solid var(--line);
    h2 { font-size: clamp(2.125rem, 5vw, 3.75rem); margin-block-end: 1.75rem; }
    .badge img { margin-inline: auto; }
    .soon { margin-block: -0.75rem 1.5rem; }
    .cta { justify-content: center; }
  }
}

@layer inner {
  .page {
    max-inline-size: 47.5rem;
    padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(3.5rem, 8vw, 6rem);
    h1 {
      font-size: clamp(2.25rem, 5vw, 3.5rem);
      letter-spacing: -0.02em;
      margin-block-end: 0.75rem;
    }
    h2 { font-size: clamp(1.375rem, 2.6vw, 1.75rem); margin-block: 2.75rem 0.75rem; }
    h3 { font-family: var(--ui); font-weight: 600; font-size: 1.125rem; letter-spacing: 0; margin-block: 1.625rem 0.375rem; }
    p, li { color: var(--ink-700); }
    p + p { margin-block-start: 0.75rem; }
    a { overflow-wrap: anywhere; }
    ul:not([class]) { padding-inline-start: 1.25rem; display: grid; gap: 0.5rem; margin-block: 0.5rem; }
  }
  .dated { color: var(--ink-500); font-size: 0.9375rem; margin-block-end: 2rem; }
  .email {
    display: inline-block;
    margin-block: 0.375rem 0.625rem;
    font-family: var(--display);
    font-weight: 500;
    font-size: clamp(1.375rem, 3.4vw, 2.125rem);
    letter-spacing: -0.01em;
    color: var(--ink-900);
    overflow-wrap: anywhere;
  }
  .summary {
    border: 1px solid var(--line-strong);
    border-radius: 1.25rem;
    padding: 1.375rem 1.625rem;
    background: var(--paper-0);
    margin-block: 0.5rem;
    .page & h2 {
      margin-block: 0 0.75rem;
      font-family: var(--ui);
      font-size: 0.75rem;
      font-weight: 700;
      letter-spacing: 0.14em;
      line-height: 1.4;
      text-transform: uppercase;
      color: var(--sunset-700);
    }
    .page & ul { display: grid; gap: 0.625rem; list-style: none; padding-inline-start: 0; }
    li {
      position: relative;
      padding-inline-start: 1.25rem;
      &::before {
        content: "";
        position: absolute;
        inset-inline-start: 0;
        inset-block-start: 0.55em;
        inline-size: 0.5625rem;
        block-size: 0.5625rem;
        background: var(--sunset-500);
        clip-path: polygon(100% 0, 100% 100%, 0 100%);
      }
    }
  }
  /* The three destinations, numbered by the list itself. */
  .dest {
    display: grid;
    gap: 1.25rem;
    margin-block: 0.875rem 0.25rem;
    counter-reset: dest;
    > li {
      display: grid;
      grid-template-columns: auto 1fr;
      column-gap: 1.125rem;
      align-items: start;
      counter-increment: dest;
      > * { grid-column: 2; }
      &::before {
        content: counter(dest);
        grid-row: span 3;
        font-family: var(--display);
        font-weight: 600;
        font-size: 1.75rem;
        line-height: 1;
        color: var(--sunset-700);
        padding-block-start: 0.125rem;
      }
    }
    h3 { font-size: 1.0625rem; margin-block: 0 0.25rem; }
  }

  /* /widgets/ */
  .widgets-page { padding-block: clamp(2rem, 6vw, 4rem) clamp(3rem, 8vw, 6rem); }
  .widgets-hero {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: clamp(1.5rem, 5vw, 4rem);
    align-items: center;
    h1 {
      font-size: clamp(2.25rem, 5.6vw, 4rem);
      letter-spacing: -0.025em;
      line-height: 1.04;
      margin-block-end: 1.25rem;
      em { font-style: normal; color: var(--sunset-700); }
    }
    .hero__line { font-size: clamp(1.0625rem, 1.6vw, 1.25rem); color: var(--ink-700); margin-block-end: 1.75rem; }
  }
  .widgets-hero__art { display: flex; justify-content: center; .device { --w: 20rem; } }
  .widget-mode {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: clamp(1.5rem, 5vw, 4.5rem);
    align-items: start;
    padding-block: clamp(2.5rem, 6vw, 4.5rem);
    border-block-start: 1px solid var(--line);
    h2 { font-size: clamp(1.75rem, 3.6vw, 2.5rem); margin-block-end: 0.75rem; }
    p { color: var(--ink-700); }
    p + p { margin-block-start: 0.75rem; }
    strong { color: var(--ink-900); font-weight: 600; }
  }
  .shots {
    display: grid;
    gap: 1rem;
    justify-items: center;
    .device { --w: 15rem; margin-block-start: 0.5rem; }
  }
  /* A crop of a real capture: the widget on its own wallpaper, no device frame. */
  .shot {
    inline-size: 100%;
    max-inline-size: 27.5rem;
    border-radius: 1.5rem;
    overflow: hidden;
    box-shadow: 0 1.25rem 2.5rem -1.25rem rgb(74 65 58 / 0.35);
    img { inline-size: 100%; block-size: auto; }
  }
  .shot--missing { display: grid; place-items: center; min-block-size: 8rem; background: var(--paper-100); color: var(--ink-500); font-size: 0.875rem; }
  .widget-looks {
    padding-block: clamp(2.5rem, 6vw, 4.5rem);
    border-block-start: 1px solid var(--line);
    h2 { font-size: clamp(1.75rem, 3.6vw, 2.5rem); margin-block-end: 0.75rem; }
    > p { color: var(--ink-700); }
  }
  .widget-looks__row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-block-start: 2rem;
    figure { display: grid; justify-items: center; gap: 0.75rem; }
    figcaption { font-size: 0.9375rem; color: var(--ink-500); }
  }
  .widgets-how {
    padding-block: clamp(2rem, 5vw, 3.5rem) 0;
    border-block-start: 1px solid var(--line);
    margin-inline: 0;
    h2:first-child { margin-block-start: 0; }
    ol { padding-inline-start: 1.25rem; display: grid; gap: 0.375rem; color: var(--ink-700); }
  }
  @media (max-width: 51.25rem) {
    .widgets-hero, .widget-mode { grid-template-columns: 1fr; }
  }
  @media (max-width: 56rem) {
    .widget-looks__row { grid-template-columns: 1fr; }
  }
}