/* cormorant-garamond-cyrillic-ext-wght-normal */
@font-face {
  font-family: 'Cormorant Garamond Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 300 700;
  src: url(/build/fonts/cormorant-garamond-cyrillic-ext-wght-normal.9f9c138f.woff2) format('woff2-variations');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

/* cormorant-garamond-cyrillic-wght-normal */
@font-face {
  font-family: 'Cormorant Garamond Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 300 700;
  src: url(/build/fonts/cormorant-garamond-cyrillic-wght-normal.ee4d6d6a.woff2) format('woff2-variations');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* cormorant-garamond-vietnamese-wght-normal */
@font-face {
  font-family: 'Cormorant Garamond Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 300 700;
  src: url(/build/fonts/cormorant-garamond-vietnamese-wght-normal.0c320d23.woff2) format('woff2-variations');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* cormorant-garamond-latin-ext-wght-normal */
@font-face {
  font-family: 'Cormorant Garamond Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 300 700;
  src: url(/build/fonts/cormorant-garamond-latin-ext-wght-normal.bbc9c24c.woff2) format('woff2-variations');
  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;
}

/* cormorant-garamond-latin-wght-normal */
@font-face {
  font-family: 'Cormorant Garamond Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 300 700;
  src: url(/build/fonts/cormorant-garamond-latin-wght-normal.ed9f3c30.woff2) format('woff2-variations');
  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;
}
/* cormorant-garamond-cyrillic-ext-wght-italic */
@font-face {
  font-family: 'Cormorant Garamond Variable';
  font-style: italic;
  font-display: swap;
  font-weight: 300 700;
  src: url(/build/fonts/cormorant-garamond-cyrillic-ext-wght-italic.85ba36c8.woff2) format('woff2-variations');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

/* cormorant-garamond-cyrillic-wght-italic */
@font-face {
  font-family: 'Cormorant Garamond Variable';
  font-style: italic;
  font-display: swap;
  font-weight: 300 700;
  src: url(/build/fonts/cormorant-garamond-cyrillic-wght-italic.1a9d3268.woff2) format('woff2-variations');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* cormorant-garamond-vietnamese-wght-italic */
@font-face {
  font-family: 'Cormorant Garamond Variable';
  font-style: italic;
  font-display: swap;
  font-weight: 300 700;
  src: url(/build/fonts/cormorant-garamond-vietnamese-wght-italic.8bf88384.woff2) format('woff2-variations');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* cormorant-garamond-latin-ext-wght-italic */
@font-face {
  font-family: 'Cormorant Garamond Variable';
  font-style: italic;
  font-display: swap;
  font-weight: 300 700;
  src: url(/build/fonts/cormorant-garamond-latin-ext-wght-italic.fca85866.woff2) format('woff2-variations');
  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;
}

/* cormorant-garamond-latin-wght-italic */
@font-face {
  font-family: 'Cormorant Garamond Variable';
  font-style: italic;
  font-display: swap;
  font-weight: 300 700;
  src: url(/build/fonts/cormorant-garamond-latin-wght-italic.f9049304.woff2) format('woff2-variations');
  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;
}
/* jost-cyrillic-wght-normal */
@font-face {
  font-family: 'Jost Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/build/fonts/jost-cyrillic-wght-normal.60e12994.woff2) format('woff2-variations');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* jost-latin-ext-wght-normal */
@font-face {
  font-family: 'Jost Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/build/fonts/jost-latin-ext-wght-normal.655d5416.woff2) format('woff2-variations');
  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;
}

/* jost-latin-wght-normal */
@font-face {
  font-family: 'Jost Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/build/fonts/jost-latin-wght-normal.6550327e.woff2) format('woff2-variations');
  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;
}
/*
 * Styles of the public site, from the validated mock-up and the
 * "Camille Photographie" logo:
 * cream background, warm ink, a terracotta accent, an expressive italic serif
 * for headings and widely spaced small capitals for labels.
 *
 * Fonts are self-hosted (bundled from @fontsource by Encore) rather than
 * loaded from Google's servers, which would send every visitor's IP address
 * to Google (GDPR).
 */

/*
 * Fallback faces, shown while the web fonts load (font-display: swap): a local
 * system font resized to the web font's average character width and line box,
 * so that text does not jump when the real font arrives. Values from the
 * fonts' metrics (average width: Jost 428 / Arial 913 per 2048 units, Cormorant
 * Garamond 394 / Georgia 913; size-adjust = web width / fallback width, the
 * overrides are the web font's ascent, descent and line gap divided by it).
 * Where none of these fonts exists (Linux, Android), the stack's next fonts
 * apply, as before.
 */
@font-face {
    font-family: 'Jost Fallback';
    src: local('Arial'), local('Liberation Sans'), local('Arimo'), local('Helvetica');
    size-adjust: 96.01%;
    ascent-override: 111.45%;
    descent-override: 39.06%;
    line-gap-override: 0%;
}

@font-face {
    font-family: 'Cormorant Fallback';
    src: local('Georgia'), local('Gelasio');
    size-adjust: 88.38%;
    ascent-override: 104.55%;
    descent-override: 32.47%;
    line-gap-override: 0%;
}

@font-face {
    font-family: 'Cormorant Fallback';
    font-style: italic;
    src: local('Georgia Italic'), local('Gelasio Italic');
    size-adjust: 88.38%;
    ascent-override: 104.55%;
    descent-override: 32.47%;
    line-gap-override: 0%;
}

/* ==========================================================
   1. Tokens: colors, fonts, spacing
   ========================================================== */
:root {
    /* palette "pêche et ocre", from the colors of the logo (terracotta and ochre);
       kept clear of #C15F3C, #F4F3EE and #B1ADA1 (no likeness wanted) */
    --cream: #fff0e2;          /* main background: a light tint of the ochre of the logo */
    --ink: #2b1f1d;            /* text and headings, 14.3:1 on cream */
    --terracotta: #b4705f;     /* decoration: dots, rules, large headings (dusty rose).
                                  3.5:1 on cream and 3.1:1 on sand: enough for large text
                                  and graphics (3:1), too low for small text */
    --ochre: #cf9c64;          /* dots of the labels and bullets: decoration only (2.2:1) */

    /* derived shades */
    --terracotta-deep: #8b4b41;   /* links, buttons, small labels: 5.9:1 on cream,
                                     6.6:1 for white text on it */
    --terracotta-dark: #6f3c34;   /* button hover */
    --sand: #fbe0c8;              /* alternate section background */
    --linen: #ffffff;             /* cards, form fields: white, standing out of the cream */
    --line: #e3cdb6;              /* borders and rules */
    --field-line: #8a7268;        /* borders of fields and controls: 4.0:1 on cream, 4.5:1 on white */
    --ink-soft: #6b5650;          /* secondary text: 6.1:1 on cream, 5.4:1 on sand */
    --error: #a3261b;             /* 7.4:1 on white */

    /* tones of the photo placeholders, lightest to darkest */
    --ph-1: #fbe3cd;
    --ph-2: #f7c69a;
    --ph-3: #cfa784;
    --ph-4: #c28a7f;
    --ph-5: #cf9c64;

    --font-title: 'Cormorant Garamond Variable', 'Cormorant Fallback', Georgia, 'Times New Roman', serif;
    --font-text: 'Jost Variable', 'Jost Fallback', system-ui, -apple-system, 'Segoe UI', sans-serif;

    --max-width: 74rem;
    --gutter: clamp(1.25rem, 5vw, 3rem);
    --section-space: clamp(4.5rem, 12vw, 8.5rem);
    --radius: 2px;
    --header-height: 4.5rem;

    --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ==========================================================
   2. Base
   ========================================================== */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: var(--header-height);
}

/* global.css (bootstrap entry, shared with the admin) sets another font */
body {
    margin: 0;
    background: var(--cream);
    color: var(--ink);
    font-family: var(--font-text);
    font-weight: 300;
    font-size: 1.0625rem;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
    font-family: var(--font-title);
    font-weight: 400;
    line-height: 1.1;
    margin: 0 0 1rem;
    text-wrap: balance;
}

h1 {
    font-size: clamp(2.6rem, 7vw, 4.5rem);
}

h2 {
    font-size: clamp(2.4rem, 6vw, 3.75rem);
}

h3 {
    font-size: 1.75rem;
}

/* the expressive italics of the serif, as in the logo */
em {
    font-family: var(--font-title);
    font-style: italic;
}

p {
    margin: 0 0 1.25rem;
}

a {
    color: var(--terracotta-deep);
    text-underline-offset: 0.22em;
    text-decoration-thickness: 1px;
}

a:hover {
    color: var(--terracotta-dark);
}

:focus-visible {
    outline: 2px solid var(--terracotta-deep);
    outline-offset: 3px;
}

::selection {
    background: var(--terracotta-deep);
    color: var(--linen);
}

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

.container {
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

.container--narrow {
    max-width: 48rem;
}

.section {
    padding: var(--section-space) 0;
}

.section--tight {
    padding: clamp(2.5rem, 6vw, 4.5rem) 0;
}

.section--sand {
    background: var(--sand);
}

.section--center {
    text-align: center;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.skip-link {
    position: absolute;
    left: 1rem;
    top: -3rem;
    z-index: 100;
    padding: 0.6rem 1rem;
    background: var(--ink);
    color: var(--cream);
}

.skip-link:focus {
    top: 1rem;
    color: var(--cream);
}

/* ==========================================================
   3. Reusable elements
   ========================================================== */

/* small spaced capitals, as "PHOTOGRAPHIE" in the logo */
.label {
    font-family: var(--font-text);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--terracotta-deep);
}

/* section kicker: terracotta dot + label */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    margin-bottom: 1.25rem;
}

.eyebrow::before {
    content: '';
    flex-shrink: 0;
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 50%;
    background: var(--ochre);
}

.section-head {
    max-width: 40rem;
    margin-bottom: clamp(2.5rem, 6vw, 4rem);
}

.section-head--center {
    margin-inline: auto;
    text-align: center;
}

.section-more {
    margin: 2.5rem 0 0;
    text-align: center;
}

.lead {
    font-size: 1.15rem;
    color: var(--ink-soft);
}

/* buttons: small capitals, at least 44px tall */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    min-height: 3rem;
    padding: 0.85rem 1.9rem;
    border: 1px solid var(--terracotta-deep);
    border-radius: var(--radius);
    background: var(--terracotta-deep);
    color: var(--linen);
    font-family: var(--font-text);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.25s var(--ease), border-color 0.25s var(--ease), color 0.25s var(--ease);
}

.btn:hover {
    background: var(--terracotta-dark);
    border-color: var(--terracotta-dark);
    color: var(--linen);
}

.btn--ghost {
    background: transparent;
    color: var(--ink);
    border-color: var(--ink);
}

.btn--ghost:hover {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--cream);
}

/* section divider: thin rules around the mountain line of the logo */
.divider {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    max-width: 22rem;
    margin: 0 auto;
}

.divider::before,
.divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--line);
}

.divider svg {
    width: 3.5rem;
    height: 1.7rem;
    flex-shrink: 0;
}

.mountain {
    display: inline-block;
    overflow: visible;
    color: var(--ink);
}

/*
 * Photo placeholders (see the photo() macro in templates/front/_macros),
 * until real images are uploaded: --ratio is the photo's aspect ratio,
 * --tone one of the --ph-* colors.
 */
.ph {
    position: relative;
    display: grid;
    place-items: end start;
    width: 100%;
    aspect-ratio: var(--ratio, 3 / 2);
    padding: 0.9rem 1rem;
    overflow: hidden;
    background:
        radial-gradient(120% 90% at 20% 15%, rgba(255, 240, 226, 0.55), transparent 60%),
        linear-gradient(160deg, var(--tone, var(--ph-2)), color-mix(in srgb, var(--tone, var(--ph-2)) 70%, var(--ink)));
    color: rgba(43, 31, 29, 0.72);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
}

/* a faint reminder of the mountain line in each placeholder */
.ph::after {
    content: '';
    position: absolute;
    inset: 0;
    width: min(40%, 6rem);
    height: auto;
    margin: auto;
    aspect-ratio: 406.56 / 144.04;
    background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%2710 53.49 406.56 144.04%27%3E%3Cpath d=%27M162.23,54.13c-4.69,1.32-7.84,3.44-12.61,8.43-5.64,5.86-10.33,13.26-18.1,28.58-9.38,18.39-13.26,22.43-20.01,20.67-8.79-2.27-12.75-4.1-21.25-9.82-10.7-7.18-13.04-8.5-15.61-8.5-10.26,0-28.21,25.65-52.69,75.12-4.98,10.04-9.82,20.08-10.7,22.21-1.61,3.74-1.61,3.88-.37,5.28,1.61,1.83,4.18,1.91,5.64.15.59-.66,3.66-6.82,6.82-13.63,6.96-14.95,18.98-37.74,26.46-50.27,7.11-11.95,12.09-17.52,18.32-20.59,4.4-2.2,5.06-2.27,10.04-1.91,5.72.44,12.46,2.56,21.91,6.82,11.73,5.28,19.64,4.1,27.19-4.03,2.13-2.35,4.91-6.45,6.3-9.31,7.18-14.8,12.24-23.38,17-28.43,8.65-9.31,15.9-11.58,23.82-7.55,5.57,2.86,9.89,7.11,17.88,17.73,8.21,10.92,13.41,15.98,19.64,19.13,3.66,1.83,4.98,2.13,10.77,2.13,7.18,0,7.55-.15,24.99-9.45,7.18-3.74,13.12-5.13,20.08-4.69,10.41.73,17.95,6.6,29.31,22.57,10.77,15.24,19.49,24.48,32.69,34.59,17.37,13.26,40.89,24.48,70.28,33.27,7.26,2.2,13.41,3.96,13.7,3.96,2.05,0,3.88-5.86,2.13-6.96-.44-.22-5.35-1.69-11.07-3.3-30.56-8.65-55.92-20.89-74.38-35.91-8.5-6.96-18.69-18.1-26.75-29.31-9.97-13.78-17.88-21.69-25.43-25.43-5.42-2.64-5.94-2.78-13.04-2.78-6.74,0-7.69.22-12.31,2.35-2.78,1.32-8.57,4.54-12.82,7.11-12.61,7.55-17.95,8.65-24.92,5.13-5.57-2.78-11.87-9.53-19.05-20.37-12.46-18.91-22.86-26.02-33.86-22.94Z%27 fill=%27%23FFFDFA%27 fill-opacity=%27.55%27 fill-rule=%27evenodd%27/%3E%3C/svg%3E");
}

.ph__info {
    position: relative;
    z-index: 1;
}

/* a real photo (see the photo() macro) filling its box */
.ph--photo {
    padding: 0;
    /* the average color of the photo until it has loaded (PhotoStorage) */
    background: var(--bg, var(--sand));
}

.ph--photo::after {
    display: none;
}

.ph--photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ==========================================================
   4. Header: sticky, logo on the left
   ========================================================== */
.header {
    position: sticky;
    top: 0;
    z-index: 50;
    height: var(--header-height);
    border-bottom: 1px solid transparent;
    transition: border-color 0.3s var(--ease);
}

/* The frosted background is on a pseudo-element: a backdrop-filter on the
   header itself would make it the containing block of the full-screen mobile
   menu (position: fixed), which would then be as tall as the header. */
.header::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: rgba(255, 240, 226, 0.94);
    backdrop-filter: blur(8px);
}

/* set by header.js as soon as the page scrolls */
.header.is-scrolled {
    border-bottom-color: var(--line);
}

/* Floating header over the photo of the home page: transparent, cream
   logo and menu; back to the cream bar once the page scrolls or the mobile
   menu opens (assets/front/site/header.js). */
.header--overlay {
    position: fixed;
    right: 0;
    left: 0;
}

.header--overlay:not(.is-scrolled):not(.menu-open)::before {
    background: transparent;
    backdrop-filter: none;
}

.header--overlay .logo__img--light {
    display: none;
}

.header--overlay:not(.is-scrolled):not(.menu-open) .logo__img--light {
    display: block;
}

.header--overlay:not(.is-scrolled):not(.menu-open) .logo__img--dark {
    display: none;
}

.header--overlay:not(.is-scrolled):not(.menu-open) .burger {
    color: var(--linen);
}

@media (min-width: 64rem) {
    .header--overlay:not(.is-scrolled) .nav__link {
        color: var(--linen);
    }
}

.header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
}

/* the logo image, see templates/front/_partials/logo.html.twig */
.logo {
    display: inline-flex;
    flex-shrink: 0;
}

.logo__img {
    width: auto;
    height: 2.9rem;
}

.nav__list {
    display: flex;
    gap: 2rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.nav__link {
    display: inline-block;
    padding: 0.75rem 0;
    color: var(--ink);
    font-size: 0.74rem;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    text-decoration: none;
    background: linear-gradient(var(--terracotta), var(--terracotta)) no-repeat left bottom 0.5rem / 0 1px;
    transition: background-size 0.3s var(--ease);
}

.nav__link:hover,
.nav__link[aria-current="page"] {
    color: var(--ink);
    background-size: 100% 1px;
}

.nav__cart-count {
    display: inline-block;
    min-width: 1.35rem;
    margin-left: 0.35rem;
    padding: 0.05rem 0.4rem;
    border-radius: 999px;
    background: var(--terracotta-deep);
    color: var(--linen);
    font-size: 0.68rem;
    letter-spacing: 0;
    text-align: center;
}

.nav__cart-count[hidden] {
    display: none;
}

.order-summary {
    margin: 2rem 0 0.5rem;
    text-align: left;
}

.order-summary__total td {
    font-family: var(--font-title);
    font-size: 1.35rem;
    border-bottom: 0;
}

.nav__cta {
    min-height: 2.75rem;
    padding: 0.6rem 1.3rem;
}

.burger {
    display: none;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    margin-right: -0.6rem;
    border: 0;
    background: none;
    color: var(--ink);
    cursor: pointer;
}

.burger__lines,
.burger__lines::before,
.burger__lines::after {
    display: block;
    width: 1.4rem;
    height: 1px;
    background: currentColor;
    transition: transform 0.3s var(--ease), opacity 0.2s;
}

.burger__lines {
    position: relative;
}

.burger__lines::before,
.burger__lines::after {
    content: '';
    position: absolute;
    left: 0;
}

.burger__lines::before { top: -0.4rem; }
.burger__lines::after { top: 0.4rem; }

.burger[aria-expanded="true"] .burger__lines { background: transparent; }
.burger[aria-expanded="true"] .burger__lines::before { transform: translateY(0.4rem) rotate(45deg); }
.burger[aria-expanded="true"] .burger__lines::after { transform: translateY(-0.4rem) rotate(-45deg); }

@media (max-width: 63.99rem) {
    .burger {
        display: inline-flex;
    }

    /* mobile menu: full-screen panel below the header */
    .nav {
        position: fixed;
        inset: var(--header-height) 0 0 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 2rem var(--gutter);
        background: var(--cream);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s var(--ease), visibility 0.3s;
    }

    .nav.is-open {
        opacity: 1;
        visibility: visible;
    }

    .nav__list {
        flex-direction: column;
        align-items: center;
        gap: 0.5rem;
    }

    .nav__link {
        font-size: 0.85rem;
    }

    .nav__cta {
        margin-top: 1rem;
    }
}

@media (min-width: 64rem) {
    .nav__list {
        align-items: center;
    }
}

/* ==========================================================
   5. Page heading (inner pages) and breadcrumb
   ========================================================== */
.page-head {
    padding: clamp(2rem, 5vw, 3.5rem) 0 0;
}

.page-head__text {
    max-width: 46rem;
}

.page-head h1 {
    margin-bottom: 1.25rem;
}

.breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0;
    margin: 0 0 clamp(1.5rem, 4vw, 2.5rem);
    padding: 0;
    list-style: none;
    font-size: 0.85rem;
    color: var(--ink-soft);
}

.breadcrumb--standalone ol {
    margin: clamp(2rem, 5vw, 3rem) 0 0;
}

.breadcrumb li:not(:last-child)::after {
    content: '/';
    margin: 0 0.6rem;
    color: var(--line);
}

.breadcrumb a {
    color: var(--ink-soft);
}

.breadcrumb a:hover {
    color: var(--ink);
}

/* ==========================================================
   6. Home: hero and introduction
   ========================================================== */
.hero {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: calc(100svh - var(--header-height));
    padding: 3rem 0 clamp(3rem, 10vh, 6rem);
    isolation: isolate;
}

/* full-screen hero under a floating header (home page): the photo starts at the very top */
.hero--full {
    min-height: 100svh;
    padding-top: calc(var(--header-height) + 3rem);
}

/* a soft veil at the top keeps the cream logo and menu readable on a bright sky */
.hero--full::after {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    z-index: -1;
    height: 9rem;
    background: linear-gradient(to bottom, rgba(43, 31, 29, 0.5), rgba(43, 31, 29, 0));
    pointer-events: none;
}

.hero__photo {
    position: absolute;
    inset: 0;
    z-index: -2;
    height: 100%;
    aspect-ratio: auto;
}

/* no mountain on the big photo: it would clash with the title */
.hero__photo::after {
    display: none;
}

/* gradient veil keeping the light text readable on any photo */
.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(to top, rgba(43, 31, 29, 0.72) 0%, rgba(43, 31, 29, 0.25) 45%, rgba(43, 31, 29, 0) 70%);
}

