/* ==========================================================================
   CC, Costina Cindea
   One stylesheet for the whole site. Sections:
   1. fonts + tokens    2. base    3. paper system (tears, notes, tape, tags)
   4. layout (collage)  5. masthead + colophon    6. pages    7. motion
   Theme: fixed dark "desk" with paper sheets on top. Radius: none, anywhere.
   ========================================================================== */

/* 1. fonts + tokens ------------------------------------------------------- */

@font-face {
  font-family: "Courier Prime";
  src: url("../fonts/courier-prime-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Courier Prime";
  src: url("../fonts/courier-prime-400-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Courier Prime";
  src: url("../fonts/courier-prime-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Courier Prime";
  src: url("../fonts/courier-prime-700-italic.woff2") format("woff2");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

:root {
  --ink: #0d0d0d;
  --ink-soft: #1b1b1a;
  --paper: #ebe9e4;
  --paper-shade: #d8d6d0;
  --graphite: #a09e99; /* secondary text on ink, 7.4:1 */
  --pencil: #484743; /* secondary text on paper, 8.3:1 */
  --blend: #f2f1ee; /* colour used with mix-blend-mode: difference */

  --font: "Courier Prime", "Courier New", Courier, monospace;
  --t-xs: 0.75rem;
  --t-s: 0.875rem;
  --t-m: 1rem;
  --t-l: clamp(1.2rem, 1rem + 0.8vw, 1.65rem);
  --t-xl: clamp(2.1rem, 1.3rem + 3.4vw, 4.75rem);
  --t-xxl: clamp(3.4rem, 0.6rem + 12vw, 13.5rem);

  --edge: max(clamp(1.1rem, 4vw, 4.5rem), env(safe-area-inset-left), env(safe-area-inset-right));
  --gutter: clamp(0.75rem, 1.6vw, 1.75rem);
  --slow: cubic-bezier(0.2, 0.65, 0.1, 1);

  /* foreground / background pair, flipped on paper */
  --fg: var(--paper);
  --bg: var(--ink);

  /* z-index scale */
  --z-lift: 2;
  --z-nav: 50;
  --z-grain: 60;
}

/* 2. base ----------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--ink) url("../tex/dark.webp") 0 0 / 1200px repeat;
}
html {
  scrollbar-width: none;
}
html::-webkit-scrollbar {
  display: none;
}
html:has(.page--quiet) {
  background-image: none;
}
/* large and very large screens: scale the whole rem-based system up */
@media (min-width: 1800px) {
  html {
    font-size: 112.5%;
  }
}
@media (min-width: 2400px) {
  html {
    font-size: 131.25%;
  }
}

body {
  margin: 0;
  min-height: 100dvh;
  overflow-x: hidden; /* fallback for Safari < 16 */
  overflow-x: clip;
  font-family: var(--font);
  font-size: var(--t-m);
  line-height: 1.55;
  color: var(--paper);
  position: relative;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* film grain, never catches the pointer. Pinned to the screen on desktop;
   on touch screens it is part of the page, because Safari resizes pinned
   layers while its toolbars slide in and out, which left bare bands at the
   top and bottom of the screen. */
body::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: var(--z-grain);
  pointer-events: none;
  background: url("../tex/grain.webp") 0 0 / 200px;
  opacity: 0.55;
}
@media (hover: hover) and (pointer: fine) {
  body::after {
    position: fixed;
  }
}

img,
video,
svg {
  display: block;
  max-width: 100%;
}
img,
video {
  height: auto;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
  user-select: none;
}

h1,
h2,
h3,
p,
dl,
dd,
ol,
ul,
figure,
blockquote {
  margin: 0;
}
ol,
ul {
  padding: 0;
  list-style: none;
}

h1,
h2,
h3 {
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.035em;
}

a {
  color: inherit;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

::selection {
  background: var(--paper);
  color: var(--ink);
}

:focus-visible {
  outline: 1px dashed currentColor;
  outline-offset: 4px;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip {
  position: absolute;
  left: var(--edge);
  top: -10rem;
  z-index: calc(var(--z-grain) + 1);
  padding: 0.6rem 0.9rem;
  background: var(--paper);
  color: var(--ink);
  font-size: var(--t-s);
}
.skip:focus {
  top: 1rem;
}

/* tilted sheets may poke past the screen edge: clip them here (a plain
   element, so iOS can't pan sideways the way it can with body overflow) */
.page {
  position: relative;
  overflow-x: hidden; /* fallback for Safari < 16 */
  overflow-x: clip;
}
.page:focus {
  outline: none;
}

/* typed link: a plain underline; the hover is the marker below */
.typed-link {
  display: inline-block;
  padding: 0.2em 0.2em 0.15em;
  margin-inline: -0.2em;
  color: var(--fg);
  font-size: var(--t-s);
  letter-spacing: 0.04em;
  text-decoration: none;
  background: linear-gradient(var(--fg) 0 0) left bottom / 100% 1px no-repeat;
}
.typed-link:active {
  translate: 0 1px;
}

/* marker: on hover a thick felt-tip stroke is drawn across the word from
   left to right and the letters knock out of it. Black marker on paper,
   white paint marker on the dark desk. */
:root {
  --marker: var(--paper);
  --marker-text: var(--ink);
}
.on-paper,
.note,
.tag,
.masthead__nav,
.viewer__sheet {
  --marker: var(--ink);
  --marker-text: var(--paper);
}
.typed-link,
.masthead__nav a,
.tag__name a,
.contact__row dd a,
.viewer__close,
.contents__name,
.archive-index a span:last-child,
.piece__enquire {
  position: relative;
  isolation: isolate;
  transition: color 0.3s ease 0.12s;
}
.typed-link::before,
.masthead__nav a::before,
.tag__name a::before,
.contact__row dd a::before,
.viewer__close::before,
.contents__name::before,
.archive-index a span:last-child::before,
.piece__enquire::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -0.1em -1em -0.06em -0.3em;
  background: var(--marker);
  -webkit-mask: url("../tex/marker.webp") left center / 100% 100% no-repeat;
  mask: url("../tex/marker.webp") left center / 100% 100% no-repeat;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.55s cubic-bezier(0.65, 0, 0.25, 1);
  pointer-events: none;
}
:is(.typed-link, .masthead__nav a, .tag__name a, .contact__row dd a, .viewer__close, .piece__enquire):focus-visible,
.contents a:focus-visible .contents__name,
.archive-index a:focus-visible span:last-child {
  color: var(--marker-text);
}
:is(.typed-link, .masthead__nav a, .tag__name a, .contact__row dd a, .viewer__close, .piece__enquire):focus-visible::before,
.contents a:focus-visible .contents__name::before,
.archive-index a:focus-visible span:last-child::before {
  clip-path: inset(0 0 0 0);
}
@media (hover: hover) {
  :is(.typed-link, .masthead__nav a, .tag__name a, .contact__row dd a, .viewer__close, .piece__enquire):hover,
  .contents a:hover .contents__name,
  .archive-index a:hover span:last-child,
  .object:hover .tag__name a {
    color: var(--marker-text);
  }
  :is(.typed-link, .masthead__nav a, .tag__name a, .contact__row dd a, .viewer__close, .piece__enquire):hover::before,
  .contents a:hover .contents__name::before,
  .archive-index a:hover span:last-child::before,
  .object:hover .tag__name a::before {
    clip-path: inset(0 0 0 0);
  }
}

.label {
  font-size: var(--t-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--graphite);
}

.on-paper {
  --fg: var(--ink);
  --bg: var(--paper);
  color: var(--ink);
}
.on-paper .label {
  color: var(--pencil);
}

/* catalogue data: key / value rows */
.meta {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 0.3rem 1.2rem;
  font-size: var(--t-s);
  line-height: 1.45;
}
.meta dt {
  padding-top: 0.12em;
  font-size: var(--t-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--graphite);
}
.on-paper .meta dt {
  color: var(--pencil);
}

.giant {
  font-size: var(--t-xxl);
  line-height: 0.8;
  letter-spacing: -0.07em;
  text-transform: uppercase;
}

/* 3. paper system ---------------------------------------------------------- */

.paper {
  background: var(--paper) url("../tex/paper.webp") center / 700px;
}

/* torn photograph: the wrapper is the paper backing (outer mask), the image
   is cut a little further in (inner mask), leaving a frayed white rim. */
.tear {
  --outer: url("../tex/tear-portrait-a-outer.webp");
  --inner: url("../tex/tear-portrait-a-inner.webp");
  display: block;
  position: relative;
  overflow: hidden;
  background: var(--paper) url("../tex/paper.webp") center / 700px;
  -webkit-mask: var(--outer) center / 100% 100% no-repeat;
  mask: var(--outer) center / 100% 100% no-repeat;
}
.tear > img,
.tear > video {
  width: 100%;
  -webkit-mask: var(--inner) center / 100% 100% no-repeat;
  mask: var(--inner) center / 100% 100% no-repeat;
}
.tear--pb {
  --outer: url("../tex/tear-portrait-b-outer.webp");
  --inner: url("../tex/tear-portrait-b-inner.webp");
}
.tear--tall {
  --outer: url("../tex/tear-tall-a-outer.webp");
  --inner: url("../tex/tear-tall-a-inner.webp");
}
.tear--land {
  --outer: url("../tex/tear-land-a-outer.webp");
  --inner: url("../tex/tear-land-a-inner.webp");
}
.tear--land-b {
  --outer: url("../tex/tear-land-b-outer.webp");
  --inner: url("../tex/tear-land-b-inner.webp");
}
.tear--square {
  --outer: url("../tex/tear-square-a-outer.webp");
  --inner: url("../tex/tear-square-a-inner.webp");
}

/* scissor cut: straight but never square */
.cut {
  clip-path: polygon(0.6% 1.4%, 99.2% 0, 100% 98.2%, 0 100%);
}
.cut--b {
  clip-path: polygon(0 0, 98.6% 1.8%, 99.4% 100%, 1.2% 98.8%);
}

/* full-width tear on top and/or bottom edge. Same outer/inner idea as .tear */
.rip {
  --h: clamp(3.25rem, 7vw, 7.5rem);
  position: relative;
  background: var(--paper) url("../tex/paper.webp") center / 700px;
}
.rip--top {
  -webkit-mask:
    url("../tex/tear-edge-b-top-outer.webp") top / 100% var(--h) no-repeat,
    linear-gradient(#000 0 0) bottom / 100% calc(100% - var(--h) + 1px) no-repeat;
  mask:
    url("../tex/tear-edge-b-top-outer.webp") top / 100% var(--h) no-repeat,
    linear-gradient(#000 0 0) bottom / 100% calc(100% - var(--h) + 1px) no-repeat;
}
.rip--top > :is(img, video) {
  -webkit-mask:
    url("../tex/tear-edge-b-top-inner.webp") top / 100% var(--h) no-repeat,
    linear-gradient(#000 0 0) bottom / 100% calc(100% - var(--h) + 1px) no-repeat;
  mask:
    url("../tex/tear-edge-b-top-inner.webp") top / 100% var(--h) no-repeat,
    linear-gradient(#000 0 0) bottom / 100% calc(100% - var(--h) + 1px) no-repeat;
}
.rip--bottom {
  -webkit-mask:
    url("../tex/tear-edge-a-bottom-outer.webp") bottom / 100% var(--h) no-repeat,
    linear-gradient(#000 0 0) top / 100% calc(100% - var(--h) + 1px) no-repeat;
  mask:
    url("../tex/tear-edge-a-bottom-outer.webp") bottom / 100% var(--h) no-repeat,
    linear-gradient(#000 0 0) top / 100% calc(100% - var(--h) + 1px) no-repeat;
}
.rip--bottom > :is(img, video) {
  -webkit-mask:
    url("../tex/tear-edge-a-bottom-inner.webp") bottom / 100% var(--h) no-repeat,
    linear-gradient(#000 0 0) top / 100% calc(100% - var(--h) + 1px) no-repeat;
  mask:
    url("../tex/tear-edge-a-bottom-inner.webp") bottom / 100% var(--h) no-repeat,
    linear-gradient(#000 0 0) top / 100% calc(100% - var(--h) + 1px) no-repeat;
}
.rip--both {
  -webkit-mask:
    url("../tex/tear-edge-b-top-outer.webp") top / 100% var(--h) no-repeat,
    linear-gradient(#000 0 0) center / 100% calc(100% - 2 * var(--h) + 2px) no-repeat,
    url("../tex/tear-edge-a-bottom-outer.webp") bottom / 100% var(--h) no-repeat;
  mask:
    url("../tex/tear-edge-b-top-outer.webp") top / 100% var(--h) no-repeat,
    linear-gradient(#000 0 0) center / 100% calc(100% - 2 * var(--h) + 2px) no-repeat,
    url("../tex/tear-edge-a-bottom-outer.webp") bottom / 100% var(--h) no-repeat;
}
.rip--both > :is(img, video) {
  -webkit-mask:
    url("../tex/tear-edge-b-top-inner.webp") top / 100% var(--h) no-repeat,
    linear-gradient(#000 0 0) center / 100% calc(100% - 2 * var(--h) + 2px) no-repeat,
    url("../tex/tear-edge-a-bottom-inner.webp") bottom / 100% var(--h) no-repeat;
  mask:
    url("../tex/tear-edge-b-top-inner.webp") top / 100% var(--h) no-repeat,
    linear-gradient(#000 0 0) center / 100% calc(100% - 2 * var(--h) + 2px) no-repeat,
    url("../tex/tear-edge-a-bottom-inner.webp") bottom / 100% var(--h) no-repeat;
}
.rip > :is(img, video) {
  width: 100%;
}

/* typed paper note */
.note {
  --fg: var(--ink);
  --bg: var(--paper);
  position: relative;
  color: var(--ink);
  background: var(--paper) url("../tex/paper.webp") center / 700px;
  padding: clamp(2.2rem, 4vw, 3.6rem) clamp(1.8rem, 3.6vw, 3.2rem);
  -webkit-mask: url("../tex/tear-sheet-b-outer.webp") center / 100% 100% no-repeat;
  mask: url("../tex/tear-sheet-b-outer.webp") center / 100% 100% no-repeat;
}
.note--tall {
  -webkit-mask-image: url("../tex/tear-sheet-a-outer.webp");
  mask-image: url("../tex/tear-sheet-a-outer.webp");
}
.note p {
  max-width: 54ch;
}
.note p + p,
.note p + .meta,
.note .meta + p {
  margin-top: 1em;
}
.note .label {
  color: var(--pencil);
}

/* sheet: carrier for shadow + tape; never masked itself */
.sheet {
  position: relative;
  filter: drop-shadow(0 1.4rem 1.6rem rgb(0 0 0 / 0.5));
}
.sheet--tape::before {
  content: "";
  position: absolute;
  z-index: 3;
  top: -1rem;
  left: var(--tape-x, 38%);
  width: clamp(4.5rem, 8vw, 7.5rem);
  aspect-ratio: 420 / 120;
  background: url("../tex/tape.webp") center / 100% 100% no-repeat;
  rotate: var(--tape-r, -7deg);
}
.sheet > figcaption {
  margin-top: 0.7rem;
  font-size: var(--t-xs);
  letter-spacing: 0.04em;
  color: var(--graphite);
}

/* luggage tag with a punched hole */
.tag {
  --fg: var(--ink);
  --bg: var(--paper);
  position: relative;
  padding: 2.7rem 1.35rem 1.35rem;
  color: var(--ink);
  font-size: var(--t-s);
  line-height: 1.45;
  background: var(--paper) url("../tex/paper.webp") center / 500px;
  clip-path: polygon(13% 0, 87% 0, 100% 8%, 100% 100%, 0 100%, 0 8%);
  -webkit-mask: radial-gradient(circle at 50% 1.25rem, #0000 0.36rem, #000 0.42rem);
  mask: radial-gradient(circle at 50% 1.25rem, #0000 0.36rem, #000 0.42rem);
}
.tag .meta {
  margin-top: 0.9rem;
  gap: 0.2rem 0.9rem;
}
@media (max-width: 480px) {
  .tag .meta {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .tag .meta dd + dt {
    margin-top: 0.45rem;
  }
}
.tag .meta dt {
  color: var(--pencil);
}

/* rubber stamp */
.stamp {
  display: inline-block;
  padding: 0.25rem 0.55rem 0.2rem;
  border: 2px solid currentColor;
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  rotate: -5deg;
  opacity: 0.82;
}

/* 4. layout: collage grid ------------------------------------------------- */
/* Placement lives on each element as custom properties:
   --m-col / --m-mt (mobile)   --d-col / --d-row / --d-mt / --d-ml / --d-mr (desktop)
   --r rotation, --z stacking, --d-align align-self */

.collage {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: 2.5rem;
  padding-inline: var(--edge);
  align-items: start;
}
.collage > * {
  grid-column: var(--m-col, 1 / -1);
  margin-top: var(--m-mt, 0);
  rotate: var(--r, 0deg);
  z-index: var(--z, auto);
  min-width: 0;
}

@media (min-width: 900px) {
  .collage {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    row-gap: 0;
  }
  .collage > * {
    grid-column: var(--d-col, 1 / -1);
    grid-row: var(--d-row, auto);
    align-self: var(--d-align, start);
    margin-top: var(--d-mt, 0);
    margin-left: var(--d-ml, 0);
    margin-right: var(--d-mr, 0);
    margin-bottom: var(--d-mb, 0);
  }
}

/* 5. masthead + colophon -------------------------------------------------- */

/* The header is not one box: logo and nav are positioned on their own so the
   logo's difference blend works against the page itself (a shared fixed
   parent would isolate it). */
.masthead {
  --top: calc(clamp(1rem, 2.2vw, 1.8rem) + env(safe-area-inset-top));
}
.masthead__mark,
.masthead__nav {
  position: absolute;
  top: var(--top);
  z-index: var(--z-nav);
}
/* the small logo stays in the corner at all times */
.masthead__mark {
  position: fixed;
}
@media (min-width: 900px) {
  .masthead__nav {
    position: fixed;
    transition: translate 0.7s var(--slow);
  }
  /* the menu tucks away while scrolling down, back as soon as you scroll up */
  .masthead.is-tucked:not(:focus-within) .masthead__nav {
    translate: 0 -170%;
  }
}

/* the monogram inverts whatever is behind it (white on black, black on
   white paper); a heavier line keeps it readable over photographs */
.masthead__mark {
  left: var(--edge);
  display: block;
  width: clamp(3rem, 4.2vw, 4.2rem);
  color: var(--blend);
  mix-blend-mode: difference;
}
.masthead__mark svg {
  width: 100%;
  height: auto;
  overflow: visible;
}
/* thicken the hairline outline a little at small sizes */
.masthead__mark path {
  stroke: currentColor;
  stroke-width: 1.2px;
  vector-effect: non-scaling-stroke;
}
.colophon__mark path {
  stroke: currentColor;
  stroke-width: 1.1px;
  vector-effect: non-scaling-stroke;
}

/* the nav words sit on a small torn label, so text scrolling underneath
   never clashes with them */
.masthead__nav {
  right: var(--edge);
  color: var(--ink);
  background: var(--paper) url("../tex/paper.webp") center / 400px;
  padding: 0.7rem 1.1rem 0.75rem 0.95rem;
  -webkit-mask: url("../tex/tear-sheet-b-outer.webp") center / 100% 100% no-repeat;
  mask: url("../tex/tear-sheet-b-outer.webp") center / 100% 100% no-repeat;
  rotate: 1.5deg;
  display: grid;
  justify-items: start;
  font-size: var(--t-xs);
  letter-spacing: 0.14em;
  line-height: 1.95;
  text-transform: uppercase;
}
.masthead__nav a {
  position: relative;
  text-decoration: none;
  padding-inline: 0.1em;
}
.masthead__nav a:nth-child(2) {
  margin-left: 2.4em;
}
.masthead__nav a:nth-child(3) {
  margin-left: 0.9em;
}
.masthead__nav a:nth-child(4) {
  margin-left: 3.6em;
}
/* touch screens: each menu word is a 44px-high target, laid out 2 x 2 */
@media (pointer: coarse) {
  .masthead__nav {
    grid-template-columns: auto auto;
    column-gap: 0.4rem;
    padding: 0.35rem 0.55rem 0.4rem;
    font-size: 0.8125rem;
    line-height: 1.2;
  }
  .masthead__nav a,
  .masthead__nav a:nth-child(n) {
    margin-left: 0;
    padding: 0.8rem 0.5rem;
  }
  .masthead__nav a[aria-current="page"]::after {
    left: 0.5rem;
    right: 0.5rem;
    bottom: 0.55rem;
  }
}

/* current page: a thin underline */
.masthead__nav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.2em;
  height: 1px;
  background: currentColor;
}

.colophon {
  position: relative;
  margin-top: clamp(3rem, 7vw, 6rem);
}
.colophon__sheet {
  padding: calc(var(--h) + clamp(2rem, 5vw, 4rem)) var(--edge) calc(clamp(2rem, 4vw, 3rem) + env(safe-area-inset-bottom));
}
.colophon__grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr;
  align-items: end;
}
.colophon__mark {
  width: clamp(4.5rem, 9vw, 8rem);
  color: var(--ink);
}
.colophon__name {
  font-size: var(--t-l);
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.colophon__links,
.colophon__nav {
  display: grid;
  gap: 0.35rem;
  justify-items: start;
}
.colophon__small {
  font-size: var(--t-xs);
  letter-spacing: 0.06em;
  color: var(--pencil);
}
@media (min-width: 900px) {
  .colophon__grid {
    grid-template-columns: 1.1fr 1.4fr 1fr 0.8fr;
  }
}

/* 6. pages ----------------------------------------------------------------- */

/* ---- home */

.hero {
  position: relative;
  min-height: max(100dvh, 24rem);
  overflow: clip;
}
.hero__rip {
  --h: clamp(4rem, 11vw, 10rem);
  position: absolute;
  inset: 0;
}
.hero__rip > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 30% 45%;
}
.hero__caption {
  position: absolute;
  left: var(--edge);
  bottom: clamp(6rem, 17vh, 11rem);
  z-index: var(--z-lift);
  color: var(--blend);
  mix-blend-mode: difference;
}
.hero__title {
  font-size: var(--t-xl);
  letter-spacing: 0.01em;
  text-transform: uppercase;
}
.hero__title span {
  display: block;
}
.hero__title span + span {
  padding-left: 1.6em;
}
.hero__sub {
  margin-top: 0.9rem;
  padding-left: 0.2em;
  font-size: var(--t-s);
  letter-spacing: 0.06em;
  text-transform: none;
}
/* tall screens (portrait tablets) crop the sides: keep her in frame */
@media (orientation: portrait) {
  .hero__rip > img {
    object-position: 66% 50%;
  }
}
@media (max-width: 899px) {
    .hero__rip > img {
    object-position: 66% 50%;
  }
}

.home-about {
  position: relative;
  margin-top: clamp(-9rem, -12vw, -3rem);
}
.home-about__title {
  font-size: var(--t-l);
  letter-spacing: -0.02em;
  margin-bottom: 1rem;
}
.home-work {
  margin-top: clamp(5rem, 12vw, 12rem);
}
.home-work__title {
  font-size: var(--t-xl);
  margin-bottom: 1rem;
}
.home-work__index {
  max-width: 30rem;
}
.home-work__text p {
  max-width: 44ch;
  margin-bottom: 1.2rem;
}
.home-work__sketch {
  width: 100%;
}
.home-archive {
  position: relative;
  margin-top: 3rem;
}
@media (min-width: 1280px) {
  .home-archive {
    margin-top: clamp(-9rem, -7vw, 2rem);
  }
}
@media (max-width: 899px) {
  .home-archive {
    margin-top: -4rem;
  }
}
.home-archive__img {
  --h: clamp(3rem, 6vw, 6rem);
}
.home-archive__img > img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
@media (max-width: 899px) {
  .home-archive__img {
    margin-inline: calc(var(--edge) * -1);
  }
  .home-archive__img > img {
    aspect-ratio: 4 / 3;
    object-position: 40% 50%;
  }
}

.crop-wide > img {
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

/* ---- work */

.work-intro {
  padding-top: clamp(6.5rem, 12vw, 10rem);
}
.work-intro__title {
  font-size: var(--t-xl);
  margin-bottom: 1.4rem;
}
.contents {
  margin-top: 1.8rem;
  display: grid;
  gap: 0.35rem;
  font-size: var(--t-s);
}
.contents a {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  text-decoration: none;
  padding-block: 0.15rem;
}
.contents__lead {
  flex: 1;
  min-width: 1.5rem;
  border-bottom: 2px dotted currentColor;
  opacity: 0.55;
  translate: 0 -0.3em;
}


.chapter {
  position: relative;
  z-index: var(--cz, auto);
  padding-block: clamp(5rem, 11vw, 11rem) 0;
  scroll-margin-top: 2rem;
}
.chapter__title {
  font-size: var(--t-xl);
  margin-bottom: 1.4rem;
}
.chapter__title--huge {
  font-size: clamp(2.8rem, 0.8rem + 7.4vw, 9.5rem);
  letter-spacing: -0.06em;
  color: var(--paper);
  text-shadow: 0 0 1.5rem rgb(0 0 0 / 0.6);
}
.chapter__desc {
  max-width: 50ch;
  margin-block: 1.4rem 1.2rem;
}
.chapter__note {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  margin-top: 0;
  transition:
    grid-template-rows 0.9s var(--slow),
    opacity 0.6s ease,
    margin-top 0.9s var(--slow);
}
.chapter__note.is-open {
  grid-template-rows: 1fr;
  opacity: 1;
  margin-top: 1.4rem;
}
.chapter__note-inner {
  min-height: 0;
  overflow: hidden;
}
.chapter__note p {
  max-width: 58ch;
}
.chapter__note p + p {
  margin-top: 1em;
}
.chapter__note-inner:focus {
  outline: none;
}
.chapter--paper {
  margin-top: clamp(-6rem, -5vw, -2rem);
  padding-block: calc(var(--h) + clamp(2rem, 5vw, 5rem));
}
.chapter--paper .sheet {
  filter: drop-shadow(0 1rem 1.2rem rgb(0 0 0 / 0.28));
}
.quote {
  font-size: var(--t-l);
  font-style: italic;
  line-height: 1.35;
  max-width: 30ch;
}
.quote p::before {
  content: "\201C";
}
.quote p::after {
  content: "\201D";
}

/* ---- archive */

.archive-intro {
  padding-top: clamp(6.5rem, 12vw, 10rem);
}
.archive-intro__title {
  font-size: var(--t-xl);
  margin-bottom: 1.2rem;
}
.archive-index {
  margin-top: 1.6rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: 0.2rem 1.5rem;
  font-size: var(--t-s);
}
.archive-index a {
  text-decoration: none;
}

.archive-index span:first-child {
  color: var(--pencil);
  margin-right: 0.6rem;
}

.shelf {
  padding-top: clamp(4rem, 8vw, 8rem);
  padding-bottom: clamp(3rem, 6vw, 6rem);
  row-gap: 6rem;
}
@media (min-width: 900px) {
  .shelf {
    row-gap: 0;
  }
}

.object {
  position: relative;
  scroll-margin-top: 3rem;
}
.object__img {
  display: block;
}

.object__label {
  position: relative;
  width: min(18rem, 86%);
  margin: -3.5rem 0 0 auto;
  rotate: var(--tr, 2deg);
  filter: drop-shadow(0 0.8rem 1rem rgb(0 0 0 / 0.45));
}
/* string from the punched hole up towards the photo */
.object__label::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -2.2rem;
  width: 1px;
  height: 3.5rem;
  background: var(--paper-shade);
  rotate: 18deg;
  transform-origin: bottom;
}

.object--label-left .object__label {
  margin: -3.5rem auto 0 0;
}
.tag__no {
  font-size: var(--t-xs);
  letter-spacing: 0.14em;
  color: var(--pencil);
}
.tag__name {
  margin-top: 0.3rem;
  font-size: var(--t-l);
  letter-spacing: -0.03em;
}
.tag__name a {
  text-decoration: none;
}

.tag__desc {
  margin-top: 0.5rem;
}
.tag .stamp {
  margin-top: 0.9rem;
}

/* archive viewer (native dialog, content loaded by htmx) */
.viewer {
  width: min(100vw - 2 * var(--edge), 80rem);
  max-width: none;
  max-height: none;
  height: min(94dvh, 64rem);
  margin: auto auto 0;
  padding: 0;
  border: 0;
  color: var(--ink);
  background: transparent;
  overflow: visible;
}
.viewer::backdrop {
  background: rgb(8 8 8 / 0.86);
}
.viewer__sheet {
  --h: 3.5rem;
  --fg: var(--ink);
  --bg: var(--paper);
  height: 100%;
  overflow: auto;
  overscroll-behavior: contain;
  padding: calc(var(--h) + 1.5rem) clamp(1.2rem, 3vw, 3rem) 3rem;
}
/* the enquiry bar always sits at the bottom edge of the sheet, whether the
   piece's content is shorter or longer than the sheet */
.viewer__sheet:has(.piece__bar) {
  display: flex;
  flex-direction: column;
  padding-bottom: 0;
}
#viewer-body {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
}
.piece {
  flex: 1 0 auto;
  grid-template-rows: auto auto 1fr;
}
.piece__bar {
  align-self: end;
}
@media (min-width: 1100px) {
  .piece {
    grid-template-rows: auto 1fr;
  }
}
.viewer {
  padding-top: env(safe-area-inset-top);
}
.viewer__close {
  position: absolute;
  top: -2.4rem;
  right: 0;
  color: var(--paper);
  font-size: var(--t-s);
  letter-spacing: 0.08em;
  text-decoration: underline;
  text-underline-offset: 0.25em;
  padding: 0.4rem 0;
}
.viewer__loading,
.viewer__error {
  display: none;
  font-size: var(--t-s);
}
.viewer.is-loading .viewer__loading,
.viewer.is-error .viewer__error {
  display: block;
}
.viewer__loading::after {
  content: "_";
  animation: blink 1s steps(1) infinite;
}

.piece {
  display: grid;
  gap: 2rem;
}
/* carousel: one photo at a time, centred; swipe, arrows or thumbnails */
.piece__media {
  min-width: 0;
}
.piece__stage {
  position: relative;
}
.piece__gallery {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.piece__gallery::-webkit-scrollbar {
  display: none;
}
.piece__gallery img {
  flex: 0 0 100%;
  width: 100%;
  height: min(60dvh, 40rem, 118vw);
  max-width: none;
  object-fit: contain;
  scroll-snap-align: center;
  scroll-snap-stop: always;
}
.piece__arrow {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  color: var(--paper);
  background: var(--ink);
  font-size: 1.1rem;
  opacity: 0.88;
  transition: opacity 0.3s ease;
}
.piece__arrow:hover,
.piece__arrow:focus-visible {
  opacity: 1;
}
.piece__arrow:active {
  translate: 0 calc(-50% + 1px);
}
.piece__arrow--prev {
  left: 0;
}
.piece__arrow--next {
  right: 0;
}
/* contact-sheet strip: shows how many photos there are and which is open */
.piece__thumbs {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.9rem;
}
.piece__thumbs button {
  width: 2.9rem;
  aspect-ratio: 4 / 5;
  padding: 0;
  opacity: 0.45;
  outline: 1px solid transparent;
  outline-offset: 2px;
  transition:
    opacity 0.4s ease,
    outline-color 0.4s ease;
}
.piece__thumbs button[aria-current="true"] {
  opacity: 1;
  outline-color: var(--ink);
}
.piece__thumbs button:hover {
  opacity: 0.85;
}
.piece__thumbs img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.piece__gallery:focus-visible {
  outline-offset: 2px;
}
.piece__title:focus {
  outline: none;
}
.piece__title {
  font-size: var(--t-xl);
  margin-block: 0.3rem 1.2rem;
}
.piece__text p {
  max-width: 56ch;
}
.piece__text p + p {
  margin-top: 1em;
}
.piece__text .meta {
  margin-block: 1.6rem;
}
.piece__bar {
  --pad: clamp(1.2rem, 3vw, 3rem);
  position: sticky;
  bottom: 0;
  z-index: 2;
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 0.6rem 1.6rem;
  margin: 0 calc(var(--pad) * -1);
  padding: 0.9rem var(--pad) calc(0.9rem + env(safe-area-inset-bottom));
  background: var(--paper) url("../tex/paper.webp") center / 700px;
  box-shadow: 0 -1.2rem 1.4rem -1.2rem rgb(0 0 0 / 0.35);
  border-top: 1px solid rgb(13 13 13 / 0.18);
}
.piece__bar-name {
  font-size: var(--t-s);
  color: var(--pencil);
}
.piece__bar-name strong {
  margin-left: 0.4rem;
  font-weight: 400;
  color: var(--ink);
}
.piece__bar-price {
  font-size: var(--t-s);
}
@media (max-width: 599px) {
  .piece__enquire {
    flex-basis: 100%;
    max-width: 16rem;
  }
}
.piece__enquire {
  --marker: var(--paper);
  --marker-text: var(--ink);
  display: inline-block;
  padding: 0.85rem 1.6rem 0.8rem;
  color: var(--paper);
  background: var(--ink);
  font-size: var(--t-s);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
}
.piece__enquire::before {
  inset: 0.35rem 0.6rem;
}
.piece__enquire:active {
  translate: 0 1px;
}
.piece__credit {
  margin-top: 1.6rem;
  font-size: var(--t-xs);
  letter-spacing: 0.04em;
  color: var(--pencil);
}
@media (min-width: 1100px) {
  .piece {
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
    align-items: start;
  }
  .piece__media {
    grid-row: 1;
  }
  .piece__text {
    position: sticky;
    top: 0;
  }
}

/* ---- about */

.about-top {
  padding-top: clamp(6.5rem, 10vw, 9rem);
}
.about-name {
  font-size: clamp(3rem, 0.4rem + 8.6vw, 10rem);
  line-height: 0.82;
  letter-spacing: -0.07em;
  text-transform: uppercase;
  color: var(--paper);
}
.about-name span {
  display: block;
}
@media (max-width: 899px) {
  .about-name {
    font-size: 16vw;
  }
}
.about-name span + span {
  padding-left: 0.9em;
}
.idcard .meta {
  grid-template-columns: max-content 1fr;
}
.idcard__title {
  font-size: var(--t-s);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}
.statement {
  font-size: var(--t-l);
  line-height: 1.45;
  max-width: 38ch;
}
.statement em {
  font-style: italic;
}

@media (max-width: 899px) {
  .about-name,
  .chapter__title--huge {
    margin-top: 0 !important;
  }
  .hero__caption {
    mix-blend-mode: normal;
    color: var(--paper);
    text-shadow: 0 0 1.2rem rgb(0 0 0 / 0.75), 0 0 0.3rem rgb(0 0 0 / 0.6);
  }
}

/* ---- contact: quiet on purpose */

.contact {
  min-height: 100dvh;
  display: grid;
  align-content: center;
  padding: clamp(7rem, 14vw, 10rem) var(--edge) clamp(3rem, 8vw, 6rem);
}
.contact__inner {
  width: 100%;
  max-width: 46rem;
}
@media (min-width: 900px) {
  .contact__inner {
    margin-left: clamp(0rem, 16vw, 18rem);
  }
}
.contact__title {
  font-size: var(--t-l);
  letter-spacing: 0.02em;
  margin-bottom: clamp(3rem, 8vw, 6rem);
}
.contact__list {
  display: grid;
  gap: clamp(1.6rem, 3.4vw, 2.6rem);
}
.contact__row {
  display: grid;
  gap: 0.35rem;
}
.contact__row dd {
  font-size: var(--t-l);
  line-height: 1.35;
  letter-spacing: -0.01em;
}
.contact__row dd a {
  text-decoration: none;
  background: linear-gradient(currentColor 0 0) left bottom / 100% 1px no-repeat;
}
.contact__legal {
  margin-top: clamp(4rem, 10vw, 7rem);
  font-size: var(--t-xs);
  line-height: 1.7;
  letter-spacing: 0.03em;
  color: var(--graphite);
}
.contact__legal h2 {
  font-size: var(--t-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}
@media (min-width: 700px) {
  .contact__row {
    grid-template-columns: 9rem 1fr;
    align-items: baseline;
  }
}

/* ---- 404 */

.lost {
  min-height: 100dvh;
  display: grid;
  place-content: center start;
  gap: 1.5rem;
  padding: 8rem var(--edge);
}
.lost h1 {
  font-size: var(--t-xl);
}

/* 7. motion ---------------------------------------------------------------- */

@keyframes blink {
  50% {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }

  /* sheets settle onto the desk as they enter the viewport */
  .js [data-reveal] {
    opacity: 0;
    translate: 0 3rem;
    transition:
      opacity 1.6s var(--slow) var(--delay, 0s),
      translate 1.6s var(--slow) var(--delay, 0s),
      rotate 1.6s var(--slow) var(--delay, 0s);
  }
  .js .collage > [data-reveal] {
    rotate: calc(var(--r, 0deg) + 2.5deg);
  }
  .js [data-reveal].is-visible {
    opacity: 1;
    translate: 0 0;
  }
  .js .collage > [data-reveal].is-visible {
    rotate: var(--r, 0deg);
  }

  /* hero: the photograph develops, then the name surfaces; both wait until
     the photo is decoded and the font is loaded (main.js adds .is-ready) */
  .js .hero:not(.is-ready) .hero__rip > img,
  .js .hero:not(.is-ready) .hero__caption {
    opacity: 0;
  }
  .js .hero.is-ready .hero__rip > img {
    animation: develop 2.8s var(--slow) both;
  }
  .js .hero.is-ready .hero__caption {
    animation: surface 2s 1.2s var(--slow) both;
  }

  /* layered images drift at slightly different speeds (not on small screens,
     where the stacked layout has no room for it) */
  @supports (animation-timeline: view()) {
    @media (min-width: 900px) {
      [data-drift] {
        animation: drift linear both;
        animation-timeline: view();
        animation-range: cover 0% cover 100%;
      }
    }
    .unveil {
      animation: unveil linear both;
      animation-timeline: view();
      animation-range: entry 10% cover 45%;
    }
  }

  .viewer[open] .viewer__sheet {
    animation: rise 1s var(--slow) both;
  }
  .viewer[open]::backdrop {
    animation: fade 0.8s ease both;
  }

  /* page change: the old page sinks, the new sheet is drawn up over it */
  ::view-transition-old(root) {
    animation: sink 0.8s var(--slow) both;
  }
  ::view-transition-new(root) {
    animation: pull-up 1.2s 0.1s var(--slow) both;
  }
}

@media (prefers-reduced-motion: reduce) {
  .chapter__note,
  .masthead__mark,
  .masthead__nav,
  .typed-link::before,
  .masthead__nav a::before,
  .tag__name a::before,
  .contact__row dd a::before,
  .viewer__close::before,
  .contents__name::before,
  .archive-index a span:last-child::before,
  .piece__enquire::before {
    transition: none !important;
  }
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}

@view-transition {
  navigation: auto;
}

@keyframes develop {
  from {
    opacity: 0;
    scale: 1.06;
  }
}
@keyframes surface {
  from {
    opacity: 0;
    translate: 0 1.2rem;
  }
}
@keyframes drift {
  from {
    transform: translateY(var(--drift, 3rem));
  }
  to {
    transform: translateY(calc(var(--drift, 3rem) * -1));
  }
}
@keyframes unveil {
  from {
    clip-path: inset(0 0 100% 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}
@keyframes rise {
  from {
    opacity: 0;
    translate: 0 30%;
  }
}
@keyframes fade {
  from {
    opacity: 0;
  }
}
@keyframes sink {
  to {
    opacity: 0;
    scale: 0.985;
  }
}
@keyframes pull-up {
  from {
    clip-path: inset(100% 0 0 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}

@media (max-width: 599px) {
  .piece__thumbs {
    flex-wrap: nowrap;
    gap: 0.35rem;
  }
  .piece__thumbs button {
    width: min(2.4rem, calc((100% - 2.4rem) / 7));
  }
}