/* GAIN Intelligence. Editorial, quiet, high contrast. All text passes WCAG AA.
   No copy lives in this file. Layout, colour and type only. */
:root{
  --navy:#1F3A5F; --ink:#23282D; --body:#3f474e; --muted:#6A737C;
  --gold:#B08D57;            /* rules and marks only, never small text */
  --gold-dark:#8A6A3B;       /* 4.73:1 on white, safe for small text */
  --line:#E4E7EB; --bg:#FBFAF8; --paper:#FFFFFF; --red:#9c3b38;
  --rail:150px;              /* the left margin column that labels and marks hang in */
  --gap:56px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--body);
  font:400 19px/1.7 Georgia,"Times New Roman",serif;-webkit-font-smoothing:antialiased}

/* ── header ─────────────────────────────────────────────────────────────── */
header.site{background:var(--bg);border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:20}
.bar{max-width:1320px;margin:0 auto;padding:20px 40px;display:flex;
  align-items:center;justify-content:space-between;gap:40px}
.brand{font:700 18px/1.2 Georgia,serif;color:var(--navy);text-decoration:none;letter-spacing:.01em}
.brand span{display:block;font:700 9px/1.4 -apple-system,Segoe UI,sans-serif;
  letter-spacing:.26em;text-transform:uppercase;color:var(--gold-dark);margin-top:4px}
/* lighter, airier nav: quiet until you need it */
nav{display:flex;flex-wrap:wrap;gap:0 26px}
nav a{font:400 13px/1 -apple-system,Segoe UI,sans-serif;color:var(--muted);letter-spacing:.03em;
  text-decoration:none;padding-bottom:4px;border-bottom:1px solid transparent;transition:color .15s}
nav a:hover{color:var(--navy);border-bottom-color:var(--gold)}
nav a.on{color:var(--navy);border-bottom-color:var(--navy)}
.burger{display:none}

/* ── layout: an asymmetric editorial grid ───────────────────────────────────
   A left rail for labels and marks, a measured text column of about 64
   characters, and deliberate air on the right. Nothing is centred. */
main{max-width:1320px;margin:0 auto;padding:104px 40px 40px;
  display:grid;column-gap:var(--gap);
  grid-template-columns:[rail] var(--rail) [text] minmax(0,64ch) [air] 1fr [end]}
main > *{grid-column:text}
main.wide{max-width:1320px}

.kicker{grid-column:text/end;font:700 10px/1 -apple-system,Segoe UI,sans-serif;
  letter-spacing:.26em;text-transform:uppercase;color:var(--gold-dark);margin:0 0 26px}

/* type is the design here, so the scale contrast has to be real */
h1{font:400 56px/1.1 Georgia,serif;color:var(--navy);margin:0 0 26px;letter-spacing:-1.2px}
h2{font:400 36px/1.24 Georgia,serif;color:var(--navy);margin:88px 0 22px;letter-spacing:-.6px;
  position:relative}
/* the gold mark hangs in the left rail, so every section is announced there */
h2::before{content:"";position:absolute;left:calc(-1 * var(--gap) - 40px);top:.72em;
  width:40px;height:2px;background:var(--gold)}
h3{font:700 20px/1.4 Georgia,serif;color:var(--navy);margin:34px 0 12px}
p{margin:0 0 22px}
.lede{font-size:22px;line-height:1.6;color:var(--ink)}
.rule{width:56px;height:2px;background:var(--gold);margin:0 0 32px}
em{font-style:italic}
strong{font-weight:700;color:var(--ink)}

/* ── the home page: the quote and the mark, side by side ────────────────── */
/* the hero fills the window, less the header, the Next block and the footer, so the
   quote and the mark sit optically centred rather than stranded at the top */
.opening{grid-column:rail/end;min-height:calc(100vh - 340px);display:grid;
  grid-template-columns:minmax(0,1fr) 440px;align-items:center;gap:calc(var(--gap) + 20px);
  padding:0}
