:root {
    /* Palette approximated from the PDF */
    --sage: #b8c7bb;
    --sage-deep: #a6b7ab;
    --ink: #0e0e10;
    --ink-70: rgba(14, 14, 16, .7);
    --muted: #2b2f2c;
    --border: #a1b2a6;
    --text: clamp(1.1rem, 4vw, 1.5rem);
}

/* Use a standard system font, replace when brand fonts are available */
/*
@font-face {
  font-family: 'Brand Sans';
  src: url('/fonts/brand-sans.woff2') format('woff2');
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}
*/

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: 'Josefin Sans', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
    color: var(--ink);
    background: #fff;
    line-height: 1.6;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

.container {
    width: min(1750px, 92%);
    margin-inline: auto;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.skip-link:focus {
    position: static;
    width: auto;
    height: auto;
    padding: .5rem .75rem;
    background: #fff;
    outline: 2px solid var(--ink);
}

/* Header with logo top-left */
.site-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2;
    padding: 1rem 2rem;
    display: flex;
    align-items: center;
}

.site-brand {
    display: inline-block;
    text-decoration: none;
}

.site-logo {
    width: 50%;
    height: auto;
}

/* HERO: full-bleed grayscale image */
.hero-bleed {
    position: relative;
    min-height: 100vh;
}

.hero-bleed__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    filter: grayscale(100%);
}

.hero-bleed__inner {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    min-height: inherit;
    padding: 2rem;
}

.hero-logo {
    width: 50vw;
    max-width: 90vw;
    height: auto;
}

.hero-chevron {
    position: absolute;
    width: 6rem;
    height: auto;
    bottom: 14px;
    font-size: 40px;
    color: #fff;
    text-shadow: 0 2px 4px var(--ink-70);
    text-decoration: none;
    line-height: 1;
    padding: .25rem .5rem;
    border-radius: 4px;
    cursor: pointer;
    transition: transform .2s ease, opacity .2s ease;
}

.hero-chevron:hover, .hero-chevron:focus {
    transform: translateY(2px);
    opacity: .9;
}

/* Section backgrounds: flat brand color */
section {
    background-color: #99a89c;
    min-height: 100vh;
    min-height: 100svh;
}

/* Sage sections now use flat color per requirement */
.sage {
    position: relative;
    background: #99a89c;
}

/* Remove separator line between consecutive sage sections to avoid visible white line */
.sage + .sage {
    border-top: 0;
}

.sage__bg {
    display: none;
}

/* Typography approximations of the stencil/condensed look */
.stencil {
    letter-spacing: .02em;
    font-weight: 800;
    text-transform: uppercase;
}

.kicker {
    letter-spacing: .22em;
    font-size: .85rem;
    text-transform: uppercase;
    margin: .5rem 0 1rem;
    color: var(--muted);
    font-family: 'Antonio', 'Josefin Sans', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
}

.title-lg {
    font-size: clamp(2.4rem, 1.6rem + 3vw, 5rem);
    line-height: .95;
}

.title-md {
    font-size: clamp(1.8rem, 1rem + 2.4vw, 3rem);
    line-height: .98;
}

/* Split (Over Bigfoot) */
.split {
    padding: clamp(2.5rem, 4vw, 4rem) 0;
}

.split__inner {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: clamp(1.2rem, 3vw, 2.5rem);
    align-items: start;
}

.split__copy p {
    max-width: 50ch;
    font-size: var(--text);
}

.split__media.tall {
    position: sticky;
    top: 1rem;
}

.split__media.tall img {
    width: 100%;
    height: auto;
    border-radius: 6px;
}

/* Work grid */
.work {
    padding: clamp(2.5rem, 4vw, 4rem) 0;
}

.work__title {
    margin: 0 0 1rem;
}

.work__grid {
    display: grid;
    grid-template-columns: 1fr .55fr .55fr;
    gap: 1rem;
    align-items: start;
}

.work__item {
    width: 100%;
    height: auto;
    border-radius: 6px;
    object-fit: cover;
    background: #ccc;
}

.work__item--wide {
    grid-column: 1 / 2;
    align-self: stretch;
}

/* Quote with image on the right */
.quote-block {
    padding: clamp(2.5rem, 4vw, 4rem) 0;
}

