/* ==========================================================================
   Brijesh Makadia Photography: "Field Journal" redesign
   Pure CSS, no framework. The one exception is js/cloud.js, which scatters
   and sequences the home page photo cloud (it measures layout, which CSS
   cannot).

   Concept: an editorial field journal. Bone-paper background, forest ink,
   an ember accent, oversized Fraunces headlines, monospace "contact sheet"
   labels, square edges and hairline rules.

   Contents
   1.  Design tokens
   2.  Icon font (Font Awesome 4.7, only the glyphs in use)
   3.  Base, reset, paper grain
   4.  Layout helpers and utilities
   5.  Buttons
   6.  Site header and navigation (CSS-only full-screen mobile menu)
   7.  Home: photo cloud (Apple Watch style)
   8.  Contact dialog and form (:target)
   9.  About: magazine spread and Instagram marquee
   10. Portfolio: editorial grid and lightbox (:target)
   11. Blog: article with sticky meta rail
   12. Footers (inner pages and the shared footer bar)
   13. Motion: keyframes, scroll-driven reveals, reduced motion
   ========================================================================== */


/* 1. Design tokens
   ========================================================================== */

:root {
    /* Colour */
    --bone: #eee8dc;             /* page background */
    --paper: #f7f3eb;            /* raised surfaces */
    --ink: #14231c;              /* forest ink: primary text */
    --ink-soft: #46534c;         /* secondary text */
    --forest: #12201a;           /* dark bands */
    --forest-2: #1b2e25;         /* raised on dark */
    --ember: #b8461b;            /* accent fills, large text, rules */
    --ember-ink: #9a3912;        /* accent for small text on light */
    --ember-light: #ec8a5e;      /* accent on dark */
    --on-dark: #eee8dc;          /* text on dark */
    --on-dark-soft: #b4bdb6;     /* secondary text on dark */
    --line: rgb(20 35 28 / 0.16);
    --line-strong: rgb(20 35 28 / 0.6);
    --line-dark: rgb(238 232 220 / 0.16);

    /* Typography */
    --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
    --font-body: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
    --fs-mono: 0.75rem;
    --fs-sm: 0.9375rem;
    --fs-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
    --fs-lg: clamp(1.25rem, 1.05rem + 0.9vw, 1.75rem);
    --fs-xl: clamp(1.75rem, 1.3rem + 2vw, 3rem);
    --fs-2xl: clamp(2.5rem, 1.6rem + 4.2vw, 5.5rem);
    --fs-3xl: clamp(3rem, 1.6rem + 6.6vw, 8.5rem);
    --fs-mega: clamp(4.25rem, 1.5rem + 13vw, 16rem);

    /* Spacing scale */
    --s-1: 0.25rem;
    --s-2: 0.5rem;
    --s-3: 0.75rem;
    --s-4: 1rem;
    --s-5: 1.5rem;
    --s-6: 2rem;
    --s-7: 3rem;
    --s-8: 4.5rem;
    --section: clamp(4.5rem, 2.5rem + 8vw, 10rem);
    --gutter: clamp(1rem, 0.4rem + 2.8vw, 3rem);
    --wrap: 1400px;

    /* Motion */
    --ease: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.77, 0, 0.18, 1);
    --dur: 400ms;

    --header-h: 4.75rem;

    color-scheme: light;
}


/* 2. Icon font: Font Awesome 4.7 (copied from the original site)
   ========================================================================== */

@font-face {
    font-family: "FontAwesome";
    src: url("../assets/fonts/fontawesome-webfont.woff2") format("woff2"),
         url("../assets/fonts/fontawesome-webfont.woff") format("woff");
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

.fa {
    display: inline-block;
    font: normal normal normal 1em/1 "FontAwesome";
    -webkit-font-smoothing: antialiased;
}

.fa-facebook::before  { content: "\f09a"; }
.fa-instagram::before { content: "\f16d"; }
.fa-eye::before       { content: "\f06e"; }

/* X (formerly Twitter): not in Font Awesome 4.7, so drawn as a mask of the
   X logo (Font Awesome Free 6, CC BY 4.0) that takes the text colour */
.fa-x-twitter::before {
    content: "";
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: top;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z'/%3E%3C/svg%3E") center / contain no-repeat;
}


/* 3. Base, reset, paper grain
   ========================================================================== */

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

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-h) + var(--s-4));
}

