/* Self-hosted fonts (Latin subset): Shrikhand, Bricolage Grotesque, DM Mono. All SIL OFL. */
@font-face { font-family: 'Shrikhand'; font-style: normal; font-weight: 400; font-display: swap; src: url(assets/fonts/shrikhand-latin-400-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 200 800; font-display: swap; src: url(assets/fonts/bricolage-grotesque-latin-wght-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'DM Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(assets/fonts/dm-mono-latin-400-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'DM Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url(assets/fonts/dm-mono-latin-500-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

/* Concept: site-to-site networking drawn as island hopping. The hero is an arched postcard map (sites are islands, VPN tunnels are dashed ferry routes, the sensor is a lighthouse). Every project and focus area gets a small spot illustration in the same flat palette. Wavy dividers carry the lagoon through the page and end in a lagoon-coloured contact band with palm silhouettes. */
:root {
  --bg: #E8F5F1;
  --surface: #FFFFFF;
  --ink: #0B3A33;
  --muted: #46675F;
  --line: #C9DFD8;
  --tint: #DDF0EA;
  --accent: #D3234B;
  --accent-ink: #FFFFFF;
  --ok: #17784A;
  --warn: #96560A;
  --sky: #FFC8A2;
  --sun: #FF5A6E;
  --sea: #0A7A8C;
  --sea-deep: #075868;
  --on-sea: #FFFFFF;
  --on-sea-line: rgba(255, 255, 255, .28);
  --sand: #F7DC9C;
  --palm: #2A9D5C;
  --palm-f: #35C16D;
  --trunk: #8B5A2B;
  --lamp: #FFD84A;
  --tower: #FFFFFF;
  --c1: #0A7A8C;
  --c2: #2A9D5C;
  --c3: #FF5A6E;
  --c4: #F2B705;
  --display: 'Shrikhand', 'Arial Black', system-ui, sans-serif;
  --body: 'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif;
  --mono: 'DM Mono', ui-monospace, Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #062B2D;
    --surface: #0A3739;
    --ink: #E8F7EF;
    --muted: #9CC4BB;
    --line: #1B4F50;
    --tint: #0F4547;
    --accent: #FF8394;
    --accent-ink: #3A0612;
    --ok: #6FE0A3;
    --warn: #F0B54E;
    --sky: #1F4E6B;
    --sun: #FFE27A;
    --sea: #0B6C7E;
    --sea-deep: #07505E;
    --on-sea: #EFFFF8;
    --on-sea-line: rgba(239, 255, 248, .28);
    --sand: #E8C98A;
    --palm: #2FAE63;
    --palm-f: #43D27C;
    --trunk: #A87444;
    --tower: #E8F7EF;
    --c1: #4FC3D6;
    --c2: #43D27C;
    --c3: #FF8394;
    --c4: #FFD25E;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #062B2D;
  --surface: #0A3739;
  --ink: #E8F7EF;
  --muted: #9CC4BB;
  --line: #1B4F50;
  --tint: #0F4547;
  --accent: #FF8394;
  --accent-ink: #3A0612;
  --ok: #6FE0A3;
  --warn: #F0B54E;
  --sky: #1F4E6B;
  --sun: #FFE27A;
  --sea: #0B6C7E;
  --sea-deep: #07505E;
  --on-sea: #EFFFF8;
  --on-sea-line: rgba(239, 255, 248, .28);
  --sand: #E8C98A;
  --palm: #2FAE63;
  --palm-f: #43D27C;
  --trunk: #A87444;
  --tower: #E8F7EF;
  --c1: #4FC3D6;
  --c2: #43D27C;
  --c3: #FF8394;
  --c4: #FFD25E;
  color-scheme: dark;
}

* { box-sizing: border-box; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.6;
}
a { color: inherit; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.in {
  max-width: 1040px;
  margin: 0 auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}

/* top bar */
.top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 24px; padding-block: 22px; }
.top .name { display: inline-flex; align-items: center; gap: 9px; font-family: var(--mono); font-size: .8125rem; letter-spacing: .04em; font-weight: 500; }
.top .name svg { display: block; }
.sunmark { fill: var(--sun); }
.sunray { stroke: var(--sun); stroke-width: 2; stroke-linecap: round; }
.top nav { display: flex; flex-wrap: wrap; gap: 8px 22px; font-family: var(--mono); font-size: .8125rem; }
.top nav a { text-decoration: none; color: var(--muted); }
.top nav a:hover { color: var(--accent); }

/* hero */
.hero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 48px; align-items: center; padding-block: 28px 56px; }
.eyebrow { font-family: var(--mono); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); margin: 0 0 18px; }
h1 { font-family: var(--display); font-weight: 400; font-synthesis: none; font-size: clamp(2rem, 4.8vw, 3.3rem); line-height: 1.12; letter-spacing: -.005em; margin: 0 0 22px; text-wrap: balance; }
.lede { max-width: 34rem; color: var(--muted); margin: 0 0 28px; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }
.btn { font: 500 .9375rem/1 var(--body); padding: 14px 20px; border-radius: 99px; border: 2px solid var(--accent); text-decoration: none; display: inline-block; }
.btn.primary { background: var(--accent); color: var(--accent-ink); }
.btn.ghost { color: var(--accent); background: transparent; }

.fig { margin: 0; min-width: 0; }
.fig svg { display: block; width: 100%; max-width: 380px; height: auto; margin-inline: auto; }
.fig figcaption { font-family: var(--mono); font-size: .6875rem; color: var(--muted); text-align: center; margin: 12px auto 0; max-width: 340px; letter-spacing: .03em; line-height: 1.5; }
.sky { fill: var(--sky); }
.sea { fill: var(--sea); }
.sun { fill: var(--sun); }
.sunring { fill: none; stroke: var(--sun); stroke-width: 2; opacity: .4; }
.sand { fill: var(--sand); }
.mound { fill: var(--palm); }
.frond { fill: var(--palm-f); }
.trunk { fill: none; stroke: var(--trunk); stroke-width: 3; stroke-linecap: round; }
.tower { fill: var(--tower); }
.lamp { fill: var(--lamp); }
.roof { fill: var(--sun); }
.wv { fill: none; stroke: var(--on-sea); stroke-width: 2; stroke-linecap: round; opacity: .45; }
.route { fill: none; stroke: var(--on-sea); stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 6 7; }
.lbl { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .06em; fill: var(--on-sea); paint-order: stroke; stroke: var(--sea); stroke-width: 4px; stroke-linejoin: round; }
.lbl.s { font-size: 10px; font-weight: 400; }
@media (prefers-reduced-motion: no-preference) { .boatbob { animation: figbob 2.4s ease-in-out infinite; } }
@keyframes figbob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.6px); } }
@media (prefers-reduced-motion: no-preference) {
  .route { animation: ferry 1.6s linear infinite; }
}
@keyframes ferry { to { stroke-dashoffset: -26; } }

