@layer reset, base, components, designs, responsive;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body, h1, h2, p, figure, dl, dd, ol { margin: 0; }
  button, input { font: inherit; }
  img { display: block; width: 100%; height: auto; }
  a { color: inherit; }
}

@layer base {
  :root {
    color-scheme: light;
    --paper: #f2efe8;
    --ink: #171714;
    --muted: #77746d;
    --rule: color-mix(in srgb, var(--ink) 20%, transparent);
    --accent: #b63a25;
    --serif: Iowan Old Style, Baskerville, "Times New Roman", serif;
    --sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
    --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    --page: clamp(1rem, 3vw, 3.5rem);
  }

  html { background: var(--paper); }
  body {
    min-width: 320px;
    overflow-x: hidden;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--sans);
    -webkit-font-smoothing: antialiased;
  }

  body::selection { color: var(--paper); background: var(--ink); }
  button, a { -webkit-tap-highlight-color: transparent; }
  body.chooser-open { overflow: hidden; }
  button { color: inherit; }
  :focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
  .skip-link {
    position: absolute;
    z-index: 100;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
    color: white;
    background: black;
  }
  .skip-link:focus {
    position: fixed;
    top: .75rem;
    left: .75rem;
    width: auto;
    height: auto;
    padding: .7rem 1rem;
    margin: 0;
    overflow: visible;
    clip: auto;
    clip-path: none;
  }
  .load-line {
    position: fixed;
    z-index: 80;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    transform: scaleX(0);
    transform-origin: left;
    background: var(--accent);
  }
  .is-ready .load-line { transition: transform 80ms linear; }
}

