/* ethangallant.co.uk
   Structured as a brief, not a blog. Scaffolding over decoration: rules,
   tables and whitespace carry the structure. No hero images, no animation,
   no web fonts, so pages render instantly and offline.

   Palette and type follow the brief: navy slate on off-white, cold grey
   rules, one desaturated accent reserved for status and links. */

:root{
  --paper:#FAFAFA;
  --card:#FFFFFF;
  --wash:#F1F5F9;
  --rule:#E2E8F0;
  --rule-2:#CBD5E1;
  --ink:#1E293B;
  --ink-2:#475569;
  --ink-3:#94A3B8;
  --accent:#B45309;
  --serif:Georgia,"Source Serif 4","Times New Roman",serif;
  --sans:system-ui,-apple-system,"Segoe UI",Inter,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  --wide:1080px;
  --text:66ch;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font:17px/1.6 var(--serif);
  -webkit-font-smoothing:antialiased;
}

/* ---- shell ------------------------------------------------------------ */
.wrap{max-width:var(--wide);margin:0 auto;padding:0 28px}
main{padding:52px 0 72px}
@media(max-width:640px){main{padding:36px 0 56px}}

/* ---- masthead --------------------------------------------------------- */
.masthead{border-bottom:1px solid var(--rule-2);background:var(--card)}
.masthead .wrap{display:flex;align-items:baseline;gap:32px;
                padding-top:20px;padding-bottom:20px;flex-wrap:wrap}
.wordmark{font-family:var(--sans);font-size:15px;font-weight:600;
          letter-spacing:.14em;text-transform:uppercase;color:var(--ink);
          text-decoration:none;white-space:nowrap}
.wordmark span{color:var(--ink-3);font-weight:400}
nav{margin-left:auto;display:flex;gap:26px;flex-wrap:wrap}
nav a{font-family:var(--sans);font-size:13.5px;color:var(--ink-2);
      text-decoration:none;padding-bottom:3px;border-bottom:2px solid transparent}
nav a:hover{color:var(--ink);border-bottom-color:var(--rule-2)}
nav a[aria-current]{color:var(--ink);font-weight:600;border-bottom-color:var(--ink)}

/* ---- type ------------------------------------------------------------- */
h1{font-size:34px;line-height:1.2;margin:0 0 14px;font-weight:600;letter-spacing:-.01em}
h2{font-family:var(--sans);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
   color:var(--ink-3);font-weight:600;margin:52px 0 18px;
   padding-bottom:9px;border-bottom:1px solid var(--ink)}
h3{font-size:19px;margin:0 0 6px;font-weight:600}
p{margin:0 0 16px;max-width:var(--text)}
.lede{font-size:19.5px;line-height:1.55;color:var(--ink-2);max-width:62ch;margin-bottom:26px}
a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--rule-2)}
a:hover{border-bottom-color:var(--accent);color:var(--accent)}
strong{font-weight:600}
.small{font-size:14.5px;color:var(--ink-2)}
.meta{font-family:var(--sans);font-size:12.5px;color:var(--ink-3);letter-spacing:.02em}
.mono{font-family:var(--mono);font-size:14px}

/* ---- status line ------------------------------------------------------ */
.status{display:flex;gap:10px;align-items:baseline;font-family:var(--sans);
        font-size:12.5px;color:var(--ink-2);margin-bottom:28px;flex-wrap:wrap}
.status b{color:var(--accent);font-size:10.5px;letter-spacing:.13em;
          text-transform:uppercase;font-weight:600}

/* ---- entries ---------------------------------------------------------- */
.entry{border-top:1px solid var(--rule);padding:22px 0}
.entry:first-of-type{border-top:1px solid var(--ink)}
.entry .top{display:flex;gap:16px;align-items:baseline;flex-wrap:wrap}
.entry .top time,.entry .top .where{font-family:var(--sans);font-size:12.5px;
                                    color:var(--ink-3);white-space:nowrap}
.entry p{margin:8px 0 0;font-size:16px;color:var(--ink-2)}
.entry .tags{margin-top:10px;font-family:var(--sans);font-size:11.5px;
             color:var(--ink-3);letter-spacing:.06em}
.entry .tags span::after{content:" · "}
.entry .tags span:last-child::after{content:""}

/* ---- feature ---------------------------------------------------------- */
.feature{border:1px solid var(--rule-2);background:var(--card);padding:26px 28px;margin:0 0 26px}
.feature h3{font-size:21px}
.feature .kicker{font-family:var(--sans);font-size:10.5px;letter-spacing:.15em;
                 text-transform:uppercase;color:var(--accent);font-weight:600;
                 margin-bottom:9px}
.feature p{max-width:70ch}

/* ---- keyboard focus --------------------------------------------------- */
/* Visible focus for anyone navigating by keyboard. focus-visible rather than
   focus, so it does not fire on mouse clicks. */
a:focus-visible,button:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--accent);outline-offset:3px;border-radius:1px}

/* Skip link: first thing a keyboard or screen reader user reaches, hidden
   until focused, so the nav can be stepped over on every page. */
.skip{position:absolute;left:-9999px;top:0;font-family:var(--sans);font-size:13px}
.skip:focus{left:8px;top:8px;z-index:10;background:var(--card);color:var(--ink);
            padding:8px 12px;border:1px solid var(--ink);text-decoration:none}