.hero__content {
    max-width: 44rem;
    color: var(--linen);
}

.hero .label {
    color: var(--linen);
}

.hero .eyebrow::before {
    background: var(--linen);
}

.hero h1 {
    font-size: clamp(2.9rem, 9vw, 5.75rem);
    margin-bottom: 1.25rem;
}

.hero h1 em {
    display: block;
}

/* the kicker inside the H1 keeps the look it had as a paragraph above it */
.hero h1 .hero__kicker {
    display: flex;
    width: fit-content;
    line-height: 1.7;
    font-style: normal;
    text-wrap: wrap;
}

.hero__text {
    max-width: 32rem;
    margin-bottom: 2.25rem;
    font-size: 1.1rem;
    color: rgba(255, 240, 226, 0.9);
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.hero .btn--ghost {
    color: var(--linen);
    border-color: rgba(255, 240, 226, 0.7);
}

.hero .btn--ghost:hover {
    background: var(--linen);
    border-color: var(--linen);
    color: var(--ink);
}

.intro {
    text-align: center;
}

.intro__quote {
    max-width: 46rem;
    margin: 2.5rem auto 0;
    font-family: var(--font-title);
    font-size: clamp(1.6rem, 3.6vw, 2.3rem);
    line-height: 1.35;
}

/* ==========================================================
   7. Galleries: filters, masonry grid, lightbox
   ========================================================== */
.filters {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem 1.75rem;
    margin-bottom: 2.75rem;
}

.filter {
    padding: 0.7rem 0;
    border: 0;
    border-bottom: 1px solid transparent;
    background: none;
    color: var(--ink-soft);
    font-family: var(--font-text);
    font-size: 0.74rem;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s;
}

.filter:hover {
    color: var(--ink);
}

.filter[aria-pressed="true"] {
    color: var(--ink);
    border-bottom-color: var(--terracotta);
}

/*
 * Justified rows: every photo of a row has the same height, and takes the
 * width of its orientation (--r, width / height, set on each item). A photo
 * starts from the width it would have at --row height, then the row shares
 * what is left in proportion to the ratios: widths stay proportional to the
 * ratios, so heights stay equal, and the order reads left to right, as in
 * the lightbox. The last row is not stretched (the ::after takes the rest).
 * Phones: one photo per row, at its full width.
 */
.gallery {
    --row: 18rem;
    --gap: 1.25rem;
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap);
    margin: 0;
    padding: 0;
    list-style: none;
}