body {
    margin: 0;
    min-height: 100vh;
    background: var(--bone);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: var(--fs-base);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

/* Subtle paper grain over everything */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 3000;
    pointer-events: none;
    opacity: 0.5;
    mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

h1,
h2 {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 400;
    font-optical-sizing: auto;
    line-height: 0.98;
    letter-spacing: -0.025em;
    text-wrap: balance;
}

p,
ul,
figure,
fieldset {
    margin: 0;
}

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

a {
    color: inherit;
    text-decoration: none;
}

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

::selection {
    background: var(--ink);
    color: var(--bone);
}


/* 4. Layout helpers and utilities
   ========================================================================== */

.wrap {
    width: min(100% - 2 * var(--gutter), var(--wrap));
    margin-inline: auto;
}

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

.skip-link {
    position: absolute;
    top: var(--s-3);
    left: var(--s-3);
    z-index: 4000;
    padding: var(--s-2) var(--s-4);
    background: var(--ink);
    color: var(--bone);
    font-family: var(--font-mono);
    font-size: var(--fs-mono);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transform: translateY(-250%);
    transition: transform var(--dur) var(--ease);
}

.skip-link:focus-visible {
    transform: none;
}

/* The original decorative <span>: an ember dot and rule */
.divider {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    margin-bottom: var(--s-5);
}

.divider::before {
    content: "";
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--ember);
}

.divider::after {
    content: "";
    width: 56px;
    height: 1px;
    background: var(--ember);
}


/* 5. Buttons
   ========================================================================== */

/* Rectangular ink button with a left-to-right ember sweep */
.btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--s-3);
    min-height: 56px;
    padding: 0 var(--s-6);
    overflow: hidden;
    isolation: isolate;
    border: 0;
    background: var(--ink);
    color: var(--bone);
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    cursor: pointer;
    transition: transform var(--dur) var(--ease);
}

.btn::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--ember);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.6s var(--ease);
}

.btn:hover::before,
.btn:focus-visible::before {
    transform: scaleX(1);
    transform-origin: left;
}

.btn:active {
    transform: scale(0.97);
}

.btn img {
    width: 18px;
    height: 18px;
}


/* 6. Site header and navigation
   ========================================================================== */

/* No backdrop-filter here: it would trap the fixed mobile menu inside the header */
.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    height: var(--header-h);
    background: var(--bone);
    border-bottom: 1px solid var(--line);
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-5);
    height: 100%;
    padding-inline: var(--gutter);
}

.brand {
    position: relative;
    z-index: 2;
    flex-shrink: 0;
}

.brand img {
    width: auto;
    height: 46px;
    transition: filter var(--dur) var(--ease), opacity var(--dur) var(--ease);
}

.brand:hover img {
    opacity: 0.7;
}

.site-nav {
    display: flex;
    align-items: center;
    gap: var(--s-5);
}

.site-nav__list {
    display: flex;
    align-items: center;
    gap: var(--s-1);
    padding: 0;
    list-style: none;
}

.site-nav__link {
    position: relative;
    display: block;
    padding: var(--s-3) var(--s-4);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.005em;
    color: var(--ink-soft);
    transition: color var(--dur) var(--ease);
}

/* Ember underline that draws in from the left */
.site-nav__link::after {
    content: "";
    position: absolute;
    left: var(--s-4);
    right: var(--s-4);
    bottom: 6px;
    height: 2px;
    background: var(--ember);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.5s var(--ease);
}

.site-nav__link:hover,
.site-nav__link:focus-visible,
.site-nav__link[aria-current="page"] {
    color: var(--ink);
}

.site-nav__link:hover::after,
.site-nav__link:focus-visible::after,
.site-nav__link[aria-current="page"]::after {
    transform: scaleX(1);
    transform-origin: left;
}

/* "Get in touch": an outlined pill that fills on hover */
.site-nav__cta {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    min-height: 42px;
    padding: 0 1.25rem;
    border: 1.5px solid var(--line-strong);
    border-radius: 999px;
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--ink);
    transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.site-nav__cta::after {
    content: "\2192";
    font-family: var(--font-body);
    transition: transform var(--dur) var(--ease);
}

.site-nav__cta:hover,
.site-nav__cta:focus-visible {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--bone);
}

.site-nav__cta:hover::after,
.site-nav__cta:focus-visible::after {
    transform: translateX(3px);
}

/* Dark header (Home): one continuous dark canvas with the photo cloud */
.site-header--dark {
    background: var(--forest);
    border-bottom-color: var(--line-dark);
    color: var(--on-dark);
}

.site-header--dark .brand img {
    filter: invert(1);
}

.site-header--dark .site-nav__link {
    color: rgb(238 232 220 / 0.82);
}

.site-header--dark .site-nav__link:hover,
.site-header--dark .site-nav__link:focus-visible,
.site-header--dark .site-nav__link[aria-current="page"] {
    color: var(--on-dark);
}

.site-header--dark .site-nav__link::after {
    background: var(--ember-light);
}

.site-header--dark .site-nav__cta {
    border-color: rgb(238 232 220 / 0.55);
    color: var(--on-dark);
}

.site-header--dark .site-nav__cta:hover,
.site-header--dark .site-nav__cta:focus-visible {
    background: var(--on-dark);
    border-color: var(--on-dark);
    color: var(--forest);
}

.site-header--dark :focus-visible,
.site-header--dark .nav-toggle-input:focus-visible + .nav-toggle {
    outline-color: var(--ember-light);
}

