/* ==========================================================================
   ZION — signposts to the sources
   The mark is a masoretic circle: the small ring a scribe set above a word
   to point to a note in the margin. Pages are laid out like a page of a
   sefer: a text column, and a margin column for the notes (ציונים).
   ========================================================================== */

:root{
  /* graphite: the text lives in a range of dark greys, not one black */
  --paper:   #FAFAF8;
  --white:   #FFFFFF;
  --ink:     #1E2125;   /* headings, the wordmark */
  --ink-2:   #3B3F45;   /* running text */
  --ink-3:   #55595F;   /* secondary lines */
  --gloss:   #6A6F76;   /* margin notes, captions */
  --rule:    #E3E1DD;
  --action:  #2A2E33;   /* buttons and links */

  /* the identity colour: copper, with a sheen.
     --sheen is the polished-metal gradient for the mark, rules and buttons. */
  --accent:      #B06A3B;
  --accent-deep: #874A24;
  --accent-soft: #E3AE80;   /* on dark ground */
  --accent-wash: #F6ECE3;   /* tinted panels */
  --accent-line: rgba(176, 106, 59, .6);
  --sheen: linear-gradient(120deg, #A25D30 0%, #B96F3D 38%, #CF8C5C 52%, #B96F3D 66%, #9C5629 100%);   /* the logo's copper */
  --sheen-solid: linear-gradient(120deg, #7A4020 0%, #9A5A31 45%, #B5743F 55%, #7A4020 100%);  /* behind white text */

  --f-display: 'Noto Serif Hebrew', 'Newsreader', Georgia, serif;
  --f-body:    'Assistant', system-ui, sans-serif;
  --f-gloss:   'Noto Rashi Hebrew', 'Noto Serif Hebrew', Georgia, serif;

  --wrap: 1180px;
  --gutter: clamp(16px, 4vw, 48px);
  --margin-col: 260px;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; scroll-padding-top:24px; }
body{
  background:var(--paper);
  color:var(--ink-2);
  font-family:var(--f-body);
  font-size:18px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
[hidden]{ display:none !important; }
a{ color:var(--action); text-decoration:underline; text-decoration-color:var(--accent-line); text-underline-offset:5px; }
a:hover{ color:var(--accent-deep); text-decoration-color:currentColor; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
h1, h2, h3{ font-family:var(--f-display); font-weight:400; line-height:1.2; text-wrap:balance; color:var(--ink); }

.wrap{ max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter); }
.lang-block{ display:none; }
.lang-block.active{ display:block; }

/* ---------- the mark ---------- */
.ring{
  display:inline-block;
  width:.2em; height:.2em;
  border-radius:50%;
  background:var(--sheen);
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - max(1.5px, .036em)), #000 calc(100% - max(1.5px, .036em) + .5px));
          mask:radial-gradient(farthest-side, transparent calc(100% - max(1.5px, .036em)), #000 calc(100% - max(1.5px, .036em) + .5px));
}
.ringed{ position:relative; display:inline-block; }
.ringed > .ring{ position:absolute; top:-.12em; left:50%; transform:translateX(-50%); }
.wordmark{ font-family:var(--f-display); font-weight:500; line-height:1; color:var(--ink); white-space:nowrap; }
.wordmark .ringed > .ring{ top:-.14em; }
/* the logo (files in assets/logo): copper with its sheen on light ground, the -dark files on dark
   ground; the 'mark' files leave out the PRINT | DIGITAL label, which is unreadable below ~200px */
.logo{ display:block; width:auto; }
.wm-en{ display:none; }
html[lang="en"] .wm-en{ display:block; }
html[lang="en"] .wm-he{ display:none; }

/* ---------- masthead ---------- */
.masthead{ background:var(--paper); position:relative; }
.masthead::after{ content:""; position:absolute; inset-inline:0; bottom:0; height:2px; background:var(--sheen); }
.masthead .wrap{ display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:84px; padding-block:12px; }
.brand{ display:flex; align-items:center; gap:16px; color:var(--ink); text-decoration:none; }
.brand:hover{ text-decoration:none; color:var(--ink); }
.brand .logo{ height:56px; }
.brand-tag{ font-size:15px; color:var(--gloss); }
.nav{ display:flex; align-items:center; gap:clamp(16px, 2.4vw, 28px); }
.nav a{ color:var(--ink-2); font-size:16px; text-decoration:none; }
.nav a:hover, .nav a[aria-current="page"]{ color:var(--ink); text-decoration:underline; text-decoration-color:var(--accent); text-decoration-thickness:2px; text-underline-offset:8px; }
.nav a[aria-current="page"]{ font-weight:600; }
.lang-switch{
  font:inherit; font-size:14px; color:var(--gloss);
  background:none; border:0; cursor:pointer; min-height:44px; padding:0 4px;
}
.lang-switch:hover{ color:var(--ink); }

/* ---------- the sefer page: text column + margin ---------- */
.leaf{
  display:grid;
  grid-template-columns:minmax(0, 1fr) var(--margin-col);
  column-gap:clamp(32px, 6vw, 88px);
}
.gloss{
  align-self:start;
  font-family:var(--f-gloss);
  font-size:15px;
  line-height:1.8;
  color:var(--gloss);
  border-inline-start:1px solid var(--accent-line);
  padding-inline-start:20px;
}
.gloss p + p{ margin-top:12px; }
.gloss b{ font-weight:500; color:var(--ink); }
.gloss .ring, .note .ring{ font-size:26px; vertical-align:.1em; margin-inline-end:6px; }
.note{ font-family:var(--f-gloss); font-size:15px; color:var(--gloss); }

/* ---------- sections ---------- */
.sec{ padding-block:clamp(64px, 9vw, 120px); border-top:1px solid var(--rule); }
.sec.on-white{ background:var(--white); }
.h2{ font-size:clamp(30px, 3.2vw, 40px); margin-bottom:28px; }
.h2::after{ content:""; display:block; width:56px; height:2px; margin-top:14px; background:var(--sheen); }

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:44px; padding:0 22px;
  border:1px solid var(--accent-deep); border-radius:2px;
  color:var(--accent-deep); background:none; text-decoration:none;
  font:inherit; font-size:16px; font-weight:600; cursor:pointer;
}
.btn:hover{ background:var(--sheen-solid); border-color:transparent; color:#fff; text-decoration:none; }
.btn-solid{ background:var(--sheen-solid); border-color:transparent; color:#fff; }
.btn-solid:hover{ background:var(--accent-deep); }
.text-link{ display:inline-flex; align-items:center; min-height:44px; font-weight:600; font-size:16px; }
.text-link:hover{ color:var(--accent-deep); }

/* ---------- hero ---------- */
.hero{ padding-block:clamp(72px, 11vw, 150px) clamp(64px, 8vw, 110px); }
.hero h1{
  font-weight:300;
  font-size:clamp(40px, 5.6vw, 76px);
  line-height:1.22;
  letter-spacing:-.01em;
}
.hero h1 .quiet{ color:var(--ink-3); }
.hero h1 .ringed > .ring{ top:-.1em; }
.hero .lead{ margin-top:44px; max-width:34em; font-size:clamp(18px, 1.6vw, 21px); line-height:1.75; }
.hero .gloss{ margin-top:18px; }

/* ---------- work ---------- */
.work{
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
  gap:clamp(28px, 4vw, 56px);
  align-items:center;
  padding-block:40px;
  border-bottom:1px solid var(--rule);
}
.work:last-child{ border-bottom:0; }
.kind{ font-size:15px; color:var(--accent-deep); margin-bottom:6px; }
.work h3{ font-size:clamp(34px, 3.6vw, 48px); line-height:1.15; margin-bottom:14px; }
.work h3:lang(en){ font-family:'Newsreader', var(--f-display); }
.work .desc{ max-width:30em; margin-bottom:22px; }
.work .actions{ display:flex; flex-wrap:wrap; align-items:center; gap:12px 20px; }
.work .note{ margin-top:26px; }
.plate{ padding:36px; background:linear-gradient(135deg, #F8EFE7 0%, #F1E0D0 100%); }
.plate .m-dots{ fill:var(--ink-3); opacity:.3; }
.plate .m-lines{ fill:none; stroke:var(--accent); stroke-width:1.75; }
.plate .m-nodes{ fill:#fff; stroke:var(--accent); stroke-width:2.5; }
.spread{ display:flex; justify-content:center; }
.spread .pg{
  width:46%; aspect-ratio:.72;
  background:#fff; box-shadow:0 1px 0 var(--rule);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px; padding:22px;
}
.spread .pg + .pg{ border-inline-start:1px solid var(--rule); }
.spread i{ display:block; height:4px; background:var(--ink-3); opacity:.35; }
.spread i.t{ height:7px; background:var(--sheen); margin-bottom:10px; }
.spread i.gap{ height:8px; background:none; }
.plate svg{ display:block; width:100%; height:auto; }
.plate-photo{ display:block; line-height:0; overflow:hidden; }
.plate-photo img{ width:100%; height:auto; transition:transform .5s ease; }
.plate-photo:hover img{ transform:scale(1.015); }

/* ---------- shelf (home) ---------- */
.shelf{ list-style:none; border-top:1px solid var(--rule); margin-bottom:28px; }
.shelf li{ display:flex; justify-content:space-between; align-items:baseline; gap:16px; padding-block:16px; border-bottom:1px solid var(--rule); }
.shelf .name{ font-family:var(--f-display); font-size:22px; color:var(--ink); }
.shelf .what{ color:var(--gloss); font-size:16px; text-align:end; }

/* ---------- about / contact ---------- */
.about-lead{ color:var(--ink); font-family:var(--f-display); font-weight:300; font-size:clamp(21px, 2vw, 25px); line-height:1.65; max-width:30em; margin-bottom:20px; }
.about-body{ max-width:34em; color:var(--ink-2); }
.contact{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:20px 32px; }
.contact .h2{ margin-bottom:10px; }
.contact p{ color:var(--ink-2); }
.mail{ font-family:var(--f-display); font-size:clamp(22px, 2.4vw, 30px); color:var(--ink); user-select:all; }
.copy-note{ display:block; min-height:1.5em; margin-top:8px; font-size:14px; color:var(--accent-deep); }

/* ---------- footer ---------- */
.site-foot{ background:var(--ink); color:#C7C9CC; position:relative; }
.site-foot::before{ content:""; position:absolute; inset-inline:0; top:0; height:3px; background:var(--sheen); }
.site-foot .wrap{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:16px; padding-block:36px; font-size:15px; }
.site-foot .logo{ height:72px; }
.site-foot .foot-home{ display:block; line-height:0; }
/* the Zion family: the three sites, the same row on each of them */
.family{ display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 22px; }
.family-h{ flex-basis:100%; font-size:13px; letter-spacing:.04em; color:#9EA2A8; }
.family a{ color:#E3E1DD; font-size:16px; text-decoration:none; border-bottom:1px solid rgba(227,174,128,.45); padding-bottom:1px; }
.family a:hover{ color:#fff; border-bottom-color:var(--accent-soft); }

/* ==========================================================================
   STORE
   ========================================================================== */
.page-head{ padding-block:clamp(56px, 8vw, 96px) 24px; }
.page-head h1{ font-weight:300; font-size:clamp(40px, 5vw, 64px); line-height:1.15; margin-bottom:14px; }
.page-head p{ max-width:34em; color:var(--ink-2); }

.group{ padding-block:40px 24px; }
.group-head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px 24px; flex-wrap:wrap; padding-bottom:12px; border-bottom:2px solid transparent; border-image:var(--sheen) 1; }
.group-head h2{ font-size:32px; }
.group-head a{ font-size:15px; }
.group .note{ margin-top:8px; }

/* one item = one row: picture · text and choices · order */
.item{
  display:grid;
  grid-template-columns:200px minmax(0, 1fr) 190px;
  gap:clamp(20px, 3vw, 40px);
  align-items:start;
  padding-block:32px;
  border-bottom:1px solid var(--rule);
}
.item:last-of-type{ border-bottom:0; }
.pic{
  aspect-ratio:4/5; max-width:100%;
  background:linear-gradient(135deg, #F8EFE7 0%, #F1E0D0 100%);
  display:grid; place-items:center; overflow:hidden;
}
.pic svg{ width:34%; height:34%; stroke:var(--accent); fill:none; stroke-width:1; }
.pic img{ width:100%; height:100%; object-fit:cover; }
/* a product with a gallery: the first picture, a strip of thumbnails, and the viewer */
.pics{ display:flex; flex-direction:column; gap:6px; }
.pic-btn{ position:relative; width:100%; padding:0; border:0; cursor:zoom-in; font:inherit; }
.pic-btn img{ transition:transform .4s ease; }
.pic-btn:hover img{ transform:scale(1.03); }
.pic-n{ position:absolute; inset-block-end:8px; inset-inline-start:8px; padding:2px 8px; font-size:13px; color:#fff; background:rgba(30,33,37,.62); border-radius:2px; }
.pic-strip{ display:grid; grid-template-columns:repeat(4, 1fr); gap:6px; }
.pic-th{ position:relative; aspect-ratio:1; padding:0; border:0; cursor:pointer; overflow:hidden; background:var(--accent-wash); }
.pic-th img{ width:100%; height:100%; object-fit:cover; display:block; }
.pic-th span{ position:absolute; inset:0; display:grid; place-items:center; color:#fff; font-size:15px; font-weight:600; background:rgba(30,33,37,.5); }
.pic-th:hover, .pic-th:focus-visible{ outline:2px solid var(--accent); outline-offset:1px; }
.gal{ margin:auto; width:min(1100px, 94vw); max-height:94vh; padding:0; border:0; background:var(--ink); color:#E3E1DD; overflow:hidden; }
.gal::backdrop{ background:rgba(20,22,25,.82); }
.gal[open]{ display:flex; flex-direction:column; }
.gal-stage{ position:relative; display:grid; place-items:center; background:#14161A; min-height:0; flex:1; }
.gal-stage img{ display:block; max-width:100%; max-height:calc(94vh - 150px); object-fit:contain; }
.gal-nav{ position:absolute; top:50%; transform:translateY(-50%); width:48px; height:48px; border:0; border-radius:50%;
  background:rgba(250,250,248,.9); color:var(--ink); font-size:22px; cursor:pointer; }
.gal-nav:hover{ background:#fff; }
.gal-prev{ inset-inline-start:12px; }
.gal-next{ inset-inline-end:12px; }
.gal-cap{ display:flex; justify-content:space-between; gap:16px; margin:0; padding:12px 16px 4px; font-size:15px; }
.gal-meta{ color:#9EA2A8; white-space:nowrap; }
.gal-thumbs{ display:flex; gap:6px; padding:8px 16px 16px; overflow-x:auto; }
.gal-thumbs button{ flex:0 0 64px; height:64px; padding:0; border:0; cursor:pointer; opacity:.55; background:none; }
.gal-thumbs button[aria-current="true"]{ opacity:1; outline:2px solid var(--accent-soft); outline-offset:1px; }
.gal-thumbs img{ width:100%; height:100%; object-fit:cover; display:block; }
.gal-x{ position:absolute; top:10px; inset-inline-end:10px; width:44px; height:44px; border:0; border-radius:50%; background:rgba(250,250,248,.9); color:var(--ink); font-size:18px; cursor:pointer; }
.item h3{ font-size:28px; margin:2px 0 10px; }
.item .desc{ max-width:32em; margin-bottom:16px; }
.opt-label{ font-size:14px; color:var(--gloss); margin-bottom:8px; }
.chips{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
.chip{
  font:inherit; font-size:15px; min-height:40px; padding:0 14px;
  background:#fff; color:var(--ink); border:1px solid var(--rule); border-radius:2px; cursor:pointer;
}
.chip:hover{ border-color:var(--accent); }
.chip[aria-pressed="true"]{ border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent); color:var(--ink); font-weight:600; }
.order-col{ display:flex; flex-direction:column; gap:10px; }
/* volumes still in editing: a quiet grid under the orderable items */
.soon{ padding-top:32px; border-top:1px solid var(--rule); }
.soon-head h3{ font-size:24px; margin-bottom:6px; }
.soon-head p{ color:var(--gloss); font-size:15px; max-width:36em; }
.soon-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(128px, 1fr)); gap:28px 18px; margin-top:24px; }
.soon-card{ display:flex; flex-direction:column; gap:6px; padding:0; border:0; background:none; font:inherit; color:inherit; text-align:start; cursor:zoom-in; }
.soon-card .pic{ width:100%; }
.soon-card img{ transition:transform .4s ease; }
.soon-card:hover img{ transform:scale(1.03); }
.soon-card:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
.soon-t{ font-family:var(--f-display); font-size:18px; color:var(--ink); }
.soon-b{ font-size:13px; color:var(--accent-deep); }
.price{ font-family:var(--f-display); font-size:22px; min-height:1px; }

/* order form */
.order{ margin-top:40px; padding-block:clamp(56px, 8vw, 96px); background:var(--white); border-top:1px solid var(--rule); }
.order h2{ font-size:32px; margin-bottom:8px; }
.order-lead{ color:var(--ink-2); margin-bottom:32px; max-width:40em; }
.order-form{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:18px 24px; max-width:760px; }
.order-form .field{ display:flex; flex-direction:column; gap:6px; font-size:15px; color:var(--ink-2); }
.order-form .field-wide{ grid-column:1 / -1; }
.order-form input, .order-form select, .order-form textarea{
  font:inherit; font-size:16px; color:var(--ink); background:#fff;
  border:1px solid #C9D0DC; border-radius:2px; padding:11px 12px;
}
.order-form input:focus, .order-form select:focus, .order-form textarea:focus{ outline:none; border-color:var(--accent); }
.order-form .hp{ position:absolute; inset-inline-start:-9999px; }
.order-actions{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.order-msg{ font-size:15px; color:var(--gloss); }
.order-msg.is-ok{ color:var(--accent-deep); }
.order-msg.is-err{ color:#A3262A; }
.handoff{ max-width:760px; margin-top:32px; padding:24px; display:flex; flex-direction:column; gap:12px; background:var(--paper); border:1px solid var(--rule); }
.handoff-addr{ font-family:var(--f-display); font-size:22px; color:var(--ink); user-select:all; }
.handoff pre{ margin:0; padding:16px; white-space:pre-wrap; overflow-wrap:anywhere; font-family:var(--f-body); font-size:15px; color:var(--ink-2); background:#fff; border:1px solid var(--rule); user-select:all; }

/* ==========================================================================
   RESPONSIVE + MOTION
   ========================================================================== */
@media (max-width: 860px){
  .leaf{ grid-template-columns:1fr; }
  .gloss{ margin-top:28px; border-inline-start:0; border-top:1px solid var(--rule); padding:16px 0 0; }
  .hero .gloss{ margin-top:36px; }
  .work{ grid-template-columns:1fr; }
  .brand-tag, .nav .hide-sm{ display:none; }
  .item{ grid-template-columns:110px minmax(0, 1fr); }
  .pic-strip{ display:none; }
  .pic-n{ font-size:11px; inset-block-end:4px; inset-inline-start:4px; padding:1px 5px; }
  .gal-nav{ width:40px; height:40px; font-size:18px; }
  .order-col{ grid-column:1 / -1; flex-direction:row; align-items:center; justify-content:space-between; }
  .order-form{ grid-template-columns:1fr; }
  .soon-grid{ grid-template-columns:repeat(auto-fill, minmax(96px, 1fr)); gap:18px 10px; }
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
}