/* spot illustrations */
.spot { width: 64px; height: 64px; flex: none; display: block; }
.spotbg { fill: var(--tint); }
.i-sea { fill: var(--c1); }
.i-ink { fill: var(--ink); }
.i-sun { fill: var(--sun); }
.i-lamp { fill: var(--lamp); }
.i-sand { fill: var(--sand); }
.i-palm { fill: var(--palm); }
.i-palmf { fill: var(--palm-f); }
.i-wood { fill: var(--trunk); }
.i-sky { fill: var(--sky); }
.i-whiteo { fill: var(--tower); stroke: var(--c1); stroke-width: 1.5; stroke-linejoin: round; }
.o-c1, .o-ink, .o-sun, .o-wood, .o-sand, .o-palmf { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.o-c1 { stroke: var(--c1); }
.o-ink { stroke: var(--ink); }
.o-sun { stroke: var(--sun); }
.o-wood { stroke: var(--trunk); }
.o-sand { stroke: var(--sand); stroke-width: 1.5; }
.o-palmf { stroke: var(--palm-f); }
.thin { stroke-width: 2; }
.dash { fill: none; stroke: var(--c1); stroke-width: 2; stroke-dasharray: 3 3; stroke-linecap: round; }
.dashed { stroke-dasharray: 3 3; }
.glass { fill: var(--c1); fill-opacity: .3; stroke: var(--c1); stroke-width: 2; }
.clockface { fill: var(--surface); stroke: var(--c1); stroke-width: 3.5; }
.net { fill: none; stroke: var(--palm-f); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.rim { fill: none; stroke: var(--sand); stroke-width: 3; }

.hutwall { fill: var(--sand); }
.hutroof { fill: var(--trunk); }
.hutdoor { fill: var(--ink); }
.wf { fill: none; stroke: var(--on-sea); stroke-width: 2.2; stroke-linecap: round; }
.wfdot { fill: var(--on-sea); }
.keymetal { fill: var(--lamp); }
.hib { fill: var(--c3); }
.story { display: grid; gap: 32px; margin-top: 20px; }
.story-item { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 20px; align-items: start; }
.story-item h3 { font-family: var(--body); font-size: 1.25rem; font-weight: 700; letter-spacing: -.01em; line-height: 1.25; margin: 2px 0 8px; }
.story-item p { margin: 0; max-width: 44rem; }

.about { display: grid; grid-template-columns: minmax(0, 1fr) 180px; gap: 36px; align-items: center; }
.about p { margin: 0 0 1em; max-width: 40rem; }
.about p:last-child { margin-bottom: 0; }
.aboutpic { display: block; width: 100%; max-width: 180px; height: auto; aspect-ratio: 1; border-radius: 50%; }

/* wavy dividers */
.wave { line-height: 0; background: var(--bg); }
.wave svg { display: block; width: 100%; height: clamp(24px, 4vw, 48px); }
.wave path { fill: var(--surface); }
.wave.to-sea { background: var(--surface); }
.wave.to-sea path { fill: var(--sea); }


[hidden] { display: none !important; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 10; background: var(--bg); }

/* tabs with a sailing boat */
.tabbar { display: none; }
.js .tabbar { display: block; position: sticky; top: env(safe-area-inset-top, 0px); z-index: 9; background: var(--surface); border-bottom: 1px solid var(--line); }
.tabscroll { overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
.tabscroll::-webkit-scrollbar { display: none; }
.tabtrack { position: relative; min-width: max-content; }
.tabs { display: flex; gap: 2px; }
.tab { font: 500 .9375rem/1 var(--body); color: var(--muted); background: none; border: 0; padding: 16px 16px 30px; cursor: pointer; white-space: nowrap; border-radius: 8px 8px 0 0; }
.tab:first-child { padding-left: 0; }
.tab:hover { color: var(--accent); }
.tab[aria-selected="true"] { color: var(--ink); font-weight: 700; }
.sealine { display: block; width: 100%; height: 14px; }
.boat { position: absolute; left: 0; bottom: 3px; width: 40px; height: 36px; pointer-events: none; transform: translateX(var(--bx, 0px)); }
.boat.ready { transition: transform .85s cubic-bezier(.45, .05, .25, 1); }
.boat .flip { display: block; transform: scaleX(var(--dir, 1)); }
.boat svg { display: block; width: 40px; height: 36px; transform-origin: 50% 90%; animation: bob 2.6s ease-in-out infinite; }
.boat.sailing svg { animation-duration: .55s; }
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-2px) rotate(2deg); } }
@media (prefers-reduced-motion: reduce) { .boat.ready { transition: none; } .boat svg { animation: none; } }

