/* ==========================================================================
   THE SANC: TWEAK EVERYTHING HERE
   ========================================================================== */
:root {
  /* COLORS */
  --bg: #ECEEF0;            /* page background */
  --ink: #111417;           /* wordmark, names, values, button outlines */
  --muted: #5E656C;         /* small labels */
  --body: #3A4047;          /* paragraphs */
  --line: #C9CED3;          /* hairlines */
  --on-ink: #ECEEF0;        /* text on solid ink buttons */
  --plate-text: #ECEEF0;    /* small labels on top of photos */

  /* FONTS: if you change these, also change the Google Fonts link in each .html file */
  --font-main: "Geist", system-ui, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, monospace;

  /* TYPE SIZES */
  --size-wordmark: 24px;
  --size-name: 40px;
  --size-date: 56px;
  --size-body: 15px;
  --size-mono: 11px;
  --mono-spacing: 0.06em;

  /* PHOTOS
     Real photos show in black and white. For full color, use:  --photo-filter: none;  */
  --photo-filter: grayscale(1) contrast(1.04);
  /* contain = the whole photo always shows (nothing cut off)
     cover   = the photo fills the frame edge to edge (edges get cropped)   */
  --photo-fit: contain;
  --photo-bg: #FFFFFF;      /* backing behind photos when they don't fill the frame */

  /* PHOTO PLACEHOLDERS */
  --plate-main: radial-gradient(ellipse at 50% 45%, #B0B6BD 0%, #8D949B 45%, #5A6168 85%, #32373E 100%);
  --plate-light: linear-gradient(170deg, #ABB1B8 0%, #5D646B 100%);
  --plate-dark: linear-gradient(170deg, #7C8289 0%, #32363D 100%);

  /* SPACING */
  --gutter: 16px;

  /* INTRO TIMING: raise these to slow the intro down, lower them to speed it up */
  --intro-start: 0.3s;          /* wait before the first letter */
  --intro-letter-gap: 90ms;     /* gap between letters */
  --intro-letter-time: 0.9s;    /* how long each letter takes to rise */
  --intro-line-time: 1.6s;      /* hairlines drawing across */
  --intro-label-delay: 1.3s;    /* when the corner labels fade in */
  --intro-label-time: 0.9s;     /* how long the labels take to fade in */
  --intro-photo-time: 6s;       /* background photo settling */
  --intro-pulse-time: 2.8s;     /* "scroll or tap" pulse */

  /* REVEAL TIMING */
  --reveal-time: 1.1s;          /* curtain sliding up */
  --reveal-ease: cubic-bezier(0.76, 0, 0.24, 1);
  --reveal-photo-time: 2s;      /* offering photo sharpening */
  --reveal-header-delay: 0.6s;  /* when the header fades in */
  --reveal-header-time: 0.9s;
  --reveal-rise-delay: 0.8s;    /* when the info blocks begin */
  --reveal-rise-time: 0.8s;     /* how long each block takes */
  --reveal-stagger: 110ms;      /* gap between blocks */
  --soft-ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* PAGE TRANSITIONS: moving between pages and swapping things on a page */
  --page-out-time: 0.45s;       /* current page fading out after a click */
  --page-in-time: 0.8s;         /* next page fading in */
  --page-rise: 12px;            /* how far the page content rises as it appears */
  --swap-time: 0.3s;            /* photos, filters and bag items fading out */
  --tile-stagger: 60ms;         /* gap between archive tiles appearing */

  /* INDEX TIMING */
  --index-nudge: 12px;          /* how far a name moves on hover */
  --index-time: 0.45s;          /* nudge, photo swap, row opening */
}

/* ===== Base ===== */
*, *::before, *::after { box-sizing: border-box; border-radius: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--body);
  font: 400 var(--size-body)/1.6 var(--font-main);
  overflow-wrap: anywhere;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p, dl, dd, ul { margin: 0; padding: 0; }
ul { list-style: none; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.solid:focus-visible { outline-offset: 3px; }

.mono {
  font: 400 var(--size-mono)/1.5 var(--font-mono);
  letter-spacing: var(--mono-spacing);
  text-transform: uppercase;
}
.muted { color: var(--muted); }
.ink { color: var(--ink); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Password lock: hides the page until unlocked */
html.locked #site { display: none; }
html:not(.locked) #gate { display: none; }

/* ===== Top bar ===== */
.topbar {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px;
  padding: 10px var(--gutter);
  border-bottom: 1px solid var(--line);
  color: var(--muted);
}

/* ===== Header ===== */
.header { display: flex; flex-wrap: wrap; border-bottom: 1px solid var(--line); }
.wordmark {
  font: 500 var(--size-wordmark)/1 var(--font-main);
  letter-spacing: -0.03em;
  color: var(--ink);
}
.header .wordmark { flex: 1 1 auto; display: flex; align-items: center; padding: 18px var(--gutter); }
.nav-cell {
  display: flex; align-items: center;
  min-height: 56px; padding: 0 var(--gutter);
  border-left: 1px solid var(--line);
  color: var(--ink);
}
.nav-cell:hover, .nav-cell[aria-current="page"] { text-decoration: underline; text-underline-offset: 4px; }
.nav { display: flex; }
.menu-btn { display: none; }

@media (max-width: 767px) {
  /* Home: wordmark on top, nav in a 2 by 2 grid */
  .header--full .wordmark { flex-basis: 100%; }
  .header--full .nav { flex-basis: 100%; display: grid; grid-template-columns: 1fr 1fr; }
  .header--full .nav-cell { border-left: 0; }
  .header--full .nav-cell:nth-child(even) { border-left: 1px solid var(--line); }

  /* Inner pages: wordmark, MENU, BAG */
  .header--compact .menu-btn { display: flex; }
  .header--compact .nav { display: none; order: 5; flex-basis: 100%; flex-direction: column; }
  .header--compact.open .nav { display: flex; }
  .header--compact .nav .nav-cell { border-left: 0; border-top: 1px solid var(--line); }
  .header--compact .nav .nav-bag { display: none; }
}
@media (min-width: 768px) { .bag-short { display: none; } }

/* ===== Plates (photos and placeholders) ===== */
.plate {
  position: relative; display: block; width: 100%;
  aspect-ratio: 4 / 5; overflow: hidden;
  background: var(--plate-light);
  color: var(--plate-text);
}
.plate--main { background: var(--plate-main); }
.plate--dark { background: var(--plate-dark); }
.plate img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: var(--photo-fit); filter: var(--photo-filter);
}
/* Frames holding a real photo get a plain backing instead of the grey placeholder */
.plate:has(img) { background: var(--photo-bg); color: var(--muted); }
.plate-labels {
  position: absolute; left: 12px; right: 12px; bottom: 10px;
  display: flex; justify-content: space-between; gap: 12px;
}
.plate-frame { padding: var(--gutter); }

/* ===== Rows ===== */
.strip {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 14px var(--gutter);
  border-bottom: 1px solid var(--line);
}
.row {
  display: flex; justify-content: space-between; gap: 24px;
  padding: 12px var(--gutter);
  border-bottom: 1px solid var(--line);
}
.row dd { color: var(--ink); text-align: right; }
.row dt { color: var(--muted); }

.name {
  font: 400 var(--size-name)/1.1 var(--font-main);
  letter-spacing: -0.025em;
  color: var(--ink);
}
.block { padding: 24px var(--gutter); border-bottom: 1px solid var(--line); }
.block > * + * { margin-top: 12px; }
.price { font-size: 18px; color: var(--ink); margin-top: 16px; }

/* ===== Buttons ===== */
.btn {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  width: 100%; min-height: 52px; padding: 12px 16px;
  border: 1px solid var(--ink);
  background: transparent; color: var(--ink);
  font: 400 var(--size-mono)/1.5 var(--font-mono);
  letter-spacing: var(--mono-spacing); text-transform: uppercase;
}
.btn--center { justify-content: center; text-align: center; }
.btn:hover { text-decoration: underline; text-underline-offset: 3px; }
.btn.solid { background: var(--ink); color: var(--on-ink); }
.btn[disabled] { border-color: var(--muted); color: var(--muted); cursor: default; text-decoration: none; }
.action { padding: var(--gutter); border-bottom: 1px solid var(--line); }
.action .note { display: block; margin-top: 12px; text-align: center; color: var(--muted); }

/* ===== Lined grid ===== */
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tile {
  display: block; padding: var(--gutter);
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
}
.tile:nth-child(2n) { border-right: 0; }
.tile-meta { display: flex; justify-content: space-between; gap: 8px; margin-top: 12px; }
.tile-name { margin-top: 6px; color: var(--ink); line-height: 1.3; }
.tile:hover .tile-name { text-decoration: underline; text-underline-offset: 3px; }

@media (min-width: 768px) {
  .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tile:nth-child(2n) { border-right: 1px solid var(--line); }
  .tile:nth-child(3n) { border-right: 0; }
}

/* ===== Two-column layout on desktop ===== */
@media (min-width: 900px) {
  .split { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); border-bottom: 1px solid var(--line); }
  .split > :first-child { border-right: 1px solid var(--line); }
  .split > :last-child > :last-child { border-bottom: 0; }
  .split .plate--main { max-height: 86vh; }
}

/* ===== Next offering + signup ===== */
.next { padding: 40px var(--gutter) 32px; border-bottom: 1px solid var(--line); }
.next-date {
  margin-top: 12px;
  font: 300 var(--size-date)/1.08 var(--font-main);
  letter-spacing: -0.035em;
  color: var(--ink);
}
.signup { margin-top: 48px; max-width: 520px; }
.signup label { display: block; margin-bottom: 12px; color: var(--muted); }
.boxed { display: flex; border: 1px solid var(--ink); }
.boxed input {
  flex: 1 1 auto; min-width: 0; min-height: 50px; padding: 0 14px;
  background: transparent; border: 0;
  font-size: 16px; /* stops iPhones zooming in on tap */
  color: var(--ink);
}
.boxed input::placeholder { color: var(--muted); opacity: 1; }
.boxed input:focus-visible { outline-offset: -3px; }
.boxed button {
  flex: none; padding: 0 22px;
  background: var(--ink); color: var(--on-ink);
  font: 400 var(--size-mono)/1 var(--font-mono);
  letter-spacing: var(--mono-spacing); text-transform: uppercase;
}
.form-msg { min-height: 18px; margin-top: 10px; color: var(--ink); }
@media (min-width: 900px) {
  .next { display: grid; grid-template-columns: 1.1fr 1fr; gap: 32px; align-items: end; }
  .signup { margin-top: 0; }
}

/* ===== Footer ===== */
.footer {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px;
  padding: 18px var(--gutter);
  color: var(--muted);
}
.footer-links { display: flex; flex-wrap: wrap; gap: 8px 22px; }

/* ===== Archive ===== */
.filters { display: flex; flex-wrap: wrap; border-bottom: 1px solid var(--line); }
.filter {
  min-height: 44px; padding: 0 var(--gutter);
  border-right: 1px solid var(--line);
  color: var(--muted);
}
.filter[aria-pressed="true"] { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.filter:hover { color: var(--ink); }

.empty-note { padding: 32px var(--gutter); border-bottom: 1px solid var(--line); }
.filters[hidden] { display: none; }

/* ===== Piece page ===== */
.thumb { display: block; width: 100%; padding: var(--gutter); text-align: left; }
.thumbs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-bottom: 1px solid var(--line); }
.thumbs li { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-bottom: -1px; }
.thumbs li:nth-child(2n) { border-right: 0; }
@media (min-width: 768px) {
  .thumbs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .thumbs li:nth-child(2n) { border-right: 1px solid var(--line); }
  .thumbs li:nth-child(4n) { border-right: 0; }
}
button.plate-frame { display: block; width: 100%; }
.message { padding: 64px var(--gutter); border-bottom: 1px solid var(--line); }

/* ===== About ===== */
.about-row { padding: 24px var(--gutter); border-bottom: 1px solid var(--line); }
.about-row h2 { color: var(--muted); font-weight: 400; margin-bottom: 10px; }
.about-row p { max-width: 560px; }
@media (min-width: 768px) {
  .about-row { display: grid; grid-template-columns: 1fr 2fr; gap: 24px; }
  .about-row h2 { margin-bottom: 0; }
}

/* ===== Bag ===== */
.bag-item { display: grid; grid-template-columns: 96px minmax(0, 1fr); border-bottom: 1px solid var(--line); }
.bag-item .plate-frame { border-right: 1px solid var(--line); padding: 12px; }
.bag-info { padding: var(--gutter); }
.bag-info > * + * { margin-top: 8px; }
.bag-info .btn { margin-top: 16px; }
.remove { color: var(--muted); min-height: 36px; text-decoration: underline; text-underline-offset: 3px; }

/* ===== Entrance ===== */
html.intro-lock, html.intro-lock body { overflow: hidden; }
.intro {
  position: fixed; inset: 0; z-index: 100;
  display: flex; flex-direction: column;
  background: var(--bg); color: var(--ink);
  overflow: hidden; touch-action: none;
  transition: transform var(--reveal-time) var(--reveal-ease);
}
.intro.leaving { transform: translateY(-100%); }
.intro-photo {
  position: absolute; inset: 0; overflow: hidden;
  background: var(--plate-main);
  opacity: 0.4;
  filter: blur(3px);
  animation: intro-settle var(--intro-photo-time) var(--soft-ease) both;
}
.intro-photo img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: var(--photo-filter);
}
.intro-row {
  position: relative; z-index: 1;
  display: flex; justify-content: space-between; gap: 24px;
  padding: 14px var(--gutter);
}
.intro-row > span:last-of-type { text-align: right; }
.intro-row > .intro-label {
  animation: intro-fade var(--intro-label-time) ease var(--intro-label-delay) both;
}
.intro-count { white-space: nowrap; font-variant-numeric: tabular-nums; }
.intro-line {
  position: absolute; left: 0; right: 0; height: 1px;
  background: var(--ink);
  animation: intro-draw var(--intro-line-time) var(--reveal-ease) var(--intro-start) both;
}
.intro-row--top .intro-line { bottom: 0; transform-origin: left; }
.intro-row--bottom .intro-line { top: 0; transform-origin: right; }
.intro-enter {
  position: relative; z-index: 1;
  flex: 1; min-height: 0; width: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px;
  color: var(--ink);
}
.intro-enter:focus-visible { outline-offset: -8px; }
.intro-name {
  font: 200 clamp(76px, 13vw, 200px)/1 var(--font-main);
  letter-spacing: -0.05em;
  white-space: pre;
}
.intro-letter {
  display: inline-block;
  animation: intro-rise var(--intro-letter-time) var(--soft-ease) both;
  animation-delay: calc(var(--intro-start) + var(--i) * var(--intro-letter-gap));
}
.intro-hint { animation: intro-fade var(--intro-label-time) ease var(--intro-label-delay) both; }
.intro-hint > span { display: block; animation: intro-pulse var(--intro-pulse-time) ease-in-out infinite; }

@keyframes intro-settle { from { transform: scale(1.12); } to { transform: scale(1); } }
@keyframes intro-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes intro-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes intro-rise { from { opacity: 0; transform: translateY(0.22em); } to { opacity: 1; transform: none; } }
@keyframes intro-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }

/* ===== Reveal ===== */
html.intro-pending #header { opacity: 0; }
html.entering #header { animation: intro-fade var(--reveal-header-time) ease var(--reveal-header-delay) both; }
.plate-clip { display: block; overflow: hidden; }
html.intro-pending .plate-clip .plate { filter: blur(16px); transform: scale(1.1); }
html.entering .plate-clip .plate { animation: reveal-focus var(--reveal-photo-time) var(--soft-ease) backwards; }
@keyframes reveal-focus { from { filter: blur(16px); transform: scale(1.1); } to { filter: blur(0); transform: scale(1); } }

.rise-item:not(.risen) { opacity: 0; }
.rise-item.risen {
  animation: reveal-rise var(--reveal-rise-time) var(--soft-ease) backwards;
  animation-delay: calc(var(--first, 0) * var(--reveal-rise-delay) + var(--n, 0) * var(--reveal-stagger));
}
@keyframes reveal-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ===== Index ===== */
.index-row { border-bottom: 1px solid var(--line); }
.index-head {
  display: grid; width: 100%; gap: 4px 12px;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  grid-template-areas: "num name sign" ". designer status";
  align-items: baseline;
  padding: 18px var(--gutter);
  text-align: left;
}
.index-num { grid-area: num; color: var(--ink); }
.index-name {
  grid-area: name; color: var(--ink);
  font: 300 26px/1.2 var(--font-main); letter-spacing: -0.02em;
  transition: transform var(--index-time) var(--soft-ease);
}
.index-designer { grid-area: designer; color: var(--muted); }
.index-status { grid-area: status; color: var(--muted); text-align: right; }
.index-sign { grid-area: sign; color: var(--ink); font-size: 16px; line-height: 1; }
.index-link { display: none; }
.index-panel {
  display: grid; grid-template-rows: 0fr; visibility: hidden;
  transition: grid-template-rows var(--index-time) var(--soft-ease), visibility var(--index-time);
}
.index-panel > div { overflow: hidden; min-height: 0; }
.index-panel .plate { margin-bottom: 12px; }
.index-panel-inner { padding: 0 var(--gutter) var(--gutter); }
.index-row.open .index-panel { grid-template-rows: 1fr; visibility: visible; }
.index-preview { display: none; }

/* Desktop with a mouse: hover preview. Phones and touch screens keep the + / − rows. */
@media (min-width: 900px) and (hover: hover) {
  .index-body { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); border-bottom: 1px solid var(--line); }
  .index-list { border-right: 1px solid var(--line); }
  .index-row:last-child { border-bottom: 0; }
  .index-toggle, .index-panel { display: none; }
  .index-link { display: grid; grid-template-columns: 56px minmax(0, 1fr) 220px 64px; grid-template-areas: "num name designer status"; }
  .index-link:hover .index-name, .index-link:focus-visible .index-name { transform: translateX(var(--index-nudge)); }
  .index-link:focus-visible { outline-offset: -3px; }
  .index-preview {
    display: block; position: sticky; top: 0; align-self: start;
    margin: var(--gutter); aspect-ratio: 4 / 5; max-height: calc(100vh - 2 * var(--gutter));
    overflow: hidden;
  }
  .index-preview .plate {
    position: absolute; inset: 0; height: 100%; opacity: 0;
    transition: opacity var(--index-time) ease;
  }
  .index-preview .plate.active { opacity: 1; }
}