/* Menu toggle: the label is the button, the checkbox holds the state */
.nav-toggle {
    position: relative;
    z-index: 2;
    display: none;
    align-items: center;
    gap: var(--s-3);
    min-height: 44px;
    padding: 0 var(--s-2);
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    cursor: pointer;
    transition: color var(--dur) var(--ease);
}

.nav-toggle__bars {
    position: relative;
    width: 26px;
    height: 10px;
}

.nav-toggle__bars::before,
.nav-toggle__bars::after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background: currentColor;
    transition: transform var(--dur) var(--ease), top var(--dur) var(--ease);
}

.nav-toggle__bars::before { top: 0; }
.nav-toggle__bars::after  { top: 8.5px; }

.nav-toggle-input:focus-visible + .nav-toggle {
    outline: 2px solid var(--ember);
    outline-offset: 3px;
}

@media (max-width: 860px) {
    .nav-toggle {
        display: inline-flex;
    }

    /* Full-screen takeover, revealed with an expanding circle */
    .site-nav {
        position: fixed;
        inset: 0;
        z-index: 1;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: center;
        gap: 0;
        padding: var(--header-h) var(--gutter) var(--s-7);
        background: var(--forest);
        visibility: hidden;
        clip-path: circle(0 at calc(100% - 3rem) 2.4rem);
        transition: clip-path 0.7s var(--ease-in-out), visibility 0s linear 0.7s;
    }

    .nav-toggle-input:checked ~ .site-nav {
        visibility: visible;
        clip-path: circle(150% at calc(100% - 3rem) 2.4rem);
        transition-delay: 0s;
    }

    .site-header:has(.nav-toggle-input:checked) .brand img {
        filter: invert(1);
    }

    .nav-toggle-input:checked + .nav-toggle {
        color: var(--on-dark);
    }

    .nav-toggle-input:checked + .nav-toggle .nav-toggle__bars::before {
        top: 4px;
        transform: rotate(45deg);
    }

    .nav-toggle-input:checked + .nav-toggle .nav-toggle__bars::after {
        top: 4px;
        transform: rotate(-45deg);
    }

    .site-nav__list {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }

    .site-nav__list li {
        border-bottom: 1px solid var(--line-dark);
    }

    .site-nav__link {
        padding: var(--s-4) 0;
        font-family: var(--font-display);
        font-size: clamp(2.5rem, 10vw, 4rem);
        font-weight: 500;
        line-height: 1.1;
        color: var(--on-dark);
        opacity: 0;
        transform: translateY(24px);
        transition: opacity 0.5s var(--ease), transform 0.5s var(--ease), color var(--dur) var(--ease);
    }

    .site-nav__link::after {
        display: none;
    }

    .site-nav__link:hover,
    .site-nav__link:focus-visible,
    .site-nav__link[aria-current="page"] {
        color: var(--ember-light);
    }

    .site-nav__link[aria-current="page"] {
        font-style: italic;
    }

    /* Staggered entrance */
    .nav-toggle-input:checked ~ .site-nav .site-nav__link {
        opacity: 1;
        transform: none;
    }

    .nav-toggle-input:checked ~ .site-nav li:nth-child(1) .site-nav__link { transition-delay: 0.15s; }
    .nav-toggle-input:checked ~ .site-nav li:nth-child(2) .site-nav__link { transition-delay: 0.22s; }
    .nav-toggle-input:checked ~ .site-nav li:nth-child(3) .site-nav__link { transition-delay: 0.29s; }
    .nav-toggle-input:checked ~ .site-nav li:nth-child(4) .site-nav__link { transition-delay: 0.36s; }

    .site-nav__cta {
        align-self: flex-start;
        min-height: 52px;
        margin-top: var(--s-7);
        padding: 0 var(--s-6);
        border-color: rgb(238 232 220 / 0.55);
        color: var(--on-dark);
        opacity: 0;
        transform: translateY(24px);
        transition: opacity 0.5s var(--ease), transform 0.5s var(--ease), background-color var(--dur) var(--ease), color var(--dur) var(--ease);
    }

    .site-nav__cta:hover,
    .site-nav__cta:focus-visible {
        background: var(--on-dark);
        border-color: var(--on-dark);
        color: var(--forest);
    }

    .nav-toggle-input:checked ~ .site-nav .site-nav__cta {
        opacity: 1;
        transform: none;
        transition-delay: 0.43s, 0.43s, 0s, 0s; /* entrance only, not hover */
    }

    html:has(.nav-toggle-input:checked) {
        overflow: hidden;
    }
}


