/* ==========================================================================
   TOMYA — homepage prototype
   Hebrew-first, RTL. Logical properties where direction matters.
   ========================================================================== */

:root {
  /* Palette */
  --bone: #F2EEE7;
  --travertine: #E4DDD1;
  --stone: #A39A8C;
  --silver-line: #CFCAC2;
  --clay: #5F574E;
  --ink: #1C1A18;
  --noir: #141312;
  --oxblood: #5C1621;

  /* Type — the single place to change fonts and the Hebrew scale.
     All Hebrew (UI, body, headings, menus, drawers) uses one modern sans.
     English editorial text keeps the serif; handwriting is image-based. */
  --f-he: "IBM Plex Sans Hebrew", "Segoe UI", Arial, sans-serif;
  --f-he-sans: var(--f-he); /* alias used by older rules */
  --f-en-serif: "Instrument Serif", "Times New Roman", serif;
  --f-mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  --f-typewriter: "Special Elite", "Courier New", monospace; /* mobile hero note only */

  --fs-he-xs: 13px;      /* notes, captions */
  --fs-he-sm: 14.5px;    /* nav, buttons, secondary text */
  --fs-he-base: 16.5px;  /* body */
  --fs-he-md: 18px;      /* card names, list titles */
  --fs-he-lg: 20px;      /* drawer titles, mobile menu items */
  --fs-he-xl: clamp(26px, 2.8vw, 40px); /* section headings */
  --fw-he-light: 300;
  --fw-he-regular: 400;
  --fw-he-medium: 500;

  /* Layout */
  --gutter: clamp(20px, 4.4vw, 64px);
  --section-y: clamp(64px, 8.4vw, 124px);
  --header-h: 72px;
  --max: 1520px;

  /* Motion */
  --ease: cubic-bezier(.22, .61, .2, 1);
  --slow: 1100ms;
}

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

/* `hidden` must always win over component display rules (menu, drawer), otherwise a closed
   layer stays on top of the page — invisible, but still catching clicks. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bone);
  color: var(--ink);
  font-family: var(--f-he-sans);
  font-weight: 300;
  font-size: 16.5px;
  line-height: 1.7;
  text-align: right; /* inherited as "right", so English (dir=ltr) blocks align with the Hebrew */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Paper grain — barely visible, gives surfaces a material feel */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 100;
  opacity: .05;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

img { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
bdi { unicode-bidi: isolate; }

[lang="en"] { font-family: var(--f-en-serif); }
/* Hebrew inside an English block keeps the site's Hebrew sans (the serif has no Hebrew) */
[lang="en"] [lang="he"] { font-family: var(--f-he); }
.mono, .mono[lang="en"] {
  font-family: var(--f-mono);
  font-size: 11.5px;
  letter-spacing: .04em;
  font-weight: 400;
  unicode-bidi: isolate;
}

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

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.skip-link {
  position: absolute; inset-inline-start: 12px; top: -60px; z-index: 200;
  background: var(--ink); color: var(--bone); padding: 10px 16px; font-size: 14px;
}
.skip-link:focus { top: 12px; }

/* ---------- Shared typography ---------- */

.eyebrow,
.eyebrow[lang="en"] {
  font-family: var(--f-he-sans);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--clay);
  margin-bottom: 18px;
}
.eyebrow--light { color: rgba(242, 238, 231, .78); }

/* Hebrew headings: same sans as the UI, no tracking on Hebrew */
.section-title {
  font-family: var(--f-he);
  font-weight: var(--fw-he-regular);
  font-size: var(--fs-he-xl);
  line-height: 1.25;
}

.section { padding: var(--section-y) var(--gutter); max-width: var(--max); margin-inline: auto; }
/* Categories and Best Sellers read as one shopping block: a much smaller gap between them */
.categories { padding-bottom: clamp(24px, 2.8vw, 40px); }
.pieces { padding-top: clamp(24px, 2.8vw, 40px); }

.section-head { margin-bottom: clamp(28px, 3.6vw, 52px); }
.section-head .eyebrow { margin-bottom: 12px; }
.section-head--split { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 15px; font-weight: 400;
  padding-bottom: 4px;
  background: linear-gradient(currentColor, currentColor) no-repeat;
  background-size: 100% 1px;
  background-position: 100% 100%;
  transition: background-size .5s var(--ease), color .3s;
}
.link-arrow span { transition: transform .5s var(--ease); }
.link-arrow:hover { color: var(--oxblood); }
.link-arrow:hover span { transform: translateX(-6px); }
.link-arrow--light { color: var(--bone); }
.link-arrow--light:hover { color: #fff; }

.text-btn { font-size: 14px; font-weight: 400; padding: 8px 2px; }
.text-btn:hover { color: var(--oxblood); }

.demo-tag {
  display: inline-block;
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: .08em;
  color: var(--stone);
  border: 1px solid var(--silver-line);
  padding: 1px 5px 0;
  margin-inline-start: 6px;
  vertical-align: middle;
  line-height: 1.5;
}
/* Marks text that is still temporary. Hebrew font (the mono font has no Hebrew glyphs). */
.placeholder-line {
  font-size: 13px;
  font-weight: 400;
  color: var(--clay);
  margin-top: 14px;
  padding-inline-start: 10px;
  border-inline-start: 2px solid var(--silver-line);
}
.placeholder-line--dark { color: rgba(242, 238, 231, .55); border-color: rgba(242, 238, 231, .2); }
/* Policy details that still need the owner's confirmation */
.confirm-flag {
  font-size: 13px; font-weight: 400; line-height: 1.6;
  color: var(--oxblood);
  padding: 10px 12px; margin-top: 6px;
  background: rgba(92, 22, 33, .06);
  border-inline-start: 2px solid var(--oxblood);
}
.confirm-flag--inline { display: inline-block; margin-top: 14px; padding: 4px 10px; font-size: 12.5px; }

/* ---------- Demo note ---------- */

.demo-note {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  background: var(--ink); color: var(--bone);
  font-size: 12px; padding: 7px 44px; position: relative; text-align: center;
}
.demo-note .mono { opacity: .6; font-size: 10px; letter-spacing: .18em; }
.demo-note__close { position: absolute; inset-inline-end: 14px; top: 50%; transform: translateY(-50%); font-size: 18px; line-height: 1; opacity: .7; }
.demo-note__close:hover { opacity: 1; }

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

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(242, 238, 231, .9);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .4s, background .4s;
}
.site-header.is-scrolled { border-bottom-color: var(--silver-line); }

