@import url("https://fonts.googleapis.com/css2?family=DM+Mono:wght@400&family=EB+Garamond:wght@400;500&family=Inter:wght@400;500&display=swap");

:root {
  --paper: #aaa997;
  --paper-light: #c6c1ad;
  --moss: #596458;
  --deep: #323c35;
  --black: #111310;
  --ink: #171916;
  --pale: #ebe3d2;
  --smoke: #727b75;
  --ember: #c77732;
  --blood: #6f4042;
  --page-pad: clamp(1.35rem, 6vw, 5.5rem);
  --serif: "EB Garamond", Georgia, serif;
  --sans: Inter, Arial, sans-serif;
  --mono: "DM Mono", monospace;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

html.nornwyrd-arriving {
  background: var(--deep);
}

html.nornwyrd-arriving body {
  animation: nornwyrdArrival 3.2s ease both;
}

@keyframes nornwyrdArrival {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.55;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  opacity: 0.15;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 170 170' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.48' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

a {
  color: inherit;
  text-decoration: none;
}

p {
  margin: 0 0 1.45rem;
}

h1,
h2,
h3 {
  margin-top: 0;
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.08;
}

h1 {
  max-width: 15ch;
  font-size: clamp(2.25rem, 5vw, 4.7rem);
}

h2 {
  font-size: clamp(2rem, 4vw, 3.5rem);
}

h3 {
  font-size: clamp(1.45rem, 2.6vw, 2.25rem);
}

.mono,
.eyebrow {
  font-family: var(--mono);
}

.eyebrow {
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.serif {
  font-family: var(--serif);
  font-size: clamp(1.25rem, 2vw, 1.75rem);
}

.site-header {
  position: relative;
  z-index: 50;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 2rem;
  padding: 1.25rem var(--page-pad);
  color: var(--pale);
  background: var(--black);
  border-bottom: 1px solid rgba(235, 227, 210, 0.22);
}

.site-header--empty {
  min-height: 4.625rem;
}

.wordmark {
  font-family: var(--serif);
  font-size: 1.35rem;
  font-weight: 500;
  letter-spacing: 0.08em;
}

.site-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 1.5rem;
}

.site-nav a {
  padding-bottom: 0.2rem;
  border-bottom: 1px solid transparent;
}

.site-nav a:hover,
.site-nav a:focus-visible,
.site-nav a[aria-current="page"] {
  color: var(--ember);
  border-color: currentColor;
}



.origin-page {
  color: var(--pale);
  background:
    radial-gradient(circle at 84% 8%, rgba(199, 119, 50, 0.12), transparent 18%),
    radial-gradient(ellipse at 12% 72%, rgba(17, 19, 16, 0.64), transparent 42%),
    repeating-linear-gradient(89.4deg, transparent 0 58px, rgba(235, 227, 210, 0.014) 59px 60px, transparent 61px 127px),
    repeating-linear-gradient(90.8deg, transparent 0 37px, rgba(235, 227, 210, 0.009) 38px 39px, transparent 40px 83px),
    repeating-linear-gradient(88.7deg, transparent 0 96px, rgba(235, 227, 210, 0.018) 97px, transparent 99px 173px),
    var(--deep);
  background-position: 0 0, 0 0, 7px 0, -23px 0, 41px 0, 0 0;
}

.origin-page main {
  position: relative;
}

.origin-opening {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 0.86fr 1.14fr;
  gap: 7%;
  min-height: 47rem;
  padding: 5rem var(--page-pad) 2.5rem;
  overflow: hidden;
}

.origin-opening::before {
  content: "";
  position: absolute;
  left: calc(41% - 2cm);
  top: calc(46% + 2cm);
  width: 23rem;
  height: 23rem;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(199, 119, 50, 0.2) 0,
    rgba(199, 119, 50, 0.11) 27%,
    rgba(199, 119, 50, 0.04) 51%,
    transparent 72%
  );
  filter: blur(15px);
  transform: translate(-50%, -50%);
}

.origin-title {
  position: relative;
  z-index: 3;
  align-self: start;
  padding-top: 1rem;
}

.origin-title h1 {
  margin: 1rem 0 1.4rem;
}

.date {
  opacity: 0.7;
}

.origin-lead {
  position: relative;
  z-index: 4;
  align-self: end;
  justify-self: start;
  width: 100%;
  max-width: 56rem;
  padding: 0 0 0 clamp(2rem, 6vw, 5rem);
  transform: translateX(-12%);
  color: var(--pale);
  line-height: 1.7;
}

.origin-lead::before {
  content: none;
}

.origin-lead p {
  margin-bottom: 1.9rem;
}

.origin-lead p:nth-child(n + 2) {
  margin-left: clamp(0.75rem, 1.5vw, 1.5rem);
}

.origin-lead p:last-child {
  margin-bottom: 0;
}

.weave-passage {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

.norn-weave {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}


.origin-thread-canvas {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100vh;
  opacity: 0;
  pointer-events: none;
}

.thread-canvas-active > .origin-thread-canvas {
  opacity: 1;
}

.thread-canvas-active > svg {
  visibility: hidden;
}

.thread,
.thread-shadows path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.thread-shadows path {
  stroke: rgba(17, 19, 16, 0.72);
  stroke-width: 5.5;
}

.thread {
  stroke-width: 1.6;
}

.thread-incoming,
.shadow-incoming,
.thread-weave,
.shadow-weave {
  opacity: 0;
}

.thread-past {
  stroke: rgba(235, 227, 210, 0.76);
}

.thread-present {
  stroke: rgba(137, 151, 132, 0.88);
}

.thread-future {
  stroke: rgba(199, 119, 50, 0.84);
}

.origin-process {
  position: relative;
  z-index: 2;
  padding: 1.25rem var(--page-pad) 7rem;
}

.process-fragment {
  position: relative;
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 8%;
  align-items: center;
  width: min(88%, 72rem);
  margin: 0 auto 7rem;
}

.process-fragment.reverse {
  grid-template-columns: 1.22fr 0.78fr;
  margin-bottom: clamp(3.5rem, 6vw, 5rem);
}

.process-fragment.reverse .process-copy {
  order: 2;
}



.evidence-photo,
.pattern-photo,
.note-photo,
.experiment-photo {
  position: relative;
  overflow: hidden;
  background:
    repeating-linear-gradient(31deg, transparent 0 18px, rgba(17, 19, 16, 0.16) 19px 20px),
    var(--smoke);
  box-shadow: 1rem 1.5rem 3rem rgba(17, 19, 16, 0.35);
}



.evidence-photo {
  height: clamp(17rem, 37vw, 27rem);
  clip-path: none;
}

.evidence-photo img {
  filter: saturate(0.42) contrast(1.09);
}


.origin-three-bags-photo img {
  filter: saturate(0.55);
}

.origin-three-bags-photo::after {
  background: none;
}

.evidence-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 48%, rgba(199, 119, 50, 0.16));
}

.evidence-caption {
  position: absolute;
  right: 0;
  bottom: -1.6rem;
  color: rgba(235, 227, 210, 0.7);
}

.origin-close {
  display: flex;
  flex-direction: column;
  gap: clamp(2.5rem, 4vw, 3.75rem);
  width: min(74%, 48rem);
  margin: 0 auto 8rem;
}

.origin-close > p {
  margin-bottom: 0;
}

.origin-close > p:nth-child(2) {
  width: fit-content;
  max-width: 52%;
  margin-left: 48%;
}

.last-line {
  display: table;
  max-width: 100%;
  margin: 0 auto;
  padding: 0.5rem 0;
  text-align: center;
  text-shadow: 0 0 1.8rem rgba(199, 119, 50, 0.48);
}

.origin-results {
  position: relative;
  z-index: 3;
  padding: calc(5rem + 100px) var(--page-pad) 6rem;
  color: var(--black);
  background:
    linear-gradient(180deg, rgba(17, 19, 16, 0.14), transparent 3rem),
    var(--paper);
}



.section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 3rem;
}

.section-heading h2,
.section-heading h3 {
  margin: 0.5rem 0 0;
}



.pattern-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 5vw, 4rem);
}

.pattern-link {
  display: block;
}

.pattern-photo {
  display: block;
  height: clamp(20rem, 42vw, 34rem);
}

.pattern-link:first-child .pattern-photo {
  clip-path: none;
}

.pattern-link:nth-child(2) .pattern-photo {
  clip-path: none;
}

.pattern-photo img {
  filter: saturate(0.68) contrast(1.03);
  transition: transform 0.35s ease, filter 0.35s ease;
}


.origin-pattern-result-link .pattern-photo img {
  object-position: center center;
  transform-origin: center center;
}

.pattern-link:hover img,
.pattern-link:focus-visible img {
  transform: scale(1.025);
  filter: saturate(0.82) contrast(1.05);
}



.origin-names-continuation {
  position: relative;
  z-index: 4;
  min-height: clamp(58rem, 92vw, 78rem);
  padding: clamp(12rem, 19vw, 17rem) var(--page-pad) clamp(10rem, 17vw, 15rem);
  color: var(--pale);
  background:
    linear-gradient(180deg, rgba(17, 19, 16, 0.14), transparent 3rem),
    radial-gradient(circle at 78% 34%, rgba(199, 119, 50, 0.1), transparent 20%),
    radial-gradient(ellipse at 15% 82%, rgba(17, 19, 16, 0.56), transparent 40%),
    repeating-linear-gradient(89.4deg, transparent 0 58px, rgba(235, 227, 210, 0.014) 59px 60px, transparent 61px 127px),
    repeating-linear-gradient(90.8deg, transparent 0 37px, rgba(235, 227, 210, 0.009) 38px 39px, transparent 40px 83px),
    var(--deep);
}

.origin-names-composition {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: repeat(5, auto);
  row-gap: clamp(3.5rem, 7vw, 6.5rem);
  width: min(100%, 78rem);
  margin: 0 auto;
}

.origin-names-copy {
  display: contents;
}

.origin-names-copy p {
  position: relative;
  z-index: 2;
  margin: 0;
  opacity: var(--origin-names-opacity, 1);
  transform: translate3d(
    var(--origin-names-x, 0),
    var(--origin-names-y, 0),
    0
  );
}

.origin-names-text-visual {
  display: block;
}

.origin-names-copy p:nth-child(1) {
  grid-column: 2 / 7;
  grid-row: 1;
  font-size: 1.54em;
  line-height: 1.2;
  text-shadow: 0 0 1.5rem rgba(8, 12, 9, 0.42);
}

.origin-names-copy p:nth-child(2) {
  grid-column: 3 / 8;
  grid-row: 2;
  font-size: 1.48em;
  line-height: 1.25;
  text-shadow: 0 0 1.5rem rgba(8, 12, 9, 0.42);
}

.origin-names-copy p:nth-child(2) .origin-names-text-visual {
  transform: translateY(clamp(-3.5rem, -4.5vw, -2.25rem));
}

.origin-names-copy p:nth-child(3) {
  grid-column: 2 / 6;
  grid-row: 4;
}

.origin-names-copy p:nth-child(4) {
  grid-column: 4 / 8;
  grid-row: 5;
}

.origin-names-copy p:nth-child(4) .origin-names-text-visual {
  transform: translateY(clamp(-3.25rem, -4vw, -2rem));
}

.origin-names-process-figure {
  position: relative;
  grid-column: 8 / 12;
  grid-row: 2 / 4;
  align-self: center;
  height: clamp(18rem, 30vw, 25rem);
  margin: 0;
  overflow: visible;
  background: transparent;
  box-shadow: none;
  opacity: var(--origin-names-object-opacity, 1);
  transform: translate3d(
    var(--origin-names-object-x, 0),
    calc(clamp(1.5rem, 4vw, 4rem) + var(--origin-names-object-y, 0px)),
    0
  ) scale(var(--origin-names-object-scale, 1));
}

.origin-names-process-crop {
  position: absolute;
  top: -3%;
  right: -5%;
  width: 80%;
  height: 80%;
  overflow: hidden;
  background: var(--smoke);
  box-shadow: 0.65rem 0.9rem 1.8rem rgba(17, 19, 16, 0.3);
}

.origin-names-process-image {
  object-position: 50% 34%;
  filter: saturate(0.36) contrast(1.05) brightness(0.74) hue-rotate(4deg);
  transform: scale(1.68);
  transform-origin: 50% 34%;
}



.origin-continuation-weave-passage {
  position: absolute;
  z-index: 1;
  left: 0;
  width: 100%;
  height: 0;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0,
    #000 2rem,
    #000 calc(100% - 3.5rem),
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0,
    #000 2rem,
    #000 calc(100% - 3.5rem),
    transparent 100%
  );
}

