/* ==========================================================================
   Nicholas Ferraro — storefront styles ("Ivory house", monochrome)
   Mobile-first. Every color is a custom property on :root; the palette is
   black, white and neutral greys only.
   ========================================================================== */

:root {
  /* Palette: monochrome. An ivory ground, near-black ink and a few neutral
     greys; no chromatic accent anywhere. Contrast on the ivory ground:
     --color-ink 16.8:1, --color-ink-soft 7.2:1, --color-ink-muted 5.2:1
     (4.9:1 on the deeper footer ivory). On the dark grounds (#0c0c0c /
     #141414): --color-on-dark 17.8:1 / 16.8:1, --color-on-dark-soft 11.9:1 / 11.2:1. */
  --color-bg: #f7f4ef;
  --color-bg-deep: #f1ede6;
  --color-surface: #ffffff;
  --color-ink: #141414;
  --color-ink-soft: #55514b;
  --color-ink-muted: #6b665e;
  --color-rule: #e3ddd2;
  --color-rule-strong: #cfc7b9;
  --color-photo: #0c0c0c;
  --color-photo-rgb: 12, 12, 12; /* --color-photo as channels, for the hero dissolve */
  --color-charcoal: #141414;
  --color-on-dark: #f7f4ef;
  --color-on-dark-soft: #cfc9bf;
  /* Focus ring: ink on the ivory ground, ivory on the dark grounds. */
  --color-focus: var(--color-ink);
  --color-focus-on-dark: var(--color-on-dark);
  /* Retired gold accent. The names stay for anything that still reads them,
     but they now resolve to neutrals: rules, underlines and CTAs use ink,
     accent text uses the soft ink, and the accent on dark grounds is ivory. */
  --color-gold: var(--color-ink);
  --color-gold-text: var(--color-ink-soft);
  --color-gold-on-dark: var(--color-on-dark);

  /* Type scale */
  --font-display: "Cormorant Garamond", "Libre Caslon Text", Georgia, "Times New Roman", serif;
  --font-body: "Jost", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-2xs: 0.6875rem;
  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --fs-h3: clamp(1.5rem, 1.3rem + 0.9vw, 2rem);
  --fs-h2: clamp(1.9rem, 1.45rem + 1.9vw, 2.9rem);
  --fs-h1: clamp(2.3rem, 1.7rem + 2.6vw, 3.6rem);
  --fs-display: clamp(2.25rem, 1.6rem + 3.2vw, 5rem);
  --fs-wordmark: clamp(1rem, 0.8rem + 0.9vw, 1.65rem);
  --tracking: 0.18em;
  --tracking-wide: 0.3em;
  --tracking-wordmark: 0.22em;
  --lh-tight: 1.05;
  --lh-snug: 1.25;
  --lh-body: 1.65;

  /* Spacing scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;
  --section: clamp(3.5rem, 3rem + 4vw, 7rem);
  --gutter: clamp(1rem, 4vw, 3rem);
  --container: 86rem;
  --container-narrow: 46rem;
  --tap: 2.75rem; /* 44px minimum tap target */

  /* Motion */
  --dur: 320ms;
  --dur-slow: 800ms;
  --dur-reveal: 900ms;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: 400;
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

/* Short inner pages (contact, a missing product) on a tall window: main takes
   the spare height so the deeper footer reaches the bottom of the window
   instead of floating above a band of page background. The home page and the
   account page carry no data-page and are untouched. */
body[data-page] {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}

body[data-page] > main {
  flex: 1 0 auto;
}

img,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: var(--lh-snug);
  margin: 0;
  text-wrap: balance;
}

p {
  margin: 0 0 var(--space-4);
}

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

