/* ------------------------------------------------------------------ tokens
   Every colour, measure and rhythm value lives here. Nothing below invents
   its own number: the layout bug this file used to have — a container and a
   content column set to two different widths — was only possible because the
   same measure was written out twice.

   Sizes are in rem, against the browser's own base (16px by default). A
   visitor who raises the font size in their browser settings gets a site
   that grows with it; px would silently ignore that preference, and it is
   not a rare one — low vision, large screens read from a distance, anyone
   who set it once and forgot. There is deliberately no `html{font-size:62.5%}`
   trick: it makes 1rem a round 10px at the cost of overriding the very
   preference this is meant to respect.

   px stays for details that must not scale with text: hairlines, 1px
   borders, small radii, the hero's accent rule. A border that grows with the
   font size just looks heavy. */
:root{
  /* palette */
  --ink:#1B2A41;
  --ink-deep:#12161F;
  --petrol:#2E8B7A;
  --paper:#FAF9F6;
  --stone:#8A9099;
  --slate:#5A6472;
  --rule:#E0DDD5;
  --white:#FFFFFF;
  --hero-text:#A8B2C0;
  --footer-text:#6B7684;

  /* type — 1rem is the visitor's base, normally 16px */
  --serif:'Source Serif 4',Georgia,serif;
  --sans:'IBM Plex Sans',system-ui,-apple-system,sans-serif;
  --text:1.25rem;      /* 20px */
  --text-sm:1.0625rem; /* 17px */
  --text-xs:0.875rem;  /* 14px */
  --leading:1.65;

  /* display */
  --h1:2.625rem;       /* 42px */
  --h2:1.75rem;        /* 28px */
  --h3:1.25rem;        /* 20px */

  /* width — fluid, not a fixed container.
     This mirrors Bootstrap's `col-lg-8 mx-auto p-4` starter template, which
     is what a conventional corporate site does: the column is a percentage
     of the viewport above the lg breakpoint, and the full width minus a
     gutter below it. Nothing is a fixed pixel container, so the page keeps
     using the screen it is given instead of stopping at a magic number.
     Structure and content share these values, so every edge lines up.

     The cap is in rem on purpose: with a larger base font the column grows
     too, which keeps the characters per line constant rather than letting
     big text run short. */
  --column:66.667%;      /* col-lg-8 */
  --column-max:71.25rem; /* 1140px at the default base */
  --gutter:1.5rem;       /* 24px, p-4 */

  /* rhythm */
  --gap-section:3.25rem; /* 52px */
  --gap-heading:2rem;    /* 32px */
  --gap-text:0.875rem;   /* 14px */
  --hairline:0.5px;
}

/* ------------------------------------------------------------------- reset
   A modern baseline, not a framework: predictable sizing, no surprise
   margins, media that cannot overflow its column, and form controls that
   inherit the page's typography instead of the operating system's. */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--sans);
  background:var(--paper);
  color:var(--ink);
  font-size:var(--text);
  line-height:var(--leading);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,picture,svg,video{display:block;max-width:100%;height:auto}
input,button,textarea,select{font:inherit;color:inherit}
button{background:none;border:none}
h1,h2,h3{text-wrap:balance}
p,li{text-wrap:pretty}
ul[class],ol[class]{list-style:none}
a{color:inherit}

/* The single container. .prose carries it too rather than nesting inside a
   .wrap, which would apply the gutter twice. */
.wrap,.prose{width:var(--column);max-width:var(--column-max);margin-inline:auto;padding-inline:var(--gutter)}

/* Below lg the column is the whole screen, gutters aside — a percentage of a
   phone is unusably narrow. This is the one breakpoint that matters, and it
   is in em so it moves with the font size like everything else. */
@media(max-width:61.99em){
  .wrap,.prose{width:100%}
}

