/* objectvision.nl — direction A, "Raster".
   Built from the thing the models actually compute on. The palette comes from Dutch
   land-use cartography: brick for built-up, moss for nature, wheat for agriculture, water
   blue. Strict modular grid, hairline rules, technical numerals in the margin. */

:root{
  --ground:#f1f4f2;
  --sheet:#e7ece9;
  --ink:#141f1b;
  --mut:#5a6b64;
  --line:#ccd6d1;

  /* Object Vision's own colour, from the folded map in the logo (#fdc070). Straight out of
     the logo it has a contrast of 1.5 against this paper, so it works as a fill and not as a
     letter. Hence two tones along the same hue, each doing what it can carry.

     --gold is the wordmark and the one accented word in the hero heading. Contrast 2.3, which
     is fine for a logotype (exempt) and generous for a word set at 50 pixels.
     --accent is everything that is actually read: links, list markers, labels. Contrast 5.7,
     comfortably past the 4.5 that small text needs. */
  --gold:#e08f10;
  --accent:#8d5102;

  /* The land-use classes. Cartography rather than branding: brick is what built-up is on a
     Dutch land-use map, and the diagrams use these for that. Not interchangeable with the
     accent above, which is why they are separate now. */
  --urban:#b4472f;
  --nature:#4a7a4e;
  --agri:#cbb069;
  --water:#2e6b8a;

  --measure:66ch;
  color-scheme:light;   /* deliberate: one visual world, in any system theme */
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",sans-serif;
  font-size:17px; line-height:1.6;
  font-kerning:normal; text-rendering:optimizeLegibility;
}
.wrap{ max-width:78rem; margin:0 auto; padding:0 2rem; }

/* clipped rather than pushed off-screen, so it can never widen the page */
.skip{ position:absolute; width:1px; height:1px; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap; }
.skip:focus{ width:auto; height:auto; clip-path:none; left:1rem; top:1rem;
  background:var(--ink); color:var(--ground); padding:.5rem .9rem; z-index:10; }

/* ---------- masthead ---------- */
.masthead{ border-bottom:1px solid var(--line); }
.masthead-inner{ display:flex; align-items:baseline; gap:2rem; padding:1.4rem 2rem;
  flex-wrap:wrap; }
.logo{ font-size:1.05rem; font-weight:700; letter-spacing:-.03em; color:var(--ink);
  text-decoration:none; margin-right:auto; }
.logo:hover{ color:var(--accent); }

.nav{ display:flex; gap:1.5rem; align-items:baseline; flex-wrap:wrap; }
.nav a{ color:var(--mut); text-decoration:none; font-size:.87rem; padding-bottom:.15rem;
  border-bottom:1.5px solid transparent; }
.nav a:hover,.nav a:focus-visible{ color:var(--accent); border-bottom-color:var(--accent); }
.nav a.on{ color:var(--ink); border-bottom-color:var(--ink); }

/* The submenu sits a little below its parent. That gap has to belong to the hoverable area,
   otherwise the menu closes the moment the pointer crosses it on the way down. The short
   visibility delay forgives a diagonal mouse path along the edge. */
.nav-group{ position:relative; padding-bottom:.6rem; margin-bottom:-.6rem; }
.nav-drop{ position:absolute; left:0; top:100%; background:#fff;
  border:1px solid var(--line); padding:.4rem 0; min-width:17rem; z-index:5;
  visibility:hidden; opacity:0;
  transition:visibility 0s linear .2s, opacity .12s ease; }
.nav-group:hover .nav-drop,.nav-group:focus-within .nav-drop{
  visibility:visible; opacity:1; transition-delay:0s; }
/* the right-most group opens to the left, otherwise its panel runs off the page */
.nav-group:last-of-type .nav-drop{ left:auto; right:0; }
.nav-drop a{ display:block; padding:.4rem 1rem; font-size:.87rem; border-bottom:none; }
.nav-drop a:hover{ background:var(--sheet); }

/* ---------- sheet: margin column + measure ---------- */
main{ padding:0 0 4rem; overflow-x:clip; position:relative; }
main > .wrap{ position:relative; z-index:1; }
.sheet{ display:grid; grid-template-columns:12rem minmax(0,1fr); gap:3rem;
  position:relative; padding-top:3.2rem; }

