/* ==========================================================================
   Sivan — fine art portfolio. Shared stylesheet.
   Used by index / lessons / contact (+ future /en mirror).

   Typography is bilingual-ready by design: the base tokens below are the
   Latin (LTR) type system. html[lang="he"] swaps in the Hebrew-appropriate
   faces. An /en page simply omits lang="he" and inherits the Latin set
   automatically — no separate stylesheet needed.

   Caching: the host tells browsers to keep CSS/JS for 7 days, so the pages
   link them with a version tag (style.css?v=YYYYMMDD, same for js/*.js).
   After changing any CSS or JS file, bump that tag in all three pages.
   ========================================================================== */

:root {
  --ink: #241f18;
  --cream: #f4ecdb;
  --ivory: #faf6ec;
  /* the accent: a deep brown. Text on it is --ivory (5.7:1); black would
     only reach 3.4:1. It is also dark enough to use directly for text or
     small marks on --ivory (5.7:1) and --cream (5.2:1). */
  --bronze: #7a5c45;
  --oxblood: #7c2a2f;
  /* headings and nav links on light grounds (10.9:1 on --ivory); body text
     stays --ink */
  --burgundy: #5c1f24;
  --brass: #a9803f;
  --brass-soft: #c9a668;
  --line: rgba(169, 128, 63, 0.35);

  --f-display: 'Fraunces', serif;
  --f-body: 'Newsreader', serif;
  --f-label: 'Inter', sans-serif;

  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 4rem;
  --space-xl: 6rem;

  --max-width: 1200px;
  --transition: 240ms ease;
}

html[lang="he"] {
  --f-display: 'Bellefair', 'David Libre', serif;
  --f-body: 'Heebo', sans-serif;
  --f-label: 'Heebo', sans-serif;
}

/* ---------- reset ---------- */
* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--ivory);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
/* the hidden attribute must win over any component's own display value */
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }

h1, h2, h3, h4 {
  font-family: var(--f-display);
  font-weight: 500;
  line-height: 1.25;
  margin: 0 0 var(--space-sm);
  color: var(--burgundy);
}

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

.container {
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: 5vw;
}

.label {
  font-family: var(--f-label);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
}
html[lang="he"] .label { letter-spacing: 0.04em; }

/* ---------- NAV ---------- */
.site-nav {
  position: fixed;
  top: 0; inset-inline: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 5vw;
  gap: 24px;
  transition: background .5s ease, padding .4s ease, box-shadow .4s ease;
}

.site-nav.scrolled {
  background: rgba(250, 246, 236, 0.94);
  backdrop-filter: blur(10px);
  padding: 13px 5vw;
  box-shadow: 0 1px 0 var(--line);
}

.site-nav .brand {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: 0.03em;
  color: var(--ivory);
  transition: color .4s ease;
  white-space: nowrap;
}
.site-nav.scrolled .brand { color: var(--ink); }

/* menu links sit on the reading-start side (right, in Hebrew) and the
   wordmark on the other — .nav-right comes first in the markup.
   index.html carries no nav wordmark (the brand is the hero title), so its
   links simply stay at the start. */
.site-nav.no-brand { justify-content: flex-start; }

.nav-right {
  display: flex;
  align-items: center;
  gap: 30px;
}

.nav-links {
  display: flex;
  gap: 10px;
  /* pull the first link's padding back so its text lines up with the gutter */
  margin-inline-start: -14px;
}

/* hover: the link changes color, grows slightly, and a soft translucent
   rectangle fades in behind it */
.nav-links a {
  display: inline-block;
  padding: 6px 14px;
  color: var(--ivory);
  opacity: 0.9;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition:
    color .35s ease,
    background-color .35s ease,
    border-color .35s ease,
    opacity .35s ease,
    transform .35s cubic-bezier(.22,.68,.35,1);
}
.nav-links a:hover,
.nav-links a:focus-visible {
  opacity: 1;
  color: var(--brass-soft);
  background: rgba(250, 246, 236, 0.14);
  transform: scale(1.06);
}
.nav-links a[aria-current="page"] {
  opacity: 1;
  border-bottom-color: var(--brass-soft);
}

/* light nav — once scrolled, and from the start on the lessons page, where it
   sits on the bright video hero (ivory would disappear there): burgundy links
   on a faint burgundy rectangle; the transparent background stays until scrolled */
