/* palette tokens - hue-rotated in OKLCH so lightness, chroma and contrast carry across themes */

:root,
.theme-purple {
  --ink: rgb(54, 39, 61);
  --bg: rgb(7, 3, 8);
  --nav-surface: rgb(17, 16, 19);
  --nav-item: rgb(99, 34, 124);
  --nav-selected: rgb(154, 57, 192);
  --tint: rgb(243, 216, 253);
  --shape-default: rgb(146, 12, 139);
  --section-bg: rgb(217, 212, 220);
  --shape-hue: 315;

  /* the home page artboard */
  --home-bg: rgb(223, 213, 229);
  --home-ink: rgb(108, 75, 153);
  --home-accent: rgb(114, 75, 169);
  --home-label: rgb(155, 128, 194);
  --home-chip: rgb(214, 202, 230);
  --home-circle: rgb(209, 196, 217);
  --home-wave: rgb(195, 167, 234);
}

.theme-pink {
  --ink: rgb(64, 36, 47);
  --bg: rgb(9, 3, 4);
  --nav-surface: rgb(19, 16, 17);
  --nav-item: rgb(126, 14, 74);
  --nav-selected: rgb(194, 26, 118);
  --tint: rgb(255, 214, 228);
  --shape-default: rgb(166, 1, 63);
  --section-bg: rgb(221, 211, 214);
  --shape-hue: 355;

  --home-bg: rgb(231, 211, 218);
  --home-ink: rgb(140, 62, 115);
  --home-accent: rgb(151, 59, 125);
  --home-label: rgb(186, 118, 160);
  --home-chip: rgb(229, 198, 214);
  --home-circle: rgb(220, 194, 203);
  --home-wave: rgb(227, 157, 198);
}

.theme-blue {
  --ink: rgb(30, 47, 68);
  --bg: rgb(2, 4, 11);
  --nav-surface: rgb(14, 17, 19);
  --nav-item: rgb(1, 68, 136);
  --nav-selected: rgb(2, 109, 209);
  --tint: rgb(210, 229, 255);
  --shape-default: rgb(53, 67, 199);
  --section-bg: rgb(209, 215, 222);
  --shape-hue: 255;

  --home-bg: rgb(207, 219, 233);
  --home-ink: rgb(0, 101, 158);
  --home-accent: rgb(0, 106, 174);
  --home-label: rgb(84, 150, 199);
  --home-chip: rgb(187, 212, 233);
  --home-circle: rgb(187, 203, 223);
  --home-wave: rgb(126, 190, 240);
}

.theme-green {
  --ink: rgb(28, 52, 34);
  --bg: rgb(1, 6, 3);
  --nav-surface: rgb(15, 17, 15);
  --nav-item: rgb(0, 85, 35);
  --nav-selected: rgb(6, 133, 59);
  --tint: rgb(200, 239, 209);
  --shape-default: rgb(2, 105, 76);
  --section-bg: rgb(209, 217, 210);
  --shape-hue: 150;

  --home-bg: rgb(207, 222, 209);
  --home-ink: rgb(59, 110, 29);
  --home-accent: rgb(58, 117, 1);
  --home-label: rgb(113, 158, 96);
  --home-chip: rgb(195, 215, 190);
  --home-circle: rgb(188, 208, 190);
  --home-wave: rgb(151, 198, 136);
}

