/* 05 · Prints on a table
   Matte work-prints laid out on moss-green felt. */

:root {
  --felt: #4a5044;
  --felt-hi: #586050;
  --felt-lo: #3a3f35;
  --paper: #d6c9b3;
  --paper-2: #cbbda5;
  --ink: #2d2b26;
  --ink-soft: #5d554c;
  --cream: #ece5d8;
  --cream-dim: #c3c0b0;
  --clay: #b77a52;
  --serif: "Cormorant", "Cormorant Garamond", Georgia, serif;
  --type: "Courier Prime", "Courier New", ui-monospace, monospace;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --shadow:
    0 1px 1px rgba(20, 22, 16, .28),
    0 4px 8px -3px rgba(20, 22, 16, .32),
    0 16px 28px -14px rgba(20, 22, 16, .55);
  --shadow-up:
    0 2px 3px rgba(20, 22, 16, .2),
    0 14px 22px -8px rgba(20, 22, 16, .38),
    0 40px 60px -24px rgba(20, 22, 16, .6);
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  background: var(--felt);
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--cream);
  font-family: var(--serif);
  font-size: 1.125rem;
  line-height: 1.5;
  overflow-x: hidden;
  background-color: var(--felt);
  background-image:
    radial-gradient(ellipse 90% 60% at 50% 0%, rgba(110, 118, 98, .35), transparent 70%),
    radial-gradient(ellipse 120% 80% at 50% 50%, transparent 55%, rgba(30, 33, 27, .45) 100%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}

/* felt grain */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .5;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .22;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012 .02' numOctaves='2' seed='3'/%3E%3CfeColorMatrix values='0 0 0 0 .25 0 0 0 0 .28 0 0 0 0 .22 0 0 0 1.4 -.3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
}

body > * { position: relative; z-index: 1; }

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
::selection { background: var(--clay); color: var(--paper); }

:focus-visible {
  outline: 2px solid var(--paper);
  outline-offset: 4px;
  border-radius: 1px;
}

.typed {
  font-family: var(--type);
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.skip {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 50;
  padding: .6rem .9rem;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--type);
  font-size: .85rem;
  text-decoration: none;
  box-shadow: var(--shadow);
}
.skip:focus { top: 1rem; }

/* ---------- top bar ---------- */
.bar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  max-width: 1360px;
  margin: 0 auto;
  padding: 1.6rem clamp(1rem, 4vw, 3rem) 0;
}
.bar__name {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.35rem;
  text-decoration: none;
  color: var(--cream);
}
.bar { justify-content: flex-end; }
.bar__nav { display: flex; gap: clamp(.9rem, 2.4vw, 2rem); }
.bar__nav a {
  font-family: var(--type);
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--cream-dim);
  padding: .2rem 0;
  border-bottom: 1px solid transparent;
  transition: color .3s, border-color .3s;
}
.bar__nav a:hover { color: var(--cream); border-color: currentColor; }

/* ---------- hero ---------- */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
  max-width: 1360px;
  margin: 0 auto;
  padding: clamp(3rem, 7vw, 6rem) clamp(1rem, 4vw, 3rem) clamp(3rem, 6vw, 5rem);
}
.hero .typed { color: var(--cream-dim); margin: 0 0 1.4rem; }
.hero h1 {
  margin: 0;
  font-weight: 400;
  line-height: .9;
  letter-spacing: -.01em;
  font-size: clamp(3.4rem, 8.4vw, 7.6rem);
  color: var(--paper);
}

.hero__lede {
  max-width: 26em;
  margin: 1.6rem 0 0;
  font-style: italic;
  font-size: clamp(1.5rem, 2.4vw, 2.1rem);
  line-height: 1.4;
  color: var(--cream);
}
.hero__links {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem 2rem;
  margin: 2.2rem 0 0;
}
.link {
  font-family: var(--type);
  font-size: .88rem;
  letter-spacing: .02em;
  color: var(--paper);
  text-decoration: none;
  border-bottom: 1px solid rgba(242, 237, 228, .45);
  padding-bottom: .15rem;
  transition: border-color .3s;
}
.link:hover { border-color: var(--paper); }

