/* ------------------------------------------------------------------
   Juan S. Gómez-Cruces — consultancy site
   v5 "Petrol & ochre": ruled grid, petrol-blue accent, one inverted block.
   Light and dark themes, both defined as tokens. Three states are handled:
   no stamp + light OS, no stamp + dark OS (media query), and an explicit
   choice stamped on <html data-theme="light|dark"> by the toggle, which
   remembers itself in localStorage.
   German version: copy this file to /de/index.html, translate, and
   enable the DE link in the nav (marked below).
------------------------------------------------------------------- */
:root{
  --paper:#FCFCFB;
  --panel:#E9EDEC;
  --ink:#101A1C;
  --ink-mut:#54646A;
  --rule:rgba(16,26,28,.17);
  --rule-soft:rgba(16,26,28,.10);
  --petrol:#0E5A6B;
  --petrol-dk:#0A4351;
  --aqua:#5CCFC2;
  --ochre:#8A5A12;

  /* inverted contact block */
  --inv-bg:#101A1C;
  --inv-fg:#EDF2F2;
  --inv-mut:#9DAFB2;
  --inv-line:rgba(237,242,242,.28);
  --inv-accent:#5CCFC2;

  /* Fig. 1 */
  --c-line:rgba(16,26,28,.30);
  --c-text:rgba(84,100,106,.95);
  --c-fill-a:rgba(14,90,107,.32);
  --c-fill-mid:rgba(14,90,107,.06);
  --c-fill-b:rgba(181,118,27,.30);
  --c-curve:#0E5A6B;
  --c-dot:rgba(16,26,28,.45);

  --display:'Schibsted Grotesk','Helvetica Neue',Arial,sans-serif;
  --mono:'Martian Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;

  --wrap:1220px;
  --pad:clamp(18px,4.5vw,56px);
  --gut:132px;             /* left gutter that carries the mono labels */
}

/* ---- dark theme: same tokens, re-valued ---- */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#0E1517;
    --panel:#16201F;
    --ink:#E7EDEC;
    --ink-mut:#9AA9AC;
    --rule:rgba(231,237,236,.20);
    --rule-soft:rgba(231,237,236,.11);
    --petrol:#63C6D6;
    --petrol-dk:#8FDCE8;
    --aqua:#7FE3D6;
    --ochre:#D9A441;
    --inv-bg:#0B3B47;
    --inv-fg:#EAF5F6;
    --inv-mut:#A9C6CB;
    --inv-line:rgba(234,245,246,.30);
    --inv-accent:#7FE3D6;
    --c-line:rgba(231,237,236,.28);
    --c-text:rgba(154,169,172,.95);
    --c-fill-a:rgba(99,198,214,.30);
    --c-fill-mid:rgba(99,198,214,.05);
    --c-fill-b:rgba(217,164,65,.28);
    --c-curve:#7BD3E2;
    --c-dot:rgba(231,237,236,.42);
  }
}
:root[data-theme="dark"]{
  --paper:#0E1517;
  --panel:#16201F;
  --ink:#E7EDEC;
  --ink-mut:#9AA9AC;
  --rule:rgba(231,237,236,.20);
  --rule-soft:rgba(231,237,236,.11);
  --petrol:#63C6D6;
  --petrol-dk:#8FDCE8;
  --aqua:#7FE3D6;
  --ochre:#D9A441;
  --inv-bg:#0B3B47;
  --inv-fg:#EAF5F6;
  --inv-mut:#A9C6CB;
  --inv-line:rgba(234,245,246,.30);
  --inv-accent:#7FE3D6;
  --c-line:rgba(231,237,236,.28);
  --c-text:rgba(154,169,172,.95);
  --c-fill-a:rgba(99,198,214,.30);
  --c-fill-mid:rgba(99,198,214,.05);
  --c-fill-b:rgba(217,164,65,.28);
  --c-curve:#7BD3E2;
  --c-dot:rgba(231,237,236,.42);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--display);
  font-weight:400;
  font-size:17px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{margin:0;font-weight:700;letter-spacing:-.022em;line-height:1.03;text-wrap:balance}