:root {
  --pad: clamp(14px, 2vw, 20px);
  --gap: 10px;
  --nav-h: 50px;

  /* motion: an emphasised decelerate for things that settle, a spring for things
     that release, and a quick accelerate for things that leave */
  --ease-out: cubic-bezier(0.2, 0, 0, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-in: cubic-bezier(0.3, 0, 0.8, 0.15);
  --dur-palette: 460ms;
  --dur-hover: 260ms;
}

html {
  scroll-behavior: smooth;

  /* clip, not hidden: hidden would make <html> a scroll container and break
     position: sticky / scroll anchoring. this is a guard - the nav below is
     sized to fit, so nothing should reach it */
  overflow-x: clip;
}

html, body {
  transition: background-color var(--dur-palette) var(--ease-out);
  margin: 0;
  padding: 0;
  background-color: var(--bg);
}

/* every nav item carries .navbar; the rest are modifiers layered on top */
.navbar {
    position: relative;
    transition: background-color var(--dur-palette) var(--ease-out);
    width: fit-content;
    height: 40px;
    align-items: center;
    gap: 4px;

    display: flex;

    background-color: var(--nav-item);
    border-radius: 10px;

    padding-left: 10px;
    padding-right: 10px;

    border: none;
    outline: none;
    font: inherit;
    cursor: pointer;
    text-decoration: none;
    touch-action: manipulation;
}

.navbar-end-left {
    border-top-left-radius: 25px;
    border-bottom-left-radius: 25px;
}

.navbar-end-right {
    border-top-right-radius: 25px;
    border-bottom-right-radius: 25px;
}

/* current page: its own fill steps aside for the pill that slides beneath the text */
.navbar-select {
    background-color: transparent;
    border-radius: 20px;
}

.navbar-group {
    position: relative;
    display: flex;
    align-items: center;
    width: fit-content;
    margin: auto;
    gap: 3px;
}

.navbar-indicator {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 0;
    z-index: 1;

    border-radius: 20px;
    background-color: var(--nav-selected);
    pointer-events: none;

    transition:
        left var(--dur-palette) var(--ease-out),
        width var(--dur-palette) var(--ease-out),
        background-color var(--dur-palette) var(--ease-out);
}

.navbar-indicator.instant {
    transition: none;
}

.navbar-icon {
    position: relative;
    z-index: 2;
    display: inline-block;
    width: 22px;
    height: 22px;
    line-height: 1;
    overflow: hidden;
    color: var(--tint);
    font-size: 22px;
    font-variation-settings: "FILL" 0, "wght" 400;
    transition:
        color var(--dur-hover) var(--ease-out),
        transform var(--dur-hover) var(--ease-spring),
        font-variation-settings var(--dur-hover) var(--ease-out);
}

.navbar-select .navbar-icon {
    font-variation-settings: "FILL" 1, "wght" 500;
}

.navbar-content {
    position: relative;
    z-index: 2;
    display: inline-block;
    text-align: center;

    font-family: "Google Sans Flex", sans-serif;
    color: var(--tint);
    font-size: 20px;
    font-weight: 400;

    transition: font-weight var(--dur-hover) var(--ease-out), color var(--dur-hover) var(--ease-out);
    cursor: pointer;
}

.navbar:focus-visible .navbar-content {
    font-weight: 600;
    color: white;
}

.navbar:focus-visible .navbar-icon {
    color: white;
    transform: translateY(-1px) scale(1.08);
    font-variation-settings: "FILL" 1, "wght" 500;
}

@media (hover: hover) {
    .navbar:hover .navbar-content {
        font-weight: 600;
        color: white;
    }

    .navbar:hover .navbar-icon {
        color: white;
        transform: translateY(-1px) scale(1.08);
        font-variation-settings: "FILL" 1, "wght" 500;
    }
}

.header {
    width: auto;
    height: 600px;
    justify-content: center;
    align-items: center;
    display: flex;
}

.header-txt {
    font-family: "Google Sans Flex", sans-serif;
    color: white;
    font-size: 100px;
    font-weight: 600;
    filter: drop-shadow(4px 4px 8px rgba(0, 0, 0, 1));
}

/* the logo paints with fill="currentColor", so an <img> would render it black on the
   dark bar; masking a background colour keeps one file and lets CSS colour it */
.navbar-logo {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);

    height: 26px;
    aspect-ratio: 1508 / 330;

    background-color: var(--tint);
    transition: background-color var(--dur-hover) var(--ease-out), transform var(--dur-hover) var(--ease-spring);

    -webkit-mask-image: url("gooseyluceey-logo-padded.svg");
    mask-image: url("gooseyluceey-logo-padded.svg");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

@media (hover: hover) {
    .navbar-logo:hover {
        background-color: white;
        transform: translateY(-50%) scale(1.04);
    }
}

/* below this the centred nav items would collide with the logo */
@media (max-width: 820px) {
    .navbar-logo {
        display: none;
    }
}


.navbar-fg {
    position: sticky;
    top: 0;
    z-index: 20;
    width: 100%;
    height: 50px;
    background-color: var(--nav-surface);

    align-items: center;
    display: flex;

    border-bottom: 1px solid rgb(105, 105, 105);
    
    opacity: 90%;
}

/* full-bleed band: rows overflow the viewport and clip at both edges */
.shape-band {
    position: relative;
    box-sizing: border-box;
    height: 60vh;
    height: 60svh;      /* small-viewport height: unaffected by mobile toolbars */
    overflow: hidden;
    overflow: clip;

    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--gap);
    padding: var(--pad) 0;
}

.shape-row {
    flex: 1 1 0;
    min-height: 0;

    display: flex;
    align-items: center;
}

/* the track holds two identical copies of the shape set; shifting by exactly one
   copy's width lands the second copy where the first was, so the loop is seamless */
.shape-track {
    flex: 0 0 auto;
    height: 100%;

    display: flex;
    align-items: center;
    gap: var(--gap);

    will-change: transform;
    animation: shape-marquee var(--duration, 60s) linear infinite;
    /* the shapes inside are NOT promoted individually - one layer per track */
}

.shape-track.reverse {
    animation-direction: reverse;
}

/* pausing keeps the loop position; restarting it would jump the seam */
.shape-band[data-paused="true"] .shape-track {
    animation-play-state: paused;
}

.band-pause {
    position: absolute;
    right: 14px;
    bottom: 12px;
    z-index: 3;

    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: none;
    padding: 0;
    cursor: pointer;

    background-color: color-mix(in oklab, var(--nav-surface) 70%, transparent);
    color: var(--tint);
    opacity: 0.55;
    transition:
        opacity var(--dur-hover) var(--ease-out),
        transform var(--dur-hover) var(--ease-spring),
        background-color var(--dur-palette) var(--ease-out);
}

