:root{
  /* ===== dominicblack.net design system v1.0 =====
     Spec: learn-claude/design-system/dbnet-design-system.md
     Layer 1 = primitives (raw values), layer 2 = semantic tokens (jobs).
     The rules further down use only layer 2, never layer 1. */

  /* 1. Primitives: every colour, named. Only used to define the jobs below. */
  --orange-500:#F5901D;
  --cobalt-300:#9DB3EE; --cobalt-600:#274695; --cobalt-800:#1D3570;
  --white:#FFFFFF; --ink-900:#111111; --night-900:#121316;
  --grey-300:#B9B6AE; --grey-700:#4A4A4A;
  --stone-300:#DBD7C7; --slate-700:#383A40;
  --paper-100:#F2F1EC; --paper-200:#EEECE7;

  /* 2. Semantic colour tokens: the job each colour does */
  --surface:var(--white); --text:var(--ink-900); --text-muted:var(--grey-700);
  --heading:var(--cobalt-600);
  --border:var(--stone-300); --border-strong:var(--ink-900); --track:var(--border);
  --action-bg:var(--cobalt-600); --action-bg-hover:var(--cobalt-800); --on-action:var(--white);
  --panel-bg:var(--cobalt-600);
  --inverse-surface:var(--paper-100); --on-inverse:var(--ink-900);
  --focus:var(--orange-500);
  /* Orange is the interaction accent: focus, hover underlines, outline-button hover.
     Never use it for text on white (contrast 2.4:1). Dark text on orange is fine (8:1). */
  --accent:var(--orange-500); --on-accent:var(--ink-900);
  --overlay:rgba(10,12,20,.82); --on-overlay:var(--white);

  /* Fonts */
  --font-display:'Anton', Impact, 'Haettenschweiler', 'Arial Narrow Bold', sans-serif;
  --font-text:'Helvetica Neue', Helvetica, Arial, sans-serif;

  /* Type sizes (1rem = 16px) */
  --fs-2xs:.6875rem; /* 11px */ --fs-xs:.75rem; /* 12px */ --fs-sm:.8125rem; /* 13px */
  --fs-md:1rem; /* 16px */ --fs-lg:1.125rem; /* 18px */
  --fs-display-number:clamp(1.25rem,2.6vw,2rem); /* 20 to 32px */
  --fs-stat:clamp(1.25rem,3.6vw,2.75rem); /* 20 to 44px */
  --fs-display-section:clamp(2.25rem,5.5vw,4rem); /* 36 to 64px: Services, About, Contact */
  --fs-display-hero:clamp(2.125rem,calc(10.8vw - .5rem),7.75rem); /* 34 to 124px */
  --tracking-caps:.06em; --tracking-wide:.08em;

  /* Spacing scale (10 steps) */
  --space-3xs:.25rem; /* 4px */  --space-2xs:.5rem; /* 8px */  --space-xs:.75rem; /* 12px */
  --space-s:1rem; /* 16px */     --space-m:1.25rem; /* 20px */ --space-l:1.5rem; /* 24px */
  --space-xl:2rem; /* 32px */    --space-2xl:2.5rem; /* 40px */ --space-3xl:3.5rem; /* 56px */
  --space-4xl:4.5rem; /* 72px */

  /* Layout */
  --max:75rem; /* 1200px */ --gutter:clamp(1rem,4vw,2.5rem); /* 16 to 40px */
  --touch-target:44px;

  /* Motion */
  --duration-fast:.2s; --duration-slow:.5s; --ease-standard:ease;

  box-sizing:border-box;
  padding-top:env(safe-area-inset-top, 0px);
  padding-bottom:env(safe-area-inset-bottom, 0px);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --surface:var(--night-900); --text:var(--paper-200); --text-muted:var(--grey-300); --border:var(--slate-700); --heading:var(--cobalt-300); --inverse-surface:var(--paper-200);
  }
}
:root[data-theme="dark"]{
  --surface:var(--night-900); --text:var(--paper-200); --text-muted:var(--grey-300); --border:var(--slate-700); --heading:var(--cobalt-300); --inverse-surface:var(--paper-200);
}
*,*::before,*::after{box-sizing:inherit}
html{scroll-padding-top:env(safe-area-inset-top, 0px);scroll-behavior:smooth;background:var(--surface)}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{margin:0;overflow-x:clip;background:var(--surface);color:var(--text);font-family:var(--font-text);font-size:var(--fs-md);line-height:1.5;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;box-shadow:0 0 0 2px var(--text)}
.wrap{width:100%;max-width:calc(var(--max) + 2*var(--gutter));margin:0 auto;padding-inline:var(--gutter)}
.caps{text-transform:uppercase;letter-spacing:var(--tracking-caps)}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:var(--touch-target);padding:0 var(--space-m);background:var(--action-bg);color:var(--on-action);text-decoration:none;font-size:var(--fs-md);font-weight:600;letter-spacing:var(--tracking-wide);text-transform:uppercase;border:0;cursor:pointer}
.btn:hover{background:var(--action-bg-hover)}

