/* Iron Scribe — ironscribe.co.za
   Warm near-black, antique gold and silver. Classical serif throughout.
   Every page opens on a full-bleed photograph with the text laid over it. */

:root {
  --ink:        #070605;   /* warm near-black, not navy */
  --ink-2:      #0d0b09;
  --ink-raised: #14110d;
  --edge:       #2a2118;
  --gold:       #c9963f;
  --gold-lit:   #e5b962;
  --gold-pale:  #f0d9a6;
  --silver:     #d8d4cd;
  --text:       #ece7df;
  --muted:      #9a9187;

  --display: "Cormorant Garamond", Georgia, serif;
  --body:    "Cormorant Garamond", Georgia, serif;
  --ui:      "Lato", system-ui, sans-serif;

  --measure: 62ch;
  --gutter: clamp(1.25rem, 5vw, 5rem);
}

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: var(--body);
  font-size: clamp(1.05rem, 1rem + .35vw, 1.22rem);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--display); font-weight: 400; line-height: 1.12; margin: 0; }

a { color: var(--gold-lit); text-underline-offset: .2em; }
a:hover { color: var(--gold-pale); }

:focus-visible { outline: 2px solid var(--gold-lit); outline-offset: 3px; }

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

/* Icons never scale to their container. */
svg { flex: none; }

.wrap { width: 100%; max-width: 1280px; margin-inline: auto; padding-inline: var(--gutter); }

.skip { position: absolute; left: -9999px; background: var(--gold); color: #17130a; padding: .6rem 1rem; font-weight: 700; }
.skip:focus { left: 1rem; top: 1rem; z-index: 99; }

/* ------------------------------------------------------- ornate divider */
/* A hairline that thins to nothing at both ends with a small diamond at
   its centre — the mockups' section mark. */
.orn {
  display: flex; align-items: center; gap: .8rem;
  margin: 1.6rem 0 0; max-width: 420px;
  color: var(--gold);
}
.orn::before, .orn::after {
  content: ""; height: 1px; flex: 1;
  background: linear-gradient(90deg, transparent, rgba(201,150,63,.75), transparent);
}
.orn i { width: 7px; height: 7px; border: 1px solid var(--gold); transform: rotate(45deg); flex: none; }
.orn.wide { max-width: none; }
.rule-orn { margin: 0; padding: 0; border: 0; }

/* ---------------------------------------------------------------- header */
.top {
  position: sticky; top: 0; z-index: 30;
  background: rgba(7,6,5,.82);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(42,33,24,.9);
}
.top .wrap { display: flex; align-items: center; gap: 1.5rem; min-height: 96px; }

.brand { display: block; margin-right: auto; line-height: 0; }
.brand img { height: 74px; width: auto; }
@media (max-width: 900px) { .brand img { height: 54px; } .top .wrap { min-height: 76px; } }

/* Nav sits centred between the logo and the download button. */
.top nav {
  display: flex; gap: clamp(1rem, 3vw, 2.6rem); align-items: center;
  flex-wrap: wrap; justify-content: center; flex: 1;
}
.top nav a {
  font-family: var(--display);
  font-size: 1.12rem; letter-spacing: .01em;
  color: var(--silver); text-decoration: none;
}
.top nav a:hover, .top nav a[aria-current] { color: var(--gold-lit); }
.top .btn { margin-left: auto; }
@media (max-width: 900px) {
  .top nav { justify-content: flex-start; gap: 1rem; }
  .top nav a { font-size: 1rem; }
}

/* ---------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  font-family: var(--ui); font-weight: 700;
  font-size: .78rem; letter-spacing: .14em; text-transform: uppercase;
  padding: .95rem 1.9rem;
  text-decoration: none; border: 1px solid transparent;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
  white-space: nowrap;
}
.btn-gold {
  background: linear-gradient(180deg, #d9a94e, #b8842f);
  color: #1a1204; border-color: #d9a94e;
}
.btn-gold:hover { background: linear-gradient(180deg, #e8bb63, #c8933a); color: #1a1204; }
.btn-outline { border-color: rgba(201,150,63,.65); color: var(--gold-lit); background: transparent; }
.btn-outline:hover { border-color: var(--gold-lit); color: var(--gold-pale); background: rgba(201,150,63,.08); }
.btn-quiet { border-color: rgba(216,212,205,.28); color: var(--text); background: transparent; }
.btn-quiet:hover { border-color: var(--silver); }

/* ============================================================ photo hero */
/* The photograph is the background of the whole section, faded to black on
   the left so the type stays legible over it. This is the layout the site
   is built around. */
.phero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(560px, 76vh, 860px);
  background-color: var(--ink);
  background-repeat: no-repeat;      /* never tile */
  background-position: right center; /* portrait photos sit to the right */
  background-size: auto 100%;        /* fit the height, never tile */
  border-bottom: 1px solid rgba(42,33,24,.8);
}
.phero > .wrap { width: 100%; }
.phero::before {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, var(--ink) 0%, var(--ink) 32%, rgba(7,6,5,.92) 44%, rgba(7,6,5,.55) 58%, rgba(7,6,5,.12) 78%, rgba(7,6,5,.02) 100%),
    linear-gradient(180deg, rgba(7,6,5,.55) 0%, transparent 22%, transparent 72%, rgba(7,6,5,.7) 100%);
}
.phero > .wrap { position: relative; z-index: 1; }