.band-pause:focus-visible {
    opacity: 1;
    transform: scale(1.08);
    outline: none;
}

@media (hover: hover) {
    .band-pause:hover {
        opacity: 1;
        transform: scale(1.08);
    }
}

.band-pause::before {
    content: "";
    display: block;
    margin: auto;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 5px 0 5px 9px;
    border-color: transparent transparent transparent currentColor;
    transform: translateX(1px);
    transition: transform var(--dur-hover) var(--ease-out);
}

.band-pause[aria-pressed="false"]::before {
    /* two bars while playing */
    width: 9px;
    height: 10px;
    border-width: 0 3px;
    border-color: currentColor;
    transform: none;
}

@keyframes shape-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(calc(-1 * var(--shift))); }
}

.shape-track.enter .icon-container {
    animation: shape-in 620ms var(--ease-spring) both;
    animation-delay: calc(var(--i, 0) * 28ms);
}

@keyframes shape-in {
    from { transform: scale(0.55); opacity: 0; }
}


/* sits over the shapes; pointer-events none keeps them clickable underneath */
.band-title {
    position: absolute;
    inset: 0;
    margin: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    font-family: "Google Sans Flex", sans-serif;
    font-size: clamp(48px, 9vw, 140px);
    font-weight: 500;
    color: white;
    text-align: center;

    pointer-events: none;
    contain: layout;
    text-shadow: 4px 4px 8px rgba(0, 0, 0, 0.95);
}

.band-letter {
    display: inline-block;
    text-align: center;
    contain: layout;
    animation: letter-in 720ms var(--ease-out) both;
    animation-delay: calc(var(--i, 0) * 45ms);
}

.band-title.leaving .band-letter {
    animation: letter-out 320ms var(--ease-in) both;
    animation-delay: calc(var(--i, 0) * 22ms);
}

@keyframes letter-in {
    from { opacity: 0; transform: translateY(0.35em); }
}

@keyframes letter-out {
    to { opacity: 0; transform: translateY(-0.3em); }
}

.section-light {
    transition:
        background-color var(--dur-palette) var(--ease-out),
        opacity 800ms var(--ease-out),
        transform 800ms var(--ease-out);
    background-color: var(--section-bg);
    min-height: 40svh;

    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--pad);
}

html.js .section-light:not(.in-view) {
    opacity: 0;
    transform: translateY(28px);
}

.section-title {
    margin: 0;
    font-family: "Google Sans Flex", sans-serif;
    font-size: clamp(40px, 6vw, 90px);
    font-weight: 700;
    color: var(--nav-item);
    transition: color var(--dur-palette) var(--ease-out);
}

/* ---- cards: a grid of link cards in the page palette (socials + contact) ---- */

.section-cards {
    flex-direction: column;
    gap: 36px;
    padding: 64px var(--pad) 72px;
}

.cards-head {
    text-align: center;
}

.cards-sub {
    margin: 8px 0 0;
    font-family: "Google Sans Flex", sans-serif;
    font-size: 18px;
    font-weight: 400;
    color: var(--nav-item);
    opacity: 0.8;
}

.card-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    width: min(100%, 960px);

    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px;
}

/* cards ride in a beat behind the section itself */
.card-grid > li {
    transition:
        opacity 600ms var(--ease-out),
        transform 600ms var(--ease-out);
    transition-delay: calc(120ms + var(--i, 0) * 70ms);
}

html.js .section-cards:not(.in-view) .card-grid > li {
    opacity: 0;
    transform: translateY(18px);
}

/* ---- about: a centred heading block (what-i-do) ---- */

.section-about {
    flex-direction: column;
    align-items: center;
    gap: 30px;
    padding: 64px var(--pad) 76px;
}

/* a short row of cards stays close together instead of stretching */
.card-grid.narrow {
    width: min(100%, 640px);
}

.link-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    height: 100%;
    box-sizing: border-box;
    padding: 24px 18px 20px;
    border-radius: 18px;

    background-color: var(--nav-item);
    color: var(--tint);
    text-decoration: none;
    font-family: "Google Sans Flex", sans-serif;
    text-align: center;

    transition:
        transform var(--dur-hover) var(--ease-spring),
        background-color var(--dur-hover) var(--ease-out),
        box-shadow var(--dur-hover) var(--ease-out);
}

.link-card:focus-visible {
    outline: none;
    transform: translateY(-4px) scale(1.02);
    background-color: var(--nav-selected);
    box-shadow: 0 18px 32px -16px color-mix(in oklab, var(--nav-selected) 70%, transparent);
}

@media (hover: hover) {
    .link-card:hover {
        transform: translateY(-4px) scale(1.02);
        background-color: var(--nav-selected);
        box-shadow: 0 18px 32px -16px color-mix(in oklab, var(--nav-selected) 70%, transparent);
    }
}

.link-card:active {
    transform: translateY(-1px) scale(0.99);
    transition-duration: 90ms;
}

.link-icon {
    width: 30px;
    height: 30px;
    fill: currentColor;
    transition: transform var(--dur-hover) var(--ease-spring);
}