button {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.hero :focus-visible {
  outline-color: var(--color-focus-on-dark);
}

/* The skip link lands on <main tabindex="-1">; it is not interactive, so no ring. */
main:focus {
  outline: none;
}

[hidden] {
  display: none !important;
}

/* --------------------------------------------------------------------------
   Layout primitives
   -------------------------------------------------------------------------- */

.container {
  width: min(100% - 2 * var(--gutter), var(--container));
  margin-inline: auto;
}

.container-narrow {
  width: min(100% - 2 * var(--gutter), var(--container-narrow));
  margin-inline: auto;
}

.section {
  padding-block: var(--section);
}

.section.ruled {
  border-top: 1px solid var(--color-rule);
}

.section-head {
  max-width: 40rem;
  margin: 0 auto var(--space-7);
  text-align: center;
}

.section-title {
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
}

.section-foot {
  margin: var(--space-7) 0 0;
  text-align: center;
}

.eyebrow {
  display: block;
  margin: 0 0 var(--space-3);
  font-size: var(--fs-2xs);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-ink-soft);
}

/* An eyebrow link is a full-height tap target; the negative block margin keeps
   the label's visual rhythm the same as a plain eyebrow. */
.eyebrow a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  margin-block: calc((1.2em - var(--tap)) / 2);
  text-decoration: underline;
  text-decoration-color: var(--color-ink);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.45em;
  transition: color var(--dur) var(--ease);
}

.eyebrow a:hover {
  color: var(--color-ink);
}

/* Left-aligned eyebrows carry a short leading rule. */
.eyebrow-rule {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
}

.eyebrow-rule::before {
  content: "";
  flex: 0 0 2rem;
  height: 1px;
  background: currentColor;
}

.eyebrow-on-dark {
  color: var(--color-on-dark);
}

.skip-link {
  position: absolute;
  top: 0;
  left: var(--gutter);
  z-index: 100;
  padding: var(--space-3) var(--space-5);
  background: var(--color-charcoal);
  color: var(--color-on-dark);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking);
  text-transform: uppercase;
  transform: translateY(-120%);
  transition: transform var(--dur) var(--ease);
}

.skip-link:focus {
  transform: translateY(0);
}

/* The skip link slides in over the charcoal announcement bar, so the default
   ink ring would vanish against it. The ring is ivory (16.8:1 on charcoal)
   and sits inside the box so it stays visible however tall the bar is. */
.skip-link:focus-visible {
  outline-color: var(--color-focus-on-dark);
  outline-offset: -4px;
}

/* --------------------------------------------------------------------------
   Buttons and links
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: 0.85rem 2.1rem;
  border: 1px solid currentColor;
  background: transparent;
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: var(--tracking);
  line-height: 1.2;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.btn-primary {
  background: var(--color-ink);
  border-color: var(--color-ink);
  color: var(--color-on-dark);
}

.btn-primary:hover {
  background: var(--color-ink-soft);
  border-color: var(--color-ink-soft);
}

.btn-outline {
  color: var(--color-ink);
  border-color: var(--color-ink);
}

.btn-outline:hover {
  background: var(--color-ink);
  color: var(--color-on-dark);
}

.btn-light {
  color: var(--color-on-dark);
  border-color: var(--color-on-dark);
}

.btn-light:hover {
  background: var(--color-on-dark);
  color: var(--color-ink);
}

/* Text links keep a 44px tap box; the underline is drawn with text-decoration
   so the ink rule hugs the text instead of sitting at the bottom of the box. */
.text-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: var(--tracking);
  text-transform: uppercase;
  text-decoration: underline;
  text-decoration-color: var(--color-ink);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.45em;
  line-height: 1;
  transition: color var(--dur) var(--ease);
}

.text-link:hover {
  color: var(--color-ink-soft);
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.announcement {
  background: var(--color-charcoal);
  color: var(--color-on-dark);
  text-align: center;
}

.announcement-text {
  margin: 0;
  padding: 0.55rem var(--gutter);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking);
  text-transform: uppercase;
  text-wrap: balance;
}

.masthead {
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-rule);
}