.gallery--covers {
    /* three landscape covers a row on a desktop, two on a tablet; close to
       the size they are stretched to, so that a last cover alone matches */
    --row: 14rem;
}

@media (min-width: 64rem) {
    .gallery { --gap: 1.5rem; }
}

.gallery::after {
    content: "";
    flex-grow: 1000000;
}

.gallery__item {
    flex: 1 1 100%;
    min-width: 0;
    margin: 0;
}

@media (min-width: 40rem) {
    .gallery__item {
        flex: calc(var(--r, 1.5) * 100) 1 calc(var(--r, 1.5) * var(--row));
    }
}

.gallery__item[hidden] {
    display: none;
}

.gallery__link,
.gallery__button {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    overflow: hidden;
}

.gallery__button {
    cursor: zoom-in;
}

.gallery__link .ph,
.gallery__button .ph {
    transition: transform 0.8s var(--ease);
}

.gallery__caption {
    position: absolute;
    inset: auto 0 0 0;
    padding: 2.5rem 1.1rem 1rem;
    background: linear-gradient(to top, rgba(43, 31, 29, 0.7), transparent);
    color: var(--linen);
    text-align: left;
    opacity: 0;
    transform: translateY(0.5rem);
    transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}

.gallery__caption strong {
    display: block;
    font-family: var(--font-title);
    font-style: italic;
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 1.2;
}

