/* =========================================================================
   Carlos Burnell Miller — artist website
   Design system.

   One paper ground, two type systems, one interruption (the dark field).
   Hierarchy is made with size, space and position. Nothing decorative.
   ========================================================================= */

/* -------------------------------------------------------------------------
   Typefaces — self-hosted, no third-party requests.
   Newsreader (Production Type, OFL) — editorial serif with an optical-size
   axis, so the same face works at caption size and at 10rem.
   Instrument Sans (Rodrigo Fuenzalida / Jeremy Mickel, OFL) — neutral
   grotesque for labels, navigation, metadata and credits.
   ------------------------------------------------------------------------- */

@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/newsreader-latin-standard-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/newsreader-latin-ext-standard-normal.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "Newsreader";
  font-style: italic;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/newsreader-latin-standard-italic.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/instrument-sans-latin-standard-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/instrument-sans-latin-ext-standard-normal.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root {
  color-scheme: light;

  /* ---- colour -------------------------------------------------------- */
  --paper:        #f3f0ea;   /* warm off-white, never pure digital white */
  --paper-deep:   #eae6de;   /* a half-tone below paper, for seams       */
  --ink:          #16150f;   /* warm near-black                          */
  --ink-2:        #55514a;   /* secondary text                           */
  --ink-3:        #6f6960;   /* metadata, captions — 4.8:1 on paper      */
  --rule:         rgba(22, 21, 15, 0.14);
  --rule-soft:    rgba(22, 21, 15, 0.08);

  --field:        #0d0c0a;   /* the dark interruption                    */
  --field-ink:    #efece4;
  --field-ink-2:  #a49d92;
  --field-rule:   rgba(239, 236, 228, 0.22);

  --focus:        #1c635f;   /* deep teal; from the water, not from UI   */
  --focus-light:  #79cfc8;   /* the same hue, for dark grounds           */

  /* ---- type ---------------------------------------------------------- */
  --serif: "Newsreader", "Iowan Old Style", "Palatino Linotype", Palatino,
           "Book Antiqua", Georgia, "Times New Roman", serif;
  --sans:  "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
           Roboto, "Helvetica Neue", Arial, sans-serif;

  /* ---- measure & rhythm ---------------------------------------------- */
  --gutter:    clamp(1.25rem, 5.5vw, 5.5rem);
  --measure:   38rem;          /* reading width                          */
  --wide:      82rem;          /* outer content width                    */

  --space-xs:  clamp(0.75rem, 1.4vw, 1.25rem);
  --space-s:   clamp(1.5rem, 2.6vw, 2.5rem);
  --space-m:   clamp(3rem, 6vw, 6rem);
  --space-l:   clamp(5rem, 11vw, 11rem);
  --space-xl:  clamp(7rem, 16vw, 17rem);

  --nav-h: 4.25rem;
}

/* =========================================================================
   reset & base
   ========================================================================= */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: clamp(1rem, 0.94rem + 0.24vw, 1.1rem);
  line-height: 1.62;
  font-weight: 400;
  letter-spacing: 0.002em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, video { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -0.018em;
  margin: 0;
  font-variation-settings: "opsz" 36;
  text-wrap: balance;
}

p { margin: 0 0 1.15em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 1px;
}
/* the focus ring has to be visible on the dark grounds too */
.field :focus-visible,
.novel :focus-visible,
.nav--over :focus-visible,
.nav--field :focus-visible,
.hero :focus-visible { outline-color: var(--focus-light); }

::selection { background: rgba(31, 111, 107, 0.18); }

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: var(--paper);
  padding: 0.75rem 1.25rem;
  z-index: 200;
  font: 500 0.8rem/1 var(--sans);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.skip:focus { left: 0; }

/* =========================================================================
   shared primitives
   ========================================================================= */

.wrap {
  width: 100%;
  max-width: var(--wide);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.measure { max-width: var(--measure); }

/* the small uppercase label used for medium, year, section names */
.label {
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0;
  line-height: 1.5;
}
.label--ink { color: var(--ink-2); }

/* the underlined arrow link that ends a section */
.go {
  display: inline-flex;
  align-items: baseline;
  gap: 0.6em;
  font-family: var(--sans);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  padding-block: 0.4em;
  border-bottom: 1px solid var(--rule);
  transition: border-color 220ms ease, color 220ms ease;
}
.go::after {
  content: "\2192";
  font-size: 1.05em;
  transition: transform 240ms cubic-bezier(0.2, 0.7, 0.3, 1);
}
.go:hover { border-bottom-color: var(--ink); }
.go:hover::after { transform: translateX(0.28em); }

.go--light { color: var(--field-ink); border-bottom-color: var(--field-rule); }
.go--light:hover { border-bottom-color: var(--field-ink); }

/* a plain text link inside prose */
.link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
  transition: border-color 200ms ease;
}
.link:hover { border-bottom-color: var(--ink); }