.masthead-inner {
  display: grid;
  /* Fixed 44px tap columns: under text-only zoom rem columns would eat the wordmark's cell. */
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  align-items: center;
  min-height: 4rem;
}

.wordmark {
  grid-column: 2;
  justify-self: center;
  display: inline-flex;
  align-items: center;
  min-width: 0;
  max-width: 100%;
  min-height: var(--tap);
  padding: var(--space-3) 0;
  /* Tracking is capped by the viewport: at normal size the cap never applies,
     but under text-only zoom (Android font scaling, browser minimum font size)
     it tightens so the mark still fits its cell. Two lines are allowed as a
     last resort instead of clipping. */
  --wordmark-tracking: min(var(--tracking-wordmark), 0.98vw);
  /* Letter-spacing trails the last letter; matching padding on the left keeps the mark optically centered. */
  padding-left: var(--wordmark-tracking);
  font-family: var(--font-display);
  font-size: var(--fs-wordmark);
  font-weight: 500;
  letter-spacing: var(--wordmark-tracking);
  line-height: 1.1;
  text-align: center;
  text-transform: uppercase;
  color: var(--color-ink);
}

/* Below 360px the vw cap shrinks more slowly than the cell (the viewport less
   two gutters and two 44px tap columns), and the mark broke onto two lines.
   Track the cell instead; continuous with 0.22em at 360px. */
@media (max-width: 359.98px) {
  .wordmark {
    --wordmark-tracking: max(0px, min(var(--tracking-wordmark), 0.98vw, (100vw - 284px) / 17));
  }
}

.nav-toggle {
  grid-column: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-left: calc(-1 * var(--space-2));
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.nav-toggle-box {
  position: relative;
  width: 22px;
  height: 13px;
}

.nav-toggle-bar {
  position: absolute;
  left: 0;
  width: 100%;
  height: 0;
  /* A border, not a background: forced-colors (high contrast) mode drops backgrounds but keeps borders. */
  border-top: 1px solid currentColor;
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}

.nav-toggle-bar:nth-child(1) { top: 0; }
.nav-toggle-bar:nth-child(2) { top: 6px; }
.nav-toggle-bar:nth-child(3) { top: 12px; }

.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.site-nav {
  grid-column: 1 / -1;
  display: none;
}

.site-header.nav-open .site-nav {
  display: block;
}

.site-nav-list {
  list-style: none;
  margin: 0;
  padding: 0 0 var(--space-3);
}

.site-nav-list a {
  display: flex;
  align-items: center;
  min-height: var(--tap);
  padding: 0 var(--space-1);
  border-top: 1px solid var(--color-rule);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: var(--tracking);
  text-transform: uppercase;
}

/* The current page is marked with an ink rule under its label. */
.site-nav-list a[aria-current] {
  text-decoration: underline;
  text-decoration-color: var(--color-ink);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.45em;
}

@media (min-width: 900px) {
  :root {
    --tracking-wordmark: var(--tracking-wide);
  }

  .nav-toggle {
    display: none;
  }

  .masthead-inner {
    grid-template-columns: 1fr;
    justify-items: center;
    padding-top: var(--space-4);
  }

  .wordmark {
    grid-column: 1;
    padding: var(--space-2) 0 var(--space-4) var(--wordmark-tracking);
  }

  .site-nav {
    grid-column: 1;
    display: block;
  }

  .site-nav-list {
    display: flex;
    gap: var(--space-8);
    padding: 0;
  }

  .site-nav-list a {
    position: relative;
    min-height: 2.75rem;
    padding: 0 var(--space-1);
    border-top: 0;
  }

  .site-nav-list a::after {
    content: "";
    position: absolute;
    left: var(--space-1);
    right: var(--space-1);
    bottom: 0.65rem;
    height: 1px;
    background: var(--color-ink);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--dur) var(--ease);
  }

  .site-nav-list a:hover::after,
  .site-nav-list a[aria-current]::after {
    transform: scaleX(1);
  }

  /* On wide screens the ::after rule marks the current page, so the underline goes. */
  .site-nav-list a[aria-current] {
    color: var(--color-ink);
    text-decoration: none;
  }
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

/* The photograph is black water, so it can dissolve into a ground of the same
   black and the copy never sits on the ring: below the photograph on phones,
   beside it on wide screens. */
.hero {
  position: relative;
  background: var(--color-photo);
  color: var(--color-on-dark);
  overflow: hidden;
}

.hero-media {
  position: relative;
  aspect-ratio: 5 / 4;
  overflow: hidden;
}

.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 40%;
}