p{margin:0}
a{color:inherit}
em{font-style:normal}
::selection{background:var(--aqua);color:var(--ink)}
:focus-visible{outline:2px solid var(--petrol);outline-offset:3px}

.wrap{max-width:var(--wrap);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.band{border-top:1px solid var(--rule)}
.lab{font-family:var(--mono);font-size:10px;font-weight:400;letter-spacing:.04em;text-transform:uppercase;line-height:1.5}

/* ---------- masthead ---------- */
.mast{position:sticky;top:0;z-index:30;background:var(--paper);border-bottom:1px solid var(--rule)}
.mast .row{display:flex;align-items:center;justify-content:space-between;gap:18px;height:58px}
.mast .name{font-weight:800;font-size:15px;letter-spacing:-.02em;text-decoration:none}
.mast .name span{color:var(--petrol)}
.mast nav{display:flex;align-items:center;gap:22px}
.mast nav a{text-decoration:none;color:var(--ink-mut);font-family:var(--mono);font-size:10px;letter-spacing:.04em;text-transform:uppercase;transition:color .16s}
.mast nav a:hover{color:var(--petrol)}
.mast .go{color:var(--paper);background:var(--petrol);padding:8px 13px;border-radius:1px}
.themeBtn{display:inline-flex;align-items:center;gap:7px;background:none;border:1px solid var(--rule);color:var(--ink-mut);
  font-family:var(--mono);font-size:10px;letter-spacing:.04em;text-transform:uppercase;padding:7px 11px;border-radius:1px;
  cursor:pointer;transition:color .16s,border-color .16s}
.themeBtn:hover{color:var(--petrol);border-color:var(--petrol)}
.themeBtn svg{width:12px;height:12px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
.themeBtn .sun{display:none}
:root[data-theme="dark"] .themeBtn .sun{display:block}
:root[data-theme="dark"] .themeBtn .moon{display:none}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .themeBtn .sun{display:block}
  :root:not([data-theme="light"]) .themeBtn .moon{display:none}
}
.mast .go:hover{background:var(--petrol-dk);color:var(--paper)}
@media(max-width:860px){.mast nav a:not(.go){display:none}}

/* ---------- hero ---------- */
.hero{padding:clamp(34px,5vw,62px) 0 0}
.meta{display:flex;flex-wrap:wrap;gap:6px 26px;color:var(--ink-mut);padding-bottom:clamp(26px,4vw,40px)}
h1{font-size:clamp(32px,5.1vw,66px);font-weight:800;letter-spacing:-.032em}
h1 em{color:var(--petrol)}
.heroGrid{display:grid;grid-template-columns:1fr minmax(300px,420px);gap:clamp(26px,4vw,58px);align-items:end;padding-bottom:clamp(30px,4vw,46px);margin-top:clamp(24px,3vw,38px)}
@media(max-width:900px){.heroGrid{grid-template-columns:1fr;align-items:start;gap:26px}}
.index{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink);max-width:520px;align-self:end}
.index li{display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);gap:6px 20px;align-items:baseline;padding:11px 0;border-bottom:1px solid var(--rule-soft)}
@media(max-width:620px){.index li{grid-template-columns:1fr;gap:3px}}
.index a{color:var(--ink);text-decoration:none;transition:color .16s}
.index a:hover{color:var(--petrol)}
.index span{color:var(--ink-mut);font-family:var(--display);font-size:13.5px;letter-spacing:0;text-transform:none;line-height:1.35}
.lede{font-size:clamp(15.5px,1.4vw,17px);color:var(--ink-mut);max-width:46ch}
.lede strong{color:var(--ink);font-weight:500}
.cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.btn{display:inline-flex;align-items:center;gap:9px;text-decoration:none;font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;text-transform:uppercase;padding:13px 18px;border-radius:1px;transition:background .16s,color .16s,border-color .16s}
.btn.solid{background:var(--ink);color:var(--paper)}
.btn.solid:hover{background:var(--petrol)}
.btn.line{border:1px solid var(--rule);color:var(--ink)}
.btn.line:hover{border-color:var(--petrol);color:var(--petrol)}

