/* ===========================================================================
   Promethean Ventures
   ---------------------------------------------------------------------------
   The whole look is taken off the monogram rather than invented beside it.

   The mark is a Didone: violent thick-to-thin, hairlines that nearly vanish
   against stems that do not, flat unbracketed serifs, and a flame running
   through the join. So the display face is Bodoni Moda, which is a Didone
   proper rather than something merely elegant - the same contrast, the same
   flat hairline serifs, cut with optical sizes so the thin strokes survive at
   a headline and thicken at a caption.

   The first draft used Cormorant Garamond. It is a beautiful face and it was
   the wrong one: an old-style Garamond has gentle, bracketed serifs and
   modest contrast, which is the opposite of what the logo does, and it is
   also the face half the web reaches for when it wants to look refined. The
   mark deserved the style it was actually drawn in.

   Jost sets everything else: a geometric sans with warmth, standing in for
   the technology half of the name against the serif's craft half. That
   pairing IS the brand - the oldest way of making letters next to one of the
   newest.

   The palette is the logo's and nothing more: charcoal, soft gold, off-white,
   and a graded run of warm greys between them. No pure black and no pure
   white anywhere on the page - the deepest tone is #101113 and the lightest
   #F5F2EC, both of which have the gold's warmth folded into them, which is
   why they sit together without looking like a print error.

   Deliberately ONE visual world rather than a light and a dark theme. The
   identity is charcoal and gold; a light-mode inversion would be a different
   company. Every colour is still painted explicitly, so the page never
   borrows a ground from whatever is behind it.
   ======================================================================== */

:root{
  /* charcoal, deepest to lightest */
  --char-900:#101113;
  --char-800:#17191C;
  --char-700:#1F2226;
  --char-600:#2B2F34;
  /* the greys between */
  --grey-500:#4A4F56;
  --grey-400:#767C85;
  --grey-300:#A8ADB4;
  --grey-200:#CFCCC5;
  /* off-white, never #fff */
  --off-100:#E9E5DC;
  --off-50:#F5F2EC;
  /* the gold, from the mark */
  --gold:#C8A265;
  --gold-light:#E2C793;
  --gold-deep:#8C7140;

  --ink-on-dark:var(--grey-200);
  --ink-on-light:#34383D;

  --wrap:1080px;
  --gutter:clamp(20px, 5vw, 56px);
  --serif:'Bodoni Moda', 'Didot', 'Bodoni MT', 'Hoefler Text', Georgia, serif;
  --sans:'Jost', 'Avenir Next', 'Segoe UI', system-ui, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--char-900);
  color:var(--ink-on-dark);
  font-family:var(--sans);
  font-weight:300;
  font-size:clamp(1rem, 0.96rem + 0.2vw, 1.075rem);
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; height:auto; display:block; }
a{ color:var(--gold-light); }

/* Focus is gold and obvious. A hairline brand does not excuse an invisible
   focus ring. */
:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; border-radius:2px; }

/* ---------------------------------------------------------------- type --- */
h1,h2,h3{
  font-family:var(--serif);
  /* 400 is this family's lightest cut. Asking for 300 let the browser fake one,
     which on a Didone smears exactly the hairlines that make it a Didone. */
  font-weight:400;
  line-height:1.12;
  margin:0 0 0.5em;
  text-wrap:balance;
  letter-spacing:0.005em;
}
h1{ font-size:clamp(2.6rem, 1.6rem + 4.4vw, 5rem); }
h2{ font-size:clamp(1.9rem, 1.3rem + 2.4vw, 3rem); margin-bottom:0.7em; }
h3{ font-size:clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem); margin-bottom:0.4em; }

p{ margin:0 0 1.15em; max-width:64ch; }

/* The one structural device on the page, and it earns its place: it labels
   what kind of section follows, which is the only thing a reader skimming a
   one-page site needs. Gold, because it is the only text small enough that
   the gold stays legible. */
.eyebrow{
  font-family:var(--sans);
  font-weight:500;
  font-size:0.72rem;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--gold);
  margin:0 0 1.4em;
}
.eyebrow::after{
  content:"";
  display:block;
  width:34px; height:1px;
  margin-top:0.9em;
  background:linear-gradient(90deg, var(--gold), transparent);
}

.lede{
  font-family:var(--serif);
  font-size:clamp(1.25rem, 1.05rem + 0.9vw, 1.7rem);
  line-height:1.5;
  font-style:italic;
  font-weight:400;
  color:var(--off-100);
  max-width:34ch;
  margin-inline:auto;
}
.intro{ color:var(--grey-300); max-width:58ch; }
.fine{ font-size:0.85rem; color:var(--grey-400); }

/* An unfilled fact, marked so it cannot be mistaken for copy. It is meant to
   look unfinished - that is the job. */
.todo{
  color:var(--gold-light);
  font-style:italic;
  border-bottom:1px dashed rgba(200,162,101,0.55);
  padding-bottom:1px;
}

/* ------------------------------------------------------------- layout --- */
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter); }
.narrow{ max-width:760px; }
.center{ text-align:center; }
.center p{ margin-inline:auto; }
.center .eyebrow::after{ margin-inline:auto; }