/* ---------------------------------------------------------------- topbar */
.topbar{border-bottom:var(--hairline) solid var(--rule);background:var(--paper)}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:0.75rem;padding-block:1.125rem}
.brand{display:flex;align-items:center;gap:0.75rem;text-decoration:none;color:inherit;min-width:0}
/* em, not px: the tracking follows whatever size the monogram is set at. */
.mono{font-family:var(--serif);font-weight:600;letter-spacing:0.09em;color:var(--ink)}
.topbar .mono{font-size:1.5rem}
.topbar .div{width:1px;height:1.75rem;background:var(--petrol);flex-shrink:0}
.topbar .desc{font-size:var(--text-xs);color:var(--slate);white-space:nowrap}
.nav{display:flex;align-items:center;gap:1rem;min-width:0}
.nav .div{width:1px;height:0.875rem;background:var(--rule);flex-shrink:0}
.nav a{font-size:var(--text-xs);color:var(--ink);text-decoration:none;border-bottom:1px solid transparent;white-space:nowrap}
.nav a:hover{border-bottom-color:var(--petrol)}
/* Two letters, not a flag: a flag names a country, and neither locale here
   belongs to one — Portuguese is also Brazil, English is not only the UK. */
.lang{font-size:var(--text-xs);font-weight:500;letter-spacing:0.04em;color:var(--petrol);
  text-decoration:none;border-bottom:1px solid transparent;white-space:nowrap}
.lang:hover{border-bottom-color:var(--petrol)}

/* ------------------------------------------------------------------ hero */
.hero{background:var(--ink);color:var(--paper);padding:4rem 0 3.75rem}
.hero .rule{width:34px;height:2px;background:var(--petrol);margin-bottom:1.375rem}
/* The headline is deliberately narrower than the measure: a display line
   wants to break early, into two or three lines, not run the full column. */
.hero h1{font-family:var(--serif);font-weight:400;font-size:var(--h1);line-height:1.2;letter-spacing:-0.01em;max-width:20ch}
.hero p{margin-top:1.125rem;color:var(--hero-text);font-size:var(--text)}

/* ----------------------------------------------------------------- prose */
.prose{padding-top:0.375rem;padding-bottom:1.25rem}
.prose h2{font-family:var(--serif);font-weight:600;font-size:var(--h2);line-height:1.3;margin:var(--gap-section) 0 0.375rem}
.prose h2:first-child{margin-top:2.875rem}
.prose h3{font-family:var(--serif);font-weight:600;font-size:var(--h3);margin:var(--gap-heading) 0 0.75rem}
.prose p{margin-top:var(--gap-text)}
.prose p.lede{color:var(--slate);font-size:var(--text-sm)}
.prose strong{font-weight:600}
.prose a{color:var(--petrol);text-decoration:none;border-bottom:1px solid rgb(46 139 122 / .4)}
.prose a:hover{border-bottom-color:var(--petrol)}
.prose em{font-style:italic}

/* section separator */
.prose hr{border:none;border-top:var(--hairline) solid var(--rule);margin:var(--gap-section) 0 0}

/* lists — the marker is positioned in em so it tracks the text it belongs to */
.prose ul{list-style:none;margin-top:1rem}
.prose ul li{position:relative;padding-left:1.25rem;margin-bottom:0.625rem}
.prose ul li::before{content:'';position:absolute;left:0;top:0.8em;width:0.5rem;height:1px;background:var(--petrol)}
.prose ol{list-style:none;counter-reset:s;margin-top:1.125rem}
.prose ol li{counter-increment:s;position:relative;padding-left:2.375rem;margin-bottom:var(--gap-text)}
.prose ol li::before{
  content:counter(s);position:absolute;left:0;top:0.1em;
  width:1.5rem;height:1.5rem;border:1px solid var(--petrol);border-radius:50%;
  color:var(--petrol);font-size:0.75rem;font-weight:500;
  display:flex;align-items:center;justify-content:center;
}

/* blockquote -> feature box */
.prose blockquote{
  background:var(--white);border:var(--hairline) solid var(--rule);border-left:2px solid var(--petrol);
  padding:1.25rem 1.5rem;margin-top:1.5rem;
}
.prose blockquote p{margin-top:0}
.prose blockquote p + p{margin-top:0.75rem;font-size:var(--text-sm);color:var(--slate)}