/* hairline section seam */
.seam { border-top: 1px solid var(--rule-soft); }

/* =========================================================================
   navigation
   ========================================================================= */

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  background: transparent;
  transition: background-color 420ms ease, box-shadow 420ms ease,
              color 420ms ease;
}
.nav__in {
  width: 100%;
  max-width: var(--wide);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.nav__mark {
  font-family: var(--sans);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  margin-right: -0.24em;          /* trim the trailing letter-space */
  text-transform: uppercase;
  text-decoration: none;
  color: inherit;
  white-space: nowrap;
}
@media (max-width: 26rem) {
  .nav__mark { font-size: 0.75rem; letter-spacing: 0.15em; margin-right: -0.15em; }
}

.nav__links {
  display: flex;
  gap: clamp(1.25rem, 2.6vw, 2.75rem);
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav__links a {
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  color: inherit;
  opacity: 0.72;
  padding-block: 0.5rem;
  transition: opacity 200ms ease;
}
.nav__links a:hover,
.nav__links a[aria-current] { opacity: 1; }
.nav__links a[aria-current] { box-shadow: 0 1px 0 currentColor; }

/* over a full-bleed hero the nav is light and transparent */
.nav--over { color: #fff; }
.nav--over .nav__mark,
.nav--over .nav__links a { text-shadow: 0 1px 14px rgba(0, 0, 0, 0.45); }

/* once past the hero it settles onto paper */
.nav--settled {
  background: rgba(243, 240, 234, 0.93);
  -webkit-backdrop-filter: saturate(140%) blur(9px);
  backdrop-filter: saturate(140%) blur(9px);
  box-shadow: 0 1px 0 var(--rule-soft);
  color: var(--ink);
}
.nav--settled .nav__mark,
.nav--settled .nav__links a { text-shadow: none; }

/* pages that begin on paper rather than on an image */
.nav--solid { color: var(--ink); }

/* pages that open on the dark field: the navigation stays light until it
   settles onto paper */
.nav--field { color: var(--field-ink); }
.nav--field.nav--settled { color: var(--ink); }

.nav__toggle {
  display: none;
  background: none;
  border: 0;
  padding: 0.6rem 0;
  margin: 0;
  color: inherit;
  font: 500 0.6875rem/1 var(--sans);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
}

.menu {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: var(--paper);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--nav-h) var(--gutter) var(--space-m);
  opacity: 0;
  visibility: hidden;
  /* visibility flips at the END of the close, but at the START of the open,
     so the panel is focusable the moment it is asked for */
  transition: opacity 280ms ease, visibility 0s linear 280ms;
}
.menu[data-open="true"] {
  opacity: 1;
  visibility: visible;
  transition: opacity 280ms ease, visibility 0s linear 0s;
}
.menu ul { list-style: none; margin: 0; padding: 0; }
.menu li + li { margin-top: 0.15em; }
.menu a {
  font-family: var(--serif);
  font-size: clamp(2.25rem, 11vw, 3.75rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-decoration: none;
  color: var(--ink);
  display: block;
}
.menu__forms {
  margin-top: var(--space-s);
  color: var(--ink-3);
}

@media (max-width: 45rem) {
  .nav__links { display: none; }
  .nav__toggle { display: block; }
}

/* =========================================================================
   hero
   ========================================================================= */

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

   The photograph is shown whole. On a wide screen the section is capped to
   the width its own aspect ratio needs to fill the viewport height, so the
   frame fills the screen without a single pixel being cropped and without a
   scrim, an overlay or any grading laid over it. Below 34rem a separately
   prepared square crop is served instead — a 1.69 frame becomes a 290px band
   on a phone otherwise — and it keeps the man, the runner, the seawall and
   the tower.
   ------------------------------------------------------------------------- */

.hero { position: relative; width: 100%; background: var(--paper); }

.hero--plate {
  margin-top: var(--nav-h);
  max-width: calc((100svh - var(--nav-h)) * var(--hero-ratio, 1.6));
  margin-inline: auto;
}
.hero--plate img { width: 100%; height: auto; }

@media (max-width: 34rem) {
  .hero--plate { max-width: none; }
}

/* the overlay treatment, kept available but not in use */
.hero--overlay {
  height: 100svh;
  min-height: 32rem;
  overflow: hidden;
  background: var(--field);
}

.opening {
  padding-block: clamp(2.5rem, 6vw, 5rem) 0;
}
.opening__name {
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(1.05rem, 0.82rem + 1.4vw, 1.7rem);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  margin: 0 -0.3em 0.9em 0;
  line-height: 1.2;
  color: var(--ink);
}
.opening__forms {
  font-family: var(--sans);
  font-size: clamp(0.6875rem, 0.62rem + 0.24vw, 0.8125rem);
  letter-spacing: 0.28em;
  margin: 0 -0.28em 0 0;
  text-transform: uppercase;
  color: var(--ink-2);
}
.hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 45%;
}
.hero__scrim {
  position: absolute;
  inset: 0;
  /* Two jobs. The top band has to carry white navigation over whatever the
     photograph happens to be doing up there — on a pale subject the nav is
     otherwise unreadable — so it is measured in pixels, not percent, and
     tuned to the height of the nav rather than to the image. The bottom
     gradient carries the wordmark. */
  background:
    linear-gradient(to bottom,
      rgba(0, 0, 0, 0.50) 0,
      rgba(0, 0, 0, 0.30) 4.25rem,
      rgba(0, 0, 0, 0) 10rem),
    linear-gradient(to bottom,
      rgba(0, 0, 0, 0) 52%,
      rgba(0, 0, 0, 0.55) 100%);
  pointer-events: none;
}
.hero__title {
  position: absolute;
  left: 0; right: 0;
  bottom: clamp(2.25rem, 6vh, 4.5rem);
  color: #fff;
}
.hero__name {
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(1.05rem, 0.8rem + 1.5vw, 1.75rem);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  margin: 0 -0.3em 0.85em 0;      /* the -0.3em trims the trailing space */
  line-height: 1.1;
  text-shadow: 0 1px 24px rgba(0, 0, 0, 0.5);
}
.hero__forms {
  font-family: var(--sans);
  font-size: clamp(0.6875rem, 0.62rem + 0.24vw, 0.8125rem);
  font-weight: 400;
  letter-spacing: 0.28em;
  margin-right: -0.28em;
  text-transform: uppercase;
  margin: 0;
  color: rgba(255, 255, 255, 0.86);
  text-shadow: 0 1px 20px rgba(0, 0, 0, 0.55);
}

/* =========================================================================
   statement
   ========================================================================= */

.statement { padding-block: var(--space-xl); }
.statement__text {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2rem, 1.05rem + 4.2vw, 4.9rem);
  line-height: 1.12;
  letter-spacing: -0.024em;
  max-width: 21ch;
  margin: 0;
  font-variation-settings: "opsz" 44;
  text-wrap: balance;
}
.statement__sub {
  margin: var(--space-m) 0 0;
  max-width: 30rem;
  color: var(--ink-2);
  font-size: 0.9375rem;
  line-height: 1.7;
}

/* =========================================================================
   project blocks on the homepage
   ========================================================================= */

.bleed { width: 100%; }
.bleed img { width: 100%; }

.block { padding-block: var(--space-l); }

.block__head { display: grid; gap: 0.9rem; }
.block__title {
  font-size: clamp(2.4rem, 1.3rem + 5.2vw, 5.25rem);
  font-variation-settings: "opsz" 60;
  letter-spacing: -0.026em;
}
.block__byline {
  font-size: 0.875rem;
  color: var(--ink-2);
  margin: 0;
  line-height: 1.6;
}
.block__laurel {
  font-family: var(--sans);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0;
}
.block__body {
  margin-top: var(--space-s);
  max-width: var(--measure);
  font-size: 1.0625rem;
  line-height: 1.68;
  color: var(--ink-2);
}
.block__go { margin-top: var(--space-s); }

/* the dark field — the literary interruption */
.field {
  background: var(--field);
  color: var(--field-ink);
  padding-block: clamp(7rem, 20vw, 17rem);
}
.field .label { color: var(--field-ink-2); }
.field .block__body { color: var(--field-ink-2); }
.field__title {
  font-size: clamp(3rem, 1rem + 11vw, 10.5rem);
  line-height: 0.92;
  letter-spacing: -0.035em;
  font-variation-settings: "opsz" 72;
  margin: 0.28em 0 0.34em;
  font-weight: 300;
}
.field__sub {
  font-family: var(--sans);
  font-size: 0.75rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--field-ink-2);
  margin: 0;
}