.site-nav.nav-on-light .brand { color: var(--ink); }
.site-nav.scrolled .nav-links a,
.site-nav.nav-on-light .nav-links a { color: var(--burgundy); opacity: 1; }
.site-nav.scrolled .nav-links a:hover,
.site-nav.scrolled .nav-links a:focus-visible,
.site-nav.nav-on-light .nav-links a:hover,
.site-nav.nav-on-light .nav-links a:focus-visible {
  color: var(--oxblood);
  background: rgba(92, 31, 36, 0.07);
}
.site-nav.scrolled .nav-links a[aria-current="page"],
.site-nav.nav-on-light .nav-links a[aria-current="page"] { border-bottom-color: var(--burgundy); }
.site-nav.nav-on-light .nav-toggle { border-color: var(--line); }
.site-nav.nav-on-light .nav-toggle-icon,
.site-nav.nav-on-light .nav-toggle-icon::before,
.site-nav.nav-on-light .nav-toggle-icon::after { background: var(--ink); }
.site-nav.nav-on-light .nav-toggle[aria-expanded="true"] .nav-toggle-icon { background: transparent; }

/* mobile hamburger (< 720px) */
.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  background: none;
  border: 1px solid rgba(250, 246, 236, 0.45);
  border-radius: 2px;
  cursor: pointer;
  padding: 0;
  transition: border-color var(--transition);
}
.site-nav.scrolled .nav-toggle { border-color: var(--line); }

.nav-toggle-icon,
.nav-toggle-icon::before,
.nav-toggle-icon::after {
  display: block;
  width: 18px; height: 1.5px;
  background: var(--ivory);
  transition: transform var(--transition), opacity var(--transition), background var(--transition);
}
.site-nav.scrolled .nav-toggle-icon,
.site-nav.scrolled .nav-toggle-icon::before,
.site-nav.scrolled .nav-toggle-icon::after { background: var(--ink); }