/* the margin column reads as an instrument panel: mono, tabular, hairline separated */
.margin-note{ font-family:Consolas,"Cascadia Mono","SF Mono",Menlo,monospace;
  font-size:.74rem; color:var(--mut); line-height:1.45;
  border-top:1px solid var(--ink); padding-top:.8rem; }
.margin-note div{ position:relative; padding:0 0 .85rem 0; }
.margin-note div:last-child{ padding-bottom:0; }
.margin-note b{ display:block; color:var(--accent); font-weight:400; font-size:.78rem;
  letter-spacing:.04em; font-variant-numeric:tabular-nums; margin-bottom:.15rem; }
.measure{ max-width:var(--measure); position:relative; }

h1{ font-size:clamp(2rem,4.4vw,3.1rem); line-height:1.03; font-weight:700;
  letter-spacing:-.04em; margin:0 0 .7rem; text-wrap:balance; }
.tagline{ font-size:1.08rem; color:var(--mut); margin:0 0 1.3rem; }
.tagline:empty{ display:none; }
.rule{ height:1px; background:var(--line); margin:0 0 1.8rem; }

/* ---------- the raster on the home page ---------- */
/* The hero figure carries its own labels and its own animation, from css inside the svg. */
.hero-figure{ margin:0; }
.hero-figure img{ display:block; width:100%; height:auto; max-width:34rem;
  margin-left:auto; margin-right:auto; }

/* ---------- prose ---------- */
.prose > *:first-child{ margin-top:0; }
.prose p,.prose ul,.prose ol{ margin:0 0 1.15rem; }
.prose h2{ font-size:1.32rem; font-weight:700; letter-spacing:-.02em; margin:2.5rem 0 .8rem;
  padding-top:.9rem; border-top:1px solid var(--ink); text-wrap:balance; }
.prose h3{ font-family:Consolas,"Cascadia Mono",monospace; font-size:.76rem;
  letter-spacing:.08em; text-transform:uppercase; color:var(--accent); font-weight:400;
  margin:1.9rem 0 .5rem; }
.prose a{ color:var(--accent); text-decoration:none; border-bottom:1px solid var(--line); }
.prose a:hover,.prose a:focus-visible{ border-bottom-color:var(--accent); }
.prose strong{ font-weight:600; }
.prose ul,.prose ol{ padding-left:1.15rem; }
.prose li{ margin-bottom:.45rem; }
.prose li::marker{ color:var(--accent); }
.prose blockquote{ margin:1.4rem 0; padding-left:1.1rem; border-left:2px solid var(--accent);
  color:var(--mut); }
.prose code{ font-family:Consolas,"SF Mono",Menlo,monospace; font-size:.88em;
  background:var(--sheet); padding:.1em .35em; }
.prose img{ max-width:100%; height:auto; display:block; margin:1.6rem 0;
  border:1px solid var(--line); }
.prose figure{ margin:1.6rem 0; }
.prose figure img{ margin:0; }
.prose figcaption{ font-family:Consolas,"Cascadia Mono",monospace; font-size:.72rem;
  color:var(--mut); padding-top:.5rem; }
.prose hr{ border:none; border-top:1px solid var(--ink); margin:2.2rem 0; }

.prose table{ width:100%; border-collapse:collapse; margin:1.5rem 0; font-size:.92rem;
  font-variant-numeric:tabular-nums; }
.prose thead th{ text-align:left; font-family:Consolas,"Cascadia Mono",monospace;
  font-size:.7rem; letter-spacing:.07em; text-transform:uppercase; color:var(--mut);
  font-weight:400; border-bottom:1px solid var(--ink); padding:.5rem .8rem .5rem 0; }
.prose td{ border-bottom:1px solid var(--line); padding:.6rem .8rem .6rem 0;
  vertical-align:top; }
.prose td:last-child,.prose th:last-child{ padding-right:0; }
.table-scroll{ overflow-x:auto; }

/* ---------- footer ---------- */
.foot{ border-top:1px solid var(--ink); margin-top:2rem; }
.foot-inner{ display:grid; grid-template-columns:repeat(4,1fr); gap:2rem;
  padding:2.2rem 2rem 3rem; font-size:.85rem; color:var(--mut); line-height:1.6; }