.gallery__caption span {
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.gallery__link:hover .ph,
.gallery__link:focus-visible .ph,
.gallery__button:hover .ph,
.gallery__button:focus-visible .ph {
    transform: scale(1.03);
}

.gallery__link:hover .gallery__caption,
.gallery__link:focus-visible .gallery__caption {
    opacity: 1;
    transform: none;
}

/* on touch screens (no hover), captions stay visible */
@media (hover: none) {
    .gallery__caption {
        opacity: 1;
        transform: none;
    }
}

/* lightbox: native <dialog> (Escape key, focus trapping) */
.lightbox {
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: rgba(43, 31, 29, 0.96);
    color: var(--linen);
}

.lightbox[open] {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto 1fr auto;
    align-items: center;
    animation: fade-in 0.3s var(--ease);
}

.lightbox::backdrop {
    background: transparent;
}

.lightbox__figure {
    grid-column: 2;
    grid-row: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    height: 100%;
    min-height: 0;
    margin: 0;
    padding: 0 0.5rem;
}

.lightbox__img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: calc(100svh - 10rem);
    object-fit: contain;
}

.lightbox__caption {
    font-family: var(--font-title);
    font-style: italic;
    font-size: 1.3rem;
    text-align: center;
}

.lightbox__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    margin: 0.5rem;
    border: 1px solid rgba(255, 240, 226, 0.35);
    border-radius: 50%;
    background: none;
    color: var(--linen);
    font-size: 1.2rem;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
}