.nav-toggle-icon { position: relative; }
.nav-toggle-icon::before,
.nav-toggle-icon::after { content: ""; position: absolute; inset-inline-start: 0; }
.nav-toggle-icon::before { top: -5px; }
.nav-toggle-icon::after { top: 5px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-icon { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle-icon::before { transform: translateY(5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-icon::after { transform: translateY(-5px) rotate(-45deg); }

.nav-links-mobile {
  position: fixed;
  inset-inline: 0;
  top: 0;
  background: var(--ivory);
  padding: 90px 5vw var(--space-lg);
  z-index: 99;
  /* closed: slid fully above the viewport and hidden (so its links can't be
     tabbed to). Collapsing it with max-height alone left the 90px padding
     showing as a band across the top of every page. */
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform var(--transition), visibility 0s linear 240ms;
}
.nav-links-mobile.is-open {
  transform: none;
  visibility: visible;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  transition: transform var(--transition), visibility 0s;
}
.nav-links-mobile a {
  display: block;
  padding: 14px 0;
  font-family: var(--f-display);
  font-size: 1.3rem;
  color: var(--burgundy);
  border-bottom: 1px solid var(--line);
}
.nav-links-mobile a[aria-current="page"] { color: var(--oxblood); }

@media (min-width: 720px) {
  .nav-toggle, .nav-links-mobile { display: none; }
}
@media (max-width: 719px) {
  .nav-links { display: none; }
}

/* ---------- HERO (index) ---------- */
.hero {
  position: relative;
  height: 100vh;
  min-height: 560px;
  overflow: hidden;
  background: var(--bronze);
}
.hero-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 58% 38%;
  filter: saturate(0.94) brightness(0.86);
  transform: scale(1.03);
}
/* neutral ink-toned scrim (not a hue-accent — its job is pure text
   legibility over the photo, so it stays dark and neutral rather than
   tinting the image mint) */
.hero::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(36,31,24,0.55) 0%, rgba(36,31,24,0.18) 30%, rgba(36,31,24,0.15) 55%, rgba(36,31,24,0.82) 100%),
    linear-gradient(90deg, rgba(36,31,24,0.5) 0%, rgba(36,31,24,0.05) 40%);
}
.hero-content {
  position: relative; z-index: 2;
  height: 100%;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 0 5vw 110px; /* clears the centered scroll-down arrow below */
  color: var(--ivory);
}
.hero h1 {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(48px, 9vw, 108px);
  line-height: 0.98;
  margin: 0 0 20px;
  letter-spacing: 0.02em;
  color: var(--ivory);
}
/* the wordmark is a Latin name — render it in the Latin display face
   regardless of the page's Hebrew type override on --f-display */
.hero h1.brand-latin,
.site-nav .brand-latin { font-family: 'Fraunces', serif; }
.sig-letter {
  display: inline-block;
  opacity: 0;
  transform: translateY(16px) rotate(-5deg);
  animation: signIn .6s cubic-bezier(.22,.75,.25,1) forwards;
}
@keyframes signIn { to { opacity: 1; transform: translateY(0) rotate(0); } }
.sig-underline {
  display: block;
  width: min(220px, 38vw);
  height: 16px;
  margin-top: 6px;
  overflow: visible;
}
.sig-underline path {
  fill: none;
  stroke: var(--brass-soft);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* contact page banner — a sibling of the index hero: same image treatment
   (.hero-img filter), same scrim, same ivory display type and bottom-corner
   composition. The frame is sized to the painting's own aspect ratio
   (2000×1452): full width, capped at the screen height (centered on the
   dark ground beyond that), so the image fills it exactly with no crop or
   stretch. On phones the text moves below the painting. */
.hero--contact {
  height: auto;
  min-height: 0;
  background: #2c2620;
}
.hero--contact::after { display: none; } /* the scrim lives on the frame */
.hero-frame {
  position: relative;
  width: min(100%, calc(100vh * 2000 / 1452));
  width: min(100%, calc(100svh * 2000 / 1452));
  aspect-ratio: 2000 / 1452;
  margin-inline: auto;
  overflow: hidden;
}
.hero--contact .hero-img {
  object-fit: contain; /* frame has the image's exact ratio: fills it, no crop */
  object-position: center;
  transform: none;     /* the index hero's 3% zoom would crop the edges */
}
.hero-frame::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(36,31,24,0.55) 0%, rgba(36,31,24,0.18) 30%, rgba(36,31,24,0.15) 55%, rgba(36,31,24,0.82) 100%),
    linear-gradient(270deg, rgba(36,31,24,0.5) 0%, rgba(36,31,24,0.05) 45%);
}
.hero--contact .hero-content {
  position: absolute; inset-inline: 0; bottom: 0;
  height: auto;
  padding: 0 clamp(24px, 5vw, 64px) 110px; /* clears the centered scroll-down arrow below */
}
@media (min-width: 1000px) {
  /* heading + line take exactly the index hero's layout (same padding and
     spacing), so the title lands where "AmirSiv Art" does; the one-line
     intro sits between the line and the arrow, which drops slightly */
  .hero--contact .hero-intro {
    position: absolute;
    inset-inline: clamp(24px, 5vw, 64px);
    bottom: 66px;
    max-width: none;
    line-height: 32px;
    white-space: nowrap;
  }
  .hero--contact .scroll-down { bottom: 12px; }
  /* the index title's 20px gap to its line comes from collapsing margins;
     in this flex column they would add up (20 + 6), so drop the 6 */
  .hero--contact .sig-underline { margin-top: 0; }
}
@media (max-width: 999px) {
  /* too short to overlay the text: it sits below, on the same dark ground */
  .hero-frame::after {
    background: linear-gradient(180deg, rgba(36,31,24,0.55) 0%, rgba(36,31,24,0.1) 35%, rgba(36,31,24,0.1) 70%, rgba(36,31,24,0.45) 100%);
  }
  .hero-frame { aspect-ratio: auto; width: 100%; }
  .hero--contact .hero-img {
    position: static; /* in the flow at its natural height, text follows */
    display: block;
    width: 100%; height: auto;
  }
  .hero--contact .hero-content {
    position: relative;
    padding: 30px 5vw 100px; /* room for the scroll-down arrow below the text */
    background: #2c2620; /* covers the scrim below the painting */
  }
  .hero--contact .sig-underline { margin-bottom: 18px; }
}
/* soft fade + slight rise; delay is set in js/main.js to follow the heading */
.fade-up {
  opacity: 0;
  animation: fadeUp .7s cubic-bezier(.22,.68,.35,1) forwards;
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}
.hero-intro {
  margin: 0;
  max-width: 34em;
  font-size: clamp(1.1rem, 1.9vw, 1.35rem);
  line-height: 1.6;
  color: #efe8d8;
}

/* ---------- GALLERY (framed cards in justified rows) ----------
   Cards keep the cream-mat / hairline-border / hover-lift frame style.
   js/lightbox.js computes, per row, a single image height shared by every
   card in that row (each frame's width then follows from its own image's
   true aspect ratio, so nothing is ever cropped or distorted) and stretches
   the row to fill the container edge to edge — the padding, being a fixed
   size, is folded into that row-fill math so it comes out exact. The
   final, possibly-incomplete row is left at natural size, unstretched. */
.gallery-section { padding: 100px 5vw 56px; background: var(--ivory); }
.gallery-head {
  display: flex; align-items: baseline; justify-content: space-between;
  border-bottom: 1px solid var(--line);
  padding-bottom: 22px; margin-bottom: 52px;
  flex-wrap: wrap; gap: 14px;
}
.gallery-head h2 { font-weight: 500; font-size: clamp(30px, 4vw, 44px); margin: 0; letter-spacing: 0.015em; }
.gallery-head .label { color: var(--brass); }