.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(var(--color-photo-rgb), 0) 62%, rgba(var(--color-photo-rgb), 1) 100%);
}

.hero-content {
  position: relative;
  width: min(100% - 2 * var(--gutter), var(--container));
  margin: 0 auto;
  padding: var(--space-5) 0 var(--space-9);
}

.hero-copy {
  max-width: 34rem;
  margin: 0 auto;
  text-align: center;
  animation: fade-in var(--dur-reveal) var(--ease) both;
}

.hero-content .eyebrow-rule::before {
  display: none;
}

.hero-title {
  margin: var(--space-3) 0 var(--space-4);
  font-size: var(--fs-display);
  font-weight: 400;
  line-height: var(--lh-tight);
  letter-spacing: 0.01em;
  color: var(--color-on-dark);
}

.hero-line {
  max-width: 30rem;
  margin: 0 auto var(--space-5);
  font-size: var(--fs-md);
  color: var(--color-on-dark-soft);
}

.hero-credit {
  position: absolute;
  right: var(--gutter);
  bottom: var(--space-2);
  margin: 0;
  font-size: var(--fs-2xs);
  letter-spacing: var(--tracking);
  text-transform: uppercase;
  color: var(--color-on-dark-soft);
}

.hero-credit a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.45em;
  transition: color var(--dur) var(--ease), text-decoration-color var(--dur) var(--ease);
}

.hero-credit a:hover {
  color: var(--color-on-dark);
  text-decoration-color: var(--color-on-dark);
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (min-width: 600px) {
  .hero-media {
    aspect-ratio: 4 / 3;
  }
}

@media (min-width: 900px) {
  .hero {
    display: flex;
    align-items: center;
    min-height: clamp(34rem, 92vh, 58rem);
  }

  .hero-media {
    position: absolute;
    inset: 0 0 0 38%;
    aspect-ratio: auto;
  }

  .hero-media img {
    object-position: 50% 45%;
  }

  .hero-media::after {
    background: linear-gradient(to right, rgba(var(--color-photo-rgb), 1) 0%, rgba(var(--color-photo-rgb), 0) 30%);
  }

  .hero-content {
    padding: var(--space-9) 0;
  }

  .hero-copy {
    max-width: min(34rem, 37vw); /* stays clear of the photograph's dissolve */
    margin: 0;
    text-align: left;
  }

  .hero-content .eyebrow-rule::before {
    display: block;
  }

  .hero-line {
    margin-inline: 0;
  }

  .hero-credit {
    bottom: var(--space-4);
  }
}

/* --------------------------------------------------------------------------
   Category tiles
   -------------------------------------------------------------------------- */

.tile-grid {
  display: grid;
  gap: var(--space-6);
}

.tile {
  display: block;
  min-width: 0;
}

.tile-media {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--color-photo);
}

.tile-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease);
}

.tile:hover .tile-media img {
  transform: scale(1.04);
}

.tile-label {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  padding: var(--space-4) 0 var(--space-3);
  border-bottom: 1px solid var(--color-rule);
  overflow-wrap: anywhere;
  transition: border-color var(--dur) var(--ease);
}

/* Three columns at tablet width are too narrow for name and CTA to share a
   line in every tile, so all three stack and their rules line up. */