.site-header__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: var(--header-h);
  padding-inline: var(--gutter);
  max-width: var(--max); margin-inline: auto;
  transition: height .4s var(--ease);
}
.site-header.is-scrolled .site-header__inner { height: 60px; }

.main-nav ul { display: flex; gap: clamp(16px, 1.9vw, 32px); }
.main-nav a { font-size: 14.5px; font-weight: 400; position: relative; padding-block: 8px; white-space: nowrap; }
.main-nav a::after {
  content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: right; transition: transform .45s var(--ease);
}
.main-nav a:hover::after, .main-nav a:focus-visible::after { transform: scaleX(1); }

.brand img { width: clamp(104px, 9vw, 138px); transition: width .4s var(--ease); }
.site-header.is-scrolled .brand img { width: clamp(92px, 7.6vw, 116px); }

.header-actions { display: flex; justify-content: flex-end; align-items: center; gap: clamp(16px, 1.9vw, 28px); }
.header-actions .text-btn { white-space: nowrap; }
.cart-count { font-family: var(--f-mono); font-size: 12px; }
.cart-count.bump { color: var(--oxblood); }

.menu-toggle { display: none; width: 40px; height: 40px; align-items: center; }
.menu-toggle__lines, .menu-toggle__lines::before {
  display: block; width: 22px; height: 1px; background: var(--ink); position: relative;
}
.menu-toggle__lines::before { content: ""; position: absolute; top: 7px; width: 14px; }

/* Mobile navigation panel — slides in from the right (the reading start in RTL) */
.mobile-menu {
  position: fixed; inset: 0; z-index: 80;
  background: var(--bone);
  padding: 0 var(--gutter) max(24px, env(safe-area-inset-bottom));
  display: flex; flex-direction: column;
  overflow-y: auto;
  opacity: 0; transform: translateX(28px);
  transition: opacity .4s var(--ease), transform .5s var(--ease);
}
.mobile-menu.is-open { opacity: 1; transform: none; }
.mobile-menu__top {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  height: var(--header-h); flex-shrink: 0;
  border-bottom: 1px solid var(--silver-line);
}
.mobile-menu__logo { width: 96px; }
.mobile-menu__close {
  justify-self: end;
  font-family: var(--f-he); font-size: 11px; font-weight: var(--fw-he-regular);
  letter-spacing: .18em; text-transform: uppercase;
  padding: 10px 0;
}
/* One list, one style: small tracked caps, left-aligned, hairlines between items */
.mobile-menu__nav { padding-top: 8px; text-align: left; }
.mobile-menu__list a, .mobile-menu__list button {
  display: block; width: 100%; text-align: left;
  font-family: var(--f-he); font-size: 12.5px; font-weight: var(--fw-he-regular); line-height: 1.4;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink);
  padding: 17px 0;
  border-bottom: 1px solid var(--silver-line);
  transition: color .3s, padding .4s var(--ease);
}
.mobile-menu__list a:hover, .mobile-menu__list a:focus-visible,
.mobile-menu__list button:hover, .mobile-menu__list button:focus-visible {
  color: var(--oxblood); padding-left: 6px;
}
/* ---------- 01 Hero ---------- */

.hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  grid-template-areas: "content media";
  height: calc(100svh - var(--header-h) - 31px);
  min-height: 600px;
  max-height: 860px;
}
.hero__media { grid-area: media; position: relative; overflow: hidden; min-height: 0; }
.hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }

/* Centred editorial column: label, two-line headline, the ring sketch, then the shop link */
.hero__content {
  grid-area: content;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  padding: clamp(36px, 4.4vw, 72px) clamp(20px, 2.6vw, 44px);
  text-align: center;
}
.hero__head { display: flex; flex-direction: column; align-items: center; }
.hero__head .eyebrow { margin-bottom: clamp(16px, 1.8vw, 26px); }
.hero__title {
  font-weight: 400;
  font-size: clamp(54px, 6vw, 104px);
  line-height: .98;
  letter-spacing: -.02em;
}
.hero__title .line { display: block; }
.hero__title em { font-style: italic; }

.hero__sketch { width: min(100%, 560px); margin-top: clamp(18px, 2.6vw, 40px); }
.hero__sketch img { width: 100%; height: auto; }
/* The full design sheet is almost square: size it by the space left under the headline */
.hero__sketch--sheet { width: min(100%, 440px, calc(100svh - 470px)); min-width: 300px; margin-top: clamp(16px, 2vw, 28px); }
.hero__cta { margin-top: clamp(10px, 1.6vw, 22px); }
/* Two labels in one link: only the arrow moves on hover, never the whole label */
.hero__cta > span { transform: none !important; }
.hero__cta-arrow { display: inline-block; transition: transform .5s var(--ease); }
.hero__cta:hover .hero__cta-he .hero__cta-arrow { transform: translateX(-6px); }
.hero__cta:hover .hero__cta-en .hero__cta-arrow { transform: translateX(4px); }
.hero__cta-en { display: none; }

/* ---------- 02 Categories ---------- */

/* Four equal cards in one row. Same 4:5 image, same gap, same label line — calm and ordered. */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 24px);
  align-items: start;
}
.cat { display: block; position: relative; }

.cat__media { position: relative; overflow: hidden; background: var(--travertine); }
.cat__media img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: var(--focus, 50% 50%);
  transition: transform var(--slow) var(--ease);
}

/* English label under each image, read left to right: name on the left, number on the right */
.cat__label {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  margin-top: 10px; padding-top: 8px;
  border-top: 1px solid var(--silver-line);
  text-align: left;
  transition: border-color .4s;
}
.cat__en { font-style: italic; font-size: clamp(17px, 1.35vw, 21px); line-height: 1.2; transition: transform .5s var(--ease); }
.cat__label .mono { color: var(--clay); font-size: 11px; }
.cat__heading { margin: 0; }

.cat:hover .cat__media img { transform: scale(1.045); }
.cat:hover .cat__label { border-top-color: var(--ink); }
.cat:hover .cat__en { transform: translateX(4px); }

/* ---------- 03 Selected pieces ---------- */

.piece-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(40px, 4vw, 60px) clamp(16px, 2vw, 32px);
}
.piece { position: relative; display: flex; flex-direction: column; }

/* ---------- Best Sellers card (editorial) ----------
   Image with a small + in its top-right corner. Below it, read left to right:
   name, then price beneath it; the index number sits small on the right, level with the name. */
