:root {
  --paper: #ede9df;
  --ink: #18211e;
  --muted: #5f655f;
  --silver: #d3d4cf;
  --emerald: #0f7658;
  --acid: #c9f34a;
  --cobalt: #1942ba;
  --amber: #ef9b23;
  --rose: #cf537d;
  --display: "Gloock", Georgia, serif;
  --sans: "DM Sans", Arial, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

.cursor-glow {
  position: fixed;
  width: 22rem;
  height: 22rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201,243,74,.13), transparent 65%);
  pointer-events: none;
  z-index: 0;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity .25s ease;
}

.site-header {
  position: absolute;
  inset: 0 0 auto;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem 3vw;
  border-bottom: 1px solid rgba(24,33,30,.18);
}

.wordmark {
  font: 400 1.25rem/1 var(--display);
  text-decoration: none;
  letter-spacing: -.02em;
}

.signature-mark {
  display: block;
  width: clamp(6.25rem, 10vw, 8rem);
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: .3rem;
  box-shadow: 0 .35rem 1.1rem rgba(24,33,30,.13);
  transition: transform .25s ease, box-shadow .25s ease;
}

.signature-mark:hover,
.signature-mark:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 .55rem 1.4rem rgba(24,33,30,.18);
}

.signature-mark img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

nav { display: flex; gap: clamp(1rem, 3vw, 3rem); }
nav a, .external-links a {
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-decoration: none;
  text-transform: uppercase;
}

nav a { position: relative; }
nav a::after {
  content: "";
  position: absolute;
  height: 2px;
  inset: auto 100% -.45rem 0;
  background: var(--emerald);
  transition: inset .25s ease;
}
nav a:hover::after { inset-right: 0; }

.hero {
  min-height: 100svh;
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  align-items: center;
  position: relative;
  overflow: hidden;
  padding: 8rem 3vw 3rem;
}

.hero-copy { position: relative; z-index: 2; padding: 3rem 3vw 3rem 0; }

.eyebrow, .meta {
  margin: 0 0 1.35rem;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .15em;
  line-height: 1.4;
  text-transform: uppercase;
}

h1, h2, h3 { font-family: var(--display); font-weight: 400; }

h1 {
  margin: 0;
  max-width: 12ch;
  font-size: clamp(3.65rem, 7.3vw, 8.5rem);
  letter-spacing: -.055em;
  line-height: .88;
}

h1 em { color: var(--emerald); font-weight: 400; }

.hero-intro {
  max-width: 38rem;
  margin: 2.5rem 0 2rem 20%;
  font-size: clamp(1.05rem, 1.45vw, 1.35rem);
  line-height: 1.55;
}

.text-link {
  display: inline-flex;
  gap: 1rem;
  margin-left: 20%;
  padding-bottom: .35rem;
  border-bottom: 1px solid;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-decoration: none;
  text-transform: uppercase;
}

.hero-photo {
  position: relative;
  height: min(75vh, 780px);
  min-height: 34rem;
  margin: 0;
  padding: 0 8% 0 13%;
}

.hero-photo::before {
  content: "";
  position: absolute;
  inset: 6% 1% 7% 22%;
  background: var(--silver);
  transform: rotate(3deg);
}

.hero-photo .image-button {
  height: calc(100% - 3.2rem);
  box-shadow: 0 2.4rem 5rem rgba(24,33,30,.22);
}

.hero-photo img { object-position: center 43%; }

.hero-photo figcaption,
.artwork-photo figcaption {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin: 0;
  padding-top: .9rem;
  font-size: .65rem;
  font-weight: 600;
  letter-spacing: .11em;
  line-height: 1.4;
  text-transform: uppercase;
}

.image-button {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  overflow: hidden;
  border: 0;
  color: inherit;
  background: transparent;
  cursor: zoom-in;
}

.image-button img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .65s cubic-bezier(.2,.65,.2,1), filter .35s ease;
}

.image-button:hover img { transform: scale(1.025); filter: saturate(1.07); }
.image-button:focus-visible, .lightbox-close:focus-visible, a:focus-visible { outline: 3px solid var(--acid); outline-offset: 4px; }

