/* Headland: shared stylesheet.
   Brand: navy #122a42 + salmon #DA7756 on warm white.
   Type:  EB Garamond (display and body), Montserrat (labels).
   Fonts are self-hosted from /assets/fonts/ (no external font requests).

   DESIGN NOTES, so later edits do not undo the point of this layout:
     - Sections deliberately do NOT share a shape. A page alternates between
       lead statements, asymmetric splits, plates, ledgers, and index lists.
       If every section starts to look the same, the page has drifted.
     - No bordered card grids. Structure comes from space and alignment.
     - The small uppercase label is used sparingly, a few times per site, not
       once per section.
     - Photography is the point. `.plate` is an image region; until a real
       <img> is dropped in it renders as a quiet tinted field carrying the
       mark, which is intentional brand furniture rather than a broken image.

   HOUSE STYLE, enforced by hand in the markup:
     - No em dashes anywhere in prose or headings.
     - No section-rule dividers. Sections are separated by whitespace only.
       Do not add <hr>, dot rules, asterisk rows, or decorative borders
       between sections. */

/* -- Fonts ------------------------------------------------------------- */
@font-face {
  font-family: 'EB Garamond';
  font-style: normal; font-weight: 400 800; font-display: swap;
  src: url(/assets/fonts/eb-garamond.woff2) format('woff2');
}
@font-face {
  font-family: 'EB Garamond';
  font-style: italic; font-weight: 400 800; font-display: swap;
  src: url(/assets/fonts/eb-garamond-italic.woff2) format('woff2');
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(/assets/fonts/montserrat.woff2) format('woff2');
}

/* -- Tokens ------------------------------------------------------------ */
:root {
  --navy:      #122a42;
  --navy-deep: #0b1a29;
  --navy-mid:  #46617e;
  --salmon:    #DA7756;

  --paper:     #ffffff;
  --paper-warm:#faf8f5;
  --ink:       #131c26;
  --ink-mid:   #4a5666;
  --tint:      rgba(18, 42, 66, 0.055);
  --hairline:  rgba(18, 42, 66, 0.16);

  /* Display and body are the same face. EB Garamond has a larger x-height
     and lower stroke contrast than Cormorant, so it reads bigger and
     heavier at a given size: the display sizes and tracking below are set
     for it and should not be copied back from an older revision. */
  --display: 'EB Garamond', Georgia, 'Times New Roman', serif;
  --body:    'EB Garamond', Georgia, 'Times New Roman', serif;
  --label:   'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  --gutter: clamp(1.25rem, 5vw, 5rem);
  --maxw:   1320px;
  --colgap: clamp(1.5rem, 3.5vw, 3.5rem);
  --measure: 60ch;
}

/* -- Base -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: clamp(1.02rem, 0.97rem + 0.22vw, 1.12rem);
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--salmon); outline-offset: 3px; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.bleed { width: 100%; }

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--navy); color: #fff; padding: 0.7rem 1.1rem;
  font-family: var(--label); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase;
}
.skip:focus { left: 0; z-index: 100; }

/* -- Type roles -------------------------------------------------------- */
/* Used a few times per site, not once per section. */
.label {
  font-family: var(--label);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--navy-mid);
  margin: 0 0 1.6rem;
}

h1, h2, h3 { font-family: var(--display); color: var(--navy); margin: 0; font-weight: 400; }

/* Large display sizes take the lighter weight; it reads as engraved rather
   than bold, which is the whole register of the brand. */
h1 {
  font-size: clamp(2.6rem, 1.4rem + 4.7vw, 4.9rem);
  line-height: 1.02; letter-spacing: -0.012em;
}
h2 {
  font-size: clamp(1.95rem, 1.3rem + 2.55vw, 3.15rem);
  line-height: 1.1; letter-spacing: -0.008em;
}
h3 {
  font-size: clamp(1.2rem, 1.06rem + 0.5vw, 1.42rem);
  line-height: 1.26; font-weight: 500; letter-spacing: 0;
}

em { font-style: italic; }

p { margin: 0 0 1.05em; max-width: var(--measure); }
p:last-child { margin-bottom: 0; }

/* The opening paragraph of a page, set larger and quieter. */
.lead {
  font-size: clamp(1.28rem, 1.05rem + 1vw, 1.72rem);
  line-height: 1.44;
  color: var(--ink-mid);
  max-width: 32ch;
}