.foot a{ color:var(--mut); text-decoration:none; border-bottom:1px solid var(--line); }
.foot a:hover{ color:var(--accent); border-bottom-color:var(--accent); }
.foot strong{ color:var(--ink); font-weight:600; }
.colophon{ font-family:Consolas,"Cascadia Mono",monospace; font-size:.72rem; }

/* ---------- home ---------- */
body.home h1{ font-size:clamp(2.2rem,5vw,3.5rem); max-width:18ch; }
body.home .tagline{ font-size:1.18rem; }

@media (max-width:900px){
  .sheet{ grid-template-columns:1fr; gap:1.6rem; padding-top:2.2rem; }
  .margin-note{ display:flex; gap:1.8rem; flex-wrap:wrap; }
  .margin-note div{ padding-bottom:0; }
  .foot-inner{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:560px){
  body{ font-size:16px; }
  .wrap{ padding-left:1.25rem; padding-right:1.25rem; }
  .masthead-inner{ padding:1.1rem 1.25rem; }
  .nav{ gap:1rem; }
  .foot-inner{ grid-template-columns:1fr; padding:1.8rem 1.25rem 2.4rem; }
  /* the submenu would make the header 400px tall on a phone; the section index at
     /what-we-do/ lists the same pages, so the top-level link is enough here */
  .nav-drop{ display:none; }
  .nav-group{ padding-bottom:0; margin-bottom:0; }
}
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
}

/* ---------- client band ---------- */
/* Names, not logos: every client logo needs permission, and the UN and EU emblems are
   protected outright. A typographic band also sits better with the rest of the page. */
.clients{ border-top:1px solid var(--ink); background:var(--sheet); }
.clients .wrap{ padding-top:1.8rem; padding-bottom:2.2rem; }
.clients-label{ font-family:Consolas,"Cascadia Mono",monospace; font-size:.7rem;
  letter-spacing:.09em; text-transform:uppercase; color:var(--accent); margin:0 0 1.2rem; }
.client-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line); }
.client{ background:var(--sheet); padding:.9rem 1rem 1rem; display:flex;
  flex-direction:column; gap:.35rem; }
.cn{ font-size:.95rem; font-weight:600; line-height:1.25; letter-spacing:-.01em; }
.cd{ font-family:Consolas,"Cascadia Mono",monospace; font-size:.68rem; color:var(--mut);
  line-height:1.4; }

@media (max-width:900px){
  .client-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:560px){
  .client-grid{ grid-template-columns:1fr; }
  .clients .wrap{ padding-bottom:1.6rem; }
}

/* Diagrams get more room than the text column: they reach into the margin column on the
   left, which is empty next to them anyway. Below the breakpoint the columns collapse and
   the image simply fills the width. */
.prose img.wide{ max-width:none; width:calc(100% + 15rem); margin-left:-15rem; }
.prose img.wide + p em{ display:block; max-width:var(--measure); }
@media (max-width:900px){
  .prose img.wide{ width:100%; margin-left:0; }
}

/* ---------- home: hero, cards ---------- */
.logo span{ color:var(--gold); }

.hero{ display:grid; grid-template-columns:1fr 1fr; gap:3.5rem; align-items:center;
  padding-top:4rem; padding-bottom:3.5rem; }
.hero h1{ font-size:clamp(2.2rem,4.6vw,3.4rem); line-height:1.02; letter-spacing:-.045em;
  margin:0 0 1.1rem; max-width:14ch; }
.hero h1 em{ font-style:normal; color:var(--gold); }
.hero .lead{ font-size:1.05rem; color:var(--mut); margin:0 0 1.8rem; max-width:44ch;
  line-height:1.55; }
.cta{ display:flex; gap:.7rem; flex-wrap:wrap; }
.btn{ display:inline-block; padding:.65rem 1.2rem; font-size:.92rem; text-decoration:none;
  border:1px solid var(--ink); color:var(--ink); }
