/* ============================================================================
   V6 "SREBRO"  ·  the shared page layer
   Loaded by every document, after base.css and before the page's own sheet.

   Two jobs:

   1. KILL. Nothing from the rejected design may survive on any screen, even on
      a page whose own stylesheet has not been rewritten yet. Ghost numerals,
      giant watermark words, drawn diagrams and plans, dials, beams, rails,
      wave dividers, cursor rings, progress hairlines and the full-width caps
      kicker rule are removed here, once, for the whole site.

   2. CARRY. The idioms that recur across the location pages, restated in the
      V6 language: the full-bleed opening, a photograph, a caption, a pull
      quote, a ruled register, a directions list, a menu card, a reservations
      foot. A page that has not been hand-composed yet still lands as a
      disciplined near-black typographic document rather than as a broken one.
   ========================================================================== */

/* ------------------------------------------------------------------- 1. KILL */

/* the V5 identity hairline under a letterspaced caps kicker */
main .rule,
/* stroked and outlined numerals, and the giant watermark words behind copy */
.ghost, .op-ghost, .hero-ghost, .rd-ghost, .name-ghost, .ghost-time,
.sec-ghost, .ch-ghost, .big-ghost, .watermark,
/* drawn schematics: plans, cross sections, route maps, dials, candle rows */
.plan, .dsc, .dsc-svg, .candles, .wire, .rd-map, #rd-map, .dial, .dial-svg,
.tick, .ticks, .beam, .rail, .railcar, .lh-beam, .seam, .wdiv,
/* the cursor rig and the reading progress line */
.curdot, .curring, .hd-prog,
/* giant watermark words behind the copy, in a leftover accent, gradient-clipped
   into the type. This is the loudest cheap move left in the V5 sheets. */
.bigword, .big-word, .wordmark-ghost {
  display: none !important;
}

/* Outlined numerals were a named rejection and they survive as a stroke rather
   than as a class name, so kill the technique itself: anything on this site
   that draws type as an outline is a ghost numeral by another name. */
/* Outlined type is a named rejection, so it is killed as a TECHNIQUE rather
   than class by class: no glyph anywhere in this site is drawn as an outline. */
main *, footer * {
  -webkit-text-stroke: 0 !important;
}
main .ch-no, main .sec-no, main .st-no, main .hr-no {
  font-family: var(--mono) !important;
  font-size: .72rem !important;
  letter-spacing: .09em !important;
  color: var(--ag) !important;
  -webkit-text-stroke: 0 !important;
  position: static !important;
  opacity: 1 !important;
  line-height: 1.4 !important;
}

/* the arch-topped photograph: every frame in V6 is a hard rectangle */
.fr, .fr--arch, .frame, .hero-ph, .hero-img, .hero-bg, .card, .plate-fr {
  border-radius: 0 !important;
  clip-path: none;
  mask-image: none;
  -webkit-mask-image: none;
}

/* ------------------------------------------------------------------ 2. CARRY */

/* ....................................................... the full-bleed opening
   Every location page opens on its own photograph with the thesis over it and
   the plate in the foot. */

