/* CELEBRATIONS AND PRIVATE EVENTS  ·  V7
   Written from scratch on 2026-07-31. The V4 sheet that stood here was a
   rejected design with its colours remapped: ivory day chapters, champagne
   gold, arch topped photographs, a drawn seating plan, a row of drawn candles,
   and a section that the shared kill list had already deleted. All of that is
   gone from this file.

   THE PAGE IN ONE LINE: five shapes a gathering falls into, and one number the
   visitor moves.

   Structural devices, and there are only three:
     - the chapter opener from base.css: a margin column with the index and the
       section word, a vertical hairline in the gutter, the headline beside it
     - ruled rows: a hairline between every entry, nothing boxed
     - one photograph per chapter, hard cornered, floating in a void

   Nothing here is positioned with a z-index at section level: the silver thread
   passes behind sections and in front of grounds, and a positioned section
   swallows it (see the note in base.css). */

/* ------------------------------------------------------------------ rhythm */

.sec--what  { --pad: clamp(94px, 12vh, 168px); }
.sec--walk  { --pad: clamp(96px, 12vh, 176px); }
.sec--count { --pad: clamp(112px, 16vh, 220px); }
.sec--geo   { --pad: clamp(96px, 12vh, 176px); }
.sec--clock { --pad: clamp(100px, 13vh, 186px); }
.sec--sea   { --pad: clamp(96px, 12vh, 176px); }
.sec--stay  { --pad: clamp(94px, 12vh, 168px); }
.sec--send  { --pad: clamp(100px, 13vh, 186px); }

/* The page-wide entrance: one quiet rise, once. Area is always preserved, so
   the observer can always fire (reveal-deadlock rule). */
[data-rv] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1s var(--ease), transform 1s var(--ease);
}
[data-rv].in { opacity: 1; transform: none; }

/* every chapter body breathes on the same interval */
.chap-b > .prose, .chap-b > p { max-width: 66ch; }

/* -------------------------------------------------------------------- hero
   Candlelight full bleed, the thesis on the gutter, the plate in the fold. */

.hero h1 { max-width: 14ch; }
.hero .lede { max-width: 46ch; }
.hero-tel { font-family: var(--serif); font-style: italic; font-size: .95rem; letter-spacing: .01em; }
.hero-foot .plate { margin-bottom: 0; }

/* ------------------------------------------ 01 what a celebration here is
   The argument holds the left. One tall photograph offset right, a small square
   dropped below and outside it. Never a pair of equal columns. */

.what-g {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(230px, 31%);
  gap: clamp(36px, 6vw, 104px);
  align-items: start;
}
.what-v { position: relative; padding-bottom: clamp(46px, 7vw, 104px); }
.wf-tall .fr img { aspect-ratio: 3/4; object-fit: cover; }
.wf-drop {
  position: absolute;
  right: clamp(-38px, -2.4vw, -12px);
  bottom: 0;
  width: clamp(132px, 14vw, 212px);
}
.wf-drop .fr img { aspect-ratio: 1/1; object-fit: cover; }

/* --------------------------------------- 02 the shapes: five ruled chapters
   One register. The numeral and what the shape asks of a house stand in the
   margin behind a vertical hairline, the argument runs in the middle, one
   photograph closes the row. */

/* ONE LEFT EDGE. The margin column, its hairline and the gutter beside it are
   the same three measures the chapter opener in base.css uses, so every index
   numeral on the page stands on one line and every piece of content starts on
   the next one. Change these and they must change together. */