.origin-continuation-weave {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.thread-continuation,
.shadow-continuation {
  opacity: 0;
}

.crossing-thread {
  opacity: 0;
  stroke-linecap: butt;
}

.crossing-thread-shadow {
  fill: none;
  opacity: 0;
  stroke: rgba(17, 19, 16, 0.72);
  stroke-width: 5.5;
  stroke-linecap: butt;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}



.origin-third-pattern-figure {
  width: min(48%, 34rem);
  height: clamp(20rem, 42vw, 34rem);
  margin: 0 0 0 18%;
  overflow: hidden;
  background: var(--smoke);
  box-shadow: 1rem 1.5rem 3rem rgba(17, 19, 16, 0.28);
}



.pattern-card {
  min-width: 0;
}

.pattern-origin {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.9rem;
  align-items: baseline;
  margin-bottom: 0.85rem;
  color: rgba(17, 19, 16, 0.72);
}

.pattern-origin:hover,
.pattern-origin:focus-visible {
  color: var(--black);
}

.pattern-open {
  color: inherit;
  border: 0;
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.pattern-image-button {
  display: block;
  width: 100%;
  padding: 0;
}

.pattern-image-button:hover img,
.pattern-image-button:focus-visible img {
  transform: scale(1.025);
  filter: saturate(0.82) contrast(1.05);
}

.pattern-name {
  display: block;
  margin-top: 1rem;
  padding: 0 0 0.2rem;
  font-family: var(--serif);
  font-size: 1.4rem;
  font-weight: 500;
  border-bottom: 1px solid transparent;
}

.pattern-name:hover,
.pattern-name:focus-visible {
  border-color: currentColor;
}

.pattern-meta {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.4rem 1rem;
  padding-top: 1rem;
}

.pattern-meta strong {
  font-family: var(--serif);
  font-size: 1.4rem;
  font-weight: 500;
}

.pattern-detail {
  grid-column: 1 / -1;
  opacity: 0.72;
}

.interior-page {
  min-height: calc(100vh - 8rem);
  padding: 5rem var(--page-pad) 7rem;
  color: var(--black);
  background:
    radial-gradient(circle at 8% 9%, rgba(235, 227, 210, 0.18), transparent 25%),
    repeating-linear-gradient(98deg, transparent 0 43px, rgba(17, 19, 16, 0.05) 44px 45px),
    var(--paper);
}

.contact-page {
  min-height: calc(100vh - 8rem);
  padding-bottom: clamp(8rem, 18vh, 13rem);
  background: var(--paper);
}

.contact-page > .section-heading,
.contact-layout {
  width: min(100%, 42rem);
}

.contact-page > .section-heading {
  margin-bottom: clamp(4rem, 10vh, 7rem);
}

.contact-page > .section-heading h1 {
  margin-bottom: 0;
}

.contact-layout {
  display: block;
}

.contact-form {
  width: 100%;
}

.contact-elsewhere {
  margin-top: clamp(6rem, 14vh, 9rem);
}

.contact-elsewhere h2 {
  margin: 0 0 2rem;
  font-family: var(--serif);
  font-size: clamp(1.35rem, 2vw, 1.65rem);
  font-weight: 400;
  line-height: 1.2;
}

.elsewhere-links {
  display: grid;
  justify-items: start;
  gap: 1rem;
}

.elsewhere-links a {
  color: inherit;
  text-decoration-color: rgba(24, 27, 22, 0.38);
  text-underline-offset: 0.22em;
}

.elsewhere-links a:hover,
.elsewhere-links a:focus-visible {
  color: var(--ember);
  text-decoration-color: currentColor;
}

.contact-field {
  display: block;
  margin-bottom: clamp(2.4rem, 5vw, 3.5rem);
}

.contact-honey {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.contact-field > span {
  display: block;
  margin-bottom: 0.65rem;
  font-size: 0.78rem;
}

.contact-field small {
  font: inherit;
  opacity: 0.62;
}

.contact-field input,
.contact-field textarea {
  width: 100%;
  padding: 0.65rem 0 0.8rem;
  color: var(--black);
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(17, 19, 16, 0.42);
  border-radius: 0;
  font-family: var(--serif);
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  line-height: 1.45;
}

.contact-field input:autofill,
.contact-field textarea:autofill {
  color: var(--black) !important;
  background-color: transparent !important;
  box-shadow: 0 0 0 1000px var(--paper) inset !important;
  caret-color: var(--black);
  filter: none;
}

.contact-field input:-webkit-autofill,
.contact-field input:-webkit-autofill:hover,
.contact-field input:-webkit-autofill:focus,
.contact-field textarea:-webkit-autofill,
.contact-field textarea:-webkit-autofill:hover,
.contact-field textarea:-webkit-autofill:focus {
  color: var(--black) !important;
  background-color: transparent !important;
  box-shadow: 0 0 0 1000px var(--paper) inset !important;
  caret-color: var(--black);
  filter: none;
  -webkit-text-fill-color: var(--black);
}

.contact-field input:-moz-autofill,
.contact-field textarea:-moz-autofill {
  color: var(--black) !important;
  background-color: transparent !important;
  box-shadow: 0 0 0 1000px var(--paper) inset !important;
  caret-color: var(--black);
  filter: none;
}

.contact-field textarea {
  min-height: 10rem;
  resize: vertical;
}

.contact-field--files {
  margin-top: -0.5rem;
  transition: background-color 0.25s ease;
}

.contact-field--files.is-dragging {
  background: rgba(235, 227, 210, 0.28);
}

.contact-field input.contact-files {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.contact-files-control {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  min-height: 2.7rem;
  padding: 0.65rem 0 0.8rem;
  border-bottom: 1px solid rgba(17, 19, 16, 0.42);
}

.contact-files-trigger,
.contact-file-remove {
  padding: 0.15rem 0 0.25rem;
  color: var(--black);
  background: transparent;
  border: 0;
  border-bottom: 1px solid currentColor;
  font-family: var(--sans);
  font-size: 0.82rem;
  cursor: pointer;
}

.contact-files-trigger:hover,
.contact-files-trigger:focus-visible,
.contact-file-remove:hover,
.contact-file-remove:focus-visible {
  color: var(--ember);
}

.contact-files-summary {
  font-size: 0.82rem;
  opacity: 0.62;
}

.contact-files-drop-hint {
  font-size: 0.78rem;
  opacity: 0.62;
}

.contact-file-list {
  display: grid;
  gap: 0.45rem;
  margin: 0.8rem 0 0;
  padding: 0;
  list-style: none;
}

.contact-file-list:empty {
  display: none;
}

.contact-file-list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.78rem;
}

.contact-file-name {
  min-width: 0;
  overflow-wrap: anywhere;
}

.contact-file-remove {
  flex: 0 0 auto;
  font-size: 0.72rem;
}

.contact-file-note {
  display: block;
  margin-top: 0.65rem;
  font-size: 0.72rem;
  opacity: 0.62;
}

.contact-file-error {
  display: block;
  margin-top: 0.35rem;
  color: var(--blood);
  font-size: 0.78rem;
  font-weight: 500;
}

.contact-file-error[hidden] {
  display: none;
}

@media (max-width: 480px) {
  .contact-files-control {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.45rem;
  }
}

.contact-field input:focus,
.contact-field textarea:focus {
  outline: 0;
  border-color: var(--black);
}

.contact-submit {
  padding: 0.2rem 0 0.25rem;
  color: var(--black);
  background: transparent;
  border: 0;
  border-bottom: 1px solid currentColor;
  font: inherit;
  cursor: pointer;
}

.contact-submit:hover,
.contact-submit:focus-visible {
  color: var(--ember);
}

.contact-submit:disabled {
  cursor: wait;
  opacity: 0.5;
}

.contact-result {
  min-height: 1.55em;
  margin: 2.25rem 0 0;
  opacity: 0;
  transition: opacity 0.8s ease;
}

.contact-result.is-visible {
  opacity: 1;
}

.contact-result.is-fading {
  opacity: 0;
}

.patterns-page {
  background: var(--paper);
}

.patterns-page > .section-heading {
  margin-bottom: clamp(7rem, 13vw, 11rem);
}

.archive-origin-group {
  width: min(100%, 92rem);
  margin-inline: auto;
}

.archive-pattern-list {
  display: block;
}

.patterns-page .pattern-entry {
  --entry-width: min(100%, 52rem);
  --image-width: clamp(20rem, 32vw, 31rem);
  width: var(--entry-width);
  margin-bottom: clamp(13rem, 22vw, 19rem);
  scroll-margin-top: clamp(2.5rem, 12vh, 6rem);
}

.pattern-entry-heading {
  width: fit-content;
  max-width: 100%;
  margin-bottom: clamp(1.6rem, 3vw, 2.4rem);
}

.pattern-entry-heading .eyebrow {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.68rem;
  opacity: 0.62;
}

.patterns-page .pattern-image-button {
  width: var(--image-width);
  max-width: 100%;
}

.patterns-page .pattern-photo {
  height: auto;
  aspect-ratio: auto;
  clip-path: none;
  background: transparent;
  box-shadow: none;
}

.patterns-page .pattern-photo img {
  height: auto;
  object-fit: initial;
  object-position: center;
  transform: none;
  filter: none;
}

.patterns-page .pattern-name {
  margin-top: 0;
  font-size: clamp(1.45rem, 2.6vw, 2.1rem);
}

.patterns-page .pattern-detail {
  margin: 0.45rem 0 0;
  font-family: var(--mono);
  font-size: clamp(0.68rem, 1vw, 0.78rem);
  letter-spacing: 0.025em;
  opacity: 0.62;
}

.pattern-direct-download {
  display: inline-block;
  margin-top: clamp(1.6rem, 3vw, 2.4rem);
  padding-bottom: 0.12rem;
  color: var(--black);
  border-bottom: 1px solid rgba(17, 19, 16, 0.62);
}

.pattern-direct-download:hover,
.pattern-direct-download:focus-visible {
  color: var(--ember);
  border-color: currentColor;
}



.patterns-page .pattern-entry--blomi {
  --entry-width: min(78%, 52rem);
  --image-width: clamp(21rem, 33vw, 31rem);
  margin-left: clamp(0rem, 4vw, 4rem);
}

.patterns-page .pattern-entry--blomi .pattern-image-button {
  margin-left: clamp(1.75rem, 8vw, 8rem);
}

.patterns-page .pattern-entry--blomi .pattern-direct-download {
  margin-left: clamp(5rem, 15vw, 13rem);
}

.patterns-page .pattern-entry--augu {
  --entry-width: min(70%, 47rem);
  --image-width: clamp(20rem, 29vw, 28rem);
  margin-right: clamp(0rem, 3vw, 3rem);
  margin-bottom: clamp(3rem, 7vw, 6rem);
  margin-left: auto;
}

.patterns-page .pattern-entry--augu .pattern-entry-heading {
  margin-left: clamp(5rem, 12vw, 10rem);
}

.patterns-page .pattern-entry--augu .pattern-image-button {
  margin-left: 0;
}

.patterns-page .pattern-entry--augu .pattern-direct-download {
  margin-left: clamp(2.5rem, 7vw, 6rem);
}

.patterns-page .pattern-image-button:hover img,
.patterns-page .pattern-image-button:focus-visible img {
  transform: none;
  filter: none;
}



.patterns-page > .section-heading {
  margin-bottom: clamp(5rem, 9vw, 8rem);
}

.pattern-records {
  width: min(100%, 92rem);
  margin-inline: auto;
}

.pattern-record {
  width: min(100%, 88rem);
  margin-bottom: clamp(9rem, 15vw, 14rem);
  background: var(--paper-light);
  scroll-margin-top: clamp(2.5rem, 12vh, 6rem);
}

.pattern-record--augu {
  width: min(94%, 82rem);
  margin-right: clamp(0rem, 2vw, 2rem);
  margin-bottom: clamp(2rem, 5vw, 5rem);
  margin-left: auto;
}

.pattern-record-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.62fr) minmax(20rem, 1fr);
  align-items: start;
}

.pattern-record--augu .pattern-record-layout {
  grid-template-columns: minmax(0, 1.48fr) minmax(20rem, 1fr);
}

.pattern-record-gallery {
  min-width: 0;
  background: var(--deep);
}

.pattern-record-gallery img {
  display: block;
  width: 100%;
  height: auto;
  filter: none;
}

.pattern-record-copy {
  min-width: 0;
  padding: clamp(1.4rem, 3vw, 3rem) clamp(1.5rem, 3vw, 3rem) clamp(2.25rem, 4vw, 3.5rem);
}

.pattern-record-origin {
  display: block;
  width: fit-content;
  margin-bottom: 1rem;
  color: rgba(17, 19, 16, 0.66);
  font-size: 0.62rem;
}

.pattern-record-origin:hover,
.pattern-record-origin:focus-visible {
  color: var(--black);
}

.pattern-record-copy h2 {
  margin-bottom: 1.25rem;
  font-size: clamp(2rem, 3.6vw, 3.25rem);
}

.pattern-record-story {
  max-width: 34rem;
}

.pattern-record-download {
  margin-top: 2.25rem;
}

.pattern-record-downloads {
  margin-top: 2.25rem;
}

.pattern-download-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(0.75rem, 1.5vw, 1.5rem);
  padding: 1rem 0;
  border-top: 1px solid rgba(17, 19, 16, 0.38);
}