/* stack of three prints */
.stack {
  position: relative;
  width: min(100%, 420px);
  aspect-ratio: 3 / 4;
  margin: 0 auto;
  justify-self: center;
}
.stack__print {
  position: absolute;
  inset: 0;
  padding: 3.2%;
  background: var(--paper);
  box-shadow: var(--shadow);
  transition: transform 1s var(--ease);
}
.stack__print picture, .stack__print img { width: 100%; height: 100%; }
.stack__print img { object-fit: contain; background: #bfb29c; }
.stack__print--1 { transform: translate(-13%, 5%) rotate(-8deg); }
.stack__print--2 { transform: translate(12%, -3%) rotate(6deg); }
.stack__print--3 { transform: rotate(-1deg); box-shadow: var(--shadow-up); }
.hero:hover .stack__print--1 { transform: translate(-17%, 6%) rotate(-10deg); }
.hero:hover .stack__print--2 { transform: translate(16%, -4%) rotate(7.5deg); }
.hero:hover .stack__print--3 { transform: translateY(-1%) rotate(0deg); }

/* ---------- chapter index ---------- */
.index {
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 clamp(1rem, 4vw, 3rem);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .6rem 2.4rem;
  border-top: 1px solid rgba(236, 229, 216, .14);
  padding-top: 1.4rem;
}
.index__label { margin: 0; color: var(--cream-dim); }
.index ol {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.index a {
  font-size: 1.25rem;
  font-style: italic;
  text-decoration: none;
  color: var(--cream);
  border-bottom: 1px solid transparent;
  transition: border-color .3s;
}
.index a:hover { border-color: currentColor; }
.index a span {
  font-family: var(--type);
  font-style: normal;
  font-size: .72rem;
  color: var(--cream-dim);
  margin-right: .3rem;
}

/* ---------- chapters ---------- */
.work { max-width: 1360px; margin: 0 auto; padding: 0 clamp(1rem, 4vw, 3rem); }
.chapter { padding-top: clamp(4rem, 8vw, 7rem); scroll-margin-top: 1rem; }
.chapter__head {
  display: flex;
  align-items: baseline;
  gap: 1rem 1.4rem;
  flex-wrap: wrap;
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
}
.chapter__num {
  font-family: var(--type);
  font-size: .8rem;
  color: var(--cream-dim);
  letter-spacing: .1em;
  min-width: 2.2em;
}
.chapter h2 {
  margin: 0;
  font-weight: 400;
  font-style: italic;
  font-size: clamp(2.4rem, 4.6vw, 3.8rem);
  line-height: 1;
  color: var(--paper);
}
.chapter__count {
  font-family: var(--type);
  font-size: .75rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--cream-dim);
  flex: 1;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.chapter__count::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(236, 229, 216, .16);
}

/* the table: loose, hand-placed rows */
.table {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  column-gap: 4.5%;
  row-gap: clamp(3rem, 5vw, 4.5rem);
}

.print {
  --w: 26%;
  position: relative;
  flex: 0 0 var(--w);
  width: var(--w);
  margin: var(--dy) 0 0;
  transform: translateX(var(--dx, 0)) rotate(var(--r));
  transition: transform .7s var(--ease);
  z-index: 1;
}
.print--s { --w: 22%; }
.print--m { --w: 26%; }
.print--l { --w: 29%; }
.print--w { --w: 40%; }

.print__paper {
  display: block;
  padding: clamp(7px, .85vw, 13px);
  background: linear-gradient(160deg, var(--paper), var(--paper-2));
  box-shadow: var(--shadow);
  transition: box-shadow .7s var(--ease), transform .7s var(--ease);
  cursor: zoom-in;
}
.print__paper img {
  width: 100%;
  background: #bfb29c;
  opacity: 0;
  transition: opacity .9s ease;
}
.print__paper img.is-loaded, .no-js .print__paper img { opacity: 1; }
/* a whisper of matte sheen over the emulsion */
.print__paper picture { position: relative; display: block; }
.print__paper picture::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(125deg, rgba(255, 250, 240, .07), transparent 40%, rgba(0, 0, 0, .04));
}