.band{ padding:clamp(72px, 11vw, 150px) 0; }

/* The graded run. Each band carries the tone of the one before it at its top
   edge, so the page reads as one sweep from charcoal down to paper and back
   rather than as a stack of blocks. */
.band-dim{
  background:linear-gradient(180deg, var(--char-900) 0%, var(--char-800) 32%, var(--char-700) 100%);
  color:var(--ink-on-dark);
}
.band-light{
  background:linear-gradient(180deg, var(--off-100) 0%, var(--off-50) 46%, var(--off-100) 100%);
  color:var(--ink-on-light);
}
.band-light h2{ color:#23262A; }
.band-light .fine{ color:var(--grey-500); }
.band-light .intro{ color:var(--grey-500); }
.band-light .eyebrow{ color:var(--gold-deep); }
.band-light .eyebrow::after{ background:linear-gradient(90deg, var(--gold-deep), transparent); }
.band-light .todo{ color:#8A6D33; border-bottom-color:rgba(140,113,64,0.5); }
.band-dark{
  background:linear-gradient(180deg, var(--char-700) 0%, var(--char-900) 55%, var(--char-800) 100%);
  color:var(--ink-on-dark);
}
.band-dark h2, .band-dim h2{ color:var(--off-50); }

/* --------------------------------------------------------------- hero --- */
.hero{
  position:relative;
  min-height:min(92vh, 860px);
  display:grid;
  place-items:center;
  text-align:center;
  padding:clamp(80px,12vh,140px) var(--gutter) clamp(64px,10vh,110px);
  /* Must stay dark: the mark below is screen-blended and needs a dark ground
     to drop its own background out against. */
  background:
    radial-gradient(120% 80% at 50% 0%, #1A1C20 0%, var(--char-900) 58%, #0C0D0F 100%);
}
.hero-inner{ max-width:820px; }
.hero h1{
  color:var(--off-50);
  margin:0.28em 0 0.42em;
  /* The mark's own letterforms are tight. The wordmark under it matches. */
  letter-spacing:0.012em;
}

/* The monogram. Third attempt, and the first that cannot quietly vanish.

   The artwork is a JPEG with no transparency, so it arrives as a rectangle
   and its ground has to be got rid of somehow.

   Attempt one screen-blended the gold file. Its ground is #1a1a1a against a
   darker hero, so the whole rectangle lifted above the page and the mark sat
   in a visible grey box.

   Attempt two used a CSS luminance mask. It looked perfect here and showed
   NOTHING on the machine it mattered on — a mask is a resource fetch, and
   that fetch is refused on a file:// page and handled differently across
   engines. A logo that disappears depending on how the page was opened is
   not a logo.

   So this one uses nothing but mix-blend-mode, which every engine has had
   for a decade and which fetches nothing:

     1. .mark paints the GOLD gradient and isolates itself.
     2. The white-on-BLACK artwork multiplies over it — multiply keeps the
        gold where the art is white, and goes black where the art is black.
     3. .mark then screens against the page — screen makes black transparent,
        so the ground disappears and the gold letters stay.

   Same result as the mask, no fetch, no @supports, no engine-specific
   property. The only requirement is that whatever sits behind it stays dark,
   which the hero does by design. */
/* The mark is portrait — 472x560 — because it is cropped to the artwork itself
   rather than to the canvas it was rendered on. Sized by width, with the height
   following, so it keeps its proportions at every screen size. */
.mark{ width:clamp(150px, 22vw, 272px); margin-inline:auto; }
.mark img{ display:block; width:100%; height:auto; }

/* Every block in the hero centres itself, not just its text. p carries
   max-width:64ch for reading measure, and a 64ch box inside an 820px
   centre-aligned container sits at the LEFT of it with its text centred
   inside — which is why "Family-run in Aberdeenshire" looked nudged off to
   one side while the heading above it did not. .lede had margin-inline:auto
   and nothing else did. */
.hero p{ margin-inline:auto; }
.hero .fine{ margin-top:1.8em; }

/* ---- the motto ----
   A family motto and the business's both, and one that recurs, so it gets a
   class rather than a one-off rule.

   Set in the Didone's italic and in gold: italic because that is how a Latin
   phrase has been set in English typography for four hundred years, and gold
   because it is the one line on the page that is neither information nor
   instruction — it is the thing the business believes, and the gold is what
   the rest of the page spends sparingly.

   Lowercase on purpose. The game shouts it in capitals over the title screen,
   where it is a banner; here it is closer to a signature, and a signature is
   not shouted. Letter-spaced a touch so it reads as inscribed rather than
   typed, and given real room above so it lands as a closing line rather than
   as a footnote to the sentence before it. */
.hero .motto{
  margin-top:2.1em;
  font-family:var(--serif);
  font-style:italic;
  font-size:clamp(1.02rem, 0.95rem + 0.35vw, 1.3rem);
  letter-spacing:0.07em;
  line-height:1.4;
  color:var(--gold);
}

/* A hairline falling out of the hero, which is the flame's gesture in one
   straight line. Purely decorative, hidden from the reader who does not see. */
.scroll-cue{
  position:absolute;
  left:50%; bottom:0;
  width:1px; height:clamp(44px,7vh,76px);
  background:linear-gradient(180deg, transparent, var(--gold-deep) 55%, transparent);
}

/* -------------------------------------------------------------- cards --- */
.cards{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(230px, 1fr));
  gap:clamp(18px, 2.6vw, 34px);
  margin:2.6em 0 2.4em;
}
/* Not boxes. A rule on top and air underneath - the border is the only thing
   separating them, which keeps three unfinished cards from looking like three
   empty containers. */
.card{ border-top:1px solid rgba(140,113,64,0.42); padding-top:1.15em; }
.card h3{ color:#23262A; }
.card p{ margin:0; font-size:0.95rem; color:var(--grey-500); }

/* -------------------------------------------------------------- split --- */
.split{
  display:grid;
  grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);
  gap:clamp(28px, 5vw, 72px);
  align-items:start;
  margin-top:2.4em;
}
@media (max-width:760px){ .split{ grid-template-columns:1fr; } }

.facts{ margin:0; border-top:1px solid rgba(200,162,101,0.3); }
.facts div{
  display:flex; justify-content:space-between; gap:16px;
  padding:0.85em 0;
  border-bottom:1px solid rgba(200,162,101,0.16);
}
.facts dt{ font-size:0.74rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--gold); }
.facts dd{ margin:0; font-size:0.92rem; color:var(--off-100); text-align:right; }

/* ------------------------------------------------------------ buttons --- */
.actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:1.9em; }
.btn{
  display:inline-block;
  padding:0.82em 1.7em;
  font-family:var(--sans);
  font-size:0.78rem;
  font-weight:500;
  letter-spacing:0.14em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--char-900);
  background:linear-gradient(180deg, var(--gold-light), var(--gold));
  border:1px solid var(--gold);
  transition:filter 0.18s ease, transform 0.18s ease;
}
.btn:hover{ filter:brightness(1.07); transform:translateY(-1px); }
.btn-quiet{
  background:none;
  color:var(--gold-light);
  border-color:rgba(200,162,101,0.5);
}
.btn-quiet:hover{ border-color:var(--gold); filter:none; }