/* Header */
.top{display:flex;justify-content:space-between;align-items:center;min-height:72px;gap:var(--space-l)}
.top .tag{font-size:var(--fs-xs);letter-spacing:var(--tracking-caps);text-transform:uppercase;margin:0}
.nav{display:flex;align-items:center;gap:var(--space-l)}
.nav a:not(.btn){font-size:var(--fs-sm);letter-spacing:var(--tracking-caps);text-transform:uppercase;text-decoration:none;min-height:var(--touch-target);display:inline-flex;align-items:center}
.nav a:not(.btn):hover{color:var(--heading);text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:6px}
.menu-btn{display:none;background:none;border:0;color:var(--text);width:var(--touch-target);height:var(--touch-target);padding:10px;cursor:pointer}
.menu-btn span{display:block;height:3px;background:currentColor;margin:5px 0;transition:transform var(--duration-fast)}
.menu-btn[aria-expanded="true"] span:first-child{transform:translateY(4px) rotate(45deg)}
.menu-btn[aria-expanded="true"] span:last-child{transform:translateY(-4px) rotate(-45deg)}
@media (prefers-reduced-motion: reduce){.menu-btn span{transition:none}}

/* Hero */
.hero{background:var(--panel-bg);margin-left:calc(50% - 50vw);padding:clamp(var(--space-m),3vw,var(--space-2xl)) clamp(var(--space-s),2.5vw,var(--space-xl)) clamp(var(--space-l),3.5vw,var(--space-2xl)) calc(50vw - 50% + clamp(var(--space-s),2.5vw,var(--space-xl))); } /*border: solid 1px #274695; border-left:none;*/
.hero h1{margin:0;font-family:var(--font-display);font-weight:400;color:var(--on-action);font-size:var(--fs-display-hero);line-height:1.00;letter-spacing:-.005em}
.intro{display:grid;grid-template-columns:1fr auto;gap:var(--space-l) var(--space-3xl);align-items:center;padding-block:clamp(var(--space-l),3.5vw,var(--space-2xl))}
.intro .name{font-size:var(--fs-md);letter-spacing:var(--tracking-caps);text-transform:uppercase;margin:0 0 var(--space-3xs);font-weight:600}
.intro .motto{margin:0;font-size:clamp(.875rem,1.3vw,var(--fs-md))}
.facts{display:flex;gap:var(--space-3xl);list-style:none;margin:0;padding:0;font-size:var(--fs-xs);letter-spacing:var(--tracking-caps);text-transform:uppercase;text-align:center;line-height:1.35}

/* Stats */
.stats{background:var(--panel-bg);color:var(--on-action);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-left:calc(50% - 50vw);padding:clamp(var(--space-l),5vw,var(--space-3xl)) 0 clamp(var(--space-l),5vw,var(--space-3xl)) calc(50vw - 50%);margin-top:0;margin-right:0;margin-bottom:0;list-style:none}
.stats li{text-align:center;display:flex;flex-direction:column;gap:var(--space-2xs)}
.stats b{font-family:var(--font-display);font-weight:400;font-size:var(--fs-stat);line-height:1}
.stats span{font-size:clamp(var(--fs-2xs),.9vw,var(--fs-xs));letter-spacing:var(--tracking-wide);text-transform:uppercase;opacity:.9}

/* Work */
.work{display:grid;grid-template-columns:200px repeat(3,minmax(0,1fr));gap:var(--space-l);padding-block:clamp(var(--space-xl),6vw,var(--space-4xl)) clamp(var(--space-2xl),7vw,var(--space-4xl));align-items:end}
.work-intro{align-self:start;padding-top:var(--space-xs)}
.work-intro h2{font-size:var(--fs-md);font-weight:600;letter-spacing:var(--tracking-caps);text-transform:uppercase;margin:0 0 var(--space-3xs);line-height:1.35}
.work-intro p{margin:0;font-size:var(--fs-sm);line-height:1.5}
.proj{margin:0;display:flex;flex-direction:column;gap:var(--space-xs)}
.proj-head{display:flex;gap:var(--space-xs);align-items:flex-end}
.proj-head .num{font-family:var(--font-display);font-size:var(--fs-display-number);line-height:.9}
.proj-head strong{display:block;font-size:var(--fs-xs);letter-spacing:var(--tracking-caps);text-transform:uppercase}
.proj-head small{display:block;font-size:var(--fs-xs);color:var(--text-muted)}
.proj-img{padding:0;border:1px solid var(--text);background:none;cursor:zoom-in;display:block;width:100%;aspect-ratio:997/1416;overflow:hidden}
.proj-img img{width:100%;height:100%;object-fit:cover;transition:transform var(--duration-slow) var(--ease-standard)}
.proj-img:hover img{transform:scale(1.03)}
.proj-note{margin:var(--space-3xs) 0 0;font-size:var(--fs-sm);line-height:1.5;color:var(--text);max-width:36ch}
@media (prefers-reduced-motion: reduce){.proj-img img{transition:none}}

