/* =========================================================================
   cabinfield.css — the Cabinfield page: Nordstu's cabin field on Tekna,
   in the hillside above Koppang. Loaded after site.css, on this page only.

   The page lives in its own folder and reaches the shared system through
   ../assets, so it can be lifted out onto its own domain later by copying
   the folder along with assets/ and changing two path prefixes. Nothing in
   here is needed by the front page. See the README, «Cabinfield».
   ========================================================================= */

/* ------------------------------------------------------ the photograph
   Opens the page under the fixed header, then one slim band of words — the
   same shape as the front page's hero, without the year. The photograph is
   the farm's own: Røroshytta, which already stands on Tekna. */
.cfhero{ background:var(--night); padding-top:var(--hdr-h,64px) }
.cfhero__img{
  position:relative; margin:0; overflow:hidden; background:var(--paper-3);
  height:clamp(300px, calc(100svh - var(--hdr-h,64px) - 8rem), 800px);
}
.cfhero__img img{ width:100%; height:100%; object-fit:cover; object-position:50% 58% }
.cfhero__img::after{           /* the same film grain as the front page */
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:var(--grain); background-size:150px 150px;
  opacity:.5; mix-blend-mode:overlay;
}
.cfhero__band{
  position:relative; z-index:2; background:var(--night); color:var(--on-night);
  border-top:1px solid rgba(246,242,234,.12);
  display:grid; grid-template-columns:1fr auto; align-items:center;
  gap:clamp(1rem,3vw,3rem);
  padding:1.15rem max(var(--gut),calc((100% - var(--wrap)) / 2)) 1.3rem;
}
.cfhero__band .eyebrow{ color:var(--on-night-2); margin-bottom:.5rem }
.cfhero h1{
  color:#fff; margin:0;
  font-size:clamp(1.6rem,3.1vw,2.7rem); line-height:1.02; letter-spacing:-.024em;
}
.cfhero__band .btn{ white-space:nowrap }

/* this page is in the menu, so the menu says where you are */
.nav a[aria-current="page"]{ opacity:1; font-weight:500 }

/* --------------------------------------------------------- the numbers
   The front page's .bignum is tuned for the dark band; this is the same
   thing on paper, two across, sitting under the lead in the intro column. */
.cffacts{
  display:grid; grid-template-columns:repeat(2,1fr); gap:1.5rem 1.6rem;
  margin:2.1rem 0 0; padding:0; list-style:none;
}
.cffacts li{ display:flex; flex-direction:column; border-top:1px solid var(--line); padding-top:.85rem }
.cffacts b{
  font-family:var(--display); font-weight:600; line-height:1; letter-spacing:-.02em;
  font-size:clamp(1.5rem,2.4vw,2.1rem); font-variant-numeric:tabular-nums;
}
.cffacts span{ font-size:.79rem; line-height:1.42; color:var(--muted); margin-top:.55rem }

/* ------------------------------------------------- the two cabins to rent
   The front page's house card, two across instead of three. */
.cfpair{ display:grid; gap:clamp(1rem,2.2vw,1.6rem); grid-template-columns:1fr }
@media (min-width:720px){ .cfpair{ grid-template-columns:1fr 1fr } }
.cfpair .house__img{ aspect-ratio:3/2 }

/* ------------------------------------------------------------ where we are
   A plain list with the year in its own column. The last entry is what has
   not happened yet, and is set quieter for it. */
.cftime{ list-style:none; margin:0; padding:0 }
.cftime li{
  display:grid; grid-template-columns:8rem minmax(0,1fr); gap:1.2rem;
  padding:1.35rem 0; border-top:1px solid var(--line);
}
.cftime li:last-child{ border-bottom:1px solid var(--line) }
.cftime b{
  font-family:var(--display); font-weight:600; font-size:1.15rem; letter-spacing:-.01em;
  color:var(--falu); line-height:1.3;
}
.cftime h3{ font-size:1.12rem; margin:0 0 .35rem }
.cftime p{ margin:0; font-size:.95rem; color:var(--ink-2); max-width:62ch }
.cftime li[data-next="1"] b{ color:var(--muted) }
.cftime li[data-next="1"] h3{ color:var(--ink-2) }
@media (max-width:560px){ .cftime li{ grid-template-columns:1fr; gap:.3rem } }

/* the place, as one photograph beside the words: the photograph keeps its
   own shape and never gets cropped to the text's height */
.cfplace img{ width:100%; height:auto; border-radius:var(--r) }

@media (max-width:760px){
  .cfhero__img{ height:min(60svh,520px) }
  .cfhero__band{ grid-template-columns:1fr; gap:.9rem; padding-block:1rem 1.1rem }
  .cfhero h1{ font-size:1.55rem }
}
@media print{ .cfhero__img{ height:auto } }