/* CONTACT · V7 "SREBRO"
   /kontakt/, three things: her opening, the list of every address, the form.

   Everything here is written against the V7 tokens only (--ink/--slate/--stone,
   --lume/--lume-2/--lume-3, --hair/--hair-2, --ag/--ag-dim, --serif/--sans).
   None of the V5 bridge names (--pearl, --accent, --navy, --ivory) is used, and
   there is not one gradient on the page: the only thing that separates a
   chapter from the next is a ground, a hairline or a void. No photograph.

   REVEAL, the rule draws.
     A ruled row never fades in as a block: its own hairline scales in from the
     left and the row rises under it. The observed [data-rv] element always
     keeps its area, so no reveal can deadlock its own observer.

   WHAT WENT, 03.09.2026, and why nothing here dresses it any more:
     - the ruled cell row (.swb) under the opening, with its two figures, the
       flagship line and the group mailbox. It stood between her copy and the
       list she asked to have „odmah ispod toga", and the list says all four.
     - the second lines (.tw), the roll call (.rl), pending (.pd), the office
       (.of), press and applications (.lts/.lt/.mail) and the pre-call list
       (.ky). Those sections were cut on 02.09.2026; their rules outlived them
       by a day and go with this pass.
     - the form block, which moved to src/css/page.css, because the celebrations
       page carries the same form since 03.09.2026 and one page's stylesheet can
       no longer own it.
*/

/* ================================================================= the opening
   The headline takes the whole measure, because at 8.4vw a single word of it is
   wider than a half column and it overflowed one. Under it the lede and the
   pier plate face each other across the gutter. The right half of a hero is not
   a void on this page. */

.op {
  position: relative;
  padding-block: clamp(52px, 10vh, 120px) clamp(52px, 8vh, 104px);
}
.op-in {
  display: grid;
  justify-items: start;
  gap: clamp(14px, 2.1vh, 26px);
}
.op-in h1 { max-width: 22ch; }
/* the plate column is 480 rather than 360 because base.css sizes the plate's
   own key column at minmax(96px, 27%): in Russian the word for reservations
   measures 116px and ran straight into its value at anything narrower */
.op-g {
  margin-top: clamp(26px, 4vh, 52px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 480px);
  gap: clamp(30px, 4.4vw, 84px);
  align-items: end;
}
.op-t { display: grid; justify-items: start; gap: clamp(20px, 3vh, 36px); }
.op-t .lede { max-width: 46ch; }
.op-p { padding-bottom: .3em; }

/* =================================================================== the list
   „Izaberite lokaciju. Pozovite za rezervaciju." So the number is the loudest
   thing in a row, and the row is a rule, not a card. Three columns: the entry
   numeral the whole site numbers its addresses by, the name over the place, and
   the line or lines that ring in that house.

   The name is a link to the address anyway. She sends the reader here to call,
   but somebody who does not yet know which of the five houses called Malo
   Ribarsko Selo they want has to be able to go and look. */

.sec--list { padding-block: clamp(56px, 8vh, 104px) clamp(70px, 10vh, 132px); }

/* the section's only word, set in the quiet register rather than as a chapter
   headline: the list is the section and the label is its caption */
.cl-h {
  font-family: var(--sans);
  font-weight: 400;
  font-size: .78rem;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--lume-3);
  margin: 0 0 clamp(6px, 1vh, 12px);
  padding-bottom: clamp(14px, 1.8vw, 20px);
}

.cl { border-top: 1px solid var(--hair); }
.cl-r {
  position: relative;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) minmax(0, 320px);
  align-items: baseline;
  gap: 0 clamp(12px, 1.8vw, 30px);
  padding: clamp(17px, 2.3vh, 26px) 0 clamp(18px, 2.4vh, 28px);
}
.cl-r::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--hair-2);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1s var(--ease);
}
.cl-r.in::before { transform: scaleX(1); }
/* the row keeps its area; only the rule and the children move */
.cl-r[data-rv] { opacity: 1; transform: none; }
.cl-r > * {
  opacity: 0;
  transform: translateY(9px);
  transition: opacity .75s var(--ease) .12s, transform .75s var(--ease) .12s;
}
.cl-r.in > * { opacity: 1; transform: none; }

.cl-no {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: .86rem;
  color: var(--lume-3);
  font-variant-numeric: tabular-nums;
}
.cl-a { display: grid; gap: .4em; min-width: 0; }
.cl-nm {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.12rem, 1.5vw, 1.5rem);
  line-height: 1.2;
  color: var(--lume);
  transition: color .3s;
}
.cl-a:hover .cl-nm { color: #fff; font-style: italic; }
.cl-pl {
  font-family: var(--sans);
  font-weight: 300;
  font-size: .82rem;
  line-height: 1.5;
  color: var(--lume-3);
}

/* the numbers. One line is a number; two lines are a number and a LABELLED
   second one, never a stack of two equal numbers with no way to tell them
   apart: ringing the beach line for a dinner table is the mistake the label
   exists to prevent. */
.cl-n { display: grid; gap: .5em; justify-items: start; min-width: 0; }
.cl-tel {
  font-family: var(--sans);
  font-weight: 300;
  font-size: clamp(1.08rem, 1.4vw, 1.34rem);
  letter-spacing: .01em;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
  color: var(--lume);
  white-space: nowrap;
  box-shadow: inset 0 -1px 0 transparent;
  transition: color .3s, box-shadow .3s;
}
.cl-tel:hover { color: #fff; box-shadow: inset 0 -1px 0 var(--ag); }
.cl-two { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3em .9em; }
.cl-two-k {
  font-family: var(--sans);
  font-style: normal;
  font-size: .7rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--lume-3);
}
.cl-tel--alt { font-size: clamp(.96rem, 1.1vw, 1.08rem); color: var(--lume-2); }
.cl-pend {
  font-family: var(--sans);
  font-weight: 300;
  font-size: .88rem;
  font-style: italic;
  color: var(--lume-3);
}
.cl-w { font-size: .88rem; }

/* ==================================================================== the phone
   The row stacks: numeral and name on the first line, the place under it, the
   numbers under that, ranged on the same left edge as everything else. */

@media (max-width: 1080px) {
  .op-g { grid-template-columns: minmax(0, 1fr); gap: clamp(30px, 4.5vh, 50px); }
  .op-p { padding-bottom: 0; }
  .cl-r { grid-template-columns: 40px minmax(0, 1fr) minmax(0, 260px); }
}

@media (max-width: 900px) {
  /* The shared thread anchors to the two outer margins, which below 920px are
     8px and 382px: every side change therefore sweeps the full reading column
     rather than running down a margin, and on this page the sections are short
     enough that it changes sides twice inside the list. The stroke already
     whispers where site.js finds a band of copy, but it returns to full silver
     in the gaps between ruled rows, so the crossing reads as a scratch across
     the type. Softened here rather than hidden: the weave survives, the scratch
     does not. The real fix is in site.js anchors() and is noted in the report. */
  .thread #threadpath { opacity: .42; }
}

@media (max-width: 760px) {
  .cl-r { grid-template-columns: 34px minmax(0, 1fr); row-gap: 10px; }
  .cl-no { grid-column: 1; grid-row: 1; }
  .cl-a { grid-column: 2; grid-row: 1; }
  .cl-n { grid-column: 2; grid-row: 2; }
}

/* ============================================================= reduced motion
   Lands composed: every rule drawn and every row seated, because nothing can be
   revealed by a scroll that never happens. */

@media (prefers-reduced-motion: reduce) {
  .cl-r::before { transform: scaleX(1) !important; }
  .cl-r > * { opacity: 1 !important; transform: none !important; }
}