.lightbox__btn:hover {
    background: rgba(255, 240, 226, 0.12);
    border-color: var(--linen);
}

.lightbox__btn:focus-visible {
    outline-color: var(--linen);
}

.lightbox__close { grid-column: 3; grid-row: 1; justify-self: end; }
.lightbox__prev { grid-column: 1; grid-row: 2; }
.lightbox__next { grid-column: 3; grid-row: 2; }

.lightbox .lightbox__count {
    grid-column: 2;
    grid-row: 3;
    margin: 0;
    padding-bottom: 1rem;
    text-align: center;
    color: var(--linen);
}

/* phones: the photo takes the whole width, the arrows sit over its sides
   (a finger slid sideways changes the photo too, site/gallery.js) */
@media (max-width: 47.99rem) {
    .lightbox[open] {
        grid-template-columns: 1fr;
    }

    .lightbox__figure,
    .lightbox .lightbox__count {
        grid-column: 1;
    }

    .lightbox__figure {
        padding: 0;
        touch-action: pan-y;
    }

    .lightbox__close {
        grid-column: 1;
    }

    .lightbox__prev,
    .lightbox__next {
        position: absolute;
        top: 50%;
        z-index: 1;
        transform: translateY(-50%);
        background: rgba(43, 31, 29, 0.55);
    }

    .lightbox__prev {
        left: 0;
    }

    .lightbox__next {
        right: 0;
    }
}

@keyframes fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ==========================================================
   8. Reportage page
   ========================================================== */
.story {
    display: grid;
    gap: clamp(2rem, 5vw, 4rem);
    align-items: start;
}

@media (min-width: 56rem) {
    .story { grid-template-columns: 6fr 5fr; }
}

.facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
    gap: 1rem;
    margin: 0 0 2rem;
    padding: 0 0 1.5rem;
    border-bottom: 1px solid var(--line);
}

.facts dt {
    margin-bottom: 0.2rem;
}

.facts dd {
    margin: 0;
    font-family: var(--font-title);
    font-size: 1.25rem;
    line-height: 1.3;
}

/* previous / next reportage, under the gallery */
.story-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1.5rem;
    padding-block: 2.5rem;
}

.story-nav__link {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    max-width: 24rem;
    color: var(--ink);
    text-decoration: none;
}

.story-nav__link--next {
    margin-left: auto;
    text-align: right;
}

.story-nav__title {
    font-family: var(--font-title);
    font-style: italic;
    font-size: 1.5rem;
    line-height: 1.2;
}

.story-nav__link:hover .story-nav__title {
    color: var(--terracotta-deep);
}

/* ==========================================================
   9. About
   ========================================================== */
.about {
    display: grid;
    gap: clamp(2.5rem, 6vw, 5rem);
    align-items: center;
}

@media (min-width: 56rem) {
    .about { grid-template-columns: 5fr 6fr; }
}

/* portrait with an offset thin terracotta frame */
.about__portrait {
    position: relative;
    isolation: isolate;
    width: 100%;
    max-width: 26rem;
    margin: 0 auto;
}

.about__portrait::before {
    content: '';
    position: absolute;
    inset: 1.25rem -1.25rem -1.25rem 1.25rem;
    z-index: -1;
    border: 1px solid var(--terracotta);
}

.about__signature {
    margin-top: 0.5rem;
    font-family: var(--font-title);
    font-style: italic;
    font-size: 2.4rem;
    line-height: 1;
    color: var(--terracotta);
}

.values {
    display: grid;
    gap: 1.5rem;
    margin: 2.5rem 0 0;
    padding: 2rem 0 0;
    border-top: 1px solid var(--line);
    list-style: none;
}

@media (min-width: 40rem) {
    .values { grid-template-columns: repeat(3, 1fr); }
}

.values h3 {
    font-size: 1.45rem;
    font-style: italic;
    margin-bottom: 0.4rem;
}

.values p {
    margin: 0;
    font-size: 0.95rem;
    color: var(--ink-soft);
}

/* ==========================================================
   10. Offers
   ========================================================== */
.offers {
    display: grid;
    gap: 1.5rem;
}