/* 7. Home: photo cloud (Apple Watch style)
   Fifteen photographs float as large rounded-square icons with a white
   border, scattered at random over a dark screen. js/cloud.js plays them one at a time: a single flyer layer
   grows from the icon until the whole photo fits the screen (never cropped;
   a blurred copy fills any space around it), holds, and shrinks back.
   Its clip-path morphs the icon's rounded square into the screen; the image inside scales
   between "cover the icon" and "cover the screen", so it never upscales.
   Without JS, or with reduced motion, the icons sit in a centred cluster.
   ========================================================================== */

.cloud {
    display: flex;
    flex-direction: column;
    height: calc(100svh - var(--header-h));
    min-height: 300px;
}

.cloud__screen {
    position: relative;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    contain: layout paint;
    background:
        radial-gradient(ellipse 70% 60% at 50% 45%, var(--forest-2), transparent),
        var(--forest);
}

/* Fallback layout: a centred cluster */
.cloud__tiles {
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    gap: var(--s-4);
    height: 100%;
    margin: 0;
    padding: var(--gutter);
    list-style: none;
}

.cloud__tile {
    --size: clamp(88px, 5rem + 5vw, 160px);
    width: var(--size);
    aspect-ratio: 1;
}

/* Rounded square in a white frame; corner and frame scale with the icon */
.cloud__tile button {
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    overflow: hidden;
    border: max(2px, calc(var(--size) * 0.022)) solid #fff;
    border-radius: calc(var(--size) * 0.22);
    background: var(--forest-2);
    box-shadow: 0 18px 40px -16px rgb(0 0 0 / 0.7);
    cursor: pointer;
    transition: transform 0.6s var(--ease);
}

.cloud__tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cloud__tile button:hover,
.cloud__tile button:focus-visible {
    transform: scale(1.08);
}

.cloud__tile button:focus-visible {
    outline: 2px solid var(--ember-light);
    outline-offset: 4px;
}

/* Scattered by the script: positions and sizes arrive as custom properties */
.cloud.is-scattered .cloud__tiles {
    display: block;
    padding: 0;
}

.cloud.is-scattered .cloud__tile {
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: var(--size);
    animation:
        bubble-in 0.9s var(--ease) calc(var(--i) * 70ms) both,
        drift var(--drift-time, 7s) ease-in-out calc(var(--i) * -0.6s) infinite alternate;
}

/* While its photograph is in flight the icon holds still and its white
   frame stays behind as an empty slot, ready for the photo to land in */
.cloud__tile.is-active {
    animation-play-state: paused;
}

.cloud__tile.is-active img {
    visibility: hidden;
}

.cloud__flyer {
    position: absolute;
    inset: 0;
    z-index: 2;
    overflow: hidden;
    visibility: hidden;
    pointer-events: none;
}

.cloud__flyer.is-flying {
    visibility: visible;
}

.cloud__flyer img {
    position: absolute;
    max-width: none;
    transform-origin: center;
    will-change: transform;
}

/* Fills the space around the uncropped photo: the same photo, blurred and
   dimmed. It is drawn at 1/8 size and scaled up, which keeps the blur cheap. */
.cloud__flyer .cloud__flyer-backdrop {
    transform-origin: 0 0;
    filter: blur(5px) brightness(0.5) saturate(1.15);
    will-change: transform, opacity;
}

/* Bar under the screen: social links and actions */
/* 8. Contact dialog and form
   ========================================================================== */

.modal {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: grid;
    place-items: center;
    padding: var(--gutter);
    visibility: hidden;
    opacity: 0;
    transition: opacity var(--dur) var(--ease), visibility 0s linear var(--dur);
}

.modal:target {
    visibility: visible;
    opacity: 1;
    transition-delay: 0s;
}

html:has(.modal:target),
html:has(.lightbox:target) {
    overflow: hidden;
}

.modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgb(18 32 26 / 0.7);
}

.modal__dialog {
    position: relative;
    display: grid;
    width: min(100%, 1040px);
    max-height: calc(100svh - 2 * var(--gutter));
    overflow-y: auto;
    background: var(--paper);
    box-shadow: 0 50px 100px -30px rgb(0 0 0 / 0.5);
    clip-path: inset(0 0 100% 0);
    transition: clip-path 0.7s var(--ease-in-out);
}

.modal:target .modal__dialog {
    clip-path: inset(0);
}

.contact-heading {
    padding: var(--s-7) var(--s-6);
    background: var(--forest);
    color: var(--on-dark);
}

.contact-heading .divider::before,
.contact-heading .divider::after {
    background: var(--ember-light);
}

.contact-heading h2 {
    font-size: var(--fs-2xl);
    font-style: italic;
    font-weight: 300;
}

.contact-form {
    display: grid;
    gap: var(--s-6);
    padding: var(--s-7) var(--s-6);
}

.field {
    display: grid;
    gap: var(--s-1);
}

.field label {
    font-family: var(--font-mono);
    font-size: var(--fs-mono);
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-soft);
    transition: color var(--dur) var(--ease);
}