/* A single line of type carrying a section on its own. */
.say {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.75rem, 1.15rem + 2.45vw, 3.05rem);
  line-height: 1.18;
  letter-spacing: -0.006em;
  color: var(--navy);
  max-width: 22ch;
  margin: 0;
}

.engraved {
  font-family: var(--display);
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
}

/* -- Links ------------------------------------------------------------- */
/* One link style across the site, letterhead-ish: small caps over a hairline
   that fills with salmon on hover. No filled buttons, no primary/ghost pairs. */
.go {
  display: inline-block;
  font-family: var(--label);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--navy);
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--hairline);
  transition: border-color 0.18s ease, color 0.18s ease;
}
.go:hover { border-bottom-color: var(--salmon); color: var(--salmon); }
.go + .go { margin-left: 2rem; }
.goes { margin-top: 2.4rem; }

.on-navy .go, .navy .go { color: #fff; border-bottom-color: rgba(255,255,255,0.32); }
.on-navy .go:hover, .navy .go:hover { color: var(--salmon); border-bottom-color: var(--salmon); }

/* Inline prose links keep an underline, nothing more. */
.prose a { text-decoration: underline; text-decoration-color: var(--hairline); text-underline-offset: 0.16em; }
.prose a:hover { text-decoration-color: var(--salmon); }

/* -- Header ------------------------------------------------------------ */
.site-head { padding: 1.5rem 0; }
.site-head .wrap { display: flex; align-items: baseline; justify-content: space-between; gap: 1.5rem 2.5rem; flex-wrap: wrap; }
.brand { display: inline-flex; align-items: center; gap: 0.7rem; text-decoration: none; }
.brand img { width: 34px; height: 34px; }
.brand .name {
  font-family: var(--display); font-weight: 500; font-size: 1.08rem;
  letter-spacing: 0.28em; text-transform: uppercase; color: var(--navy); line-height: 1;
}
.nav { display: flex; flex-wrap: wrap; gap: 0.4rem 1.55rem; }
.nav a {
  font-family: var(--label); font-size: 0.645rem; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--navy);
  text-decoration: none; padding-bottom: 0.25rem; border-bottom: 1px solid transparent;
}
.nav a:hover { border-bottom-color: var(--salmon); }
.nav a[aria-current="page"] { border-bottom-color: var(--navy); }

/* -- Sections ---------------------------------------------------------- */
/* Whitespace is the only separator. Never add a rule between sections. */
.s     { padding: clamp(3.4rem, 7vw, 7rem) 0; }
.s.top { padding-top: clamp(2rem, 4vw, 3.5rem); }
.s.close { padding-bottom: clamp(2rem, 4vw, 3rem); }
.warm  { background: var(--paper-warm); }
.navy  { background: var(--navy); color: rgba(233,238,244,0.82); }
.navy h1, .navy h2, .navy h3, .navy .say { color: #fff; }
.navy .label { color: rgba(233,238,244,0.6); }
.navy .lead { color: rgba(233,238,244,0.76); }

/* -- Layouts ----------------------------------------------------------- */
/* Named layouts rather than a utility grid, so each page reads as composed
   rather than assembled. All collapse to one column below 900px. */
.lay { display: grid; gap: 2.4rem var(--colgap); }

@media (min-width: 900px) {
  .lay { grid-template-columns: repeat(12, 1fr); }

  /* An indented lead statement. */
  .lay-lead   > * { grid-column: 2 / span 8; }

  /* Heading left, body offset right. */
  .lay-split  > *:first-child { grid-column: 1 / span 4; }
  .lay-split  > *:last-child  { grid-column: 6 / span 6; }

  /* Wide plate left, text right, text vertically centred. */
  .lay-pl > *:first-child { grid-column: 1 / span 7; }
  .lay-pl > *:last-child  { grid-column: 9 / span 4; align-self: center; }

  /* Text left, wide plate right. */
  .lay-pr > *:first-child { grid-column: 1 / span 4; align-self: center; }
  .lay-pr > *:last-child  { grid-column: 6 / span 7; }

  /* A narrow measure, indented. */
  .lay-narrow > * { grid-column: 3 / span 7; }

  /* Two even columns of prose, offset from the edges. */
  .lay-two > *:first-child { grid-column: 1 / span 5; }
  .lay-two > *:last-child  { grid-column: 7 / span 5; }
}

/* -- Plates (image regions) -------------------------------------------- */
/* A .plate holds an <img>. With no image it renders as a quiet engraved field
   carrying the mark, which is deliberate brand furniture rather than a broken
   image. To use a real photograph:
       <div class="plate plate-band has-img"><img src="..." alt="..."></div>
   Add `has-img` so the blind-embossed mark is suppressed. */
.plate {
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  background:
    linear-gradient(163deg,
      rgba(18, 42, 66, 0.035) 0%,
      rgba(18, 42, 66, 0.075) 52%,
      rgba(18, 42, 66, 0.115) 100%),
    var(--paper-warm);
}
/* The mark, set like a blind emboss: present, not announced. */
.plate::before {
  content: "";
  width: clamp(58px, 8vw, 128px);
  aspect-ratio: 1 / 1;
  background: url(/assets/mark-headland.png) center / contain no-repeat;
  opacity: 0.17;
}
.plate > img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.plate::after {
  content: "";
  position: absolute; inset: 0;
  transition: background 0.25s ease;
  pointer-events: none;
}
.plate.has-img::before { display: none; }

.warm .plate {
  background:
    linear-gradient(163deg, rgba(18,42,66,0.045) 0%, rgba(18,42,66,0.085) 52%, rgba(18,42,66,0.125) 100%),
    #ffffff;
}

.plate-tall  { aspect-ratio: 4 / 5; }
.plate-wide  { aspect-ratio: 16 / 10; }
.plate-band  { aspect-ratio: 21 / 9; }
.plate-hero  { min-height: min(52vh, 470px); }

@media (max-width: 899px) {
  .plate-hero { min-height: 42vh; }
  .plate-band { aspect-ratio: 3 / 2; }
}

.caption {
  font-family: var(--label); font-size: 0.6rem; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--navy-mid);
  margin: 0.9rem 0 0;
}