@media (min-width: 44rem) {
    .offers { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 72rem) {
    .offers { grid-template-columns: repeat(4, 1fr); }
}

.offers > * {
    display: flex;
}

.offer {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 2.25rem 1.75rem;
    background: var(--linen);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.offer--featured {
    border-top: 3px solid var(--terracotta);
}

.offer__tag {
    margin-bottom: 0.75rem;
}

.offer h3 {
    font-style: italic;
    font-size: 2rem;
}

.offer__price {
    margin: 0 0 1.25rem;
    font-family: var(--font-title);
    font-size: 1.15rem;
    color: var(--ink-soft);
}

.offer__price strong {
    display: block;
    font-size: 2.6rem;
    font-weight: 500;
    line-height: 1.1;
    color: var(--ink);
}

.offer__list {
    flex: 1;
    margin: 0 0 2rem;
    padding: 1.25rem 0 0;
    border-top: 1px solid var(--line);
    list-style: none;
    font-size: 0.95rem;
}

/* bullets: the small terracotta dot of the logo */
.offer__list li {
    position: relative;
    padding-left: 1.2rem;
    margin-bottom: 0.55rem;
}

.offer__list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.7em;
    width: 0.3rem;
    height: 0.3rem;
    border-radius: 50%;
    background: var(--ochre);
}

.offer .btn {
    width: 100%;
    padding-inline: 0.75rem;
    letter-spacing: 0.16em;
}

.offers__note {
    margin: 2rem 0 0;
    text-align: center;
    font-size: 0.95rem;
    color: var(--ink-soft);
}

/* offer page: photo + price box */
.offer-detail {
    display: grid;
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
}

@media (min-width: 56rem) {
    .offer-detail { grid-template-columns: 7fr 5fr; }
}

.price-box {
    padding: clamp(1.75rem, 4vw, 2.75rem);
    background: var(--linen);
    border: 1px solid var(--line);
    border-top: 3px solid var(--terracotta);
}

.price-box h2 {
    font-size: clamp(2rem, 4vw, 2.6rem);
}

.price-box .offer__list {
    margin-bottom: 1.75rem;
}

.price-box .btn {
    width: 100%;
}

.price-box__note {
    margin: 1rem 0 0;
    font-size: 0.88rem;
    color: var(--ink-soft);
}

/* steps of a session */
.steps {
    display: grid;
    gap: 2rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 44rem) {
    .steps { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 64rem) {
    .steps { grid-template-columns: repeat(4, 1fr); }
}

.step__number {
    display: block;
    margin-bottom: 0.5rem;
    font-family: var(--font-title);
    font-style: italic;
    font-size: 3rem;
    line-height: 1;
    color: var(--terracotta);
}

.step h3 {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

.step p {
    margin: 0;
    font-size: 0.95rem;
    color: var(--ink-soft);
}

/* links to the other offers */
.others-title {
    font-size: 1.75rem;
    text-align: center;
}

.others {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.others a {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 12rem;
    padding: 1.25rem 1.5rem;
    border: 1px solid var(--line);
    background: var(--linen);
    color: var(--ink);
    text-decoration: none;
    transition: border-color 0.2s;
}

.others a:hover {
    border-color: var(--terracotta);
}

.others em {
    font-size: 1.5rem;
}

.others span {
    font-size: 0.85rem;
    color: var(--ink-soft);
}

/* FAQ, as native <details> */
.faq {
    border-top: 1px solid var(--line);
}

.faq__item {
    border-bottom: 1px solid var(--line);
}

.faq__item summary {
    position: relative;
    padding: 1.25rem 2.5rem 1.25rem 0;
    font-family: var(--font-title);
    font-size: 1.4rem;
    line-height: 1.3;
    cursor: pointer;
    list-style: none;
}

.faq__item summary::-webkit-details-marker {
    display: none;
}

/* "+" turning into "−" when open */
.faq__item summary::after {
    content: '+';
    position: absolute;
    right: 0.25rem;
    top: 1.1rem;
    font-family: var(--font-text);
    font-size: 1.4rem;
    font-weight: 300;
    color: var(--terracotta-deep);
}

.faq__item[open] summary::after {
    content: '−';
}

.faq__item p {
    margin: 0 0 1.5rem;
    color: var(--ink-soft);
}

/* ==========================================================
   11. Testimonials
   ========================================================== */
.testimonials {
    display: grid;
    gap: clamp(2.5rem, 5vw, 3.5rem);
}

@media (min-width: 56rem) {
    .testimonials { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
}

.testimonial {
    margin: 0;
    text-align: center;
}

.testimonial__mark {
    display: block;
    height: 2.5rem;
    font-family: var(--font-title);
    font-size: 4.5rem;
    line-height: 1;
    color: var(--terracotta);
}

.testimonial blockquote {
    margin: 0 0 1.5rem;
    font-family: var(--font-title);
    font-style: italic;
    font-size: 1.4rem;
    line-height: 1.45;
}

.testimonial figcaption {
    color: var(--ink-soft);
    font-size: 0.9rem;
}

.testimonial figcaption strong {
    display: block;
    color: var(--ink);
    font-weight: 500;
}

/* ==========================================================
   12. Shop
   ========================================================== */
.shop {
    display: grid;
    gap: 2.5rem 1.5rem;
}

@media (min-width: 40rem) {
    .shop { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 64rem) {
    .shop { grid-template-columns: repeat(4, 1fr); }
    .shop--three { grid-template-columns: repeat(3, 1fr); }
}

.shop > * {
    display: flex;
}

.print {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.print__link {
    color: var(--ink);
    text-decoration: none;
}

.print__link:hover {
    color: var(--ink);
}

.print__link:hover h3 {
    color: var(--terracotta-deep);
}

/* passe-partout: the print shown as framed */
.print__frame {
    display: block;
    padding: 1.1rem;
    margin-bottom: 1.1rem;
    background: var(--linen);
    border: 1px solid var(--line);
    transition: box-shadow 0.4s var(--ease);
}

.print__link:hover .print__frame {
    box-shadow: 0 12px 30px -18px rgba(43, 31, 29, 0.45);
}

.print__frame--large {
    padding: clamp(1.25rem, 4vw, 2.5rem);
    margin: 0;
}

.print h3 {
    font-style: italic;
    font-size: 1.5rem;
    margin-bottom: 0.25rem;
    transition: color 0.2s;
}

.print__meta {
    margin: 0 0 1rem;
    font-size: 0.9rem;
    color: var(--ink-soft);
}

.print__price {
    margin: auto 0 0;
    padding-top: 1rem;
    border-top: 1px solid var(--line);
    font-family: var(--font-title);
    font-size: 1.35rem;
}

.shop__info {
    display: grid;
    gap: 1rem;
    margin: 3rem 0 0;
    padding: 1.5rem 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    list-style: none;
    text-align: center;
    font-size: 0.92rem;
}

@media (min-width: 48rem) {
    .shop__info { grid-template-columns: repeat(3, 1fr); }
}

.shop__info strong {
    display: block;
    font-family: var(--font-title);
    font-style: italic;
    font-size: 1.3rem;
    font-weight: 400;
}

/* print page */
.product {
    display: grid;
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: center;
}

@media (min-width: 56rem) {
    .product { grid-template-columns: 6fr 5fr; }
}

.product__photo {
    max-width: 34rem;
    width: 100%;
    margin: 0 auto;
}

.product__edition {
    font-size: 0.95rem;
    color: var(--ink-soft);
}

.formats {
    width: 100%;
    margin: 1.5rem 0 2rem;
    border-collapse: collapse;
    font-size: 0.98rem;
}

.formats th {
    padding: 0 0 0.6rem;
    border-bottom: 1px solid var(--ink);
    text-align: left;
    font-size: 0.74rem;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.formats th:last-child,
.formats td:last-child {
    text-align: right;
}

.formats td {
    padding: 0.8rem 0;
    border-bottom: 1px solid var(--line);
}

.formats td:last-child {
    font-family: var(--font-title);
    font-size: 1.25rem;
}

/* ==========================================================
   13. Contact
   ========================================================== */
.contact {
    display: grid;
    gap: clamp(3rem, 6vw, 5rem);
}

@media (min-width: 60rem) {
    .contact { grid-template-columns: 4fr 7fr; }
}

.contact__details {
    margin: 2rem 0 0;
    padding: 0;
    list-style: none;
}

.contact__details li {
    padding: 1rem 0;
    border-top: 1px solid var(--line);
}

.contact__details .label {
    display: block;
    margin-bottom: 0.2rem;
}

.contact__details a {
    color: var(--ink);
}

.contact__details a:hover {
    color: var(--terracotta-deep);
}

.form {
    display: grid;
    gap: 1.4rem;
    padding: clamp(1.75rem, 4vw, 3rem);
    background: var(--linen);
    border: 1px solid var(--line);
}

@media (min-width: 40rem) {
    .form { grid-template-columns: 1fr 1fr; }

    /* the fields and messages that take the whole width of the two columns */
    .form__field--full,
    .form__consent,
    .form__actions,
    .form__alert {
        grid-column: 1 / -1;
    }
}

/* labels always visible, never replaced by the placeholder */
.form label {
    display: block;
    margin-bottom: 0.45rem;
    font-size: 0.74rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.form .optional {
    color: var(--ink-soft);
    letter-spacing: 0.05em;
    text-transform: none;
    font-weight: 400;
}

.form input,
.form select,
.form textarea {
    width: 100%;
    min-height: 3rem;
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--field-line);
    border-radius: var(--radius);
    background: var(--cream);
    color: var(--ink);
    font-family: var(--font-text);
    font-size: 1rem;     /* 16px: no automatic zoom on iPhone */
    font-weight: 400;
    transition: border-color 0.2s;
}

.form textarea {
    min-height: 9rem;
    resize: vertical;
}

.form input:hover,
.form select:hover,
.form textarea:hover {
    border-color: var(--ink-soft);
}

.form input:focus-visible,
.form select:focus-visible,
.form textarea:focus-visible {
    outline: 2px solid var(--terracotta-deep);
    outline-offset: 0;
    border-color: var(--terracotta-deep);
}

/* invalid field: border + message right below the field */
.form [aria-invalid="true"] {
    border-color: var(--error);
}

.form__error {
    margin: 0.35rem 0 0;
    font-size: 0.85rem;
    color: var(--error);
}

.form__error:empty {
    display: none;
}

/* the fields in error, at the top of the form, each one a link to its field */
.form__summary {
    grid-column: 1 / -1;
    padding: 0.9rem 1rem;
    border-left: 3px solid var(--error);
    background: var(--cream);
    font-size: 0.95rem;
}

.form__summary-title {
    margin: 0 0 0.4rem;
    color: var(--error);
    font-weight: 500;
}

.form__summary ul {
    margin: 0;
    padding-left: 1.2rem;
}

.form__summary a {
    color: var(--error);
}

.form__consent {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    font-size: 0.88rem;
    color: var(--ink-soft);
}

.form__consent input {
    width: 1.15rem;
    min-height: 1.15rem;
    height: 1.15rem;
    margin-top: 0.25rem;
    flex-shrink: 0;
    accent-color: var(--terracotta-deep);
}

.form__consent label {
    margin: 0;
    font-size: inherit;
    font-weight: 300;
    letter-spacing: 0;
    text-transform: none;
}

/* whole-form message from the server (expired page, too many messages) */
.form__alert {
    grid-column: 1 / -1;
    margin: 0;
    padding: 0.9rem 1rem;
    border-left: 3px solid var(--error);
    background: var(--cream);
    color: var(--error);
    font-size: 0.95rem;
}

/* the anti-spam field (see SpamGuard): out of sight, not display:none, which
   some robots detect and skip */
.form__trap {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.form {
    position: relative;
}

.form button[disabled] {
    opacity: 0.7;
    cursor: wait;
}

.thanks .divider {
    margin-bottom: 2rem;
}

.thanks__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    margin-top: 2.5rem;
}

/* ==========================================================
   14. Call-to-action band, legal pages, error pages
   ========================================================== */
.cta-band {
    padding: clamp(4rem, 10vw, 6.5rem) 0;
    background: var(--cream);
    border-top: 1px solid var(--line);
    text-align: center;
}

.section--sand + .cta-band {
    border-top: 0;
}

.cta-band__inner {
    max-width: 44rem;
}

.cta-band__mountain {
    width: 4rem;
    height: 1.95rem;
    margin-bottom: 1.5rem;
}

.cta-band p {
    margin-bottom: 2rem;
    color: var(--ink-soft);
}

.prose {
    max-width: 46rem;
}

.prose h2 {
    margin-top: 2.5rem;
    font-size: 1.9rem;
}

.prose ul {
    padding-left: 1.2rem;
}

.error-page {
    min-height: 50vh;
}

.error-page__mountain {
    width: 4rem;
    height: 1.95rem;
    margin-bottom: 1.5rem;
}

.error-page__links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    margin: 2rem 0;
    padding: 0;
    list-style: none;
}

/* ==========================================================
   15. Footer
   ========================================================== */
.footer {
    padding: clamp(3.5rem, 8vw, 5rem) 0 2rem;
    background: var(--ink);
    color: rgba(255, 240, 226, 0.78);
    font-size: 0.92rem;
}

.footer a {
    color: var(--cream);
}

.footer a:hover {
    color: var(--ph-2);
}

.footer :focus-visible {
    outline-color: var(--cream);
}

.footer__grid {
    display: grid;
    gap: 2.5rem;
}

@media (min-width: 48rem) {
    .footer__grid { grid-template-columns: 2fr 1fr 1fr; }
}

.footer .logo {
    margin-bottom: 1.25rem;
}

.footer .logo__img {
    height: 3.4rem;
}

.footer h2 {
    margin-bottom: 1rem;
    font-family: var(--font-text);
    font-size: 0.74rem;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--cream);
}

.footer ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.footer li {
    margin-bottom: 0.4rem;
}

.footer address {
    font-style: normal;
}

.footer__bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 240, 226, 0.15);
    font-size: 0.8rem;
}

.footer__bottom p {
    margin: 0;
}

/* ==========================================================
   16. Scroll reveal: fade + slight rise
   Only when scripts run (the "js" class is set by the layout), so the
   content stays visible without JavaScript.
   ========================================================== */
/* a fade with a slight rise (12 px, 0.45 s): a glide, not a slide */
.js .reveal {
    opacity: 0;
    transform: translateY(0.75rem);
    transition: opacity 0.45s var(--ease), transform 0.45s var(--ease);
    transition-delay: var(--delay, 0s);
}

.js .reveal.is-visible {
    opacity: 1;
    transform: none;
}

/* Failsafe: if the script never runs (blocked or failed to load), the elements
   appear anyway after a few seconds instead of staying hidden. Once it runs
   (html.reveal-ready), each one appears when it is scrolled to, however late. */
.js:not(.reveal-ready) .reveal:not(.is-visible) {
    animation: reveal-failsafe 0.01s linear 4s forwards;
}

@keyframes reveal-failsafe {
    to {
        opacity: 1;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }

    .js .reveal {
        opacity: 1;
        transform: none;
    }
}

/* ==========================================================
   17. Accessibility details
   ========================================================== */
/* placeholders as readable as the labels (the default grey is 3.9:1) */
/* a button busy with a request stays focusable (a disabled one would lose the focus) */
.btn[aria-disabled="true"] {
    opacity: 0.6;
    cursor: progress;
}

.island-error {
    padding: 1rem;
    border: 1px solid var(--field-line);
    background: var(--linen);
}

.filters[hidden] {
    display: none;
}

.form ::placeholder {
    color: var(--ink-soft);
    opacity: 1;
}

/* the terracotta ring is too dark on the veil of the big photo */
.hero :focus-visible {
    outline-color: var(--linen);
}

/* ==========================================================
   18. Reassurance, pinned call to action, zoom, trust
   ========================================================== */
/* three reasons to write, under the offers' title */
.reassurance {
    display: grid;
    gap: 1.25rem 2rem;
    margin: 0 0 2.5rem;
    padding: 1.5rem 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    list-style: none;
}

@media (min-width: 48rem) {
    .reassurance { grid-template-columns: repeat(3, 1fr); }
}

.reassurance li {
    display: flex;
    gap: 0.9rem;
    align-items: flex-start;
    font-size: 0.92rem;
    color: var(--ink-soft);
}

.reassurance strong {
    display: block;
    margin-bottom: 0.15rem;
    color: var(--ink);
    font-family: var(--font-title);
    font-size: 1.25rem;
    font-style: italic;
    font-weight: 400;
}

.reassurance__icon,
.trust__icon {
    flex: none;
    fill: none;
    stroke: var(--terracotta-deep);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.reassurance__icon {
    width: 1.9rem;
    height: 1.9rem;
    margin-top: 0.1rem;
}

.offer-detail + .reassurance {
    margin-top: 2.5rem;
}

/* pinned call to action of phones: hidden until its real counterpart leaves the screen */
.sticky-cta {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 40;
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem var(--gutter) calc(0.75rem + env(safe-area-inset-bottom));
    border-top: 1px solid var(--line);
    background: rgba(255, 240, 226, 0.97);
    box-shadow: 0 -8px 24px -16px rgba(43, 31, 29, 0.35);
    transform: translateY(110%);
    visibility: hidden;
    transition: transform 0.3s var(--ease), visibility 0.3s;
}

.sticky-cta.is-visible {
    transform: none;
    visibility: visible;
}

.sticky-cta__label {
    margin: 0;
    white-space: nowrap;
    font-family: var(--font-title);
    font-size: 1.25rem;
    line-height: 1.1;
}

.sticky-cta__button {
    flex: none;
    min-height: 2.75rem;
    padding-inline: 1.4rem;
}

/* room for the bar below the footer text */
.has-sticky-cta .footer {
    padding-bottom: calc(5.5rem + env(safe-area-inset-bottom));
}

@media (min-width: 64rem) {
    .sticky-cta { display: none; }
    /* no bar on wide screens: the usual space under the footer */
    .has-sticky-cta .footer { padding-bottom: 2rem; }
}

/* the photo of a print opens enlarged */
.zoom-trigger {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    cursor: zoom-in;
}

.zoom-trigger__icon {
    position: absolute;
    right: 0.6rem;
    bottom: 0.6rem;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0.65rem;
    border-radius: 50%;
    background: rgba(255, 240, 226, 0.92);
    fill: none;
    stroke: var(--ink);
    stroke-width: 1.5;
    stroke-linecap: round;
    transition: transform 0.2s var(--ease);
}

.zoom-trigger:hover .zoom-trigger__icon,
.zoom-trigger:focus-visible .zoom-trigger__icon {
    transform: scale(1.08);
}

.zoom {
    max-width: min(96vw, 1400px);
    max-height: 96vh;
    padding: 0;
    border: 0;
    background: transparent;
    overflow: visible;
}

.zoom::backdrop {
    background: rgba(43, 31, 29, 0.88);
}

.zoom img {
    display: block;
    max-width: 96vw;
    max-height: 92vh;
    width: auto;
    height: auto;
    margin: auto;
    box-shadow: 0 20px 60px -20px rgba(0, 0, 0, 0.6);
}

.zoom__close {
    position: absolute;
    top: -3rem;
    right: 0;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0.7rem;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 240, 226, 0.95);
    cursor: pointer;
}

.zoom__close svg {
    fill: none;
    stroke: var(--ink);
    stroke-width: 1.8;
    stroke-linecap: round;
}

@media (max-width: 47.99rem) {
    .zoom__close { top: 0.5rem; right: 0.5rem; }
}

/* what makes a print safe to order */
.trust {
    display: grid;
    gap: 0.7rem 1.5rem;
    margin: 1.75rem 0 0;
    padding: 1.25rem 0 0;
    border-top: 1px solid var(--line);
    list-style: none;
    font-size: 0.9rem;
    color: var(--ink-soft);
}

@media (min-width: 40rem) {
    .trust { grid-template-columns: 1fr 1fr; }
}

.trust li {
    display: flex;
    gap: 0.6rem;
    align-items: center;
}

.trust__icon {
    width: 1.35rem;
    height: 1.35rem;
}