.gallery { max-width: var(--max-width); margin-inline: auto; }

.g-row {
  display: flex;
  gap: var(--g-gap, 20px);
  margin-bottom: var(--g-gap, 20px);
}
.g-row:last-child { margin-bottom: 0; }

/* figure.g-card carries no overflow:hidden of its own — box-shadow is
   clipped by overflow:hidden set on the very element that draws it, which
   is what silently hid the hover shadow in an earlier pass. Nothing here
   needs clipping (no image zoom), so this is safe. */
figure.g-card {
  background: var(--cream);
  border: 1px solid var(--line);
  padding: var(--card-padding, 24px); /* one value — equal on all four sides */
  margin: 0;
  flex: 0 0 auto; /* sized by its own content (image px size + padding), never stretched */
  cursor: zoom-in;
  transition: transform .5s cubic-bezier(.22,.68,.35,1), box-shadow .5s ease;
}
/* :active is included (alongside :hover/:focus-visible) so the lift still
   fires on tap on touch devices, which never trigger :hover */
figure.g-card:hover,
figure.g-card:focus-visible,
figure.g-card:active {
  transform: translateY(-6px);
  box-shadow: 0 26px 40px -20px rgba(36,31,24,0.35);
  z-index: 2;
}
figure.g-card:focus-visible {
  outline: 2px solid var(--oxblood);
  outline-offset: 4px;
}
/* width/height are set inline in px by JS, one shared height per row,
   each matched to that image's true aspect ratio — never cropped */
figure.g-card img {
  display: block;
  background: var(--ink);
}
figure.g-card .caption {
  margin: 22px 0 0;
  display: flex;
  flex-wrap: wrap; /* on narrow cards the medium drops below the title */
  justify-content: space-between;
  align-items: baseline;
  gap: 4px 12px;
}
figure.g-card .caption .med {
  font-family: var(--f-label);
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--brass);
}

/* ---------- ABOUT ---------- */
/* about: no frame or background — the painting on the right, the text
   (right-aligned) on the left. On wide screens the painting is exactly as
   tall as the text block (set in js/main.js), its width following its own
   aspect ratio; the text box is trimmed to the letters (text-box), so the
   painting's top/bottom meet the top of "נעים מאוד," and the last line's
   baseline. Stacked (painting first) on narrow screens. */
.about { padding: 0 5vw 104px; }
/* thin divider above the section, the same hairline as the gallery head and footer */
.about::before {
  content: "";
  display: block;
  max-width: var(--max-width);
  margin: 0 auto 72px;
  border-top: 1px solid var(--line);
}
.about-inner {
  max-width: 1040px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 36px;
}
@media (min-width: 860px) {
  .about-inner { flex-direction: row; align-items: flex-start; justify-content: center; gap: 64px; }
  .about-text { flex: 0 1 560px; min-width: 0; }
  .about-img { flex: 0 0 auto; }
  .about-img img { width: auto; height: 360px; /* replaced by the text height in js */ }
}
.about-text {
  text-align: start; /* right-aligned in Hebrew */
  text-box: trim-both cap alphabetic;
}
.about-text p {
  margin: 0 0 16px; /* the same gap between every paragraph */
  font-size: 17px;
  line-height: 1.85;
  font-weight: 300;
  letter-spacing: 0.01em;
  color: var(--ink);
  text-wrap: pretty;
}
.about-text p:last-child { margin-bottom: 0; }
.about-text .about-greeting {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 26px;
  line-height: 1.3;
  color: var(--burgundy);
}
.about-img img {
  display: block;
  max-width: none;
  border: 1px solid rgba(36, 31, 24, 0.22); /* a very thin, delicate line */
}
@media (max-width: 859px) {
  .about { padding: 0 5vw 72px; }
  .about::before { margin-bottom: 48px; }
  .about-img { width: min(340px, 100%); }
  .about-img img { width: 100%; height: auto; }
  .about-text { width: 100%; max-width: 560px; }
}
@media (max-width: 560px) {
  .about-text p { font-size: 16px; }
  .about-text .about-greeting { font-size: 24px; }
}

/* ---------- VIDEO HERO (lessons) ----------
   full-screen muted background video, bright and faded: no overlay and no
   filters — the video itself is at 35% opacity over the site's light
   background, with the title in burgundy. (The <video>'s poster — its first
   frame — shows at the same opacity until the video can play.) */