.quote__inner {
    display: grid;
    grid-template-columns: 1fr .85fr;
    gap: 2rem;
    align-items: center;
}

.quote {
    font-size: clamp(2rem, 1rem + 1.2vw, 6rem);
    margin: 0;
    max-width: 32ch;
}

.quote__media img {
    width: 100%;
    height: auto;
    border-radius: 6px;
}

/* Contact */
.contact {
    padding: clamp(2.5rem, 4vw, 5rem) 0 6rem;
    position: relative;
}

.contact__inner {
    display: grid;
    grid-template-columns: 1fr; /* brand on its own row below */
    gap: 2rem;
    align-items: start;
}

.contact .stencil {
    margin: 0 0 .5rem;
}

.contact .kicker {
    margin: 0 0 1rem;
}

.contact__details {
    font-style: normal;
}

.contact__details {
    font-size: var(--text);
}

.contact__details a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid currentColor;
}

.contact__brand img {
    width: min(600px, 80vw); /* at least twice as big */
    height: auto;
    margin-left: auto;
}

.contact__brand { margin-top: 1rem; }

/* Contact section should be half the height of other sections */
#contact {
    min-height: 50vh;
    min-height: 50svh;
}

/* Utilities */
.hidden {
    position: absolute;
    inset: 0;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Responsive */
@media (max-width: 1024px) {
    .split__inner {
        grid-template-columns: 1fr;
    }

    .quote__inner {
        grid-template-columns: 1fr;
    }

    .work__grid {
        grid-template-columns: 1fr 1fr;
    }

    .work__item--wide {
        grid-column: 1 / -1;
    }
}

@media (max-width: 640px) {
    .hero-logo {
        width: 70%;
    }

    .site-logo {
        width: 100%;
    }

    .work__grid {
        grid-template-columns: 1fr;
    }
}

@media only screen and (min-width: 1280px) {
    .split__copy {
        .kicker, > p {
            margin-left: 8rem;
        }
    }
}


/* Local font for kicker */
@font-face {
  font-family: 'Antonio';
  src: url('/fonts/Antonio-Regular.woff2') format('woff2'),
       url('/fonts/Antonio-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Typography — apply Google fonts */
h1, h2, h3, h4, h5, h6,
.title-lg, .title-md, .stencil {
    font-family: 'Bungee', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, cursive;
    font-weight: 400;
}


/* === Decorative background overlays for sections (p2–p5) === */
/* Ensure section content stays above overlays */
.sage > * { position: relative; z-index: 1; }

/* Base overlay for sections that opt-in with bg-pX class */
.sage.bg-p2::before,
.sage.bg-p3::before,
.sage.bg-p4::before,
.sage.bg-p5::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0; /* under content, above flat background */
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center; /* can be adjusted per design later */
  pointer-events: none;
}

/* Individual images */
.sage.bg-p2::before { background-image: url('/img/bgs/p2.png'); }
.sage.bg-p3::before { background-image: url('/img/bgs/p3.png'); }
.sage.bg-p4::before { background-image: url('/img/bgs/p4.png'); }
.sage.bg-p5::before { background-image: url('/img/bgs/p5.png'); }


/* Desktop-specific quote size to match 46.9pt (~62.53px) and kicker to 23pt (~30.67px) */
@media (min-width: 1024px) {
  .quote { font-size: 3.91rem; }
  .kicker { font-size: 1.92rem; }
  .hero-logo { width: 33vw; max-width: 900px; }
}


/* Kicker sizes per content: desktop exact pt conversions and slightly smaller on mobile */
/* 23pt → 1.9167rem; 27.5pt → 2.2917rem (assuming 16px root; 1pt = 1/12rem) */
@media (min-width: 1024px) {
  #over-bigfoot .kicker { font-size: 1.9167rem; }
  #contact .kicker { font-size: 2.2917rem; }
}

/* Make them ~10% smaller on mobile */
@media (max-width: 1023.98px) {
  #over-bigfoot .kicker { font-size: 1.725rem; }   /* 23pt × 0.9 */
  #contact .kicker { font-size: 2.0625rem; }      /* 27.5pt × 0.9 */
}