.piece__visual { position: relative; }
.piece__plus {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(253, 252, 249, .82);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  color: var(--ink);
  transition: background .3s, transform .4s var(--ease);
}
/* a thin drawn plus, lighter than a font glyph */
.piece__plus span { position: relative; width: 11px; height: 11px; }
.piece__plus span::before, .piece__plus span::after {
  content: ""; position: absolute; inset: 0; margin: auto; background: currentColor;
}
.piece__plus span::before { width: 11px; height: 1px; }
.piece__plus span::after { width: 1px; height: 11px; }
.piece__plus:hover { background: #fff; transform: rotate(90deg); }
.piece__plus:focus-visible { outline: 1px solid var(--ink); outline-offset: 3px; }

.piece__info {
  display: grid; grid-template-columns: 1fr auto;
  grid-template-areas: "name index" "price index";
  column-gap: 12px; row-gap: 5px;
  align-items: baseline;
  padding-top: 16px;
  text-align: left;
}
.piece__info .piece__name { grid-area: name; }
.piece__info .piece__price { grid-area: price; font-size: 13.5px; color: var(--clay); letter-spacing: .02em; }
.piece__info .piece__index { grid-area: index; align-self: start; padding-top: 2px; color: var(--stone); font-size: 10.5px; margin: 0; }
.piece:hover .piece__info .piece__index { color: var(--oxblood); }
/* ---------- Carousel (Best Sellers) ----------
   One row that scrolls sideways. Native scrolling + snap = touch swipe, trackpad and keyboard
   all work; nothing is duplicated, there is no autoplay. 3 cards per view on desktop. */
.carousel { position: relative; --gap: clamp(16px, 2vw, 32px); }
.carousel__track {
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 2 * var(--gap)) / 3);
  gap: var(--gap);
  overflow-x: auto; overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__track > li { scroll-snap-align: start; }
.carousel__track:focus-visible { outline: 1px solid var(--ink); outline-offset: 6px; }

.pieces__head { position: relative; }
.carousel__controls {
  position: absolute; inset-inline-end: 0; bottom: 2px;
  display: flex; gap: 8px;
}
.carousel__btn {
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--silver-line); font-size: 15px;
  transition: border-color .3s, color .3s, opacity .3s;
}
.carousel__btn:hover:not(:disabled) { border-color: var(--ink); }
.carousel__btn:disabled { opacity: .3; cursor: default; }
.piece__media { display: block; overflow: hidden; background: var(--travertine); }
.piece__media img {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
  transition: transform var(--slow) var(--ease), filter .6s;
}
/* All product photos come from the same studio shoot, so one shared crop keeps the grid even */
.piece:hover .piece__media img { transform: scale(1.04); }

/* Number, then name and price on one line (name at the start, price at the end).
   Name uses the site's Hebrew text face, so cards match the rest of the Hebrew copy. */
.piece__info { padding-top: 16px; }
.piece__info .mono { display: block; color: var(--clay); margin-bottom: 6px; transition: color .4s; }
.piece:hover .piece__info .mono { color: var(--oxblood); }
.piece__info { cursor: pointer; }
.piece__row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.piece__name { font-family: var(--f-he-sans); font-size: clamp(16px, 1.2vw, 18px); font-weight: 400; line-height: 1.35; }
.piece__price { font-size: 16px; font-weight: 400; color: var(--clay); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* English product names (Best Sellers): small tracked caps, like the site's other English
   labels. Card rhythm: number · name · price · add-to-cart, on one consistent spacing scale. */
.piece__name--en {
  font-family: var(--f-he); /* the sans carries Latin too; same family as the site's English labels */
  font-size: 12.5px; font-weight: var(--fw-he-medium); line-height: 1.4;
  letter-spacing: .16em; text-transform: uppercase;
  unicode-bidi: isolate;
}
.piece__info { display: grid; gap: 6px; }
.piece__info .mono { margin-bottom: 0; }
.piece__row { align-items: baseline; }
.piece__price { font-size: 14.5px; color: var(--clay); }
.piece__add { margin-top: 14px; }
.piece__meta { margin-top: 6px; font-size: 13.5px; font-weight: 400; color: var(--clay); line-height: 1.55; }
.piece__meta > span { white-space: nowrap; }

.piece__add {
  align-self: flex-start;
  margin-top: 12px; font-size: 13.5px; font-weight: 400;
  border-bottom: 1px solid currentColor; padding-bottom: 2px;
  opacity: 0; transform: translateY(6px);
  transition: opacity .4s var(--ease), transform .4s var(--ease), color .3s;
}
.piece:hover .piece__add, .piece__add:focus-visible { opacity: 1; transform: none; }
.piece__add:hover { color: var(--oxblood); }
@media (hover: none) { .piece__add { opacity: 1; transform: none; } }

.circled path {
  fill: none; stroke: var(--oxblood); stroke-width: 1.4; stroke-linecap: round;
  stroke-dasharray: 600; stroke-dashoffset: 600;
  transition: stroke-dashoffset 1.8s var(--ease) .3s;
}
.is-in.circled path, .is-in .circled path { stroke-dashoffset: 0; }

/* Best sellers heading */
.section-head--center { display: flex; flex-direction: column; align-items: center; text-align: center; }
.pieces__title {
  font-weight: 400; font-size: clamp(38px, 3.8vw, 60px); line-height: 1;
  text-transform: uppercase; letter-spacing: .03em;
}
.pieces__more { margin-top: clamp(32px, 3.6vw, 48px); display: flex; justify-content: center; }

/* ---------- 04 Studio ---------- */

.studio {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(16px, 2vw, 32px);
  align-items: center;
}
.studio__visual { grid-column: 1 / span 4; position: relative; }
.studio__portrait { overflow: hidden; }
.studio__portrait img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 78%; } /* keeps the bench, tools and cat in frame */

.studio__text { grid-column: 6 / span 6; position: relative; align-self: stretch; display: flex; flex-direction: column; justify-content: center; }
.studio__sheet { display: none; } /* phones only, see the mobile block */

/* Handwritten headline: kept smaller than the logo's visual weight, never the dominant element */
.studio__title { margin: 0 0 26px; }
.studio__title img { display: block; width: clamp(236px, 23.5vw, 340px); height: auto; }
.studio__text > .eyebrow { text-align: left; } /* English label reads from the left */
.studio__body { display: grid; gap: 14px; max-width: 44ch; }
.studio__body p { color: var(--clay); font-size: 17px; font-weight: 400; line-height: 1.8; }
/* The real handwritten signature: a small accent, never larger than the body text block */
.studio__sign { display: block; width: clamp(144px, 12vw, 184px); height: auto; margin-top: 26px; opacity: .92; }