.opening-words{min-width:0}
.opening blockquote{font:400 48px/1.28 Georgia,serif;color:var(--navy);margin:0;
  letter-spacing:-1.2px;text-indent:-.44em}
.opening blockquote::before{content:"\201C"}
.opening blockquote::after{content:"\201D"}
/* the rule is drawn by the cite, rather than the cite being squeezed to the width
   of the rule, which is what used to happen and why the buttons rode up into it */
.opening cite{display:block;margin-top:38px;
  font:400 14px/1.4 -apple-system,Segoe UI,sans-serif;letter-spacing:.04em;
  color:var(--muted);font-style:normal}
.opening cite::before{content:"";display:block;width:56px;height:2px;background:var(--gold);
  margin-bottom:22px}
.opening-mark{width:100%;height:auto;display:block}
/* the question, then the two answers. It is the only decision on the page, so it
   is sized to be seen: close to the quote, and louder than the attribution between
   them. It still needs real air above it, so it reads as a turn in the page rather
   than as part of the cite it follows. */
.opening-ask{font:400 40px/1.3 Georgia,serif;color:var(--navy);letter-spacing:-.5px;
  margin:96px 0 0}
/* the two doors, offered from the first screen */
.opening-actions{display:flex;flex-wrap:wrap;gap:18px;margin-top:24px}
.opening-actions .btn{font:400 16px/1 -apple-system,Segoe UI,sans-serif;letter-spacing:.16em;
  text-transform:uppercase;padding:23px 35px;display:inline-flex;align-items:center;gap:16px}
.opening-actions .btn span{transition:transform .18s;font-size:19px}
.opening-actions .btn:hover span{transform:translateX(4px)}
.opening-actions .btn.ghost{color:var(--navy);border:1px solid var(--navy);background:transparent;
  padding:22px 34px}