/* ---------- figure plate ---------- */
.plate{background:var(--panel);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.plate .inner{display:grid;grid-template-columns:var(--gut) 1fr;gap:0 26px;padding:20px 0 16px}
@media(max-width:820px){.plate .inner{grid-template-columns:1fr;gap:12px}}
.plate .cap{color:var(--ink-mut)}
.plate .cap b{display:block;color:var(--ink);font-weight:500;margin-bottom:6px}
.plate canvas{display:block;width:100%;height:180px}

/* ---------- section scaffolding ---------- */
section{padding:clamp(54px,6.4vw,92px) 0}
.sec{display:grid;grid-template-columns:var(--gut) 1fr;gap:0 26px}
@media(max-width:820px){.sec{grid-template-columns:1fr;gap:18px}}
.sec > .lab{color:var(--petrol);padding-top:6px}
.h2{font-size:clamp(24px,3vw,38px);max-width:19ch}
.sub{margin-top:14px;color:var(--ink-mut);max-width:54ch}

/* ---------- services: ruled columns, no cards ---------- */
.svcs{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:clamp(30px,3.6vw,46px);border-top:1px solid var(--ink)}
@media(max-width:900px){.svcs{grid-template-columns:1fr}}
.svc{display:flex;flex-direction:column;padding:22px 26px 28px 0;border-right:1px solid var(--rule-soft)}
.svc:nth-child(2){padding-left:26px}
.svc:nth-child(3){padding-left:26px;border-right:0}
@media(max-width:900px){
  .svc{padding:22px 0 26px;border-right:0;border-bottom:1px solid var(--rule-soft)}
  .svc:nth-child(2),.svc:nth-child(3){padding-left:0}
}
.svc .tag{color:var(--ochre);margin-bottom:12px}
.svc h3{font-size:19px;letter-spacing:-.02em}
.svc > p{margin-top:11px;font-size:15px;color:var(--ink-mut);flex:1}
.svc ul{list-style:none;margin:18px 0 0;padding:16px 0 0;border-top:1px solid var(--rule-soft);display:flex;flex-direction:column;gap:11px}
.svc li{font-size:14.5px;line-height:1.42;display:grid;grid-template-columns:14px 1fr;gap:8px}
.svc li::before{content:"→";font-family:var(--mono);font-size:10px;color:var(--petrol);line-height:1.75}

/* ---------- formats: ruled cells ---------- */
.fmts{display:grid;grid-template-columns:repeat(2,1fr);margin-top:clamp(28px,3.4vw,42px);border-top:1px solid var(--rule)}
@media(max-width:560px){.fmts{grid-template-columns:1fr}}
.fmt{padding:22px 30px 26px 0;border-bottom:1px solid var(--rule-soft);border-right:1px solid var(--rule-soft)}
.fmt:nth-child(2n){border-right:0;padding-left:30px}
@media(max-width:560px){.fmt{border-right:0;padding-left:0}}
.fmt h4{font-size:15.5px;letter-spacing:-.015em}
.fmt p{margin-top:7px;font-size:14px;color:var(--ink-mut)}
.fmt .k{display:block;color:var(--petrol);margin-bottom:9px}

/* ---------- approach ---------- */
.prs{margin-top:clamp(28px,3.4vw,42px);border-top:1px solid var(--rule)}
.pr{display:grid;grid-template-columns:minmax(200px,270px) 1fr;gap:8px 26px;padding:20px 0;border-bottom:1px solid var(--rule-soft)}
@media(max-width:760px){.pr{grid-template-columns:1fr;gap:6px}}
.pr h4{font-size:17px;letter-spacing:-.02em}
.pr p{color:var(--ink-mut);font-size:15px;max-width:56ch}

/* ---------- work ---------- */
.work{margin-top:clamp(28px,3.4vw,42px);border-top:1px solid var(--ink)}
.itm{display:grid;grid-template-columns:86px minmax(0,1fr) minmax(0,1.15fr);gap:8px 26px;padding:22px 0;border-bottom:1px solid var(--rule-soft);align-items:start}
@media(max-width:860px){.itm{grid-template-columns:1fr;gap:6px}}
.itm .yr{color:var(--petrol);font-variant-numeric:tabular-nums;padding-top:3px}
.itm h3{font-size:17.5px;letter-spacing:-.02em}
.itm .org{color:var(--ink-mut);margin-top:7px}
.itm p{font-size:15px;color:var(--ink-mut)}
.itm .lnks{display:flex;flex-wrap:wrap;gap:14px;margin-top:9px}
.itm a{color:var(--petrol);text-decoration:none;border-bottom:1px solid rgba(14,90,107,.34)}
.itm a:hover{border-bottom-color:var(--petrol)}

/* ---------- about ---------- */
.abt{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,4vw,56px);align-items:start;margin-top:clamp(24px,3vw,36px)}
@media(max-width:900px){.abt{grid-template-columns:1fr}}
.bio p{color:var(--ink-mut);font-size:16px}
.bio p+p{margin-top:14px}
.bio p em{color:var(--ink)}
.facts{border-top:1px solid var(--rule);margin:0}
.fct{display:grid;grid-template-columns:84px 1fr;gap:12px;padding:13px 0;border-bottom:1px solid var(--rule-soft)}
@media(max-width:420px){.fct{grid-template-columns:1fr;gap:4px}}
.fct dt{color:var(--petrol)}
.fct dd{margin:0;font-size:14.5px;line-height:1.45}