.link-card:focus-visible .link-icon {
    transform: scale(1.14) rotate(-5deg);
}

@media (hover: hover) {
    .link-card:hover .link-icon {
        transform: scale(1.14) rotate(-5deg);
    }
}

.link-label {
    font-size: 18px;
    font-weight: 600;
}

.link-sub {
    font-size: 14px;
    opacity: 0.78;
}

.icon {
    width: 100%;
    height: 100%;

    /* JS overrides this per shape; the literal is the no-JS fallback */
    --shape-color: var(--shape-default);
}

.icon path {
  fill: transparent;
  stroke: var(--shape-color);
  stroke-width: 2;
  transform-box: fill-box;
  transform-origin: center;
  transition:
      transform 420ms var(--ease-spring),
      stroke 480ms var(--ease-out),
      fill 480ms var(--ease-out);
}

.icon.filled path {
  fill: var(--shape-color);
  stroke: transparent;
}

.icon path.anim {
  transform: scale(0.90);
  transition-duration: 110ms, 480ms, 480ms;
  transition-timing-function: ease-out, var(--ease-out), var(--ease-out);
}

.icon-container {
    flex: 0 0 auto;
    height: 100%;
    aspect-ratio: 1;

    align-items: center;
    justify-content: center;
    display: flex;

    background: none;
    border: none;
    padding: 0;

    cursor: pointer;
    touch-action: manipulation;
}

.icon-container:focus-visible {
    outline: 2px solid var(--tint);
    outline-offset: 2px;
    border-radius: 8px;
}

/* ---- home: the four-part "who even am i" page --------------------------------
   The page is drawn as a 1232px-wide artboard. --u is one artboard pixel: 1px
   while the viewport is at least that wide, and it shrinks with the viewport
   below that, so every size written in u keeps the composition's proportions.
   Under 700px the artboard gives way to a flow layout - see the overrides. */

.home {
    container-type: inline-size;
    --u: min(1px, 100cqw / 1232);

    /* a stacking context of its own, so the z-index: -1 circles paint above
       this background instead of vanishing behind it */
    position: relative;
    isolation: isolate;

    /* the circles are centred on the column's edges, so half of each one hangs
       outside the page - about 130px past the right edge on a phone, and more
       than that on a wide screen. Clip it here rather than leaning on the
       overflow-x guard on <html>: that one only works if it propagates to the
       viewport, which is exactly what was letting the page scroll sideways.
       clip, not hidden - hidden would force overflow-y to auto and make this a
       scroll container, which would cut the circles off vertically too. */
    overflow-x: clip;
    background-color: var(--home-bg);
    color: var(--home-ink);
    font-family: "Google Sans Flex", sans-serif;
    transition:
        background-color var(--dur-palette) var(--ease-out),
        color var(--dur-palette) var(--ease-out);
}

/* the wavy divider is one <pattern>; it takes its colour from here, not from
   the <svg> that references it */
.home-defs {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
    color: var(--home-wave);
}

.home-section {
    position: relative;
    transition:
        opacity 800ms var(--ease-out),
        transform 800ms var(--ease-out);
}

html.js .home-section:not(.in-view) {
    opacity: 0;
    transform: translateY(28px);
}

.home-inner {
    position: relative;
    box-sizing: border-box;
    width: calc(1232 * var(--u));
    margin: 0 auto;
    padding: 0 calc(52 * var(--u));
}

/* pale circles centred on the column's edges. z-index -1 keeps them under the
   text of every section, including the next one when a circle spills into it */
.home-blob {
    position: absolute;
    z-index: -1;
    left: calc(var(--bx) * var(--u));
    top: calc(var(--by) * var(--u));
    width: calc(784 * var(--u));
    height: calc(784 * var(--u));
    border-radius: 50%;
    background-color: var(--home-circle);
    transform: translate(-50%, -50%);
    pointer-events: none;
    transition: background-color var(--dur-palette) var(--ease-out);
}

.home-wave {
    display: block;
    width: 100%;
    height: calc(12 * var(--u));
    opacity: 0.3;
}

/* anything drawn at artboard coordinates: --x/--y is its top-left corner and
   --r turns it about that corner, which is how the design tool placed it */
.home .placed {
    position: absolute;
    left: calc(var(--x) * var(--u));
    top: calc(var(--y) * var(--u));
    transform-origin: 0 0;
    transform: rotate(var(--r, 0deg)) scaleY(var(--sy, 1));
}

.home .sized {
    width: calc(var(--w) * var(--u));
    height: calc(var(--h) * var(--u));
}

/* a note and its arrow share one <p> so the phone layout can flow them as a line */
.home-callout {
    display: contents;
    margin: 0;
}

/* ---- type ---- */

.home-kicker {
    margin: 0;
    font-size: calc(32 * var(--u));
    line-height: 1.25;
    font-weight: 800;
    font-variation-settings: "wdth" 151, "ROND" 100, "opsz" 33;
    text-transform: lowercase;
    color: var(--home-label);
    transition: color var(--dur-palette) var(--ease-out);
}

