/* ==========================================================================
   קו | תכנון ועיצוב פנים — Projects list + project detail
   Loaded after home.css, which provides the font, tokens, header and footer.
   ========================================================================== */

:root {
  --page-edge: clamp(22px, 5.55vw, 80px);   /* 80px at 1440, ~22px on phones */
  --col-gap: clamp(20px, 2.7vw, 40px);
}

/* The header uses exactly the homepage's size (--header-h in home.css), so it
   does not change height or logo size when moving between pages. */

/* Reserve the scrollbar's width on every page so the layout never shifts
   sideways when one page scrolls and another does not. */
html { scrollbar-gutter: stable; }

/* Content is rendered by script; keep the footer from jumping up and down. */
.page main { min-height: 70vh; padding-bottom: clamp(48px, 7vw, 96px); }

/* ---------- Scroll reveal ---------- */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 520ms var(--ease) var(--reveal-delay, 0ms),
              transform 520ms var(--ease) var(--reveal-delay, 0ms);
}
.js [data-reveal].is-revealed,
.js.reveal-failsafe [data-reveal] {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* ---------- Shared bits ---------- */
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  font-size: clamp(1rem, 0.9rem + 0.3vw, 1.1875rem);
  color: var(--c-ink);
  text-underline-offset: 6px;
  text-decoration-thickness: 1px;
}
.text-link:hover span { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
.text-link__arrow { flex: none; transition: transform 200ms var(--ease); }

/* ==========================================================================
   All projects — one grid holds the introduction and every project.
   DOM order: introduction, then projects in content order. On desktop the
   projects alternate between the columns (1st left, 2nd right, ...) and the
   introduction sits at the top of the right column.

   Each column flows independently without splitting the list into two DOM
   columns: the grid uses 1px implicit rows (grid-auto-rows) and projects.js
   sets every item's row span to its own rendered height (--span). With
   grid-auto-flow: dense, each item then lands directly under the previous
   item of its column, so the right column starts lower by exactly the height
   of the introduction. Everything stays in normal flow: no absolute
   positioning and no transforms (transforms are only used by the reveal).
   ========================================================================== */
.layout {
  --entry-gap: clamp(40px, 4vw, 56px);           /* caption → next photograph */
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));   /* RTL: column 1 is on the right */
  column-gap: var(--col-gap);
  align-items: start;
  padding: clamp(24px, 3.3vw, 48px) var(--page-edge) 0;
}
.project-list {
  display: contents;               /* <li> become items of .layout; role="list" keeps the semantics */
  list-style: none;
  margin: 0;
  padding: 0;
}

.intro {
  grid-column: 1;
  padding-bottom: var(--entry-gap);
}
.intro__title {
  font-size: clamp(2.375rem, 1.4rem + 3.2vw, 3.875rem);
  line-height: 1.1;
}
.intro__lead {
  margin-top: clamp(12px, 1.6vw, 20px);
  max-width: 24em;
  font-size: clamp(1.125rem, 0.95rem + 0.6vw, 1.5rem);
  line-height: 1.5;
  color: var(--c-ink-soft);
}

.proj { padding-bottom: var(--entry-gap); min-width: 0; }
.gallery { padding-inline: var(--page-edge); }

/* Staggered desktop composition (class added by projects.js once spans are measured) */
.layout.is-staggered {
  grid-auto-flow: dense;
  grid-auto-rows: 1px;
}
.is-staggered .intro { grid-row: 1 / span var(--span, 1); }
.is-staggered .proj { grid-row: auto / span var(--span, 1); }
.is-staggered .proj:nth-child(odd) { grid-column: 2; }     /* left  */
.is-staggered .proj:nth-child(even) { grid-column: 1; }    /* right, under the introduction */

/* One column when two columns get cramped */
@media (max-width: 720px) {
  .layout { grid-template-columns: minmax(0, 1fr); --entry-gap: 36px; padding-top: 28px; }
  .intro { grid-column: 1; }
  .intro__title { font-size: clamp(2.25rem, 1.6rem + 3vw, 2.75rem); }
}

.proj__link {
  display: block;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
}
.proj__link:focus-visible { outline-offset: 8px; }

.proj__link--button {
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  text-align: start;
  cursor: zoom-in;
}

.proj__media {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--c-panel-sand);
}
.proj__media picture,
.proj__media img { display: block; width: 100%; height: 100%; }
.proj__media img {
  max-width: none;
  object-fit: cover;
  transition: transform 700ms var(--ease);
}
.proj__link:hover .proj__media img { transform: scale(1.015); }
/* a frame in the logo's sage green around each project's main image (same line as on the project page) */
/* Each project is a framed card, like the top of its page: main image, title and description inside one logo-colour panel. */
.proj__frame { padding: clamp(14px, 2vw, 28px); background: var(--frame-bg, transparent); }
.proj__frame--sand { --frame-bg: var(--c-panel-sand); }
.proj__frame--blue { --frame-bg: var(--c-panel-blue); }
.proj__frame--sage { --frame-bg: var(--c-panel-sage); }
.proj__frame--none { padding: 0; }