.shapes { margin-top: clamp(46px, 6vw, 88px); }
.shape {
  display: grid;
  grid-template-columns: minmax(112px, 200px) minmax(0, 1fr) minmax(190px, 24%);
  gap: clamp(22px, 3.6vw, 66px);
  align-items: start;
  padding-block: clamp(40px, 5vw, 74px);
  border-top: 1px solid var(--hair);
}
.shape:last-child { border-bottom: 1px solid var(--hair); }
.s-m {
  align-self: stretch;
  display: grid;
  gap: .7em;
  justify-items: start;
  align-content: start;
  padding-right: clamp(10px, 1.6vw, 26px);
  border-right: 1px solid var(--hair);
}
.s-no {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.05rem;
  letter-spacing: .05em;
  color: var(--ag);
  line-height: 1.2;
}
.s-need {
  font-family: var(--serif);
  font-size: .72rem;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--lume-3);
  line-height: 1.55;
}
.s-t > * + * { margin-top: clamp(14px, 1.9vw, 24px); }
.s-t h3 { max-width: 16ch; }
.s-t .prose { max-width: 50ch; font-size: clamp(.97rem, .93rem + .18vw, 1.07rem); }
.holds {
  padding-top: 15px;
  border-top: 1px solid var(--hair-2);
  font-family: var(--sans);
  font-weight: 300;
  font-size: .88rem;
  line-height: 1.65;
  color: var(--lume-3);
  max-width: 46ch;
}
.holds a { color: var(--lume-2); box-shadow: inset 0 -1px 0 var(--ag-dim); transition: color .3s, box-shadow .3s; }
.holds a:hover { color: var(--lume); box-shadow: inset 0 -1px 0 var(--ag); }
.hlab {
  display: block;
  margin-bottom: .45em;
  font-family: var(--serif);
  font-size: .7rem;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--lume-3);
}
/* The photograph fills its row rather than sitting inside it. A fixed aspect
   left a dead quarter under whichever column ran shorter, and on a five row
   register that reads as five holes. Stretched, the row has exactly one
   height and no bottom void anywhere. */
.s-f {
  position: relative;
  align-self: stretch;
  min-height: clamp(230px, 21vw, 320px);
}
/* taken out of flow on purpose: left in flow the image's own 4/5 ratio decides
   the row height, which is the circularity that produced the void in the first
   place. Out of flow the TEXT decides the row and the photograph fills it. */
.s-f .fr { position: absolute; inset: 0; }
.s-f .fr picture { height: 100%; }
.s-f .fr img { width: 100%; height: 100%; object-fit: cover; }

/* ------------------------------------------- 03 THE COUNT: the signature
   The drawn plan is dead sitewide, so the sentence is the chapter. A serif
   numeral, one hairline under it, and the headline rewrites itself as the
   number moves. Nothing on this page states a capacity. */

.c-say {
  font-family: var(--serif);
  font-weight: 300;
  font-size: var(--t-h2);
  line-height: 1.02;
  letter-spacing: -.014em;
  color: var(--lume);
  max-width: 19ch;
  text-wrap: balance;
}
.c-say em { font-style: italic; letter-spacing: -.004em; }

.c-body {
  margin-top: clamp(40px, 5.5vw, 78px);
  row-gap: clamp(28px, 3.6vw, 46px);
}
.c-ctl {
  display: flex;
  align-items: flex-end;
  gap: clamp(24px, 4vw, 62px);
  flex-wrap: wrap;
}
.c-num {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(4.4rem, 9vw, 8rem);
  line-height: .8;
  letter-spacing: -.035em;
  color: var(--lume);
  font-variant-numeric: lining-nums tabular-nums;
  /* three figures wide whatever the number, so the hairline beside it does not
     jump left and right while the visitor is dragging */
  min-width: 3ch;
}
.c-track { display: block; flex: 1 1 240px; max-width: 560px; padding-bottom: .7rem; }