.print:hover, .print:focus-within { transform: translate(var(--dx, 0), -8px) rotate(0deg); z-index: 3; }
.print:hover .print__paper, .print:focus-within .print__paper { box-shadow: var(--shadow-up); }
.print__paper:focus-visible { outline-offset: 6px; }

/* paper tag tucked under the bottom edge */
.tag {
  position: absolute;
  top: calc(100% - 5px);
  max-width: 78%;
  margin: 0;
  padding: .8rem .65rem .5rem;
  background: #cfc2ab;
  color: var(--ink);
  font-family: var(--type);
  font-size: .7rem;
  line-height: 1.35;
  box-shadow: 0 1px 1px rgba(20, 22, 16, .25), 0 4px 8px -4px rgba(20, 22, 16, .35);
  transform: rotate(var(--tr));
  transition: transform .7s var(--ease);
  z-index: -1;
}
.tag--r { right: 7%; }
.tag--l { left: 7%; }
.tag__no { display: block; color: var(--ink-soft); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; }
.tag__txt { display: block; }
.print:hover .tag { transform: rotate(0deg) translateY(2px); }

/* ---------- about & contact cards ---------- */
.cards {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
  max-width: 1120px;
  margin: 0 auto;
  padding: clamp(6rem, 11vw, 10rem) clamp(1rem, 4vw, 3rem) clamp(4rem, 8vw, 7rem);
}
.card {
  position: relative;
  padding: clamp(1.8rem, 3.5vw, 3rem);
  background: linear-gradient(170deg, var(--paper), var(--paper-2));
  color: var(--ink);
  box-shadow: var(--shadow);
  scroll-margin-top: 2rem;
}
.card--about { transform: rotate(-.8deg); }
.card--contact { transform: rotate(1deg); margin-top: 3rem; }
.card__title {
  margin: 0 0 1.2rem;
  font-family: var(--type);
  font-weight: 400;
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding-bottom: .8rem;
  border-bottom: 1px solid rgba(45, 43, 38, .18);
}
.card__body {
  margin: 0;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  line-height: 1.3;
}
.card__sig { margin: 1.6rem 0 0; color: var(--ink-soft); text-transform: none; letter-spacing: .02em; font-size: .85rem; }
.card__note { margin: 0; color: var(--ink-soft); text-transform: none; letter-spacing: .02em; font-size: .88rem; }
.card__mail { margin: .7rem 0 0; font-size: clamp(1.7rem, 3vw, 2.4rem); line-height: 1.2; }
.card__mail a {
  font-style: italic;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid rgba(143, 88, 55, .55);
  overflow-wrap: anywhere;
  transition: color .3s, border-color .3s;
}
.card__mail a:hover { color: #8f5837; border-color: #8f5837; }
.card :focus-visible { outline-color: var(--ink); }

/* ---------- footer ---------- */
.foot {
  max-width: 1360px;
  margin: 0 auto;
  padding: 2rem clamp(1rem, 4vw, 3rem) 2.6rem;
  border-top: 1px solid rgba(236, 229, 216, .14);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .6rem 2rem;
  font-family: var(--type);
  font-size: .78rem;
  color: var(--cream-dim);
}
.foot p { margin: 0; }
.foot span { white-space: nowrap; }
.foot a { color: var(--cream); }

/* ---------- lightbox ---------- */
.lb {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem;
  padding: 3.5rem clamp(.5rem, 2vw, 2rem) 4.5rem;
  background: rgba(36, 40, 33, .965);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity .35s ease;
}
.lb[hidden] { display: none; }
.lb.is-open { opacity: 1; }
.lb__fig {
  position: relative;
  margin: 0;
  justify-self: center;
  max-width: 100%;
}
.lb__paper {
  padding: clamp(8px, 1.1vw, 16px);
  background: var(--paper);
  box-shadow: var(--shadow-up);
  transform: rotate(-.4deg);
}
.lb__img {
  width: auto;
  height: auto;
  max-width: min(100%, calc(100vw - 9rem));
  max-height: calc(100vh - 9.5rem);
  max-height: calc(100dvh - 9.5rem);
  object-fit: contain;
  background: #bfb29c;
}
.lb__tag {
  position: absolute;
  top: calc(100% - 4px);  right: 6%;
  max-width: 80%;
  padding: .85rem .7rem .5rem;
  background: #cfc2ab;
  color: var(--ink);
  font-family: var(--type);
  font-size: .75rem;
  line-height: 1.35;
  transform: rotate(1.2deg);
  box-shadow: 0 1px 1px rgba(20, 22, 16, .25), 0 4px 8px -4px rgba(20, 22, 16, .35);
  z-index: -1;
}
.lb__btn {
  appearance: none;
  border: 1px solid rgba(236, 229, 216, .3);
  background: rgba(58, 63, 53, .6);
  color: var(--cream);
  font-family: var(--type);
  font-size: .82rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .25s, border-color .25s;
}
.lb__btn:hover { background: rgba(236, 229, 216, .12); border-color: var(--cream); }
.lb__prev, .lb__next { width: 3rem; height: 3rem; border-radius: 50%; font-size: 1.1rem; }
.lb__close { position: absolute; top: .9rem; right: clamp(.5rem, 2vw, 2rem); padding: .45rem .8rem; }

/* ---------- responsive ---------- */
@media (max-width: 980px) {
  .print--s, .print--m, .print--l { --w: 42%; }
  .print--w { --w: 70%; }
  .table { column-gap: 7%; }
}

@media (max-width: 760px) {
  .hero { grid-template-columns: 1fr; padding-top: 2.5rem; }
  .stack { order: -1; width: min(72%, 320px); margin-bottom: 1.5rem; }
  .cards { grid-template-columns: 1fr; }
  .card--contact { margin-top: 0; }
}

@media (max-width: 600px) {
  body { font-size: 1.0625rem; }
  .bar { padding-top: 1.2rem; }
  .bar__name { font-size: 1.15rem; }
  .bar__nav { gap: .9rem; }
  .bar__nav a { font-size: .7rem; }
  .table { flex-direction: column; align-items: center; row-gap: 4.2rem; }
  .print, .print--s, .print--m, .print--l { --w: 86%; margin-top: 0; }
  .print--w { --w: 92%; }
  .print { width: var(--w); flex: none; }
  .print:nth-child(odd) { transform: rotate(-1.1deg); }
  .print:nth-child(even) { transform: rotate(1.1deg); }
  .print:hover, .print:focus-within { transform: rotate(0deg) translateY(-4px); }
  .chapter__count::after { display: none; }
  .lb { grid-template-columns: 1fr; padding: 3.5rem .75rem 6rem; }
  .lb__img { max-width: 100%; max-height: calc(100vh - 12rem); max-height: calc(100dvh - 12rem); }
  .lb__prev, .lb__next { position: absolute; bottom: 1.1rem; }
  .lb__prev { left: calc(50% - 4rem); }
  .lb__next { right: calc(50% - 4rem); }
  .foot { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .print:hover, .print:focus-within { transform: translateX(var(--dx, 0)) rotate(var(--r)); }
}

.card__body--sub { font-size: 1.05rem; color: var(--ink-soft); margin-top: 1rem; }