.circled { position: relative; white-space: nowrap; display: inline-block; }
.circled svg { position: absolute; top: -14%; left: -7%; width: 112%; height: 132%; overflow: visible; pointer-events: none; }

/* Small detail image overlapping the portrait's lower corner */
.studio__inset {
  /* top corner, over the window — the bench, tools and cat stay uncovered */
  position: absolute; inset-inline-end: clamp(-72px, -4.5vw, -40px); top: clamp(-40px, -2.6vw, -24px);
  width: clamp(110px, 10vw, 156px);
  border: 6px solid var(--bone);
}
.studio__inset img { aspect-ratio: 3 / 4; object-fit: cover; }

/* ---------- 06 + 07 Customer care + footer ---------- */

.site-footer { background: var(--noir); color: var(--bone); padding: 0 var(--gutter); overflow: hidden; }

.care {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  max-width: var(--max); margin: 0 auto clamp(48px, 6vw, 80px);
  border-bottom: 1px solid rgba(242, 238, 231, .14);
}
.care li + li { border-inline-start: 1px solid rgba(242, 238, 231, .14); }
.care__item {
  width: 100%; display: flex; align-items: baseline; gap: 12px;
  padding: 26px clamp(12px, 1.8vw, 28px); text-align: right;
  transition: background .4s var(--ease);
}
.care li:first-child .care__item { padding-inline-start: 0; }
.care .mono { color: rgba(242, 238, 231, .45); }
.care__title { font-family: var(--f-he); font-size: var(--fs-he-md); font-weight: var(--fw-he-regular); color: var(--bone); }
.care__arrow { margin-inline-start: auto; color: rgba(242, 238, 231, .6); transition: transform .5s var(--ease); }
.care__item:hover .care__arrow { transform: translateX(-6px); color: var(--bone); }
.care__item:hover .care__title { color: #fff; }

.footer-grid {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1.4fr; gap: 40px;
  max-width: var(--max); margin-inline: auto;
}
.footer-brand img { width: clamp(160px, 14vw, 220px); margin-bottom: 22px; }
.footer-brand p { color: rgba(242, 238, 231, .62); font-size: 14.5px; max-width: 30ch; }
.footer-col__title {
  font-family: var(--f-he-sans) !important; font-weight: 400;
  font-size: 11px; letter-spacing: .24em; text-transform: uppercase;
  color: rgba(242, 238, 231, .5); margin-bottom: 18px;
}
.footer-col ul { display: grid; gap: 10px; }
.footer-col a, .footer-col button { font-size: 15px; color: rgba(242, 238, 231, .86); transition: color .3s; text-align: right; }
.footer-col a:hover, .footer-col button:hover { color: #fff; }
.footer-handle { font-family: var(--f-mono); font-size: 12px; opacity: .7; margin-inline-start: 6px; }
.footer-muted { font-size: 14px; color: rgba(242, 238, 231, .55); }

.footer-bottom {
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  max-width: var(--max); margin: clamp(40px, 5vw, 64px) auto 0;
  padding-top: 22px; border-top: 1px solid rgba(242, 238, 231, .14);
  font-size: 12.5px; color: rgba(242, 238, 231, .5);
}
.footer-legal { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.footer-legal a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(242, 238, 231, .35); }
.footer-legal a:hover { text-decoration-color: currentColor; }
.footer-bottom [lang="en"] { font-family: var(--f-mono); font-size: 11.5px; }
/* Only the top of the wordmark shows; the footer's overflow clips the rest */
.footer-watermark { width: 100%; max-width: var(--max); margin: 12px auto min(-9vw, -40px); opacity: .07; }

/* ---------- Drawer / toast ---------- */

.drawer-backdrop {
  position: fixed; inset: 0; z-index: 90; background: rgba(20, 19, 18, .32);
  opacity: 0; transition: opacity .45s var(--ease);
}
.drawer-backdrop.is-open { opacity: 1; }
.drawer {
  position: fixed; top: 0; bottom: 0; left: 0; z-index: 95;
  width: min(440px, 100vw);
  background: var(--bone);
  padding: 0 32px 32px;
  display: flex; flex-direction: column;
  transform: translateX(-102%); transition: transform .55s var(--ease);
  box-shadow: 0 0 60px rgba(20, 19, 18, .12);
}
.drawer.is-open { transform: none; }
.drawer__head { display: flex; justify-content: space-between; align-items: center; height: var(--header-h); border-bottom: 1px solid var(--silver-line); margin-bottom: 28px; }
.drawer__title { font-family: var(--f-he); font-weight: var(--fw-he-medium); font-size: var(--fs-he-lg); }
.drawer__body { overflow-y: auto; display: grid; gap: 14px; align-content: start; color: var(--clay); }
.drawer__body p:not(.placeholder-line) { font-size: 15.5px; }
.drawer__list small { display: block; margin-top: 2px; font-size: var(--fs-he-xs); color: var(--stone); }
.drawer__sub { font-family: var(--f-he); font-weight: var(--fw-he-medium); font-size: var(--fs-he-base); color: var(--ink); margin-top: 10px; }
.drawer__list { display: grid; border-top: 1px solid var(--silver-line); }
.drawer__list li {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 10px 0; border-bottom: 1px solid var(--silver-line);
  font-size: 14.5px; font-weight: 400; color: var(--ink);
}
.drawer__note { font-size: 13px; color: var(--clay); border-top: 1px solid var(--silver-line); padding-top: 16px; margin-top: 8px; }
.cart-line { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--silver-line); color: var(--ink); font-size: 15px; }
.cart-line button { font-size: 13px; color: var(--clay); }
.cart-line button:hover { color: var(--oxblood); }
.cart-empty { color: var(--clay); }
/* text pages: terms, privacy, accessibility, 404 */
.doc-page { padding: clamp(40px, 6vw, 88px) var(--gutter) var(--section-y); }
.doc { max-width: 720px; margin-inline: auto; }
.doc__eyebrow { font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--clay); }
.doc__title {
  margin: 14px 0 10px; font-family: var(--f-he); font-weight: var(--fw-he-regular);
  font-size: clamp(30px, 3.2vw, 44px); line-height: 1.15;
}
.doc__title[lang="en"] { font-family: var(--f-en-serif); text-transform: uppercase; font-size: clamp(38px, 3.8vw, 60px); }
.doc__updated { font-size: var(--fs-he-xs); color: var(--stone); margin-bottom: 32px; }
.doc h2 { font-family: var(--f-he); font-weight: var(--fw-he-medium); font-size: var(--fs-he-md); margin: 34px 0 10px; }
.doc p, .doc li { font-size: var(--fs-he-base); line-height: 1.75; color: var(--clay); }
.doc p + p { margin-top: 10px; }
.doc ul { display: grid; gap: 6px; padding-inline-start: 1.2em; list-style: disc; }
.doc a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.doc strong { color: var(--ink); font-weight: var(--fw-he-medium); }
.doc .confirm-flag { margin-top: 18px; }
.doc--center { text-align: center; padding-block: clamp(24px, 6vw, 80px); }
.doc__actions { display: grid; justify-items: center; gap: 18px; margin-top: 28px; }
.doc__btn { width: min(100%, 320px); color: var(--bone) !important; text-decoration: none !important; }

