/* Shared stylesheet for roberttroughton.co.uk. Loaded by every page, including the blog. */

:root {
  --bg:#0a1220;
  --surface-1:#131e33;
  --surface-2:#1a2742;
  --ink:#f2f5fb;
  --body:#c2cde0;
  --muted:#93a2bd;
  --line:#26344b;
  --line-strong:#384d70;
  --accent:#8e9dff;
  --accent-bright:#aab6ff;
  --warm:#e0b463;
  --sans:'Manrope',Arial,sans-serif;
  --mono:'DM Mono',ui-monospace,monospace;
  --serif:'Source Serif 4',Georgia,serif;

  --shell:1320px;
  --gutter:32px;
  --rail:220px;
  --rail-gap:80px;
  --measure:38em;
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }

body {
  margin:0;
  background:
    radial-gradient(72% 56% at 6% -8%,#16234a 0%,transparent 62%),
    radial-gradient(48% 42% at 97% 14%,rgba(87,71,113,.22),transparent 70%),
    var(--bg);
  background-attachment:fixed;
  color:var(--ink);
  font:17px/1.65 var(--sans);
  -webkit-font-smoothing:antialiased;
}

body::before {
  content:'';
  position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.2;
  background-image:
    linear-gradient(rgba(170,188,230,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(170,188,230,.035) 1px,transparent 1px);
  background-size:46px 46px;
  mask-image:linear-gradient(to bottom,black,transparent 70%);
}

img { display:block; max-width:100%; }
a { color:inherit; text-underline-offset:4px; }

:focus-visible {
  outline:2px solid var(--accent-bright);
  outline-offset:3px;
  border-radius:4px;
}

.skip-link {
  position:absolute; left:-9999px; top:0; z-index:100;
  padding:12px 16px; background:var(--ink); color:var(--bg);
  font:700 13px/1 var(--sans); text-decoration:none;
}
.skip-link:focus { left:12px; top:12px; }

/* ---------- Layout ---------- */

.shell { width:min(var(--shell),100% - var(--gutter) * 2); margin-inline:auto; }

section { padding:104px 0; }
section + section { border-top:1px solid var(--line); }

.section-grid { display:grid; grid-template-columns:var(--rail) minmax(0,1fr); gap:var(--rail-gap); }
.rail { position:sticky; top:110px; align-self:start; }

.eyebrow { margin:0 0 14px; color:var(--accent); font:500 11px/1.4 var(--mono); letter-spacing:.09em; text-transform:uppercase; }
.rail .section-no { color:var(--muted); font:500 11px/1.4 var(--mono); letter-spacing:.09em; text-transform:uppercase; }
.rail .section-no strong { display:block; margin-bottom:6px; color:var(--accent); font:800 34px/1 var(--sans); letter-spacing:-.05em; }

h1,h2,h3 { text-wrap:balance; }
.section-title { max-width:16em; margin:0 0 20px; color:var(--ink); font:800 clamp(34px,3.4vw,52px)/1.06 var(--sans); letter-spacing:-.045em; }
.intro { max-width:var(--measure); margin:0 0 40px; color:var(--body); font-size:19px; }

/* ---------- Top bar / tabs ---------- */

.topbar {
  position:sticky; top:0; z-index:20;
  background:rgba(10,18,32,.9);
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(14px);
}
.nav { display:flex; align-items:center; justify-content:space-between; gap:28px; min-height:76px; }
.brand { display:flex; align-items:center; gap:12px; color:var(--ink); text-decoration:none; }
.brand-mark { display:grid; place-items:center; width:36px; height:36px; border:1px solid var(--line-strong); border-radius:9px; background:var(--surface-2); color:var(--accent-bright); font:500 12px/1 var(--mono); }
.brand-name { display:block; font:800 18px/1.05 var(--sans); letter-spacing:-.04em; }
.brand-role { display:block; margin-top:5px; color:var(--muted); font:500 9px/1 var(--mono); letter-spacing:.08em; text-transform:uppercase; }

.nav-right { display:flex; align-items:center; gap:20px; }
.tabs { display:flex; gap:3px; margin:0; padding:0; list-style:none; }
.tabs a {
  display:block; padding:9px 14px; border:1px solid transparent; border-radius:8px;
  color:var(--body); font:700 12px/1 var(--sans); letter-spacing:.02em; text-decoration:none;
  transition:color .18s ease,background-color .18s ease,border-color .18s ease;
}
.tabs a:hover { color:var(--ink); background:rgba(142,157,255,.12); }
.tabs a[aria-current] { color:var(--ink); background:var(--surface-2); border-color:var(--line-strong); }

.nav-cta {
  padding:11px 16px; border-radius:8px; background:var(--ink); color:#0a1220;
  font:700 12px/1 var(--sans); text-decoration:none; white-space:nowrap;
  transition:background-color .18s ease,color .18s ease;
}
.nav-cta:hover { background:var(--accent-bright); color:#0a1220; }

/* ---------- Buttons ---------- */

.button {
  display:inline-block; padding:15px 20px; border:1px solid transparent; border-radius:9px;
  background:var(--accent); color:#0a1120; font:700 13px/1 var(--sans); text-decoration:none;
  transition:background-color .2s ease,color .2s ease;
}
.button:hover { background:var(--accent-bright); color:#0a1120; }
.button-ghost { background:transparent; border-color:var(--line-strong); color:var(--ink); }
.button-ghost:hover { background:var(--surface-2); border-color:var(--accent); color:var(--ink); }
.text-link { color:var(--accent-bright); font:700 13px/1.2 var(--sans); text-decoration:none; }
.text-link:hover { color:var(--ink); }

/* ---------- Hero ---------- */

.hero { position:relative; padding:76px 0 84px; overflow:hidden; }
.hero::after {
  content:''; position:absolute; z-index:0; right:-140px; top:-90px; width:470px; height:470px;
  border:22px solid rgba(74,95,199,.55);
  border-radius:44% 56% 61% 39% / 48% 42% 58% 52%;
  box-shadow:-48px 55px 0 rgba(224,180,99,.14),-98px 106px 0 rgba(142,157,255,.07);
  pointer-events:none;
}
.hero-inner { position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,1fr) minmax(280px,380px); gap:80px; align-items:center; }
.hero h1 { max-width:14ch; margin:16px 0 26px; font:800 clamp(48px,5.4vw,84px)/1 var(--sans); letter-spacing:-.055em; }
.hero h1 span { color:var(--accent-bright); text-decoration:underline; text-decoration-color:var(--warm); text-decoration-thickness:.07em; text-underline-offset:.09em; }
.lede { max-width:34em; margin:0; color:var(--body); font-size:20px; line-height:1.6; }
.hero-actions { display:flex; flex-wrap:wrap; align-items:center; gap:22px; margin-top:36px; }

.portrait { padding:12px 12px 20px; border-radius:24px 24px 66px 24px; background:linear-gradient(150deg,#1c2c5c,#101a3d); box-shadow:20px 22px 0 rgba(224,180,99,.16); }
.portrait img { aspect-ratio:4/5; width:100%; height:auto; object-fit:cover; object-position:center top; border-radius:14px 14px 50px 14px; }
.portrait .caption { display:flex; justify-content:space-between; gap:10px; margin-top:14px; padding:0 6px; color:#a6b5d1; font:500 10px/1.5 var(--mono); }

/* ---------- Cards ---------- */

.card-grid { display:grid; gap:18px; }
.card-grid-3 { grid-template-columns:repeat(3,1fr); }
.card {
  padding:30px; border:1px solid var(--line); border-radius:12px;
  background:var(--surface-1);
  transition:border-color .2s ease,background-color .2s ease;
}
.card:hover { border-color:var(--line-strong); background:var(--surface-2); }
.card h3 { margin:26px 0 12px; color:var(--ink); font:800 22px/1.18 var(--sans); letter-spacing:-.035em; }
.card p { max-width:52ch; margin:0; color:var(--body); font-size:15px; }
.card .num { color:var(--accent); font:500 11px/1 var(--mono); letter-spacing:.09em; }
.card-lead { background:linear-gradient(150deg,#20305e,#141f3c); border-color:var(--line-strong); }
.card-lead .num { color:var(--warm); }

/* Five services read as 3 + 2 on a wide shell. */
.services { grid-template-columns:repeat(6,1fr); }
.services .card { grid-column:span 2; }
.services .card:nth-child(4),.services .card:nth-child(5) { grid-column:span 3; }

.focus-note {
  max-width:var(--measure); margin-top:40px; padding:24px 26px;
  border:1px solid var(--line); border-left:3px solid var(--warm); border-radius:0 10px 10px 0;
  background:linear-gradient(105deg,rgba(62,83,167,.22),rgba(26,36,64,.5));
}
.focus-note span { display:block; margin-bottom:9px; color:var(--warm); font:700 10px/1 var(--mono); letter-spacing:.08em; text-transform:uppercase; }
.focus-note p { margin:0; color:var(--body); font-size:15px; }

.aside-note { margin:32px 0 0; color:var(--muted); font-size:14px; }
.aside-note a { color:var(--accent-bright); font-weight:700; }

/* ---------- Stats ---------- */

.stats { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; margin-bottom:56px; border:1px solid var(--line); border-radius:12px; background:var(--line); overflow:hidden; }
.stat { padding:28px; background:var(--surface-1); }
.stat strong { display:block; color:var(--accent-bright); font:800 40px/1 var(--sans); letter-spacing:-.055em; }
.stat span { display:block; margin-top:12px; color:var(--muted); font:500 10px/1.5 var(--mono); letter-spacing:.05em; text-transform:uppercase; }

/* ---------- Credits grid ---------- */

.credits { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.credit {
  display:flex; flex-direction:column; overflow:hidden;
  border:1px solid var(--line); border-radius:12px; background:var(--surface-1);
  transition:border-color .2s ease,background-color .2s ease;
}
.credit:hover { border-color:var(--line-strong); background:var(--surface-2); }
.credit-art { aspect-ratio:16/9; background:var(--surface-2); }
.credit-art img { width:100%; height:100%; object-fit:cover; }
.credit-art-blank { display:grid; place-items:center; background:linear-gradient(140deg,#22325f,#141f3c); color:var(--accent-bright); font:500 11px/1 var(--mono); letter-spacing:.14em; }
.credit-body { display:flex; flex-direction:column; gap:10px; padding:24px; }
.credit h4 { margin:0; color:var(--ink); font:800 24px/1.1 var(--sans); letter-spacing:-.04em; }
.credit-meta { color:var(--muted); font:500 9px/1.4 var(--mono); letter-spacing:.08em; text-transform:uppercase; }
.credit p { margin:4px 0 0; color:var(--body); font-size:14px; line-height:1.55; }
.credit-wide { grid-column:span 3; flex-direction:row; }
.credit-wide .credit-art { flex:0 0 38%; aspect-ratio:auto; }
.credit-wide .credit-body { justify-content:center; padding:32px; }
.credit-wide h4 { font-size:28px; }
.credit-wide p { max-width:56ch; }

/* ---------- Timeline ---------- */

.timeline { border-top:1px solid var(--line); }
.chapter { display:grid; grid-template-columns:150px minmax(200px,1fr) minmax(0,1.5fr); gap:32px; padding:30px 0; border-bottom:1px solid var(--line); }
.chapter time { color:var(--warm); font:500 11px/1.5 var(--mono); }
.chapter h3 { margin:0; color:var(--ink); font:800 21px/1.15 var(--sans); letter-spacing:-.035em; }
.chapter h3 span { display:block; margin-top:8px; color:var(--muted); font:500 12px/1.4 var(--sans); letter-spacing:0; }
.chapter p { max-width:60ch; margin:0; color:var(--body); font-size:15px; }

/* ---------- Press clippings ---------- */

.press { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.press a { display:block; overflow:hidden; border:1px solid var(--line); border-radius:10px; background:var(--surface-1); color:var(--body); text-decoration:none; transition:border-color .2s ease,background-color .2s ease; }
.press a:hover { border-color:var(--line-strong); background:var(--surface-2); color:var(--ink); }
.press img { aspect-ratio:4/3; width:100%; object-fit:cover; object-position:top; opacity:.82; transition:opacity .2s ease; }
.press a:hover img { opacity:1; }
.press span { display:block; padding:14px 16px; font:500 10px/1.5 var(--mono); letter-spacing:.05em; }

/* ---------- Writing cards ---------- */

.writing-head { display:flex; align-items:end; justify-content:space-between; gap:24px; margin-bottom:36px; }
.writing-head .section-title { margin-bottom:0; }
.writing { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.article {
  display:flex; flex-direction:column; padding:30px; border:1px solid var(--line); border-radius:12px;
  background:var(--surface-1); text-decoration:none;
  transition:border-color .2s ease,background-color .2s ease;
}
.article:hover { border-color:var(--line-strong); background:var(--surface-2); }
.article:first-child { grid-column:span 2; background:linear-gradient(150deg,#22336a,#141f3c); border-color:var(--line-strong); }
.article time { color:var(--accent); font:500 10px/1 var(--mono); letter-spacing:.08em; }
.article:first-child time { color:var(--warm); }
.article h3 { margin:18px 0 12px; color:var(--ink); font:800 22px/1.16 var(--sans); letter-spacing:-.04em; }
.article:first-child h3 { max-width:22ch; font-size:30px; }
.article p { max-width:46ch; margin:0 0 26px; color:var(--body); font-size:14px; }
.article .read { margin-top:auto; color:var(--accent-bright); font:700 11px/1.4 var(--sans); letter-spacing:.06em; text-transform:uppercase; }

/* ---------- Contact ---------- */

.contact-block { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:80px; align-items:start; }
.contact-block h1,.contact-block h2 { max-width:15ch; margin:0 0 20px; font:800 clamp(34px,3.4vw,52px)/1.03 var(--sans); letter-spacing:-.05em; }
.contact-list { border-top:1px solid var(--line); }
.contact-list a { display:flex; justify-content:space-between; gap:20px; padding:20px 0; border-bottom:1px solid var(--line); color:var(--ink); font:700 13px/1.4 var(--sans); text-decoration:none; transition:color .18s ease; }
.contact-list a:hover { color:var(--accent-bright); }
.contact-list span { color:var(--muted); font-weight:500; text-align:right; }

/* ---------- Footer ---------- */

.site-footer { padding:36px 0 56px; border-top:1px solid var(--line); color:var(--muted); font:500 11px/1.6 var(--mono); }
.footer-inner { display:flex; flex-wrap:wrap; justify-content:space-between; gap:18px; }
.site-footer a { color:var(--body); text-decoration:none; }
.site-footer a:hover { color:var(--ink); }

/* ---------- Motion ---------- */

@media (prefers-reduced-motion:no-preference) {
  @keyframes rt-reveal { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:none; } }
  .hero-inner > * { animation:rt-reveal .7s .05s both; }
  .portrait { animation-delay:.16s; }
  html.motion .reveal { opacity:0; transform:translateY(20px); transition:opacity .6s ease,transform .6s ease; }
  html.motion .reveal.is-visible { opacity:1; transform:none; }
}

/* ---------- Responsive ---------- */

@media (max-width:1100px) {
  :root { --rail-gap:44px; --rail:150px; }
  .hero-inner { grid-template-columns:minmax(0,1fr) minmax(250px,330px); gap:52px; }
  .credits { grid-template-columns:repeat(2,1fr); }
  .credit-wide { grid-column:span 2; }
  .writing { grid-template-columns:repeat(2,1fr); }
  .article:first-child { grid-column:span 2; }
  .press { grid-template-columns:repeat(3,1fr); }
}

@media (max-width:900px) {
  :root { --gutter:22px; }
  .nav { display:grid; grid-template-columns:1fr auto; grid-template-areas:'brand cta' 'tabs tabs'; align-items:center; gap:0; padding:14px 0 0; }
  .brand { grid-area:brand; }
  .nav-right { display:contents; }
  .nav-cta { grid-area:cta; }
  .tabs { grid-area:tabs; gap:2px; margin:12px -22px 0; padding:0 22px 12px; overflow-x:auto; scrollbar-width:none; }
  .tabs::-webkit-scrollbar { display:none; }
  .tabs a { white-space:nowrap; }
  .rail { position:static; }
  .rail .section-no strong { display:inline; margin-right:10px; font-size:15px; }
  .section-grid { grid-template-columns:1fr; gap:26px; }
  .hero { padding:60px 0 72px; }
  .hero-inner { grid-template-columns:1fr; gap:44px; }
  .portrait { max-width:340px; }
  .hero::after { right:-230px; top:auto; bottom:-140px; width:360px; height:360px; }
  section { padding:72px 0; }
  .services,.card-grid-3 { grid-template-columns:1fr; }
  .services .card,.services .card:nth-child(4),.services .card:nth-child(5) { grid-column:auto; }
  .stats { grid-template-columns:repeat(2,1fr); }
  .chapter { grid-template-columns:120px 1fr; }
  .chapter p { grid-column:2; }
  .contact-block { grid-template-columns:1fr; gap:40px; }
}

@media (max-width:640px) {
  body { font-size:16px; }
  .hero h1 { font-size:clamp(38px,10vw,48px); }
  .credits,.writing { grid-template-columns:1fr; }
  .credit-wide { grid-column:auto; flex-direction:column; }
  .credit-wide .credit-art { flex:none; aspect-ratio:16/9; }
  .article:first-child { grid-column:auto; }
  .press { grid-template-columns:repeat(2,1fr); }
  .stats { grid-template-columns:1fr; }
  .chapter { grid-template-columns:1fr; gap:12px; }
  .chapter p { grid-column:1; }
  .writing-head { flex-direction:column; align-items:flex-start; }
  .hero-actions { align-items:stretch; flex-direction:column; }
  .button { text-align:center; }
}

/* ---------- Anchor targets under the sticky bar ---------- */

:target,[id] { scroll-margin-top:100px; }

/* ---------- Reduced motion killswitch ---------- */

@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}