.hero {
  position: relative;
  min-height: 100svh;
  margin-top: calc(var(--hd-h) * -1);
  display: grid;
  align-content: end;
  background: var(--pitch);
  overflow: hidden;
  isolation: isolate;
}
.hero-ph, .hero-bg { position: absolute; inset: 0; z-index: 0; }
.hero-ph picture, .hero-bg picture { height: 100%; clip-path: none; }
.hero-ph img, .hero-bg img, .hero-img, .hero video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.76) contrast(1.08) brightness(.74) !important;
  animation: rs-kb 26s ease-in-out infinite alternate;
  transform-origin: 50% 55%;
}
.hero-veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg,
      rgba(8, 9, 11, .88) 0%, rgba(8, 9, 11, .70) 7%, rgba(8, 9, 11, .52) 15%,
      rgba(8, 9, 11, .46) 24%, rgba(8, 9, 11, .44) 33%, rgba(8, 9, 11, .48) 46%,
      rgba(8, 9, 11, .46) 58%, rgba(8, 9, 11, .60) 69%, rgba(8, 9, 11, .76) 80%,
      rgba(8, 9, 11, .90) 91%, rgba(8, 9, 11, .99) 100%),
    linear-gradient(96deg,
      rgba(8, 9, 11, .74) 0%, rgba(8, 9, 11, .54) 13%, rgba(8, 9, 11, .36) 26%,
      rgba(8, 9, 11, .20) 39%, rgba(8, 9, 11, .08) 52%, rgba(8, 9, 11, 0) 65%);
}
.hero-in {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-top: calc(var(--hd-h) + 40px);
}
.hero-thesis, .hero-txt, .hero-in > .shell, .hero-in > .wrap {
  display: grid;
  justify-items: start;
  gap: clamp(16px, 2.4vh, 30px);
  padding-bottom: clamp(40px, 7vh, 90px);
  text-align: left !important;
}
.hero-thesis > *, .hero-txt > * { margin-inline: 0 !important; }
.hero h1, .hero .lede, .hero-intro, .hero-kick, .hero-cta { text-align: left !important; }
.hero-thesis h1, .hero-txt h1, .hero h1 { max-width: 16ch; }
.hero-intro, .hero-kick {
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--lume-3);
}
.hero .lede { color: var(--lume-2); max-width: 48ch; }
.hero-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px clamp(20px, 3vw, 36px);
}
.hero-foot {
  border-top: 1px solid var(--hair-2);
  padding-block: clamp(20px, 3vh, 34px) clamp(24px, 4vh, 44px);
}
.hero-foot > .shell, .hero-foot > .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(20px, 4vw, 64px);
  align-items: end;
}
.hero-line { display: grid; gap: .55em; align-content: end; max-width: 48ch; }
.hero-key { font-family: var(--sans); font-weight: 300; color: var(--lume-2); font-size: .98rem; line-height: 1.55; }
.hero-cap, .hero-note {
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--lume-3);
}
@media (max-width: 860px) {
  .hero-foot > .shell, .hero-foot > .wrap { grid-template-columns: 1fr; gap: 22px; }
}
@media (max-width: 700px) {
  /* on a phone the foot is a band of its own ground, not a transparent strip
     laid over the brightest part of the photograph */
  .hero { min-height: auto; }
  .hero-in { padding-top: calc(var(--hd-h) + 26px); }
  .hero-thesis, .hero-txt { padding-bottom: clamp(46px, 9vh, 90px); }
  /* page sheets load after this one, so the phone treatment states its case */
  .hero-foot {
    background: var(--ink) !important;
    border-top: 1px solid var(--hair);
    margin-top: clamp(26px, 5vh, 52px);
    position: relative;
    z-index: 3;
  }
  /* page sheets pin these to inset:0 and load after this file, so on a phone
     the photograph ran the full height of a hero that is now content-tall and
     showed through everything under it */
  .hero-ph, .hero-bg, .hero-veil {
    bottom: auto !important;
    height: 78vh !important;
  }
  /* Sixteen pages hang different things under the thesis, so instead of
     chasing each one, the hero's own content layer takes the ground below the
     photograph. Everything under 74vh sits on ink whatever it is. */
  .hero-in {
    background: linear-gradient(180deg,
      rgba(8, 9, 11, 0) 0, rgba(8, 9, 11, 0) 58vh,
      var(--ink) 74vh, var(--ink) 100%);
  }
  .hero-in > *:not(.hero-thesis):not(.hero-txt) { position: relative; z-index: 3; }
}

/* ................................................................ photographs */

.frw { position: relative; }
.frw .fr, figure > .fr {
  display: block;
  overflow: hidden;
  background: var(--stone);
}
/* display:block matters here, not just for layout: Chromium will not lazy-load
   an <img> whose <picture> is an inline box that the curtain has clipped to
   zero height, so every photograph on a page built this way stayed blank. */
