/* ============================================================
   MMIDDL.com — coastal weather station for the in-between
   broken-grid · coastal-blend · tide-glitch · hand-drawn
   ============================================================ */

/* ----------------------- tokens ----------------------- */
:root {
    --harbor: #0B2E3F;   /* deep harbor */
    --salt: #F4EBDA;     /* salt paper */
    --beacon: #E76F51;   /* beacon coral */
    --tide: #7BA9B5;     /* tide-pool teal */
    --kelp: #264653;     /* kelp-bottom (text on light) */
    --haze: #C9D6D9;     /* sea-haze (rules / hairlines) */
    --sun: #E9C46A;      /* kelp-sun (moon glyph, seabird) */
    --squall: #1A3A4C;   /* squall (transitional gradient stop) */

    --gutter-left: 96px;
    --gutter-right: 132px;
    --tidebar-h: 96px;
    --tidebar-offset: 11px;  /* deliberate misalignment */
    --glitch-shift: 0px;

    --f-display: "Fraunces", Georgia, serif;
    --f-rounded: "Quicksand", "Inter", sans-serif;
    --f-body: "Sniglet", "Quicksand", sans-serif;
    --f-han: "Gowun Batang", "Quicksand", sans-serif;
    --f-mono: "JetBrains Mono", "Space Mono", monospace;
}

/* ----------------------- reset ----------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; background: var(--salt); }
body {
    background: var(--salt);
    color: var(--kelp);
    font-family: var(--f-rounded);
    font-size: 16px;
    line-height: 1.6;
    overflow-x: hidden;
    min-height: 100vh;
    transition: background 1.2s ease;
}
body.is-deep { background: var(--harbor); color: var(--salt); }

img, svg { display: block; max-width: 100%; }
h1, h2, h3, h4, p, ul, li { margin: 0; padding: 0; }
ul { list-style: none; }

/* ------------------ global grain overlay ------------------ */
body::after {
    content: "";
    position: fixed; inset: 0;
    pointer-events: none;
    z-index: 9999;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='3'/><feColorMatrix values='0 0 0 0 0   0 0 0 0 0   0 0 0 0 0   0 0 0 0.6 0'/></filter><rect width='240' height='240' filter='url(%23n)' opacity='0.5'/></svg>");
    opacity: 0.06;
    mix-blend-mode: multiply;
}
body.is-deep::after { mix-blend-mode: screen; opacity: 0.08; }

/* ------------------ tide bar ------------------ */
.tidebar {
    position: relative;
    height: var(--tidebar-h);
    display: grid;
    grid-template-columns: repeat(14, 1fr);
    border-bottom: 1px solid var(--haze);
    background: var(--salt);
    /* deliberate misalignment: sits 11px off to the right */
    transform: translateX(var(--tidebar-offset));
    width: calc(100% - var(--tidebar-offset));
    margin-left: 0;
    z-index: 50;
}
.tidebar__cell {
    border-right: 1px solid color-mix(in srgb, var(--haze) 70%, transparent);
    display: flex; align-items: center; justify-content: center;
    padding: 8px 6px;
    position: relative;
    color: var(--kelp);
    transition: background 700ms ease;
}
.tidebar__cell:last-child { border-right: 0; }
.tidebar__cell::before {
    content: "";
    position: absolute; inset: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='80'><filter id='c'><feTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='2' seed='11'/><feColorMatrix values='0 0 0 0 0   0 0 0 0 0   0 0 0 0 0   0 0 0 0.5 0'/></filter><rect width='80' height='80' filter='url(%23c)'/></svg>");
    opacity: 0.03;
    pointer-events: none;
}
.tb-glyph { width: 26px; height: 26px; color: var(--kelp); }
.tb-glyph use { stroke: currentColor; }
.tidebar__cell[data-cell="0"] .tb-glyph,
.tidebar__cell[data-cell="13"] .tb-glyph { color: var(--sun); }
.tb-amp { width: 48px; height: 22px; }
.tb-spin { animation: dot-spin 9s linear infinite; transform-origin: center; color: var(--tide); }
@keyframes dot-spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }
.tb-stamp, .tb-mono {
    font-family: var(--f-mono);
    font-size: 11px;
    letter-spacing: 0.04em;
    color: var(--kelp);
    white-space: nowrap;
}
.tidebar__cell[data-cell="3"] svg,
.tidebar__cell[data-cell="9"] svg { color: var(--kelp); }