/* current work — typographic, no invented imagery */
.current { padding-block: var(--space-xl); }
.current__title {
  font-size: clamp(2.6rem, 1.1rem + 7vw, 6.5rem);
  letter-spacing: -0.03em;
  font-variation-settings: "opsz" 64;
  margin: 0.3em 0 0.45em;
}
.yp-quote { padding-bottom: var(--space-m); }
.current__quote {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.3rem, 1rem + 1.5vw, 2.1rem);
  line-height: 1.32;
  letter-spacing: -0.012em;
  max-width: 24ch;
  margin: var(--space-m) 0 0;
  color: var(--ink);
  font-variation-settings: "opsz" 32;
}

/* =========================================================================
   photographs
   ========================================================================= */

.plates { display: grid; gap: var(--space-l); }

/* -------------------------------------------------------------------------
   Plates.

   A photograph is never cropped to fit a container and never shares a width
   with its neighbours for the sake of tidiness. Each one is placed: a size
   drawn from its own resolution and its role in the sequence, an alignment
   within the column, and its own amount of paper around it. The irregularity
   is the point — it is what makes the page read as a sequence of plates
   rather than as a component repeating.
   ------------------------------------------------------------------------- */

.sequence {
  width: 100%;
  max-width: 94rem;              /* wider than the text column, so a large
                                    plate can genuinely be large */
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.plate { margin: 0; }

.plate picture {
  display: block;
  width: min(100%, var(--plate, 100%));
}
.plate img {
  display: block;
  width: 100%;
  height: auto;                  /* native aspect ratio, always */
  background: var(--paper-deep);
}
.plate figcaption {
  width: min(100%, var(--plate, 100%));
  margin-top: 0.9rem;
  color: var(--ink-3);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
}

/* placement within the column */
.plate--center picture,
.plate--center figcaption { margin-inline: auto; }
.plate--left   picture,
.plate--left   figcaption { margin-inline: 0 auto; }
.plate--right  picture,
.plate--right  figcaption { margin-inline: auto 0; }

/* The paper before each plate. Enough that a photograph is normally the
   only one on screen, and two rhythms so the sequence breathes unevenly
   rather than ticking. */
.plate + .plate { margin-top: clamp(6rem, 14vw, 15rem); }
.plate--beat    { margin-top: clamp(9rem, 23vw, 25rem) !important; }

@media (max-width: 48rem) {
  /* On a phone the pixel widths stop meaning anything, but the rhythm
     should not collapse into one column of identical blocks. The sizes
     become proportions of the column instead, so a large plate still
     reads as large and an intimate one still reads as intimate — and the
     left/right placement is kept. */
  .plate picture, .plate figcaption { width: 100%; }
  .plate[data-scale="medium"]   picture,
  .plate[data-scale="medium"]   figcaption { width: 94%; }
  .plate[data-scale="small"]    picture,
  .plate[data-scale="small"]    figcaption { width: 84%; }
  .plate[data-scale="intimate"] picture,
  .plate[data-scale="intimate"] figcaption { width: 72%; }

  .plate + .plate { margin-top: var(--space-m); }
  .plate--beat    { margin-top: var(--space-l) !important; }
}

.home-plates .plate + .plate { margin-top: var(--space-l); }

/* =========================================================================
   about
   ========================================================================= */

.about { padding-block: var(--space-xl); }
.about__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-m);
  align-items: start;
}
@media (min-width: 60rem) {
  .about__grid { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1fr); gap: clamp(3rem, 6vw, 6rem); }
}
.about__portrait { width: 100%; background: var(--paper-deep); }
.about__facts { margin-top: var(--space-m); }
.about__name {
  font-size: clamp(2.1rem, 1.2rem + 3.6vw, 3.6rem);
  letter-spacing: -0.024em;
  margin-bottom: var(--space-s);
}
.about__body { font-size: 1.0625rem; line-height: 1.72; color: var(--ink-2); max-width: 36rem; }
.about__body strong { font-weight: 500; color: var(--ink); }

