/* Skarva Lodge, variant v4.
   Reference: ERA Residence. One deep saturated field that is not black, three
   families that never do each other's work, and a fold carrying no button, no
   image and no paragraph.

   The continuation is colour. There is no photograph on the fold to dissolve or
   grow, so the field itself carries over: the next section opens in the same
   value and the first photograph rises out of it through a gradient of exactly
   that colour, so the image develops out of the fold rather than following it. */

:root {
  --field: #0E2230;
  --field-2: #0A1A25;
  --paper: #F2EFE8;
  --dim: #93A4B0;
  --line: #23394A;
  --gold: #C8A87A;

  --display: 'Prata', Georgia, 'Times New Roman', serif;
  --script: 'Pinyon Script', 'Apple Chancery', cursive;
  --ui: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --pad: clamp(1.25rem, 4vw, 3rem);
  --gap: clamp(4rem, 9vw, 7rem);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--field); }

body {
  margin: 0;
  background: var(--field);
  color: var(--paper);
  font-family: var(--ui);
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }

.wrap { width: 100%; max-width: 64rem; margin-inline: auto; padding-inline: var(--pad); }

.skip {
  position: absolute; left: -9999px;
  background: var(--paper); color: var(--field);
  padding: 0.9rem 1.25rem; z-index: 50; text-decoration: none;
}
.skip:focus { left: 0; top: 0; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }

/* Every piece of interface, at 9 to 13px with wide tracking. Nothing bridges the
   gap between this and the display sizes; the jump is the design. */
/* Only genuine interface takes the tracked caps. Applying it to descriptions,
   straplines and footer prose turned paragraphs into 197 characters of uppercase,
   which is unreadable and is not what the reference asks for. */
.lockup__axis, .facts dt {
  font-family: var(--ui);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  line-height: 1.9;
}

/* ---------- the fold ---------- */

.fold {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 4rem var(--pad);
}

/* What keeps the emptiness deliberate. */
.watermark {
  position: absolute;
  inset: auto -10% auto -10%;
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
  font-family: var(--script);
  font-size: clamp(14rem, 42vw, 46rem);
  line-height: 0.8;
  text-align: center;
  color: var(--paper);
  opacity: 0.04;
  user-select: none;
  white-space: nowrap;
}

.fold__in { position: relative; z-index: 2; text-align: center; }

.glyph { margin: 0 0 2.5rem; font-size: 0.9rem; color: var(--gold); letter-spacing: 0; }

/* The axis labels sit under the name rather than flanking it. Flanking put a
   tracked-caps label immediately above the h1, which is the banned eyebrow
   shape whatever the reference calls it. */
.lockup__axis { margin: 1.4rem 0 0; color: var(--dim); }

.lockup__name {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(3rem, 11vw, 8rem);
  line-height: 0.94;
  letter-spacing: -0.01em;
}
.lockup__script {
  display: block;
  margin-top: -0.18em;
  font-family: var(--script);
  font-size: 0.52em;
  letter-spacing: 0.01em;
  color: var(--gold);
}

.rule {
  width: 1px;
  height: clamp(2.5rem, 6vh, 4.5rem);
  margin: 2.25rem auto;
  background: var(--line);
}
.strap { margin: 0; color: var(--dim); }

/* ---------- the photograph developing out of the field ---------- */

.emerge { position: relative; background: var(--field); }
.emerge__fig { position: relative; margin: 0; }

/* The photograph has no edges. It is masked into the field colour at the top and
   the bottom, so the mountain rises out of the same blue the lockup is painted
   on and sinks back into the same blue the text below sits on. A veil laid over
   a rectangle was not enough: the rectangle was still there underneath it, and a
   hard horizontal line across the page is exactly what stops a hero reading as
   part of the page rather than a picture dropped into it.
   The mask is static, so this holds on every browser and at every scroll
   position, including for somebody who lands halfway down. */
.emerge__fig img {
  width: 100%;
  height: clamp(24rem, 72vw, 48rem);
  object-fit: cover;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.35) 9%, #000 26%, #000 66%, rgba(0,0,0,0.4) 88%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.35) 9%, #000 26%, #000 66%, rgba(0,0,0,0.4) 88%, transparent 100%);
}

/* A light wash in the same colour, which lifts as the picture rises. It is the
   difference between weather and a filter: it only ever tints, it never hides,
   so the image is legible at rest whether or not the timeline is supported. */
.emerge__fig::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(14, 34, 48, 0.55) 0%, rgba(14, 34, 48, 0.12) 45%, rgba(14, 34, 48, 0.45) 100%);
  pointer-events: none;
}
@supports (animation-timeline: view()) {
  @keyframes develop { from { opacity: 1; } to { opacity: 0.25; } }
  .emerge__fig::after {
    animation: develop linear both;
    animation-timeline: view();
    animation-range: entry 10% cover 55%;
  }
}

.emerge__body { padding-block: var(--gap); }
.emerge__body p, .table p {
  max-width: 56ch;
  margin: 0 0 1.2rem;
  color: var(--dim);
  font-size: 1.02rem;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.8;
}
.emerge__body p:last-child, .table p:last-child { margin-bottom: 0; }

