/* Type is self-hosted: the page makes no third-party request on load. */

@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/inter-latin.woff2") format("woff2");
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/inter-latin-ext.woff2") format("woff2");
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Raleway";
  src: url("/assets/fonts/raleway-latin.woff2") format("woff2");
  font-weight: 700 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Raleway";
  src: url("/assets/fonts/raleway-latin-ext.woff2") format("woff2");
  font-weight: 700 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Lifted from the live site's Tailwind v4 theme so this page renders as the
   same system: https://web.cookielab.app/_astro/BaseLayout.*.css */
:root {
  --color-offwhite: #f2f0e5;
  --color-dark: #1e1e1e;
  --color-dark-lighter: #3a3a3a;
  --color-gold: #ffcd68;

  --color-background: var(--color-offwhite);
  --color-foreground: var(--color-dark);
  --color-foreground-muted: rgb(30 30 30 / 0.7);

  --font-heading: "Raleway", "Montserrat", "Arial Black", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Helvetica Neue", sans-serif;

  --radius-sm: 2px;
  --radius-lg: 4px;
  --radius-xl: 6px;
  --radius-2xl: 8px;

  --container-max: 38rem;
  --container-pad: 1.5rem;
  /* Padding sits outside the measure, so the column keeps its full width */
  --container-outer: calc(var(--container-max) + 2 * var(--container-pad));

  --section-gap: 2.5rem;
}

/* A 320px-class phone still has to hold the whole page in one scroll */
@media (max-width: 22.5rem) {
  :root {
    --section-gap: 2.25rem;
  }
}

@media (min-width: 768px) {
  :root {
    --container-pad: 3rem;
    --section-gap: 4rem;
  }
}

/* Held back to 75rem: from 1024 the hero is already two columns, and 5rem a
   side would take 160px straight out of the photo. */
@media (min-width: 75rem) {
  :root {
    --container-pad: 5rem;
  }
}

@media (min-width: 60rem) {
  :root {
    --container-max: 68rem;
    --section-gap: 5rem;

    /* The page's one vertical seam. The photo and every section heading sit
       in this rail, so the right column starts on the same line all the way
       down. Capped at 26rem so nothing shifts when the padding steps up. */
    --rail: min(26rem, 40%);
    --rail-gap: 3rem;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background-color: var(--color-background);
  color: var(--color-foreground);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img {
  display: block;
}

a {
  color: inherit;
}

.container {
  width: 100%;
  max-width: var(--container-outer);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.section {
  margin-top: var(--section-gap);
}

.site-header {
  padding-block: 1rem;
}

@media (min-width: 768px) {
  .site-header {
    padding-block: 1.5rem;
  }
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-family: var(--font-heading);
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--color-foreground-muted);
  text-decoration: none;
  border-radius: var(--radius-lg);
  transition: color 0.3s;
}

.brand:hover {
  color: var(--color-dark);
}

.brand img {
  width: auto;
  height: 1.75rem;
}

.photo {
  width: 100%;
  /* Beats the height attribute, so aspect-ratio sizes the box */
  height: auto;
  aspect-ratio: 1 / 1;
  /* Capped so the mark, the headline and the button stay on the first screen */
  max-height: 40vh;
  object-fit: cover;
  /* Biased up: the cap letterboxes the square, and the head sits high in it */
  object-position: 50% 4%;
}

@media (min-width: 40rem) {
  .photo {
    width: min(100%, var(--container-max));
    max-height: 55vh;
    margin-inline: auto;
    border-radius: var(--radius-2xl);
  }
}

h1 {
  margin: 1.25rem 0 0;
  font-family: var(--font-heading);
  font-size: clamp(2rem, 8vw, 3rem);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--color-dark);
  text-wrap: balance;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  margin-top: 1.25rem;
}

h2 {
  margin: 0 0 1rem;
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 900;
  line-height: 1.25;
  color: var(--color-dark);
}

p {
  margin: 1rem 0 0;
}

.price {
  margin-top: 1.75rem;
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 6vw, 2.125rem);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--color-dark);
  text-wrap: balance;
}

figure {
  margin: 1.5rem 0 0;
}

.shot {
  width: 100%;
  height: auto;
  border-radius: var(--radius-2xl);
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0.75rem 1.5rem;
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: var(--radius-xl);
  transition: all 0.3s;
}

.button--primary {
  background-color: var(--color-gold);
  color: var(--color-dark);
}

/* The live site's inversion: the gold fill becomes gold text on dark */
.button:hover,
.button:active {
  background-color: var(--color-dark);
  border-color: var(--color-dark);
  color: var(--color-gold);
}

.button:active {
  background-color: var(--color-dark-lighter);
}

.link {
  color: var(--color-foreground-muted);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  border-radius: var(--radius-sm);
  transition: color 0.3s;
}

.link:hover {
  color: var(--color-dark);
}

/* Dark ring: the site's offwhite one would vanish on this background */
:where(a, button):focus-visible {
  outline: 2px solid var(--color-dark);
  outline-offset: 2px;
}

.site-footer {
  margin-top: var(--section-gap);
  padding-block: 0 2rem;
  color: var(--color-foreground-muted);
}

/* Desktop: heading in the rail, content in the column beside it, so every row
   starts on the same left edge. The footer takes the grid with nothing in the
   rail — it is the last line of the copy, not of the photo. */
@media (min-width: 60rem) {
  .hero,
  .section,
  .site-footer {
    display: grid;
    grid-template-columns: var(--rail) minmax(0, 1fr);
    column-gap: var(--rail-gap);
  }

  /* The hero doubles as the container so the photo can be a grid child */
  .hero {
    /* Content-sized row, centred in min-height, so the photo aligns against
       the taller column and lands on the buttons' line rather than floating */
    align-content: center;
    align-items: end;
    /* Less the header, capped so a tall window gets air, not a hole */
    min-height: min(calc(72vh - 4.75rem), 34rem);
    width: 100%;
    max-width: var(--container-outer);
    margin-inline: auto;
    padding-inline: var(--container-pad);
  }

  .hero>.container {
    display: flex;
    flex-direction: column;
    max-width: none;
    margin-inline: 0;
    padding-inline: 0;
    /* Centres when the text is the shorter column, a no-op when it is the
       taller one and defines the row. One rule covers both. */
    align-self: center;
  }

  .hero h1 {
    order: 1;
  }

  .hero .price {
    order: 2;
    margin-top: 1.5rem;
  }

  .hero .actions {
    order: 3;
    margin-top: 1.75rem;
  }

  .photo {
    width: 100%;
    /* A cap here would block the stretch below, and a blocked stretch falls
       back to start alignment, reopening the gap it is meant to close */
    max-height: none;
    object-position: center;
    /* Portrait crop when the text is the taller column, rather than a gap
       above the photo. A no-op when the photo is the taller one. */
    align-self: stretch;
  }

  h1 {
    margin-top: 0;
  }

  .section>*,
  .site-footer>* {
    grid-column: 2;
  }

  .section>h2 {
    grid-column: 1;
    grid-row: 1;
    /* Nudged so its cap height meets the first line of the content */
    margin: 0.0625rem 0 0;
    /* Flushed to the gap: the headings land on the photo's right edge and the
       rail reads as a column, not a short word adrift in it */
    text-align: right;
  }

  /* The first row starts level with the heading, whatever element it is */
  .section>h2+* {
    margin-top: 0;
  }
}