/* -------------------------------------------------------------- creed --- */
/* Numbered because they ARE counted - "three things we hold to" - and the
   numerals are the serif's, which is the one place the display face gets to
   behave like ornament. */
.creed{ list-style:none; counter-reset:creed; margin:2.4em 0 0; padding:0; }
.creed li{
  counter-increment:creed;
  display:grid;
  grid-template-columns:auto 1fr;
  gap:clamp(18px,3vw,38px);
  padding:1.6em 0;
  border-top:1px solid rgba(200,162,101,0.18);
}
.creed li::before{
  content:counter(creed, decimal-leading-zero);
  font-family:var(--serif);
  font-size:clamp(1.6rem,1.2rem+1.4vw,2.3rem);
  line-height:1;
  color:var(--gold-deep);
}
.creed h3{ color:var(--off-50); }
.creed p{ margin:0; color:var(--grey-300); }

/* ------------------------------------------------------------ contact --- */
.address{
  font-family:var(--serif);
  font-size:clamp(1.4rem,1.1rem+1.5vw,2.2rem);
  margin:0.2em 0 0.5em;
}
.address a{
  color:#6E5526;
  text-decoration:none;
  border-bottom:1px solid rgba(140,113,64,0.4);
  padding-bottom:2px;
}
.address a:hover{ border-bottom-color:var(--gold-deep); }

/* ------------------------------------------------------------- footer --- */
footer{
  background:linear-gradient(180deg, var(--off-100) 0%, var(--char-800) 18%, var(--char-900) 100%);
  padding:clamp(54px,8vw,92px) 0 clamp(34px,5vw,54px);
}
.footer-inner{
  display:flex; align-items:center; flex-wrap:wrap;
  gap:clamp(16px,3vw,32px);
}
.footer-mark{ width:54px; mix-blend-mode:screen; flex:none; }
.footer-name{
  font-family:var(--serif);
  font-size:1.3rem;
  color:var(--off-100);
  margin:0;
}
.footer-inner .fine{ margin:0; }
.copy{ margin-left:auto; }
@media (max-width:620px){ .copy{ margin-left:0; width:100%; } }

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
  .btn:hover{ transform:none; }
}

/* The one item in What Is Next that is not part of the fiction. Full width and
   given air above, so it reads as a separate thing rather than a fifth realm. */
.next-aside{ margin-top:clamp(26px,4vw,44px); max-width:62ch; }
.band-dim .card h3{ color:var(--off-50); }
.band-dim .card p{ color:var(--grey-300); }
.band-dim .card{ border-top-color:rgba(200,162,101,0.3); }


/* Four items rather than three, so they need a narrower minimum to sit on one
   row inside the 968px of content the wrap allows — at 230px they broke 3-then-1
   and the orphan read as an afterthought rather than part of the set. */
#next .cards{ grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); }