@media (min-width: 768px) and (max-width: 959.98px) {
  .tile-label {
    flex-direction: column;
    align-items: flex-start;
  }
}

.tile:hover .tile-label {
  border-bottom-color: var(--color-ink);
}

.tile-name {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  line-height: 1;
}

.tile-cta {
  font-size: var(--fs-2xs);
  font-weight: 500;
  letter-spacing: var(--tracking);
  text-transform: uppercase;
  color: var(--color-ink-soft);
  white-space: nowrap;
}

@media (min-width: 768px) {
  /* minmax(0, 1fr): a plain 1fr track grows to its label's min-content width,
     which left the three tiles unequal at tablet widths. */
  .tile-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-5);
  }

  .tile-media {
    aspect-ratio: 4 / 5;
  }
}

/* --------------------------------------------------------------------------
   Product cards and grids
   -------------------------------------------------------------------------- */

.product-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7) var(--space-5);
}

@media (min-width: 480px) {
  .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 960px) {
  .product-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1280px) {
  .product-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Related shows three pieces: 1 > 3. */
@media (min-width: 768px) {
  .related-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

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

.product-card-link {
  display: block;
  height: 100%;
}

.product-card-media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--color-photo);
}

.product-card-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}

.product-card-media .is-alt {
  opacity: 0;
}

.product-card-link:hover .product-card-media .is-alt,
.product-card-link:focus-visible .product-card-media .is-alt {
  opacity: 1;
}

.product-card-link:hover .product-card-media img:first-child {
  transform: scale(1.03);
}

.product-card-body {
  padding: var(--space-4) 0 0;
  text-align: center;
  overflow-wrap: anywhere;
}

.product-card-name {
  margin: 0 0 var(--space-2);
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: var(--tracking);
  line-height: 1.5;
  text-transform: uppercase;
}

.product-card-price {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-md);
  letter-spacing: 0.04em;
  color: var(--color-ink-soft);
}

.is-por {
  font-style: italic;
}

.empty {
  grid-column: 1 / -1;
  padding: var(--space-8) 0;
  text-align: center;
  color: var(--color-ink-soft);
}

/* --------------------------------------------------------------------------
   Designer story teaser
   -------------------------------------------------------------------------- */

.story {
  display: grid;
  gap: var(--space-6);
  align-items: center;
}

.story-media {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--color-photo);
}

.story-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

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

.story-text {
  font-size: var(--fs-md);
  color: var(--color-ink-soft);
}

@media (min-width: 900px) {
  .story {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: var(--space-9);
  }

  .story-body {
    padding-right: var(--space-6);
  }
}

/* --------------------------------------------------------------------------
   From the bench (videos)
   -------------------------------------------------------------------------- */

.bench-grid {
  display: grid;
  gap: var(--space-6);
}

.bench-figure {
  margin: 0;
}

.bench-figure video {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: var(--color-photo);
}

.bench-caption {
  padding-top: var(--space-3);
  font-size: var(--fs-sm);
  color: var(--color-ink-muted);
  text-align: center;
}

@media (min-width: 768px) {
  .bench-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer {
  border-top: 1px solid var(--color-rule);
  background: var(--color-bg-deep);
  padding: var(--space-8) 0 var(--space-6);
  text-align: center;
}

.footer-wordmark {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding: var(--space-2) 0 var(--space-2) var(--tracking-wide);
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.footer-tagline {
  margin: var(--space-2) 0 0;
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-style: italic;
  color: var(--color-ink-soft);
}

.footer-nav ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 var(--space-6);
  list-style: none;
  margin: var(--space-5) 0 var(--space-4);
  padding: 0;
}

/* The four links need ~396px on one row, so on phones the flex row left
   "Account" alone on a second line. Two balanced pairs instead; an odd last
   link (Instagram, once a handle is set) centres across both columns. */
@media (max-width: 479.98px) {
  .footer-nav ul {
    display: grid;
    grid-template-columns: repeat(2, max-content);
    justify-content: center;
  }

  .footer-nav li:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}

.footer-nav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding: 0 var(--space-1);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: var(--tracking);
  text-transform: uppercase;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.45em;
  transition: text-decoration-color var(--dur) var(--ease);
}

