/* Silver Platter — black on white, left-aligned, plenty of room. */

:root {
  /* Akzidenz-Grotesk Next Bold from Adobe Fonts (linked in index.html); Helvetica while it loads. */
  --font: "akzidenz-grotesk-next-pro", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  --tracking: 0.037em;          /* tracking 37, as on the card */
  /* Text size: lowercase letters 2/3 the height of the tagline's.
     The tagline is ~272px wide on large screens and narrows on phones, so this scales with it. */
  --text: clamp(1.0625rem, 4.67vw, 1.344rem);
  --ink: #111;
  --paper: #fff;
  --gutter: clamp(1.5rem, 7vw, 6rem);
  /* Shared by the card and the photos, so things line up across slides. */
  --pad-top: clamp(3rem, 8vw, 3.75rem);          /* white space above the top row */
  --tag-w: min(17rem, 56.3vw);                   /* tagline width; small logo matches its height */
  --stamp-w: clamp(4.05rem, 10.8vw, 5.85rem);    /* "work →" width */
  --more-w: calc(var(--stamp-w) * 0.9674 * 0.595); /* "more →": 59.5% of "work"'s lettering size (61.45 vs 63.52 wide) */
  --tap: 0.75rem;                                /* extra tap area around the stamps */
}

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

html { -webkit-text-size-adjust: 100%; }

/* Tracking 37 on every piece of text, each relative to its own size. */
body,
body * { letter-spacing: var(--tracking); }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-weight: 700;
  font-size: var(--text);
  line-height: 1.45;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }

/* Anything marked hidden stays hidden, whatever other styles say. */
[hidden] { display: none !important; }