/* search */
.search-status { font-size: var(--fs-he-xs); color: var(--clay); min-height: 1.4em; }
.search-results { display: grid; }
.search-hit {
  display: grid; grid-template-columns: 56px 1fr auto; gap: 14px; align-items: center;
  padding: 10px 0; border-bottom: 1px solid var(--silver-line); color: var(--ink);
}
.search-hit img { width: 56px; height: 70px; object-fit: cover; background: var(--travertine); }
.search-hit__name { display: grid; gap: 2px; }
.search-hit__name [lang="en"] { font-family: var(--f-en-serif); font-size: 17px; text-align: right; }
.search-hit__name small { font-size: var(--fs-he-xs); color: var(--clay); }
.search-hit .mono { font-size: 12px; }
.search-hit:hover [lang="en"] { color: var(--oxblood); }
/* live cart (Wix) */
.cart-item {
  display: grid; grid-template-columns: 72px 1fr auto; gap: 14px; align-items: start;
  padding: 14px 0; border-bottom: 1px solid var(--silver-line);
}
.cart-item img { width: 72px; height: 90px; object-fit: cover; background: var(--travertine); }
.cart-item__name { font-family: var(--f-en-serif); font-size: 17px; color: var(--ink); text-align: right; }
.cart-item__opt { font-size: var(--fs-he-xs); color: var(--clay); margin-top: 2px; }
.cart-item__warn { color: var(--oxblood); }
.cart-item__qty { display: inline-flex; align-items: center; gap: 12px; margin-top: 10px; border: 1px solid var(--silver-line); padding: 4px 10px; }
.cart-item__qty button { font-size: 15px; line-height: 1; color: var(--ink); padding: 2px 4px; }
.cart-item__qty .mono { font-size: 12px; min-width: 1.5ch; text-align: center; }
.cart-item__end { display: grid; justify-items: end; gap: 10px; font-size: 13px; color: var(--ink); }
.cart-item__remove { font-size: 12.5px; color: var(--clay); text-decoration: underline; text-underline-offset: 3px; }
.cart-item__remove:hover { color: var(--oxblood); }
.cart-total { display: flex; justify-content: space-between; padding: 16px 0 4px; font-size: var(--fs-he-base); color: var(--ink); }
.cart-checkout { margin-top: 12px; font-size: var(--fs-he-sm); letter-spacing: .02em; }
.size.is-out { color: var(--stone); text-decoration: line-through; cursor: not-allowed; border-style: dashed; }
.size.is-out:hover { border-color: var(--silver-line); }

.field input {
  width: 100%; font: inherit; font-size: 20px; color: var(--ink);
  background: transparent; border: 0; border-bottom: 1px solid var(--ink);
  padding: 10px 0; border-radius: 0;
}
.field input:focus { outline: none; border-bottom-color: var(--oxblood); }

.toast {
  position: fixed; bottom: 24px; left: 50%; z-index: 99;
  transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  background: var(--ink); color: var(--bone); font-size: 13.5px;
  padding: 10px 20px; transition: opacity .4s, transform .4s var(--ease);
}
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Reveal animations (enabled only when JS runs) ---------- */

.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }
/* The mask sits on the image, so the observed figure keeps its full box */
.js .reveal-mask img {
  clip-path: inset(100% 0 0 0); transform: scale(1.08);
  transition: clip-path 1.4s var(--ease), transform 1.8s var(--ease);
}
.js .reveal-mask.is-in img { clip-path: inset(0 0 0 0); transform: scale(1); }

/* ==========================================================================
   Shop — the collection as a catalogue sheet: quiet English type, numbered
   pieces, wide "spreads" for worn shots, and a few editorial breaks.
   ========================================================================== */

.shop { max-width: var(--max); margin-inline: auto; padding: 0 var(--gutter) var(--section-y); }

.shop-head { text-align: center; padding: clamp(40px, 6vw, 88px) 0 clamp(22px, 3vw, 36px); }
.shop-head .eyebrow { margin-bottom: 14px; }
.shop-head__title {
  font-family: var(--f-en-serif); font-weight: 400;
  font-size: clamp(40px, 5vw, 76px); line-height: 1; letter-spacing: .01em; text-transform: uppercase;
}
.shop-head__count { display: block; margin-top: 14px; color: var(--clay); text-transform: uppercase; letter-spacing: .14em; font-size: 10.5px; }

.shop-bar {
  position: sticky; top: 60px; z-index: 30;
  margin: 0 calc(var(--gutter) * -1) clamp(22px, 3vw, 40px);
  background: rgba(242, 238, 231, .92);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-top: 1px solid var(--silver-line); border-bottom: 1px solid var(--silver-line);
}
.shop-bar__inner {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 0 var(--gutter); max-width: var(--max); margin-inline: auto;
}
.shop-filters { display: flex; gap: clamp(16px, 2.4vw, 36px); overflow-x: auto; scrollbar-width: none; }
.shop-filters::-webkit-scrollbar { display: none; }
.shop-filters button, .shop-sort select {
  font-family: var(--f-he); font-size: 11px; font-weight: var(--fw-he-regular);
  letter-spacing: .18em; text-transform: uppercase; color: var(--clay);
  padding: 15px 0; white-space: nowrap;
}
.shop-filters button { position: relative; }
.shop-filters sup { font-family: var(--f-mono); font-size: 8.5px; letter-spacing: 0; margin-left: 2px; vertical-align: super; }
.shop-filters button[aria-pressed="true"] { color: var(--ink); }
.shop-filters button[aria-pressed="true"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--ink);
}
.shop-sort select {
  appearance: none; -webkit-appearance: none; border: 0; background: transparent; cursor: pointer;
  padding-right: 14px;
  background-image: linear-gradient(45deg, transparent 50%, var(--clay) 50%), linear-gradient(135deg, var(--clay) 50%, transparent 50%);
  background-position: right 4px center, right 0 center; background-size: 4px 4px; background-repeat: no-repeat;
}