.footer-nav a:hover {
  text-decoration-color: var(--color-ink);
}

.footer-meta {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--color-ink-muted);
}

/* --------------------------------------------------------------------------
   Page heads, notices
   -------------------------------------------------------------------------- */

.page-head {
  padding: var(--space-8) 0 var(--space-6);
  text-align: center;
}

.page-title {
  font-size: var(--fs-h1);
}

.page-lede {
  max-width: 34rem;
  margin: var(--space-4) auto 0;
  font-size: var(--fs-md);
  color: var(--color-ink-soft);
  text-wrap: balance;
}

.notice {
  grid-column: 1 / -1;
  max-width: 34rem;
  margin: var(--space-6) auto;
  padding: var(--space-6);
  border: 1px solid var(--color-rule-strong);
  background: var(--color-surface);
  text-align: center;
}

.notice-title {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  margin-bottom: var(--space-2);
}

.notice p:last-child {
  margin-bottom: 0;
  color: var(--color-ink-soft);
}

.notice-hint {
  margin-top: var(--space-4);
  font-size: var(--fs-sm);
}

/* Shown only when JavaScript is off. */
.notice-text {
  grid-column: 1 / -1;
  padding: var(--space-8) 0;
  text-align: center;
  color: var(--color-ink-soft);
}

.loading {
  padding: var(--space-9) 0;
  text-align: center;
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking);
  text-transform: uppercase;
  color: var(--color-ink-muted);
}

/* --------------------------------------------------------------------------
   Shop
   -------------------------------------------------------------------------- */

.shop-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3) var(--space-5);
  padding: var(--space-2) 0;
  border-top: 1px solid var(--color-rule);
  border-bottom: 1px solid var(--color-rule);
}

/* Four chips must fit one row down to 320px: tighter tracking and gaps below
   480px, tighter again below 360px. */
.chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-3);
}

.chip {
  min-width: var(--tap);
  min-height: var(--tap);
  padding: 0 var(--space-1);
  border: 0;
  border-bottom: 1px solid transparent;
  background: none;
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
  cursor: pointer;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

@media (min-width: 480px) {
  .chip-list {
    gap: 0 var(--space-5);
  }

  .chip {
    letter-spacing: var(--tracking);
  }
}

@media (max-width: 359.98px) {
  .chip-list {
    gap: 0 var(--space-2);
  }

  .chip {
    letter-spacing: 0.08em;
  }
}

.chip:hover {
  color: var(--color-ink);
}

.chip[aria-pressed="true"] {
  color: var(--color-ink);
  border-bottom-color: var(--color-ink);
}

.sort {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  max-width: 100%;
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: var(--tracking);
  text-transform: uppercase;
  color: var(--color-ink-soft);
}

.sort-field {
  position: relative;
  display: inline-flex;
  min-width: 0;
  max-width: 100%;
}

/* The chevron is drawn with borders so it follows --color-ink (a data-URI
   image cannot read a custom property) and survives forced-colors mode. */
.sort-field::after {
  content: "";
  position: absolute;
  top: 50%;
  right: calc(var(--space-3) + 2px);
  width: 7px;
  height: 7px;
  border-right: 1px solid var(--color-ink);
  border-bottom: 1px solid var(--color-ink);
  transform: translateY(-65%) rotate(45deg);
  pointer-events: none;
}

.sort select {
  min-width: 0;
  max-width: 100%;
  min-height: var(--tap);
  padding: 0 var(--space-7) 0 var(--space-3);
  border: 1px solid var(--color-ink-muted);
  border-radius: 0;
  background-color: var(--color-surface);
  appearance: none;
  -webkit-appearance: none;
  font-family: var(--font-body);
  font-size: var(--fs-base); /* 16px: iOS Safari zooms the page when a smaller control takes focus */
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--color-ink);
  cursor: pointer;
}