/* content */
.surface-band { background: var(--surface); }
.panel { padding-block: 40px 64px; }
.panel:focus { outline: none; }
@media (prefers-reduced-motion: no-preference) { .panel { animation: panelin .5s ease both; } }
@keyframes panelin { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.sec + .sec { border-top: 1px solid var(--line); margin-top: 44px; padding-top: 44px; }
.sec h2 { font-family: var(--body); font-weight: 700; font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1.15; letter-spacing: -.015em; margin: 0 0 22px; text-wrap: balance; }
.note { color: var(--muted); max-width: 38rem; margin: -8px 0 8px; font-size: .96875rem; }

.focus { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 28px; }
.focus > div { min-width: 0; border-top: 4px solid var(--c1); padding-top: 16px; }
.focus > div:nth-child(2) { border-top-color: var(--c2); }
.focus > div:nth-child(3) { border-top-color: var(--c3); }
.focus > div:nth-child(4) { border-top-color: var(--c4); }
.focus .spot { margin-bottom: 12px; }
.focus h3 { font-family: var(--body); font-size: 1.0625rem; font-weight: 700; margin: 0 0 8px; }
.focus p { margin: 0; color: var(--muted); font-size: .96875rem; }

.kit { display: grid; gap: 14px; }
.kit-row { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 6px 20px; align-items: baseline; }
.kit-row h3 { font-family: var(--mono); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 0; font-weight: 500; }

.jobs { display: grid; }
.job { display: grid; gap: 14px; padding-block: 26px; }
.job + .job { border-top: 1px solid var(--line); }
.job:first-child { padding-top: 14px; }
.jobhead { display: flex; gap: 16px; align-items: center; }
.jobhead > div { min-width: 0; }
.job h3 { font-family: var(--body); font-size: 1.25rem; font-weight: 700; letter-spacing: -.01em; line-height: 1.25; margin: 0 0 8px; text-wrap: balance; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.tags li { font-family: var(--mono); font-size: .6875rem; letter-spacing: .02em; background: var(--tint); color: var(--ink); padding: 4px 10px; border-radius: 99px; overflow-wrap: anywhere; }
.tags li.wip { background: transparent; border: 1px solid var(--warn); color: var(--warn); text-transform: uppercase; letter-spacing: .08em; }
.pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px 32px; }
.pair div { min-width: 0; }
.pair h4 { font-family: var(--mono); font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 0 0 4px; font-weight: 500; }
.pair p { margin: 0; font-size: .96875rem; }

.ai { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 28px 36px; align-items: start; }
.bigturtle { display: block; width: 100%; max-width: 170px; height: auto; }
.ai-lead { margin: 0 0 22px; max-width: 40rem; }
.ai-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.ai-list li { border-left: 4px solid var(--c1); padding-left: 16px; }
.ai-list li:nth-child(2) { border-left-color: var(--c2); }
.ai-list li:nth-child(3) { border-left-color: var(--c3); }
.ai-list h3 { font-family: var(--body); font-size: 1.0625rem; font-weight: 700; margin: 0 0 4px; }
.ai-list p { margin: 0; color: var(--muted); font-size: .96875rem; max-width: 38rem; }

.certs { list-style: none; margin: 0; padding: 0; }
.certs li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 16px; padding-block: 14px; border-top: 1px solid var(--line); }
.certs li:first-child { border-top: 0; padding-top: 0; }
.certs .c { min-width: 0; }
.certs b { font-weight: 500; }
.certs .by { color: var(--muted); font-size: .9375rem; margin-left: 8px; }
.pill { font-family: var(--mono); font-size: .6875rem; letter-spacing: .08em; text-transform: uppercase; padding: 3px 9px; border: 1px solid currentColor; border-radius: 99px; white-space: nowrap; }
.pill.ok { color: var(--ok); }
.pill.wip { color: var(--warn); }