.pattern-download-language {
  min-width: 0;
  font-family: var(--serif);
  font-size: 1.2rem;
  line-height: 1.25;
}

.pattern-download-language small {
  font-family: inherit;
  font-size: 0.78em;
}

@media (min-width: 981px) {
  .pattern-records {
    width: 100%;
    max-width: none;
  }

  .pattern-record {
    width: 90vw;
    height: 80vh;
    max-height: 80vh;
    margin-right: auto;
    margin-left: 0;
  }

  .pattern-record--augu {
    width: 88vw;
    margin-right: 0;
    margin-left: auto;
  }

  .pattern-record-layout,
  .pattern-record--augu .pattern-record-layout {
    grid-template-columns: minmax(0, 62fr) minmax(20rem, 38fr);
    grid-template-rows: minmax(0, 1fr);
    height: 100%;
    overflow: hidden;
  }

  .pattern-record-gallery {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    height: 100%;
    overflow: hidden;
  }

  .pattern-record-gallery img {
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 100%;
    object-fit: contain;
  }

  .pattern-record-copy {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
    padding: 1.5rem clamp(1.75rem, 2.6vw, 2.6rem) 2rem;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .pattern-record-copy .pattern-facts {
    margin-top: 1.5rem;
  }

  .pattern-record-copy .pattern-facts div {
    padding-block: 0.55rem;
  }

  .pattern-record-download {
    margin-top: auto;
    padding-top: 1rem;
  }

  .pattern-record-downloads {
    margin-top: auto;
  }
}

@media (min-width: 981px) and (max-height: 780px) {
  .pattern-record-copy {
    padding: 1rem clamp(1.4rem, 2vw, 2rem) 1.2rem;
    font-size: 0.9rem;
  }

  .pattern-record-origin {
    margin-bottom: 0.3rem;
  }

  .pattern-record-copy h2 {
    margin-bottom: 0.4rem;
    font-size: clamp(2rem, 3vw, 2.65rem);
  }

  .pattern-record-story {
    line-height: 1.4;
  }

  .pattern-record-copy .pattern-facts {
    margin-top: 0.6rem;
  }

  .pattern-record-copy .pattern-facts div {
    padding-block: 0.22rem;
  }

  .pattern-record-download {
    margin-top: auto;
    padding-top: 0.5rem;
  }

  .pattern-download-row {
    padding-block: 0.55rem;
  }
}


@media (min-width: 981px) and (max-width: 1700px) {
  .pattern-download-row .buy-pattern {
    flex: 0 0 auto;
    padding-inline: 0.8rem;
    white-space: nowrap;
  }
}













.workbench-page {
  background:
    radial-gradient(ellipse at 82% 14%, rgba(50, 60, 53, 0.16), transparent 28%),
    radial-gradient(ellipse 38% 24% at 18% 37%, rgba(244, 238, 215, 0.045), transparent 74%),
    radial-gradient(ellipse 42% 29% at 73% 68%, rgba(62, 68, 59, 0.022), transparent 76%),
    linear-gradient(
      176deg,
      transparent 0 46.5%,
      rgba(69, 68, 59, 0.009) 48.5%,
      rgba(246, 241, 220, 0.011) 50%,
      transparent 52.5% 100%
    ),
    repeating-linear-gradient(
      101.2deg,
      transparent 0 47px,
      rgba(17, 19, 16, 0.032) 48px,
      transparent 49px 118px
    ),
    repeating-linear-gradient(
      99.8deg,
      transparent 0 82px,
      rgba(17, 19, 16, 0.014) 83px,
      transparent 84px 179px
    ),
    repeating-linear-gradient(
      102.1deg,
      transparent 0 136px,
      rgba(17, 19, 16, 0.009) 137px,
      transparent 138px 251px
    ),
    repeating-linear-gradient(
      100.5deg,
      transparent 0 211px,
      rgba(17, 19, 16, 0.006) 212px,
      transparent 214px 367px
    ),
    var(--paper);
  background-position:
    0 0,
    0 0,
    0 0,
    0 0,
    11px 0,
    -31px 0,
    57px 0,
    19px 0,
    0 0;
}

.note-project {
  position: relative;
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 8%;
  align-items: center;
  width: min(88%, 72rem);
  margin: 0 auto 7rem;
  padding-top: 3.5rem;
  border-top: 1px solid rgba(17, 19, 16, 0.42);
}

.note-project:nth-of-type(even) {
  grid-template-columns: 1.2fr 0.8fr;
}

.note-project:nth-of-type(even) .note-copy {
  order: 2;
}

.note-photo {
  height: clamp(15rem, 31vw, 24rem);
  clip-path: none;
}

.note-photo img {
  filter: saturate(0.7) contrast(1.03) brightness(0.96);
}



.workbench-page .workbench-entry {
  isolation: isolate;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(0.75rem, 1.6vw, 1.4rem);
  border-top-color: rgba(17, 19, 16, 0.19);
}

.workbench-page .workbench-entry .note-copy,
.workbench-page .workbench-entry .note-photo {
  order: 0;
}

.workbench-page .note-photo {
  margin: 0;
  box-shadow: 0.35rem 0.5rem 1.1rem rgba(17, 19, 16, 0.14);
}


.workbench-entry--ridiculously-thick-yarn {
  z-index: 5;
  width: min(82%, 66rem);
  margin-right: auto;
  margin-bottom: clamp(7.4rem, 11.4vw, 9.8rem);
  margin-left: 3%;
  padding-top: clamp(2.75rem, 4.5vw, 3.75rem);
}

.workbench-entry--ridiculously-thick-yarn .note-copy {
  grid-column: 2 / 7;
}

.workbench-entry--ridiculously-thick-yarn .note-photo {
  grid-column: 9 / 13;
  align-self: end;
  width: 100%;
  height: clamp(12.75rem, 20vw, 16.5rem);
  box-shadow: none;
  transform: translateY(clamp(2rem, 3.5vw, 3rem));
}

.workbench-entry--ridiculously-thick-yarn .note-photo img {
  --workbench-photo-colour-filter: saturate(0.71) brightness(0.95) contrast(1);
}


.workbench-entry--three-colours-no-plan {
  z-index: 4;
  width: min(88%, 70rem);
  margin-right: 1%;
  margin-bottom: clamp(8.1rem, 13vw, 11.4rem);
  margin-left: auto;
  padding-top: clamp(2.25rem, 4vw, 3.25rem);
}

.workbench-entry--three-colours-no-plan .note-photo {
  grid-column: 1 / 7;
  width: min(100%, 31rem);
  height: clamp(14rem, 25vw, 19rem);
  box-shadow: 0.35rem 0.55rem 1.3rem rgba(17, 19, 16, 0.12);
  transform: translateY(clamp(0.25rem, 0.8vw, 0.75rem));
}

.workbench-entry--three-colours-no-plan .note-copy {
  grid-column: 8 / 12;
  align-self: end;
  transform: translateY(clamp(-0.75rem, -1vw, -0.25rem));
}

.workbench-entry--three-colours-no-plan .note-photo img {
  --workbench-photo-colour-filter: saturate(0.75) brightness(0.95) contrast(1.01);
}


.workbench-entry--bonfire {
  z-index: 3;
  min-height: clamp(19rem, 29vw, 24rem);
  width: min(76%, 58rem);
  margin-right: auto;
  margin-bottom: clamp(9.5rem, 15.75vw, 13rem);
  margin-left: 12%;
  padding-top: clamp(4rem, 6vw, 5rem);
  border-top-color: rgba(17, 19, 16, 0.13);
}

.workbench-entry--bonfire .note-copy {
  grid-column: 4 / 8;
  align-self: start;
  transform: translateY(clamp(0.5rem, 1vw, 1rem));
}

.workbench-entry--bonfire .note-photo {
  grid-column: 8 / 11;
  align-self: end;
  width: min(112%, 17rem);
  height: clamp(9.25rem, 14.5vw, 12rem);
  box-shadow: none;
  transform: translateY(clamp(1.75rem, 3vw, 2.75rem));
}

.workbench-entry--bonfire .note-photo img {
  --workbench-photo-colour-filter: saturate(0.66) brightness(0.94) contrast(1);
}



.raffia-note {
  display: block;
  width: min(90%, 72rem);
  margin-right: auto;
  margin-bottom: clamp(8.75rem, 13.25vw, 11.5rem);
  margin-left: auto;
  padding-top: clamp(3rem, 5vw, 4.25rem);
  border-top-color: rgba(17, 19, 16, 0.15);
}

.raffia-flow {
  display: block;
}

.raffia-stage {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(0.75rem, 1.6vw, 1.4rem);
  align-items: center;
  width: 100%;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.raffia-stage:last-child {
  margin-bottom: 0;
}

.raffia-stage .note-copy {
  position: relative;
  z-index: 2;
  grid-area: auto;
  grid-column: 1 / 5;
}

.raffia-stage .note-copy p {
  margin-bottom: 1.5rem;
}

.raffia-stage .note-copy p:last-child {
  margin-bottom: 0;
}

.raffia-stage .note-photo {
  grid-area: auto;
  grid-column: 6 / 13;
  justify-self: start;
  width: 100%;
  height: clamp(20rem, 36vw, 27rem);
  aspect-ratio: auto;
  box-shadow: 0.45rem 0.7rem 1.6rem rgba(17, 19, 16, 0.16);
  transform: translateY(clamp(-0.4rem, -0.6vw, -0.15rem));
}

.raffia-stage .note-photo img {
  --workbench-photo-colour-filter: saturate(0.7) brightness(0.95) contrast(1.01) hue-rotate(1deg);
}

.raffia-opening {
  margin-bottom: clamp(1.4rem, 3vw, 2.2rem) !important;
}



.paper-note {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  width: min(82%, 65rem);
  margin-right: auto;
  margin-bottom: 0;
  margin-left: 9%;
  padding-top: clamp(4.25rem, 7vw, 5.75rem);
  border-top-color: rgba(17, 19, 16, 0.16);
}

.paper-note .note-copy {
  grid-column: 1 / 5;
  align-self: center;
  transform: translateY(clamp(-1.25rem, -2vw, -0.5rem));
}

.paper-note .note-photo {
  grid-column: 6 / 11;
  align-self: end;
  width: 82%;
  height: clamp(12.5rem, 21vw, 16rem);
  box-shadow: 0.25rem 0.4rem 1rem rgba(17, 19, 16, 0.1);
  transform: translateY(clamp(3rem, 5vw, 4.5rem));
}

.paper-note .note-photo img {
  --workbench-photo-colour-filter: saturate(0.69) brightness(0.95) contrast(1);
}



.workbench-page .note-photo img {
  filter: grayscale(1) sepia(0.34) hue-rotate(69deg) saturate(0.58) contrast(1.08) brightness(0.8);
  transition: filter 900ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: filter;
}

.workbench-entry--ridiculously-thick-yarn {
  --workbench-photo-start-scale: 3.6;
  --workbench-photo-start-x: -20vw;
  --workbench-copy-start-x: -16vw;
}

.workbench-entry--three-colours-no-plan {
  --workbench-photo-start-scale: 2.6;
  --workbench-photo-start-x: 20vw;
  --workbench-copy-start-x: 16vw;
}

.workbench-entry--bonfire {
  --workbench-photo-start-scale: 4.8;
  --workbench-photo-start-x: -2vw;
  --workbench-copy-start-x: -16vw;
}

.workbench-entry--raffia {
  z-index: 2;
  --workbench-photo-start-scale: 1.95;
  --workbench-photo-start-x: -14vw;
  --workbench-copy-start-x: -16vw;
}

.workbench-entry--paper-again {
  z-index: 1;
  --workbench-photo-start-scale: 3.8;
  --workbench-photo-start-x: 4vw;
  --workbench-copy-start-x: -16vw;
}

.workbench-reveal-ready .workbench-page .workbench-entry .note-photo {
  z-index: 4;
  opacity: 0;
  scale: var(--workbench-photo-start-scale, 1.35);
  translate: var(--workbench-photo-start-x, 0) 0;
  transform-origin: center;
  transition:
    opacity 220ms ease,
    scale 1250ms cubic-bezier(0.22, 1, 0.36, 1),
    translate 1250ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, scale, translate;
}

.workbench-reveal-ready .workbench-page .workbench-entry .note-copy {
  opacity: 0;
  translate: var(--workbench-copy-start-x, -16vw) 0;
  transition:
    opacity 620ms ease,
    translate 900ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, translate;
}

.workbench-reveal-ready .workbench-page .workbench-entry.is-workbench-entry-staged .note-photo,
.workbench-reveal-ready .workbench-page .workbench-entry.is-workbench-entry-revealed .note-photo {
  opacity: 1;
}

.workbench-reveal-ready .workbench-page .workbench-entry.is-workbench-entry-revealed .note-photo {
  z-index: 1;
  scale: 1;
  translate: 0 0;
}

.workbench-reveal-ready .workbench-page .workbench-entry.is-workbench-entry-revealed .note-copy {
  opacity: 1;
  translate: 0 0;
}

.workbench-page .note-photo.is-colour-revealed img {
  filter: var(--workbench-photo-colour-filter);
}

@media (hover: hover) and (pointer: fine) {
  .workbench-page .note-photo:hover img {
    filter: var(--workbench-photo-colour-filter);
  }
}

@media (prefers-reduced-motion: reduce) {
  .workbench-page .note-photo img,
  .workbench-reveal-ready .workbench-page .workbench-entry .note-photo,
  .workbench-reveal-ready .workbench-page .workbench-entry .note-copy {
    transition-duration: 0.01ms;
  }
}



.experiments-page {
  color: var(--pale);
  background:
    radial-gradient(circle at 12% 22%, rgba(199, 119, 50, 0.1), transparent 18%),
    repeating-linear-gradient(93deg, transparent 0 52px, rgba(235, 227, 210, 0.04) 53px 54px),
    var(--deep);
}

.experiments-grid {
  width: min(100%, 74rem);
  margin-inline: auto;
}

.experiment-story {
  width: min(90%, 62rem);
  margin: 0 auto clamp(8rem, 13vw, 11rem);
}

.experiment-story:last-child {
  margin-bottom: 2rem;
}

.experiment-heading {
  margin-bottom: clamp(2.5rem, 4vw, 3.75rem);
}

.experiment-index {
  display: block;
  margin-bottom: 0.8rem;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  opacity: 0.58;
}

.experiment-heading h2 {
  margin: 0;
  font-size: clamp(1.65rem, 3vw, 2.5rem);
  font-weight: 400;
  line-height: 1.15;
}

.experiment-copy,
.observation-note {
  font-size: clamp(0.9rem, 1.4vw, 1.2rem);
  line-height: 1.65;
}

.experiment-copy p,
.observation-note p {
  margin-bottom: 0.85rem;
}

.experiment-opening p:first-child {
  margin-bottom: clamp(1.8rem, 3vw, 2.5rem);
}

.experiment-measure {
  margin-bottom: 1.15rem !important;
}

.experiment-constraint {
  margin-bottom: clamp(2rem, 4vw, 3rem) !important;
}

.experiment-reset {
  margin-bottom: 1.55rem !important;
}

.experiment-resolution {
  margin-top: 1.35rem;
}

.experiment-opening {
  width: min(100%, 30rem);
  margin: 0;
}

.experiment-photo {
  width: min(72%, 42rem);
  height: clamp(15rem, 32vw, 24rem);
  margin: 0;
  box-shadow: 0.35rem 0.55rem 1.25rem rgba(7, 12, 9, 0.18);
  transform: none;
}


.experiments-page .experiment-documentary-image {
  filter: saturate(0.78) contrast(1.05) brightness(0.95);
}

.experiment-question {
  width: min(100%, 32rem);
  margin: 0;
}



.ribbon-experiment {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(0.8rem, 1.8vw, 1.5rem);
  row-gap: clamp(2.25rem, 4vw, 3.5rem);
  width: min(94%, 68rem);
  margin-bottom: clamp(7.5rem, 12.1vw, 10.25rem);
}

.ribbon-experiment .experiment-heading {
  grid-column: 1 / 6;
  grid-row: 1;
  margin-bottom: 0;
}

.ribbon-experiment .experiment-opening {
  grid-column: 2 / 6;
  grid-row: 2;
  align-self: start;
}

.ribbon-experiment > .experiment-photo:first-of-type {
  grid-column: 7 / 13;
  grid-row: 2;
  align-self: start;
  justify-self: end;
  width: min(100%, 36rem);
  height: clamp(17rem, 29vw, 23rem);
  margin-top: clamp(-1.75rem, -2vw, -0.75rem);
}

.ribbon-experiment .experiment-question {
  grid-column: 6 / 11;
  grid-row: 3;
  width: 100%;
  margin-top: clamp(-0.75rem, -1vw, -0.25rem);
}

.ribbon-experiment .experiment-photo:last-child {
  grid-column: 2 / 7;
  grid-row: 4;
  justify-self: start;
  width: min(100%, 28rem);
  height: clamp(11rem, 21vw, 16rem);
  margin: clamp(-0.75rem, -1vw, -0.25rem) 0 0;
  box-shadow: 0.2rem 0.35rem 0.8rem rgba(7, 12, 9, 0.12);
}



.observation-experiment {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: auto auto;
  column-gap: clamp(0.75rem, 1.6vw, 1.25rem);
  row-gap: clamp(1.5rem, 3vw, 2.25rem);
  width: min(72%, 50rem);
  margin-right: 5%;
  margin-bottom: 2rem;
  margin-left: auto;
}

.observation-experiment .experiment-heading {
  grid-column: 1 / 8;
  margin-bottom: 0;
}

.observation-note {
  grid-column: 2 / 7;
  width: 100%;
  margin: 0;
  line-height: 1.62;
}

.observation-note p {
  margin-bottom: 0.65rem;
}

.observation-note p:nth-last-child(2) {
  margin-top: 1.5rem;
}

.observation-note p:last-child {
  margin-top: 0.85rem;
}

.observation-experiment .experiment-photo {
  grid-column: 8 / 13;
  grid-row: 1 / 3;
  align-self: center;
  justify-self: end;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  margin: clamp(1.5rem, 3vw, 2.5rem) 0 0;
  box-shadow: 0.2rem 0.35rem 0.8rem rgba(7, 12, 9, 0.14);
}

.experiment-entry--endless-first-stitch .experiment-photo img {
  object-fit: contain;
  object-position: center;
  transform: none;
}

.site-footer {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.5rem;
  padding: 2rem var(--page-pad);
  color: var(--pale);
  background: var(--black);
  border-top: 1px solid rgba(235, 227, 210, 0.2);
}

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

.site-footer a:hover,
.site-footer a:focus-visible {
  color: var(--ember);
}

.pattern-dialog {
  width: calc(100% - clamp(1rem, 3vw, 2.5rem));
  max-width: 92rem;
  height: calc(100dvh - clamp(1rem, 3vw, 2.5rem));
  max-height: 58rem;
  padding: 0;
  color: var(--black);
  background: var(--paper-light);
  border: 1px solid rgba(235, 227, 210, 0.2);
  box-shadow: 0 2rem 6rem rgba(17, 19, 16, 0.65);
  overflow: hidden;
}

.pattern-dialog::backdrop {
  background: rgba(17, 19, 16, 0.82);
  backdrop-filter: blur(6px);
}

.dialog-close {
  position: sticky;
  z-index: 5;
  top: 0;
  float: right;
  margin: 0 0 0.5rem 1.25rem;
  padding: 0.2rem 0;
  color: rgba(17, 19, 16, 0.68);
  background: transparent;
  border: 0;
  border-bottom: 1px solid transparent;
  cursor: pointer;
}

.dialog-close:hover,
.dialog-close:focus-visible {
  color: var(--black);
  border-color: currentColor;
}

.dialog-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.8fr) minmax(20rem, 1fr);
  height: 100%;
}