.video-hero {
  position: relative;
  height: 100vh;
  height: 100svh; /* phones: the visible height, excluding browser bars */
  min-height: 420px;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: var(--ivory);
  color: var(--burgundy);
}
.video-hero-media {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.35;
}
/* it's a background: never show the browser's play button over it (iOS shows
   one when autoplay is blocked; js/main.js starts the video on first touch) */
.video-hero-media::-webkit-media-controls,
.video-hero-media::-webkit-media-controls-start-playback-button,
.video-hero-media::-webkit-media-controls-overlay-play-button {
  display: none !important;
  -webkit-appearance: none;
}
.video-hero-media { pointer-events: none; }
.video-hero-content {
  position: relative; z-index: 1;
  padding-inline: 5vw;
  text-align: center;
}
.video-hero-title {
  margin: 0;
  text-align: center;
  color: var(--burgundy);
  margin-inline: auto;
  font-size: clamp(38px, 6.2vw, 84px);
  line-height: 1.08;
  letter-spacing: 0.01em;
}


/* the heading's two lines ("לימודי ציור" / "בסטודיו במושב עשרת"), identical styling */
.video-hero-title span { display: block; text-wrap: balance; }
/* the "להרשמה" button sits low in the hero, 40px above the scroll-down arrow
   (arrow: 26px from the bottom + 52px tall). The title block keeps the room
   the button used to take (its 55px height + 30px gap), so the title stays
   exactly where it was. */
.video-hero-content { padding-bottom: 85px; }
.video-hero-cta {
  position: absolute; z-index: 2;
  bottom: calc(max(26px, env(safe-area-inset-bottom)) + 52px + 40px);
  left: 0; right: 0;
  margin-inline: auto;
  width: max-content;
  font-size: 1.05rem;
  padding: 0.85em 2.6em;
}

/* scroll-down arrow at the bottom of the index and lessons heroes: gentle
   bob; clicking it scrolls smoothly (html scroll-behavior) to its target */
.scroll-down {
  position: absolute; z-index: 2;
  bottom: max(26px, env(safe-area-inset-bottom));
  left: 50%;
  margin-left: -26px;
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px;
  border-radius: 50%;
  color: var(--ivory);
  opacity: 0.85;
  animation: bob 2.4s ease-in-out infinite;
  transition: opacity var(--transition), background-color var(--transition);
}
.scroll-down:hover, .scroll-down:focus-visible { opacity: 1; background: rgba(250, 246, 236, 0.12); }
.scroll-down:focus-visible { outline: 2px solid var(--ivory); outline-offset: 2px; }
@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(8px); }
}
/* on the light lessons hero the arrow is burgundy instead of ivory */
.video-hero .scroll-down { color: var(--burgundy); }
.video-hero .scroll-down:hover,
.video-hero .scroll-down:focus-visible { background: rgba(92, 31, 36, 0.08); }
.video-hero .scroll-down:focus-visible { outline-color: var(--burgundy); }
/* land the schedule below the fixed nav, not under it */
#schedule { scroll-margin-top: 70px; }

/* ---------- generic page sections ---------- */
.section { padding: var(--space-lg) 5vw; border-top: 1px solid var(--line); }
.section:first-of-type { border-top: none; }
.section h2 { font-size: clamp(1.6rem, 3.5vw, 2.1rem); font-weight: 500; letter-spacing: 0.015em; }
.section-inner { max-width: var(--max-width); margin-inline: auto; }

.card {
  background: var(--cream);
  border: 1px solid var(--line);
  padding: var(--space-md);
}

/* schedule & prices (lessons.html): a table on wide screens, one card per
   group on phones — same markup, restyled below 640px */
.schedule {
  width: 100%;
  border-collapse: collapse;
  background: var(--cream);
  border: 1px solid var(--line);
}
.schedule th, .schedule td {
  text-align: start;
  padding: 18px 22px;
  border-bottom: 1px solid var(--line);
  vertical-align: baseline;
}
.schedule tbody tr:last-child > * { border-bottom: none; }
.schedule thead th {
  font-family: var(--f-label);
  font-weight: 500;
  font-size: 0.85rem;
  color: var(--ink);
  opacity: 0.7;
  padding-block: 14px;
}
.schedule .sch-group {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 1.2rem;
  color: var(--burgundy);
}
.schedule .sch-price { font-weight: 500; white-space: nowrap; }
.schedule .per { font-weight: 400; font-size: 0.9em; opacity: 0.7; }
.schedule tbody tr { transition: background-color var(--transition); }
.schedule tbody tr:hover { background: rgba(92, 31, 36, 0.035); }