body.is-deep .tidebar {
    background: var(--harbor);
    color: var(--salt);
    border-bottom-color: color-mix(in srgb, var(--haze) 28%, transparent);
}
body.is-deep .tidebar__cell { color: var(--salt); }
body.is-deep .tb-stamp, body.is-deep .tb-mono { color: var(--salt); }
body.is-deep .tidebar__cell[data-cell="0"] .tb-glyph,
body.is-deep .tidebar__cell[data-cell="13"] .tb-glyph { color: var(--sun); }

/* ------------------ median channel ------------------ */
.median {
    position: fixed;
    left: 50%;
    top: 0;
    height: 100vh;
    width: 1px;
    background: linear-gradient(to bottom,
        color-mix(in srgb, var(--haze) 30%, transparent) 0%,
        var(--haze) 12%,
        var(--haze) 88%,
        color-mix(in srgb, var(--haze) 30%, transparent) 100%);
    z-index: 60;
    pointer-events: none;
    transform: translateX(-0.5px);
}
.median::before {
    /* the 4px beacon coral median dot */
    content: "";
    position: absolute;
    left: 50%; top: 50%;
    width: 4px; height: 4px;
    background: var(--beacon);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 8px color-mix(in srgb, var(--beacon) 40%, transparent);
}
.median__cap {
    position: fixed;
    left: calc(50% + 12px);
    top: 50%;
    transform: translateY(0);
    font-family: var(--f-mono);
    font-size: 11px;
    letter-spacing: 0.05em;
    color: var(--beacon);
    opacity: 0;
    transition: opacity 320ms ease, transform 320ms ease;
    pointer-events: none;
    white-space: nowrap;
    z-index: 61;
    text-shadow: 0 0 6px color-mix(in srgb, var(--salt) 60%, transparent);
}
.median__cap.is-on { opacity: 1; transform: translateY(-6px); }
body.is-deep .median {
    background: linear-gradient(to bottom,
        color-mix(in srgb, var(--haze) 18%, transparent) 0%,
        color-mix(in srgb, var(--haze) 60%, transparent) 12%,
        color-mix(in srgb, var(--haze) 60%, transparent) 88%,
        color-mix(in srgb, var(--haze) 18%, transparent) 100%);
}
body.is-deep .median__cap {
    text-shadow: 0 0 6px color-mix(in srgb, var(--harbor) 60%, transparent);
}

/* ------------------ crossing (main) ------------------ */
.crossing {
    position: relative;
    padding: 0 var(--gutter-right) 80px var(--gutter-left);
    display: grid;
    grid-template-columns: repeat(14, 1fr);
    gap: 0 24px;
    transition: padding 600ms cubic-bezier(.2,.8,.2,1);
}
.crossing.is-snap {
    --gutter-left: 100px;
    --gutter-right: 137px;
}

/* every third top-level child rotates -1.4°, locked */
.crossing > *:nth-child(3n) {
    transform: rotate(-1.4deg);
    transform-origin: 30% 70%;
}
.crossing > * { transition: transform 500ms cubic-bezier(.2,.8,.2,1); }
.crossing > *:hover { will-change: transform; }