.dialog-gallery {
  position: relative;
  min-width: 0;
  background: var(--deep);
  touch-action: pan-y;
}

.dialog-image {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.dialog-image img {
  object-fit: contain;
  filter: none;
}

.gallery-arrow {
  position: absolute;
  top: 50%;
  width: 2.6rem;
  height: 2.6rem;
  padding: 0;
  color: var(--pale);
  background: rgba(17, 19, 16, 0.78);
  border: 1px solid rgba(235, 227, 210, 0.34);
  border-radius: 50%;
  cursor: pointer;
  transform: translateY(-50%);
}

.gallery-previous {
  left: 1rem;
}

.gallery-next {
  right: 1rem;
}

.dialog-copy {
  padding: 0.9rem clamp(1.5rem, 3vw, 3rem) 2.5rem;
  overflow-y: auto;
}

.dialog-origin {
  display: block;
  width: fit-content;
  margin: 0.15rem 0 0.75rem;
  color: rgba(17, 19, 16, 0.66);
  font-size: 0.62rem;
}

.dialog-origin[hidden] {
  display: none;
}

.dialog-origin:hover,
.dialog-origin:focus-visible {
  color: var(--black);
}

.dialog-copy h2 {
  margin-bottom: 1.25rem;
  font-size: clamp(2rem, 3.6vw, 3.25rem);
}

.dialog-story {
  max-width: 34rem;
}

.pattern-facts {
  margin: 2rem 0 0;
}

.pattern-facts div {
  display: grid;
  grid-template-columns: 7rem 1fr;
  gap: 1rem;
  padding: 0.75rem 0;
  border-top: 1px solid rgba(17, 19, 16, 0.28);
}

.pattern-facts dt {
  font-family: var(--mono);
}

.pattern-facts dd {
  margin: 0;
}

.dialog-thumbnails {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.55rem;
  margin-top: 2rem;
}

.dialog-thumbnail {
  aspect-ratio: 1;
  padding: 0;
  overflow: hidden;
  background: var(--deep);
  border: 1px solid transparent;
  cursor: pointer;
  opacity: 0.62;
}

.dialog-thumbnail:hover,
.dialog-thumbnail:focus-visible,
.dialog-thumbnail[aria-current="true"] {
  border-color: var(--black);
  opacity: 1;
}

.dialog-thumbnail img {
  object-fit: cover;
}

.dialog-purchase {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  margin-top: 2.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(17, 19, 16, 0.38);
}

.dialog-price {
  font-family: var(--serif);
  font-size: 1.35rem;
}

.buy-pattern {
  display: inline-block;
  padding: 0.65rem 1rem;
  color: var(--pale);
  background: var(--black);
  border: 1px solid var(--black);
}

.buy-pattern:hover,
.buy-pattern:focus-visible {
  color: var(--black);
  background: transparent;
}

.buy-pattern[aria-disabled="true"] {
  cursor: default;
  opacity: 0.46;
}

.pattern-sequence {
  display: flex;
  justify-content: space-between;
  gap: 1.25rem;
  margin-top: 1.75rem;
}

.pattern-sequence button {
  padding: 0.25rem 0;
  color: rgba(17, 19, 16, 0.7);
  background: transparent;
  border: 0;
  border-bottom: 1px solid transparent;
  cursor: pointer;
}

.pattern-sequence button:hover,
.pattern-sequence button:focus-visible {
  color: var(--black);
  border-color: currentColor;
}

@media (max-width: 980px) {
  .pattern-record,
  .pattern-record--augu {
    width: min(100%, 44rem);
    margin-right: auto;
    margin-left: auto;
  }

  .pattern-record-layout,
  .pattern-record--augu .pattern-record-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .site-header {
    grid-template-columns: 1fr;
    gap: 0.9rem;
  }

  .site-nav {
    justify-content: flex-start;
    gap: 1rem;
  }

  .origin-opening,
  .process-fragment,
  .process-fragment.reverse,
  .note-project,
  .note-project:nth-of-type(even),
  .raffia-flow,
  .pattern-grid,
  .experiments-grid {
    grid-template-columns: 1fr;
  }

  

  .origin-opening {
    min-height: 0;
    padding-top: 3.2rem;
    row-gap: clamp(4.5rem, 18vw, 6rem);
  }

  .origin-opening::before {
    left: calc(50% - 2cm);
    top: calc(48% + 2cm);
    width: 18rem;
    height: 18rem;
  }

  .origin-lead {
    justify-self: start;
    max-width: 36rem;
    padding: 0;
    transform: none;
  }

  .weave-passage {
    margin: 0;
  }

  .process-fragment,
  .process-fragment.reverse,
  .note-project,
  .note-project:nth-of-type(even),
  .raffia-note {
    width: 100%;
  }

  .process-fragment.reverse .process-copy,
  .note-project:nth-of-type(even) .note-copy {
    order: 0;
  }

  .origin-close {
    width: 100%;
  }

  

  .origin-names-continuation {
    min-height: 0;
    padding-top: clamp(10rem, 34vw, 13rem);
    padding-bottom: clamp(7rem, 24vw, 10rem);
    background:
      linear-gradient(180deg, rgba(17, 19, 16, 0.14), transparent 3rem),
      radial-gradient(circle at 78% 34%, rgba(199, 119, 50, 0.1), transparent 20%),
      radial-gradient(ellipse at 15% 82%, rgba(17, 19, 16, 0.56), transparent 40%),
      repeating-linear-gradient(89.4deg, transparent 0 58px, rgba(235, 227, 210, 0.014) 59px 60px, transparent 61px 127px),
      var(--deep);
  }

  .origin-names-composition {
    display: flex;
    flex-direction: column;
    gap: clamp(2.5rem, 10vw, 4rem);
    width: 100%;
  }

  .origin-names-copy {
    display: flex;
    flex-direction: column;
    gap: clamp(2.25rem, 9vw, 3.5rem);
  }

  .origin-names-process-figure {
    width: 72%;
    height: clamp(16rem, 78vw, 21rem);
    margin: clamp(8rem, 35vw, 11rem) 0 0 auto;
    transform: translate3d(
      var(--origin-names-object-x, 0),
      var(--origin-names-object-y, 0),
      0
    ) scale(var(--origin-names-object-scale, 1));
  }

  .origin-names-copy p:nth-child(2) .origin-names-text-visual {
    transform: translateY(-1.4rem);
  }

  .origin-names-copy p:nth-child(4) .origin-names-text-visual {
    transform: translateY(-1.25rem);
  }

  .origin-names-process-crop {
    top: -2%;
    right: -4%;
    width: 82%;
    height: 82%;
  }

  

  .origin-third-pattern-figure {
    width: 86%;
    height: 20rem;
    margin-left: 0;
  }

  

  .workbench-page .workbench-entry {
    grid-template-columns: 1fr;
    min-height: 0;
    width: 100%;
    margin-right: 0;
    margin-left: 0;
    padding-top: 3rem;
    column-gap: 0;
    row-gap: clamp(2.25rem, 9vw, 3.5rem);
  }

  .workbench-page .workbench-entry .note-copy,
  .workbench-page .workbench-entry .note-photo {
    grid-column: 1;
    transform: none;
  }

  .workbench-entry--ridiculously-thick-yarn {
    margin-bottom: 6.5rem;
  }

  .workbench-page .workbench-entry--ridiculously-thick-yarn .note-photo {
    justify-self: end;
    width: 84%;
    height: 13.25rem;
    transform: translateY(0.75rem);
  }

  .workbench-entry--three-colours-no-plan {
    margin-bottom: 8.1rem;
  }

  .workbench-page .workbench-entry--three-colours-no-plan .note-photo {
    justify-self: start;
    width: 84%;
    height: 15rem;
  }

  .workbench-page .workbench-entry--three-colours-no-plan .note-copy {
    transform: translateY(-0.5rem);
  }

  .workbench-entry--bonfire {
    margin-bottom: 9.5rem;
  }

  .workbench-page .workbench-entry--bonfire .note-photo {
    justify-self: end;
    width: 58%;
    height: 9.5rem;
    transform: translateY(0.75rem);
  }

  .workbench-page .workbench-entry--bonfire .note-copy {
    width: 82%;
    margin-left: 8%;
    transform: translateY(0.5rem);
  }

  .raffia-flow {
    display: block;
  }

  .raffia-stage {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    width: 100%;
    margin-bottom: clamp(3rem, 10vw, 4.5rem);
  }

  .workbench-page .raffia-stage .note-photo {
    width: 100%;
    height: 20rem;
    transform: translateY(-0.25rem);
  }

  .paper-note {
    margin-bottom: 0;
  }

  .workbench-page .paper-note .note-photo {
    justify-self: end;
    width: 74%;
    height: 13.5rem;
    transform: translateY(1.5rem);
  }

  .workbench-page .paper-note .note-copy {
    width: 88%;
    transform: translateY(-0.5rem);
  }

  

  

  .experiments-grid {
    width: 100%;
  }

  .experiment-story,
  .observation-experiment {
    width: 100%;
    margin-right: 0;
    margin-bottom: clamp(7rem, 24vw, 10rem);
    margin-left: 0;
  }

  .ribbon-experiment {
    display: block;
    margin-bottom: clamp(6.5rem, 22.5vw, 9.35rem);
  }

  .ribbon-experiment .experiment-heading {
    margin-bottom: 2.75rem;
  }

  .ribbon-experiment .experiment-opening {
    width: 92%;
    margin: 0 0 2.75rem 3%;
  }

  .ribbon-experiment > .experiment-photo:first-of-type {
    width: 91%;
    height: 17rem;
    margin: 0 0 2.75rem auto;
  }

  .ribbon-experiment .experiment-question {
    width: 88%;
    margin: 0 0 2.25rem 7%;
  }

  .ribbon-experiment .experiment-photo:last-child {
    width: 70%;
    height: 12rem;
    margin: 0 0 0 5%;
  }

  .observation-experiment {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    row-gap: 1.75rem;
    width: 94%;
    margin-right: 0;
    margin-bottom: 1rem;
    margin-left: 6%;
  }

  .observation-experiment .experiment-heading,
  .observation-note,
  .observation-experiment .experiment-photo {
    grid-column: 1;
    grid-row: auto;
  }

  .observation-experiment .experiment-heading {
    width: 92%;
  }

  .observation-note {
    width: 84%;
    margin-left: 4%;
  }

  .observation-experiment .experiment-photo {
    justify-self: end;
    width: 72%;
    height: auto;
    aspect-ratio: 4 / 3;
    margin: 0;
  }

  

  .patterns-page > .section-heading {
    margin-bottom: clamp(5rem, 20vw, 7rem);
  }

  .pattern-record,
  .pattern-record--augu {
    width: 100%;
    margin-right: 0;
    margin-left: 0;
  }

  .pattern-record {
    margin-bottom: clamp(7rem, 24vw, 10rem);
  }

  .pattern-record--augu {
    margin-bottom: 1rem;
  }

  .pattern-record-layout,
  .pattern-record--augu .pattern-record-layout {
    grid-template-columns: 1fr;
  }

  .pattern-record-copy {
    padding: 1.5rem 1.35rem 2rem;
  }

  .site-footer {
    display: block;
  }

  .footer-links {
    margin-bottom: 1.25rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  html.nornwyrd-arriving body {
    animation-duration: 0.01ms;
  }

  .pattern-photo img {
    transition: none;
  }

  .contact-result {
    transition-duration: 0.01ms;
  }
}



.origin-world-prologue {
  position: relative;
  z-index: 2;
  height: 400vh;
  color: var(--pale);
  background: #0c100d;
}

.origin-world-stage {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100svh;
  min-height: 38rem;
  overflow: hidden;
  background: #0c100d;
}

.origin-world-canvas,
.origin-world-vignette,
.origin-world-hero-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.origin-world-canvas {
  display: block;
  touch-action: pan-y;
}

.origin-world-hero-frame {
  z-index: 1;
  margin: 0;
  overflow: hidden;
}

.origin-world-hero-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 55%;
  filter: saturate(.66) contrast(1.1) brightness(.66) sepia(.06);
  transform: translate3d(0, var(--origin-world-hero-y, 0px), 0) scale(1.17);
  will-change: transform;
}

.origin-world-vignette {
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(8, 11, 9, 0.48), transparent 23% 100%),
    radial-gradient(ellipse at center, transparent 42%, rgba(7, 10, 8, 0.58) 100%);
  opacity: var(--origin-world-vignette, 0.72);
}