/* the grid: 4 across, dense packing so spreads and notes slot in neatly */
.shop-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-flow: row dense;
  --cols: 4; --g: clamp(14px, 1.6vw, 24px);
  gap: clamp(40px, 4.4vw, 64px) var(--g);
  container-type: inline-size;
}
.shop-card { animation: shop-in .6s var(--ease) both; }
.shop-card .piece__media img { aspect-ratio: 4 / 5; }
.shop-card--spread { grid-column: span 2; }
/* a spread is exactly as tall as one tile: (one column width) x 5/4, gaps included */
.shop-card--spread .piece__media img, .shop-note--photo img, .shop-note--sheet img {
  aspect-ratio: auto; width: 100%;
  height: calc((100cqw - (var(--cols) - 1) * var(--g)) / var(--cols) * 1.25);
}
.shop-card.is-sold-out .piece__media img { opacity: .55; }
.shop-card.is-sold-out .piece__price { color: var(--stone); text-transform: uppercase; letter-spacing: .14em; font-size: 10.5px; }
@keyframes shop-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* editorial breaks */
.shop-interlude { grid-column: span 2; animation: shop-in .6s var(--ease) both; }
.shop-interlude--band { grid-column: 1 / -1; }
.shop-note { margin: 0; }
.shop-note img { width: 100%; aspect-ratio: 8 / 5; object-fit: cover; }
.shop-note--sheet img { object-fit: contain; background: var(--bone); }
.shop-note figcaption {
  display: flex; gap: 10px; align-items: baseline; padding-top: 14px; text-align: left;
  font-family: var(--f-en-serif); font-style: italic; font-size: 17px; color: var(--clay);
}
.shop-note figcaption .mono { font-style: normal; text-transform: uppercase; letter-spacing: .14em; font-size: 10px; color: var(--stone); }
.shop-band {
  display: grid; place-items: center;
  padding: clamp(24px, 4vw, 56px) 0;
  border-top: 1px solid var(--silver-line); border-bottom: 1px solid var(--silver-line);
}
.shop-band img { width: clamp(220px, 24vw, 340px); height: auto; }

@media (max-width: 1023px) {
  .shop-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); --cols: 3; }
}
@media (max-width: 860px) {
  .shop-bar { top: 54px; }
  .shop-filters { gap: 18px; }
  .shop-sort { display: none; } /* phones: filters only, kept on one line */
  .shop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); --cols: 2; --g: 12px; gap: 32px var(--g); }
  .shop-card--spread, .shop-interlude { grid-column: 1 / -1; }
  .shop-card--spread .piece__media img, .shop-note--photo img, .shop-note--sheet img { height: auto; aspect-ratio: 4 / 3; }
}
@media (prefers-reduced-motion: reduce) { .shop-card, .shop-interlude { animation: none; } }

/* ==========================================================================
   Product page — a magazine spread with an archive record card:
   numbered plates on the left, the piece's catalogue card on the right,
   then an inspiration spread and more pieces from the archive.
   ========================================================================== */

/* One small type scale for the whole page:
   display  = same as the Best Sellers title     body  = --fs-he-base
   quote    = --pd-quote (a step above body)     label = --pd-label (all small caps / numbers) */
.pd {
  --pd-display: clamp(38px, 3.8vw, 60px);
  --pd-quote: clamp(19px, 1.6vw, 24px);
  --pd-value: 16px;
  --pd-label: 10.5px;
  --pd-btn: 11.5px;
  max-width: var(--max); margin-inline: auto; padding: 0 var(--gutter) var(--section-y);
}
.pd-crumb {
  display: flex; gap: 10px; flex-wrap: wrap;
  padding: 22px 0 26px; text-transform: uppercase; letter-spacing: .14em; font-size: var(--pd-label); color: var(--stone);
}
.pd-crumb a:hover { color: var(--ink); }

.pd-layout {
  direction: ltr;
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(28px, 4.4vw, 72px); align-items: start;
}

/* plates */
.pd-gallery { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(12px, 1.4vw, 20px); }
.pd-shot { margin: 0; }
.pd-shot--lead, .pd-shot--wide { grid-column: 1 / -1; }
/* a plate without a partner keeps its pair size and sits on one side, like an offset magazine plate */
.pd-shot--solo { grid-column: 1 / -1; width: calc(50% - clamp(12px, 1.4vw, 20px) / 2); justify-self: end; }
.pd-shot img, .pd-shot video { width: 100%; height: auto; display: block; background: var(--travertine); }
.pd-shot--pair :is(img, video), .pd-shot--solo :is(img, video) { aspect-ratio: 4 / 5; object-fit: cover; }
.pd-shot--lead :is(img, video) { max-height: 86vh; object-fit: cover; }
.pd-shot figcaption { padding-top: 8px; font-size: var(--pd-label); letter-spacing: .14em; color: var(--stone); }

/* record card */
.pd-card { position: sticky; top: 84px; text-align: left; }
.pd-index { font-size: var(--pd-label); letter-spacing: .14em; text-transform: uppercase; color: var(--clay); margin-bottom: 18px; }
.pd-name {
  font-family: var(--f-en-serif); font-weight: 400; text-transform: uppercase;
  font-size: var(--pd-display); line-height: 1; letter-spacing: .03em;
}
.pd-price { margin-top: 16px; font-family: var(--f-he); font-size: var(--fs-he-md); font-weight: var(--fw-he-regular); letter-spacing: .02em; }

.pd-record { margin: 28px 0 0; border-top: 1px solid var(--ink); }
.rec-row {
  display: grid; grid-template-columns: 104px 1fr; align-items: baseline;
  padding: 11px 0; border-bottom: 1px solid var(--silver-line);
}
.rec-row dt { font-family: var(--f-mono); font-size: var(--pd-label); letter-spacing: .16em; text-transform: uppercase; color: var(--stone); }
.rec-row dd { margin: 0; font-family: var(--f-en-serif); font-size: var(--pd-value); }
.rec-row dd.rec-hand { font-style: italic; }