/* one hairline and one bone dot: the whole control */
.c-range {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 24px;
  background: none;
  cursor: ew-resize;
}
.c-range::-webkit-slider-runnable-track { height: 1px; background: var(--hair); }
.c-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 10px;
  height: 10px;
  margin-top: -4.5px;
  border-radius: 0;
  background: var(--lume);
  transition: transform .3s var(--ease), box-shadow .3s;
}
.c-range:hover::-webkit-slider-thumb,
.c-range:focus-visible::-webkit-slider-thumb {
  transform: scale(1.3);
  box-shadow: 0 0 0 6px rgba(169, 175, 178, .16);
}
.c-range::-moz-range-track { height: 1px; background: var(--hair); }
.c-range::-moz-range-thumb {
  width: 10px; height: 10px; border: 0; border-radius: 0; background: var(--lume);
}
.c-hint {
  display: block;
  margin-top: 13px;
  font-family: var(--serif);
  font-size: .72rem;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--lume-3);
}
.c-holds {
  padding-top: 16px;
  border-top: 1px solid var(--hair);
  font-family: var(--sans);
  font-weight: 300;
  font-size: .96rem;
  line-height: 1.68;
  color: var(--lume-3);
  max-width: 60ch;
}
.c-holds a { color: var(--lume-2); box-shadow: inset 0 -1px 0 var(--ag-dim); transition: color .3s, box-shadow .3s; }
.c-holds a:hover { color: var(--lume); box-shadow: inset 0 -1px 0 var(--ag); }
.c-note { max-width: 68ch; }
/* The pending label is a second voice, not the tail of the sentence. Left
   inline it landed hard against the full stop and then broke across two lines
   mid-label ("BROJ MJESTA / NA UPIT"), which reads as a fragment somebody
   forgot to place. It sits on its own line under the note instead, still the
   quiet italic the shared sheet defines. Wording untouched. */
.c-note .pending-chip {
  display: block;
  margin-top: 12px;
  letter-spacing: .17em;
}

/* the chapter's own hairline: the track, the rule under the addresses and the
   note all end on one measure, so the void to the right of them reads as the
   page's margin instead of as a column that failed to fill */
.c-body > * { max-width: 720px; }

/* -------------------------------------- 04 at the water, in the city
   Two ruled registers. The city column drops by a hair so the pair never reads
   as two cards side by side, and both close on a photograph. */

.sides {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(34px, 5vw, 86px);
  margin-top: clamp(40px, 5vw, 72px);
  align-items: start;
}
.side--city { margin-top: clamp(0px, 6vw, 92px); }
.side h3 { padding-bottom: 16px; border-bottom: 1px solid var(--hair); }
.qlist li { padding: 18px 0; border-bottom: 1px solid var(--hair-2); }
.qhead { display: flex; align-items: baseline; gap: 13px; flex-wrap: wrap; }
.qname {
  font-family: var(--serif);
  font-size: clamp(1.1rem, 1.6vw, 1.42rem);
  line-height: 1.2;
  color: var(--lume);
  transition: color .3s;
}
.qname:hover { color: var(--lume); font-style: italic; }
.qcity {
  font-family: var(--serif);
  font-size: .68rem;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--lume-3);
}
.qbody {
  display: block;
  margin-top: .5em;
  font-family: var(--sans);
  font-weight: 300;
  font-size: .92rem;
  line-height: 1.62;
  color: var(--lume-3);
}
.side .frw { margin-top: clamp(30px, 4vw, 54px); }
.side .fr img { aspect-ratio: 4/5; object-fit: cover; }

/* -------------------------------------------- 05 by day, after dark
   The killed row of candles used to open this chapter. One wide plate opens it
   now, and the two hours face each other under one rule. */

/* The two full width plates are the only bright things on a near-black page,
   and both are warm stock-lit frames. Graded to the register the hero already
   sets, so they read as photography on this site rather than as a picture
   dropped onto it. No tint is added: saturation and exposure only. */