/* ===== Page transitions ===== */
html { scroll-behavior: smooth; }

/* Arriving on a page */
html.page-in #header, html.page-in #footer, html.page-in #gate {
  animation: page-fade var(--page-in-time) var(--soft-ease) both;
}
html.page-in #site > main {
  animation: page-rise var(--page-in-time) var(--soft-ease) 80ms both;
}
@keyframes page-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes page-rise { from { opacity: 0; transform: translateY(var(--page-rise)); } to { opacity: 1; transform: none; } }

/* Leaving a page (after clicking a link) and leaving the password screen */
#site, #gate { transition: opacity var(--page-out-time) ease, transform var(--page-out-time) ease; }
html.page-out #site, html.page-out #gate, #gate.gate-leaving {
  opacity: 0; transform: translateY(calc(var(--page-rise) * -0.5));
}

/* Photo swaps on the piece page */
#main-photo .plate { transition: opacity var(--swap-time) ease; }
#main-photo.is-swapping .plate { opacity: 0; }
#main-photo.swapped .plate { animation: page-fade calc(var(--swap-time) * 1.6) ease both; }

/* Archive filters: tiles fade out, then rise in one by one */
.tiles { transition: opacity var(--swap-time) ease; }
.tiles.is-swapping { opacity: 0; }
.tile {
  animation: page-rise calc(var(--page-in-time) * 0.8) var(--soft-ease) both;
  animation-delay: calc(var(--i, 0) * var(--tile-stagger));
}