.shop-status {
  margin: var(--space-4) 0 var(--space-6);
  font-size: var(--fs-sm);
  color: var(--color-ink-muted);
}

.shop-grid-wrap {
  padding-bottom: var(--section);
}

/* --------------------------------------------------------------------------
   Product page
   -------------------------------------------------------------------------- */

.breadcrumb {
  padding: var(--space-5) 0 0;
}

.breadcrumb-list {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--space-2);
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking);
  text-transform: uppercase;
  color: var(--color-ink-muted);
}

.breadcrumb-list li {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  min-height: var(--tap);
}

/* One row always: a long product name used to wrap onto its own 52px line
   led by a stray "/". The current crumb is not a link, so it is the one that
   gives way, with an ellipsis; the links keep their full tap height. */
.breadcrumb-list li[aria-current] {
  display: block;
  flex-shrink: 1;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Separators are aria-hidden spans added by app.js, so screen readers do not read them. */
.breadcrumb-sep {
  margin-right: var(--space-2);
  color: var(--color-rule-strong);
}

.breadcrumb-list a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  min-width: var(--tap);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.45em;
  transition: color var(--dur) var(--ease), text-decoration-color var(--dur) var(--ease);
}

.breadcrumb-list a:hover {
  color: var(--color-ink);
  text-decoration-color: var(--color-ink);
}

.product {
  display: grid;
  gap: var(--space-7);
  padding: var(--space-5) 0 var(--section);
}

.gallery-main {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--color-photo);
}

.gallery-main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gallery-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

.gallery-thumb {
  width: 4.5rem;
  aspect-ratio: 4 / 5;
  padding: 0;
  border: 1px solid transparent;
  background: var(--color-photo);
  cursor: pointer;
  opacity: 0.65;
  transition: opacity var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.gallery-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gallery-thumb:hover,
.gallery-thumb[aria-pressed="true"] {
  opacity: 1;
  border-color: var(--color-ink);
}

.product-info {
  min-width: 0;
  overflow-wrap: anywhere;
}

.product-title {
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  margin-bottom: var(--space-3);
}

.product-price {
  margin: 0 0 var(--space-5);
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  letter-spacing: 0.03em;
  color: var(--color-ink-soft);
}

/* The one-line description reads as a pull-quote in the italic serif. */
.product-short {
  max-width: 30rem;
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-lg);
  line-height: 1.35;
  color: var(--color-ink);
}

.buy-box {
  margin: var(--space-5) 0;
  padding: var(--space-5) 0;
  border-top: 1px solid var(--color-rule);
  border-bottom: 1px solid var(--color-rule);
}

.buy-box .btn {
  width: 100%;
}

.made-note {
  margin: var(--space-4) 0 0;
  padding-left: var(--space-4);
  border-left: 1px solid var(--color-ink);
  font-size: var(--fs-sm);
  color: var(--color-ink-soft);
}

.product-subhead {
  margin: var(--space-6) 0 var(--space-3);
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-ink-soft);
}

.product-desc p {
  color: var(--color-ink-soft);
}

.details-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.details-list li {
  padding: var(--space-3) 0;
  border-top: 1px solid var(--color-rule);
  font-size: var(--fs-sm);
  color: var(--color-ink-soft);
}

.details-list li:last-child {
  border-bottom: 1px solid var(--color-rule);
}

.not-found {
  max-width: 34rem;
  margin: 0 auto;
  padding: var(--space-10) 0;
  text-align: center;
}

.not-found .btn {
  margin-top: var(--space-4);
}

