@layer pages {
  /* =========================================================== HOME */

  /* ---------- Hero ---------- */

  .hero,
  .case-hero {
    position: relative;
    height: 100svh;
    min-height: 560px;
    overflow: hidden;
    background: var(--ink-0);
  }

  .hero__media,
  .case-hero__media {
    position: absolute;
    inset: 0;
  }

  .hero__shade {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
      linear-gradient(180deg, rgb(13 13 12 / 0.6) 0%, rgb(13 13 12 / 0) 26%),
      linear-gradient(0deg, rgb(13 13 12 / 0.85) 0%, rgb(13 13 12 / 0.25) 38%, rgb(13 13 12 / 0) 60%);
  }

  .hero__content {
    position: relative;
    display: grid;
    grid-template-rows: 1fr auto auto;
    height: 100%;
    padding-top: calc(var(--header-h) + var(--space-4));
    padding-bottom: var(--space-3);
  }

  .hero__row {
    grid-row: 2;
    display: grid;
    gap: var(--space-3);
    align-items: end;
    margin-bottom: var(--space-4);
  }

  .hero__intro {
    max-width: 22rem;
    font-size: var(--fs-small);
    line-height: 1.6;
    color: rgb(235 230 222 / 0.82);
  }

  .hero__title {
    max-width: 7ch;
  }

  .hero__foot {
    grid-row: 3;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-2) var(--space-4);
    padding-top: var(--space-2);
    border-top: 1px solid rgb(235 230 222 / 0.22);
  }

  .hero__index {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.35rem var(--space-3);
  }

  .hero__index a {
    display: inline-flex;
    gap: 0.75rem;
    font-size: var(--fs-small);
    transition: color 400ms var(--ease);
  }

  .hero__index a:hover {
    color: var(--light);
  }

  .hero__index a[aria-current="page"] {
    color: var(--light);
  }

  .hero__index a[aria-current="page"] .t-num::before {
    content: "";
    display: inline-block;
    width: 0.9rem;
    height: 1px;
    margin-right: 0.5rem;
    vertical-align: middle;
    background: var(--light);
    transform: rotate(-68deg);
  }

  .case-hero__nav {
    grid-row: auto;
    margin-top: var(--space-4);
  }

  .hero__credit {
    display: none;
  }

  @media (min-width: 900px) {
    .hero__row {
      grid-template-columns: 1fr minmax(16rem, 22rem);
    }

    .hero__intro {
      padding-bottom: 0.9em;
    }

    .hero__index {
      display: flex;
      gap: var(--space-5);
    }

    .hero__credit {
      display: block;
    }
  }

  /* ---------- Statement ---------- */

  .statement {
    padding-block: var(--section);
  }

  .statement__aside {
    display: grid;
    gap: var(--space-3);
    justify-items: start;
    align-content: end;
    margin-top: var(--space-5);
  }

  .statement__text em {
    color: var(--mute);
  }

  @media (min-width: 900px) {
    .statement__text {
      grid-column: 1 / 12;
    }

    .statement__aside {
      grid-column: 8 / 12;
      margin-top: var(--space-6);
    }
  }

  /* ---------- Feature: the lead project ---------- */

  .feature__link {
    position: relative;
    display: block;
  }

  .feature__media {
    aspect-ratio: 3 / 4;
  }

  /* The shade for the title lives inside the photograph, so it opens and
     appears with it and never shows on its own. */
  .feature__media::before,
  .next__media::before {
    content: "";
    position: absolute;
    inset: 40% 0 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(0deg, rgb(13 13 12 / 0.8), rgb(13 13 12 / 0));
    transition: opacity 900ms var(--ease);
  }

  .next__media::before {
    inset: 0;
    background: linear-gradient(0deg, rgb(13 13 12 / 0.85), rgb(13 13 12 / 0.1) 60%);
  }

  .js .media:not(.is-loaded)::before {
    opacity: 0;
  }

  .feature__over {
    position: absolute;
    inset: auto 0 0;
    z-index: 1;
    display: grid;
    gap: var(--space-1);
    padding-bottom: var(--space-4);
  }

  .feature__body {
    row-gap: var(--space-4);
    padding-top: var(--space-5);
    padding-bottom: var(--section);
  }

  .feature__a {
    margin-top: var(--space-4);
  }

  .feature__b {
    grid-column: 2 / -1;
  }

  .feature__more {
    justify-self: start;
  }

  @media (min-width: 600px) {
    .feature__media {
      aspect-ratio: 16 / 9;
    }

    .feature__b {
      grid-column: 4 / -1;
    }
  }

  @media (min-width: 900px) {
    .feature__media {
      aspect-ratio: auto;
      height: min(100svh, 56.25vw);
    }


    .feature__body .facts {
      grid-column: 1 / 4;
      grid-template-columns: 1fr;
    }

    .feature__lead {
      grid-column: 5 / 12;
    }

    .feature__a {
      grid-column: 1 / 8;
      margin-top: var(--space-6);
    }

    .feature__b {
      grid-column: 9 / 12;
      grid-row: span 2;
      align-self: end;
    }

    .feature__more {
      grid-column: 1 / 8;
    }
  }

  /* ---------- Light study ---------- */

  .study {
    padding-block: var(--section);
  }

  .study__grid {
    row-gap: var(--space-4);
    align-items: center;
  }

  .study__dwg .dwg {
    max-height: 62svh;
  }

  .study__clock {
    display: none;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
  }

  .study__steps {
    display: grid;
    gap: var(--space-3);
  }

  .study__step {
    display: grid;
    grid-template-columns: 4rem 1fr;
    gap: var(--space-2);
    padding-top: var(--space-2);
    border-top: 1px solid var(--line);
    color: var(--bone);
  }

  .study__time {
    font-size: var(--fs-small);
    font-variant-numeric: tabular-nums;
    color: var(--mute);
  }

  /* The study sits in the dark, like the room it draws: light lines, and the
     band of sun is the only warm, bright thing on the screen. */
  .study .dwg {
    --dwg-bg: rgb(13 13 12 / 0.9);
    color: var(--bone);
  }

  .study .dwg .lbl text {
    fill: var(--mute);
  }

  .study .dwg .glass {
    stroke: var(--light);
  }

  .study .dwg .light {
    fill: #f2d9a8;
    fill-opacity: 0.62;
    filter: drop-shadow(0 0 18px rgb(242 217 168 / 0.45));
  }

  .study__side {
    display: grid;
    gap: var(--space-4);
  }

  .study__side .link-arrow {
    justify-self: start;
  }

  @media (min-width: 900px) {
    .study__head {
      grid-column: 1 / 6;
    }

    .study__dwg {
      grid-column: 1 / 9;
    }

    .study__side {
      grid-column: 9 / 13;
    }
  }

  /* ---------- Band: Maison des Dunes ---------- */

  .band__link {
    display: block;
  }

  .band__media {
    aspect-ratio: 4 / 5;
  }

  .band__body {
    row-gap: var(--space-3);
    padding-top: var(--space-4);
    padding-bottom: var(--section);
  }

  .band__head {
    display: grid;
    gap: var(--space-1);
  }

  .band__head a {
    transition: color 400ms var(--ease);
  }

  .band__head a:hover {
    color: var(--mute);
  }

  .band__text {
    display: grid;
    gap: var(--space-2);
    align-content: end;
  }

  @media (min-width: 600px) {
    .band__media {
      aspect-ratio: 21 / 9;
    }
  }

  @media (min-width: 900px) {
    .band__text {
      grid-column: 8 / 13;
    }
  }

  /* ---------- Pair ---------- */

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

  .pair .g {
    row-gap: var(--space-5);
  }

  .tile {
    display: grid;
    gap: var(--space-2);
  }

  .tile__cap {
    display: grid;
    gap: 0.35rem;
  }

  .tile--small {
    grid-column: 2 / -1;
  }

  .pair__all {
    justify-self: start;
  }

  @media (min-width: 600px) {
    .tile--tall {
      grid-column: 1 / 6;
    }

    .tile--small {
      grid-column: 6 / 9;
      align-self: end;
    }
  }

  @media (min-width: 900px) {
    .tile--tall {
      grid-column: 1 / 7;
    }

    .tile--small {
      grid-column: 8 / 11;
      align-self: start;
      margin-top: 40%;
    }

    .pair__all {
      grid-column: 8 / 12;
    }
  }

  /* ---------- Cities ---------- */

  .cities {
    padding-block: var(--section);
  }

  .cities .g {
    row-gap: var(--space-6);
  }

  .city {
    display: grid;
    gap: var(--space-2);
  }

  .city .t-mega {
    margin-top: var(--space-1);
  }

  .city__now {
    margin-bottom: var(--space-2);
    font-variant-numeric: tabular-nums;
  }

  .city__now::before {
    content: "";
    display: inline-block;
    width: 1.5rem;
    height: 1px;
    margin-right: 0.75rem;
    vertical-align: middle;
    background: var(--light);
    transform: rotate(-68deg);
  }

  @media (min-width: 900px) {
    .city {
      grid-column: 1 / 6;
    }

    .city--b {
      grid-column: 7 / 12;
      margin-top: var(--space-7);
    }
  }

  /* ---------- Call to action ---------- */

  .cta {
    position: relative;
    padding-block: var(--section);
    background: linear-gradient(180deg, rgb(22 22 20 / 0) 0%, rgb(22 22 20 / 0.6) 30%);
  }

  .cta .g {
    row-gap: var(--space-5);
  }

  .cta__head {
    display: grid;
    gap: var(--space-3);
  }

  .cta__body {
    display: grid;
    gap: var(--space-4);
    align-content: end;
    justify-items: start;
  }

  .cta__body .t-lead {
    max-width: 30rem;
    color: var(--bone);
  }

  .cta__body .t-small {
    max-width: 30rem;
  }

  @media (min-width: 900px) {
    .cta__head {
      grid-column: 1 / 8;
    }

    .cta__body {
      grid-column: 8 / 13;
    }
  }

  /* The button fills with a blade of light on hover. */
  .cta-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    width: 100%;
    max-width: 30rem;
    min-height: 72px;
    padding: 0 1.75rem;
    overflow: hidden;
    border: 1px solid rgb(235 230 222 / 0.4);
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: var(--bone);
    isolation: isolate;
    transition: color 500ms var(--ease), border-color 500ms var(--ease);
  }

  .cta-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--light);
    clip-path: polygon(-20% 0%, -14% 0%, -34% 100%, -40% 100%);
    transition: clip-path 800ms var(--ease);
  }

  .cta-btn__arrow {
    font-size: 1.25rem;
    transition: transform 600ms var(--ease);
  }

  .cta-btn:hover,
  .cta-btn:focus-visible {
    color: var(--ink-0);
    border-color: var(--light);
  }

  .cta-btn:hover::before,
  .cta-btn:focus-visible::before {
    clip-path: polygon(-20% 0%, 140% 0%, 120% 100%, -40% 100%);
  }

  .cta-btn:hover .cta-btn__arrow {
    transform: translateX(0.5rem);
  }

  /* =========================================================== WORK INDEX */

  .page-hero .g {
    row-gap: var(--space-4);
  }

  @media (min-width: 900px) {
    .page-hero__title {
      grid-column: 1 / 8;
    }

    .page-hero__lead {
      grid-column: 8 / 13;
      align-self: end;
    }
  }

  .index {
    padding-bottom: var(--space-6);
  }

  .index-list {
    border-top: 1px solid var(--line);
  }

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

  .index-link {
    display: grid;
    grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
    column-gap: var(--gutter);
    row-gap: var(--space-2);
    padding-block: var(--space-4);
  }

  .index-thumb {
    grid-column: 1 / 4;
    margin-bottom: var(--space-2);
  }

  .index-item--r .index-thumb {
    grid-column: 2 / -1;
  }

  .index-num {
    grid-column: 1 / -1;
  }

  .index-title {
    grid-column: 1 / -1;
    font-size: clamp(3rem, 7.4vw, 7.75rem);
    transition: transform 700ms var(--ease), color 500ms var(--ease);
  }

  .index-meta {
    grid-column: 1 / -1;
  }

  @media (min-width: 600px) {
    .index-thumb {
      grid-column: 1 / 5;
    }

    .index-item--r .index-thumb {
      grid-column: 5 / -1;
    }
  }

  @media (min-width: 900px) {
    .index-link {
      align-items: baseline;
      padding-block: var(--space-4) var(--space-3);
    }

    .index-num {
      grid-column: 1 / 2;
    }

    .index-title {
      grid-column: 2 / 10;
    }

    .index-meta {
      grid-column: 10 / 13;
      transition: opacity 500ms var(--ease);
    }

    .index-list:hover .index-link:not(:hover) .index-title {
      color: #57534c;
    }

    .index-link:hover .index-title {
      transform: translateX(1.5rem);
    }

    .index.is-previewing .index-meta {
      opacity: 0.15;
    }
  }

  .index-preview {
    display: none;
  }

  /* With a mouse, the photograph follows the pointer instead (below). */
  @media (min-width: 900px) and (hover: hover) {
    .index-thumb {
      display: none;
    }
  }

  /* Large touch screens (a tablet held sideways) have no pointer to follow:
     each project keeps its photograph, beside the name. */
  @media (min-width: 900px) and (hover: none) {
    .index-link {
      align-items: center;
    }

    .index-thumb,
    .index-item--r .index-thumb {
      grid-column: 9 / 13;
      grid-row: 1 / span 2;
      margin: 0;
    }

    .index-num {
      grid-row: 1;
      align-self: end;
    }

    .index-title {
      grid-column: 2 / 9;
      grid-row: 1;
      align-self: end;
      font-size: clamp(3rem, 5.6vw, 6rem);
    }

    .index-meta {
      grid-column: 2 / 9;
      grid-row: 2;
      align-self: start;
    }
  }

  @media (min-width: 900px) and (hover: hover) {
    /* The preview follows the pointer (--py, set by main.js). The frame opens
       once when the pointer enters the list; moving from one project to the
       next, the new image opens through its own blade on top of the last one,
       so the frame is never empty and never flickers. */
    .index-preview {
      position: fixed;
      top: 0;
      right: var(--margin);
      z-index: 5;
      display: block;
      width: min(24vw, 360px);
      aspect-ratio: 4 / 5;
      pointer-events: none;
      transform: translate3d(0, calc(var(--py, 50vh) - 50%), 0);
      clip-path: polygon(60% 0%, 60% 0%, 40% 100%, 40% 100%);
      transition: clip-path 900ms var(--ease);
      will-change: transform;
    }

    .index.is-previewing .index-preview {
      clip-path: polygon(0% 0%, 140% 0%, 100% 100%, -40% 100%);
    }

    .index-preview__img {
      position: absolute;
      inset: 0;
      clip-path: polygon(62% 0%, 62% 0%, 38% 100%, 38% 100%);
      transition: clip-path 750ms var(--ease);
    }

    .index-preview__img img {
      transform: scale(1.08);
      transition: transform 1200ms var(--ease);
    }

    .index-preview__img.is-on {
      clip-path: polygon(0% 0%, 140% 0%, 100% 100%, -40% 100%);
    }

    .index-preview__img.is-on img {
      transform: scale(1);
    }

    /* Leaving the list: the frame closes and the image stays put inside it. */
    .index:not(.is-previewing) .index-preview__img {
      transition: none;
    }
  }

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

  .index-note .g {
    row-gap: var(--space-3);
    justify-items: start;
  }

  @media (min-width: 900px) {
    .index-note .t-body {
      grid-column: 2 / 7;
    }

    .index-note .link-arrow {
      grid-column: 8 / 12;
      align-self: end;
    }
  }

  /* =========================================================== CASE STUDY */

  .case-hero__title {
    position: absolute;
    inset: auto 0 0;
    display: grid;
    gap: var(--space-1);
    padding-bottom: var(--space-4);
  }

  .case-hero__back {
    justify-self: start;
    margin-bottom: var(--space-3);
    color: var(--bone);
  }

  .case-hero__back::before {
    content: "← ";
  }

  .case-hero__title .t-mega {
    max-width: 12ch;
  }

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

  .case-intro {
    padding-block: var(--section);
  }

  .case-intro .g {
    row-gap: var(--space-5);
  }

  .case-intro__text {
    display: grid;
    gap: 1em;
  }

  @media (min-width: 900px) {
    .case-intro__lead {
      grid-column: 1 / 10;
    }

    .case-intro__text {
      grid-column: 7 / 12;
    }
  }

  .seq {
    margin-bottom: var(--section);
  }

  /* Full-bleed frames take their height from the screen, never their width
     from the photo's ratio: a 16:9 ratio on a fixed height pushed the page
     wider than the screen on 1024-1440px displays. */
  .seq--full .seq__media {
    width: 100%;
    height: 78svh;
    aspect-ratio: auto;
  }

  .seq__cap {
    margin-top: var(--space-2);
    max-width: 44rem;
  }

  .seq--wide .seq__cap {
    padding-inline: 0;
  }

  .seq--split .g {
    row-gap: var(--space-4);
    align-items: center;
  }

  .seq__text {
    display: grid;
    gap: var(--space-2);
  }

  .seq--pair .g {
    row-gap: var(--space-4);
  }

  .seq__b {
    grid-column: 2 / -1;
  }

  @media (min-width: 600px) {
    .seq__b {
      grid-column: 4 / -1;
    }
  }

  @media (min-width: 900px) {
    .seq--full .seq__media {
      height: 100svh;
    }

    .seq__img {
      grid-column: 1 / 7;
    }

    .seq__text {
      grid-column: 8 / 12;
    }

    .seq--flip .seq__img {
      grid-column: 7 / 13;
      grid-row: 1;
    }

    .seq--flip .seq__text {
      grid-column: 2 / 6;
      grid-row: 1;
    }

    .seq__a {
      grid-column: 1 / 8;
    }

    .seq__b {
      grid-column: 9 / 13;
      align-self: end;
      margin-bottom: 18%;
    }

    .seq__pair-cap {
      grid-column: 9 / 13;
      margin-top: calc(var(--space-4) * -1);
    }
  }

  .case-dwg {
    padding-block: var(--section);
    margin-bottom: var(--section);
  }

  .case-dwg .g {
    row-gap: var(--space-5);
  }

  .case-dwg__head {
    display: grid;
    gap: var(--space-2);
  }

  .case-dwg__fig {
    display: grid;
    gap: var(--space-3);
  }

  @media (min-width: 900px) {
    .case-dwg__head {
      grid-column: 1 / 7;
    }

    .case-dwg__fig {
      grid-column: 1 / 13;
    }

    .case-dwg__fig figcaption {
      max-width: 30rem;
      justify-self: end;
    }
  }

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

  .chapters .g {
    row-gap: var(--space-5);
  }

  .chapter {
    display: grid;
    gap: var(--space-2);
    align-content: start;
    padding-top: var(--space-3);
    border-top: 1px solid var(--line);
  }

  @media (min-width: 900px) {
    .chapter {
      grid-column: span 4;
    }
  }

  .next__link {
    position: relative;
    display: block;
  }

  .next__media {
    height: 78svh;
  }

  .next__text {
    position: absolute;
    inset: auto 0 0;
    z-index: 1;
    display: grid;
    gap: var(--space-2);
    padding-bottom: var(--space-5);
  }

  /* =========================================================== STUDIO */

  .studio-media {
    height: 80svh;
  }

  /* The studio in four figures, under the opening statement. */
  .figures {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4) var(--gutter);
    margin: var(--space-6) 0 0;
    padding-top: var(--space-3);
    border-top: 1px solid var(--line);
  }

  .figure {
    display: flex;
    flex-direction: column-reverse;
    justify-content: flex-end;
    gap: var(--space-1);
  }

  .figure dt {
    max-width: 14rem;
    color: var(--mute);
  }

  .figure__n {
    margin: 0;
    font-family: var(--serif);
    font-size: clamp(4rem, 9vw, 8.5rem);
    line-height: 0.85;
    letter-spacing: -0.03em;
    font-variant-numeric: lining-nums;
  }

  @media (min-width: 900px) {
    .figures {
      grid-template-columns: repeat(4, minmax(0, 1fr));
      margin-top: var(--space-7);
    }
  }

  .city__sun {
    color: var(--bone);
  }

  .city__addr {
    color: var(--mute);
    letter-spacing: 0.02em;
  }

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

  .principle {
    display: grid;
    gap: var(--space-2);
    padding-block: var(--space-4);
    border-top: 1px solid var(--line);
  }

  @media (min-width: 900px) {
    .principle {
      grid-template-columns: repeat(12, minmax(0, 1fr));
      column-gap: var(--gutter);
      align-items: baseline;
      padding-block: var(--space-5);
    }

    .principle .t-num {
      grid-column: 1 / 2;
    }

    .principle .t-h2 {
      grid-column: 2 / 8;
    }

    .principle .t-body {
      grid-column: 9 / 13;
    }
  }

  .method {
    padding-block: var(--section);
  }

  .method .wrap > .t-h2 {
    margin-top: var(--space-2);
  }

  .method__list {
    display: grid;
    gap: var(--space-5);
    margin-top: var(--space-6);
  }

  .step {
    display: grid;
    gap: var(--space-2);
    align-content: start;
    padding-top: var(--space-3);
    border-top: 1px solid var(--paper-line);
  }

  .step__n {
    color: var(--paper-mute);
    line-height: 0.8;
  }

  @media (min-width: 600px) {
    .method__list {
      grid-template-columns: 1fr 1fr;
    }
  }

  @media (min-width: 900px) {
    .method__list {
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: var(--gutter);
    }
  }

  .people {
    padding-block: var(--section);
  }

  .people .g {
    row-gap: var(--space-5);
  }

  .people__aside {
    display: grid;
    gap: 1em;
  }

  @media (min-width: 900px) {
    .people__text {
      grid-column: 1 / 11;
    }

    .people__aside {
      grid-column: 7 / 12;
    }
  }

  /* =========================================================== CONTACT */

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

  .contact .g {
    row-gap: var(--space-6);
  }

  .form {
    display: grid;
    gap: var(--space-4) var(--gutter);
  }

  .field {
    display: grid;
    gap: 0.5rem;
  }

  .field label {
    font-size: var(--fs-label);
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--mute);
  }

  .field input,
  .field select,
  .field textarea {
    width: 100%;
    padding: 0.75rem 0;
    background: transparent;
    border: 0;
    border-bottom: 1px solid #4a4843;
    border-radius: 0;
    font-size: 1.125rem;
    transition: border-color 400ms var(--ease);
  }

  .field select {
    appearance: none;
    background: linear-gradient(45deg, transparent 50%, var(--mute) 50%) right 6px center / 6px 6px no-repeat,
      linear-gradient(-45deg, transparent 50%, var(--mute) 50%) right 0 center / 6px 6px no-repeat;
  }

  .field select option {
    background: var(--ink-1);
  }

  .field textarea {
    resize: vertical;
  }

  .field input:focus,
  .field select:focus,
  .field textarea:focus {
    outline: none;
    border-bottom-color: var(--bone);
  }

  .field input:focus-visible,
  .field select:focus-visible,
  .field textarea:focus-visible {
    box-shadow: 0 2px 0 0 var(--light);
  }

  .form__foot {
    display: grid;
    gap: var(--space-2);
    justify-items: start;
  }

  .form__foot .t-small {
    max-width: 28rem;
  }

  .contact__aside {
    display: grid;
    gap: var(--space-4);
    align-content: start;
  }

  .contact__aside .t-mega {
    font-size: var(--fs-h2);
  }

  .contact__aside .link {
    justify-self: start;
  }

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

    .field--wide,
    .form__foot {
      grid-column: 1 / -1;
    }
  }

  @media (min-width: 900px) {
    .form {
      grid-column: 1 / 8;
    }

    .contact__aside {
      grid-column: 9 / 13;
    }
  }

  /* =========================================================== 404 */

  .lost {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: 100svh;
    padding-bottom: var(--space-6);
    overflow: hidden;
  }

  .lost__light {
    position: absolute;
    inset: -20%;
    background: linear-gradient(112deg, transparent 46%, rgb(244 236 220 / 0.85) 48.5%, rgb(244 236 220 / 0.18) 50.5%, transparent 56%);
    opacity: 0.7;
  }

  .lost__text {
    position: relative;
    display: grid;
    gap: var(--space-3);
  }
}

/* ---------- Sun path: the one drawn figure in the statement ---------- */

@layer pages {
  .sunpath {
    margin-top: var(--space-5);
    max-width: 34rem;
    color: var(--mute);
  }

  .sunpath svg {
    width: 100%;
    height: auto;
    overflow: visible;
    fill: none;
    stroke: currentColor;
  }

  .sunpath__ground {
    stroke-width: 1;
    opacity: 0.5;
  }

  .sunpath__arc {
    stroke-width: 1;
    stroke-dasharray: 2 7;
    opacity: 0.8;
  }

  .sunpath__ray {
    stroke: var(--light);
    stroke-width: 1;
    opacity: 0.35;
  }

  .sunpath__sun {
    fill: var(--light);
    stroke: none;
    filter: drop-shadow(0 0 10px rgb(244 236 220 / 0.6));
  }

  .sunpath text {
    fill: var(--mute);
    stroke: none;
    font-family: var(--sans);
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }

  @media (min-width: 900px) {
    .sunpath {
      grid-column: 1 / 6;
      grid-row: 2;
      align-self: end;
    }
  }
}