/* -- Ledger (numbered editorial list, no boxes) ------------------------ */
.ledger { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(2.2rem, 4vw, 3.4rem); }
.ledger > li { display: grid; gap: 0.5rem 2.2rem; }
@media (min-width: 900px) {
  .ledger > li { grid-template-columns: 4rem minmax(0, 20rem) minmax(0, 1fr); align-items: start; }
}
.ledger .n {
  font-family: var(--label); font-size: 0.64rem; font-weight: 600;
  letter-spacing: 0.16em; color: var(--salmon); padding-top: 0.55rem;
}
.ledger h3 { margin: 0; }
.ledger p { color: var(--ink-mid); margin: 0; }

/* -- Index list (a gazetteer, not cards) ------------------------------- */
.index { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(2rem, 3.4vw, 3rem); }
@media (min-width: 760px)  { .index { grid-template-columns: repeat(2, 1fr); column-gap: var(--colgap); } }
@media (min-width: 1120px) { .index { grid-template-columns: repeat(3, 1fr); } }
.index h3 { margin: 0 0 0.15rem; }
.index .where {
  font-family: var(--label); font-size: 0.6rem; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--navy-mid);
  margin: 0 0 0.8rem;
}
.index p { color: var(--ink-mid); margin: 0; max-width: 34ch; }

/* -- Columns of running prose ------------------------------------------ */
.prose p { max-width: var(--measure); }
.prose.tight p { max-width: 46ch; }