/* =========================================================================
   generic interior page header
   ========================================================================= */

.page-head {
  padding-top: calc(var(--nav-h) + var(--space-m));
  padding-bottom: var(--space-m);
}
.page-head__title {
  font-size: clamp(2.6rem, 1.4rem + 5.4vw, 5.5rem);
  letter-spacing: -0.028em;
  font-variation-settings: "opsz" 60;
}
.page-head__intro {
  margin-top: var(--space-s);
  max-width: 34rem;
  color: var(--ink-2);
  font-size: 1.0625rem;
  line-height: 1.7;
}

/* =========================================================================
   work index
   ========================================================================= */

.catalogue { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule-soft); }
.catalogue li { border-bottom: 1px solid var(--rule-soft); }
.catalogue a {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.35rem;
  padding-block: clamp(1.75rem, 4vw, 3rem);
  text-decoration: none;
  color: inherit;
  transition: opacity 220ms ease;
}
@media (min-width: 48rem) {
  .catalogue a {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) 9rem;
    align-items: baseline;
    gap: 2rem;
  }
}
.catalogue__title {
  font-family: var(--serif);
  font-size: clamp(1.9rem, 1.2rem + 3vw, 3.4rem);
  line-height: 1.06;
  letter-spacing: -0.024em;
  font-variation-settings: "opsz" 40;
}
.catalogue a:hover .catalogue__title { text-decoration: underline; text-underline-offset: 0.14em; text-decoration-thickness: 1px; }
.catalogue__status { justify-self: start; }
@media (min-width: 48rem) { .catalogue__status { justify-self: end; text-align: right; } }