/* ---------- inverted contact block ---------- */
.invert{background:var(--inv-bg);color:var(--inv-fg)}
.invert .lab{color:var(--inv-accent)}
.invert .sub{color:var(--inv-mut)}
.invert .grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(26px,4vw,56px);align-items:end;margin-top:8px}
@media(max-width:860px){.invert .grid{grid-template-columns:1fr;align-items:start;gap:26px}}
.mail{display:inline-block;margin-top:24px;font-size:clamp(19px,2.4vw,30px);font-weight:800;letter-spacing:-.03em;color:var(--inv-accent);text-decoration:none;word-break:break-word}
.mail:hover{color:var(--inv-fg)}
.invert .meta2{color:var(--inv-mut);line-height:2.1}
.invert .meta2 a{color:var(--inv-fg);text-decoration:none;border-bottom:1px solid var(--inv-line)}
.invert .meta2 a:hover{color:var(--inv-accent);border-bottom-color:var(--inv-accent)}

footer{border-top:1px solid var(--rule)}
footer .row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;padding:20px 0;color:var(--ink-mut)}
footer a{color:var(--ink-mut);text-decoration:none}
footer a:hover{color:var(--petrol)}

@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}


/* ================= multi-page additions ================= */
.mast nav a.here{color:var(--ink)}
.pagehead{padding:clamp(38px,5vw,66px) 0 clamp(26px,3.4vw,40px)}
.pagehead h1{font-size:clamp(30px,4.2vw,52px);max-width:18ch}
.pagehead .lede{margin-top:20px;max-width:58ch;font-size:16.5px}
.pagehead .meta{padding-bottom:22px}

/* stacked service entries (services page) */
.rows{margin-top:clamp(26px,3.2vw,40px);border-top:1px solid var(--ink)}
.row2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px clamp(24px,3vw,46px);padding:26px 0;border-bottom:1px solid var(--rule-soft)}
@media(max-width:860px){.row2{grid-template-columns:1fr;gap:16px}}
.row2 h3{font-size:20px;letter-spacing:-.02em}
.row2 .tag{color:var(--ochre);margin-bottom:10px}
.row2 > div > p{margin-top:11px;font-size:15px;color:var(--ink-mut);max-width:46ch}
.row2 ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.row2 li{font-size:14.5px;line-height:1.45;display:grid;grid-template-columns:14px 1fr;gap:8px}
.row2 li::before{content:"\2192";font-family:var(--mono);font-size:10px;color:var(--petrol);line-height:1.75}

/* teaser blocks (home) */
.teasers{display:grid;grid-template-columns:repeat(3,1fr);margin-top:clamp(26px,3.2vw,40px);border-top:1px solid var(--ink)}
@media(max-width:880px){.teasers{grid-template-columns:1fr}}
.teaser{display:flex;flex-direction:column;gap:10px;padding:22px 26px 24px 0;border-right:1px solid var(--rule-soft)}
.teaser:nth-child(2){padding-left:26px}
.teaser:nth-child(3){padding-left:26px;border-right:0}
@media(max-width:880px){.teaser{padding:22px 0 22px;border-right:0;border-bottom:1px solid var(--rule-soft)}
  .teaser:nth-child(2),.teaser:nth-child(3){padding-left:0}}