.origin-world-index,
.origin-world-scroll,
.origin-world-title,
.origin-world-fragment {
  position: absolute;
  z-index: 4;
  margin: 0;
  pointer-events: none;
}

.origin-world-title {
  top: clamp(13rem, 36vh, 25rem);
  left: var(--page-pad);
  max-width: min(38rem, 46vw);
  font-family: "Newsreader", Georgia, serif;
  font-size: clamp(4rem, 7.7vw, 8.8rem);
  font-weight: 500;
  line-height: 0.86;
  letter-spacing: -0.045em;
  color: var(--pale);
  text-shadow: 0 0 3rem rgba(8, 11, 9, 0.7);
  opacity: var(--origin-world-title-opacity, 1);
  transform: translate3d(var(--origin-world-text-x, 0), var(--origin-world-text-y, 0), 0);
  will-change: auto;
}

.origin-world-lead {
  position: absolute;
  z-index: 4;
  top: 34%;
  right: 8vw;
  width: min(34rem, 42vw);
  margin: 0;
  font-size: clamp(1.8rem, 3.6vw, 4.2rem);
  line-height: 1.01;
  text-shadow: 0 0 2.2rem rgba(8, 11, 9, .88);
  opacity: var(--origin-world-lead-opacity, 0);
  transform: translate3d(var(--origin-world-lead-x, 16vw), -50%, 0);
  will-change: auto;
}

.origin-world-followup {
  position: absolute;
  z-index: 4;
  top: 69%;
  right: 8vw;
  width: min(34rem, 42vw);
  margin: 0;
  font-size: clamp(1.8rem, 3.6vw, 4.2rem);
  line-height: 1.01;
  text-shadow: 0 0 2.2rem rgba(8, 11, 9, .88);
  opacity: var(--origin-world-followup-opacity, 0);
  transform: translate3d(var(--origin-world-followup-x, 18vw), -50%, 0);
  will-change: auto;
}

.origin-world-index {
  top: clamp(7rem, 15vh, 10rem);
  left: var(--page-pad);
  color: rgba(235, 227, 210, 0.68);
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  opacity: var(--origin-world-index-opacity, 1);
}

.origin-world-scroll {
  right: auto;
  bottom: clamp(2.5rem, 7vh, 5rem);
  left: var(--page-pad);
  color: rgba(235, 227, 210, 0.48);
  font-size: 0.56rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  writing-mode: horizontal-tb;
  opacity: var(--origin-world-scroll-opacity, 1);
}

.origin-world-fragment {
  max-width: min(30rem, 38vw);
  font-size: clamp(1.45rem, 3vw, 3.4rem);
  line-height: 1.04;
  text-shadow: 0 0 2rem rgba(8, 11, 9, 0.72);
  transform: translate3d(var(--origin-world-text-x, 0), var(--origin-world-text-y, 0), 0);
  will-change: auto;
}

.origin-world-prologue.is-scroll-active .origin-world-title,
.origin-world-prologue.is-scroll-active .origin-world-lead,
.origin-world-prologue.is-scroll-active .origin-world-followup,
.origin-world-prologue.is-scroll-active .origin-world-fragment,
.origin-world-prologue.is-scroll-active .origin-world-hero-frame img {
  will-change: transform, opacity;
}

.origin-world-fragment--first {
  top: 52vh;
  right: 8vw;
  opacity: var(--origin-world-first-opacity, 0);
  transform: translate3d(
    calc(var(--origin-world-text-x, 0px) + var(--origin-world-first-x, 0px)),
    var(--origin-world-text-y, 0),
    0
  );
}

.origin-world-fragment--second {
  top: 31vh;
  left: 9vw;
  opacity: var(--origin-world-second-opacity, 0);
  transform: translate3d(
    calc(var(--origin-world-text-x, 0px) + var(--origin-world-second-x, 0px)),
    var(--origin-world-text-y, 0),
    0
  );
}

.origin-world-fragment--third {
  bottom: 15vh;
  left: 34vw;
  opacity: var(--origin-world-third-opacity, 0);
}

.origin-story-root {
  position: relative;
  z-index: 4;
  margin-top: 0;
}

.origin-story-root::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: -18vh;
  right: 0;
  left: 0;
  height: 22vh;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, var(--deep));
}

.origin-image-chapter {
  position: relative;
  z-index: 3;
  height: 450vh;
  color: var(--pale);
  background: var(--deep);
}

.origin-image-chapter-stage {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 38rem;
  overflow: hidden;
  background:
    radial-gradient(circle at 64% 34%, rgba(71, 82, 70, 0.2), transparent 34%),
    var(--deep);
}

.origin-image-thread-canvas {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.origin-image-chapter-frame {
  position: absolute;
  z-index: 2;
  top: var(--origin-image-y, 18vh);
  left: var(--origin-image-x, 6vw);
  width: var(--origin-image-width, 44vw);
  height: var(--origin-image-height, 66vh);
  margin: 0;
  overflow: hidden;
  will-change: auto;
}

.origin-image-chapter-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 58%;
  filter:
    saturate(0.68)
    contrast(1.08)
    brightness(0.8)
    sepia(0.08);
  will-change: auto;
}

.origin-image-chapter-photo--current {
  --origin-photo-blur: var(--origin-image-current-blur, 0px);
  opacity: var(--origin-image-current-opacity, 1);
  transform:
    translate3d(var(--origin-image-current-pan-x, 0vw), 0, 0)
    scale(var(--origin-image-current-scale, 1));
}

.origin-image-chapter-photo--next {
  --origin-photo-blur: var(--origin-image-next-blur, 0px);
  object-position: 50% 55%;
  opacity: var(--origin-image-next-opacity, 0);
  transform: scale(var(--origin-image-next-scale, 3.2));
}

.origin-image-chapter-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(49, 63, 53, 0.16), rgba(8, 12, 9, 0.24));
}

.origin-image-chapter-copy {
  position: absolute;
  z-index: 3;
  max-width: min(30rem, 38vw);
  margin: 0;
  font-size: clamp(1.45rem, 3vw, 3.4rem);
  line-height: 1.04;
  text-shadow: 0 0 2rem rgba(8, 11, 9, 0.72);
  will-change: auto;
}

.origin-image-chapter.is-scroll-active .origin-image-chapter-frame {
  will-change: top, left, width, height;
}

.origin-image-chapter.is-scroll-active .origin-image-chapter-photo,
.origin-image-chapter.is-scroll-active .origin-image-chapter-copy {
  will-change: transform, opacity;
}

.origin-image-chapter-copy--first {
  top: 31vh;
  right: 7vw;
  opacity: var(--origin-image-first-opacity, 1);
  transform: translate3d(var(--origin-image-first-x, 0px), 0, 0);
}