@media (max-width: 639px) {
  .schedule, .schedule tbody, .schedule tr, .schedule th, .schedule td { display: block; }
  .schedule { background: none; border: none; }
  .schedule thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
  .schedule tbody { display: grid; gap: 14px; }
  .schedule tbody tr {
    background: var(--cream);
    border: 1px solid var(--line);
    padding: 18px 20px;
  }
  .schedule th, .schedule td { padding: 0; border: none; }
  .schedule .sch-group { margin-bottom: 10px; }
  .schedule td {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding-block: 7px;
    border-top: 1px solid var(--line);
  }
  /* the column name, shown inside each card instead of the table header */
  .schedule td::before {
    content: attr(data-label);
    font-family: var(--f-label);
    font-size: 0.85rem;
    opacity: 0.7;
  }
}

/* one-off workshops note under the schedule */
.workshops {
  margin-top: var(--space-md);
  padding: 26px 28px;
  border: 1px solid var(--line);
  text-align: center;
}
.workshops p { margin: 0; font-size: 1.05rem; line-height: 1.8; }
.workshops p + p { margin-top: 10px; }
/* the two icons sit inline right after "מוזמנים לעקוב", side by side */
.follow-icons {
  display: inline-flex;
  gap: 8px;
  vertical-align: middle;
  margin-inline-start: 6px;
  white-space: nowrap;
}
@media (max-width: 639px) {
  .workshops { padding: 22px 18px; }
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.9em 2em;
  background: var(--oxblood);
  color: var(--ivory);
  border: 1px solid var(--oxblood);
  font-family: var(--f-label);
  font-size: 0.95rem;
  letter-spacing: 0.03em;
  transition: background var(--transition), color var(--transition), transform var(--transition);
}
.btn:hover, .btn:focus-visible {
  background: transparent;
  color: var(--oxblood);
  transform: translateY(-1px);
}
/* ghost button: transparent with a thin border and burgundy text/icon; on
   hover it gets the nav links' treatment — slight grow + soft rectangle */
.btn-ghost {
  background: transparent;
  color: var(--burgundy);
  border: 1px solid rgba(92, 31, 36, 0.28);
  transition:
    color .35s ease,
    background-color .35s ease,
    border-color .35s ease,
    transform .35s cubic-bezier(.22,.68,.35,1);
}
.btn-ghost:hover,
.btn-ghost:focus-visible {
  background: rgba(92, 31, 36, 0.07);
  border-color: rgba(92, 31, 36, 0.45);
  color: var(--oxblood);
  transform: scale(1.04);
}
.btn-outline {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--brass);
}
.btn-outline:hover, .btn-outline:focus-visible {
  background: var(--brass);
  color: var(--ivory);
}
.cta-block { text-align: center; padding: var(--space-lg) 5vw; }
.cta-block p { color: var(--ink); opacity: 0.75; max-width: 46ch; margin: 0 auto var(--space-md); }
.cta-block h2 + .btn { margin-top: var(--space-xs); }

/* ---------- contact page ---------- */
/* page layout: form | contact details side by side on wide screens,
   stacked (form first) on narrow ones */
.contact-main { padding: 88px 5vw 110px; }
.contact-layout {
  max-width: var(--max-width);
  margin-inline: auto;
  display: grid;
  gap: 64px;
  align-items: start;
}
@media (min-width: 1000px) {
  .contact-layout { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 80px; }
}
@media (max-width: 560px) {
  .contact-main { padding: 56px 5vw 80px; }
  .contact-layout { gap: 56px; }
}

/* the form column, capped at a comfortable width when stacked */
.contact-wrap { max-width: 640px; margin-inline: auto; width: 100%; }
@media (min-width: 1000px) { .contact-wrap { max-width: none; } }

/* every field is label-over-control at the full column width; the same
   gap separates each field, and the button spans the column too */