/* Services */
.services{display:grid;grid-template-columns:minmax(var(--gutter),1fr) minmax(0,calc(var(--max)*.3)) minmax(0,calc(var(--max)*.7)) minmax(var(--gutter),1fr)}
.services .block{grid-column:1 / 3;background:var(--panel-bg);display:flex;align-items:flex-end;padding:var(--space-2xl) clamp(var(--space-m),3vw,var(--space-xl));min-height:clamp(260px,26vw,320px);justify-content:flex-end}
.services h2{margin:0;font-family:var(--font-display);font-weight:400;color:var(--on-action);font-size:var(--fs-display-section);line-height:.94;text-transform:uppercase;width:100%;max-width:calc(var(--max)*.3 - 72px)}
.svc{grid-column:3;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));list-style:none;margin:0;padding:0;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.svc li{padding:clamp(var(--space-m),3vw,var(--space-xl)) clamp(var(--space-m),3vw,var(--space-xl));border-right:1px solid var(--border)}
.svc li:nth-child(-n+2){border-bottom:1px solid var(--border)}
.svc li:nth-child(2n){border-bottom:1px solid var(--border)}
.svc li:last-child{border-bottom:0}
.svc h3{margin:0 0 var(--space-3xs);font-size:var(--fs-lg);font-weight:600;letter-spacing:var(--tracking-caps);text-transform:uppercase}
.svc p{margin:0;font-size:var(--fs-sm);line-height:1.55;max-width:34ch}

/* About */
.about{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-2xl) var(--space-3xl);padding-block:clamp(var(--space-2xl),6vw,var(--space-3xl))}
.about .eyebrow{font-size:var(--fs-md);font-weight:600;letter-spacing:var(--tracking-caps);text-transform:uppercase;margin:0 0 var(--space-2xs)}
.about h2{margin:0 0 clamp(var(--space-l),5vw,var(--space-3xl));font-family:var(--font-display);font-weight:400;color:var(--heading);font-size:var(--fs-display-section);line-height:.94;text-transform:uppercase}
.about .bio{margin:0;font-size:var(--fs-md);max-width:46ch}
.skills{align-self:end}
.skills h3{margin:0 0 var(--space-xs);font-size:var(--fs-md);font-weight:600;letter-spacing:var(--tracking-caps);text-transform:uppercase}
.skills ul{list-style:none;margin:0 0 var(--space-l);padding:0;display:grid;gap:var(--space-2xs)}
.skills li{display:grid;grid-template-columns:120px minmax(0,1fr);align-items:baseline;gap:var(--space-s);font-size:var(--fs-xs)}
.skills li span:first-child{letter-spacing:var(--tracking-caps);text-transform:uppercase}
.skills li span:last-child{text-align:right}
.bar{height:5px;background:var(--track);position:relative;overflow:hidden}
.bar i{position:absolute;inset:0 auto 0 0;width:var(--v);background:var(--panel-bg)}
.js .bar i{width:0;transition:width 1.1s cubic-bezier(.2,.7,.2,1)}
.js .skills.in .bar i{width:var(--v)}
.skills li:nth-child(2) i{transition-delay:.08s}.skills li:nth-child(3) i{transition-delay:.16s}.skills li:nth-child(4) i{transition-delay:.24s}.skills li:nth-child(5) i{transition-delay:.32s}
@media (prefers-reduced-motion: reduce){.js .bar i{transition:none}}
.btn--outline{background:none;color:var(--text);border:1px solid var(--text);padding:0 var(--space-l)}
.btn--outline:hover{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}