.origin-image-chapter-copy--second {
  top: 31vh;
  left: 7vw;
  opacity: var(--origin-image-second-opacity, 0);
  transform: translate3d(var(--origin-image-second-x, -34vw), 0, 0);
}

@media (max-width: 760px) {
  .origin-world-prologue {
    height: 340svh;
  }

  .origin-story-root {
    margin-top: 0;
  }

  .origin-world-stage {
    min-height: 0;
  }

  .origin-world-index {
    top: 8.5rem;
  }

  .origin-world-title {
    top: 24%;
    max-width: 82vw;
    font-size: clamp(3.35rem, 17vw, 5.7rem);
  }

  .origin-world-lead {
    top: 37%;
    right: var(--page-pad);
    width: 78vw;
    font-size: clamp(1.65rem, 8.5vw, 2.8rem);
  }

  .origin-world-followup {
    top: 69%;
    right: var(--page-pad);
    width: 78vw;
    font-size: clamp(1.65rem, 8.5vw, 2.8rem);
  }

  .origin-world-fragment {
    max-width: 74vw;
    font-size: clamp(1.4rem, 8vw, 2.4rem);
  }

  .origin-world-fragment--first {
    top: 55%;
    right: var(--page-pad);
    left: auto;
  }

  .origin-world-fragment--second {
    top: 34%;
    right: auto;
    left: var(--page-pad);
  }

  .origin-world-fragment--third {
    bottom: 15%;
    left: 18vw;
  }

  .origin-world-scroll {
    display: none;
  }

  .origin-image-chapter {
    height: 390svh;
  }

  .origin-image-chapter-stage {
    min-height: 0;
  }

  .origin-image-chapter-copy {
    max-width: 78vw;
    font-size: clamp(1.4rem, 8vw, 2.4rem);
  }

  .origin-image-chapter-copy--first {
    top: 12%;
    right: auto;
    left: var(--page-pad);
  }

  .origin-image-chapter-copy--second {
    top: 12%;
    left: var(--page-pad);
  }
}

@media (prefers-reduced-motion: reduce) {
  .origin-world-prologue {
    height: auto;
  }

  .origin-image-chapter {
    height: auto;
  }

  .origin-story-root {
    margin-top: 0;
  }

  .origin-world-stage,
  .origin-image-chapter-stage {
    position: relative;
    top: auto;
    height: auto;
    min-height: 100svh;
    overflow: visible;
  }

  .origin-world-canvas,
  .origin-image-thread-canvas,
  .origin-world-vignette {
    display: none;
  }

  .origin-world-stage {
    display: grid;
    align-content: center;
    gap: clamp(2.5rem, 7vw, 5rem);
    padding: clamp(8rem, 16vh, 12rem) var(--page-pad);
  }

  .origin-world-hero-frame {
    position: relative;
    inset: auto;
    height: 72svh;
    grid-column: 1;
    grid-row: 1 / 5;
  }

  .origin-world-title,
  .origin-world-lead,
  .origin-world-followup,
  .origin-world-fragment {
    position: relative;
    inset: auto;
    width: auto;
    max-width: min(38rem, 88vw);
    opacity: 1;
    transform: none;
  }

  .origin-world-title,
  .origin-world-lead,
  .origin-world-followup {
    z-index: 4;
    grid-column: 1;
    grid-row: auto;
    align-self: center;
  }

  .origin-world-index,
  .origin-world-scroll {
    display: none;
  }

  .origin-image-chapter-stage {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(18rem, .95fr);
    gap: clamp(2rem, 6vw, 6rem);
    padding: clamp(8rem, 16vh, 12rem) var(--page-pad);
    align-items: center;
  }

  .origin-image-chapter-frame {
    position: relative;
    inset: auto;
    width: auto;
    height: min(72svh, 46rem);
  }

  .origin-image-chapter-photo {
    position: relative;
    inset: auto;
    display: block;
    height: 100%;
    opacity: 1;
    transform: none;
    filter: saturate(.68) contrast(1.08) brightness(.8) sepia(.08);
  }

  .origin-image-chapter-photo--next {
    display: none;
  }

  .origin-image-chapter-copy--first,
  .origin-image-chapter-copy--second {
    position: relative;
    inset: auto;
    max-width: 32rem;
    opacity: 1;
    transform: none;
  }

  .origin-image-chapter-copy--second {
    margin-top: clamp(2rem, 5vw, 4rem);
  }
}



.norn-origin-home-page {
  overflow-x: clip;
}

.norn-origin-home-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 90;
  background: #0a0d0b;
  border-bottom-color: rgba(235, 227, 210, 0.12);
  transition: background-color 500ms ease, border-color 500ms ease;
}

.norn-origin-home-header.is-scrolled {
  background: #0a0d0b;
  border-bottom-color: rgba(235, 227, 210, 0.12);
}

.norn-origin-home {
  isolation: isolate;
}

.norn-home-origin-opening {
  min-height: 112svh;
  padding-top: clamp(8rem, 17vh, 11rem);
  padding-bottom: 12vh;
}

.norn-home-origin-opening .origin-title {
  transform: translate3d(var(--origin-home-title-x, 0), var(--origin-home-title-y, 0), 0);
  will-change: transform, opacity;
  opacity: var(--origin-home-title-opacity, 1);
}

.norn-home-origin-opening .origin-lead {
  transform: translate3d(calc(-12% + var(--origin-home-lead-x, 0px)), var(--origin-home-lead-y, 0), 0);
  will-change: transform, opacity;
  opacity: var(--origin-home-lead-opacity, 1);
}

.norn-origin-home-cue {
  position: absolute;
  z-index: 5;
  right: var(--page-pad);
  bottom: 2.4rem;
  margin: 0;
  color: rgba(235, 227, 210, 0.48);
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
}

.norn-home-origin-process {
  position: relative;
  isolation: isolate;
  padding: 0;
  overflow: hidden;
}


.norn-origin-home .weave-passage {
  display: block;
  opacity: var(--origin-thread-scene-opacity, 0);
  will-change: opacity;
}

.norn-origin-home .origin-textile-construction {
  display: none;
}


.norn-origin-home .thread-shadows path {
  stroke-width: 15;
}

.norn-origin-home .thread {
  stroke-width: 10.8;
}

.origin-textile-construction {
  position: fixed;
  z-index: 5;
  inset: 0;
  display: block;
  width: 100vw;
  height: 100svh;
  opacity: var(--origin-textile-canvas-opacity, 0);
  pointer-events: none;
}

.norn-home-origin-process,
.norn-home-origin-results {
  isolation: isolate;
}

.norn-home-origin-process > *,
.norn-home-origin-results > * {
  position: relative;
  z-index: 6;
}


.norn-home-origin-process::before {
  content: none;
}

.norn-home-origin-process > .origin-textile-surface {
  position: fixed;
  z-index: 1;
  inset: 0;
  display: block;
  width: 100vw;
  height: 100svh;
  margin: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 66% 44%, transparent 0 18%, rgba(16, 22, 18, .62) 62%),
    url("assets/images/origin-pattern-01.jpeg?v=20260805-edited2") 50% 50% / cover no-repeat;
  opacity: var(--origin-textile-surface-opacity, 0);
  filter: saturate(.34) contrast(1.16) brightness(.56);
  mix-blend-mode: luminosity;
  will-change: opacity;
}

.norn-home-origin-process > * {
  position: relative;
  z-index: 2;
}

.norn-home-origin-fragment {
  min-height: 106vh;
  margin-bottom: 0;
  align-content: center;
}

.norn-home-origin-fragment .evidence-photo {
  height: min(62vh, 38rem);
  transform: translate3d(var(--origin-home-image-x, 0), var(--origin-home-image-y, 0), 0) scale(var(--origin-home-image-scale, 1));
  will-change: transform;
}

.norn-home-origin-fragment .process-copy {
  transform: translate3d(var(--origin-home-copy-x, 0), var(--origin-home-copy-y, 0), 0);
  opacity: var(--origin-home-copy-opacity, 1);
  will-change: transform, opacity;
}

.norn-home-origin-close {
  display: block;
  width: 100%;
  min-height: 0;
  margin-bottom: 0;
}

.norn-home-origin-close > .origin-close-moment {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  max-width: none;
  min-height: 105vh;
  margin: 0;
  padding: 14vh clamp(2rem, 8vw, 9rem);
  opacity: var(--origin-close-opacity, 0);
  transform: translate3d(var(--origin-close-x, 0), var(--origin-close-y, 18vh), 0);
  will-change: transform, opacity;
}

.norn-home-origin-close > .origin-close-moment--patient {
  min-height: 220vh;
  padding: 0;
  align-items: flex-start;
  font-size: clamp(3rem, 7.2vw, 8.6rem);
  line-height: 0.94;
}

.origin-patient-stage {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  height: 100svh;
  padding: 14vh clamp(2rem, 8vw, 9rem);
}

.origin-close-line {
  display: inline-block;
}

.origin-close-line--patient {
  max-width: 10ch;
}


.origin-close-moment--patient .origin-close-line--patient {
  opacity: var(--origin-patient-opacity, 1);
  clip-path: inset(0 var(--origin-patient-exit-clip, 0%) 0 0);
  transform:
    translate3d(
      var(--origin-patient-exit-x, 0),
      calc(var(--origin-patient-lift, 0) + var(--origin-patient-exit-y, 0)),
      0
    )
    scale(var(--origin-patient-scale, 1));
  transform-origin: left center;
  will-change: transform, opacity, clip-path;
}

.origin-patient-question,
.origin-patient-rest {
  display: block;
  width: max-content;
  max-width: 10ch;
  will-change: transform, clip-path;
}

.origin-patient-question {
  clip-path: inset(0 var(--origin-patient-question-clip, 100%) 0 0);
  transform: translate3d(var(--origin-patient-question-x, 28vw), 0, 0);
}

.origin-patient-rest {
  margin-top: 0.12em;
  clip-path: inset(0 var(--origin-patient-rest-clip, 100%) 0 0);
  transform: translate3d(var(--origin-patient-rest-x, 15vw), 0, 0);
}

.origin-close-moment--patient .origin-close-line--impatient {
  opacity: var(--origin-impatient-opacity, 1);
  clip-path: inset(0 var(--origin-impatient-clip, 100%) 0 0);
  transform: translate3d(
    var(--origin-impatient-x, -14vw),
    var(--origin-impatient-y, 8vh),
    0
  ) scale(var(--origin-impatient-scale, 0.64));
  transform-origin: left center;
  will-change: transform, clip-path, opacity;
}


.origin-close-line--impatient {
  margin-top: 0.22em;
  margin-left: min(34vw, 5.4em);
  opacity: var(--origin-close-delayed-opacity, 0);
  transform: translate3d(0, var(--origin-close-delayed-y, 10vh), 0);
}

.norn-home-origin-close > .origin-close-moment--stitches {
  min-height: 64vh;
  align-items: flex-start;
  padding-right: clamp(2rem, 6vw, 7rem);
  padding-left: clamp(50vw, 56vw, 58vw);
  font-size: clamp(2.6rem, 5.2vw, 6.2rem);
  line-height: 0.98;
  text-align: left;
}

.origin-close-moment--stitches .origin-close-line:not(.origin-close-line--life) {
  opacity: var(--origin-stitches-opacity, 0);
  transform: translate3d(var(--origin-stitches-x, 8vw), 0, 0);
  will-change: transform, opacity;
}

.norn-home-origin-close > .origin-close-moment--stitches .origin-close-line {
  display: inline-block;
  max-width: 9ch;
}

.origin-close-line--life {
  margin-top: 0.24em;
  margin-right: min(13vw, 2.2em);
  opacity: var(--origin-life-opacity, 0);
  transform: translate3d(0, var(--origin-life-y, 7vh), 0);
  will-change: transform, opacity;
}

.norn-home-origin-close > .origin-close-moment--seasons {
  min-height: 112vh;
  margin-top: -18vh;
  padding: 0;
  align-items: flex-start;
  justify-content: center;
  font-size: clamp(2.4rem, 4.4vw, 5.4rem);
  line-height: 1;
  text-align: left;
  text-shadow: 0 0 1.8rem rgba(199, 119, 50, 0.32);
}

.origin-seasons-stage {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  height: 100svh;
  padding: 12vh clamp(2rem, 8vw, 9rem) 14vh;
}

.norn-home-origin-close > .origin-close-moment--seasons .origin-close-line {
  display: block;
  max-width: min(58vw, 15ch);
}

.origin-close-line--afternoon {
  opacity: var(--origin-afternoon-opacity, 0);
  transform: translate3d(0, var(--origin-afternoon-y, 34vh), 0);
  will-change: transform, opacity;
}

.origin-close-line--seasons {
  margin-top: 0.38em;
  opacity: var(--origin-close-delayed-opacity, 0);
  transform: translate3d(0, var(--origin-close-delayed-y, 12vh), 0);
}

.norn-home-origin-results {
  display: grid;
  min-height: 84vh;
  padding-top: clamp(7rem, 15vh, 11rem);
  padding-bottom: clamp(4rem, 8vh, 7rem);
  align-items: center;
  overflow: hidden;
}