.wide { margin-top: clamp(44px, 6vw, 84px); }
.wide .fr img {
  aspect-ratio: 21/9;
  object-fit: cover;
  filter: saturate(.78) contrast(1.05) brightness(.86);
}
.facing {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(34px, 5vw, 88px);
  margin-top: clamp(50px, 6.5vw, 100px);
  align-items: start;
}
.face { border-top: 1px solid var(--hair); padding-top: clamp(22px, 2.6vw, 34px); }
.face > * + * { margin-top: clamp(16px, 2.1vw, 28px); }
.face .fr img { aspect-ratio: 5/4; object-fit: cover; }
.face h3 { max-width: 14ch; }
.face .prose { max-width: 44ch; font-size: clamp(.97rem, .93rem + .18vw, 1.07rem); }
.ftel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 9px;
  padding-top: 16px;
  border-top: 1px solid var(--hair-2);
}
.fname { font-family: var(--serif); font-style: italic; font-size: 1.06rem; color: var(--lume); transition: color .3s; }
.fname:hover { color: #fff; }
.hours-say {
  margin-top: clamp(46px, 6vw, 86px);
  padding-top: clamp(20px, 2.4vw, 30px);
  border-top: 1px solid var(--hair-2);
  font-family: var(--sans);
  font-weight: 300;
  font-size: .95rem;
  line-height: 1.72;
  color: var(--lume-3);
  max-width: 74ch;
}
.hours-say em { font-family: var(--serif); font-style: italic; font-size: 1.1em; color: var(--lume-2); }

/* -------------------------------------------------- 06 arriving by sea */

.sea-b { margin-top: clamp(40px, 5vw, 74px); row-gap: clamp(38px, 5vw, 66px); }
.sea-copy { max-width: 62ch; }
.qh { font-size: clamp(1.16rem, 1.6vw, 1.44rem); }
.reach {
  margin-top: clamp(18px, 2.2vw, 28px);
  border-top: 1px solid var(--hair);
  max-width: 760px;
}
.reach li { border-bottom: 1px solid var(--hair-2); }
.reach a {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s4);
  padding: 15px 0;
}
.reach .rname {
  font-family: var(--serif);
  font-size: clamp(1.06rem, 1.5vw, 1.3rem);
  line-height: 1.25;
  color: var(--lume);
}
.reach a:hover .rname { font-style: italic; }
.reach .rarea {
  font-family: var(--serif);
  font-size: .68rem;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--lume-3);
  flex: none;
}

/* ------------------------------------------------------ 07 staying over */

.stay-g {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(230px, 30%);
  gap: clamp(36px, 6vw, 104px);
  align-items: start;
}
.pairs { border-top: 1px solid var(--hair); max-width: 54ch; }
.pairs li {
  display: grid;
  grid-template-columns: minmax(108px, 32%) minmax(0, 1fr);
  gap: .25em 1.2em;
  align-items: baseline;
  padding: 14px 0;
  border-bottom: 1px solid var(--hair-2);
}
/* This is the ONE label column on the page that carries figures: the fourth
   row's term is a span of hours. Melodrama's zero is slashed in every figure
   set it ships (checked: default, zero 0/1, ss01-ss05, onum, pnum all give O
   with a stroke), so in the display face this label rendered as
   "O/9:O/O/ DO O/1:O/O/" - a caps label that reads as corrupted text, and a
   slashed zero is the one glyph that says monospace on a page that has none.
   The label column therefore takes the TEXT face, which is what the design
   language asks of small UI anyway. Size, tracking, case and colour unchanged,
   so it still sits as a ruled term beside its value. */
.pairs b {
  font-family: var(--sans);
  font-weight: 400;
  font-size: .72rem;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--lume-3);
  font-variant-numeric: lining-nums tabular-nums;
}
.pairs span { font-family: var(--sans); font-weight: 300; font-size: .95rem; line-height: 1.6; color: var(--lume-2); }
.stay-f .fr img { aspect-ratio: 3/4; object-fit: cover; }

/* --------------------------------------------------- 08 what to send us */