/* tables */
.prose table{width:100%;border-collapse:collapse;font-size:var(--text-sm);min-width:26rem;margin-top:1.25rem}
.prose th{
  text-align:left;font-weight:500;font-size:var(--text-xs);color:var(--slate);
  padding:0 0.875rem 0.5625rem 0;border-bottom:1.5px solid var(--ink);
}
.prose th:last-child,.prose td:last-child{padding-right:0;white-space:nowrap}
.prose td{padding:0.75rem 0.875rem 0.75rem 0;border-bottom:var(--hairline) solid var(--rule);vertical-align:top}
.prose tr:last-child td{border-bottom:none}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* --------------------------------------------------------------- contact */
.contact{margin-top:var(--gap-section);padding-top:2.75rem;border-top:var(--hairline) solid var(--rule);padding-bottom:0.75rem}
.contact h2{font-family:var(--serif);font-weight:600;font-size:var(--h2);margin-bottom:0.375rem}
.contact .lede{color:var(--slate);font-size:var(--text-sm);margin-bottom:1.5rem}
.actions{display:flex;gap:0.625rem;flex-wrap:wrap}
/* Button padding is em so the box grows with its own label. */
.btn{
  font-family:var(--sans);font-size:0.9375rem;line-height:1;
  padding:0.85em 1.35em;border-radius:3px;cursor:pointer;text-decoration:none;
  border:1px solid var(--ink);background:transparent;color:var(--ink);
}
.btn:hover{background:var(--ink);color:var(--paper)}
.btn-accent{border-color:var(--petrol);color:var(--petrol);display:inline-block}
.btn-accent:hover{background:var(--petrol);color:var(--paper)}

/* ---------------------------------------------------------------- footer */
footer{background:var(--ink-deep);color:var(--paper);padding:2.5rem 0;margin-top:3.5rem}
footer .foot-top{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
footer .foot-nav{display:flex;gap:1.125rem;flex-wrap:wrap}
footer .foot-nav a{font-size:var(--text-xs);color:var(--paper);text-decoration:none;border-bottom:1px solid transparent}
footer .foot-nav a:hover{border-bottom-color:var(--petrol)}
/* Brand rule: the monogram never stands alone and never renders below 24px. */
footer .foot-brand{display:flex;align-items:center;gap:0.6rem;min-width:0}
footer .foot-brand .div{width:1px;height:1.4rem;background:var(--petrol);flex-shrink:0}
footer .foot-brand .desc{font-size:var(--text-xs);color:var(--stone);white-space:nowrap}
footer .mono{font-size:1.5rem;color:var(--paper);line-height:1}
footer p{color:var(--footer-text);font-size:var(--text-xs);margin-top:0.75rem}
footer a{color:var(--petrol);text-decoration:none}

a:focus-visible,button:focus-visible{outline:2px solid var(--petrol);outline-offset:3px}

/* Breakpoints narrow the gutter and the type scale. The width needs no
   override beyond the lg rule above, since the column is already fluid.
   In em, so they move with the font size rather than firing at the wrong
   place for someone reading at 20px. */
@media(max-width:40em){
  :root{
    --gutter:1.375rem;
    --gap-section:2.625rem;
    --text:1.125rem;  /* 18px */
    --h1:1.75rem;     /* 28px */
    --h2:1.375rem;    /* 22px */
  }
  .topbar .desc{display:none}
  /* With .desc hidden the monogram's rule has nothing to separate. */
  .topbar .brand .div{display:none}
  .hero{padding:2.875rem 0 2.625rem}
  .nav{gap:0.75rem}
  .actions{flex-direction:column;align-items:stretch}
  .btn{text-align:center}
  footer .foot-top{flex-direction:column;align-items:flex-start;gap:0.875rem}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important;animation:none!important}
}