/* ── Fonts ── */
@font-face {
    font-family: 'HND';
    src: url('fonts/HelveticaNowDisplay-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: block;
}

/* ── Reset ── */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ── System ── */
:root {
    --m: 5px;   /* the wedge — locked, no scaling */
    --field: #837f7c;
    --dark: #3a3a3a;
    --bg: var(--field);
    --fg: #000;
}

body {
    font-family: 'HND', 'Helvetica Neue', 'Helvetica', Arial, sans-serif;
    font-weight: 400;
    font-size: 30px;
    line-height: 36px;
    letter-spacing: 0;
    color: var(--fg);
    background: var(--field);
    -webkit-font-smoothing: antialiased;
}


::selection {
    background: #000;
    color: #fff;
}

a {
    color: var(--fg);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* Lists: only the clickable items are solid. Flat mix, no opacity. */
.dim {
    color: color-mix(in srgb, var(--fg) 50%, var(--bg));
}

.dim a {
    color: var(--fg);
}

h1 {
    font: inherit;
}

p {
    margin: 0;
}

p + p {
    margin-top: 1lh;
}

/* ── Panel ── */
.panel {
    position: relative;
    min-height: 100svh;
    background: var(--field);
    overflow: hidden;
}

.panel.dark {
    --bg: var(--dark);
    --fg: #fff;
    background: var(--dark);
    color: var(--fg);
}

/* Lighter tone — used to set strategy blocks apart from narrative */
.panel.light {
    --bg: #a39e9a;
    background: var(--bg);
}

/* ── Type boxes — margins implied by position ── */
.tl, .tr, .bl, .flow {
    text-box: trim-both cap alphabetic;
}

.tl {
    position: absolute;
    top: var(--m);
    left: var(--m);
}

.tr {
    position: absolute;
    top: var(--m);
    right: var(--m);
}

.bl {
    position: absolute;
    bottom: var(--m);
    left: var(--m);
    right: var(--m);
}

/* In-flow content — panel grows with it */
.flow {
    padding: calc(var(--m) + 2lh) var(--m) calc(var(--m) + 1lh);
}

/* Footer panel — info pinned to the bottom */
.foot {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

#top .flow > * {
    pointer-events: auto;
}

/* ── Fixed wordmark — full width; scrolls "behind" patterned glass ──
   Three layers: a white ground, the lettering, a lattice of dots. As the page
   scrolls the lettering blurs, the lattice fades in, and the contrast is pushed
   so the soft greys snap into a halftone — big dots where the letter is dense,
   none where it isn't. The whole stack is multiplied onto the page, so the white
   ground disappears and only the ink lands on the field. */
.mark {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    mix-blend-mode: darken;   /* white ground drops out against the field; the tinted ink stays */
    pointer-events: none;     /* the artwork itself takes the click, not the whole screen */
}

/* the glass works in pure black and white… */
.mark .glass {
    position: absolute;
    inset: 0;
    background: #fff;
}

.mark .ink {
    position: absolute;
    top: var(--m);
    left: var(--m);
    width: calc(100vw - var(--m) * 2);   /* the artwork is cropped to its ink, so it sits exactly on the margins */
    height: auto;
    display: block;
    pointer-events: auto;
}

.mark .glass::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, #000, #aaa) 0 0 / 9px 9px;   /* one lens per 9px cell */
    mix-blend-mode: screen;
    opacity: 0;
    pointer-events: none;
}

/* …and this lifts every black to the footer colour, sharp or dotted */
.mark::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--dark);
    mix-blend-mode: lighten;
    pointer-events: none;
}

.mark:hover {
    text-decoration: none;   /* it's the home link, but it never underlines */
}

/* only where scroll-driven animation exists; elsewhere the mark simply stays sharp */
@supports (animation-timeline: scroll()) {
    .mark .glass, .mark .ink, .mark .glass::after {
        animation-timing-function: linear;
        animation-fill-mode: both;
        animation-timeline: scroll(root);
        animation-range: 0 100svh;   /* fully dissolved one screen down */
    }
    .mark .glass        { animation-name: glass-contrast; }
    .mark .ink          { animation-name: glass-blur; }
    .mark .glass::after { animation-name: glass-lattice; }
}