.frw picture, .fr picture {
  display: block;
  overflow: hidden;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.25s var(--ease);
}
.fr.in picture, [data-rv].in picture, .frw .fr.in picture { clip-path: inset(0 0 0 0); }
.frw img, .fr img { width: 100%; filter: saturate(.94) contrast(1.02); }

main figcaption, .cap, .pcap, .fcap {
  display: block;
  margin-top: .85em;
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--lume-3);
  font-style: normal;
}

/* ................................................................ the copy */

main .standfirst, main .lede2, main .kicker-body {
  font-family: var(--sans);
  font-weight: 250;
  font-size: clamp(1.06rem, .98rem + .5vw, 1.32rem);
  line-height: 1.5;
  color: var(--lume);
  max-width: 52ch;
}
main .prose p + p { margin-top: 1.1em; }

/* the unboxed pull quote: display serif, a hairline at its left, never a box */
main .pull, main .quote, main .pq {
  font-family: var(--serif);
  font-size: clamp(1.42rem, 2.4vw, 2.1rem);
  line-height: 1.24;
  letter-spacing: -.01em;
  color: var(--lume);
  border-left: 1px solid var(--ag-dim);
  padding-left: clamp(16px, 2.4vw, 34px);
  max-width: 26ch;
  background: none;
  box-shadow: none;
}
main .pull cite, main .quote cite { display: block; margin-top: .8em; font: 400 .7rem/1.4 var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--lume-3); font-style: normal; }

main .cardnote, main .note-small, main .disclaimer {
  font-family: var(--mono);
  font-size: .68rem;
  line-height: 1.6;
  letter-spacing: .03em;
  color: var(--lume-3);
  max-width: 62ch;
}

/* ........................................................... ruled registers
   The site's answer to a card grid: rows with hairlines and mono figures. */

main .reg, main .ways, main .card, main .list, main .rows {
  border-top: 1px solid var(--hair);
}
main .reg > li, main .ways > li, main .card > li, main .list > li, main .rows > li,
main .reg > div, main .ways > div, main .card > div {
  padding: clamp(13px, 1.9vh, 24px) 0;
  border-bottom: 1px solid var(--hair);
}
main .reg h3, main .ways h3, main .card h3 { margin-bottom: .4em; }

/* a definition list is a ruled two-column table, never a set of boxes */
main dl.rowset > div, main .dl > div {
  display: grid;
  grid-template-columns: minmax(96px, 24%) minmax(0, 1fr);
  gap: .2em 1.2em;
  padding: .85em 0;
  border-bottom: 1px solid var(--hair-2);
}
main dl.rowset dt, main .dl dt {
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--lume-3);
}
main dl.rowset dd, main .dl dd { font-family: var(--sans); font-weight: 300; color: var(--lume-2); }

/* ......................................................... a section index */

main .idx-h, main .anchors-h {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--lume-3);
  margin-bottom: 1.2em;
}
main .idx-l { display: grid; gap: 0; border-top: 1px solid var(--hair); }
main .idx-l li { border-bottom: 1px solid var(--hair); }
main .idx-l a {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 1em;
  align-items: baseline;
  padding: clamp(10px, 1.4vh, 16px) 0;
  transition: color .3s;
}
main .idx-l b { font: 400 .68rem/1 var(--mono); color: var(--ag); }
main .idx-l span { font-family: var(--serif); font-size: clamp(1rem, 1.3vw, 1.2rem); color: var(--lume-2); }
main .idx-l a:hover span, main .idx-l a.is-on span { color: var(--lume); font-style: italic; }

/* ....................................................... the reservations foot */