.proj__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: clamp(14px, 1.6vw, 22px);
}
.proj__title {
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);   /* 24px phones → 32px desktop */
  line-height: 1.2;
  font-weight: 300;
  text-wrap: balance;
}
.proj__arrow {
  flex: none;
  color: var(--c-ink-soft);
  transition: transform 220ms var(--ease), color 220ms var(--ease);
}
.proj__link:hover .proj__arrow,
.proj__link:focus-visible .proj__arrow { transform: translateX(-5px); color: var(--c-ink); }

.proj__desc {
  display: block;
  margin-top: 8px;
  font-size: clamp(1rem, 0.9rem + 0.4vw, 1.25rem);  /* 16px phones → 20px desktop */
  line-height: 1.5;
  color: var(--c-ink-soft);
  max-width: 38em;
}

.proj__desc--rich.rt { --rt-lh: 1.5; --rt-gap: 0.6em; }   /* the card's short description: paragraphs and line breaks from the admin */
.more { display: flex; justify-content: center; margin-top: clamp(40px, 5vw, 64px); }
.more[hidden], .empty[hidden] { display: none; }
.more__btn {
  min-height: 48px;
  padding: 8px 32px;
  border: 1px solid var(--c-line);
  background: none;
  font-size: 1.125rem;
  cursor: pointer;
}
.more__btn:hover { border-color: var(--c-ink); }
.empty { text-align: center; color: var(--c-ink-soft); padding: 48px 0; }

/* ==========================================================================
   Project detail
   ========================================================================== */
.detail {
  max-width: calc(1280px + 2 * var(--page-edge));
  margin-inline: auto;
  padding: clamp(20px, 3vw, 40px) var(--page-edge) 0;
}
.detail__back { margin-bottom: clamp(8px, 1.5vw, 20px); }
.detail__back:hover .text-link__arrow { transform: translateX(4px); }

.detail__title {
  font-size: clamp(2.25rem, 1.2rem + 3.8vw, 4rem);
  line-height: 1.1;
  text-wrap: balance;
  max-width: 20em;
}
.detail__meta {
  margin-top: 12px;
  font-size: clamp(1rem, 0.9rem + 0.3vw, 1.1875rem);
  color: var(--c-ink-soft);
}

.detail__cover {
  margin: clamp(24px, 3.4vw, 48px) 0 0;
  aspect-ratio: 1280 / 755;
  background: var(--c-panel-sand);
  overflow: hidden;
}
@media (max-width: 640px) { .detail__cover { aspect-ratio: 4 / 3; } }

.zoom {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  -webkit-tap-highlight-color: transparent;
}
.zoom picture, .zoom img { display: block; width: 100%; height: 100%; }
.zoom img { max-width: none; object-fit: cover; }
.zoom:focus-visible { outline-offset: 4px; }
.zoom--static { cursor: default; }                /* the main image is not a button */

.detail__lead {
  margin-top: clamp(28px, 4vw, 56px);
  max-width: 34em;
  font-size: clamp(1.0625rem, 0.95rem + 0.45vw, 1.3125rem);   /* a little smaller than before, still comfortable */
  line-height: 1.6;
  color: var(--c-ink);
  text-align: right;
}
/* Paragraph text from the admin: separate paragraphs, intentional line breaks, spacing presets.
   The admin editor (admin.css .ptext + admin.js RT_LH / RT_GAP) uses the same numbers. */
.rt { --rt-lh: 1.6; --rt-gap: 1em; }
.rt[data-lh="tight"] { --rt-lh: 1.4; }
.rt[data-lh="relaxed"] { --rt-lh: 1.85; }
.rt[data-gap="small"] { --rt-gap: 0.5em; }
.rt[data-gap="large"] { --rt-gap: 1.6em; }
.rt p { margin: 0 0 var(--rt-gap); line-height: var(--rt-lh); text-align: right; overflow-wrap: anywhere; }
.rt p:last-child { margin-bottom: 0; }