.btn.solid{ background:var(--ink); color:var(--ground); }
.btn:hover,.btn:focus-visible{ background:var(--accent); border-color:var(--accent); color:#fff; }

.hero-raster{ min-width:0; }

/* six domains, on the modular grid */
.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.card{ background:var(--ground); padding:1.5rem 1.6rem 1.8rem; text-decoration:none;
  display:flex; flex-direction:column; gap:.45rem; }
.card:hover{ background:var(--sheet); }
/* the label above each card is 11px mono. A warm colour at that size turns muddy, and
   there are six of them in a row, so it reads as a stain rather than as an accent. Neutral. */
.card-n{ font-family:Consolas,"Cascadia Mono",monospace; font-size:.7rem; color:var(--mut);
  letter-spacing:.07em; }
.card-h{ font-size:1.05rem; font-weight:600; letter-spacing:-.02em; color:var(--ink); }
.card-t{ font-size:.9rem; color:var(--mut); line-height:1.5; }

.home-prose{ max-width:var(--measure); padding:3rem 0 1rem; }

@media (max-width:900px){
  .hero{ grid-template-columns:1fr; gap:2rem; padding-top:2.5rem; }
  .hero h1{ max-width:18ch; }
  .cards{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:560px){
  .cards{ grid-template-columns:1fr; }
}

/* Pages without a margin column are a single column: repeating the same timeline everywhere
   is noise, and an empty third of the width looks like a mistake rather than a choice. */
.sheet.nomargin{ grid-template-columns:minmax(0,1fr); }
.sheet.nomargin .margin-col{ display:none; }
.sheet.nomargin .measure{ max-width:72ch; }
.sheet.nomargin .prose img.wide{ width:100%; margin-left:0; }

/* The paragraph under the six cards sat alone at the far left with two thirds empty.
   It now shares the same three column grid the cards use. */
.home-prose{ max-width:none; display:grid; grid-template-columns:repeat(3,1fr); gap:3rem;
  padding:3rem 0 1rem; }
.home-prose .prose{ grid-column:span 2; }
.home-note{ font-family:Consolas,"Cascadia Mono",monospace; font-size:.74rem; color:var(--mut);
  line-height:1.6; border-top:1px solid var(--ink); padding-top:.8rem; }
.home-note a{ color:var(--accent); text-decoration:none; border-bottom:1px solid var(--line); }
@media (max-width:900px){
  .home-prose{ grid-template-columns:1fr; gap:1.6rem; }
  .home-prose .prose{ grid-column:auto; }
}

/* ---------- news ---------- */
/* The list is generated from the files in content/news/, so an item is added by adding a
   file. The date column is mono and tabular, like the margin timeline it echoes. */
.news-list{ border-top:1px solid var(--ink); margin:1.6rem 0 0; }
.news-item{ display:grid; grid-template-columns:9rem minmax(0,1fr); gap:1.5rem;
  padding:1.1rem 0 1.2rem; border-bottom:1px solid var(--line); text-decoration:none;
  color:inherit; align-items:baseline; }
.news-item:hover{ background:var(--sheet); }
.news-date{ font-family:Consolas,"Cascadia Mono",monospace; font-size:.72rem;
  color:var(--accent); letter-spacing:.04em; font-variant-numeric:tabular-nums; }
.news-title{ font-size:1.05rem; font-weight:600; letter-spacing:-.02em; line-height:1.3;
  text-wrap:balance; }
.news-blurb{ grid-column:2; font-size:.9rem; color:var(--mut); line-height:1.5;
  max-width:60ch; padding-top:.3rem; }
.news-stamp{ font-family:Consolas,"Cascadia Mono",monospace; font-size:.72rem;
  color:var(--accent); letter-spacing:.04em; margin:0 0 1.4rem; }
@media (max-width:560px){
  .news-item{ grid-template-columns:1fr; gap:.3rem; }
  .news-blurb{ grid-column:auto; }
}

/* the three most recent items, at the foot of the home page */
.latest{ border-top:1px solid var(--ink); }
.latest .wrap{ padding-top:1.8rem; padding-bottom:2.4rem; }
.latest .news-list{ border-top:none; margin:0; }
.latest .news-item:first-child{ border-top:1px solid var(--line); }
.latest-more{ font-family:Consolas,"Cascadia Mono",monospace; font-size:.72rem;
  letter-spacing:.04em; margin:1rem 0 0; }
.latest-more a{ color:var(--accent); text-decoration:none;
  border-bottom:1px solid var(--line); }
.latest-more a:hover{ border-bottom-color:var(--accent); }