/* contact band */
.contact { background: var(--sea); color: var(--on-sea); }
.contact .in { position: relative; padding-block: 40px 0; }
.contact .kicker { font-family: var(--mono); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; margin: 0 0 14px; opacity: .85; }
.contact h2 { font-family: var(--display); font-weight: 400; font-synthesis: none; font-size: clamp(2rem, 5vw, 3rem); line-height: 1.1; margin: 0 0 12px; }
.contact .ask { margin: 0 0 24px; max-width: 32rem; }
.palms { position: absolute; top: 14px; right: max(16px, env(safe-area-inset-right, 0px)); width: 220px; height: auto; }
.pal { fill: var(--sea-deep); }
.paltrunk { fill: none; stroke: var(--sea-deep); stroke-width: 4; stroke-linecap: round; }
.mail { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.mail code { font-family: var(--mono); font-size: 1rem; background: var(--sea-deep); color: var(--on-sea); padding: 10px 14px; border-radius: 99px; overflow-wrap: anywhere; user-select: all; }
.copy { font: 500 .8125rem/1 var(--mono); color: var(--sea-deep); background: var(--on-sea); border: 2px solid var(--on-sea); border-radius: 99px; padding: 12px 16px; cursor: pointer; }
.copy:hover { background: transparent; color: var(--on-sea); }
.copy:focus-visible { outline-color: var(--on-sea); }
.copystate { font-family: var(--mono); font-size: .75rem; min-height: 1.2em; margin: 10px 0 0; }
.contact footer { margin-top: 36px; border-top: 1px solid var(--on-sea-line); padding-block: 22px max(32px, env(safe-area-inset-bottom, 0px)); font-family: var(--mono); font-size: .75rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; }

@media (max-width: 720px) {
  .hero { grid-template-columns: minmax(0, 1fr); padding-block: 12px 40px; gap: 32px; }
  .panel { padding-block: 28px 48px; }
  .kit-row { grid-template-columns: minmax(0, 1fr); }
  .ai { grid-template-columns: minmax(0, 1fr); }
  .bigturtle { max-width: 130px; }
  .spot { width: 56px; height: 56px; }
  .story-item { grid-template-columns: 56px minmax(0, 1fr); gap: 14px; }
  .about { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .aboutpic { max-width: 130px; order: -1; }
  .palms { display: none; }
}

/* Demo clips in project entries */
.demo { margin: 16px 0 0; max-width: 44rem; }
.demo video { display: block; width: 100%; height: auto; aspect-ratio: 1280 / 696; border-radius: 12px; border: 1px solid var(--line); background: #0d0d12; }
.demo figcaption { font-family: var(--mono); font-size: .6875rem; color: var(--muted); margin-top: 8px; line-height: 1.5; letter-spacing: .02em; }