/* =========================================================================
   project pages
   ========================================================================= */

.proj-head { padding-block: var(--space-m) var(--space-s); }
.proj-title {
  font-size: clamp(2.6rem, 1.2rem + 6vw, 6rem);
  letter-spacing: -0.03em;
  font-variation-settings: "opsz" 64;
  margin-bottom: 0.4em;
}
.proj-meta { display: grid; gap: 0.4rem; margin-top: 0.4rem; }

.proj-body {
  display: grid;
  gap: var(--space-m);
  grid-template-columns: minmax(0, 1fr);
  padding-block: var(--space-m);
}
@media (min-width: 62rem) {
  .proj-body { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(3rem, 7vw, 7rem); }
}
.proj-synopsis { font-size: 1.0625rem; line-height: 1.72; color: var(--ink-2); max-width: 34rem; }

.facts { display: grid; gap: var(--space-s); align-content: start; }
.facts dl { margin: 0; display: grid; gap: 0.85rem; }
.facts dt {
  font-family: var(--sans);
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 0.15rem;
}
.facts dd { margin: 0 0 0.9rem; font-size: 0.9375rem; line-height: 1.55; }
.facts dd:last-child { margin-bottom: 0; }
.facts__note { font-size: 0.8125rem; line-height: 1.62; color: var(--ink-3); max-width: 30rem; }

.links-row { display: flex; flex-wrap: wrap; gap: 1.5rem 2rem; }

/* The stills run full-bleed at the film's own 2.39:1 — never cropped to a
   web banner shape — with enough paper between them that each one reads as a
   frame chosen from the film rather than as a divider. */
.stills { display: grid; gap: var(--space-l); }
.stills .still { margin: 0; }
.stills .still img { width: 100%; height: auto; }

.embed {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--field);
}
.embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.poster-row {
  display: grid;
  gap: var(--space-m);
  grid-template-columns: minmax(0, 1fr);
  align-items: end;
}
@media (min-width: 52rem) {
  .poster-row { grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); }
}