.phero-in {
  max-width: 620px;
  padding-block: clamp(3.5rem, 9vw, 7rem);
}
.phero.tall .phero-in { padding-block: clamp(4.5rem, 11vw, 9rem); }

/* On narrow screens the photo moves behind everything and the veil closes
   up, so the type never sits on a busy part of the picture. */
@media (max-width: 820px) {
  .phero { background-position: center; background-size: cover; min-height: 0; }
  .phero::before {
    background:
      linear-gradient(180deg, rgba(7,6,5,.9) 0%, rgba(7,6,5,.82) 45%, rgba(7,6,5,.92) 100%);
  }
  .phero-in { max-width: none; }
}

/* Display headings: each line can take its own colour, as in the mockups. */
.display {
  font-size: clamp(2.6rem, 1.6rem + 4.4vw, 4.6rem);
  line-height: 1.08;
  letter-spacing: .005em;
}
.display .g { color: var(--gold-lit); display: block; }
.display .s { color: var(--silver); display: block; }
.display .w { color: var(--text); display: block; }

.phero .lede {
  margin: 1.8rem 0 0;
  font-size: clamp(1.1rem, 1rem + .45vw, 1.35rem);
  color: var(--silver);
  max-width: 34em;
}
.phero .lede.tight { line-height: 1.55; }

.actions { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; margin-top: 2.4rem; }

.plainly {
  font-family: var(--ui); font-size: .74rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); margin: 1.6rem 0 0;
}

/* Row of small gold marks under the hero, divided by hairlines. */
.marks {
  list-style: none; margin: 3rem 0 0; padding: 0;
  display: grid; gap: 0;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}
.marks li {
  padding: 0 1.1rem; text-align: center;
  border-left: 1px solid rgba(201,150,63,.22);
  font-family: var(--ui); font-size: .74rem; line-height: 1.6;
  color: var(--muted);
}
.marks li:first-child { border-left: 0; padding-left: 0; }
.marks svg { width: 26px; height: 26px; color: var(--gold); margin: 0 auto .55rem; }
.marks strong { display: block; color: var(--gold-lit); font-weight: 700; font-size: .76rem; letter-spacing: .04em; }

/* =============================================================== sections */
.band { padding: clamp(4rem, 8vw, 7rem) 0; }
.band.alt { background: var(--ink-2); }
.band > .wrap > p { max-width: var(--measure); color: var(--silver); }

.h2 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.2rem); color: var(--gold-lit); }
.h2.plain { color: var(--text); }

.eyebrow {
  font-family: var(--ui); font-size: .72rem; letter-spacing: .22em;
  text-transform: uppercase; color: var(--gold); margin: 0 0 1rem;
}

/* --------------------------------------------------------- gold icon grid */
.igrid {
  list-style: none; margin: 3.2rem 0 0; padding: 0;
  display: grid; gap: 0;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
}
.igrid li {
  text-align: center;
  padding: 2.2rem 1.4rem;
  border-left: 1px solid rgba(42,33,24,.9);
  border-top: 1px solid rgba(42,33,24,.9);
}
.igrid h3 { font-size: 1.35rem; color: var(--gold-lit); margin: 1.1rem 0 .5rem; }
.igrid p { margin: 0; color: var(--muted); font-size: .95rem; line-height: 1.65; }

.circ {
  width: 74px; height: 74px; border-radius: 50%;
  border: 1px solid rgba(201,150,63,.45);
  display: flex; align-items: center; justify-content: center;
  color: var(--gold); margin: 0 auto;
  background: radial-gradient(circle at 50% 40%, rgba(201,150,63,.10), transparent 70%);
  flex: none; aspect-ratio: 1;
}
.circ svg { width: 30px; height: 30px; }