.norn-home-origin-results .pattern-grid {
  align-items: center;
}

.norn-home-origin-results .pattern-link {
  --origin-home-result-reveal: 1;
  --origin-home-result-clip: 0%;
  transform: translate3d(var(--origin-home-result-x, 0), var(--origin-home-result-y, 0), 0);
  opacity: var(--origin-home-result-reveal);
  will-change: transform, clip-path, opacity;
}

.norn-home-origin-results .origin-pattern-result-link--01 {
  clip-path: inset(0 var(--origin-home-result-clip) 0 0);
}

.norn-home-origin-results .origin-pattern-result-link--02 {
  clip-path: inset(0 0 0 var(--origin-home-result-clip));
}

.norn-home-origin-results .pattern-photo {
  height: min(67vh, 42rem);
}

.norn-home-origin-continuation {
  min-height: clamp(70rem, 118vw, 96rem);
  padding-top: clamp(9rem, 16vw, 15rem);
  padding-bottom: clamp(13rem, 22vw, 20rem);
}

.norn-home-origin-third {
  display: grid;
  min-height: 108vh;
  padding-top: 18vh;
  padding-bottom: 18vh;
  align-items: center;
}

.norn-home-origin-becoming {
  position: relative;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 47% 41%, rgba(235, 227, 210, 0.16), transparent 28%),
    linear-gradient(145deg, rgba(91, 110, 86, 0.82), rgba(65, 76, 68, 0.92));
}