/* Underline-only inputs */
.field input,
.field textarea {
    width: 100%;
    padding: var(--s-3) 0;
    border: 0;
    border-bottom: 1px solid var(--line-strong);
    border-radius: 0;
    background: transparent;
    color: var(--ink);
    font: 400 var(--fs-lg)/1.4 var(--font-display);
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.field textarea {
    min-height: 140px;
    resize: vertical;
}

.field input::placeholder,
.field textarea::placeholder {
    color: rgb(70 83 76 / 0.75);
    font-style: italic;
}

.field input:hover,
.field textarea:hover {
    border-bottom-color: var(--ink);
}

.field input:focus,
.field textarea:focus {
    outline: none;
    border-bottom-color: var(--ember);
    box-shadow: 0 1px 0 0 var(--ember);
}

.field:focus-within label {
    color: var(--ember-ink);
}

.modal__close {
    position: absolute;
    top: var(--s-4);
    right: var(--s-4);
    z-index: 1;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    background: var(--ink);
    color: var(--bone);
    font-size: 1.5rem;
    line-height: 1;
    transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.modal__close:hover,
.modal__close:focus-visible {
    background: var(--ember);
    transform: rotate(90deg);
}

@media (min-width: 820px) {
    .modal__dialog {
        grid-template-columns: 2fr 3fr;
    }

    .contact-heading {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        padding: var(--s-8) var(--s-7);
    }

    .contact-form {
        grid-template-columns: 1fr 1fr;
        padding: var(--s-8) var(--s-7);
    }

    .field--full,
    .contact-form__actions {
        grid-column: 1 / -1;
    }
}


/* 9. About: magazine spread and Instagram marquee
   ========================================================================== */

.about {
    padding-top: var(--section);
}

.about__head {
    display: grid;
    gap: var(--s-5);
    padding-bottom: var(--s-8);
}

.about__head h1 {
    max-width: 14ch;
    font-size: var(--fs-3xl);
    font-weight: 300;
}

.about__photo {
    overflow: hidden;
    background: var(--forest);
}

.about__photo img {
    width: 100%;
    aspect-ratio: 16 / 9;
    max-height: 82svh;
    object-fit: cover;
    object-position: 60% center;
}

.about__body {
    display: grid;
    padding-block: var(--s-8) var(--section);
}

.about__body p {
    font-family: var(--font-display);
    font-size: var(--fs-lg);
    font-weight: 300;
    line-height: 1.45;
}

/* Drop cap */
.about__body p::first-letter {
    float: left;
    margin: 0.06em 0.12em 0 0;
    font-size: 4.2em;
    font-weight: 400;
    line-height: 0.8;
    color: var(--ember);
}

@media (min-width: 900px) {
    .about__head,
    .about__body {
        grid-template-columns: repeat(12, 1fr);
    }

    .about__head {
        align-items: start;
    }

    .about__head .divider {
        grid-column: 1 / 3;
        margin-top: 1.4em;
    }

    .about__head h1 {
        grid-column: 3 / -1;
    }

    .about__body p {
        grid-column: 5 / 12;
    }
}

/* Instagram: dark band with an endless marquee */
.insta {
    padding-block: var(--section);
    background: var(--forest);
    color: var(--on-dark);
    overflow: hidden;
}

.insta__head {
    margin-bottom: var(--s-7);
}

.insta__head h2 {
    font-size: var(--fs-2xl);
    font-weight: 300;
}

.insta__head h2 span {
    font-style: italic;
    color: var(--ember-light);
}

.marquee {
    display: flex;
    width: max-content;
    animation: marquee 50s linear infinite;
}

.marquee:hover,
.marquee:focus-within {
    animation-play-state: paused;
}

.marquee__set {
    display: flex;
    align-items: flex-start;
    gap: var(--s-3);
    padding-right: var(--s-3);
}

.insta__item {
    position: relative;
    width: clamp(200px, 24vw, 340px);
    overflow: hidden;
}

/* Staggered frame heights for rhythm */
.insta__item:nth-child(even) {
    margin-top: var(--s-7);
}

.insta__item img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    transition: transform 0.9s var(--ease);
}

.insta__item a {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: rgb(184 70 27 / 0.85);
    color: var(--bone);
    font-size: 2.25rem;
    clip-path: inset(100% 0 0 0);
    transition: clip-path 0.6s var(--ease);
}

.insta__item:hover img {
    transform: scale(1.08);
}

.insta__item:hover a,
.insta__item a:focus-visible {
    clip-path: inset(0);
}

.insta__item a:focus-visible {
    outline: 2px solid var(--bone);
    outline-offset: -6px;
}


/* 10. Portfolio: editorial grid and lightbox
   ========================================================================== */

.page-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--s-5);
    padding-block: var(--s-8) var(--s-5);
    border-bottom: 1px solid var(--line-strong);
}

.page-head h1 {
    font-size: var(--fs-mega);
    font-weight: 300;
    letter-spacing: -0.05em;
    line-height: 0.8;
}