.detail__gallery { margin-top: clamp(48px, 7vw, 104px); }
.detail__heading {
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  padding-bottom: 14px;
  margin-bottom: clamp(20px, 2.6vw, 36px);
  border-bottom: 1px solid var(--c-rule);
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
}
/* Masonry (project.js): 1px rows, every item placed in the shortest column; the 12px gap is part of each item's span */
.gallery-grid.is-masonry {
  grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr));
  column-gap: 12px;
  row-gap: 0;
  grid-auto-rows: 1px;
}
.g-item { margin: 0; min-width: 0; }
/* Gallery photos keep their own proportions: never stretched, never cropped. */
.g-item .zoom { height: auto; background: var(--c-panel-sand); }
.g-item .zoom img { height: auto; object-fit: contain; }
.g-item video { display: block; width: 100%; height: auto; background: #1c1f24; }
.g-item__caption {
  margin-top: 10px;
  font-size: 1rem;
  color: var(--c-ink-soft);
}

/* Previous / next: two identical outlined buttons at opposite ends of the container */
.pn {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);   /* RTL: first column on the right */
  align-items: center;
  margin-top: clamp(48px, 6vw, 88px);
  padding: 32px 0 48px;                        /* 32px divider -> buttons, 48px below */
  border-top: 1px solid var(--c-rule);
}
.pn__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  box-sizing: border-box;
  min-width: 180px;                            /* 180 x 52 at normal text size ...  */
  max-width: 100%;
  min-height: 52px;                            /* ... and the box grows with the text instead of clipping it */
  padding: 10px 20px;                          /* inner padding: text never touches the border */
  border: 1px solid #d4cec2;                   /* thin, subtle gray-beige */
  border-radius: 0;
  background: transparent;
  color: var(--c-ink);
  font-size: 1.125rem;
  line-height: 1.3;
  text-align: center;
  overflow-wrap: anywhere;                     /* long words wrap inside the box */
  transition: background-color 180ms var(--ease);
}
/* Back to the top / all projects: a centred row under the gallery, above previous / next */
.pn-tools {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 16px;
  margin-top: clamp(48px, 6vw, 88px);
  padding-top: 32px;
  border-top: 1px solid var(--c-rule);
}
.pn-tools .pn__btn { cursor: pointer; font: inherit; font-size: 1.125rem; }
.pn-tools + .pn { margin-top: 0; padding-top: 24px; border-top: 0; }
@media (max-width: 560px) {
  .pn-tools .pn__btn { width: auto; min-width: min(148px, 100%); flex: 1 1 148px; max-width: 220px; }
  .pn-tools { padding-top: 28px; }
}
.pn__btn--prev { grid-column: 1; justify-self: start; }   /* right edge */
.pn__btn--next { grid-column: 2; justify-self: end; }     /* left edge */
.pn__btn .text-link__arrow { flex: none; color: inherit; transition: none; }
.pn__btn:hover { background: rgba(40, 45, 53, 0.05); }
.pn__btn:focus-visible { outline: 2px solid var(--c-ink); outline-offset: 3px; }   /* outline: no size or position change */
@media (max-width: 560px) {
  .pn { padding: 28px 0 40px; }
  .pn { column-gap: 12px; }
  .pn__btn { min-width: 0; width: min(148px, 100%); min-height: 48px; padding: 8px 12px; gap: 12px; font-size: 1.0625rem; }
}
@media (max-width: 340px) {
  .pn__btn { width: min(132px, 100%); gap: 10px; }
}
/* the page ends with the buttons: 48px below them, then the footer rule */
.page--project main { padding-bottom: 0; }
.page--project .site-foot { margin-top: 0; }

/* Not found / message */
.detail--message { padding-block: clamp(56px, 10vw, 140px); }
.detail--message .detail__lead { margin-block: 20px 24px; }

/* ==========================================================================
   Enlarged viewer
   ========================================================================== */
html.viewer-open { overflow: hidden; scrollbar-gutter: auto; }   /* no reserved strip beside the full-screen photo */

/* The photograph fills the whole screen (never cropped); every control floats
   above it and stays invisible until the pointer moves or the screen is tapped. */
.viewer {
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  background: #000;
  color: #fff;
}
.viewer::backdrop { background: #000; }

.viewer__figure { position: absolute; inset: 0; margin: 0; }
.viewer__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
}

.viewer__bar {
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: linear-gradient(rgba(10, 12, 15, 0.55), rgba(10, 12, 15, 0));
}
.viewer__count {
  font-size: 1rem;
  direction: ltr;
  unicode-bidi: isolate;            /* keeps "2 / 4" in reading order */
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
}
.viewer__btn {
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(10, 12, 15, 0.45);
  color: #fff;
  cursor: pointer;
}
.viewer__btn:hover { background: rgba(10, 12, 15, 0.75); }
.viewer__btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.viewer__btn[hidden] { display: none; }
.viewer__nav {
  position: absolute;
  z-index: 2;
  top: 50%;
  transform: translateY(-50%);
}
.viewer__nav--prev { inset-inline-start: 16px; }
.viewer__nav--next { inset-inline-end: 16px; }

.viewer__caption {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: 2;
  padding: 36px 20px 18px;
  text-align: center;
  font-size: 1rem;
  background: linear-gradient(rgba(10, 12, 15, 0), rgba(10, 12, 15, 0.6));
}
.viewer__caption[hidden] { display: none; }