/* ------------------ shared section / scanline ------------------ */
.cove, .pier {
    position: relative;
    grid-column: 1 / -1;
    padding: 120px 0 96px;
    min-height: 100vh;
}
.scanline {
    position: absolute;
    left: -10vw;
    right: -10vw;
    top: 40%;
    height: 2px;
    background: linear-gradient(to right,
        transparent 0%,
        color-mix(in srgb, var(--beacon) 50%, transparent) 20%,
        color-mix(in srgb, var(--beacon) 70%, transparent) 50%,
        color-mix(in srgb, var(--beacon) 50%, transparent) 80%,
        transparent 100%);
    opacity: 0;
    pointer-events: none;
    transform: translateX(var(--glitch-shift, 0px));
    z-index: 5;
    mix-blend-mode: multiply;
}
.scanline.is-firing {
    animation: tide-glitch 800ms cubic-bezier(.2,.8,.2,1);
}
@keyframes tide-glitch {
    0%   { opacity: 0; transform: translateX(0); }
    18%  { opacity: 0.4; transform: translateX(2px); }
    32%  { opacity: 0.65; transform: translateX(-1px); }
    44%  { opacity: 0.5; transform: translateX(3px); }
    58%  { opacity: 0.6; transform: translateX(-2px); }
    72%  { opacity: 0.4; transform: translateX(1px); }
    100% { opacity: 0; transform: translateX(0); }
}

/* ------------------ section: hero (salt paper above the fold) ------------------ */
.cove--hero {
    background: var(--salt);
    color: var(--kelp);
    overflow: hidden;
}
.hero {
    grid-column: 1 / -1;
    position: relative;
    /* off-center left at 38.2% */
    margin-top: 8vh;
    margin-left: 0;
    width: 100%;
    max-width: 1400px;
    padding-left: 0;
}
.hero__mark {
    font-family: var(--f-display);
    font-size: clamp(72px, 13vw, 220px);
    font-style: italic;
    font-weight: 400;
    font-variation-settings: "opsz" 144, "SOFT" 80;
    letter-spacing: 0.005em;
    line-height: 0.9;
    color: var(--kelp);
    /* off-center: 38.2% left of viewport center, rotated -1.4° */
    transform: translateX(-12vw) rotate(-1.4deg);
    transform-origin: left center;
    margin-bottom: 0.4em;
    position: relative;
    width: max-content;
    transition: font-variation-settings 12s linear, letter-spacing 12s linear;
}
.hero__mark::after {
    /* printed grain overlay over italic Fraunces */
    content: "";
    position: absolute; inset: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='400'><filter id='p'><feTurbulence type='fractalNoise' baseFrequency='1.6' numOctaves='2' seed='7'/><feColorMatrix values='0 0 0 0 0   0 0 0 0 0   0 0 0 0 0   0 0 0 0.7 0'/></filter><rect width='400' height='400' filter='url(%23p)'/></svg>");
    mix-blend-mode: multiply;
    opacity: 0.22;
    pointer-events: none;
}
.hero__sub {
    font-family: var(--f-body);
    font-size: 17px;
    line-height: 1.7;
    color: var(--kelp);
    max-width: 36ch;
    margin: 16px 0 32px 8vw;
    transform: rotate(-0.4deg);
}
.hero__wave {
    position: absolute;
    right: -14vw;
    bottom: 14%;
    width: 60vw;
    max-width: 900px;
    color: var(--tide);
    opacity: 0.85;
    margin: 0;
}
.hero__wave svg { width: 100%; height: auto; }
.hero__mono {
    display: inline-block;
    margin-left: 8vw;
    margin-top: 32px;
    font-family: var(--f-mono);
    font-size: 13px;
    letter-spacing: 0.04em;
    color: color-mix(in srgb, var(--kelp) 70%, var(--salt));
}

/* ------------------ section: harbor (deep) ------------------ */
.cove--harbor {
    background: var(--harbor);
    color: var(--salt);
}
.cove--squall {
    background: var(--squall);
    color: var(--salt);
}