.home-title {
    margin: 0;
    max-width: calc(800 * var(--u));
    font-family: "Bricolage Grotesque", "Google Sans Flex", sans-serif;
    font-variation-settings: "opsz" 14;
    font-size: calc(80 * var(--u));
    line-height: 1.064;
    font-weight: 600;
    text-transform: lowercase;
    color: var(--home-accent);
    text-shadow: 0 calc(4 * var(--u)) 1px rgba(255, 255, 255, 0.25);
    transition: color var(--dur-palette) var(--ease-out);
}

.home-title-xl {
    max-width: none;
    font-size: calc(128 * var(--u));
    line-height: 1.2;
    font-weight: 500;
    color: var(--home-ink);
    text-shadow: none;
}

.home-aviation .home-title-xl {
    max-width: calc(768 * var(--u));
    line-height: 0.9;
}

.home-copy {
    margin: 0;
    max-width: calc(1072 * var(--u));
    font-size: calc(40 * var(--u));
    line-height: 1.25;
    font-weight: 600;
    letter-spacing: -0.03em;
}

.home-about .home-copy {
    max-width: calc(625 * var(--u));
    font-size: calc(36 * var(--u));
}

.home-copy a {
    color: inherit;
    text-decoration-thickness: 2px;
    text-underline-offset: 0.12em;
    transition: color var(--dur-hover) var(--ease-out);
}

.home-copy a:focus-visible {
    color: var(--home-accent);
}

@media (hover: hover) {
    .home-copy a:hover {
        color: var(--home-accent);
    }
}

/* handwritten asides in the margins */
.home-note {
    display: block;
    margin: 0;
    font-family: "Mochiy Pop One", "Google Sans Flex", sans-serif;
    font-size: calc(24 * var(--u));
    line-height: 1.45;
    font-weight: 400;
    white-space: nowrap;
    color: var(--home-label);
    transition: color var(--dur-palette) var(--ease-out);
}

.home .home-note-center {
    text-align: center;
    transform-origin: center;
    transform: translate(-50%, -50%) rotate(var(--r, 0deg));
}

.home-note b {
    font-weight: inherit;
}

/* the arrow is a filled SVG, masked so it takes the theme colour like the logo */
.home-arrow {
    display: block;
    width: calc(50.2 * var(--u));
    height: calc(21.5 * var(--u));
    background-color: var(--home-label);
    transition: background-color var(--dur-palette) var(--ease-out);
    -webkit-mask: url("img/arrow.svg") center / 100% 100% no-repeat;
    mask: url("img/arrow.svg") center / 100% 100% no-repeat;
}

/* ---- vertical rhythm, section by section ---- */

.home-about .home-inner {
    padding-top: calc(51 * var(--u));
    padding-bottom: calc(47 * var(--u));
}

.home-photo .home-inner {
    padding-top: calc(13 * var(--u));
    padding-bottom: calc(50 * var(--u));
}

.home-music .home-inner {
    padding-top: calc(16 * var(--u));
}

.home-aviation .home-inner {
    padding-top: calc(17 * var(--u));
}

.home-about .home-kicker,
.home-aviation .home-kicker {
    margin-top: calc(32 * var(--u));
}

.home-photo .home-kicker {
    margin-top: calc(60 * var(--u));
}

.home-music .home-kicker {
    margin-top: calc(66 * var(--u));
}

.home-photo .home-title {
    margin-top: calc(9 * var(--u));
}

/* the music title carries its own leading, so it tucks up under the kicker;
   the aviation one is set tight (0.9) and needs the room instead */
.home-music .home-title {
    margin-top: calc(-12 * var(--u));
}

.home-aviation .home-title {
    margin-top: calc(6 * var(--u));
}

.home-about .home-copy {
    margin-top: calc(16 * var(--u));
}

.home-photo .home-copy {
    margin-top: calc(69 * var(--u));
}

.home-aviation .home-copy {
    margin-top: calc(74 * var(--u));
}

/* ---- 01: copy on the left, a scatter of chips on the right ---- */

.about-grid {
    display: grid;
    grid-template-columns: calc(625 * var(--u)) 1fr;
    margin-top: calc(9 * var(--u));
}

.chip-cloud {
    position: relative;
}

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

.chip {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: calc(9 * var(--u));
    width: calc(var(--w) * var(--u));
    height: calc(59 * var(--u));
    padding: 0 calc(15 * var(--u)) 0 calc(17 * var(--u));
    border-radius: calc(23 * var(--u));

    background-color: var(--home-accent);
    color: var(--home-chip);
    font-size: calc(24 * var(--u));
    font-weight: 700;
    white-space: nowrap;
    transition:
        background-color var(--dur-palette) var(--ease-out),
        color var(--dur-palette) var(--ease-out);
}

.chip-icon {
    flex: 0 0 auto;
    height: calc(var(--ih, 35) * var(--u));
    width: auto;
}

.chip-icon path {
    fill: none;
    stroke: currentColor;
    stroke-width: 4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.chip-icon.thin path {
    stroke-width: 3;
}

/* ---- 02: a camera by the title, three prints fanned out below ---- */

.home-camera {
    object-fit: contain;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.25));
}