.ask { margin-top: clamp(40px, 5vw, 68px); border-top: 1px solid var(--hair); }
.ask li {
  display: grid;
  grid-template-columns: minmax(112px, 200px) minmax(0, 300px) minmax(0, 1fr);
  gap: .3em clamp(22px, 3.6vw, 66px);
  align-items: baseline;
  padding: 19px 0;
  border-bottom: 1px solid var(--hair);
}
.ano { font-family: var(--serif); font-style: italic; font-size: 1rem; color: var(--ag); font-variant-numeric: lining-nums; }
.ask b {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.12rem, 1.7vw, 1.5rem);
  line-height: 1.24;
  color: var(--lume);
}
.abody { font-family: var(--sans); font-weight: 300; font-size: .93rem; line-height: 1.62; color: var(--lume-3); }
.after { margin-top: clamp(52px, 6.5vw, 92px); }
.after > * + * { margin-top: clamp(16px, 2.1vw, 28px); }
.after h3 { max-width: 18ch; }
.mails { display: flex; flex-wrap: wrap; gap: clamp(20px, 4vw, 58px); }
.mails a {
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-family: var(--sans);
  font-weight: 300;
  font-size: .93rem;
  color: var(--lume);
  padding-bottom: 8px;
  box-shadow: inset 0 -1px 0 var(--ag-dim);
  transition: box-shadow .35s;
}
.mails a:hover { box-shadow: inset 0 -1px 0 var(--ag); }
.mails i { font-family: var(--serif); font-style: italic; font-size: .84rem; color: var(--lume-3); }

/* ------------------------------------------------------------- responsive */

/* base.css pulls .sec back to a phone rhythm below 1024; the per-chapter pads
   above are desktop values and have to follow it, or every chapter on a phone
   ends on 130px of dead ground. */
@media (max-width: 1024px) {
  .sec--what, .sec--walk, .sec--count, .sec--geo, .sec--clock,
  .sec--sea, .sec--stay, .sec--send { --pad: clamp(72px, 9vh, 118px); }
}

@media (max-width: 1080px) {
  .shape { grid-template-columns: minmax(96px, 150px) minmax(0, 1fr); }
  /* stacked, the photograph goes back into the flow and takes a landscape crop:
     a portrait plate under a paragraph runs off the bottom of a phone */
  .s-f {
    grid-column: 1 / -1;
    position: static;
    align-self: auto;
    min-height: 0;
    max-width: 560px;
    margin-top: clamp(24px, 4vw, 40px);
  }
  .s-f .fr { position: static; inset: auto; height: auto; }
  .s-f .fr picture { height: auto; }
  .s-f .fr img { height: auto; aspect-ratio: 3/2; }
  .ask li { grid-template-columns: minmax(96px, 150px) minmax(0, 270px) minmax(0, 1fr); }
}

@media (max-width: 900px) {
  .what-g, .stay-g, .sides, .facing { grid-template-columns: 1fr; gap: clamp(30px, 6vw, 50px); }
  .what-v, .stay-f { max-width: 520px; }
  .what-v { padding-bottom: 0; }
  .wf-drop {
    position: static;
    width: clamp(136px, 42vw, 220px);
    margin-top: 20px;
    margin-left: auto;
  }
  .side--city { margin-top: 0; }
  .face--night { border-top: 1px solid var(--hair); }
  .ask li { grid-template-columns: 40px minmax(0, 1fr); gap: .3em 16px; }
  .abody { grid-column: 2; }
}

@media (max-width: 700px) {
  .shape { grid-template-columns: 1fr; gap: 18px; padding-block: clamp(34px, 8vw, 52px); }
  .s-m {
    align-self: auto;
    display: flex;
    align-items: baseline;
    gap: 1.4em;
    border-right: 0;
    border-bottom: 1px solid var(--hair);
    padding: 0 0 12px;
  }
  .s-f { margin-top: 22px; max-width: none; }
  .c-ctl { gap: 20px; }
  .c-track { padding-bottom: 0; }
  .reach a { gap: 14px; }
  .pairs li { grid-template-columns: 1fr; gap: .3em; }
}

/* --------------------------------------------------------- reduced motion
   Lands on the composed state, never on a disabled one. */
@media (prefers-reduced-motion: reduce) {
  [data-rv] { opacity: 1; transform: none; }
  .c-range::-webkit-slider-thumb { transition: none; }
}