.sec--res .res-g, .res-g {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: clamp(18px, 3vw, 46px);
  margin-top: clamp(30px, 4.4vh, 56px);
}
.res-g > * {
  display: grid;
  gap: .5em;
  align-content: start;
  border-left: 1px solid var(--hair);
  padding-left: clamp(12px, 1.6vw, 22px);
}
.res-g dt, .res-g b, .res-g .res-l {
  font-family: var(--mono);
  font-weight: 400;
  font-size: .66rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--lume-3);
}
.res-g dd, .res-g a { font-family: var(--sans); font-weight: 300; font-size: 1rem; color: var(--lume); }
.res-g a[href^="tel"], .telnum {
  font-family: var(--mono);
  font-size: .84rem;
  letter-spacing: .02em;
  color: var(--lume);
  font-variant-numeric: tabular-nums;
}
.telnum { box-shadow: inset 0 -1px 0 var(--ag-dim); transition: box-shadow .3s; padding-bottom: .15em; }
.telnum:hover { box-shadow: inset 0 -1px 0 var(--ag); }

/* ...................................................... generic split layout
   A text column and one photograph, never a grid of cards. */

main .sp {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 40%);
  gap: clamp(26px, 4vw, 76px);
  align-items: start;
}
main .sp--r { grid-template-columns: minmax(0, 40%) minmax(0, 1fr); }
main .sp--r .sp-t { order: 2; }
main .sp--r .sp-a { order: 1; }
main .sp-t > * + * { margin-top: clamp(16px, 2.2vh, 28px); }
@media (max-width: 940px) {
  main .sp, main .sp--r { grid-template-columns: 1fr; gap: 26px; }
  main .sp--r .sp-t, main .sp--r .sp-a { order: 0; }
}

/* a leftover V5 wrapper name, still emitted by a few pages */
main .wrap {
  width: 100%;
  max-width: 1560px;
  margin-inline: auto;
  padding-inline: var(--gut);
}
main .band { position: relative; }


/* ==========================================================================
   ONE ALIGNMENT. Several of the V5 location sheets centred their own heroes
   and section heads while others ranged left, so the site read as sixteen
   designs. Every reference ranges left except one deliberate wordmark. Left
   is the site's alignment and it is stated once, here.
   ========================================================================== */

main, main section, main div, main header, main article, main aside,
main h1, main h2, main h3, main h4, main p, main li, main dl, main figure,
main figcaption, main blockquote, main nav {
  text-align: left !important;
}
main [class*="center"], main [class*="centre"] { text-align: left !important; }
/* <button> carries text-align:center from the UA sheet. The controls on this
   site shrink-wrap so it never showed, but it is the last thing in the document
   that says centre, so it goes too. */
main button, main summary { text-align: left; }
main > section > .shell, main > section > .wrap { margin-inline: auto; }
/* anything a page centred with auto margins on a narrow measure ranges left */
main .narr, main .mid, main .col-c, main .sec-head, main .shead {
  margin-inline: 0 !important;
}

/* ==========================================================================
   NO DECORATIVE GRADIENTS. The V5 sheets tinted whole bands with the hour of
   the day and the room accent. Remapping those colours left banded beige to
   mauve to blue washes across dark sections, which is the "broken gradient"
   on the Budva page. A gradient on this site exists for exactly one reason:
   to hold type legible over a photograph.
   ========================================================================== */

main *:not(.hero-veil):not(.op-scrim):not(.bleed-scrim):not(.hero-ph):not(.hero-bg):not(.thread) {
  background-image: none !important;
}

/* gradient-clipped display words: the technique, not the class names */
main [class*="word"]:not([class*="wordmark"]) {
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: currentColor !important;
}
.bleedword, .bigword, .big-word, .wordmark-ghost, .dusk, .tint, .wash, .hourtint {
  display: none !important;
}


/* ==================================================================== THE FORM
   Moved here from src/pages/contact/style.css on 03.09.2026, when the
   celebrations page got a form of its own („Na Proslave stranici, da li i
   dalje imamo formu koju neko moze ispuniti sa informacijama svog dogadjaja?
   Ne vidim je"). Two pages emit the same markup, so one page's stylesheet can
   no longer own it. page.css is loaded on every document, and the rules are
   inert on a page that carries no form.

   The only way to write to the group. Set as a ruled register like everything
   else on this site: hairline underlines, no boxes, no rounded fields. */