.contact-form {
  display: grid;
  gap: 28px;
  padding: 48px;
  text-align: start; /* right-aligned in Hebrew */
}
@media (max-width: 560px) {
  .contact-form { padding: 28px 20px; gap: 22px; }
}
.contact-form .field { display: grid; gap: 10px; }
.contact-form label {
  font-family: var(--f-label);
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--ink);
}
.contact-form .hint { font-weight: 400; opacity: 0.65; }
.contact-form input,
.contact-form textarea {
  display: block;
  width: 100%;
  font: inherit;
  font-size: 1.1rem; /* at least 16px, so phones don't zoom in on focus */
  line-height: 1.5;
  color: var(--ink);
  background: var(--ivory);
  border: 1px solid var(--line);
  border-radius: 0;
  padding: 13px 16px;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.contact-form input { height: 58px; }
.contact-form textarea { resize: vertical; min-height: 210px; }
/* the hidden spam-trap field: keep .sr-only's 1px box — the input width/padding
   above would otherwise stretch it past the page edge */
.contact-form input.sr-only { width: 1px; padding: 0; border: 0; }
.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--oxblood);
  box-shadow: 0 0 0 1px var(--oxblood);
}
/* email addresses are always LTR text, but stay right-aligned on RTL pages */
.contact-form input[type="email"] { direction: ltr; }
html[dir="rtl"] .contact-form input[type="email"] { text-align: right; }
.contact-form .btn {
  width: 100%;
  height: 60px;
  justify-content: center;
  font-size: 1.15rem;
}
.form-status { margin: 0; color: var(--oxblood); font-size: 0.95rem; }
/* backup contact route when sending fails */
.form-status a { text-decoration: underline; text-underline-offset: 3px; font-weight: 500; }
.form-status a:hover, .form-status a:focus-visible { color: var(--burgundy); }
.contact-form .field-error { margin: 0; color: var(--oxblood); font-size: 0.9rem; }
.contact-form input[aria-invalid="true"] { border-color: var(--oxblood); }

.form-thanks { text-align: center; padding-block: var(--space-lg); }
.form-thanks:focus { outline: none; }
.form-thanks h2 { color: var(--burgundy); font-size: clamp(1.8rem, 4vw, 2.4rem); }
.form-thanks p { margin: 0; }

button.btn { cursor: pointer; }
button.btn:disabled { opacity: 0.6; cursor: progress; transform: none; }
.btn-icon {
  width: 1.3em; height: 1.3em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linejoin: round;
  stroke-linecap: round;
}

/* contact page details column (location, WhatsApp, follow) */
.contact-details { display: grid; gap: 52px; }
.contact-details .detail h2 {
  font-size: clamp(1.7rem, 3vw, 2.2rem);
  font-weight: 500;
  letter-spacing: 0.015em;
  margin-bottom: 18px;
}
.contact-details .btn { font-size: 1.1rem; padding: 1em 2.2em; }
.detail-buttons { display: flex; flex-wrap: wrap; gap: 14px; }
@media (max-width: 999px) { .detail-buttons { justify-content: center; } }
@media (max-width: 560px) {
  /* side by side on phones: two equal halves */
  .detail-buttons { gap: 10px; flex-wrap: nowrap; }
  .detail-buttons .btn { flex: 1 1 0; justify-content: center; gap: 0.4em; padding: 0.95em 0.5em; font-size: 1rem; white-space: nowrap; letter-spacing: 0; }
}
.contact-details .social-links { justify-content: flex-start; margin-top: 0; }
@media (max-width: 999px) {
  /* stacked under the form: center everything */
  .contact-details { text-align: center; max-width: 640px; margin-inline: auto; width: 100%; }
  .contact-details .social-links { justify-content: center; }
}