.opening-actions .btn.ghost:hover{background:var(--navy);color:#fff}

/* ── the portrait, on About me ──────────────────────────────────────────────
   It sits in the air column on the right, level with the name. Both tracks end on
   About, so this is the one page every reader reaches, which is why the one
   photograph on the site lives here. Placeholder until the photograph exists. */
/* The frame is the true size of the photograph, so the brief scrolls inside it
   rather than stretching it. When the picture exists, this becomes the picture. */
.portrait-slot{grid-column:air;grid-row:1 / span 14;margin:0;align-self:start;
  aspect-ratio:4/5;border:2px dashed var(--gold);background:#fff;
  padding:18px 20px;overflow-y:auto}
.portrait-note b{display:block;font:700 10px/1.4 -apple-system,Segoe UI,sans-serif;
  letter-spacing:.18em;text-transform:uppercase;color:var(--gold-dark);margin:0 0 10px}
.portrait-note b ~ b{margin-top:18px;padding-top:14px;border-top:1px solid var(--line)}
.portrait-note p{font:400 12.5px/1.55 Georgia,serif;color:var(--body);margin:0 0 10px}
.portrait-note em{font-style:italic;color:var(--muted)}

@media(max-width:1080px){
  .portrait-slot{grid-column:text;grid-row:auto;aspect-ratio:auto;overflow:visible;
    margin:0 0 34px;max-width:460px}
}

/* ── devices ────────────────────────────────────────────────────────────── */
/* These are not pull quotes. A pull quote repeats a line from the text for someone
   skimming. Every one of these is a new sentence that lands the paragraph above it,
   and it appears nowhere else. So it must read as a conclusion, never as a label for
   what follows.
   Two things were making them read as headings. Size, at 34px against an h2 of 36px,
   in the same font and colour. And symmetry: equal space above and below is how you
   style an independent block, so they floated free of the paragraph they belong to.
   The margin does most of the work here. Tight above, so it stays welded to the
   sentence it concludes. Wide below, so the next section still starts cleanly. The
   size sits between the lede and the h2: too big to be prose, too small to be a
   heading, and there is nowhere else on the scale for it to be mistaken for. */
.pull{grid-column:text/end;margin:6px 0 60px;padding:0;
  font:400 28px/1.45 Georgia,serif;color:var(--navy);letter-spacing:-.3px}
/* A pull that stands alone as a credo rather than concluding the paragraph above it.
   It wants air above, not the usual tight weld, so it reads as independent. */
.pull.free{margin-top:44px}
/* a pull can also land a stats block rather than a paragraph, and .stats carries a
   56px skirt of its own. Without this the line floats away from the numbers it is
   drawing the conclusion from, which is the whole fault this rule set exists to fix */
.stats + .pull{margin-top:-38px}
.quote{grid-column:text/end;margin:52px 0;padding:0 0 0 26px;
  border-left:3px solid var(--gold);
  font:italic 400 27px/1.5 Georgia,serif;color:var(--navy)}
.quote cite{display:block;margin-top:14px;font:400 13px/1.4 -apple-system,Segoe UI,sans-serif;
  letter-spacing:.04em;color:var(--muted);font-style:normal}

/* the statistics are the most designed moment on the site, so let them be */
.stats{grid-column:text/end;display:grid;grid-template-columns:1fr 1fr;gap:0 var(--gap);
  margin:56px 0;border-top:2px solid var(--gold);border-bottom:0;padding:36px 0 0}
.stat{display:block;padding:0;border-bottom:0}
.stat b{display:block;font:400 96px/.9 Georgia,serif;color:var(--navy);
  letter-spacing:-4px;margin-bottom:20px}
.stat span{display:block;font-size:16px;line-height:1.6;color:var(--body);max-width:30ch}
.stat span i{font-style:normal;color:var(--muted);font-size:12px;letter-spacing:.12em;
  text-transform:uppercase;display:block;margin-top:12px}

.note{background:var(--paper);border:1px solid var(--line);border-left:2px solid var(--gold);
  padding:22px 26px;margin:38px 0;font-size:17px}

/* ── doors ──────────────────────────────────────────────────────────────── */
.doors{grid-column:text/end;display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);margin:56px 0}
.door{background:transparent;border:0;border-top:2px solid var(--gold);padding:26px 0 0}
.door h3{margin:0 0 12px;font-size:22px;font-weight:400}
.door p{font-size:16.5px;line-height:1.65;margin:0 0 22px}
.btn{display:inline-block;background:var(--navy);color:#fff;text-decoration:none;
  font:400 14px/1 -apple-system,Segoe UI,sans-serif;letter-spacing:.04em;
  padding:15px 28px;border-radius:2px}