/* ---- link affordance -------------------------------------------------- */
/* A heading that is a link should say so without turning into a button.
   Slightly darker rule than body links, since headings carry more weight. */
h3 a{border-bottom-color:var(--ink-3)}
h3 a:hover{border-bottom-color:var(--accent)}
/* A heading link that leaves the site says so, quietly. */
h3 a.ext::after{content:" \2197";font-size:.78em;color:var(--ink-3);
                vertical-align:.15em}

/* The explicit route out of an entry. Text and arrows, not pills: the
   arrow does the work a button would, at a fraction of the visual cost.
   Internal links get a straight arrow, external ones a diagonal. */
.golinks{margin:12px 0 0;font-family:var(--sans);font-size:12.5px;
         display:flex;gap:22px;flex-wrap:wrap}
.golinks a{color:var(--ink-2);border-bottom:1px solid var(--rule-2)}
.golinks a::after{content:" \2192";color:var(--ink-3)}
.golinks a.ext::after{content:" \2197"}
.golinks a:hover,.golinks a:hover::after{color:var(--accent)}
.golinks a:hover{border-bottom-color:var(--accent)}

/* ---- callout ---------------------------------------------------------- */
.callout{border-left:2px solid var(--accent);padding:2px 0 2px 16px;margin:0 0 24px}
.callout p{margin:0;color:var(--ink-2)}
.callout p+p{margin-top:10px}

/* ---- tables ----------------------------------------------------------- */
table{width:100%;border-collapse:collapse;font-size:15px;margin:0 0 22px}
th{text-align:left;font-family:var(--sans);font-size:10px;letter-spacing:.13em;
   text-transform:uppercase;color:var(--ink-3);font-weight:600;
   padding:0 12px 9px 0;border-bottom:1px solid var(--ink)}
td{padding:10px 12px 10px 0;border-bottom:1px solid var(--rule);vertical-align:top}
td.num,th.num{text-align:right;font-family:var(--mono);font-size:13.5px;
              font-variant-numeric:tabular-nums;padding-right:0}
tr:last-child td{border-bottom:1px solid var(--rule-2)}
/* Wide numeric tables scroll rather than squashing the column widths. */
.tablewrap{overflow-x:auto;margin:0 0 22px}
.tablewrap table{margin:0;min-width:520px}

/* ---- two column ------------------------------------------------------- */
.cols{display:grid;grid-template-columns:1fr 1fr;gap:0 44px}
@media(max-width:800px){.cols{grid-template-columns:1fr}}
.cols-3{display:grid;grid-template-columns:repeat(3,1fr);gap:0 36px}
@media(max-width:800px){.cols-3{grid-template-columns:1fr}}

/* ---- cv --------------------------------------------------------------- */
.role{display:flex;gap:16px;align-items:baseline;flex-wrap:wrap;margin-bottom:4px}
.role h3{margin:0}
.role .org{color:var(--ink-2)}
.role .when{margin-left:auto;font-family:var(--sans);font-size:12.5px;
            color:var(--ink-3);white-space:nowrap}
ul.tight{margin:8px 0 0;padding-left:19px;max-width:var(--text)}
ul.tight li{margin-bottom:6px;color:var(--ink-2);font-size:16px}

/* ---- figures ---------------------------------------------------------- */
/* Plates from actual analysis, not decoration. Every one carries a caption
   and a source note, so the image is evidence rather than atmosphere. */
figure{margin:0 0 28px}
figure img{width:100%;height:auto;display:block;border:1px solid var(--rule-2)}
figcaption{font-family:var(--sans);font-size:12.5px;line-height:1.5;
           color:var(--ink-3);margin-top:9px;max-width:72ch}
figcaption b{color:var(--ink-2);font-weight:600}

/* ---- inline charts ----------------------------------------------------
   Figures drawn in SVG rather than exported as images: they stay sharp,
   cost no request, and take their colours from the palette above. */
.chart{margin:26px 0 28px}
.chart svg{width:100%;height:auto;display:block;overflow:visible}
.chart .axis{stroke:var(--ink);stroke-width:1}
.chart .gain{fill:var(--accent)}
.chart .loss{fill:var(--ink-3)}
.chart .lab{font-family:var(--sans);font-size:14px;fill:var(--ink-2)}
.chart .lab.end{text-anchor:end}
.chart .cap{font-family:var(--sans);font-size:13px;fill:var(--ink-3);
            font-style:italic}
@media(max-width:640px){
  .chart .lab{font-size:16px}
  .chart .cap{font-size:15px}
}

/* ---- embed ------------------------------------------------------------ */
.bleed{margin:0 0 14px}
.bleed iframe{width:100%;height:1180px;border:1px solid var(--rule-2);
              background:var(--card);display:block}
@media(max-width:1150px){.bleed iframe{height:1600px}}
.embed-note{font-family:var(--sans);font-size:12.5px;color:var(--ink-3);
            margin-bottom:34px}

/* ---- footer ----------------------------------------------------------- */
footer{border-top:1px solid var(--rule-2);background:var(--card);
       padding:26px 0 34px;font-family:var(--sans);font-size:13px;color:var(--ink-3)}
footer .wrap{display:flex;gap:24px;flex-wrap:wrap;align-items:baseline}
footer a{color:var(--ink-2);border-bottom-color:var(--rule)}
footer .right{margin-left:auto}