.page-head__count {
    padding-bottom: var(--s-2);
    font-family: var(--font-mono);
    font-size: var(--fs-mono);
    letter-spacing: 0.12em;
    color: var(--ink-soft);
}

.gallery {
    padding-bottom: var(--section);
}

/* Two columns on phones; a 12-column editorial grid from 720px,
   where each tile sets its own width with --span */
.gallery__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-flow: dense;
    grid-auto-rows: 52vw;
    gap: var(--s-2);
    margin-top: var(--s-6);
    counter-reset: frame;
}

.gallery__item {
    position: relative;
    overflow: hidden;
    background: var(--forest);
    counter-increment: frame;
}

.gallery__item.is-wide {
    grid-column: span 2;
}

.gallery__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.1s var(--ease);
}

/* Frame number, contact-sheet style */
.gallery__item::before {
    content: counter(frame, decimal-leading-zero);
    position: absolute;
    top: var(--s-3);
    left: var(--s-3);
    z-index: 2;
    padding: 2px var(--s-2);
    background: var(--bone);
    color: var(--ink);
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.08em;
}

.gallery__link {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    padding: var(--s-4);
    overflow: hidden;
}

.gallery__link .fa {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    background: var(--ember);
    color: var(--bone);
    font-size: 1.125rem;
    transform: translateY(calc(100% + var(--s-4)));
    transition: transform 0.5s var(--ease);
}

.gallery__item:hover img,
.gallery__item:focus-within img {
    transform: scale(1.06);
}

.gallery__item:hover .gallery__link .fa,
.gallery__link:focus-visible .fa {
    transform: none;
}

.gallery__link:focus-visible {
    outline: 2px solid var(--ember);
    outline-offset: -4px;
}

@media (min-width: 720px) {
    .gallery__grid {
        grid-template-columns: repeat(12, 1fr);
        grid-auto-rows: clamp(260px, 34vw, 560px);
        gap: var(--s-3);
    }

    .gallery__item,
    .gallery__item.is-wide {
        grid-column: span var(--span, 4);
    }
}

/* Lightbox */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: none;
    grid-template-rows: 1fr auto;
    background: var(--forest);
    color: var(--on-dark);
}

.lightbox:target {
    display: grid;
    animation: fade-in var(--dur) var(--ease) both;
}

.lightbox__backdrop {
    position: absolute;
    inset: 0;
}

.lightbox__figure {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 0;
    padding: var(--s-6) var(--s-4) var(--s-4);
    pointer-events: none;
}

.lightbox__figure img {
    max-width: 100%;
    max-height: calc(100svh - 9rem);
    width: auto;
    animation: wipe-up 0.8s var(--ease-in-out) both;
}

.lightbox__bar {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-4);
    padding: var(--s-3) var(--gutter);
    border-top: 1px solid var(--line-dark);
}

.lightbox__counter {
    font-family: var(--font-mono);
    font-size: var(--fs-mono);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--on-dark-soft);
}

.lightbox__controls {
    display: flex;
    gap: 2px;
}

.lightbox__close,
.lightbox__nav {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    background: var(--forest-2);
    color: var(--on-dark);
    font-size: 1.5rem;
    line-height: 1;
    transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.lightbox__close:hover,
.lightbox__close:focus-visible,
.lightbox__nav:hover,
.lightbox__nav:focus-visible {
    background: var(--ember);
    color: var(--bone);
}

.lightbox :focus-visible {
    outline-color: var(--ember-light);
}


/* 11. Blog: article with sticky meta rail
   ========================================================================== */

.post__head {
    padding-block: var(--section) var(--s-7);
}

.post__head h1 {
    max-width: 16ch;
    font-size: var(--fs-3xl);
    font-weight: 300;
}

.post__thumb {
    overflow: hidden;
    background: var(--forest);
}

.post__thumb img {
    width: 100%;
    aspect-ratio: 21 / 9;
    min-height: 260px;
    object-fit: cover;
    object-position: center 35%;
}

.post__layout {
    display: grid;
    gap: var(--s-6);
    padding-block: var(--s-8);
}

.post__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2) var(--s-5);
    padding-top: var(--s-4);
    border-top: 1px solid var(--line-strong);
}

.post__meta a {
    font-family: var(--font-mono);
    font-size: var(--fs-mono);
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-soft);
    transition: color var(--dur) var(--ease);
}

.post__meta a:hover,
.post__meta a:focus-visible {
    color: var(--ember-ink);
}

.post__body {
    min-width: 0;
}

.post__lead {
    margin-bottom: var(--s-8);
    font-family: var(--font-display);
    font-size: var(--fs-xl);
    font-weight: 300;
    line-height: 1.25;
}

.post__lead::first-letter {
    float: left;
    margin: 0.04em 0.1em 0 0;
    font-size: 3.4em;
    line-height: 0.8;
    color: var(--ember);
}