a { color: inherit; text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

/* Page frame: content sits left, like copy on a printed card.
   The carousel runs edge to edge so a swipe moves the whole screen. */
.noscript {
  max-width: 76rem;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Ink: the live text gets a faint blur-and-trace so it sits with the card artwork.
   Strength: stdDeviation in the filter at the top of index.html (bigger = rounder). */
.card-info,
.card-note { filter: url(#ink); }

/* Footer lines: same size as everything else, always lowercase. */
.card-info,
.card-note {
  text-transform: lowercase;
}

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

/* 1–2. Carousel: the card is the first slide, the photos follow. */
/* The gallery fills the screen; the slides stretch down to the footer. */
.carousel {
  display: flex;
  flex-direction: column;
  min-height: 100svh;
}

.carousel-track {
  flex: 1 0 auto;
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-track:focus-visible { outline-offset: -3px; }

/* Mouse: slides can be grabbed and dragged; clicking a photo's left or right half goes back or on. */
@media (hover: hover) and (pointer: fine) {
  .carousel-track { cursor: grab; }
  .carousel-track.is-dragging { cursor: grabbing; user-select: none; }
  .carousel-track.no-snap { scroll-snap-type: none; }
}

.slide {
  flex: 0 0 100%;
  padding-top: var(--pad-top);           /* same top edge on every slide, card included */
  min-width: 0;
  margin: 0;
  /* Same left edge as the rest of the page, at any screen width. */
  padding-inline: max(var(--gutter), calc((100% - 76rem) / 2 + var(--gutter)));
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

/* The card */
.slide-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
/* Top row: the tagline, with "work →" stamped at the right. The row is exactly as wide
   as the name below it, so its right edge is the right edge of the "r" in "Platter". */
.card-top {
  position: relative;
  display: flex;
  align-items: flex-end;
  width: min(100%, 40rem);
  margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
}
.tagline { flex: none; margin: 0; }
/* A fixed size (not "whatever space is left"), so moving the stamp never resizes it.
   The small logo on the photos and contact page is sized to match its height. */
.tagline img {
  --w: var(--tag-w);
  width: var(--w);
  max-width: none;
  height: auto;
  /* Hang the opening quote in the margin so the letters line up with the name.
     28.1 / 461 = where "custom" starts inside tagline.svg. */
  margin-left: calc(var(--w) * -0.061);
}
/* Stamped on, a little crooked (-7°). Placed by the ink, not the box, measured from the
   artwork with the tilt applied:
   - the tip of the "k" lands on the right edge of the "r" in "Platter"
     (tilted, it reaches 0.507 × the stamp's width right of its centre);
   - the bottom of the "W" lands on the baseline of "no job too small"
     (tilted, it reaches 0.324 × the width below its centre; the baseline sits
     0.0222 × the tagline's width above the tagline's bottom edge, under the "j").
   The stamp is 63.52 × 35.23, so half its height is 0.2773 × its width.
   The padding is just tap area. */
.work-button {
  position: absolute;
  right: calc(var(--stamp-w) * 0.0067 - var(--tap));
  bottom: calc(var(--tag-w) * 0.0222 + var(--stamp-w) * 0.0467 - var(--tap));
  padding: var(--tap);
  margin: 0;
  transform: rotate(-7deg);
  background: none;
  border: 0;
  border-radius: 0;
  cursor: pointer;
}
.work-button img {
  width: var(--stamp-w);
  height: auto;
  filter: url(#ink-stamp);      /* the stamp art isn't traced, so the site adds the ink look */
}

.slide-card h1 { width: 100%; margin: 0 0 2.5rem; }
.logo { width: min(100%, 40rem); height: auto; }

/* Footer under the gallery: same left edge as the slides. */
.gallery-foot {
  width: 100%;
  max-width: 76rem;
  margin-inline: auto;
  padding: clamp(0.85rem, 2.5vw, 1.25rem) var(--gutter) clamp(1.5rem, 4vw, 2.5rem);
}

/* Footer line: contact • instagram • maryland, n.y.
   Every item has a bullet in front; the strip on the left is trimmed off, so a bullet
   that would start a line (the first item, or after a wrap on a narrow phone) disappears. */
.card-info {
  display: flex;
  flex-wrap: wrap;
  margin: 0 0 0 -1.4em;
  padding: 0;
  list-style: none;
  clip-path: inset(0 0 0 1.4em);
}
/* Second line under it, same voice. */
.card-note { margin: 0; }

.card-info li::before {
  content: "•";
  content: "•" / "";            /* screen readers skip the bullet */
  display: inline-block;
  width: 1.4em;
  text-align: center;
}

/* Photo slides: small logo on top, then the photo filling the rest of the frame
   (whole photo, never cropped). */
.slide-photo {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto minmax(0, 1fr);
  column-gap: clamp(1rem, 3vw, 1.75rem);
  row-gap: clamp(1.5rem, 4vw, 2.5rem);   /* same gap as under the tagline on the card */
}
/* Each photo slide keeps an invisible logo-sized space in the top row; the real small
   logo sits over it, pinned, so it stays still while the photos move under it. */
.logo-space { grid-area: 1 / 1; visibility: hidden; }
/* As tall as the tagline on the card (tagline 461×153 at up to 17rem wide; logo 517×314
   → about 0.55 × the tagline's width), so the photo starts on the big logo's line. */
.mini-logo img,
.logo-space img { width: min(9.3rem, 30.8vw); height: auto; }
.mini-logo { display: block; width: max-content; }

/* The pinned small logo over the gallery: same spot as the tagline on the card,
   hidden while the card itself is showing. */
.carousel { position: relative; }
.gallery-logo {
  position: absolute;
  z-index: 1;
  top: var(--pad-top);
  left: max(var(--gutter), calc((100% - 76rem) / 2 + var(--gutter)));
}
.carousel[data-at-card] .gallery-logo { visibility: hidden; }

/* "more →" on the photos: next photo, round and round. Pinned like the small logo.
   Shown exactly as drawn (it slopes down to the right; no extra tilt).
   Same height as "work" on the card: the bottom of its ink on the tagline's baseline
   (0.9333 down the tagline, which is 0.3324 × its width tall → 0.3102 × the width).
   The artwork's ink fills its box (61.45 × 33.3), so its bottom edge is the ink's bottom:
   0.5419 × its width below its top. Sideways, script.js puts the tip of the arrow (the
   box's right edge) on the right edge of the photo showing. */
.gallery-more {
  position: absolute;
  z-index: 1;
  top: calc(var(--pad-top) + var(--tag-w) * 0.3102 - var(--more-w) * 0.5419 - var(--tap));
  left: 0;
  padding: var(--tap);
  margin: 0;
  background: none;
  border: 0;
  border-radius: 0;
  cursor: pointer;
}
.gallery-more img { width: var(--more-w); height: auto; }   /* crisp, no ink effect */
.carousel[data-at-card] .gallery-more { visibility: hidden; }
/* The photo is lifted out of the layout and sized to fit its grid area at its own shape
   (top left, never cropped, never making the page taller). */
.slide-photo > img {
  grid-area: 2 / 1 / 3 / 3;
  position: absolute;
  top: 0;
  left: 0;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}

/* ---------- Inquiry page (/inquiry/) ---------- */

/* Same frame and top edge as the card, so the header sits where the tagline does. */
.inquiry {
  max-width: 76rem;
  margin-inline: auto;
  padding: clamp(3rem, 8vw, 3.75rem) var(--gutter) clamp(2rem, 6vw, 4rem);   /* same top as the slides */
}

.inquiry-head,
.form-title,
.inquiry label,
.form-error,
.thanks { filter: url(#ink); text-transform: lowercase; }

/* Contact details and "start a project": a few points up from the rest, but never so big
   that "delivery throughout the northeast" (≈16.5 × the type size) wraps on a phone,
   and never smaller than the rest. */
.inquiry-head,
.form-title { font-size: max(var(--text), min(calc(var(--text) * 1.2), 5vw)); }

.inquiry .mini-logo { margin-bottom: clamp(1.5rem, 4vw, 2.5rem); }

.inquiry-head {
  font-style: normal;
  line-height: 1.35;
  margin: 0 0 clamp(2.5rem, 7vw, 4rem);
}

.form-title {
  font-weight: inherit;
  margin: 0 0 clamp(1.25rem, 3vw, 1.75rem);
}

.inquiry form,
.thanks { max-width: 34rem; }

.field { margin: 0 0 1.5rem; }

/* Labels Bold; typing (and the "choose photos" boxes) in Akzidenz-Grotesk Next Regular. */
.inquiry label { display: block; margin-bottom: 0.15rem; line-height: 1.2; }

/* Fields: plain black outline, square corners. The typing itself stays crisp (no ink). */
.inquiry input,
.inquiry textarea {
  display: block;
  width: 100%;
  font: inherit;
  font-weight: 400;
  color: var(--ink);
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 0;
  padding: 0.65rem 0.75rem;
  appearance: none;
}
.inquiry textarea { resize: vertical; min-height: 9rem; }
/* Selected field: the border just gets a little heavier (2px → 3px), no outline. */
.inquiry input:focus,
.inquiry textarea:focus {
  outline: none;
  box-shadow: inset 0 0 0 1px var(--ink);
}

/* Send: solid black, white letters, square. */
.send {
  font: inherit;
  text-transform: lowercase;
  color: var(--paper);
  background: var(--ink);
  border: 2px solid var(--ink);
  border-radius: 0;
  padding: 0.8rem 2.25rem;
  cursor: pointer;
}
.send:hover { color: var(--ink); background: var(--paper); }
.send:disabled { opacity: 0.5; cursor: progress; }

/* Photo spots: the real file input is hidden; the outlined box is its label. */
.upload .file {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  overflow: hidden;
}
.inquiry .drop {
  display: block;
  margin: 0;
  border: 2px solid var(--ink);
  padding: 0.65rem 0.75rem;
  font-weight: 400;
  cursor: pointer;
  filter: none;                 /* boxes stay crisp, like the other fields */
}
.inquiry .drop:hover { color: var(--paper); background: var(--ink); }
.upload:has(.file:focus-visible) .drop { box-shadow: inset 0 0 0 1px var(--ink); }
.picked {
  font-weight: 400;
  list-style: none;
  margin: 0.35rem 0 0;
  padding: 0;
  filter: url(#ink);
  overflow-wrap: anywhere;
}
.picked:empty { display: none; }

.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-error { margin: 0 0 1.5rem; }

/* Thank-you note: shown by form.js, or by the #thanks link if JavaScript is off. */
.thanks { display: none; margin: 0; }
.thanks:target,
.thanks.is-shown { display: block; }
.inquiry:has(.thanks:target) form { display: none; }