/* the novel page: typography is the image */
.novel { position: relative; }
.field-sentinel {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.novel {
  background: var(--field);
  color: var(--field-ink);
  padding-top: calc(var(--nav-h) + clamp(4rem, 14vw, 12rem));
  padding-bottom: clamp(5rem, 14vw, 12rem);
}
.novel .label, .novel .facts dt { color: var(--field-ink-2); }
.novel .proj-synopsis, .novel .facts__note { color: var(--field-ink-2); }
.novel .catalogue { border-color: var(--field-rule); }
.novel .link { border-bottom-color: var(--field-rule); }
.novel-title {
  font-size: clamp(3rem, 1rem + 11vw, 10rem);
  line-height: 0.9;
  letter-spacing: -0.035em;
  font-variation-settings: "opsz" 72;
  font-weight: 300;
  margin: 0.22em 0 0.3em;
}

/* =========================================================================
   contact
   ========================================================================= */

.contact { padding-block: 0 var(--space-xl); }
.contact__grid { display: grid; gap: var(--space-m); }
@media (min-width: 56rem) {
  .contact__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(3rem, 7vw, 7rem); }
  .contact__grid--single { grid-template-columns: minmax(0, 1fr); }
}
.contact__addr { font-style: normal; }
.contact__email {
  font-family: var(--serif);
  /* about two thirds of its former size: still the editorial serif, clearly
     subordinate to the Contact heading */
  font-size: clamp(1rem, 0.82rem + 0.95vw, 1.45rem);
  letter-spacing: -0.008em;
  text-decoration: none;
  color: var(--ink);
  /* no standing rule under it; the indication arrives on hover and focus */
  border-bottom: 1px solid transparent;
  transition: border-color 200ms ease;
  word-break: break-word;
}
.contact__email:hover,
.contact__email:focus-visible { border-bottom-color: var(--ink); }

.placeholder {
  font-family: var(--sans);
  font-size: 0.8125rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  border: 1px dashed var(--rule);
  padding: 0.55em 0.9em;
  display: inline-block;
}

.form { display: grid; gap: var(--space-xs); max-width: 30rem; }
.form label {
  font-family: var(--sans);
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  display: block;
  margin-bottom: 0.5rem;
}
.form input, .form textarea {
  width: 100%;
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--rule);
  padding: 0.6rem 0;
  border-radius: 0;
}
.form input:focus, .form textarea:focus { outline: none; border-bottom-color: var(--focus); }
.form textarea { resize: vertical; min-height: 7rem; }
.form button {
  justify-self: start;
  margin-top: var(--space-xs);
  font: 500 0.75rem/1 var(--sans);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--paper);
  background: var(--ink);
  border: 0;
  padding: 1.05em 2.2em;
  cursor: pointer;
  transition: opacity 200ms ease;
}
.form button:hover { opacity: 0.86; }
.form .hp { position: absolute; left: -9999px; }

/* =========================================================================
   footer
   ========================================================================= */

.foot {
  border-top: 1px solid var(--rule-soft);
  padding-block: var(--space-m);
}
.foot__in {
  display: grid;
  gap: var(--space-s);
}
@media (min-width: 48rem) {
  .foot__in {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
  }
}
.foot__mark {
  font-family: var(--sans);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  margin-right: -0.24em;
  text-transform: uppercase;
  margin: 0 0 0.7rem;
}
.foot__links { display: flex; flex-wrap: wrap; gap: 1.5rem; list-style: none; margin: 0; padding: 0; }
.foot__links a {
  font-family: var(--sans);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-2);
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: border-color 200ms ease, color 200ms ease;
}
.foot__links a:hover { color: var(--ink); border-bottom-color: var(--rule); }
.foot__copy { font-size: 0.75rem; color: var(--ink-3); margin: var(--space-s) 0 0; letter-spacing: 0.02em; }

/* =========================================================================
   motion — restrained, and switched off on request
   ========================================================================= */

/* Scoped to .js: with no JavaScript the content is simply there. The class
   is set by an inline script in <head>, so there is no flash. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 900ms cubic-bezier(0.2, 0.6, 0.25, 1),
              transform 900ms cubic-bezier(0.2, 0.6, 0.25, 1);
  will-change: opacity, transform;
}
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* Scoped to .js for the same reason as the reveal above: with no JavaScript
   — or in a print/PDF export, where the load handler may never have run —
   the photographs must simply be there. An image that is merely un-faded is
   a design detail; an image that is invisible is a missing photograph. */
.js .img-fade { opacity: 0; transition: opacity 1100ms ease; }
.js .img-fade.is-loaded { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .js [data-reveal] { opacity: 1; transform: none; }
  .js .img-fade { opacity: 1; }
}

/* =========================================================================
   print — the site should also read on paper
   ========================================================================= */

@media print {
  .nav, .menu, .skip { display: none; }
  body { background: #fff; color: #000; }
  .field, .novel { background: #fff; color: #000; }
  /* no transition may still be running when the page is captured */
  .js [data-reveal],
  .js .img-fade {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
  .embed          { display: none; }   /* an iframe prints as a blank slab */
  figure, .plate, .still { break-inside: avoid; }
}

/* visually hidden, still announced */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}