.post__body h2 {
    margin-bottom: var(--s-4);
    font-size: var(--fs-2xl);
    font-style: italic;
    font-weight: 300;
}

.post__intro {
    margin-bottom: var(--s-6);
    color: var(--ink-soft);
}

/* Reasons: numbered cards on a hairline grid */
.reasons {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    gap: 1px;
    margin-bottom: var(--s-8);
    padding: 0;
    list-style: none;
    background: var(--line);
    border: 1px solid var(--line);
    counter-reset: reason;
}

.reasons li {
    position: relative;
    padding: var(--s-6) var(--s-5) var(--s-5);
    background: var(--bone);
    counter-increment: reason;
    transition: background-color var(--dur) var(--ease);
}

.reasons li::before {
    content: counter(reason, decimal-leading-zero);
    display: block;
    margin-bottom: var(--s-4);
    font-family: var(--font-display);
    font-size: 3rem;
    font-weight: 300;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1px var(--ember);
}

/* Ember rule sweeps across the top on hover */
.reasons li::after {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--ember);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.6s var(--ease);
}

.reasons li:hover {
    background: var(--paper);
}

.reasons li:hover::after {
    transform: scaleX(1);
}

.reasons strong {
    display: block;
    margin-bottom: var(--s-2);
    font-family: var(--font-display);
    font-size: 1.375rem;
    font-weight: 500;
    line-height: 1.2;
}

/* Conclusion as a pull quote */
.post__quote {
    position: relative;
    padding-left: var(--s-7);
    font-family: var(--font-display);
    font-size: var(--fs-lg);
    font-style: italic;
    font-weight: 300;
    line-height: 1.4;
}

.post__quote::before {
    content: "\201C";
    position: absolute;
    left: 0;
    top: -0.15em;
    font-size: 4.5rem;
    font-style: normal;
    line-height: 1;
    color: var(--ember);
}

/* Asiatic lion facts: full-width dark band */
.facts-band {
    padding-block: var(--s-8) var(--section);
    background: var(--forest);
    color: var(--on-dark-soft);
}

.facts {
    display: grid;
    gap: var(--s-6);
    padding: 0;
    list-style: none;
    counter-reset: fact;
}

.facts li {
    padding-top: var(--s-4);
    border-top: 1px solid var(--line-dark);
    counter-increment: fact;
}

.facts li::before {
    content: counter(fact, upper-roman) ".";
    display: block;
    margin-bottom: var(--s-3);
    font-family: var(--font-mono);
    font-size: var(--fs-mono);
    letter-spacing: 0.14em;
    color: var(--ember-light);
}

.facts a {
    color: var(--on-dark);
    text-decoration: underline;
    text-decoration-color: rgb(236 138 94 / 0.6);
    text-underline-offset: 3px;
    transition: color var(--dur) var(--ease), text-decoration-color var(--dur) var(--ease);
}

.facts a:hover,
.facts a:focus-visible {
    color: var(--ember-light);
    text-decoration-color: var(--ember-light);
}

.facts :focus-visible {
    outline-color: var(--ember-light);
}

@media (min-width: 900px) {
    .post__layout {
        grid-template-columns: minmax(180px, 1fr) minmax(0, 3.2fr);
        gap: var(--s-8);
        padding-bottom: var(--section);
    }

    .post__rail {
        position: sticky;
        top: calc(var(--header-h) + var(--s-6));
        align-self: start;
    }

    .post__meta {
        flex-direction: column;
    }

    .facts {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--s-7);
    }
}


/* 12. Footers: inner-page footer and the shared footer bar
   The original cms-bg.jpg survives here as a faint monochrome texture.
   ========================================================================== */

.site-footer {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: var(--forest);
    color: var(--on-dark);
    border-top: 1px solid var(--line-dark);
}

.site-footer::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: url("../assets/images/cms-bg.jpg") center / cover no-repeat;
    filter: grayscale(1);
    opacity: 0.08;
}

.site-footer__list {
    display: grid;
    padding-block: var(--s-7);
}

.site-footer__list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-4);
    padding-block: var(--s-4);
    border-bottom: 1px solid var(--line-dark);
    font-family: var(--font-display);
    font-size: var(--fs-xl);
    font-weight: 400;
    line-height: 1.15;
    transition: color var(--dur) var(--ease), padding var(--dur) var(--ease);
}