@layer components {
  .site-header {
    position: relative;
    z-index: 20;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 1.2rem var(--page);
    border-bottom: 1px solid var(--rule);
  }
  .brand { display: flex; gap: 1rem; text-decoration: none; }
  .brand-name { font-weight: 700; letter-spacing: -.04em; }
  .brand-role { color: var(--muted); }
  .site-nav { display: flex; align-items: center; gap: clamp(1rem, 3vw, 3rem); }
  .site-nav a, .site-nav button {
    border: 0;
    padding: 0;
    text-decoration: none;
    background: transparent;
    cursor: pointer;
  }
  .site-nav a:hover, .site-nav button:hover { opacity: .55; }
  .design-number { display: inline-grid; place-items: center; min-width: 1.75rem; height: 1.75rem; margin-left: .35rem; border: 1px solid; border-radius: 50%; font-size: .7rem; }

  .intro { padding: clamp(4rem, 9vw, 9rem) var(--page) clamp(3rem, 6vw, 6rem); }
  .eyebrow { display: flex; justify-content: space-between; width: min(28rem, 100%); margin-bottom: 1.8rem; color: var(--muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; }
  .intro h1 { max-width: 9em; font: 400 clamp(3.8rem, 9.5vw, 10rem)/.84 var(--serif); letter-spacing: -.07em; }
  .intro h1 em { font-weight: 400; color: var(--accent); }
  .intro-copy { max-width: 33rem; margin: 3rem 0 1.5rem auto; font: 400 clamp(1rem, 1.5vw, 1.35rem)/1.45 var(--sans); }
  .intro-link { display: flex; justify-content: space-between; max-width: 33rem; margin-left: auto; padding-top: .8rem; border-top: 1px solid var(--ink); text-decoration: none; font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; }

  .featured { position: relative; padding: 0 var(--page); }
  .featured-media { overflow: hidden; min-height: 40vw; background: color-mix(in srgb, var(--ink) 8%, var(--paper)); }
  .featured-open, .photo-open { width: 100%; border: 0; padding: 0; background: transparent; cursor: zoom-in; }
  .featured img { height: min(78vh, 58vw); object-fit: cover; }
  .featured-index { position: absolute; right: calc(var(--page) + 1rem); bottom: 1rem; padding: .55rem .7rem; color: white; background: rgba(0,0,0,.55); font: .65rem var(--mono); backdrop-filter: blur(8px); }

  .work { padding: clamp(6rem, 12vw, 12rem) var(--page); }
  .section-heading { display: grid; grid-template-columns: 1fr 3fr 1fr; align-items: end; gap: 1rem; margin-bottom: clamp(3rem, 7vw, 7rem); padding-bottom: 1rem; border-bottom: 1px solid var(--rule); }
  .section-heading p { color: var(--muted); font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; }
  .section-heading h2 { font: 400 clamp(2rem, 4vw, 4rem)/1 var(--serif); }
  .section-count { text-align: right; }
  .gallery { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(2.5rem, 7vw, 8rem) clamp(1rem, 2vw, 2rem); }
  .photo { grid-column: span 6; }
  .photo:nth-child(4n + 2), .photo:nth-child(4n + 3) { grid-column: span 5; }
  .photo:nth-child(4n + 3) { grid-column-start: 8; }
  .photo-open { overflow: hidden; background: #ddd; }
  .photo img { aspect-ratio: var(--ratio); object-fit: cover; transition: transform 700ms cubic-bezier(.2,.7,.2,1), filter 300ms; }
  .photo-open:hover img { transform: scale(1.015); }
  .photo figcaption { display: grid; grid-template-columns: 2.2rem 1.5fr 1fr; gap: .5rem 1rem; padding-top: .8rem; font-size: .72rem; line-height: 1.3; }
  .photo-number, .photo-series, .photo-meta { color: var(--muted); }
  .photo-title { font-weight: 600; }
  .photo-meta { grid-column: 2 / -1; }

  .about { margin: 0 var(--page); padding: clamp(5rem, 10vw, 10rem) 0; border-top: 1px solid var(--rule); }
  .about-kicker { margin-bottom: 2rem; color: var(--muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; }
  .about h2 { max-width: 11em; font: 400 clamp(3rem, 7vw, 7rem)/.95 var(--serif); letter-spacing: -.045em; }
  .about-body { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(3rem, 10vw, 10rem); max-width: 60rem; margin: 4rem 0 0 auto; }
  .about-body > p { font-size: clamp(1rem, 1.5vw, 1.25rem); line-height: 1.55; }
  .about dl { font-size: .8rem; }
  .about dl div { display: grid; grid-template-columns: 6rem 1fr; padding: .75rem 0; border-top: 1px solid var(--rule); }
  .about dt { color: var(--muted); }

  .site-footer { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1rem; padding: 1.25rem var(--page); border-top: 1px solid var(--rule); font-size: .72rem; }
  .site-footer a { justify-self: end; }

  dialog { max-width: none; border: 0; padding: 0; }
  dialog::backdrop { background: rgba(10, 10, 8, .72); backdrop-filter: blur(9px); }
  .design-dialog { position: fixed; z-index: 100; inset: 0; width: min(76rem, calc(100% - 2rem)); max-height: calc(100vh - 2rem); margin: auto; color: #141411; background: #f3f0e8; box-shadow: 0 0 0 100vmax rgba(10,10,8,.72); }
  .dialog-bar { position: sticky; z-index: 2; top: 0; display: flex; align-items: center; justify-content: space-between; padding: 1.25rem 1.5rem; border-bottom: 1px solid #b8b5ad; background: #f3f0e8; }
  .dialog-bar p { display: flex; gap: 2rem; }
  .dialog-bar span { color: #77746d; }
  .dialog-close { border: 1px solid; border-radius: 2rem; padding: .5rem .8rem; background: transparent; cursor: pointer; }
  .design-list { list-style: none; padding: 0; counter-reset: item; }
  .design-list a { display: grid; grid-template-columns: 4rem 1fr 1.4fr 2rem; align-items: center; gap: 1rem; min-height: 5.5rem; padding: 1rem 1.5rem; border-bottom: 1px solid #ccc8bf; text-decoration: none; }
  .design-list a:hover, .design-list a[aria-current="page"] { color: #f3f0e8; background: #171714; }
  .design-list small { color: #77746d; font-size: .8rem; }
  .design-list a:hover small, .design-list a[aria-current="page"] small { color: #aaa69c; }
  .design-list i { justify-self: end; font-style: normal; }

  .lightbox { inset: 0; width: 100%; height: 100%; color: white; background: #0b0b0b; }
  .lightbox figure { display: grid; grid-template-rows: 1fr auto; height: 100%; padding: 2.5rem 5rem 1rem; }
  .lightbox-media { display: grid; place-items: center; min-height: 0; }
  .lightbox picture, .lightbox img { width: auto; max-width: 100%; height: 100%; max-height: calc(100vh - 7rem); object-fit: contain; background: transparent !important; }
  .lightbox figcaption { display: grid; grid-template-columns: 5rem 1fr 1fr; gap: 1rem; padding-top: 1rem; font-size: .75rem; }
  .lightbox figcaption span:last-child { justify-self: end; color: #999; }
  .lightbox button { position: fixed; z-index: 2; border: 1px solid #555; border-radius: 3rem; color: white; background: rgba(0,0,0,.45); cursor: pointer; }
  .lightbox-close { top: 1rem; right: 1rem; padding: .55rem .8rem; }
  .lightbox-prev, .lightbox-next { top: 50%; width: 2.5rem; height: 2.5rem; }
  .lightbox-prev { left: 1rem; }
  .lightbox-next { right: 1rem; }
  .load-error { grid-column: 1 / -1; padding: 4rem; border: 1px solid var(--rule); }
}

@layer designs {
  /* 01. Editorial */
  body[data-design="01"] .featured { margin-top: 2rem; }
  body[data-design="01"] .photo:nth-child(3n + 1) { transform: translateY(3vw); }

  /* 02. Contact sheet */
  body[data-design="02"] { --paper: #e8e5dc; --ink: #24231f; --muted: #6d675c; --accent: #dd3d25; }
  body[data-design="02"] .site-header { position: sticky; top: 0; align-items: center; background: color-mix(in srgb, var(--paper) 92%, transparent); backdrop-filter: blur(12px); }
  body[data-design="02"] .brand-name { font-family: var(--mono); text-transform: uppercase; letter-spacing: .02em; }
  body[data-design="02"] .intro { display: grid; grid-template-columns: 1fr 2fr 1fr; gap: 2rem; padding-top: 3rem; padding-bottom: 3rem; }
  body[data-design="02"] .eyebrow { display: block; width: auto; }
  body[data-design="02"] .eyebrow span { display: block; margin-top: .4rem; }
  body[data-design="02"] .intro h1 { max-width: 14em; font: 500 clamp(2.5rem, 5vw, 5rem)/.95 var(--sans); text-transform: uppercase; letter-spacing: -.06em; }
  body[data-design="02"] .intro h1 em { font-style: normal; }
  body[data-design="02"] .intro-copy { margin: 0; align-self: end; font-size: .8rem; }
  body[data-design="02"] .intro-link, body[data-design="02"] .featured { display: none; }
  body[data-design="02"] .work { padding-top: 2rem; }
  body[data-design="02"] .section-heading { grid-template-columns: 1fr 1fr 1fr; margin-bottom: 1.25rem; }
  body[data-design="02"] .section-heading h2 { font: 700 1rem var(--mono); text-align: center; text-transform: uppercase; }
  body[data-design="02"] .gallery { grid-template-columns: repeat(4, 1fr); gap: 2.5rem 1rem; }
  body[data-design="02"] .photo, body[data-design="02"] .photo:nth-child(n) { grid-column: auto; transform: none; }
  body[data-design="02"] .photo-open { padding: .45rem; border: 1px solid #bdb8ac; background: #f3f0e8; box-shadow: 0 2px 4px rgba(0,0,0,.08); }
  body[data-design="02"] .photo img { aspect-ratio: 1; object-fit: cover; filter: saturate(.85) contrast(.96); }
  body[data-design="02"] .photo figcaption { display: grid; grid-template-columns: auto 1fr; font-family: var(--mono); }
  body[data-design="02"] .photo-series { display: none; }
  body[data-design="02"] .photo-number { color: var(--accent); }
  body[data-design="02"] .photo-meta { grid-column: 2; }

  /* 03. Nocturne */
  body[data-design="03"] { color-scheme: dark; --paper: #0a0a0b; --ink: #efeee9; --muted: #8a8985; --accent: #d6e2ff; }
  body[data-design="03"] .site-header { position: absolute; width: 100%; border-color: rgba(255,255,255,.25); color: white; }
  body[data-design="03"] .intro { position: absolute; z-index: 2; top: 15vh; width: 100%; padding-top: 0; color: white; pointer-events: none; }
  body[data-design="03"] .intro h1 { max-width: 8em; font-size: clamp(4rem, 10vw, 11rem); text-shadow: 0 2px 35px rgba(0,0,0,.35); }
  body[data-design="03"] .intro h1 em { color: white; }
  body[data-design="03"] .intro-copy, body[data-design="03"] .intro-link { color: white; pointer-events: auto; }
  body[data-design="03"] .featured { height: 100svh; padding: 0; }
  body[data-design="03"] .featured::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.45), transparent 65%), linear-gradient(0deg, rgba(0,0,0,.35), transparent 40%); pointer-events: none; }
  body[data-design="03"] .featured-media, body[data-design="03"] .featured img { height: 100%; min-height: 0; }
  body[data-design="03"] .featured-open, body[data-design="03"] .featured picture { display: block; height: 100%; }
  body[data-design="03"] .featured img { filter: brightness(.72) saturate(.75); }
  body[data-design="03"] .featured-index { z-index: 3; }
  body[data-design="03"] .work { padding-top: 10rem; }
  body[data-design="03"] .gallery { gap: 3rem 1.2rem; }
  body[data-design="03"] .photo { grid-column: span 7; }
  body[data-design="03"] .photo:nth-child(even) { grid-column: 7 / span 6; margin-top: 14vw; }
  body[data-design="03"] .photo figcaption { border-top: 1px solid #333; }

  /* 04. White cube */
  body[data-design="04"] { --paper: #fff; --ink: #1f1f1f; --muted: #858585; --accent: #1f1f1f; }
  body[data-design="04"] .site-header { border: 0; }
  body[data-design="04"] .intro { min-height: 70vh; display: grid; align-content: center; justify-items: center; text-align: center; }
  body[data-design="04"] .eyebrow { justify-content: center; gap: 2rem; }
  body[data-design="04"] .intro h1 { max-width: 13em; font-size: clamp(3rem, 7vw, 7rem); line-height: .95; letter-spacing: -.04em; }
  body[data-design="04"] .intro h1 em { color: inherit; }
  body[data-design="04"] .intro-copy { margin: 2rem auto; }
  body[data-design="04"] .intro-link { width: 16rem; margin: 0 auto; }
  body[data-design="04"] .featured { padding: 8vw 14vw; background: #f3f3f1; }
  body[data-design="04"] .featured img { height: auto; max-height: 72vh; object-fit: contain; box-shadow: 0 12px 50px rgba(0,0,0,.11); }
  body[data-design="04"] .work { padding-inline: 12vw; }
  body[data-design="04"] .section-heading { grid-template-columns: 1fr; justify-items: center; text-align: center; border: 0; }
  body[data-design="04"] .section-count { text-align: inherit; }
  body[data-design="04"] .gallery { display: block; }
  body[data-design="04"] .photo { width: min(72rem, 82%); margin: 0 auto 16vw; padding: clamp(1.5rem, 4vw, 4rem); background: #f4f4f2; }
  body[data-design="04"] .photo:nth-child(even) { width: min(52rem, 65%); }
  body[data-design="04"] .photo figcaption { margin-top: 1rem; }

  /* 05. Monograph */
  body[data-design="05"] { --paper: #f6f6f4; --ink: #050505; --muted: #555; --accent: #050505; }
  body[data-design="05"] img { filter: grayscale(1) contrast(1.1); }
  body[data-design="05"] .site-header, body[data-design="05"] .site-footer { font-family: var(--mono); text-transform: uppercase; }
  body[data-design="05"] .intro { display: grid; grid-template-columns: 1fr 4fr; gap: 2rem; min-height: 78vh; align-content: end; border-bottom: 4px solid; }
  body[data-design="05"] .intro h1 { max-width: 10em; font: 800 clamp(3rem, 8vw, 9rem)/.8 var(--sans); text-transform: uppercase; letter-spacing: -.08em; }
  body[data-design="05"] .intro h1 em { color: inherit; font-style: normal; }
  body[data-design="05"] .intro-copy { grid-column: 2; width: 50%; margin: 2rem 0 0; font-family: var(--mono); font-size: .8rem; }
  body[data-design="05"] .intro-link { grid-column: 2; width: 50%; margin: 0; font-family: var(--mono); }
  body[data-design="05"] .featured { padding: 0; }
  body[data-design="05"] .featured img { height: 85vh; }
  body[data-design="05"] .work { padding-inline: 1rem; }
  body[data-design="05"] .section-heading { grid-template-columns: 1fr 2fr 1fr; border-width: 4px; }
  body[data-design="05"] .section-heading h2 { font: 800 clamp(2rem, 5vw, 5rem)/.9 var(--sans); text-transform: uppercase; }
  body[data-design="05"] .gallery { grid-template-columns: repeat(3, 1fr); gap: 4rem 1rem; }
  body[data-design="05"] .photo, body[data-design="05"] .photo:nth-child(n) { grid-column: auto; transform: none; }
  body[data-design="05"] .photo figcaption { display: block; font-family: var(--mono); text-transform: uppercase; }
  body[data-design="05"] .photo figcaption span { display: block; margin-bottom: .25rem; }

  /* 06. Field notes */
  body[data-design="06"] { --paper: #e9dfcd; --ink: #302a21; --muted: #756b5b; --accent: #315e4a; background-image: repeating-linear-gradient(0deg, transparent 0 31px, rgba(72,65,51,.055) 31px 32px); }
  body[data-design="06"] .site-header { margin: 1rem; border: 1px solid var(--ink); background: rgba(233,223,205,.88); }
  body[data-design="06"] .brand-name, body[data-design="06"] .intro h1, body[data-design="06"] .section-heading h2, body[data-design="06"] .about h2 { font-family: "Segoe Print", "Bradley Hand", cursive; }
  body[data-design="06"] .intro { padding-left: 10vw; transform: rotate(-.4deg); }
  body[data-design="06"] .intro h1 { max-width: 11em; font-size: clamp(3.2rem, 8vw, 8rem); line-height: 1; }
  body[data-design="06"] .featured { padding: 2vw 10vw 6vw; transform: rotate(.5deg); }
  body[data-design="06"] .featured-media { padding: 1rem 1rem 3.5rem; background: #f8f1e4; box-shadow: 0 5px 22px rgba(55,43,24,.2); }
  body[data-design="06"] .featured img { height: auto; max-height: 75vh; }
  body[data-design="06"] .gallery { grid-template-columns: repeat(2, 1fr); gap: 8vw 6vw; }
  body[data-design="06"] .photo, body[data-design="06"] .photo:nth-child(n) { grid-column: auto; transform: rotate(calc((var(--i) - 4) * .18deg)); padding: .75rem .75rem 2rem; background: #f8f1e4; box-shadow: 0 4px 14px rgba(55,43,24,.15); }
  body[data-design="06"] .photo figcaption { font-family: var(--mono); }
  body[data-design="06"] .photo-title { font-family: "Segoe Print", "Bradley Hand", cursive; font-size: 1.1rem; }

  /* 07. Horizon */
  body[data-design="07"] { color-scheme: dark; --paper: #12110f; --ink: #eee9df; --muted: #9c978e; --accent: #ef6b44; }
  body[data-design="07"] .site-header { position: fixed; inset: 0 0 auto; color: white; background: linear-gradient(#12110f, transparent); border: 0; }
  body[data-design="07"] .intro { min-height: 65vh; display: grid; align-content: end; padding-bottom: 5rem; }
  body[data-design="07"] .intro h1 { max-width: 14em; font-size: clamp(3rem, 7vw, 7rem); }
  body[data-design="07"] .featured { display: none; }
  body[data-design="07"] .work { padding: 0 0 8rem; }
  body[data-design="07"] .section-heading { margin: 0 var(--page) 2rem; }
  body[data-design="07"] .gallery { display: flex; gap: 1.2rem; overflow-x: auto; padding: 0 var(--page) 2rem; scroll-snap-type: x mandatory; scrollbar-color: var(--accent) #2b2823; }
  body[data-design="07"] .photo, body[data-design="07"] .photo:nth-child(n) { flex: 0 0 min(78vw, 72rem); transform: none; scroll-snap-align: center; }
  body[data-design="07"] .photo-open { height: min(68vh, 48vw); }
  body[data-design="07"] .photo img { height: 100%; aspect-ratio: auto; object-fit: cover; }
  body[data-design="07"] .photo figcaption { grid-template-columns: 3rem 1fr auto; }

  /* 08. Index */
  body[data-design="08"] { --paper: #eaf0ff; --ink: #173eb5; --muted: #5670bf; --accent: #ff3b26; }
  body[data-design="08"] .site-header { position: sticky; top: 0; background: var(--paper); }
  body[data-design="08"] .brand, body[data-design="08"] .site-nav, body[data-design="08"] .intro, body[data-design="08"] .section-heading, body[data-design="08"] .gallery, body[data-design="08"] .site-footer { font-family: var(--mono); }
  body[data-design="08"] .intro { display: grid; grid-template-columns: 1fr 3fr; min-height: 60vh; border-bottom: 1px solid; }
  body[data-design="08"] .intro h1 { font: 400 clamp(3rem, 8vw, 8rem)/.88 var(--sans); letter-spacing: -.07em; }
  body[data-design="08"] .intro h1 em { color: var(--accent); font-style: normal; }
  body[data-design="08"] .intro-copy, body[data-design="08"] .intro-link { grid-column: 2; width: 50%; margin-left: 0; }
  body[data-design="08"] .featured { display: none; }
  body[data-design="08"] .work { padding-top: 3rem; }
  body[data-design="08"] .gallery { display: block; border-top: 1px solid; }
  body[data-design="08"] .photo, body[data-design="08"] .photo:nth-child(n) { position: relative; display: grid; grid-template-columns: 8rem 1fr; min-height: 6rem; border-bottom: 1px solid; transform: none; }
  body[data-design="08"] .photo-open { position: absolute; z-index: 3; top: 50%; right: 3vw; width: min(36vw, 30rem); opacity: 0; transform: translateY(-50%) rotate(2deg); pointer-events: none; box-shadow: 0 12px 35px rgba(23,62,181,.22); }
  body[data-design="08"] .photo:hover .photo-open, body[data-design="08"] .photo:focus-within .photo-open { opacity: 1; }
  body[data-design="08"] .photo figcaption { grid-column: 1 / -1; display: grid; grid-template-columns: 8rem 2fr 1fr 1fr; align-items: center; padding: 0; font-size: .8rem; }
  body[data-design="08"] .photo-meta { grid-column: auto; }

  /* 09. Cinema */
  body[data-design="09"] { color-scheme: dark; --paper: #050505; --ink: #eee; --muted: #999; --accent: #eee; }
  body[data-design="09"] .site-header { position: fixed; top: 0; width: 100%; border: 0; color: white; mix-blend-mode: difference; }
  body[data-design="09"] .intro { min-height: 100svh; display: grid; align-content: center; justify-items: center; text-align: center; }
  body[data-design="09"] .eyebrow { justify-content: center; gap: 2rem; }
  body[data-design="09"] .intro h1 { max-width: 12em; font-size: clamp(3.5rem, 9vw, 9rem); }
  body[data-design="09"] .intro h1 em { color: inherit; }
  body[data-design="09"] .intro-copy { margin: 2rem auto; }
  body[data-design="09"] .intro-link { width: 18rem; margin: 0 auto; }
  body[data-design="09"] .featured, body[data-design="09"] .section-heading { display: none; }
  body[data-design="09"] .work { padding: 0; }
  body[data-design="09"] .gallery { display: block; }
  body[data-design="09"] .photo, body[data-design="09"] .photo:nth-child(n) { position: relative; width: 100%; height: 100svh; transform: none; }
  body[data-design="09"] .photo-open, body[data-design="09"] .photo img { height: 100%; }
  body[data-design="09"] .photo-open picture { display: block; height: 100%; }
  body[data-design="09"] .photo img { aspect-ratio: auto; object-fit: cover; filter: brightness(.75); }
  body[data-design="09"] .photo figcaption { position: absolute; right: var(--page); bottom: 2rem; left: var(--page); z-index: 2; grid-template-columns: 4rem 1fr auto; border-top: 1px solid rgba(255,255,255,.45); color: white; }
  body[data-design="09"] .photo-meta { grid-column: auto; }

  /* 10. Signal */
  body[data-design="10"] { --paper: #f0ef37; --ink: #1529c5; --muted: #1529c5; --accent: #fa371f; }
  body[data-design="10"] .site-header { border-bottom: 4px solid; font-weight: 800; text-transform: uppercase; }
  body[data-design="10"] .design-number { border-radius: 0; background: var(--accent); color: #fff; border: 0; }
  body[data-design="10"] .intro { display: grid; grid-template-columns: 1fr 4fr; min-height: 82vh; align-content: center; }
  body[data-design="10"] .intro h1 { max-width: none; font: 900 clamp(4rem, 11vw, 12rem)/.72 var(--sans); text-transform: uppercase; letter-spacing: -.1em; }
  body[data-design="10"] .intro h1 em { color: var(--accent); font-style: normal; }
  body[data-design="10"] .intro-copy, body[data-design="10"] .intro-link { grid-column: 2; width: 44%; margin-left: 0; font-weight: 700; }
  body[data-design="10"] .featured { padding: 0; border-block: 4px solid; }
  body[data-design="10"] .featured-index { border-radius: 50%; background: var(--accent); }
  body[data-design="10"] .work { padding-inline: 1rem; }
  body[data-design="10"] .section-heading { border-bottom: 4px solid; }
  body[data-design="10"] .section-heading h2 { font: 900 clamp(3rem, 7vw, 7rem)/.8 var(--sans); text-transform: uppercase; }
  body[data-design="10"] .gallery { grid-template-columns: repeat(6, 1fr); gap: 1rem; }
  body[data-design="10"] .photo, body[data-design="10"] .photo:nth-child(n) { grid-column: span 2; transform: none; border: 4px solid; background: var(--paper); }
  body[data-design="10"] .photo:nth-child(4n + 1) { grid-column: span 4; }
  body[data-design="10"] .photo img { filter: saturate(1.25) contrast(1.08); }
  body[data-design="10"] .photo figcaption { padding: .7rem; font-weight: 700; text-transform: uppercase; }
  body[data-design="10"] .about { border-top: 4px solid; }
}

@layer responsive {
  @media (max-width: 760px) {
    .site-header { padding-block: 1rem; }
    .brand-role, .site-nav > a { display: none; }
    .intro { padding-top: 5rem; }
    .intro h1 { font-size: clamp(3.5rem, 18vw, 6.5rem); }
    .intro-copy, .intro-link { margin-left: 0; }
    .featured { padding: 0; }
    .featured img { height: 72svh; }
    .featured-index { right: 1rem; }
    .section-heading { grid-template-columns: 1fr auto; }
    .section-heading h2 { grid-row: 2; grid-column: 1 / -1; }
    .gallery { display: block; }
    .photo, .photo:nth-child(n) { margin-bottom: 4rem; transform: none; }
    .about-body { grid-template-columns: 1fr; }
    .site-footer { grid-template-columns: 1fr auto; }
    .site-footer p:nth-child(2) { display: none; }
    .dialog-bar p span { display: none; }
    .design-list a { grid-template-columns: 2rem 1fr 1rem; min-height: 4.5rem; }
    .design-list small { display: none; }
    .lightbox figure { padding: 4rem .75rem 1rem; }
    .lightbox-media { align-items: center; }
    .lightbox figcaption { grid-template-columns: 3rem 1fr; }
    .lightbox figcaption span:last-child { grid-column: 2; justify-self: start; }
    .lightbox-prev, .lightbox-next { top: auto; bottom: 1rem; }

    body[data-design="02"] .intro,
    body[data-design="05"] .intro,
    body[data-design="08"] .intro,
    body[data-design="10"] .intro { display: block; min-height: 0; }
    body[data-design="02"] .intro-copy,
    body[data-design="05"] .intro-copy,
    body[data-design="05"] .intro-link,
    body[data-design="08"] .intro-copy,
    body[data-design="08"] .intro-link,
    body[data-design="10"] .intro-copy,
    body[data-design="10"] .intro-link { width: 100%; margin-top: 2rem; }
    body[data-design="02"] .gallery,
    body[data-design="05"] .gallery,
    body[data-design="06"] .gallery,
    body[data-design="10"] .gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 3rem .75rem; }
    body[data-design="02"] .photo,
    body[data-design="05"] .photo,
    body[data-design="06"] .photo,
    body[data-design="10"] .photo,
    body[data-design="10"] .photo:nth-child(n) { grid-column: auto; margin: 0; }
    body[data-design="03"] .intro { top: 18vh; }
    body[data-design="03"] .intro-copy { display: none; }
    body[data-design="03"] .gallery { display: block; }
    body[data-design="04"] .photo,
    body[data-design="04"] .photo:nth-child(even) { width: 100%; padding: 1rem; }
    body[data-design="07"] .gallery { display: flex; }
    body[data-design="07"] .photo, body[data-design="07"] .photo:nth-child(n) { flex-basis: 88vw; margin: 0; }
    body[data-design="07"] .photo-open { height: 62svh; }
    body[data-design="08"] .photo, body[data-design="08"] .photo:nth-child(n) { display: block; min-height: 5rem; margin: 0; }
    body[data-design="08"] .photo-open { display: none; }
    body[data-design="08"] .photo figcaption { grid-template-columns: 3rem 1fr; min-height: 5rem; }
    body[data-design="08"] .photo-series, body[data-design="08"] .photo-meta { display: none; }
    body[data-design="09"] .gallery { display: block; }
    body[data-design="09"] .photo, body[data-design="09"] .photo:nth-child(n) { margin: 0; }
    body[data-design="09"] .photo figcaption { grid-template-columns: 3rem 1fr; }
    body[data-design="09"] .photo-series, body[data-design="09"] .photo-meta { display: none; }
  }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
  }
}