@keyframes glass-contrast { from { filter: grayscale(1) contrast(1); } to { filter: grayscale(1) contrast(40); } }   /* neutral before thresholding, so no channel can fringe */
/* blur to full by 55% of the scroll, then thin the ink to nothing: the dots shrink and disappear */
@keyframes glass-blur {
    55%  { filter: blur(calc((100vw - var(--m) * 2) * 0.042)); opacity: 1; }
    100% { filter: blur(calc((100vw - var(--m) * 2) * 0.042)); opacity: 0; }
}
@keyframes glass-lattice  { to { opacity: 1; } }

.panel {
    z-index: 1;
}

/* the first panel is see-through so the wordmark shows behind it */
#top {
    background: transparent;
    pointer-events: none;
}

#top .flow {
    pointer-events: none;   /* its padding sits over the wordmark; only the content below takes clicks */
    padding-top: calc(var(--m) + (100vw - var(--m) * 2) * 0.718 + 4lh);   /* clears the mark: its height is 0.718 of its width */
}

.flow + .flow {
    padding-top: 0;
}

.flow > * + * {
    margin-top: 1lh;
}

/* ── Image panels ── */
/* a screen-sized panel the photograph fills — cropped to the panel, like every other panel */
.panel.img {
    background: #1a1a1a;
    position: relative;
}

.panel.img img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Product/packaging — show the whole object on the field */
.panel.img.contain {
    background: var(--field);
    min-height: 100svh;
}

.panel.img.contain img {
    position: static;
    height: 100svh;
    object-fit: contain;
    padding: var(--m);
}

/* Row of images sharing one panel */
.panel.row {
    display: flex;
    gap: var(--m);
    padding: var(--m);
    align-items: center;
}

.panel.row img {
    width: 0;
    flex: 1;
    max-height: calc(100svh - var(--m) * 2);
    object-fit: contain;
}

/* Tile wall — curated archive, as in the deck: white squares, image floating inside */
.panel.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--m);
    padding: var(--m);
    align-content: start;
}

.panel.grid img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: contain;
    background: #fff;
    padding: 8%;
    display: block;
}

/* ── The glass logo inside images ──
   Each image panel carries its own copy of the mark, fixed to the same place at
   the top of the screen but clipped to the panel — so it only shows while that
   image is passing. It isn't drawn: the mark's shape is a mask on a backdrop
   filter, so inside the letterforms the photograph itself is blurred and lifted,
   like looking through a moulded pane. */
.panel.img {
    clip-path: inset(0);   /* confines the fixed lens below to this panel */
}

.panel.img::after {
    content: "";
    position: fixed;
    top: var(--m);
    left: var(--m);
    width: calc(100vw - var(--m) * 2);
    aspect-ratio: 780.24 / 560.21;
    -webkit-mask: url(mark.svg) center / 100% 100% no-repeat;
            mask: url(mark.svg) center / 100% 100% no-repeat;
    -webkit-backdrop-filter: blur(8px) brightness(1.08) saturate(1.05);
            backdrop-filter: blur(8px) brightness(1.08) saturate(1.05);
    pointer-events: none;
}

/* ── Case-study opener: image first, client logo centred, the glass mark over it ── */
.hero {
    z-index: 1;
}

/* client logo panel: the client's dark on the panel, a lighter tint of it on the mark (both set inline) */
.panel.logo {
    display: grid;
    place-items: center;
}

.panel.logo svg {
    width: 34%;
    height: auto;
    max-height: 30%;
}

/* the home link lives where the mark is, clipped to the opener like the glass */
.hero .home {
    position: fixed;
    top: var(--m);
    left: var(--m);
    width: calc(100vw - var(--m) * 2);
    aspect-ratio: 780.24 / 560.21;
    z-index: 2;
}