/* -- Footer ------------------------------------------------------------ */
.site-foot { background: var(--navy); color: rgba(233,238,244,0.66); padding: clamp(3.5rem, 7vw, 6rem) 0 2.5rem; font-size: 0.94rem; }
.site-foot a { color: rgba(255,255,255,0.9); text-decoration: none; }
.site-foot a:hover { color: var(--salmon); }
.site-foot .cols { display: grid; gap: 2.6rem var(--colgap); grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr)); }
.site-foot .cols > * { align-self: start; }
.site-foot .brandblock img { width: 60px; margin-bottom: 1.2rem; filter: brightness(0) invert(1); opacity: 0.88; }
.site-foot .engraved { color: #fff; font-size: 1.02rem; display: block; margin-bottom: 0.9rem; }
.site-foot p { max-width: 26ch; }
.site-foot h4 {
  font-family: var(--label); font-size: 0.6rem; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase; color: rgba(233,238,244,0.5); margin: 0 0 1rem;
}
.site-foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.site-foot .legal { margin-top: 3.4rem; font-size: 0.78rem; color: rgba(233,238,244,0.42); display: flex; flex-wrap: wrap; gap: 0.3rem 1.6rem; }
.site-foot .legal p { margin: 0; max-width: none; }

/* -- Contact ----------------------------------------------------------- */
.mailto {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(1.4rem, 1rem + 1.7vw, 2.35rem);
  color: var(--navy); text-decoration: none;
  border-bottom: 1px solid var(--hairline); padding-bottom: 0.15rem;
}
.mailto:hover { border-bottom-color: var(--salmon); color: var(--salmon); }

/* -- Listings ---------------------------------------------------------- */
.listings { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(2.6rem, 5vw, 4.5rem); }
@media (min-width: 760px)  { .listings { grid-template-columns: repeat(2, 1fr); column-gap: var(--colgap); } }
@media (min-width: 1180px) { .listings { grid-template-columns: repeat(3, 1fr); } }
.listing a { text-decoration: none; display: block; }
.listing .plate { margin-bottom: 1.15rem; }
.listing a:hover .plate::after { background: linear-gradient(160deg, rgba(18,42,66,0.13), rgba(18,42,66,0.03)); }
.listing h3 { margin: 0 0 0.2rem; }
.listing .place {
  font-family: var(--label); font-size: 0.6rem; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--navy-mid); margin: 0 0 0.7rem;
}
.listing .facts { font-size: 0.96rem; color: var(--ink-mid); margin: 0; max-width: none; }
.listing .price { font-family: var(--display); font-size: 1.24rem; color: var(--navy); }

/* Status marker: a small salmon dot for anything not plainly available. */
.status {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--label); font-size: 0.58rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--navy-mid);
}
.status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--salmon); }
.status.available::before { background: #4b7f63; }

/* Listing detail */
.spec { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.35rem; }
@media (min-width: 620px) { .spec { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.spec dt, .spec .k {
  font-family: var(--label); font-size: 0.58rem; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--navy-mid); margin: 0 0 0.3rem;
}
.spec .v { font-size: 1.06rem; color: var(--ink); margin: 0; }

.empty { color: var(--ink-mid); }
.attribution { font-size: 0.8rem; color: var(--navy-mid); margin-top: 2.5rem; max-width: 60ch; }

/* -- Motion ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* -- Vertical rhythm between blocks inside a section ------------------- */
h1 + .lay, h2 + .lay, .say + .lay, h1 + .ledger, h2 + .ledger,
h2 + .index, h2 + .listings, h1 + .listings, h2 + .prose, h1 + .prose, h2 + .spec {
  margin-top: clamp(2rem, 4vw, 3.5rem);
}
.lay + .lay, .lay + .ledger, .lay + .index, .lay + .listings {
  margin-top: clamp(3rem, 6vw, 5.5rem);
}
.label + h1, .label + h2 { margin-top: -0.4rem; }

/* Facts line on a listing card: status, size, price, separated by the same
   middot the wordmark uses. */
.listing .facts { display: flex; flex-wrap: wrap; align-items: baseline; }
.listing .facts .sep { color: var(--hairline); margin: 0 0.55rem; }

/* -- Epigraphs --------------------------------------------------------- */
/* Quoted verbatim from Wendell Berry, with the work and year named. These are
   someone else's words on a commercial site, so they are marked as quotations
   and attributed rather than set as loose italic lines that could read as our
   own copy. Keep them short: a line or two under attribution is a quotation,
   a stanza is a reproduction.

   Do not "tidy" the wording. If a quote ever needs changing, change which
   quote is used rather than editing Berry's sentence. */
/* Measure is set in rem, not ch: `ch` here would resolve against the
   figure's inherited body size rather than the blockquote's display size,
   which collapses the quote to a narrow ribbon. */
.epigraph { margin: 0; max-width: min(34rem, 100%); }
.epigraph blockquote {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.5rem, 1.1rem + 1.85vw, 2.65rem);
  line-height: 1.24;
  letter-spacing: -0.008em;
  color: var(--navy);
  text-wrap: balance;
}
.epigraph figcaption { margin-top: 1.5rem; }
.epigraph .who {
  display: block;
  font-family: var(--label);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--navy-mid);
}
.epigraph cite {
  display: block;
  margin-top: 0.35rem;
  font-style: italic;
  font-size: 0.94rem;
  color: var(--ink-mid);
}
.navy .epigraph blockquote { color: #fff; }
.navy .epigraph .who { color: rgba(233,238,244,0.62); }
.navy .epigraph cite { color: rgba(233,238,244,0.72); }