.photo-stage {
    position: relative;
    height: calc(464 * var(--u));
    margin-top: calc(72 * var(--u));
}

.home-print {
    object-fit: cover;
    border-radius: calc(34 * var(--u));
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);
}

/* ---- 03: earbuds by the title, artists on the left, albums on the right ---- */

.home-pods {
    display: contents;
}

.home-pod {
    object-fit: cover;
    filter: drop-shadow(0 4px 13px rgba(0, 0, 0, 0.25));
}

.music-stage {
    position: relative;
    height: calc(931 * var(--u));
    margin-top: calc(23 * var(--u));
}

.home-artist {
    display: grid;
    place-items: center;
    margin: 0;
    overflow: hidden;
    border-radius: 50%;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

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

.home-artist figcaption {
    position: relative;
    font-size: calc(36 * var(--u));
    line-height: 1.064;
    font-weight: 700;
    text-align: center;
    text-transform: lowercase;
    color: white;
    text-shadow: 0 4px 5px rgba(0, 0, 0, 0.25);
}

.home-album {
    object-fit: cover;
    border-radius: calc(25 * var(--u));
}

/* ---- 04: the favourite aircraft, flush with the bottom-left corner ---- */

.aviation-stage {
    position: relative;
    height: calc(649 * var(--u));
    margin-top: calc(203 * var(--u));
}

.home-hero-plane {
    position: absolute;
    left: 0;
    bottom: 0;
    box-sizing: border-box;
    width: calc(399 * var(--u));
    height: calc(501 * var(--u));
    object-fit: cover;
    border-top: calc(7 * var(--u)) solid var(--home-accent);
    border-right: calc(7 * var(--u)) solid var(--home-accent);
    border-top-right-radius: calc(61 * var(--u));
    transition: border-color var(--dur-palette) var(--ease-out);
}

/* prints, covers and portraits lift a little under the cursor */
.home-print,
.home-album,
.home-artist {
    transition: transform var(--dur-hover) var(--ease-spring);
}

@media (hover: hover) {
    .home .home-print:hover,
    .home .home-album:hover,
    .home .home-artist:hover {
        transform: rotate(var(--r, 0deg)) translateY(calc(-8 * var(--u)));
    }
}


/* ===========================================================================
   Overrides live at the end of the file on purpose. These blocks and the
   rules they override have equal specificity, so source order decides the
   winner - sitting above them silently did nothing.
   =========================================================================== */

/* ---- phones ----------------------------------------------------------------
   Four full-width labels need ~450px and the group is width: fit-content, so
   below 700px it forced the whole document wider than the screen. Only the
   current page keeps its label; the rest collapse to their icon. That reads as
   a Material navigation bar and always shows you where you are.            */
@media (max-width: 700px) {
    .navbar-fg {
        height: 56px;
    }

    .navbar {
        height: 44px;               /* a comfortable touch target */
        padding-left: 11px;
        padding-right: 11px;
        gap: 6px;
    }

    /* only the current page carries its label; the rest are their icon alone.
       the links keep an aria-label in the markup, so hiding the text here does
       not leave them nameless to a screen reader */
    .navbar:not(.navbar-select) .navbar-content {
        display: none;
    }

    .navbar-icon {
        width: 24px;
        height: 24px;
        font-size: 24px;
    }

    .navbar-content {
        font-size: 17px;
    }

    /* shorter band so the page's actual content is not pushed below the fold.
       the floor is capped against the live viewport: a bare 260px would win over
       46svh on a landscape phone and push the marquee's pause button off screen */
    .shape-band {
        height: 46svh;
        min-height: min(260px, 60svh);
        max-height: 420px;
    }

    .band-pause {
        width: 44px;
        height: 44px;
        right: 10px;
        bottom: 10px;
        opacity: 0.7;
    }

    .section-cards {
        gap: 26px;
        padding: 44px var(--pad) 52px;
    }

    .card-grid {
        gap: 12px;
    }

    .link-card {
        padding: 20px 16px 18px;
    }

    .cards-sub {
        font-size: 16px;
    }

    .section-about {
        gap: 24px;
        padding: 44px var(--pad) 56px;
    }
}

/* Touch targets follow the pointer, not the viewport. A landscape phone and a
   tablet are both coarse-pointer and were missing every touch affordance. */
@media (pointer: coarse) {
    .navbar {
        height: 44px;
    }

    .navbar-group {
        gap: 6px;
    }

    .band-pause {
        width: 44px;
        height: 44px;
        opacity: 0.85;
    }

    .link-card {
        min-height: 96px;
        justify-content: center;
    }
}

/* very narrow phones: tighten the pills rather than let them overflow */
@media (max-width: 360px) {
    /* 10px, not 9: the icon-only items are icon (24) + padding, and 9 left them
       42px wide - just under the 44px touch target. The bar has room for it. */
    .navbar {
        padding-left: 10px;
        padding-right: 10px;
    }

    .navbar-content {
        font-size: 16px;
    }
}

/* landscape phones are short, not narrow: give the band and nav less height */
@media (max-width: 700px) and (max-height: 440px) {
    .navbar-fg {
        height: 52px;
    }

    .navbar {
        height: 44px;
    }

    .navbar-icon {
        width: 22px;
        height: 22px;
        font-size: 22px;
    }
}

/* motion is optional: the marquee stops, entrances and exits become instant, and
   the palette / pill / press still change state but without travelling */
@media (prefers-reduced-motion: reduce) {
    .shape-track {
        animation: none;
    }

    .shape-track.enter .icon-container,
    .band-letter,
    .band-title.leaving .band-letter {
        animation: none;
    }

    html {
        scroll-behavior: auto;
    }

    html, body,
    .navbar,
    .band-pause,
    .navbar-indicator,
    .navbar-icon,
    .navbar-content,
    .navbar-logo,
    .section-light,
    .home-section,
    .home,
    .home-blob,
    .home-kicker,
    .home-title,
    .home-copy a,
    .chip,
    .home-print,
    .home-album,
    .home-artist,
    .home-hero-plane,
    .card-grid > li,
    .link-card,
    .link-icon,
    .icon path {
        transition-duration: 1ms;
        transition-delay: 0ms;
    }

    html.js .section-cards:not(.in-view) .card-grid > li {
        opacity: 1;
        transform: none;
    }

    .navbar-icon,
    .link-icon {
        transition-duration: 1ms;
    }

    html.js .section-light:not(.in-view),
    html.js .home-section:not(.in-view) {
        opacity: 1;
        transform: none;
    }
}

/* ---- phones: the home artboard gives way to a flow layout ------------------
   Every placed element goes static and is re-sized for a narrow column. The
   rotations survive, halved, so the page keeps its scrapbook feel.          */
@media (max-width: 700px) {
    .home {
        --u: 1px;
    }

    .home-inner {
        display: flex;
        flex-direction: column;
        width: auto;
        padding: 0 var(--pad);
    }

    /* 02 and 03 each carry a decorative object. Floating it into the headline
       shortened only the headline's first lines; stacking it above the headline
       instead left a tall empty band beside the section number. Here the number
       and the object share one header row, centred against each other, and the
       headline starts straight after at the full measure. */
    .home-photo .home-inner,
    .home-music .home-inner {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .home-photo .home-inner > *,
    .home-music .home-inner > * {
        grid-column: 1 / -1;
    }

    /* the object is four times the height of the section number, so the row is
       always taller than the number. Sitting the number at the row's bottom puts
       that slack above it, where it reads as section padding, instead of between
       it and the headline - there it read as a hole, and left this headline
       sitting further from its number than the two sections with no object. */
    .home-photo .home-kicker,
    .home-music .home-kicker {
        grid-column: 1;
        align-self: end;
    }

    .home-about .home-inner,
    .home-photo .home-inner,
    .home-music .home-inner,
    .home-aviation .home-inner {
        padding-top: 26px;
        padding-bottom: 40px;
    }

    .home-aviation .home-inner {
        padding-bottom: 0;
    }

    .home-wave {
        height: 10px;
    }

    .home-blob {
        width: 64vw;
        height: 64vw;
    }

    .home-about .home-blob {
        left: 100%;
        top: 100%;
    }

    .home-photo .home-blob {
        left: 0;
        top: 42%;
    }

    .home-photo .home-blob + .home-blob {
        left: 100%;
        top: 100%;
    }

    .home-music .home-blob {
        left: 0;
        top: 58%;
    }

    .home-aviation .home-blob {
        left: 100%;
        top: 6%;
    }

    .home .placed {
        position: static;
        left: auto;      /* the artboard offsets must not survive on anything
                            that goes position: relative below */
        top: auto;
        transform: none;
    }

    .home .sized {
        width: auto;
        height: auto;
    }

    .home-about .home-kicker,
    .home-photo .home-kicker,
    .home-music .home-kicker,
    .home-aviation .home-kicker {
        margin-top: 22px;
        font-size: 16px;
    }

    .home-title,
    .home-photo .home-title,
    .home-music .home-title,
    .home-aviation .home-title {
        margin-top: 6px;
        max-width: none;
        font-size: clamp(34px, 10vw, 46px);
        text-shadow: 0 2px 1px rgba(255, 255, 255, 0.25);
    }

    /* both section selectors are needed: the rule above is section-qualified, so
       a bare .home-title-xl loses to it on specificity and the music headline
       was rendering at the small size */
    .home-title-xl,
    .home-music .home-title-xl,
    .home-aviation .home-title-xl {
        max-width: none;
        font-size: clamp(40px, 12.5vw, 58px);
        line-height: 1.02;
        text-shadow: none;
    }

    /* the designed two-line break fights the floated earbuds; let it wrap */
    .home-music .home-title br {
        display: none;
    }

    .home-copy,
    .home-about .home-copy,
    .home-photo .home-copy,
    .home-aviation .home-copy {
        margin-top: 16px;
        max-width: none;
        font-size: 17px;
        line-height: 1.5;
        letter-spacing: -0.01em;
    }

    /* every note tucks into the right margin above what it labels. Left-aligned
       they sat at the head of an otherwise empty full-width band, which read as
       floating rather than as an aside */
    .home-callout {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 10px;
        margin: 0;
    }

    .home .home-note,
    .home .home-note-center {
        display: inline-block;
        font-size: 16px;
        text-align: left;
        transform-origin: center;
        transform: rotate(-3deg);
    }

    /* The artboard angles aim at where each thing sat on the wide layout. Down
       here every note has been reflowed to sit above what it labels, so they all
       get one angle for this layout instead: a short hook reaching back down-left
       into the content. It has to be its own property - --r is an inline style
       and would win. At 0deg the arrow points left and rotation is clockwise, so
       -50deg puts the head down-left with the tail up by the text. */
    .home .home-arrow {
        width: 30px;
        height: 13px;
        transform-origin: center;
        transform: rotate(var(--pr, -50deg));
    }

    /* 01: chips wrap into a row under the copy */
    .about-grid {
        display: block;
        margin-top: 6px;
    }

    .chip-cloud {
        display: flex;
        flex-direction: column;
        margin-top: 24px;
    }

    .chips {
        display: flex;
        flex-wrap: wrap;
        gap: 12px 10px;
        padding: 4px 6px;
    }

    .home .chip {
        width: auto;
        height: 42px;
        gap: 8px;
        padding: 0 14px 0 12px;
        border-radius: 16px;
        font-size: 15px;
        transform-origin: center;
        transform: rotate(calc(var(--r, 0deg) / 2));
    }

    .chip-icon {
        height: 22px;
    }

    .chip-icon path {
        stroke-width: 3.2;
    }

    /* the note introduces the chips here rather than trailing them, so the
       arrow has something below it to point at */
    .home-about .home-callout {
        order: -1;
        margin: 0 0 10px;
    }

    /* the object takes the header row's second column, hung from the top. The
       right margin is for the rotation: these are rotated about their centres,
       which throws a corner ~20px past the box, and at the page's right edge
       that is 20px of the earbud outside the viewport. */
    .home .home-camera,
    .home-music .home-pods {
        grid-column: 2;
        align-self: start;
        justify-self: end;
        float: none;
        margin: 8px 10px 0 0;
    }

    /* 02: the camera rides in the header row, the prints stack */
    .home .home-camera {
        width: clamp(92px, 24vw, 160px);
        transform-origin: center;
        transform: rotate(8deg);
    }

    .photo-stage {
        display: grid;
        gap: 14px;
        height: auto;
        margin-top: 18px;
    }

    .home .home-print {
        width: 94%;
        aspect-ratio: 16 / 9;
        margin: 0 auto;
        border-radius: 18px;
        transform-origin: center;
        transform: rotate(calc(var(--r, 0deg) / 2));
    }

    /* 03: earbuds ride in the header row; artists and albums fill a 2x2 each */
    .home-music .home-pods {
        display: flex;
        gap: 6px;
        width: clamp(104px, 30vw, 190px);
    }

    .home .home-pod {
        width: 50%;
        aspect-ratio: 174.5 / 241.5;
        transform-origin: center;
        transform: rotate(calc(var(--r, 0deg) * 0.45));
    }

    .music-stage {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 14px;
        height: auto;
        margin-top: 24px;
    }

    .music-stage .home-callout {
        grid-column: 1 / -1;
        margin-top: 10px;
    }

    .home .home-artist {
        position: relative;
        width: 100%;
        aspect-ratio: 1;
    }

    .home-artist figcaption {
        font-size: clamp(20px, 6vw, 26px);
    }

    /* a gentler tilt, and a touch smaller, so the corners stay inside the gutter */
    .home .home-album {
        width: 100%;
        aspect-ratio: 1;
        border-radius: 18px;
        transform-origin: center;
        transform: rotate(calc(var(--r, 0deg) / 3)) scale(0.94);
    }

    /* 04: the aircraft still sits flush with the left edge of the screen */
    .aviation-stage {
        height: auto;
        margin-top: 30px;
    }

    /* the aircraft bleeds off the left edge rather than filling the width, so
       the note lines up with its right edge instead of the screen's - same box,
       same negative margin - and the arrow has it directly underneath */
    .aviation-stage .home-callout {
        width: min(72%, 300px);
        min-width: max-content;   /* the note does not wrap; below ~360px it is
                                     wider than the aircraft and would spill */
        margin-left: calc(-1 * var(--pad));
    }

    .home .home-hero-plane {
        position: static;
        display: block;
        width: min(72%, 300px);
        height: auto;
        aspect-ratio: 399 / 501;
        margin: 14px 0 0 calc(-1 * var(--pad));
        border-width: 5px;
        border-top-right-radius: 40px;
    }

    @media (hover: hover) {
        .home .home-print:hover,
        .home .home-artist:hover {
            transform: rotate(calc(var(--r, 0deg) / 2)) translateY(-6px);
        }

        .home .home-album:hover {
            transform: rotate(calc(var(--r, 0deg) / 3)) scale(0.94) translateY(-6px);
        }
    }
}