/* Hidden until pointer move / click / tap / keyboard focus */
.viewer__bar,
.viewer__nav,
.viewer__caption { transition: opacity 200ms var(--ease); }
.viewer:not(.show-controls):not(:has(:focus-visible)) .viewer__bar,
.viewer:not(.show-controls):not(:has(:focus-visible)) .viewer__nav,
.viewer:not(.show-controls):not(:has(:focus-visible)) .viewer__caption {
  opacity: 0;
  pointer-events: none;
}

/* Play badge on video thumbnails (renderings list) */
.proj__play {
  position: absolute;
  inset-block-end: 14px;
  inset-inline-start: 14px;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(30, 34, 40, 0.62);
  color: #fff;
  pointer-events: none;
}

/* Video inside the full-screen viewer */
.viewer__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
  background: #000;
}
.viewer__video[hidden] { display: none; }

/* ==========================================================================
   Testimonials page + hidden submission page
   ========================================================================== */

/* ==========================================================================
   Testimonial submission page (/t/<token>): one calm column, with a decorative layer around it
   ========================================================================== */
.submit-page { position: relative; min-height: 100vh; overflow-x: clip; padding-bottom: clamp(24px, 4vw, 48px); }
.submit-page > .submit-header, .submit-page > .submit { position: relative; z-index: 1; }