/* Contact */
.contact{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:0 var(--space-2xl);padding-bottom:clamp(var(--space-2xl),5vw,var(--space-3xl))}
.cta{background:var(--panel-bg);min-height:clamp(240px,24vw,300px);padding:clamp(var(--space-xl),4vw,var(--space-2xl)) clamp(var(--space-xl),4vw,var(--space-3xl));display:flex;justify-content:space-between;align-items:flex-end;gap:var(--space-l)}
.cta h2{margin:0;font-family:var(--font-display);font-weight:400;color:var(--on-action);font-size:var(--fs-display-section);line-height:.94;text-transform:uppercase;align-self:flex-start}
.circle{flex-shrink:0;width:88px;height:88px;border-radius:50%;background:var(--inverse-surface);color:var(--on-inverse);display:flex;align-items:center;justify-content:center;transition:transform var(--duration-fast)}
.circle:hover{transform:rotate(45deg)}
@media (prefers-reduced-motion: reduce){.circle{transition:none}}
.details{display:flex;flex-direction:column;justify-content:flex-end;gap:var(--space-s);padding-top:var(--space-l)}
.details dl{margin:0;display:grid;gap:var(--space-xs)}
.details dt{font-size:var(--fs-md);font-weight:600;letter-spacing:var(--tracking-caps);text-transform:uppercase}
.details dd{margin:0;font-size:var(--fs-sm)}
.details a{text-decoration:none}.details a:hover{text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:4px}
.details .btn{align-self:flex-start}
.foot{display:flex;justify-content:space-between;gap:var(--space-s);padding-block:0 var(--space-xl);font-size:var(--fs-2xs);letter-spacing:var(--tracking-wide);text-transform:uppercase}
.foot p{margin:0}

/* Lightbox */
dialog.lb{border:0;padding:0;background:transparent;max-width:min(92vw,720px);max-height:92vh}
dialog.lb::backdrop{background:var(--overlay)}
dialog.lb img{max-height:86vh;width:auto;margin:0 auto;border:1px solid var(--border-strong)}
dialog.lb figcaption{color:var(--on-overlay);font-size:var(--fs-sm);letter-spacing:var(--tracking-caps);text-transform:uppercase;margin-top:var(--space-2xs);text-align:center}
.lb-close{position:fixed;top:calc(env(safe-area-inset-top, 0px) + 12px);right:12px;width:48px;height:48px;border-radius:50%;border:0;background:var(--inverse-surface);color:var(--on-inverse);font-size:1.5rem;cursor:pointer}

/* Mobile. The one breakpoint is 760px (media queries can't use var(), so it's noted here) */
@media (max-width: 760px){
  .menu-btn{display:block}
  .nav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--surface);flex-direction:column;align-items:stretch;gap:0;padding:var(--space-2xs) var(--gutter) var(--space-m);border-bottom:1px solid var(--border);z-index:10}
  .nav.open{display:flex}
  .nav a:not(.btn){border-bottom:1px solid var(--border);min-height:52px}
  .nav .btn{margin-top:var(--space-s)}
  header.wrap{position:relative}
  .top{min-height:64px}
  .top .tag{font-size:var(--fs-2xs)}
  .intro{grid-template-columns:1fr;gap:var(--space-2xs)}
  .intro .name{margin:0}
  .intro > div:first-child{display:contents}
  .facts{order:2;justify-content:space-between;flex-wrap:wrap;gap:var(--space-3xs) var(--space-s);text-align:left;font-size:var(--fs-2xs)}
  .facts br{display:none}
  .intro .motto{order:3;margin-top:var(--space-2xs)}
  .work{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-2xs);align-items:start}
  .work-intro{grid-column:1 / -1;padding:0 0 var(--space-2xs)}
  .work-intro p{display:none}
  .proj{gap:var(--space-2xs)}
  .proj-head{gap:var(--space-3xs);min-height:34px}
  .proj-head strong,.proj-head small{font-size:var(--fs-2xs)}
  .proj-note{font-size:var(--fs-2xs);line-height:1.4}
  .svc h3{font-size:var(--fs-md)}
  .services{grid-template-columns:0 minmax(0,1fr) minmax(0,1.15fr) var(--gutter)}
  .services .block{padding:var(--space-l) var(--gutter);min-height:0;justify-content:flex-start}
  .services h2{max-width:none}
  .svc{grid-template-columns:1fr}
  .svc li,.svc li:nth-child(2n){border-right:1px solid var(--border);border-bottom:1px solid var(--border);padding:var(--space-s) var(--space-xs)}
  .svc li:last-child{border-bottom:0}
  .svc p{font-size:var(--fs-xs)}
  .about{grid-template-columns:1fr;gap:var(--space-l)}
  .about h2{margin-bottom:var(--space-m)}
  .skills li{grid-template-columns:96px minmax(0,1fr);gap:var(--space-xs)}
  .contact{grid-template-columns:1fr}
  .cta{margin-left:calc(-1 * var(--gutter));margin-right:calc(-1 * var(--gutter) + var(--space-2xl));padding:var(--space-xl) var(--gutter)}
  .circle{display:none}
  .details{flex-direction:row;justify-content:space-between;align-items:flex-end;flex-wrap:wrap}
  .foot{flex-direction:column;gap:var(--space-3xs)}
}