.pd-options { margin-top: 28px; display: grid; gap: 24px; }
.pd-sizes--wide .pd-sizes__list { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); }
.pd-field { display: grid; gap: 8px; }
.pd-field__label { font-family: var(--f-he); font-size: var(--pd-btn); letter-spacing: .18em; text-transform: uppercase; }
.pd-field input {
  font: inherit; font-family: var(--f-he); font-size: var(--fs-he-sm); color: var(--ink);
  padding: 10px 0; background: transparent; border: 0; border-bottom: 1px solid var(--silver-line); border-radius: 0;
}
.pd-field input:focus { outline: none; border-bottom-color: var(--ink); }
.pd-field input::placeholder { color: var(--stone); }
.pd-sizes__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; }
.pd-sizes__head span, .pd-link {
  font-family: var(--f-he); font-size: var(--pd-btn); letter-spacing: .18em; text-transform: uppercase;
}
.pd-sizes__head b { font-family: var(--f-mono); font-weight: 400; letter-spacing: .04em; margin-left: 6px; }
.pd-link { color: var(--clay); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.pd-link:hover { color: var(--ink); }
.pd-sizes__list { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.size {
  font-family: var(--f-mono); font-size: 12px; padding: 11px 0;
  border: 1px solid var(--silver-line); transition: border-color .25s, background .25s, color .25s;
}
.size:hover { border-color: var(--ink); }
.size[aria-pressed="true"] { background: var(--ink); color: var(--bone); border-color: var(--ink); }
.pd-sizes__hint { display: none; margin-top: 10px; font-family: var(--f-he); font-size: var(--fs-he-xs); color: var(--oxblood); text-align: left; }
.pd-sizes.is-missing .pd-sizes__hint { display: block; }
.pd-sizes.is-missing .size { border-color: rgba(92, 22, 33, .45); }

.pd-add {
  margin-top: 22px; width: 100%;
  display: flex; justify-content: space-between; align-items: center;
  padding: 17px 20px; background: var(--ink); color: var(--bone);
  font-family: var(--f-he); font-size: var(--pd-btn); letter-spacing: .2em; text-transform: uppercase;
  transition: background .3s;
}
.pd-add:hover:not(:disabled) { background: #000; }
.pd-add:disabled { background: var(--stone); cursor: default; }
.pd-add [data-p="add-price"] { font-family: var(--f-mono); letter-spacing: .04em; }

.pd-desc { margin-top: 30px; display: grid; gap: 8px; text-align: right; font-family: var(--f-he); }
.pd-desc p { font-size: var(--fs-he-base); line-height: 1.7; color: var(--clay); }
.pd-desc .pd-note { font-size: var(--fs-he-sm); color: var(--stone); margin-top: 4px; }

.pd-more-info { margin-top: 26px; border-top: 1px solid var(--silver-line); }
.pd-more-info button {
  width: 100%; display: flex; justify-content: space-between; padding: 15px 0;
  border-bottom: 1px solid var(--silver-line); text-align: left;
  font-family: var(--f-he); font-size: var(--pd-btn); letter-spacing: .18em; text-transform: uppercase;
}
.pd-more-info button:hover { color: var(--oxblood); }

/* inspiration spread */
.pd-insp {
  direction: ltr;
  margin: clamp(64px, 8vw, 120px) calc(var(--gutter) * -1) 0;
  padding: clamp(40px, 6vw, 88px) var(--gutter);
  background: var(--travertine);
  display: grid; justify-items: center;
}
/* a single plate, centred, with its caption underneath */
.pd-insp__img { margin: 0; width: min(100%, 440px); }
.pd-insp__img img { width: 100%; height: auto; mix-blend-mode: multiply; }
.pd-insp__img figcaption {
  margin-top: 16px; text-align: center;
  font-size: var(--pd-label); letter-spacing: .16em; text-transform: uppercase; color: var(--clay);
}

/* more from the archive: same size as the Best Sellers title */
.pd-related { margin-top: clamp(64px, 8vw, 112px); }
.pd-related__title {
  text-align: center; margin-bottom: clamp(28px, 3.6vw, 48px);
  font-family: var(--f-en-serif); font-weight: 400; text-transform: uppercase; letter-spacing: .03em;
  font-size: var(--pd-display); line-height: 1;
}

@media (max-width: 860px) {
  .pd-crumb { padding: 16px 0 18px; }
  .pd-layout { grid-template-columns: 1fr; gap: 28px; }
  /* plates become a swipeable strip */
  .pd-gallery {
    display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter);
  }
  .pd-gallery::-webkit-scrollbar { display: none; }
  .pd-shot, .pd-shot--solo { flex: 0 0 82%; width: auto; scroll-snap-align: start; }
  .pd-shot :is(img, video) { aspect-ratio: 4 / 5; object-fit: cover; max-height: none; }
  .pd-gallery:has(> :only-child) .pd-shot { flex-basis: 100%; }
  .pd-card { position: static; }
  .pd { --pd-value: 15px; }
  .pd-insp__img { width: 72%; }
}

/* ---------- Tablet ---------- */

@media (max-width: 1080px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}

/* Below this width the five categories no longer fit beside the logo: switch to the menu panel */
@media (max-width: 1023px) {
  .main-nav, .hide-nav { display: none; }
  .menu-toggle { display: inline-flex; }
}

/* ---------- Mobile ---------- */

@media (max-width: 860px) {
  :root { --header-h: 60px; }
  body { font-size: 16px; }

  .hide-sm { display: none; }
  .site-header.is-scrolled .site-header__inner { height: 54px; }
  .brand img { width: 96px; }
  .site-header.is-scrolled .brand img { width: 86px; }

  .demo-note { font-size: 11px; padding: 6px 40px; }
  .demo-note .mono { display: none; }

  /* Phones: photography first. The photo runs full-bleed at (close to) its natural 4:5 ratio;
     its lower edge — plain white linen — dissolves into the cream page, and the headline sits
     across that seam, half on the photo, half on the page. Faces (upper half) and the rings
     (middle band) are never covered. The design sheet is desktop-only. */
  .hero {
    grid-template-columns: auto 1fr;          /* RTL: first column is the right one */
    grid-template-areas: "media media";
    height: auto; min-height: 0; max-height: none;
  }
  .hero__content { display: contents; }
  .hero__media {
    /* natural ratio (125vw) on most phones; trimmed only on short screens so the
       headline and link still arrive within the first view */
    height: clamp(360px, min(125vw, calc(100svh - 270px)), 640px);
  }
  /* when a short screen forces a crop, trim mostly from the top (background) so the
     linen at the bottom stays under the headline and the rings stay clear */
  .hero__media img { object-position: 50% 55%; }
  /* Type on the photo: a small white headline bottom-left, the link bottom-right, both
     sitting on one line near the lower edge. A soft dark shade along the bottom only,
     for legibility over the white linen. */
  .hero__media::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(to top, rgba(20, 19, 18, .62) 0%, rgba(20, 19, 18, .4) 14%, rgba(20, 19, 18, .12) 28%, rgba(20, 19, 18, 0) 40%);
  }
  .hero__head {
    grid-area: media; position: relative; z-index: 2;
    align-self: end; justify-self: end;        /* bottom-left in RTL */
    margin: 0 0 25px var(--gutter);          /* physical left gutter; a little air above the edge */
    padding: 0;
    display: block;
  }
  .hero__head .eyebrow { display: none; }
  .hero__title {
    font-size: clamp(19px, 5.4vw, 22px); line-height: 1.06; letter-spacing: 0;
    text-align: left; color: #fff;
    text-shadow: 0 1px 12px rgba(20, 19, 18, .25);
  }
  .hero__sketch { display: none; }
  .hero__cta {
    grid-area: media; position: relative; z-index: 2;
    align-self: end; justify-self: start;      /* bottom-right in RTL */
    margin: 0 var(--gutter) 17px 0;          /* physical right gutter */
    padding-bottom: 4px;
    color: #fff;
    text-shadow: 0 1px 8px rgba(20, 19, 18, .35);
  }
  .hero__cta:hover { color: #fff; opacity: .8; }
  /* shorter, lighter underline, starting under the first letter (the label reads left to right) */
  .hero__cta.link-arrow {
    background-image: linear-gradient(rgba(255, 255, 255, .5), rgba(255, 255, 255, .5));
    background-size: 64% 1px; background-position: 0 100%;
  }
  .hero__cta.link-arrow, .hero__cta.link-arrow:hover { background: none; } /* no underline; padding kept so the text doesn't move */
  .hero__cta-he { display: none; }
  .hero__cta-en {
    display: inline-flex; align-items: baseline; gap: 7px;
    font-family: var(--f-he-sans); /* small tracked caps, like the site's English labels */
    font-size: 8.75px; font-weight: 400; letter-spacing: .16em; text-transform: uppercase;
    white-space: nowrap;
  }
  .hero__cta-en .hero__cta-arrow { font-size: 10px; letter-spacing: 0; }
  .pieces { padding-bottom: 36px; }
  .studio { padding-top: 40px; }
  .categories { padding-top: 36px; }

  .section-title { font-size: clamp(28px, 7.6vw, 34px); }

  /* 2 x 2, the left column stepped down a little for rhythm */
  .cat-grid { grid-template-columns: 1fr 1fr; gap: 28px 12px; align-items: start; }
  .cat__en { font-size: 16px; }

  .piece-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 12px; }
  /* Carousel on phones: ~1.4 cards in view, running edge to edge so the next card visibly
     continues off-screen. The page itself never scrolls sideways. */
  .carousel { --gap: 12px; margin-inline: calc(var(--gutter) * -1); }
  .carousel__track {
    grid-template-columns: none;
    grid-auto-columns: 68%;
    padding-inline: var(--gutter);
    scroll-padding-inline: var(--gutter);
  }
  .carousel__controls { display: none; } /* swipe is the natural control on touch screens */
  .piece__info { padding-top: 12px; row-gap: 4px; }
  .piece__info .mono { font-size: 10px; }
  /* Narrow cards: price moves under the name instead of squeezing it */
  .piece__row { flex-direction: column; gap: 2px; }
  .piece__name { font-size: 17px; }
  .piece__name--en { font-size: 11.5px; letter-spacing: .14em; }
  .piece__price { font-size: 14px; }
  .piece__plus { width: 28px; height: 28px; top: 8px; right: 8px; }
  .piece__meta { font-size: 12.5px; margin-top: 4px; }
  .demo-tag { display: none; }


  /* Studio on phones: one sketchbook page — handwritten headline, the Chiara design sheet
     tucked just under it, the short text, then the signature. The photos are desktop-only. */
  /* Order on phones: THE STUDIO label, the Chiara design sheet, the (smaller) handwritten
     headline, the paragraph, then a small signature. Same elements as desktop, reordered. */
  .studio { display: block; }
  .studio__visual { display: none; }
  .studio__text { display: flex; flex-direction: column; align-items: stretch; }
  .studio__text > .eyebrow { order: 0; margin-bottom: 14px; }
  .studio__sheet { display: block; order: 1; margin: 0 0 22px; }
  .studio__sheet img { width: 100%; height: auto; }
  /* handwriting centred on the content column; the paragraph is a slightly narrower centred block */
  .studio__title { order: 2; margin: 0 0 18px; align-self: center; }
  .studio__title img { width: min(50vw, 185px); margin-inline: auto; }
  .studio__body { order: 3; width: min(100%, 325px); max-width: none; margin-inline: auto; gap: 12px; }
  .studio__body p { font-size: 15.5px; line-height: 1.7; }
  .studio__sign { order: 4; width: 112px; margin: 24px auto 0; align-self: center; }

  /* Footer brand on phones: logo alone, centred on the screen; the studio line is said elsewhere */
  .footer-brand { display: flex; justify-content: center; }
  .footer-brand img { margin: 0 auto; width: 180px; }
  .footer-brand p { display: none; }

  .care { grid-template-columns: 1fr 1fr; margin-inline: calc(var(--gutter) * -1); }
  .care li + li { border-inline-start: 0; }
  .care li:nth-child(even) { border-inline-start: 1px solid rgba(242, 238, 231, .14); }
  .care li:nth-child(n+3) { border-top: 1px solid rgba(242, 238, 231, .14); }
  .care__item, .care li:first-child .care__item { padding: 20px var(--gutter); }
  .care__title { font-size: 17px; }

  .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px 24px; }
  .footer-col:last-child { grid-column: 1 / -1; }
  .footer-bottom { flex-direction: column; }

  .drawer { padding: 0 var(--gutter) 28px; }
}

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .js .reveal, .js .reveal-mask img { opacity: 1; transform: none; clip-path: none; }
  .circled path { stroke-dashoffset: 0; }
  .mobile-menu { transform: none; }
}