/* icon-only social links in the accent color */
.social-links { display: flex; justify-content: center; gap: 18px; margin-top: var(--space-sm); }
.social-links a,
.icon-link {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--bronze);
  transition: background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition);
}
.social-links a:hover,
.social-links a:focus-visible,
.icon-link:hover,
.icon-link:focus-visible {
  background: var(--bronze);
  border-color: var(--bronze);
  color: var(--ivory);
  transform: translateY(-2px);
}
.social-links a:focus-visible,
.icon-link:focus-visible { outline: 2px solid var(--oxblood); outline-offset: 3px; }
.social-links svg {
  width: 26px; height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.social-links svg .dot { fill: currentColor; stroke: none; }

/* small inline variant (lessons page workshops note); its SVGs carry their
   own size/stroke attributes */
.icon-link--sm { width: 34px; height: 34px; }
.icon-link--sm:hover,
.icon-link--sm:focus-visible { transform: translateY(-1px); }

/* location: pin + address (links to Google Maps), then an embedded map */
.location-address {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
  font-family: var(--f-display);
  font-size: clamp(1.5rem, 2.6vw, 1.9rem);
  color: var(--burgundy);
  border-bottom: 1px solid transparent;
  transition: color var(--transition), border-color var(--transition);
}
.location-address:hover,
.location-address:focus-visible { color: var(--oxblood); border-bottom-color: currentColor; }
.location-address:hover .icon-link,
.location-address:focus-visible .icon-link { background: var(--bronze); border-color: var(--bronze); color: var(--ivory); }
.location-address .icon-link--sm { width: 44px; height: 44px; }
.location-address .icon-link--sm svg { width: 22px; height: 22px; }
.map-frame {
  padding: 8px;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 14px;
}
.map-frame iframe {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  height: auto;
  border: 0;
  border-radius: 8px;
}
@media (max-width: 639px) {
  .map-frame iframe { aspect-ratio: 4 / 3.4; }
}

.contact-section { padding: 90px 5vw 60px; text-align: center; }
.contact-section .label { color: var(--oxblood); margin-bottom: 18px; display: block; }
.contact-section h2 { font-weight: 500; font-size: clamp(30px, 5vw, 50px); }
.contact-section a.mail {
  font-family: var(--f-display);
  font-size: clamp(18px, 2.4vw, 24px);
  border-bottom: 1px solid var(--brass);
  padding-bottom: 4px;
  transition: color .3s ease, border-color .3s ease;
}
.contact-section a.mail:hover { color: var(--oxblood); border-color: var(--oxblood); }

/* ---------- footer ---------- */
.site-footer {
  padding: 40px 5vw 46px;
  display: flex; justify-content: space-between; align-items: center;
  border-top: 1px solid var(--line);
  flex-wrap: wrap; gap: 14px;
  max-width: var(--max-width);
  margin-inline: auto;
}
.site-footer .label { color: #8a7350; }
/* keep the wordmark's own casing inside the uppercase .label */
.site-footer .brand-latin { text-transform: none; }
.site-footer--center { justify-content: center; }

/* ---------- lightbox ---------- */
.lightbox {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(36,31,24,0.94);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden;
  transition: opacity .35s ease;
  padding: 6vh 6vw;
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox-figure { max-width: 100%; max-height: 100%; margin: 0; text-align: center; }
.lightbox-figure img {
  max-width: 100%; max-height: 78vh;
  margin-inline: auto;
  box-shadow: 0 40px 80px rgba(0,0,0,0.5);
  border: 6px solid var(--ivory);
}
.lightbox-figure figcaption {
  color: #cfc6ae;
  margin-top: var(--space-sm);
  font-family: var(--f-display);
  font-size: 0.95rem;
}
/* "Sold" tag, sitting quietly on the painting's bottom corner (inside the
   ivory border): small, translucent burgundy, so the artwork stays first */
.lightbox-media { position: relative; display: inline-block; max-width: 100%; vertical-align: top; }
.lightbox-sold {
  position: absolute;
  bottom: 18px;           /* 6px border + 12px */
  inset-inline-start: 18px;
  padding: 4px 11px 5px;
  border-radius: 2px;
  background: rgba(92, 31, 36, 0.62);
  color: rgba(250, 246, 236, 0.92);
  font-family: 'Fraunces', serif;
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.2;
  pointer-events: none;
}
.lightbox-close, .lightbox-prev, .lightbox-next {
  position: absolute;
  background: none;
  border: 1px solid rgba(255,255,255,0.35);
  color: var(--ivory);
  cursor: pointer;
  font-family: var(--f-label);
  transition: opacity var(--transition), color var(--transition), border-color var(--transition);
}
.lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover,
.lightbox-close:focus-visible, .lightbox-prev:focus-visible, .lightbox-next:focus-visible {
  border-color: var(--brass-soft);
  color: var(--brass-soft);
}
.lightbox-close {
  top: 24px; inset-inline-end: 5vw;
  font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 10px 18px;
}
.lightbox-prev, .lightbox-next {
  top: 50%; transform: translateY(-50%);
  font-size: 22px;
  padding: 12px 16px;
}
.lightbox-prev { inset-inline-start: 3vw; }
.lightbox-next { inset-inline-end: 3vw; }
@media (min-width: 720px) {
  .lightbox-prev { inset-inline-start: 5vw; }
  .lightbox-next { inset-inline-end: 5vw; }
}

@media (max-width: 560px) {
  .gallery-section { padding: 70px 5vw 40px; }
}

@media (prefers-reduced-motion: reduce) {
  *, .sig-letter { animation: none !important; transition: none !important; }
  /* without the (disabled) animation's "forwards" fill, these would stay
     permanently at their pre-animation (invisible/offset) state */
  .sig-letter { opacity: 1 !important; transform: none !important; }
  .fade-up { transform: none !important; } /* its opacity comes from softFade below */
  html { scroll-behavior: auto; }

  /* the text animations become a gentle opacity fade only — no movement, no
     letter-by-letter reveal, no line drawing (with transitions off, the line
     is simply drawn in full and fades in with its heading) */
  [data-signature],
  .sig-underline { animation: softFade 0.9s ease-out both !important; }
  .sig-underline path { stroke-dashoffset: 0 !important; } /* drawn in full, not stretched */
  .fade-up { animation: softFade 0.9s ease-out 0.45s both !important; }
}
@keyframes softFade {
  from { opacity: 0; }
  to { opacity: 1; }
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}