.site-footer__list a::after {
    content: "\2192";
    font-family: var(--font-body);
    font-size: 1.25rem;
    opacity: 0;
    transform: translateX(-12px);
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.site-footer__list a:hover,
.site-footer__list a:focus-visible {
    color: var(--ember-light);
    padding-left: var(--s-4);
}

.site-footer__list a:hover::after,
.site-footer__list a:focus-visible::after {
    opacity: 1;
    transform: none;
}

.site-footer__list .site-footer__email {
    font-style: italic;
    color: var(--ember-light);
    overflow-wrap: anywhere;
}

.site-footer :focus-visible {
    outline-color: var(--ember-light);
}

/* Inside the inner-page footer the bar lets the faint texture show through */
.site-footer .footer-bar {
    background: transparent;
}

/* Footer bar, shared by every page: copyright, social icons and a pill
   action on the same dark canvas as the header. One row at every width:
   on Home, a wrapping bar would resize the screen and re-scatter the icons. */
.footer-bar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: var(--s-4);
    min-height: 64px;
    padding: var(--s-2) var(--gutter);
    background: var(--forest);
    border-top: 1px solid var(--line-dark);
    color: var(--on-dark);
}

.footer-bar__copy {
    overflow: hidden;
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: rgb(238 232 220 / 0.82);
}

.footer-bar__actions {
    display: flex;
    align-items: center;
    justify-self: end;
    gap: var(--s-5);
}

.footer-bar__link,
.cloud__replay,
.cloud__stop {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    min-height: 40px;
    padding: 0;
    border: 0;
    background: none;
    color: rgb(238 232 220 / 0.82);
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.cloud__replay::before {
    content: "\21BB";
    font-family: var(--font-body);
    font-size: 1rem;
}

.cloud__stop::before {
    content: "\25A0";
    font-family: var(--font-body);
    font-size: 0.75rem;
}

.cloud__replay[hidden],
.cloud__stop[hidden] {
    display: none;
}

.cloud__replay:hover,
.cloud__replay:focus-visible,
.cloud__stop:hover,
.cloud__stop:focus-visible {
    color: var(--on-dark);
}

/* Pill action: the same pill as the header's "Get in touch" */
.footer-bar__link {
    min-height: 42px;
    padding: 0 1.25rem;
    border: 1.5px solid rgb(238 232 220 / 0.55);
    border-radius: 999px;
    color: var(--on-dark);
}

.footer-bar__link::after {
    content: "\2192";
    font-family: var(--font-body);
    transition: transform var(--dur) var(--ease);
}

.footer-bar__link:hover,
.footer-bar__link:focus-visible {
    background: var(--on-dark);
    border-color: var(--on-dark);
    color: var(--forest);
}

.footer-bar__link:hover::after,
.footer-bar__link:focus-visible::after {
    transform: translateX(3px);
}

.footer-bar :focus-visible {
    outline-color: var(--ember-light);
}

/* Social icons: round outlined buttons on dark */
.social {
    display: flex;
    gap: var(--s-2);
}

.social a {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1.5px solid rgb(238 232 220 / 0.3);
    border-radius: 50%;
    color: var(--on-dark);
    font-size: 1.0625rem;
    transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.social a:hover,
.social a:focus-visible {
    background: var(--on-dark);
    border-color: var(--on-dark);
    color: var(--forest);
    transform: translateY(-2px);
}

/* Tablets: drop the copyright, social left and actions right */
@media (max-width: 760px) {
    .footer-bar {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .footer-bar__copy {
        display: none;
    }
}

/* Phones: Replay and Stop (Home) become icons */
@media (max-width: 600px) {
    .footer-bar__actions {
        gap: var(--s-3);
    }

    .cloud__replay,
    .cloud__stop {
        min-width: 40px;
        justify-content: center;
    }

    .cloud__replay > span,
    .cloud__stop > span {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }
}


/* 13. Motion
   ========================================================================== */

/* Photo cloud: icons pop in, then drift gently */
@keyframes bubble-in {
    from { scale: 0; opacity: 0; }
}

@keyframes drift {
    to { translate: var(--dx, 0) var(--dy, 0); }
}

@keyframes marquee {
    to { transform: translateX(-50%); }
}

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

@keyframes fade-up {
    from { opacity: 0; transform: translateY(40px); }
}

@keyframes wipe-up {
    from { clip-path: inset(100% 0 0 0); }
    to   { clip-path: inset(0); }
}

@keyframes unveil {
    from { clip-path: inset(14% 8% 14% 8%); }
    to   { clip-path: inset(0); }
}

@media (prefers-reduced-motion: no-preference) {
    /* Fallback: a gentle entrance on load */
    .reveal {
        animation: fade-up 1s var(--ease) both;
    }

    /* Where supported, play reveals as elements scroll into view */
    @supports (animation-timeline: view()) {
        .reveal {
            animation: fade-up linear both;
            animation-timeline: view();
            animation-range: entry 0% cover 25%;
        }

        .unveil {
            animation: unveil linear both;
            animation-timeline: view();
            animation-range: entry 0% cover 40%;
        }
    }
}

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

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

    /* Photo cloud: no pop-in or drift */
    .cloud.is-scattered .cloud__tile {
        animation: none !important;
    }

    /* Marquee becomes a swipeable row */
    .marquee {
        width: auto;
        overflow-x: auto;
        animation: none !important;
    }

    .marquee__set[aria-hidden="true"] {
        display: none;
    }
}