.norn-home-origin-becoming span {
  color: rgba(235, 227, 210, 0.62);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.norn-home-origin-exits {
  position: relative;
  z-index: 12;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  min-height: 68vh;
  padding: 10vh var(--page-pad) 9vh;
  align-items: center;
  gap: 4rem;
  color: var(--pale);
  background:
    linear-gradient(180deg, rgba(17, 23, 19, 0), #0d110e 34%),
    #111713;
}

.norn-home-origin-wordmark {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(4rem, 10vw, 10rem);
  line-height: 0.82;
}

.norn-home-origin-exits nav {
  display: grid;
  gap: 0.75rem;
  font-family: var(--serif);
  font-size: clamp(1.2rem, 2vw, 1.8rem);
}

.norn-home-origin-exits nav a {
  width: fit-content;
  border-bottom: 1px solid transparent;
}

.norn-home-origin-exits nav a:hover,
.norn-home-origin-exits nav a:focus-visible {
  color: var(--ember);
  border-color: currentColor;
}

.norn-home-full-origin {
  position: absolute;
  left: var(--page-pad);
  bottom: 3rem;
  color: rgba(235, 227, 210, 0.5);
  font-size: 0.58rem;
  letter-spacing: 0.08em;
  border-bottom: 1px solid rgba(235, 227, 210, 0.2);
}

@media (max-width: 760px) {
  .norn-origin-home-header {
    grid-template-columns: 1fr;
    gap: 0.75rem;
    padding-block: 0.85rem;
    background: rgba(10, 13, 11, 0.92);
  }

  .norn-origin-home-header .site-nav {
    justify-content: flex-start;
    gap: 1rem;
    font-size: 0.86rem;
  }

  .norn-home-origin-opening {
    min-height: 118svh;
    padding-top: 9rem;
  }

  .norn-home-origin-opening .origin-title,
  .norn-home-origin-opening .origin-lead,
  .norn-home-origin-fragment .evidence-photo,
  .norn-home-origin-fragment .process-copy,
  .norn-home-origin-results .pattern-link {
    transform: none;
    opacity: 1;
    will-change: auto;
  }

  .norn-home-origin-cue {
    display: none;
  }

  .norn-home-origin-fragment {
    min-height: 0;
    margin-bottom: clamp(8rem, 35vw, 12rem);
  }

  .norn-home-origin-fragment .evidence-photo {
    height: clamp(18rem, 95vw, 28rem);
  }

  .norn-home-origin-close {
    min-height: 0;
  }

  .norn-home-origin-close > .origin-close-moment {
    min-height: 100svh;
    padding-right: var(--page-pad);
    padding-left: var(--page-pad);
  }

  .norn-home-origin-close > .origin-close-moment--patient {
    min-height: 225svh;
    font-size: clamp(2.6rem, 13vw, 5rem);
  }

  .origin-patient-stage {
    padding-right: var(--page-pad);
    padding-left: var(--page-pad);
  }

  .origin-close-line--impatient {
    margin-left: 18vw;
  }

  .norn-home-origin-close > .origin-close-moment--stitches,
  .norn-home-origin-close > .origin-close-moment--seasons {
    font-size: clamp(2.35rem, 11vw, 4.5rem);
  }

  .norn-home-origin-close > .origin-close-moment--stitches {
    min-height: 70svh;
    padding-right: 50vw;
    padding-left: var(--page-pad);
  }

  .norn-home-origin-close > .origin-close-moment--seasons {
    min-height: 108svh;
    margin-top: -12svh;
  }

  .origin-seasons-stage {
    padding: 10vh var(--page-pad) 12vh;
  }

  .norn-home-origin-results {
    min-height: 0;
  }

  .norn-home-origin-results .pattern-photo {
    height: clamp(20rem, 105vw, 32rem);
  }

  .origin-textile-construction {
    height: 100svh;
  }

  .norn-home-origin-continuation {
    min-height: 0;
  }

  .norn-home-origin-third {
    min-height: 92svh;
  }

  .norn-home-origin-exits {
    grid-template-columns: 1fr;
    min-height: 72svh;
    padding-top: 9rem;
  }

  .norn-home-origin-wordmark {
    font-size: clamp(4rem, 21vw, 7rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .origin-textile-construction {
    opacity: .72;
  }
  .norn-home-origin-opening .origin-title,
  .norn-home-origin-opening .origin-lead,
  .norn-home-origin-fragment .evidence-photo,
  .norn-home-origin-fragment .process-copy,
  .norn-home-origin-results .pattern-link {
    transform: none;
    opacity: 1;
    will-change: auto;
  }

  .norn-home-origin-close > .origin-close-moment--patient {
    min-height: auto;
    padding: 0;
  }

  .origin-patient-stage {
    position: relative;
    top: auto;
    height: auto;
    min-height: 100svh;
  }

  .origin-close-moment--patient .origin-close-line--patient,
  .origin-close-moment--patient .origin-close-line--impatient,
  .origin-close-moment--stitches .origin-close-line:not(.origin-close-line--life),
  .origin-close-line--life,
  .origin-patient-question,
  .origin-patient-rest,
  .origin-names-copy p,
  .origin-names-process-figure {
    opacity: 1;
    clip-path: none;
    transform: none;
    will-change: auto;
  }

  .norn-home-origin-close > .origin-close-moment--stitches,
  .norn-home-origin-close > .origin-close-moment--seasons {
    min-height: 100svh;
  }

  .origin-seasons-stage {
    position: relative;
    top: auto;
    height: auto;
    min-height: 100svh;
  }
}

@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
  .origin-world-stage,
  .origin-image-chapter-stage {
    grid-template-columns: 1fr;
    padding-right: var(--page-pad);
    padding-left: var(--page-pad);
  }

  .origin-world-hero-frame {
    height: 64svh;
  }

  .origin-image-chapter-frame {
    height: 64svh;
  }
}



.norn-home-page {
  color: var(--pale);
  background: #151a16;
}

.norn-home-page::after {
  z-index: 90;
  opacity: 0.12;
  mix-blend-mode: soft-light;
}

.norn-home-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 80;
  background: linear-gradient(180deg, rgba(10, 13, 11, 0.88), rgba(10, 13, 11, 0));
  border-bottom-color: transparent;
  transition: background-color 500ms ease, border-color 500ms ease;
}

.norn-home-header.is-scrolled {
  background: rgba(10, 13, 11, 0.9);
  border-bottom-color: rgba(235, 227, 210, 0.14);
}

.norn-home-experience {
  position: relative;
  overflow-x: clip;
  isolation: isolate;
  background:
    radial-gradient(circle at 88% 18%, rgba(199, 119, 50, 0.08), transparent 21%),
    #151a16;
}

.home-construction-trace {
  position: absolute;
  inset: 0;
  z-index: 18;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.home-construction-trace path {
  fill: none;
  stroke: rgba(205, 197, 176, 0.34);
  stroke-width: 0.085;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1;
  stroke-dashoffset: var(--home-trace-offset, 1);
}

.home-movement {
  position: relative;
}

.home-scene {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  min-height: 38rem;
  overflow: hidden;
}

.home-entry-movement {
  min-height: 190vh;
}

.home-entry-scene {
  background:
    radial-gradient(circle at 18% 85%, rgba(199, 119, 50, 0.1), transparent 23%),
    #111612;
}

.home-entry-material {
  position: absolute;
  inset: -20vh -14vw -16vh 9vw;
  margin: 0;
  clip-path: inset(var(--entry-mask-y, 13%) var(--entry-mask-x, 10%));
  transform: translate3d(var(--entry-x, 0), var(--entry-y, 0), 0) scale(var(--entry-scale, 1.12));
  transform-origin: 62% 45%;
  will-change: transform, clip-path;
}

.home-entry-material::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(12, 17, 13, 0.76), transparent 30% 70%, rgba(12, 17, 13, 0.46)),
    linear-gradient(0deg, rgba(12, 17, 13, 0.64), transparent 35%);
  pointer-events: none;
}

.home-entry-material img {
  object-position: 48% 48%;
  filter: saturate(0.78) contrast(1.08) brightness(0.64);
}

.home-entry-index {
  position: absolute;
  z-index: 3;
  top: 22vh;
  left: var(--page-pad);
  display: grid;
  gap: 0.32rem;
  max-width: 18rem;
  color: rgba(235, 227, 210, 0.76);
  font-size: clamp(0.62rem, 0.8vw, 0.75rem);
  letter-spacing: 0.08em;
  opacity: var(--entry-copy-opacity, 0.84);
}

.home-entry-index span:first-child {
  margin-bottom: 1.1rem;
  color: var(--pale);
  letter-spacing: 0.18em;
}

.home-entry-measure,
.home-scroll-cue {
  position: absolute;
  z-index: 3;
  margin: 0;
  color: rgba(235, 227, 210, 0.45);
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.home-entry-measure {
  top: 46%;
  right: 5vw;
  writing-mode: vertical-rl;
}

.home-scroll-cue {
  bottom: 2.5rem;
  left: 50%;
  transform: translateX(-50%);
}

.home-pattern-movement {
  min-height: 190vh;
  margin-top: -12vh;
}

.home-pattern-scene {
  background:
    radial-gradient(ellipse at 65% 45%, rgba(196, 184, 156, 0.14), transparent 32%),
    linear-gradient(135deg, #1b241e, #2e3831 62%, #45483e);
}

.home-pattern-scene::before,
.home-workbench-scene::before,
.home-experiments-scene::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0 0 auto;
  height: 22vh;
  pointer-events: none;
}

.home-pattern-scene::before {
  background: linear-gradient(180deg, rgba(17, 22, 18, 0.96), transparent);
}

.home-pattern-object {
  position: absolute;
  z-index: 2;
  top: 7vh;
  left: 3vw;
  width: min(64vw, 70rem);
  height: 86vh;
  margin: 0;
  clip-path: inset(var(--pattern-mask-y, 8%) var(--pattern-mask-x, 10%));
  opacity: var(--pattern-object-opacity, 1);
  transform: translate3d(var(--pattern-x, -7vw), var(--pattern-y, 0), 0) scale(var(--pattern-scale, 1.1));
  transform-origin: 42% 56%;
  will-change: transform, clip-path;
}

.home-pattern-object img {
  object-fit: contain;
  object-position: center;
  filter: saturate(0.86) contrast(1.02) brightness(0.88);
}

.home-pattern-record {
  position: absolute;
  z-index: 5;
  top: 21vh;
  right: 7vw;
  width: min(30rem, 33vw);
  transform: translate3d(var(--pattern-copy-x, 4vw), var(--pattern-copy-y, 0), 0);
  opacity: var(--pattern-copy-opacity, 0);
  will-change: transform, opacity;
}

.home-pattern-record .eyebrow {
  font-size: 0.62rem;
  opacity: 0.66;
}

.home-pattern-record h2 {
  margin: 1.35rem 0 2.4rem;
  font-size: clamp(2.6rem, 5vw, 5.8rem);
}

.home-annotations {
  display: grid;
  justify-items: start;
  gap: 0.8rem;
  color: rgba(235, 227, 210, 0.66);
  font-size: clamp(0.65rem, 0.8vw, 0.78rem);
}

.home-annotations span {
  padding-bottom: 0.18rem;
  border-bottom: 1px solid rgba(235, 227, 210, 0.2);
}

.home-world-link {
  display: inline-flex;
  align-items: baseline;
  gap: 0.65rem;
  margin-top: 3.2rem;
  padding-bottom: 0.25rem;
  font-family: var(--serif);
  font-size: clamp(1.4rem, 2vw, 2rem);
  border-bottom: 1px solid rgba(235, 227, 210, 0.52);
}

.home-world-link span {
  font-family: var(--sans);
  font-size: 0.75em;
  transition: transform 300ms ease;
}

.home-world-link:hover span,
.home-world-link:focus-visible span {
  transform: translate3d(0.25rem, -0.2rem, 0);
}

.home-origin-link {
  position: absolute;
  z-index: 5;
  bottom: 2rem;
  left: var(--page-pad);
  color: rgba(235, 227, 210, 0.54);
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  border-bottom: 1px solid rgba(235, 227, 210, 0.22);
}

.home-workbench-movement {
  min-height: 225vh;
  margin-top: -14vh;
}

.home-workbench-scene {
  background:
    radial-gradient(circle at 15% 28%, rgba(199, 119, 50, 0.09), transparent 20%),
    linear-gradient(155deg, #222d26, #111713 78%);
}

.home-workbench-scene::before {
  background: linear-gradient(180deg, rgba(45, 55, 48, 0.94), transparent);
}

.home-workbench-image {
  position: absolute;
  margin: 0;
  overflow: hidden;
  opacity: var(--work-image-opacity, 1);
  will-change: transform;
}

.home-workbench-image img {
  filter: saturate(0.82) contrast(1.05) brightness(0.88);
}

.home-workbench-image--raffia {
  z-index: 2;
  top: 10vh;
  left: 7vw;
  width: 48vw;
  height: 58vh;
  transform: translate3d(var(--work-raffia-x, -5vw), var(--work-raffia-y, 0), 0);
}

.home-workbench-image--cord {
  z-index: 4;
  right: 4vw;
  bottom: 5vh;
  width: 31vw;
  height: 43vh;
  transform: translate3d(var(--work-cord-x, 5vw), var(--work-cord-y, 0), 0);
}

.home-workbench-image--three {
  z-index: 1;
  top: 19vh;
  right: 13vw;
  width: 24vw;
  height: 26vh;
  opacity: var(--work-three-opacity, 0.45);
  transform: translate3d(var(--work-three-x, 0), var(--work-three-y, 0), 0);
}

.home-workbench-notes {
  position: absolute;
  z-index: 6;
  top: 18vh;
  right: 7vw;
  width: min(28rem, 31vw);
  color: var(--pale);
  transform: translate3d(0, var(--work-copy-y, 3vh), 0);
  opacity: var(--work-copy-opacity, 0);
}

.home-workbench-notes p {
  margin-bottom: clamp(0.5rem, 1.2vh, 1rem);
}

.home-workbench-side-note {
  position: absolute;
  z-index: 6;
  bottom: 10vh;
  left: 15vw;
  color: rgba(235, 227, 210, 0.72);
  font-size: clamp(1rem, 1.5vw, 1.35rem);
}

.home-workbench-link {
  position: absolute;
  z-index: 7;
  right: 38vw;
  bottom: 8vh;
}

.home-experiments-movement {
  min-height: 285vh;
  margin-top: -16vh;
}

.home-experiments-scene {
  background:
    radial-gradient(circle at 77% 65%, rgba(91, 110, 86, 0.22), transparent 26%),
    linear-gradient(128deg, #111713, #2a332d 62%, #171c18);
}

.home-experiments-scene::before {
  background: linear-gradient(180deg, rgba(17, 23, 19, 0.96), transparent);
}

.home-hook-object {
  position: absolute;
  z-index: 2;
  top: -8vh;
  left: 6vw;
  width: 88vw;
  height: 72vh;
  margin: 0;
  clip-path: inset(9% 5% 7% 5%);
  transform: translate3d(var(--hook-x, -12vw), var(--hook-y, -4vh), 0) rotate(var(--hook-rotate, -8deg)) scale(var(--hook-scale, 1.14));
  transform-origin: 42% 50%;
  opacity: var(--hook-opacity, 1);
  will-change: transform, opacity;
}

.home-hook-object img {
  object-position: 50% 68%;
  filter: saturate(0.74) contrast(1.09) brightness(0.7);
}

.home-ribbon-fragments {
  position: absolute;
  z-index: 6;
  inset: 0;
  font-size: clamp(1.05rem, 1.7vw, 1.5rem);
  pointer-events: none;
}

.home-ribbon-fragments p {
  position: absolute;
  margin: 0;
  opacity: var(--ribbon-copy-opacity, 0);
  transform: translate3d(0, var(--ribbon-copy-y, 2vh), 0);
}

.home-ribbon-fragments p:nth-child(1) { top: 15vh; left: 7vw; }
.home-ribbon-fragments p:nth-child(2) { top: 29vh; left: 14vw; }
.home-ribbon-fragments p:nth-child(3) { top: 17vh; right: 12vw; }
.home-ribbon-fragments p:nth-child(4) { top: 39vh; right: 7vw; }
.home-ribbon-fragments p:nth-child(5) { top: 57vh; left: 9vw; }
.home-ribbon-fragments p:nth-child(6) { top: 69vh; left: 26vw; }
.home-ribbon-fragments p:nth-child(7) { top: 77vh; left: 42vw; }
.home-ribbon-fragments p:nth-child(8) { top: 67vh; right: 13vw; }
.home-ribbon-fragments .home-purpose {
  right: 7vw;
  bottom: 8vh;
  font-size: clamp(1.5rem, 2.8vw, 2.6rem);
}

.home-ribbon-detail {
  position: absolute;
  z-index: 4;
  right: 17vw;
  bottom: 5vh;
  width: 23vw;
  height: 28vh;
  margin: 0;
  opacity: var(--ribbon-detail-opacity, 0);
  transform: translate3d(var(--ribbon-detail-x, 5vw), var(--ribbon-detail-y, 4vh), 0);
}

.home-ribbon-detail img {
  filter: saturate(0.8) contrast(1.06) brightness(0.83);
}

.home-endless-record {
  position: absolute;
  z-index: 10;
  inset: 0;
  opacity: var(--endless-opacity, 0);
  pointer-events: var(--endless-pointer, none);
}

.home-endless-image {
  position: absolute;
  top: 8vh;
  right: 4vw;
  width: 64vw;
  height: 78vh;
  margin: 0;
  clip-path: inset(var(--endless-mask, 19%));
  transform: translate3d(var(--endless-x, 8vw), var(--endless-y, 2vh), 0) scale(var(--endless-scale, 0.74));
  transform-origin: 68% 52%;
}

.home-endless-image img {
  object-position: center;
  filter: saturate(0.92) contrast(1.04) brightness(0.86);
}

.home-endless-copy {
  position: absolute;
  z-index: 2;
  top: 17vh;
  left: 6vw;
  width: min(28rem, 31vw);
}

.home-endless-copy h2 {
  margin-bottom: 2rem;
  font-size: clamp(2.5rem, 4.8vw, 5rem);
}

.home-endless-copy p {
  margin-bottom: 0.55rem;
}

.home-experiments-link {
  position: absolute;
  z-index: 14;
  right: 7vw;
  bottom: 5vh;
  opacity: var(--experiments-link-opacity, 0);
}

.home-settle {
  position: relative;
  z-index: 20;
  display: grid;
  min-height: 105vh;
  padding: 18vh var(--page-pad) 12vh;
  place-items: end start;
  background:
    linear-gradient(180deg, rgba(17, 23, 19, 0), #0d110e 34%),
    #111713;
}

.home-settle-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  width: 100%;
  gap: 3rem;
}

.home-settle-wordmark {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(3rem, 9vw, 9rem);
  line-height: 0.85;
}

.home-settle-nav {
  display: grid;
  justify-items: start;
  gap: 0.7rem;
  font-family: var(--serif);
  font-size: clamp(1.2rem, 2vw, 1.7rem);
}

.home-settle-nav a {
  border-bottom: 1px solid transparent;
}

.home-settle-nav a:hover,
.home-settle-nav a:focus-visible {
  color: var(--ember);
  border-color: currentColor;
}

.home-footer {
  position: relative;
  z-index: 25;
  background: #0d110e;
  border-top-color: rgba(235, 227, 210, 0.12);
}

@media (max-width: 760px) {
  .norn-home-header {
    grid-template-columns: 1fr;
    gap: 0.75rem;
    padding-block: 0.85rem;
    background: rgba(10, 13, 11, 0.92);
  }

  .norn-home-header .site-nav {
    justify-content: flex-start;
    gap: 1rem;
    font-size: 0.86rem;
  }

  .home-construction-trace {
    opacity: 0.45;
  }

  .home-movement {
    min-height: auto;
    margin-top: 0;
  }

  .home-scene {
    position: relative;
    top: auto;
    height: auto;
    min-height: 0;
    overflow: hidden;
  }

  .home-entry-scene {
    min-height: 118svh;
    padding-top: 8rem;
  }

  .home-entry-material {
    inset: 12vh -42vw 8vh -15vw;
    clip-path: inset(6% 8%);
    transform: none;
  }

  .home-entry-index {
    top: 9rem;
  }

  .home-entry-measure {
    display: none;
  }

  .home-pattern-scene,
  .home-workbench-scene,
  .home-experiments-scene {
    display: grid;
    gap: clamp(3rem, 14vw, 6rem);
    padding: clamp(7rem, 24vw, 10rem) var(--page-pad);
  }

  .home-pattern-object,
  .home-pattern-record,
  .home-origin-link,
  .home-workbench-image,
  .home-workbench-notes,
  .home-workbench-side-note,
  .home-workbench-link,
  .home-hook-object,
  .home-ribbon-fragments,
  .home-ribbon-detail,
  .home-endless-record,
  .home-experiments-link {
    position: relative;
    inset: auto;
    right: auto;
    bottom: auto;
    left: auto;
    width: auto;
    height: auto;
    opacity: 1;
    transform: none;
  }

  .home-pattern-object {
    width: calc(100% + 18vw);
    margin-left: -9vw;
    clip-path: none;
  }

  .home-pattern-object img {
    height: auto;
    object-fit: contain;
  }

  .home-pattern-record {
    width: 100%;
  }

  .home-pattern-record h2 {
    font-size: clamp(2.8rem, 14vw, 4.4rem);
  }

  .home-origin-link {
    width: fit-content;
  }

  .home-workbench-scene {
    grid-template-columns: 1fr 0.22fr;
  }

  .home-workbench-image--raffia,
  .home-workbench-notes,
  .home-workbench-link {
    grid-column: 1 / -1;
  }

  .home-workbench-image--cord {
    grid-column: 1;
    width: 80%;
  }

  .home-workbench-image--three {
    grid-column: 1 / -1;
    width: 68%;
    justify-self: end;
  }

  .home-workbench-image img,
  .home-ribbon-detail img {
    height: auto;
  }

  .home-workbench-side-note {
    grid-column: 1 / -1;
    margin: -2rem 0 0 12vw;
  }

  .home-workbench-link,
  .home-experiments-link {
    justify-self: start;
  }

  .home-hook-object {
    width: calc(100% + 32vw);
    margin-left: -16vw;
    clip-path: inset(4%);
    transform: rotate(-4deg);
  }

  .home-hook-object img {
    height: auto;
  }

  .home-ribbon-fragments {
    display: grid;
    gap: 0.8rem;
    pointer-events: auto;
  }

  .home-ribbon-fragments p {
    position: static;
    opacity: 1;
    transform: none;
  }

  .home-ribbon-fragments p:nth-child(even) {
    margin-left: 12vw;
  }

  .home-ribbon-fragments .home-purpose {
    margin-top: 2rem;
    font-size: 1.8rem;
  }

  .home-ribbon-detail {
    width: 70%;
    justify-self: end;
  }

  .home-endless-record {
    display: grid;
    gap: 3rem;
    pointer-events: auto;
  }

  .home-endless-image,
  .home-endless-copy {
    position: relative;
    inset: auto;
    width: auto;
    height: auto;
    margin: 0;
    clip-path: none;
    transform: none;
  }

  .home-endless-image {
    width: calc(100% + 16vw);
    margin-left: -8vw;
  }

  .home-endless-image img {
    height: auto;
  }

  .home-endless-copy h2 {
    font-size: clamp(2.6rem, 13vw, 4rem);
  }

  .home-settle {
    min-height: 85svh;
    padding-top: 10rem;
  }

  .home-settle-inner {
    grid-template-columns: 1fr;
  }

  .home-settle-wordmark {
    font-size: clamp(3.8rem, 20vw, 6.5rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .norn-home-header,
  .home-world-link span {
    transition: none;
  }

  .home-construction-trace path {
    stroke-dashoffset: 0;
  }

  .home-entry-material,
  .home-pattern-object,
  .home-pattern-record,
  .home-workbench-image,
  .home-workbench-notes,
  .home-hook-object,
  .home-ribbon-fragments p,
  .home-ribbon-detail,
  .home-endless-image {
    transform: none;
    will-change: auto;
  }

  .home-pattern-record,
  .home-workbench-notes,
  .home-ribbon-fragments p,
  .home-ribbon-detail,
  .home-endless-record,
  .home-experiments-link {
    opacity: 1;
  }
}