/* ---------- displays ---------- */

.micro {
  margin: 0 0 0.9rem;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
}
.display {
  max-width: 20ch;
  margin: 0 0 1.75rem;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.9rem, 4.6vw, 3.4rem);
  line-height: 1.1;
  letter-spacing: -0.012em;
}

/* ---------- rooms ---------- */

.rooms { padding-block: var(--gap); border-top: 1px solid var(--line); }
.tiers { margin: 0; }
.tiers > div {
  display: grid;
  grid-template-columns: 9rem minmax(0, 1fr) 6rem;
  gap: 0.3rem 2.5rem;
  align-items: baseline;
  padding-block: 1.3rem;
  border-top: 1px solid var(--line);
}
.tiers dt {
  font-family: var(--display);
  font-size: 1.55rem;
  letter-spacing: -0.01em;
}
.tiers__d { margin: 0; color: var(--dim); }
.tiers__p {
  margin: 0;
  text-align: right;
  font-family: var(--display);
  font-size: 1.4rem;
  color: var(--gold);
}
.fine { max-width: 52ch; margin: 2rem 0 0; color: var(--dim); }

/* ---------- plate ---------- */

/* A join has to reconcile two things: the colour of the page and the colour of
   the picture. An alpha fade only does the first. This image is warm timber and
   firelight and the field is a cold blue, so fading one straight into the other
   ran the edge through a muddy zone where neither colour was winning.
   So the tint goes first and the alpha second. A wash of the field colour pulls
   the picture's hue toward the page over a long approach, and only once the two
   are close does the mask take the last of it away. The mask is therefore much
   tighter than it would be on its own: it finishes an edge the tint has already
   made almost invisible. */
.plate { position: relative; margin: 0; }
.plate img {
  width: 100%;
  max-height: 34rem;
  object-fit: cover;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 13%, #000 87%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 13%, #000 87%, transparent 100%);
}
.plate::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to bottom,
    var(--field) 0%,
    rgba(14, 34, 48, 0.78) 9%,
    rgba(14, 34, 48, 0.30) 20%,
    rgba(14, 34, 48, 0.10) 32%,
    rgba(14, 34, 48, 0.10) 68%,
    rgba(14, 34, 48, 0.30) 80%,
    rgba(14, 34, 48, 0.78) 91%,
    var(--field) 100%);
}

/* ---------- table ---------- */

.table { padding-block: var(--gap); }

/* ---------- end ---------- */

.end { padding-block: var(--gap); border-top: 1px solid var(--line); background: var(--field-2); }
.end__in {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.facts { margin: 0; }
.facts > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1.5rem;
  padding-block: 0.85rem;
  border-bottom: 1px solid var(--line);
}
.facts dt { color: var(--dim); }
.facts dd { margin: 0; text-align: right; color: var(--paper); }

/* ---------- footer ---------- */

.foot { padding-block: 2.5rem 3rem; background: var(--field-2); }
.foot p { max-width: 56ch; margin: 0 0 0.8rem; color: var(--dim); }
.foot b { color: var(--paper); font-weight: 500; }
.foot a {
  display: inline-block;
  padding-block: 0.7rem;
  margin-block: -0.7rem;
  color: var(--paper);
  text-underline-offset: 3px;
}

/* ---------- reveals, movement only ---------- */

@supports (animation-timeline: view()) {
  @keyframes rise { from { transform: translateY(14px); } to { transform: none; } }
  [data-reveal] {
    animation: rise linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 58%;
  }
}
@supports not (animation-timeline: view()) {
  .js [data-reveal] { transform: translateY(14px); }
  .js [data-reveal].is-in { transform: none; transition: transform 0.65s cubic-bezier(0.22, 1, 0.36, 1); }
}
@media print { [data-reveal] { animation: none; transform: none; } }

/* ---------- narrow ---------- */

@media (max-width: 50rem) {
  .lockup { grid-template-columns: 1fr; gap: 1.25rem; }
  .lockup__left, .lockup__right { justify-self: center; }
  .tiers > div { grid-template-columns: minmax(0, 1fr) auto; gap: 0.25rem 1.25rem; }
  .tiers dt { grid-column: 1; grid-row: 1; }
  .tiers__p { grid-column: 2; grid-row: 1; }
  .tiers__d { grid-column: 1 / -1; grid-row: 2; }
  .end__in { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .emerge__fig::after { animation: none; opacity: 0.5; }
  [data-reveal] { animation: none; transform: none; }
  .js [data-reveal], .js [data-reveal].is-in { transform: none; transition: none; }
}

/* Set in sentence case after the uppercase rule was narrowed to labels. */
.strap { font-size: 0.95rem; letter-spacing: 0.02em; line-height: 1.9; }
.fine, .tiers__d, .facts dd { font-size: 0.95rem; letter-spacing: 0; text-transform: none; line-height: 1.7; }
.foot p { font-size: 0.84rem; letter-spacing: 0; text-transform: none; line-height: 1.7; }
.facts dt { font-size: 0.7rem; }