.soon {
  display: inline-block;
  font-family: var(--ui); font-size: .58rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--gold);
  border: 1px solid rgba(201,150,63,.45);
  padding: .16rem .45rem; margin-left: .4rem; vertical-align: .22em;
  white-space: nowrap;
}

/* ------------------------------------------------------- benefit columns */
.benefits {
  list-style: none; margin: 3rem 0 0; padding: 0;
  display: grid; gap: 2.4rem 3rem; grid-template-columns: 1fr;
}
@media (min-width: 700px) { .benefits { grid-template-columns: 1fr 1fr; } }
.benefits li { display: flex; gap: 1.3rem; align-items: flex-start; }
.benefits .circ { width: 58px; height: 58px; margin: 0; flex: none; }
.benefits .circ svg { width: 24px; height: 24px; }
.benefits h3 { font-size: 1.25rem; color: var(--gold-lit); margin-bottom: .35rem; }
.benefits p { margin: 0; color: var(--muted); font-size: .95rem; line-height: 1.62; }

.tagline {
  font-family: var(--display);
  font-size: clamp(1.35rem, 1.1rem + 1.3vw, 2rem);
  color: var(--gold-lit); margin: 3.2rem 0 0; line-height: 1.4;
}

/* ---------------------------------------------------------------- prices */
.prices { display: grid; gap: 1.8rem; margin: 3rem 0 0; grid-template-columns: 1fr; }
@media (min-width: 720px) { .prices { grid-template-columns: 1fr 1fr; } }
.price {
  border: 1px solid var(--edge);
  background: linear-gradient(180deg, rgba(20,17,13,.92), rgba(10,8,6,.92));
  padding: 2.4rem 2.1rem; position: relative; text-align: center;
}
.price.pick { border-color: rgba(201,150,63,.6); }
.price .kicker {
  font-family: var(--ui); font-size: .72rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--gold); margin: 0;
}
.price .amount {
  font-family: var(--display); font-size: clamp(2.4rem, 1.8rem + 1.8vw, 3.3rem);
  line-height: 1; margin: 1rem 0 .2rem; color: var(--text); font-weight: 400;
}
.price .amount small { font-size: 1.05rem; color: var(--muted); white-space: nowrap; }
.price .per { color: var(--muted); font-size: .98rem; margin: 0 0 1.6rem; }
.price ul { list-style: none; margin: 1.6rem 0 2rem; padding: 0; text-align: left; }
.price li { padding-left: 1.7rem; position: relative; margin-bottom: .7rem; font-size: 1rem; color: var(--silver); }
.price li::before {
  content: "✓"; position: absolute; left: 0; top: -1px; color: var(--gold); font-size: .95rem;
}
.price .btn { width: 100%; }
.price .fine { font-family: var(--ui); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: .9rem 0 0; }
.ribbon {
  position: absolute; top: 0; right: 0;
  background: linear-gradient(180deg, #d9a94e, #b8842f); color: #1a1204;
  font-family: var(--ui); font-size: .6rem; letter-spacing: .14em; text-transform: uppercase;
  font-weight: 700; padding: .3rem 1rem;
}

.promise {
  border: 1px solid rgba(201,150,63,.32);
  border-left-width: 2px; border-left-color: var(--gold);
  background: rgba(20,17,13,.75);
  padding: 1.8rem 2rem; margin: 3rem 0 0;
}
.promise p { margin: 0; max-width: var(--measure); color: var(--silver); }
.promise strong { color: var(--gold-lit); }

/* ----------------------------------------------------------------- prose */
.prose { max-width: var(--measure); }
.prose h2 { font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.3rem); color: var(--gold-lit); margin: 3rem 0 1rem; }
.prose h3 { font-size: 1.3rem; color: var(--text); margin: 2.2rem 0 .6rem; }
.prose p, .prose li, .prose dd { color: var(--silver); }
.prose ul { padding-left: 1.2rem; }
.prose li { margin-bottom: .55rem; }
.prose dt { color: var(--gold-lit); margin-top: 1.2rem; font-size: 1.08rem; }
.prose dd { margin: .3rem 0 0; }
.stamp {
  font-family: var(--ui); font-size: .82rem; line-height: 1.8; color: var(--muted);
  border: 1px solid var(--edge); padding: 1.3rem 1.5rem; margin: 2rem 0 0;
}