/* Add to bag / checkout button swap */
#buy > * { animation: page-fade calc(var(--swap-time) * 1.6) ease both; }

/* Bag: removed items slide away */
.bag-item { transition: opacity var(--swap-time) ease, transform var(--swap-time) ease; }
.bag-item.leaving { opacity: 0; transform: translateX(-12px); }

/* Phone menu opening */
.header--compact.open .nav { animation: page-rise calc(var(--swap-time) * 1.3) var(--soft-ease) both; }

/* Soft hover changes */
.btn, .nav-cell, .filter, .link, .remove, .boxed button {
  transition: color 0.25s ease, background-color 0.25s ease, opacity 0.25s ease;
}

/* ===== Reduced motion: no animation, everything shown at once ===== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
  .rise-item:not(.risen) { opacity: 1; }
}

/* ===== Shown only if the site's scripts can't run ===== */
html.js #fallback { display: none; }
.fallback { padding: 48px var(--gutter); }
.fallback > * + * { margin-top: 14px; }
html:not(.js) #site { display: none; }

/* ===== Password screen ===== */
#gate {
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column;
}
.gate-main {
  flex: 1; display: flex; flex-direction: column; justify-content: center;
  width: 100%; max-width: 420px; margin: 0 auto; padding: 48px var(--gutter);
}
.gate-main .wordmark { display: block; }
.gate-line { margin: 14px 0 40px; color: var(--muted); }
.gate-foot {
  padding: 18px var(--gutter); text-align: center;
  border-top: 1px solid var(--line); color: var(--muted);
}