.teaser .tag{color:var(--ochre)}
.teaser h3{font-size:18px;letter-spacing:-.02em}
.teaser p{font-size:15px;color:var(--ink-mut);flex:1}
.more{font-family:var(--mono);font-size:10px;letter-spacing:.04em;text-transform:uppercase;color:var(--petrol);text-decoration:none;border-bottom:1px solid rgba(14,90,107,.34);align-self:flex-start;padding-bottom:2px}
.more:hover{border-bottom-color:var(--petrol)}
.secfoot{margin-top:26px}

/* reference lists */
.refs{margin-top:clamp(22px,2.8vw,34px);border-top:1px solid var(--rule)}
.ref{display:grid;grid-template-columns:82px minmax(0,1fr);gap:6px clamp(20px,2.6vw,34px);padding:18px 0;border-bottom:1px solid var(--rule-soft)}
@media(max-width:700px){.ref{grid-template-columns:1fr;gap:5px}}
.ref .yr{color:var(--petrol);font-variant-numeric:tabular-nums;padding-top:3px}
.ref p{font-size:15px;line-height:1.5}
.ref p em{font-style:italic;color:var(--ink)}
.ref .note{color:var(--ink-mut);font-size:13.5px;margin-top:5px}
.ref a{color:var(--petrol);text-decoration:none;border-bottom:1px solid rgba(14,90,107,.34)}
.ref a:hover{border-bottom-color:var(--petrol)}
.plain{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.plain li{font-size:15px;line-height:1.45;color:var(--ink-mut);border-bottom:1px solid var(--rule-soft);padding-bottom:10px}
.plain li b{color:var(--ink);font-weight:600}
.plain li em{font-style:italic}

/* contact page */
.contactGrid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(26px,4vw,56px);align-items:start;margin-top:clamp(22px,2.8vw,34px)}
@media(max-width:860px){.contactGrid{grid-template-columns:1fr}}
.bigmail{display:inline-block;font-size:clamp(20px,2.6vw,32px);font-weight:800;letter-spacing:-.03em;color:var(--petrol);text-decoration:none;word-break:break-word;border-bottom:2px solid rgba(14,90,107,.3)}
.bigmail:hover{border-bottom-color:var(--petrol)}

/* prose (impressum) */
.prose{max-width:70ch;margin-top:clamp(20px,2.6vw,30px)}
.prose h3{font-size:17px;margin-top:30px;letter-spacing:-.02em}
.prose h3:first-child{margin-top:0}
.prose p{margin-top:10px;font-size:15.5px;color:var(--ink-mut)}
.prose p.fill{color:var(--ochre)}

.endstrip .grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(24px,4vw,50px);align-items:end}
@media(max-width:860px){.endstrip .grid{grid-template-columns:1fr;align-items:start;gap:24px}}

.inl{color:var(--petrol);text-decoration:none;border-bottom:1px solid rgba(14,90,107,.34)}
.inl:hover{border-bottom-color:var(--petrol)}


/* ---------- rotating figure ---------- */
.figWrap{position:relative}
.plate canvas{transition:opacity .28s ease}
.figBar{height:1px;background:var(--rule-soft);margin-top:6px}
.figBar i{display:block;height:1px;width:0;background:var(--petrol);transition:width .12s linear}
.figNav{display:flex;gap:5px;margin-top:12px}
.figNav button{font-family:var(--mono);font-size:9px;letter-spacing:.04em;color:var(--ink-mut);
  background:none;border:1px solid var(--rule);padding:3px 7px;border-radius:1px;cursor:pointer;
  transition:color .16s,border-color .16s,background .16s}
.figNav button:hover{color:var(--petrol);border-color:var(--petrol)}
.figNav button[aria-selected="true"]{color:var(--paper);background:var(--petrol);border-color:var(--petrol)}
@media(prefers-reduced-motion:reduce){.figBar{display:none}}