/* --------------------------------------------------------------- contact */
.cgrid { display: grid; gap: clamp(2.5rem, 6vw, 4.5rem); grid-template-columns: 1fr; }
@media (min-width: 880px) { .cgrid { grid-template-columns: 1fr 1fr; } }

.field { margin-bottom: 1.2rem; }
.field label {
  display: block; font-family: var(--ui); font-size: .68rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted); margin-bottom: .5rem;
}
.field input, .field textarea {
  width: 100%; background: rgba(20,17,13,.7);
  border: 1px solid var(--edge); color: var(--text);
  font-family: var(--body); font-size: 1.05rem; padding: .85rem 1rem;
}
.field input:focus, .field textarea:focus { outline: none; border-color: var(--gold); }
.field textarea { min-height: 150px; resize: vertical; }
.cform button.btn { border: 1px solid #d9a94e; cursor: pointer; }
.cnote { font-family: var(--ui); font-size: .74rem; letter-spacing: .06em; color: var(--muted); margin-top: 1.1rem; }

.clist { list-style: none; margin: 0; padding: 0; }
.clist li { display: flex; gap: 1.3rem; align-items: flex-start; padding: 1.6rem 0; border-top: 1px solid rgba(42,33,24,.9); }
.clist li:first-child { border-top: 0; padding-top: 0; }
.clist .circ { width: 56px; height: 56px; margin: 0; flex: none; }
.clist .circ svg { width: 23px; height: 23px; }
.clist h3 { font-size: 1.22rem; color: var(--gold-lit); margin-bottom: .3rem; }
.clist p { margin: 0; color: var(--muted); font-size: .96rem; line-height: 1.6; }
.clist a { color: var(--silver); text-decoration: none; }
.clist a:hover { color: var(--gold-lit); }

/* ------------------------------------------------------------ screenshots */
.split { display: grid; gap: clamp(2rem, 5vw, 4rem); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1.2fr; } }
.split.flip > figure { order: -1; }
@media (min-width: 900px) { .split.flip > figure { order: 0; } }
.shot { margin: 0; border: 1px solid var(--edge); background: var(--ink-raised); overflow: hidden; }
.shot img { width: 100%; }
.shot figcaption { font-family: var(--ui); font-size: .74rem; letter-spacing: .06em; color: var(--muted); padding: .8rem 1rem; border-top: 1px solid var(--edge); }

/* ---------------------------------------------------------------- footer */
.foot {
  border-top: 1px solid var(--edge);
  padding: 3.5rem 0 4rem; background: var(--ink-2);
  font-size: .95rem; color: var(--muted);
}
.foot .wrap { display: grid; gap: 2rem; }
@media (min-width: 760px) { .foot .wrap { grid-template-columns: 1.5fr 1fr; align-items: start; } }
.foot .mark { max-width: 210px; margin-bottom: 1.2rem; }
.foot a { color: var(--silver); text-decoration: none; }
.foot a:hover { color: var(--gold-lit); }
.foot nav { display: flex; flex-direction: column; gap: .6rem; }

/* ------------------------------------------------- header on small screens */
/* Below 900px the logo and Download button sit on one row and the links wrap
   onto their own row beneath, centred — rather than the nav trying to squeeze
   between them and stacking one word per line. */
@media (max-width: 900px) {
  .top .wrap {
    flex-wrap: wrap;
    justify-content: space-between;
    padding-block: .9rem;
    gap: .6rem 1rem;
  }
  .brand { margin-right: 0; }
  .top .btn { margin-left: 0; padding: .7rem 1.15rem; font-size: .68rem; }
  .top nav {
    order: 3; flex: 1 0 100%;
    justify-content: center; gap: 1.4rem;
    padding-top: .5rem;
    border-top: 1px solid rgba(42,33,24,.9);
  }
}
@media (max-width: 420px) {
  .brand img { height: 44px; }
  .top nav { gap: 1rem; }
  .top nav a { font-size: .95rem; }
}


/* Full-width hero content (the contact page) — the photograph stays as
   atmosphere behind the whole section instead of showing through on the
   right, so text in the right-hand column is readable. */
.phero.veiled::before {
  background:
    linear-gradient(90deg, var(--ink) 0%, rgba(7,6,5,.96) 40%, rgba(7,6,5,.9) 70%, rgba(7,6,5,.88) 100%),
    linear-gradient(180deg, rgba(7,6,5,.5) 0%, transparent 25%, transparent 70%, rgba(7,6,5,.6) 100%);
}
.phero.veiled { background-size: cover; background-position: center; }