.btn:hover{background:#16304f}
/* The secondary links mid-page are not calls to action, they are wayfinding. As
   faint grey boxes they read as broken buttons. As a gold-underlined line they read
   as an invitation to keep going, which is what they are. The two real buttons on
   the home page stay buttons, so the difference means something. */
.btn.ghost{background:transparent;color:var(--navy);border:0;border-bottom:2px solid var(--gold);
  border-radius:0;padding:0 0 8px;font:400 17px/1.4 Georgia,serif;letter-spacing:0}
.btn.ghost::after{content:" \2192";color:var(--gold-dark)}
.btn.ghost:hover{color:var(--gold-dark)}
.cta{grid-column:text/end;margin:76px 0 10px;padding-top:38px;border-top:1px solid var(--line)}
.cta h2{margin-top:0}
.cta h2::before{content:none}
.cta p{font-size:17px;max-width:64ch}
/* the email address is the conversion moment on every page, so it is a button,
   not an underlined word. Same treatment as the two doors on the home page. */
a.mail{display:inline-block;background:var(--navy);color:#fff;text-decoration:none;border:0;
  font:400 12px/1 -apple-system,Segoe UI,sans-serif;letter-spacing:.14em;
  padding:17px 26px;border-radius:2px;margin-top:6px}
a.mail:hover{background:#16304f}

/* the list of things people arrive asking for */
ul.asks{list-style:none;margin:0 0 22px;padding:0}
ul.asks li{position:relative;padding-left:26px;margin:0 0 8px;font-size:21px;line-height:1.5;
  color:var(--ink)}
ul.asks li::before{content:"";position:absolute;left:0;top:.66em;width:12px;height:2px;
  background:var(--gold)}

/* ── next-page link ─────────────────────────────────────────────────────── */
.next{grid-column:text/end;display:block;background:transparent;border:0;
  border-top:1px solid var(--line);padding:26px 0 0;margin:56px 0 0;text-decoration:none}
.next:hover span{color:var(--gold-dark)}
.next b{display:block;font:700 10px/1 -apple-system,Segoe UI,sans-serif;letter-spacing:.26em;
  text-transform:uppercase;color:var(--gold-dark);margin-bottom:10px}
.next span{font:400 26px/1.3 Georgia,serif;color:var(--navy);letter-spacing:-.3px;
  transition:color .15s}

footer{border-top:1px solid var(--line);margin-top:88px;background:var(--bg);
  padding-top:38px;text-align:center}
.footmark{width:130px;height:auto;margin:0 auto 4px}
.foot{max-width:1320px;margin:0 auto;padding:38px 40px;display:flex;justify-content:space-between;
  gap:20px;flex-wrap:wrap;font:400 13px/1.6 -apple-system,Segoe UI,sans-serif;color:var(--muted);
  letter-spacing:.03em}
.foot a{color:var(--navy);text-decoration:none;border-bottom:1px solid var(--gold)}

/* ── narrower screens: the rail collapses, everything returns to one column ── */
@media(max-width:1080px){
  :root{--rail:0px;--gap:0px}
  /* the rail is gone, so the air column has nothing to balance against and the text
     just looks shoved left. Drop the air and let the measure centre itself. */
  main{grid-template-columns:[rail] 0 [text] minmax(0,64ch) [air] 0 [end];
    justify-content:center;padding:64px 32px 40px}
  h2::before{position:static;display:block;margin-bottom:18px}
  .quote{padding-left:24px;border-left:3px solid var(--gold)}
  .opening{gap:40px;grid-template-columns:minmax(0,1fr) 333px;min-height:calc(100vh - 420px)}
}
@media(max-width:760px){
  /* Georgia has a small x-height, and 17px is tight on a phone held at arm's length */
  body{font-size:18px}
  h1{font-size:34px;letter-spacing:-.6px}
  /* the gold marks are the only structure left down here, so sections need more air
     around them to do the job the rail does on desktop */
  h2{font-size:25px;margin-top:72px}
  /* four nav items fit on one line, so the bar no longer needs to stack. It is
     sticky, so every pixel here is charged against every screen of every page. */
  .bar{align-items:center;gap:20px;padding:14px 20px}
  nav{gap:0 18px}
  main{padding:44px 20px 30px}
  .opening{min-height:auto;padding:12px 0 56px;grid-template-columns:1fr;gap:44px}
  .opening-mark{width:307px;margin:0}
  /* the desktop sizes were raised by a third; down here the quote drops to 29px, so
     the question has to come back under it or it shouts over the thing it follows */
  .opening-ask{font-size:25px;margin-top:56px}
  .opening-actions{gap:10px}
  .opening-actions .btn{padding:15px 20px;font-size:11px}
  .opening-actions .btn span{font-size:13px}
  .opening-actions .btn.ghost{padding:14px 19px}
  .opening blockquote{font-size:29px;letter-spacing:-.5px;text-indent:0}
  .opening blockquote::before,.opening blockquote::after{content:none}
  .footmark{width:104px}
  /* h2 is 25px down here, so the pull sits just under it and stays welded above */
  .pull{font-size:23px;letter-spacing:-.2px;margin:4px 0 48px}
  .quote{font-size:20px}
  .stats{grid-template-columns:1fr;gap:44px 0}
  .stat b{font-size:64px}
  .doors{grid-template-columns:1fr;gap:38px}
  .next span{font-size:21px}
  .foot{padding:28px 20px}
}