/* decoration: never part of the layout, never clickable */
.submit-frame, .submit-deco { display: none; pointer-events: none; }
@media (min-width: 1024px) {
  .submit-frame { display: block; position: absolute; inset: clamp(20px, 2.2vw, 32px); border: 1px solid #cdcac0; z-index: 0; }
}
@media (min-width: 1280px) {
  .submit-deco { display: block; position: absolute; z-index: 0; left: clamp(20px, 2.2vw, 32px); top: clamp(20px, 2.2vw, 32px); bottom: clamp(20px, 2.2vw, 32px); width: 280px; overflow: hidden; }
  .submit-deco > * { position: absolute; display: block; }
  .submit-deco__wash { left: 0; top: 0; bottom: 0; width: 156px; background: linear-gradient(180deg, rgba(228, 220, 204, 0.42), rgba(228, 220, 204, 0.16) 70%, rgba(228, 220, 204, 0)); }
  .submit-deco__slab { left: 100px; top: 0; bottom: 230px; width: 56px; }   /* no tint of its own: every stripe has the same colour (the wash), the lines draw the stripes */
  .submit-deco__line { background: rgba(90, 84, 70, 0.42); }
  .submit-deco__line--v1 { left: 42px; top: 0; bottom: 215px; width: 1px; }
  .submit-deco__line--v2 { left: 100px; top: 0; bottom: 215px; width: 1px; background: rgba(90, 84, 70, 0.26); }
  .submit-deco__line--h1 { left: 0; right: 0; bottom: 215px; height: 1px; }
  .submit-deco__line--h2 { left: 0; width: 64%; bottom: 190px; height: 1px; background: rgba(90, 84, 70, 0.2); }
  .submit-deco__plant { left: -52px; bottom: 215px; width: 230px; height: auto; opacity: 0.92; }
}

/* tablets and phones: a small plant in a band of its own under the form */
.submit-foot { position: relative; height: 250px; margin-top: 28px; overflow: hidden; pointer-events: none; }
.submit-foot__plant { position: absolute; left: 10px; bottom: 14px; width: 112px; height: auto; opacity: 0.92; }   /* the whole vase, standing on the line */
.submit-foot__line { position: absolute; background: rgba(90, 84, 70, 0.34); }
.submit-foot__line--v { left: 66px; top: 24px; bottom: 14px; width: 1px; opacity: 0.7; }
.submit-foot__line--h { left: 0; width: 170px; bottom: 14px; height: 1px; }
@media (min-width: 1280px) { .submit-foot { display: none; } }

.submit-header { display: flex; justify-content: center; padding: clamp(28px, 4vw, 48px) 16px 0; }
.submit-header img { width: clamp(160px, 17vw, 220px); height: auto; max-width: 100%; }
@media (min-width: 1024px) { .submit-header img { width: clamp(200px, 15vw, 230px); } }   /* the existing logo, not altered */
.submit { max-width: 680px; margin-inline: auto; padding: clamp(20px, 3vw, 32px) clamp(16px, 5vw, 32px) 0; }
.submit__title { font-size: clamp(1.875rem, 1.2rem + 2.4vw, 2.75rem); line-height: 1.15; font-weight: 300; margin: 0; text-align: center; }
.submit__lead { margin: 14px 0 6px; font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem); color: var(--c-ink); line-height: 1.7; }
.submit__note { margin: 0 0 clamp(24px, 3vw, 36px); font-size: clamp(0.9375rem, 0.9rem + 0.15vw, 1rem); color: var(--c-ink-soft); line-height: 1.6; }
.submit__form { max-width: none; }
.submit__form .error:empty { display: none; margin: 0; }
@media (min-width: 768px) { .submit__lead, .submit__note { text-align: center; } }
.submit__form .field { margin-bottom: clamp(20px, 2.4vw, 28px); }
.submit__form .field > label { font-size: clamp(1rem, 0.97rem + 0.15vw, 1.125rem); }
.submit__form .input, .submit__form .textarea { font-size: 1rem; min-height: 46px; border-color: #c9c6bd; }
.submit__form .textarea { min-height: 200px; line-height: 1.7; resize: vertical; }
.submit__form .field__hint { font-size: 0.9375rem; }
.submit__form .check { align-items: flex-start; gap: 12px; font-size: 1rem; line-height: 1.6; }
.submit__form .check input { flex: none; margin-top: 2px; }
.submit__form .form__actions .btn { min-width: 220px; min-height: 48px; font-size: 1.0625rem; }
.req { color: #6f7f63; margin-inline-start: 2px; }
.submit__trap { position: absolute; inset-inline-start: -10000px; width: 1px; height: 1px; overflow: hidden; }
.submit__title[hidden], .submit__lead[hidden], .submit__note[hidden] { display: none; }
.submit__privacy { margin: 28px 0 0; font-size: 1rem; }
.submit__privacy a { color: var(--c-ink-soft); text-decoration: underline; text-underline-offset: 4px; }

/* the writing guidance: a pale sage panel with a stronger sage header */
.guide { margin-bottom: clamp(20px, 2.4vw, 28px); background: rgba(184, 194, 173, 0.2); color: var(--c-ink); }
.guide__toggle {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; min-height: 48px; padding: 10px clamp(16px, 2vw, 22px);
  border: 0; border-radius: 0; background: rgba(184, 194, 173, 0.5); color: var(--c-ink);
  font: inherit; font-size: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem); line-height: 1.5; text-align: right; cursor: pointer;
}
.guide__toggle:hover { background: rgba(184, 194, 173, 0.62); }
.guide__toggle:focus-visible { outline: 2px solid var(--c-ink); outline-offset: 2px; }
.guide__toggle-text { flex: 1 1 auto; min-width: 0; text-align: right; }
.guide__chevron { flex: none; transition: transform 200ms var(--ease); }
.guide__toggle[aria-expanded="true"] .guide__chevron { transform: rotate(180deg); }
.guide__note { margin: 0; padding: 12px clamp(16px, 2vw, 22px) 14px; font-size: 0.9375rem; line-height: 1.6; color: #3f444c; }
.guide__panel { position: relative; padding: 0 clamp(16px, 2vw, 22px) clamp(60px, 7vw, 68px); }   /* room at the bottom for the ornament */
.guide__panel[hidden] { display: none; }
.guide__content { border-inline-start: 2px solid var(--c-sage); padding-inline-start: clamp(12px, 1.6vw, 18px); }
.guide__intro { margin: 0 0 14px; font-size: 1rem; line-height: 1.8; overflow-wrap: anywhere; }
.guide__list { margin: 0; padding-inline-start: 2.1em; }   /* the numbers hang on the right; wrapped lines align with the text */
.guide__list li { margin: 0 0 14px; font-size: 1rem; line-height: 1.8; overflow-wrap: anywhere; }
.guide__list li:last-child { margin-bottom: 0; }
.guide__ornament { position: absolute; left: 10px; bottom: 8px; width: 90px; height: 60px; color: #7d8c6f; opacity: 0.55; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .guide__chevron { transition: none; } }

@media (max-width: 767px) {
  .submit__form .form__actions .btn { width: 100%; }
  .submit__form .textarea { min-height: 180px; }
}
.submit__done { padding: 24px 0; }
.submit__done h2 { font-size: 2rem; margin-bottom: 12px; }
.submit__done p { font-size: 1.25rem; color: var(--c-ink-soft); }

/* "before" / "after" label next to a rendering's title */
.proj__tag {
  flex: none;
  padding: 2px 12px;
  border: 1px solid #d4cec2;
  font-size: 0.9375rem;
  color: var(--c-ink-soft);
  line-height: 1.4;
}

/* A before / after rendering spans both columns so its two pictures sit side by side at a good size */
.is-staggered .proj.proj--wide:nth-child(n) { grid-column: 1 / -1; }
.proj--wide .proj__meta { display: block; margin-top: clamp(14px, 1.6vw, 22px); }

/* Boxed text never overflows its box: long words wrap, boxes grow vertically */
.more__btn, .proj__tag, .quote, .statement__contact, .cmp__head { overflow-wrap: anywhere; }
.more__btn { min-height: 48px; height: auto; }

/* ==========================================================================
   Project page: framed main image + description, and the video / gallery steps
   The frame uses one of the logo colours (sand, blue-grey, sage); corners are square.
   ========================================================================== */
.detail__frame { margin-top: clamp(24px, 3.4vw, 48px); padding: clamp(14px, 2vw, 28px); border-radius: 0; background: var(--frame-bg, transparent); }
.detail__frame--sand { --frame-bg: var(--c-panel-sand); }
.detail__frame--blue { --frame-bg: var(--c-panel-blue); }
.detail__frame--sage { --frame-bg: var(--c-panel-sage); }
.detail__frame--none { padding: 0; }
.detail__frame .detail__cover { margin: 0; }
.detail__frame:not(.detail__frame--none) .detail__cover { border: 2px solid var(--c-sage); }   /* a frame line around the picture itself */
.detail__frame .detail__lead { margin-top: clamp(16px, 2.2vw, 28px); max-width: none; overflow-wrap: anywhere; }   /* the whole width of the frame */
.detail__frame .zoom[disabled] { cursor: default; }
.detail__frame-actions { margin-top: clamp(16px, 2vw, 24px); display: flex; }

/* "continue" buttons: same outlined, square style as the previous / next buttons */
.detail__next {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  box-sizing: border-box;
  min-height: 52px;
  padding: 10px 24px;
  border: 1px solid #b9b2a4;
  border-radius: 0;
  background: transparent;
  color: var(--c-ink);
  font: inherit;
  font-size: 1.125rem;
  line-height: 1.3;
  cursor: pointer;
  transition: background-color 180ms var(--ease);
}
.detail__next:hover { background: rgba(40, 45, 53, 0.07); }
.detail__next:focus-visible { outline: 2px solid var(--c-ink); outline-offset: 3px; }
.detail__next .text-link__arrow { flex: none; transition: none; }

.detail__video { margin-top: clamp(32px, 4.4vw, 64px); }
.detail__video[hidden], .detail__more[hidden] { display: none; }
.detail__player { display: block; width: 100%; height: auto; max-height: 80vh; background: #14171b; }
.detail__more { margin-top: 0; }

/* Testimonials: each one in a square box (90-degree corners) in a logo colour */

/* "חזרה לגלריה" in the full-screen viewer */
.viewer__return {
  min-height: 44px;
  padding: 6px 18px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 0;
  background: rgba(10, 12, 15, 0.55);
  color: #fff;
  font: inherit;
  font-size: 1.0625rem;
  cursor: pointer;
}
.viewer__return:hover { background: rgba(10, 12, 15, 0.85); border-color: #fff; }
.viewer__return:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.viewer__return[hidden] { display: none; }
.viewer:not(.show-controls):not(:has(:focus-visible)) .viewer__return { opacity: 0; pointer-events: none; }
.viewer__return { transition: opacity 200ms var(--ease); }

.detail__frame--sage { --frame-bg: var(--c-panel-sage); }

/* ==========================================================================
   Project intro: full-screen video shown before the project page
   ========================================================================== */
html.pintro-open { overflow: hidden; scrollbar-gutter: auto; }

.pintro {
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100vh;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  background: #000;
  color: #fff;
  opacity: 1;
  transition: opacity 350ms var(--ease);
  overscroll-behavior: none;
  touch-action: none;                 /* touches never scroll or zoom the page behind the intro */
}
.pintro::backdrop { background: #000; }
.pintro--leaving { opacity: 0; pointer-events: none; }
html.a11y-nomotion .pintro { transition: none; }
@media (prefers-reduced-motion: reduce) { .pintro { transition: none; } }

/* the whole video is always visible: never stretched, never cropped */
.pintro__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
  background: #000;
  cursor: pointer;
}

.pintro__bar {
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: max(12px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 12px max(16px, env(safe-area-inset-left));
  background: linear-gradient(rgba(10, 12, 15, 0.55), rgba(10, 12, 15, 0));
  pointer-events: none;
}
.pintro__bar > * { pointer-events: auto; }

/* same look as "חזרה לגלריה" in the photo viewer */
.pintro__skip {
  min-height: 44px;
  padding: 6px 18px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 0;
  background: rgba(10, 12, 15, 0.55);
  color: #fff;
  font: inherit;
  font-size: 1.0625rem;
  cursor: pointer;
}
.pintro__skip:hover { background: rgba(10, 12, 15, 0.85); border-color: #fff; }

.pintro__sound,
.pintro__play {
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(10, 12, 15, 0.45);
  color: #fff;
  cursor: pointer;
}
.pintro__sound { width: 48px; height: 48px; }
.pintro__sound:hover,
.pintro__play:hover { background: rgba(10, 12, 15, 0.75); }
.pintro__play {
  position: absolute;
  z-index: 2;
  inset: 0;
  margin: auto;                      /* centred in both writing directions */
  width: 88px;
  height: 88px;
  border: 1px solid rgba(255, 255, 255, 0.7);
}
.pintro__play svg { width: 40px; height: 40px; fill: currentColor; }
.pintro__play[hidden] { display: none; }
.pintro__skip:focus-visible,
.pintro__sound:focus-visible,
.pintro__play:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ==========================================================================
   About page: short introduction + a calm, readable story in three sections
   ========================================================================== */
.about-lead {
  font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.625rem);
  line-height: 1.5;
  margin-bottom: clamp(12px, 1.6vw, 20px);
}
.about-intro {
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  line-height: 1.6;
  color: var(--c-ink-soft);
}

.about-story {
  --read-font: "Noto Sans Hebrew", "Segoe UI", "Arial Hebrew", Arial, sans-serif;
  max-width: 760px;
  margin-inline: auto;
  padding: clamp(8px, 2vw, 24px) clamp(20px, 5vw, 32px) clamp(48px, 7vw, 96px);
  text-align: right;
}
.about-story p {
  font-family: var(--read-font);
  font-size: clamp(1.0625rem, 1rem + 0.2vw, 1.1875rem);   /* 17px phones, 19px desktop */
  line-height: 1.6;
  color: var(--c-ink-soft);
  text-align: right;
  overflow-wrap: break-word;
  margin: 0 0 1em;
}
.about-story__section { margin-top: clamp(36px, 5vw, 60px); }
.about-story__section:first-child { margin-top: 0; }
.about-story__heading {
  font-family: var(--font);
  font-weight: 300;
  font-size: clamp(1.625rem, 1.3rem + 1.3vw, 2.125rem);
  line-height: 1.25;
  color: var(--c-ink);
  margin: 0 0 clamp(14px, 2vw, 22px);
  padding-bottom: 12px;
  background: linear-gradient(var(--c-sage), var(--c-sage)) bottom right / 56px 2px no-repeat;   /* short sage rule, like the page title */
}
.about-story .about-story__belief {
  font-family: var(--font);
  font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem);
  line-height: 1.45;
  color: var(--c-ink);
}
.about-story__closing {
  margin-top: clamp(40px, 6vw, 72px);
  padding-top: clamp(28px, 4vw, 44px);
  border-top: 1px solid var(--c-rule);
  text-align: center;
}
.about-story__closing .about-story__belief { text-align: center; margin-bottom: clamp(18px, 2.4vw, 28px); }

/* same outlined, square button language as "לצפייה בגלריה" */
.about-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 52px;
  padding: 10px 28px;
  border: 1px solid #b9b2a4;
  border-radius: 0;
  background: var(--c-panel-sage);
  color: var(--c-ink);
  font: inherit;
  font-size: 1.125rem;
  line-height: 1.3;
  text-align: center;
  transition: background-color 180ms var(--ease);
}
.about-cta:hover { background: #aab59e; }
.about-cta:focus-visible { outline: 2px solid var(--c-ink); outline-offset: 3px; }

/* ==========================================================================
   Privacy policy page (uses the .statement layout from a11y.css)
   ========================================================================== */
.statement h3 { font-size: clamp(1.1875rem, 1.05rem + 0.5vw, 1.375rem); margin: 24px 0 8px; font-weight: 700; }
.policy__draft { margin: 0 0 28px; padding: 16px 20px; border: 1.5px solid var(--c-sage); background: rgba(152, 168, 140, 0.14); line-height: 1.6; }
.policy__todo { background: #f6e7a8; color: var(--c-ink); padding: 0 4px; }   /* information only the owner can give */
.pn-tools--list { margin-top: clamp(32px, 4vw, 56px); padding-top: 0; border-top: 0; }   /* the all-projects page: no divider line above the button */

/* ==========================================================================
   Testimonials page: framed panels, alternating with a photo of the project
   Colours / frame come from the logo palette (home.css tokens).
   Proportions: on a desktop row the photo and the panel are two equal columns, wide and shallow (about 2.4 : 1
   when the text is short). The photo never decides the height: it fills a wrapper whose floor is that ratio.
   ========================================================================== */
.t-page {
  max-width: 1400px;
  margin-inline: auto;
  padding: clamp(24px, 3vw, 40px) clamp(16px, 4vw, 48px) clamp(48px, 7vw, 96px);
}
.t-intro { margin-bottom: clamp(24px, 2.4vw, 32px); text-align: right; }
.t-intro__title { font-size: clamp(1.875rem, 1.25rem + 2.6vw, 3rem); line-height: 1.15; font-weight: 300; margin: 0; }
.t-intro__lead { margin: 10px 0 0; font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem); line-height: 1.6; color: var(--c-ink-soft); }

.t-list { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(24px, 2.4vw, 32px); }   /* between the rows */
.t-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: stretch; min-width: 0; }

/* The photo wrapper. Its own height comes from the ::before spacer (a ratio of its width), and the picture is
   positioned absolutely inside it, so the picture's real size (a portrait upload, say) has no say in the row height. */
.t-media { position: relative; overflow: hidden; background: var(--c-panel-sand); min-width: 0; align-self: stretch; }
.t-media::before { content: ""; display: block; padding-top: 56.25%; }          /* 16 : 9 when stacked */
.t-media picture { position: absolute; inset: 0; display: block; }
.t-media img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }

/* the frame (logo colour) around a light panel */
.t-card {
  --t-frame: var(--c-panel-sand);
  margin: 0;
  min-width: 0;
  border: clamp(2px, 0.4vw, 5px) solid var(--t-frame);
  background: #fdfcf8;
  color: var(--c-ink);
}
.t-card--sand { --t-frame: var(--c-panel-sand); }
.t-card--blue { --t-frame: var(--c-panel-blue); }
.t-card--sage { --t-frame: var(--c-panel-sage); }
.t-card--plain { --t-frame: var(--c-rule); }
.t-card__inner { padding: clamp(18px, 4.5vw, 24px); }
.t-card__inner::before {                   /* short decorative line, upper right */
  content: "";
  display: block;
  width: 48px;
  height: 3px;
  background: var(--c-sage);
  margin-bottom: 8px;
}
.t-card__mark { display: block; width: 24px; color: var(--c-sage); margin-bottom: 8px; }
.t-card__mark svg { display: block; }

.t-card__text { margin: 0; }
.t-card__text p {
  margin: 0 0 0.9em;
  font-size: clamp(1rem, 0.9rem + 0.3vw, 1.125rem);   /* 16px phones, 17px tablets, 18px desktop */
  line-height: 1.7;
  text-align: right;
  overflow-wrap: anywhere;
}
.t-card__text p:last-child { margin-bottom: 0; }
.t-card__by { margin-top: 14px; font-size: clamp(0.875rem, 0.85rem + 0.15vw, 1rem); line-height: 1.5; overflow-wrap: anywhere; }
.t-card__name { font-weight: 700; color: var(--c-ink); }
.t-card__detail { color: var(--c-ink-soft); }
.t-card__link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;                         /* comfortable tap target */
  margin-top: 4px;
  font-size: clamp(0.875rem, 0.85rem + 0.15vw, 1rem);
  color: var(--c-ink);
  text-decoration: underline;
  text-decoration-color: var(--c-sage);
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}
.t-card__link .text-link__arrow { flex: none; color: var(--c-sage); transition: transform 200ms var(--ease); }
.t-card__link:hover .text-link__arrow { transform: translateX(-4px); }
.t-card__link:focus-visible { outline: 2px solid var(--c-ink); outline-offset: 4px; }

/* text only: the panel spans the row; the words keep a comfortable reading width on the right. No ratio: the height is the content. */
.t-row--text .t-card__inner > * { max-width: 70ch; }
.t-row--text .t-card__link { max-width: none; }

.t-more { margin-top: clamp(32px, 4vw, 56px); }

@media (min-width: 768px) and (max-width: 1023px) {
  .t-card__inner { padding: clamp(24px, 3vw, 32px); }
}
@media (max-width: 767px) {
  .t-row { gap: 14px; }
  .t-list { gap: 28px; }                    /* a larger gap between groups than between a photo and its text */
}

/* desktop: two equal columns, photo and panel share the row's top and bottom edges */
@media (min-width: 1024px) {
  .t-card__inner { padding: clamp(24px, 2.2vw, 32px); }
  .t-row--img { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 1.7vw, 24px); }
  .t-row--img .t-media::before { padding-top: 41.667%; }                 /* 2.4 : 1 floor */
  .t-row--img .t-media { max-height: 520px; }                            /* a very long testimonial: the photo stays a sensible landscape, aligned to the top */
  .t-row--img .t-card { grid-column: 1; grid-row: 1; display: flex; }    /* RTL: the first column is on the right */
  .t-row--img .t-media { grid-column: 2; grid-row: 1; }
  .t-row--flip .t-card { grid-column: 2; }
  .t-row--flip .t-media { grid-column: 1; }
  /* beside a photo a short text sits in the middle of the panel; a long one just makes the row taller */
  .t-row--img .t-card__inner { flex: 1; display: flex; flex-direction: column; justify-content: center; }
  .t-row--img .t-card__link { align-self: flex-start; }
}
@media (prefers-reduced-motion: reduce) { .t-card__link .text-link__arrow { transition: none; } }

/* ---------- projects list: placeholders while the projects arrive ---------- */
.proj--skeleton { display: none; }
.js .proj--skeleton { display: block; pointer-events: none; }
.proj--skeleton .proj__media { background: var(--c-panel-sand); animation: kav-skeleton 1.4s ease-in-out infinite; }
.proj__skel-line { display: block; height: 18px; margin-top: 16px; width: 62%; background: var(--c-rule); animation: kav-skeleton 1.4s ease-in-out infinite; }
.proj__skel-line--short { width: 38%; margin-top: 10px; }
@keyframes kav-skeleton { 50% { opacity: 0.55; } }
@media (prefers-reduced-motion: reduce) { .proj--skeleton .proj__media, .proj__skel-line { animation: none; } }