@media (min-width: 900px) {
  .product {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--space-9);
    align-items: start;
  }

  .buy-box .btn {
    width: auto;
    min-width: 16rem;
  }
}

/* --------------------------------------------------------------------------
   The House (about.html)
   -------------------------------------------------------------------------- */

/* Intro: the display-size name on the left, the lead and first paragraph on the right. */
.about-intro {
  display: grid;
  gap: var(--space-5);
  padding: var(--space-8) 0 var(--space-7);
}

.about-name {
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
}

.about-lead {
  max-width: 32rem;
  margin: 0 0 var(--space-4);
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  line-height: 1.35;
  color: var(--color-ink);
}

.about-first {
  max-width: 34rem;
  margin: 0;
  font-size: var(--fs-md);
  color: var(--color-ink-soft);
}

.about-media {
  max-width: 56rem;
  margin: 0 auto var(--space-8);
  background: var(--color-photo);
}

@media (min-width: 900px) {
  .about-intro {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--space-8);
    align-items: end;
    padding-bottom: var(--space-8);
  }
}

.about-media img {
  width: 100%;
  aspect-ratio: 1336 / 1368;
  object-fit: cover;
}

/* Already inside main.container, so the narrow column must not take the
   gutters off a second time. */
.about-body {
  width: min(100%, var(--container-narrow));
  padding-bottom: var(--section);
}

.prose {
  font-size: var(--fs-md);
  color: var(--color-ink-soft);
  overflow-wrap: anywhere;
}

.prose p + p {
  margin-top: var(--space-4);
}

.prose strong {
  font-weight: 500;
  color: var(--color-ink);
}

.process {
  display: grid;
  gap: var(--space-6);
  margin: var(--space-8) 0 0;
  padding-top: var(--space-8);
  border-top: 1px solid var(--color-rule);
}

.process-step {
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-ink);
}

.process-number {
  display: block;
  margin-bottom: var(--space-3);
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  color: var(--color-ink-soft);
}

.process-title {
  margin-bottom: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: var(--tracking);
  text-transform: uppercase;
}

.process-text {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--color-ink-soft);
}

.facts {
  display: grid;
  gap: var(--space-4);
  margin: var(--space-8) 0 0;
  padding: var(--space-6) 0;
  border-top: 1px solid var(--color-rule);
  border-bottom: 1px solid var(--color-rule);
}

.facts div {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  font-size: var(--fs-sm);
}

.facts dt {
  font-weight: 500;
  letter-spacing: var(--tracking);
  text-transform: uppercase;
  font-size: var(--fs-2xs);
  color: var(--color-ink-muted);
}

.facts dd {
  margin: 0;
  text-align: right;
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3) var(--space-4);
  margin: var(--space-8) 0 0;
}

/* Equal widths, so the pair lines up when it stacks on a phone. */
.cta-row .btn {
  flex: 0 1 16rem;
}

@media (min-width: 768px) {
  .process {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-7);
  }
}

/* --------------------------------------------------------------------------
   Contact
   -------------------------------------------------------------------------- */

.contact-grid {
  display: grid;
  gap: var(--space-7);
  padding-bottom: var(--section);
}

.contact-block {
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-rule);
}

.contact-block h2 {
  margin-bottom: var(--space-3);
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-ink-soft);
}

.contact-block p {
  color: var(--color-ink-soft);
}

.contact-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  line-height: 1.2;
  color: var(--color-ink);
  text-decoration: underline;
  text-decoration-color: var(--color-ink);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
  overflow-wrap: anywhere;
  transition: color var(--dur) var(--ease);
}

.contact-link:hover {
  color: var(--color-ink-soft);
}

@media (min-width: 900px) {
  .contact-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-8) var(--space-9);
  }
}

/* --------------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------------- */

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

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .hero-copy {
    animation: none;
  }

  .tile:hover .tile-media img,
  .product-card-link:hover .product-card-media img:first-child {
    transform: none;
  }
}