.sec--form { padding-block: clamp(88px, 11vw, 168px); }
.fm-head { max-width: 62ch; margin-bottom: clamp(38px, 5.5vh, 72px); }
.fm-kick {
  display: flex;
  align-items: center;
  gap: .8em;
  font-family: var(--sans);
  font-size: .78rem;
  letter-spacing: .04em;
  color: var(--lume-3);
  margin: 0 0 clamp(14px, 2vh, 22px);
}
.fm-head h2 { margin: 0 0 clamp(16px, 2.2vh, 26px); }
.fm-lede {
  font-family: var(--sans);
  font-weight: 250;
  font-size: clamp(1rem, .95rem + .3vw, 1.16rem);
  line-height: 1.55;
  color: var(--lume-2);
  margin: 0;
}

.fm { max-width: 78ch; }
.fm-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 2.6vw, 34px) clamp(24px, 3.2vw, 48px);
}
.fm-f { margin: 0; display: grid; gap: .5em; }
.fm-f--message { grid-column: 1 / -1; }
.fm-f label {
  font-family: var(--sans);
  font-size: .74rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--lume-3);
}
.fm-f input,
.fm-f select,
.fm-f textarea {
  width: 100%;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--hair);
  border-radius: 0;
  padding: .62em 0;
  font-family: var(--sans);
  font-weight: 300;
  font-size: 1.02rem;
  color: var(--lume);
  transition: border-color .3s var(--ease);
}
.fm-f textarea { resize: vertical; min-height: 7.5em; line-height: 1.55; }
.fm-f select {
  /* the native arrow is a rounded chrome widget on every platform */
  appearance: none;
  -webkit-appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--lume-3) 50%),
    linear-gradient(135deg, var(--lume-3) 50%, transparent 50%);
  background-position: right 10px center, right 5px center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 26px;
}
.fm-f select option { background: var(--ink); color: var(--lume); }
.fm-f input:focus,
.fm-f select:focus,
.fm-f textarea:focus { outline: none; border-bottom-color: var(--ag); }
.fm-note { font-style: normal; font-size: .74rem; color: var(--lume-3); }

/* the honeypot: off screen rather than display:none, which bots skip */
.fm-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.fm-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(16px, 2.4vw, 30px);
  margin-top: clamp(30px, 4vh, 48px);
}
.fm-send { border: 0; cursor: pointer; font-size: .9rem; }
.fm-send[disabled] { opacity: .55; cursor: default; }
/* The Turnstile box is injected late (only once the form nears the viewport)
   and arrives 300x73. Unreserved, it pushed the Send button sideways and grew
   the page by ~28px after the thread had measured, which is under the thread's
   48px rebuild threshold, so every mask rect below the form stayed stale
   (validate_thread.py, /proslave/ 1440, 15.09.2026). Reserve the box up front. */
.fm-foot .cf-turnstile { min-width: 300px; min-height: 73px; }

.fm-state {
  font-family: var(--sans);
  font-size: .92rem;
  margin: clamp(16px, 2.2vh, 24px) 0 0;
  min-height: 1.4em;
  color: var(--lume-2);
}
.fm-state.is-ok { color: var(--ag); }
.fm-state.is-err { color: #E8A0A0; }
.fm-legal { margin-top: clamp(18px, 2.4vh, 28px); max-width: 68ch; }
/* once a message is away the fields step back, so nobody sends it twice */
.fm.is-sent .fm-grid { opacity: .45; transition: opacity .5s var(--ease); }

@media (max-width: 700px) {
  .fm-grid { grid-template-columns: 1fr; }
  .fm-foot { gap: 18px; }
  .fm-send { width: 100%; justify-content: center; }
}