/* ------------------ pier (extends right) ------------------ */
.pier {
    /* main column 1..12; the right 18% extends into right gutter */
    grid-column: 1 / 13;
    position: relative;
    padding: 120px 0 96px;
    margin-right: calc(-1 * (var(--gutter-right) + 4vw));
}
.pier::before {
    /* the pier card background with torn-paper right edge */
    content: "";
    position: absolute;
    inset: 60px -18% 60px -32px;
    background: var(--tide);
    /* card-specific finer grain via blend below */
    box-shadow: 0 8px 0 0 color-mix(in srgb, var(--haze) 40%, transparent);
    z-index: 0;
    transition: background 1.2s ease;
}
.pier::after {
    /* finer card grain */
    content: "";
    position: absolute;
    inset: 60px -18% 60px -32px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='cg'><feTurbulence type='fractalNoise' baseFrequency='1.7' numOctaves='2' seed='9'/><feColorMatrix values='0 0 0 0 0   0 0 0 0 0   0 0 0 0 0   0 0 0 0.5 0'/></filter><rect width='160' height='160' filter='url(%23cg)'/></svg>");
    opacity: 0.045;
    mix-blend-mode: multiply;
    pointer-events: none;
    z-index: 1;
}
.pier--1::before { background: color-mix(in srgb, var(--tide) 70%, var(--salt)); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1' preserveAspectRatio='none'><polygon points='0,0 0.96,0 0.965,0.05 0.985,0.1 0.96,0.16 0.99,0.22 0.97,0.3 0.985,0.38 0.955,0.45 0.98,0.52 0.96,0.6 0.985,0.68 0.97,0.75 0.99,0.82 0.965,0.9 0.98,0.96 0.96,1 0,1' fill='black'/></svg>"); mask-size: 100% 100%; -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1' preserveAspectRatio='none'><polygon points='0,0 0.96,0 0.965,0.05 0.985,0.1 0.96,0.16 0.99,0.22 0.97,0.3 0.985,0.38 0.955,0.45 0.98,0.52 0.96,0.6 0.985,0.68 0.97,0.75 0.99,0.82 0.965,0.9 0.98,0.96 0.96,1 0,1' fill='black'/></svg>"); -webkit-mask-size: 100% 100%; }
.pier--2::before { background: color-mix(in srgb, var(--beacon) 85%, var(--salt)); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1' preserveAspectRatio='none'><polygon points='0,0 0.97,0 0.99,0.06 0.96,0.13 0.985,0.2 0.97,0.28 0.99,0.36 0.96,0.44 0.98,0.5 0.965,0.58 0.99,0.66 0.97,0.74 0.985,0.82 0.96,0.9 0.98,0.96 0.97,1 0,1' fill='black'/></svg>"); mask-size: 100% 100%; -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1' preserveAspectRatio='none'><polygon points='0,0 0.97,0 0.99,0.06 0.96,0.13 0.985,0.2 0.97,0.28 0.99,0.36 0.96,0.44 0.98,0.5 0.965,0.58 0.99,0.66 0.97,0.74 0.985,0.82 0.96,0.9 0.98,0.96 0.97,1 0,1' fill='black'/></svg>"); -webkit-mask-size: 100% 100%; }
.pier--3::before { background: color-mix(in srgb, var(--squall) 70%, var(--harbor)); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1' preserveAspectRatio='none'><polygon points='0,0 0.985,0 0.96,0.04 0.99,0.1 0.965,0.18 0.985,0.25 0.96,0.33 0.99,0.4 0.97,0.48 0.985,0.55 0.965,0.62 0.98,0.7 0.96,0.78 0.99,0.85 0.97,0.92 0.985,0.97 0.95,1 0,1' fill='black'/></svg>"); mask-size: 100% 100%; -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1' preserveAspectRatio='none'><polygon points='0,0 0.985,0 0.96,0.04 0.99,0.1 0.965,0.18 0.985,0.25 0.96,0.33 0.99,0.4 0.97,0.48 0.985,0.55 0.965,0.62 0.98,0.7 0.96,0.78 0.99,0.85 0.97,0.92 0.985,0.97 0.95,1 0,1' fill='black'/></svg>"); -webkit-mask-size: 100% 100%; }

.pier > * { position: relative; z-index: 2; }
.pier__head {
    display: flex; align-items: center; gap: 14px;
    padding: 24px 0 12px 56px;
    color: var(--salt);
}
.pier--1 .pier__head { color: var(--kelp); }
.bell { width: 28px; height: 28px; flex: 0 0 28px; color: currentColor; }
.pier__tag {
    font-family: var(--f-mono);
    font-size: 13px;
    letter-spacing: 0.06em;
    text-transform: lowercase;
    color: currentColor;
}
.pier__title {
    font-family: var(--f-display);
    font-style: normal;
    font-weight: 700;
    font-size: clamp(40px, 6vw, 84px);
    line-height: 1.05;
    margin: 0 0 32px 56px;
    color: var(--salt);
    max-width: 18ch;
}
.pier--1 .pier__title { color: var(--kelp); }
.pier__body {
    margin: 0 0 32px 56px;
    max-width: 60ch;
    color: var(--salt);
}
.pier--1 .pier__body { color: var(--kelp); }
.pier__body p {
    font-family: var(--f-rounded);
    font-size: 17px;
    line-height: 1.7;
    margin-bottom: 1em;
    letter-spacing: 0.005em;
}
.pier__body em {
    font-family: var(--f-display);
    font-style: italic;
    font-weight: 400;
    color: var(--beacon);
}
.pier--2 .pier__body em { color: var(--harbor); }
.pier__fig {
    margin: 32px 0 24px 56px;
    width: min(360px, 60%);
    color: var(--salt);
}
.pier--1 .pier__fig { color: var(--kelp); }
.pier__line { width: 100%; height: auto; opacity: 0.92; }
.pier__line use, .pier__line path { stroke: currentColor; }
.pier__fig figcaption {
    font-family: var(--f-mono);
    font-size: 12px;
    letter-spacing: 0.04em;
    margin-top: 10px;
    opacity: 0.85;
}
.pier__stamp {
    position: absolute;
    bottom: 76px;
    left: 56px;
    font-family: var(--f-mono);
    font-size: 13px;
    letter-spacing: 0.04em;
    color: var(--salt);
    opacity: 0.8;
    z-index: 3;
}
.pier--1 .pier__stamp { color: var(--kelp); }

/* ------------------ cove (recessed section) ------------------ */
.cove {
    grid-column: 2 / 13;
    padding: 120px 32px 96px 32px;
    position: relative;
}
.cove--hero { grid-column: 1 / -1; padding: 120px 0 96px 0; }
.cove__head {
    display: flex; align-items: center; gap: 14px;
    margin-bottom: 16px;
    color: var(--haze);
}
.cove__tag {
    font-family: var(--f-mono);
    font-size: 13px;
    letter-spacing: 0.06em;
    text-transform: lowercase;
    color: var(--haze);
}
.cove__title {
    font-family: var(--f-display);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(40px, 6vw, 96px);
    line-height: 1.05;
    color: var(--salt);
    margin-bottom: 48px;
    max-width: 16ch;
    position: relative;
    /* color bleed effect for [data-bleed] */
}
[data-bleed]::before {
    content: "";
    position: absolute;
    inset: -2% -1%;
    width: 102%;
    height: 104%;
    background: color-mix(in srgb, currentColor 25%, transparent);
    filter: blur(18px);
    z-index: -1;
    opacity: 0.45;
}
.cove__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px 48px;
    margin-top: 32px;
}
.cove__card {
    background: color-mix(in srgb, var(--harbor) 60%, var(--squall));
    border: 1px solid color-mix(in srgb, var(--haze) 30%, transparent);
    border-radius: 2px;
    padding: 28px 28px 24px;
    position: relative;
    transition: transform 400ms cubic-bezier(.2,.8,.2,1), background 400ms ease;
}
.cove__card[data-tilt="-1.4"] { transform: rotate(-1.4deg); transform-origin: 30% 70%; }
.cove__card:hover {
    background: color-mix(in srgb, var(--harbor) 75%, var(--beacon));
    will-change: transform;
}
.cove--squall .cove__card {
    background: color-mix(in srgb, var(--squall) 70%, var(--harbor));
    border-color: color-mix(in srgb, var(--beacon) 25%, transparent);
}
.cove__card::after {
    /* card-specific finer grain */
    content: "";
    position: absolute; inset: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='cd'><feTurbulence type='fractalNoise' baseFrequency='1.5' numOctaves='2' seed='13'/><feColorMatrix values='0 0 0 0 0   0 0 0 0 0   0 0 0 0 0   0 0 0 0.5 0'/></filter><rect width='120' height='120' filter='url(%23cd)'/></svg>");
    opacity: 0.04;
    mix-blend-mode: multiply;
    pointer-events: none;
    border-radius: inherit;
}
.cove__card h3 {
    font-family: var(--f-display);
    font-style: italic;
    font-weight: 400;
    font-size: 24px;
    color: var(--beacon);
    margin-bottom: 12px;
    letter-spacing: 0.005em;
}
.cove__card p {
    font-family: var(--f-rounded);
    font-size: 15px;
    line-height: 1.65;
    color: var(--salt);
    margin-bottom: 14px;
    letter-spacing: 0.005em;
}
.cove__mono {
    font-family: var(--f-mono);
    font-size: 12px;
    letter-spacing: 0.06em;
    color: color-mix(in srgb, var(--haze) 80%, var(--salt));
    display: inline-block;
    padding: 4px 8px;
    border: 1px solid color-mix(in srgb, var(--haze) 30%, transparent);
    border-radius: 1px;
}
.cove__stamp {
    display: block;
    margin-top: 56px;
    font-family: var(--f-mono);
    font-size: 13px;
    letter-spacing: 0.04em;
    color: color-mix(in srgb, var(--haze) 70%, var(--salt));
    opacity: 0.8;
}

/* ------------------ colophon list ------------------ */
.colophon__list {
    columns: 2;
    column-gap: 64px;
    margin: 16px 0 32px 0;
    font-family: var(--f-rounded);
    font-size: 15px;
    line-height: 1.8;
    color: var(--salt);
    max-width: 980px;
}
.colophon__list li {
    break-inside: avoid;
    padding: 6px 0;
    border-bottom: 1px solid color-mix(in srgb, var(--haze) 18%, transparent);
}
.colophon__lbl {
    font-family: var(--f-mono);
    font-size: 12px;
    letter-spacing: 0.06em;
    color: var(--beacon);
    margin-right: 6px;
}

/* ------------------ cultural fragment watermarks ------------------ */
.frag-watermark {
    position: absolute;
    pointer-events: none;
    opacity: 0.18;
    z-index: 1;
    color: var(--kelp);
    transition: opacity 600ms ease;
}
.cove--harbor .frag-watermark,
.cove--squall .frag-watermark,
.pier .frag-watermark { color: var(--haze); }
.pier--1 .frag-watermark { color: var(--kelp); }
.frag-watermark svg { width: 100%; height: auto; }

.frag-watermark--seigaiha { right: -6%; top: 18%; width: 480px; transform: rotate(8deg); }
.frag-watermark--dancheong { left: 8%; bottom: 12%; width: 360px; opacity: 0.16; transform: rotate(-6deg); }
.frag-watermark--berber { right: 10%; top: 12%; width: 520px; opacity: 0.2; }
.frag-watermark--rebbelib { right: 4%; bottom: 8%; width: 540px; opacity: 0.22; }
.frag-watermark--bojagi { right: 6%; top: 24%; width: 440px; opacity: 0.18; transform: rotate(4deg); }
.frag-watermark--hawaii { right: 8%; top: 30%; width: 380px; opacity: 0.18; transform: rotate(-3deg); }
.frag-watermark--maedeup { left: 10%; bottom: 18%; width: 380px; opacity: 0.16; }

/* ------------------ drift footer (flush-left 38.2%) ------------------ */
.drift {
    position: relative;
    padding: 80px var(--gutter-right) 120px var(--gutter-left);
    background: var(--harbor);
    color: var(--salt);
    display: grid;
    grid-template-columns: 38.2% 1fr;
    align-items: center;
    border-top: 1px solid color-mix(in srgb, var(--haze) 18%, transparent);
    min-height: 360px;
}
.drift__panel { color: var(--salt); }
.drift__panel .bell { color: var(--beacon); margin-bottom: 16px; }
.drift__sig {
    font-family: var(--f-display);
    font-style: italic;
    font-weight: 400;
    font-size: 28px;
    line-height: 1.2;
    color: var(--salt);
    margin-bottom: 18px;
    letter-spacing: 0.005em;
}
.drift__col {
    font-family: var(--f-mono);
    font-size: 12px;
    letter-spacing: 0.04em;
    color: color-mix(in srgb, var(--haze) 80%, var(--salt));
    line-height: 1.7;
    max-width: 56ch;
}
.drift__bird {
    width: 130px;
    height: 64px;
    color: var(--sun);
    justify-self: end;
    transform: translate(0, 0);
    transition: transform 4s cubic-bezier(.4,.0,.2,1);
}

/* ------------------ printed-grain texture on italic Fraunces ------------------ */
.hero__mark, .cove__title, .pier__title, .drift__sig {
    position: relative;
}

/* ------------------ tide bar Hangeul cell text ------------------ */
.tidebar__cell .tb-glyph text { font-family: var(--f-han); }

/* ------------------ responsive (compress gutters, stack pier/cove) ------------------ */
@media (max-width: 1080px) {
    :root {
        --gutter-left: 56px;
        --gutter-right: 80px;
    }
    .hero__mark { transform: translateX(-4vw) rotate(-1.4deg); }
    .hero__wave { right: -6vw; width: 70vw; }
    .cove__grid { grid-template-columns: 1fr; gap: 24px; }
    .pier { margin-right: calc(-1 * var(--gutter-right) - 2vw); }
    .pier__title { font-size: clamp(34px, 7vw, 64px); }
}

@media (max-width: 720px) {
    :root {
        --gutter-left: 28px;
        --gutter-right: 36px;
        --tidebar-offset: 4px;
    }
    .tidebar__cell:nth-child(n+8) { display: none; }
    .tidebar { grid-template-columns: repeat(7, 1fr); }
    .crossing { gap: 0 12px; padding: 0 var(--gutter-right) 64px var(--gutter-left); }
    .hero__mark { font-size: clamp(56px, 14vw, 88px); transform: translateX(-2vw) rotate(-1.4deg); }
    .hero__sub { margin-left: 0; font-size: 16px; }
    .hero__wave { width: 90vw; right: -10vw; bottom: 22%; }
    .hero__mono { margin-left: 0; }
    .pier { grid-column: 1 / -1; margin-right: calc(-1 * var(--gutter-right)); }
    .pier__head, .pier__title, .pier__body, .pier__fig { margin-left: 24px; }
    .pier__stamp { left: 24px; }
    .pier__fig { width: 80%; }
    .cove { grid-column: 1 / -1; padding: 80px 16px; }
    .colophon__list { columns: 1; }
    .drift { grid-template-columns: 1fr; gap: 32px; padding: 56px 24px 80px; }
    .drift__bird { justify-self: start; }
    .median__cap { display: none; }
}