.view-label {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  padding: .72rem .9rem;
  color: var(--ink);
  background: rgba(237,233,223,.92);
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.hero-index {
  position: absolute;
  right: 3vw; bottom: 2rem;
  margin: 0;
  font-size: .65rem;
  letter-spacing: .12em;
  line-height: 1.4;
  text-transform: uppercase;
}

.archive { padding: 8rem 3vw 10rem; background: var(--ink); color: var(--paper); }

.section-heading {
  display: grid;
  grid-template-columns: 1fr 1.3fr 1fr;
  align-items: end;
  gap: 3rem;
  padding-bottom: 5rem;
}
.section-heading .eyebrow { align-self: start; }
.section-heading h2, .practice h2 {
  margin: 0;
  font-size: clamp(3rem, 6vw, 7rem);
  letter-spacing: -.045em;
  line-height: .92;
}
.section-heading > p:last-child { margin: 0; max-width: 29rem; line-height: 1.65; color: #b6b9b3; }

.feature-card {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(18rem, .85fr);
  gap: clamp(2rem, 5vw, 7rem);
  align-items: center;
  min-height: 70vh;
  padding: 5rem 0;
  border-top: 1px solid rgba(237,233,223,.22);
}
.feature-card--origin { grid-template-columns: minmax(0, 1.8fr) minmax(16rem, .7fr); }
.feature-card--reverse { grid-template-columns: minmax(18rem, .85fr) minmax(0, 1.65fr); }
.feature-card--reverse .card-visual { order: 2; }
.feature-card--stack { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; align-items: start; }
.card-copy h3 { margin: 0 0 1.4rem; font-size: clamp(2.8rem, 5vw, 5.8rem); letter-spacing: -.04em; line-height: .96; }
.card-copy > p:not(.meta, .materials) { font-size: 1.05rem; line-height: 1.7; color: #c7c9c4; }
.materials { margin-top: 2rem; font-size: .73rem; font-weight: 600; letter-spacing: .11em; text-transform: uppercase; color: var(--acid); }
.swaledale-text p { margin: 0 0 1rem; font-size: 1.05rem; line-height: 1.7; color: #c7c9c4; }
.swaledale-facts .materials { margin-top: 2rem; white-space: nowrap; }
.created-date { margin: .65rem 0 0; color: var(--acid); font-size: .73rem; font-weight: 600; letter-spacing: .11em; text-transform: uppercase; }

.stage-list { margin: 2rem 0 0; padding: 0; list-style: none; border-top: 1px solid rgba(237,233,223,.2); }
.stage-list li { display: grid; grid-template-columns: 2.2rem 1fr; gap: .7rem; padding: .75rem 0; border-bottom: 1px solid rgba(237,233,223,.16); color: #c7c9c4; font-size: .82rem; letter-spacing: .04em; }
.stage-list span { color: var(--acid); font-weight: 600; }

.card-visual { position: relative; min-height: 34rem; margin: 0; }
.artwork-photo { display: grid; grid-template-rows: minmax(0, 1fr) auto; overflow: visible; background: transparent; }
.artwork-photo > .image-button { min-height: 0; }
.artwork-photo figcaption { color: #aeb3ac; }
.visual-number {
  position: absolute;
  left: 1.2rem;
  bottom: 3.1rem;
  z-index: 3;
  width: 3.2rem;
  height: 3.2rem;
  display: grid;
  place-items: center;
  color: var(--ink);
  background: var(--acid);
  font: 1.4rem/1 var(--display);
}

.image-stage-number {
  position: absolute;
  bottom: .55rem;
  left: .55rem;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 2.05rem;
  height: 2.05rem;
  color: var(--ink);
  background: var(--acid);
  font: .9rem/1 var(--display);
}

.origin-photo .image-button { background: #081916; }
.origin-photo img { object-position: center; }

.journey-grid {
  grid-template-columns: minmax(0, 1.85fr) minmax(10rem, 1.15fr);
  grid-template-rows: repeat(2, minmax(0, 1fr)) auto;
  gap: .55rem;
}
.journey-grid .journey-origin { grid-row: 1 / 3; }
.journey-grid .journey-origin-02 img { object-position: 25% center; }
.journey-grid .journey-origin-07 img { object-position: 37.5% center; }
.journey-grid figcaption { grid-column: 1 / -1; }

.emerald-pair {
  grid-template-columns: 1.15fr .85fr;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: .7rem;
}
.emerald-pair .image-button { background: #dfddd7; }
.emerald-pair .image-button:nth-child(2) img { object-position: center; }
.emerald-pair figcaption { grid-column: 1 / -1; }

.swaledale-grid {
  grid-template-columns: minmax(0, 1.65fr) repeat(2, minmax(0, 1fr));
  grid-template-rows: auto auto;
  column-gap: .3rem;
  row-gap: 0;
  align-items: start;
  min-height: 0;
}
.swaledale-grid .image-button { height: auto; background: transparent; }
.swaledale-grid .journey-origin { grid-row: auto; }
.swaledale-grid .image-button img { width: 100%; height: auto; object-fit: contain; object-position: center; }
.swaledale-grid figcaption { grid-column: 1 / -1; }

.process-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: minmax(0, 1fr) auto;
  gap: .55rem;
}
.process-grid figcaption { grid-column: 1 / -1; }
.process-grid .image-button { min-height: 30rem; }
.process-grid .image-button:nth-child(2) { transform: translateY(1.4rem); }
.process-grid .image-button:nth-child(3) { transform: translateY(-1.2rem); }
.process-grid .image-button:nth-child(4) { transform: translateY(.7rem); }

.lightbox {
  width: min(92vw, 1100px);
  max-width: none;
  height: min(92vh, 900px);
  max-height: none;
  padding: 3rem 1.5rem 1.2rem;
  border: 0;
  color: var(--paper);
  background: #111714;
}
.lightbox::backdrop { background: rgba(5,8,7,.86); backdrop-filter: blur(8px); }
.lightbox img { display: block; width: 100%; height: calc(100% - 2.5rem); object-fit: contain; }
.lightbox p { margin: .8rem 0 0; font-size: .68rem; letter-spacing: .1em; text-align: center; text-transform: uppercase; }
.lightbox-close { position: absolute; top: .8rem; right: 1rem; border: 0; color: var(--paper); background: transparent; font: 600 .7rem/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }

.catalogue { padding: 9rem 3vw; background: #d7d8d2; }
.catalogue-heading { display: grid; grid-template-columns: 1.5fr 1fr; gap: 4rem; align-items: end; padding-bottom: 4rem; border-bottom: 1px solid rgba(24,33,30,.25); }
.catalogue-heading h2 { margin: 0; max-width: 11ch; font-size: clamp(3.5rem, 7vw, 8rem); letter-spacing: -.05em; line-height: .9; }
.catalogue-heading > p { max-width: 34rem; margin: 0; line-height: 1.7; }
.archive-controls { display: flex; flex-wrap: wrap; gap: .55rem; padding: 2rem 0; }
.archive-filter { padding: .7rem 1rem; border: 1px solid rgba(24,33,30,.35); border-radius: 999px; color: var(--ink); background: transparent; font: 600 .7rem/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.archive-filter:hover, .archive-filter.is-active { color: var(--paper); background: var(--ink); }
.archive-filter:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible { outline: 3px solid var(--acid); outline-offset: 3px; }
.archive-records { border-top: 1px solid rgba(24,33,30,.25); }
.archive-record { display: grid; grid-template-columns: clamp(8rem, 16vw, 15rem) 1fr; gap: clamp(1.5rem, 4vw, 4rem); align-items: center; min-height: 15rem; padding: 1.2rem 0; border-bottom: 1px solid rgba(24,33,30,.25); }
.archive-record[hidden] { display: none; }
.record-image { aspect-ratio: 4 / 3; background: #bec1bb; }
.archive-record h3 { margin: .2rem 0 .7rem; font-size: clamp(1.8rem, 3.3vw, 3.6rem); letter-spacing: -.035em; line-height: 1; }
.archive-record p { max-width: 48rem; margin: 0; line-height: 1.55; }
.record-number, .record-meta { font-size: .68rem; font-weight: 600; letter-spacing: .11em; text-transform: uppercase; }
.record-number { color: var(--emerald); }
.record-meta { margin-top: .9rem !important; color: var(--muted); }
.record-triptych { display: grid; gap: .35rem; height: 13rem; overflow: hidden; }
.record-triptych { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(2, minmax(0, 1fr)); }
.record-triptych .record-image:first-child { grid-row: 1 / 3; }
.record-triptych .record-image { min-height: 0; }
.record-triptych img { object-position: center; }
.record-quartet { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: .35rem; height: 13rem; overflow: hidden; }
.record-quartet .record-image { min-height: 0; }
.record-quartet img { object-position: center; }
.record-image--listing {
  aspect-ratio: 3 / 4;
  background: #e8e6df;
}
.record-image--listing img { object-fit: cover; }
.record-image--night img { object-position: center 38%; }
.record-image--swift-children-origin img { object-position: 25% center; }
.record-image--rotate-ccw img { transform: rotate(-90deg) scale(1.34); }
.record-image--rotate-ccw:hover img { transform: rotate(-90deg) scale(1.37); }
.catalogue-note { max-width: 44rem; margin: 3rem 0 0 auto; line-height: 1.65; }

.practice { padding: 9rem 3vw 3rem; }
.practice-statement { display: grid; grid-template-columns: 1fr 2.5fr; gap: 4rem; }
.practice-statement h2 { max-width: 13ch; }
.practice-detail { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3rem; max-width: 62rem; margin: 5rem 0 6rem 26%; }
.practice-detail p { margin: 0; font-size: 1.05rem; line-height: 1.75; }

.process-line { display: grid; grid-template-columns: auto 1fr auto 1fr auto 1fr auto; align-items: center; gap: 1.2rem; padding: 2.2rem 0; border-block: 1px solid rgba(24,33,30,.25); font-size: .68rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.process-line i { display: block; height: 1px; background: var(--ink); opacity: .35; }

.contact-panel { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(3rem, 7vw, 8rem); margin-top: 9rem; padding: clamp(2rem, 6vw, 6rem); color: var(--paper); background: var(--emerald); }
.contact-panel h2 { max-width: none; margin: 0; font-size: clamp(3.8rem, 7vw, 8rem); }
.contact-intro > p:not(.eyebrow) { max-width: 36rem; margin: 2rem 0 3rem; font-size: clamp(1.05rem, 1.4vw, 1.25rem); line-height: 1.6; }
.primary-action { display: inline-flex; justify-content: space-between; gap: 4rem; min-width: min(100%, 22rem); padding: 1.2rem 1.4rem; border: 0; color: var(--ink); background: var(--acid); text-decoration: none; font: 600 .78rem/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; transition: transform .2s ease, background .2s ease; }
.primary-action:hover { transform: translateY(-3px); background: #dafb71; }
.external-links { display: flex; gap: 2rem; margin-top: 3rem; }
.external-links a { padding-bottom: .3rem; border-bottom: 1px solid rgba(237,233,223,.6); }
.enquiry-form { display: grid; gap: 1.15rem; align-content: start; }
.enquiry-form label { display: grid; gap: .55rem; font-size: .68rem; font-weight: 600; letter-spacing: .11em; text-transform: uppercase; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.enquiry-form input, .enquiry-form select, .enquiry-form textarea { width: 100%; border: 1px solid rgba(237,233,223,.55); border-radius: 0; padding: .9rem 1rem; color: var(--paper); background: rgba(24,33,30,.12); font: 400 1rem/1.4 var(--sans); text-transform: none; }
.enquiry-form select { color-scheme: dark; }
.enquiry-form textarea { resize: vertical; }
.enquiry-form input::placeholder { color: rgba(237,233,223,.6); }
.form-note { max-width: 38rem; margin: 0; color: rgba(237,233,223,.78); font-size: .74rem; line-height: 1.55; }

footer { display: grid; grid-template-columns: 1fr auto auto; gap: 3rem; align-items: end; margin-top: 3rem; padding: 2rem 3vw; border-top: 1px solid rgba(24,33,30,.22); }
footer p { margin: 0; font-size: .65rem; letter-spacing: .1em; text-transform: uppercase; }

.reveal { opacity: 0; transform: translateY(2rem); transition: opacity .8s ease, transform .8s ease; }
.reveal.visible { opacity: 1; transform: none; }

@media (max-width: 900px) {
  .site-header { position: absolute; }
  .hero { grid-template-columns: 1fr; padding-top: 7rem; }
  .hero-copy { padding-right: 0; }
  .hero-intro, .text-link { margin-left: 0; }
  .hero-photo { min-height: 34rem; height: 68vh; margin-top: 2rem; padding-inline: 16%; }
  .section-heading { grid-template-columns: 1fr 1.6fr; }
  .section-heading > p:last-child { grid-column: 2; }
  .feature-card, .feature-card--origin, .feature-card--reverse, .feature-card--stack { grid-template-columns: 1fr; gap: 2.5rem; min-height: auto; }
  .feature-card--reverse .card-visual { order: 0; }
  .card-visual { min-height: 65vw; }
  .process-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(18rem, 1fr)) auto; }
  .process-grid figcaption { grid-column: 1 / -1; }
  .process-grid .image-button { min-height: 0; transform: none !important; }
  .practice-statement { grid-template-columns: 1fr; }
  .practice-detail { margin-left: 0; }
  .catalogue-heading, .contact-panel { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .site-header { padding: 1.25rem 5vw; }
  .signature-mark { width: 5rem; }
  nav { gap: .9rem; }
  nav a { font-size: .62rem; letter-spacing: .08em; }
  .hero, .archive, .catalogue, .practice { padding-left: 5vw; padding-right: 5vw; }
  .hero { padding-top: 7.5rem; }
  h1 { font-size: clamp(3.5rem, 17vw, 5.6rem); }
  .hero-intro { margin-top: 1.7rem; }
  .hero-photo { min-height: 31rem; height: 64vh; padding: 0 10%; }
  .hero-photo::before { inset: 5% 0 8% 19%; }
  .hero-photo figcaption { display: grid; }
  .section-heading { display: block; }
  .section-heading h2 { margin-bottom: 2rem; }
  .feature-card { padding: 3.2rem 0; }
  .card-visual { min-height: 84vw; }
  .journey-grid { min-height: 105vw; grid-template-columns: minmax(0, 1.35fr) minmax(7rem, 1fr); }
  .swaledale-grid { min-height: 0; grid-template-columns: minmax(0, 1.5fr) repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto; }
  .swaledale-facts .materials { white-space: normal; }
  .emerald-pair { grid-template-columns: 1.15fr .85fr; }
  .process-grid { min-height: 175vw; }
  .visual-number { bottom: 3.5rem; }
  .view-label { right: .6rem; bottom: .6rem; padding: .6rem .7rem; }
  .practice { padding-top: 6rem; }
  .practice-detail { grid-template-columns: 1fr; margin: 3rem 0 4rem; }
  .process-line { gap: .55rem; }
  .archive-record { grid-template-columns: 7rem 1fr; gap: 1rem; min-height: 10rem; }
  .archive-record h3 { font-size: 1.7rem; }
  .record-triptych { height: 9rem; }
  .record-quartet { height: 9rem; }
  .contact-panel { margin-top: 6rem; padding: 2rem; }
  .form-row { grid-template-columns: 1fr; }
  .external-links { flex-direction: column; align-items: flex-start; }
  footer { grid-template-columns: 1fr; gap: 1rem; padding: 2rem 5vw; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .cursor-glow { display: none; }
}

/* Preserve the complete edges of the six wood block prints. */
.record-image--block-print { aspect-ratio: 3 / 4; background: transparent; }
.record-image--block-print img { object-fit: contain; }