/* Foundations shared by every design: a light reset, accessibility helpers
   and the enlarged-photo view. Each design's own
   look (colours, typeface, layout) is in src/design/style.css,
   which sets the colour tokens used here (--paper, --ink, --ink-2, --rule). */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 1.5rem; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
main { flex: 1 0 auto; }
h1, h2, h3, p, figure, blockquote, dl, dd { margin: 0; }
ol, ul { margin: 0; padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; height: auto; }
picture { display: block; }
a { color: inherit; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
::selection { background: var(--selection, var(--rule)); color: var(--ink); }

:focus-visible { outline: 2px solid var(--focus, var(--ink)); outline-offset: 3px; }
.skip {
  position: absolute; left: 1rem; top: -5rem; z-index: 20;
  padding: 0.6rem 0.9rem; background: var(--paper); color: var(--ink);
}
.skip:focus { top: 1rem; }

/* The logo: its two colours can be changed by a design (e.g. on dark). */
.site-logo { display: block; line-height: 0; }
.site-logo .logo { width: 100%; height: auto; }

/* Photos: width and height are in the page, so nothing shifts while loading. */
.photo { display: block; cursor: zoom-in; }
.photo img, .hero-photo img, .portrait img { width: 100%; height: auto; }

/* The Fig. numbers and spec rows are shown only by designs that want them. */
.fig { display: none; }

/* ---- Enlarged photo view (public/scripts/lightbox.js) -------------------- */
dialog.lightbox {
  width: 100vw; height: 100dvh; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0;
  background: rgb(12 13 15 / 0.94); color: #EEEDEA;
}
dialog.lightbox::backdrop { background: transparent; }
dialog.lightbox figure {
  height: 100%; display: grid; grid-template-rows: 1fr auto; justify-items: center; align-items: center;
  gap: 0.75rem; padding: 4rem 1rem 1.25rem;
}
dialog.lightbox img { max-width: min(100%, 1100px); max-height: calc(100dvh - 9.5rem); width: auto; height: auto; }
dialog.lightbox figcaption { font-size: 0.9375rem; line-height: 1.4; color: #D2D0CC; text-align: center; max-width: 40rem; }
dialog.lightbox .lightbox-bar {
  position: absolute; top: 0; left: 0; right: 0;
  display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 1rem;
}
dialog.lightbox button {
  font: inherit; font-size: 0.875rem; letter-spacing: 0.04em;
  color: #EEEDEA; background: none; border: 1px solid rgb(255 255 255 / 0.35);
  padding: 0.55rem 0.9rem; cursor: pointer;
}
dialog.lightbox button:hover { border-color: #EEEDEA; }
dialog.lightbox button:focus-visible { outline-color: #EEEDEA; }
dialog.lightbox .lightbox-steps { display: flex; gap: 0.5rem; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
/* The site's design: "Bench" (design C, chosen by the owner 2026-10-16).

   Dark and photographic, like a premium hardware maker's site: the bench
   photo fills the first screen, and the project photos are shown large.
   - Type: Archivo, a sturdy grotesque (open licence).
   - Graphite paper, warm white ink, a light tint of SDI's logo blue as the
     accent.
   - The logo always keeps its own navy and charcoal (owner, 2026-10-16), so
     it sits on a white bar fixed across the top, with the menu.
   All text colours pass WCAG AA on --paper and --paper-2, and the logo's
   colours and the menu stand out clearly from the white bar (--plate,
   checked at build); text over the photo sits on a dark wash. */

@font-face {
  font-family: "Archivo";
  src: url("/fonts/Archivo-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --paper: #0E1013;
  --paper-2: #16191E;
  --ink: #EEECE8;
  --ink-2: #A7ACB3;
  --accent: #9DB8E2;       /* SDI's logo blue, lightened for a dark ground */
  --plate: #FFFFFF;        /* never text: the white bar the logo sits on */
  --rule: #2A2F36;         /* never text */
  --focus: #9DB8E2;
  --selection: #2F4A73;

  --font-text: "Archivo", "Helvetica Neue", Arial, sans-serif;

  --max: 82rem;
  --gutter: clamp(1.25rem, 4.5vw, 3.5rem);
  --gap: clamp(1rem, 2.4vw, 2rem);
  --measure: 36em;
}

body {
  font-family: var(--font-text);
  font-size: clamp(1.0625rem, 1rem + 0.2vw, 1.1875rem);
  line-height: 1.6;
}

/* Small capitals for labels */
.section-title, .section-count, .project-meta, .project-specs dt, .facts dt,
.quote-role, .site-footer p {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.5;
}

/* ---- Header: a white bar fixed across the top (owner, 2026-10-16) ------------
   The logo keeps its original colours, so it sits on white, the background
   it was drawn on. The bar stays in place while the page scrolls beneath it,
   and carries the menu in dark text, underlined in the logo's navy. */
:root {
  --nav-on-plate: #16191E;                                            /* menu text on the white bar */
  --bar-h: clamp(3.75rem, 3.1rem + 2vw, 4.75rem);                     /* 60 → 76px */
}
html { scroll-padding-top: calc(var(--bar-h) + 1rem); }
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 10;
  height: var(--bar-h);
  padding-inline: max(var(--gutter), calc((100% - var(--max)) / 2 + var(--gutter)));
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  background: var(--plate);
  box-shadow: 0 14px 30px -20px rgb(0 0 0 / 0.6);
}
.site-logo { flex: none; width: calc((var(--bar-h) - 1.5rem) * 2.716); }   /* the logo is 2.716 : 1 */
.site-logo:focus-visible { outline-color: #22487F; outline-offset: 6px; }
.site-nav ul { display: flex; gap: clamp(1.1rem, 3vw, 2.25rem); }
.site-nav a {
  display: block; padding: 0.5rem 0; font-weight: 500; font-size: 0.9375rem;
  color: var(--nav-on-plate); text-decoration: none; border-bottom: 1px solid transparent;
}
.site-nav a:hover, .site-nav a[aria-current] { border-bottom-color: #22487F; }
.site-nav a:focus-visible { outline-color: #22487F; }
main { padding-top: var(--bar-h); }

/* ---- Opening screen: the bench ---------------------------------------------- */
/* Phones: the photo on top, fading into the page, the words below it.
   Computers: the photo fills the screen, the words sit at the lower right,
   leaving the circuit board in view on the left. */
.hero { position: relative; isolation: isolate; display: grid; }
.hero-photo { position: relative; z-index: -2; overflow: hidden; order: -1; }
.hero-photo picture, .hero-photo img { width: 100%; height: 100%; }
.hero-photo img { aspect-ratio: 1 / 1; object-fit: cover; object-position: 22% 62%; }
/* A dark wash so the words read clearly over the photo. */
.hero-photo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgb(14 16 19 / 0) 0%, rgb(14 16 19 / 0) 55%, #0E1013 100%);
}
.hero-text {
  width: 100%; max-width: var(--max); margin: -3.5rem auto 0;
  padding: 0 var(--gutter) clamp(2.5rem, 6vw, 4.5rem);
  display: grid; gap: clamp(1rem, 2vw, 1.5rem);
}
@media (min-width: 56rem) {
  .hero { min-height: min(calc(100svh - var(--bar-h)), 56rem); align-items: end; }
  .hero-photo { position: absolute; inset: 0; }
  .hero-photo img { aspect-ratio: auto; object-position: 30% 58%; }
  .hero-photo::after {
    background:
      linear-gradient(90deg, rgb(14 16 19 / 0) 30%, rgb(14 16 19 / 0.6) 72%),
      linear-gradient(180deg, rgb(14 16 19 / 0.15) 0%, rgb(14 16 19 / 0.1) 20%, rgb(14 16 19 / 0.35) 50%,
        rgb(14 16 19 / 0.85) 80%, #0E1013 100%);
  }
  .hero-text {
    margin-top: 0; padding-top: 4rem;
    grid-template-columns: minmax(0, 1fr) minmax(0, 40rem);
  }
  .hero-text > * { grid-column: 2; }
}
.hero-title {
  max-width: 15ch;
  font-weight: 650;
  font-size: clamp(2.375rem, 1.35rem + 4.5vw, 5.25rem);
  line-height: 1.0;
  letter-spacing: -0.032em;
}
.hero-intro { max-width: var(--measure); font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.3125rem); }
.facts { display: flex; flex-wrap: wrap; gap: 0.75rem 2.5rem; margin-top: 0.5rem; }
.facts .fact-company { display: none; }
.facts dt { color: var(--accent); font-size: 0.6875rem; }
.facts dd { margin-top: 0.15rem; font-weight: 500; }
@media (prefers-reduced-motion: no-preference) {
  .hero-photo img { animation: power-on 2.4s cubic-bezier(0.2, 0.6, 0.2, 1) both; }
  .hero-text > * { animation: rise 1s cubic-bezier(0.2, 0.7, 0.2, 1) 0.25s both; }
  .hero-intro { animation-delay: 0.4s; }
  .facts { animation-delay: 0.55s; }
}
@keyframes power-on {
  from { opacity: 0.01; transform: scale(1.04); }
  to   { opacity: 1; transform: none; }
}
@keyframes rise {
  from { opacity: 0.01; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* ---- Sections ---------------------------------------------------------------------- */
.section {
  width: 100%; max-width: var(--max); margin: 0 auto;
  padding: clamp(4.5rem, 9vw, 8rem) var(--gutter) 0;
}
.section-head {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding-bottom: 1rem; border-bottom: 1px solid var(--rule);
}
.section-title { color: var(--accent); }
.section-count { color: var(--ink-2); font-weight: 500; }

/* ---- Selected work: photographs first ---------------------------------------------- */
.project { display: grid; gap: 1rem var(--gap); padding-block: clamp(2.5rem, 6vw, 5rem); }
.project-photos { order: -1; display: grid; gap: 4px; margin-bottom: 0.75rem; }
@media (min-width: 40rem) {
  .project-photos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .project-photos[data-count="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 56rem) {
  /* the last row takes any spare height, so the role stays under the title */
  .project { grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto auto 1fr; }
  .project-photos { grid-column: 1 / -1; grid-row: 1; }
  .project-head { grid-column: 1 / span 5; grid-row: 2; }
  .project-specs { grid-column: 1 / span 5; grid-row: 3; align-self: start; }
  .project-text { grid-column: 7 / -1; grid-row: 2 / span 2; }
}
.project-meta { display: flex; gap: 0.9rem; color: var(--ink-2); }
.project-index { color: var(--accent); }
.project-of { display: none; }
.project-title {
  margin-top: 0.5rem; font-weight: 600;
  font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.75rem); line-height: 1.05; letter-spacing: -0.022em;
}
.project-specs .spec-sector { display: none; }
.project-specs dt { color: var(--ink-2); }
.project-specs dd { margin-top: 0.2rem; font-weight: 500; }
.project-text { max-width: var(--measure); color: var(--ink-2); }
.photo { background: #1B1E23; }
.photo img { transition: opacity 0.4s ease; }
.photo:hover img { opacity: 0.88; }

/* ---- Capabilities ------------------------------------------------------------------ */
.cap-list { display: grid; column-gap: var(--gap); }
@media (min-width: 48rem) { .cap-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 72rem) { .cap-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cap {
  display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: 0.4rem 1rem; align-content: start;
  padding: 1.75rem 0; border-bottom: 1px solid var(--rule);
}
.cap-index { grid-row: 1 / span 2; font-size: 1.5rem; font-weight: 300; line-height: 1.1; color: var(--accent); font-variant-numeric: tabular-nums; }
.cap-title { font-weight: 600; font-size: 1.1875rem; line-height: 1.3; }
.cap-detail { font-size: 0.97rem; color: var(--ink-2); line-height: 1.55; }

/* ---- Clients ----------------------------------------------------------------------- */
.quotes { display: grid; gap: clamp(2.5rem, 6vw, 4.5rem); margin-top: clamp(2rem, 5vw, 3.5rem); }
@media (min-width: 56rem) { .quotes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.quote blockquote p {
  font-weight: 350; font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.75rem); line-height: 1.4;
  letter-spacing: -0.01em; text-indent: -0.4em;
}
.quote figcaption { margin-top: 1.25rem; display: flex; flex-direction: column; gap: 0.2rem; }
.quote-name { font-weight: 600; color: var(--ink); }
a.quote-name { text-decoration-color: var(--accent); align-self: flex-start; }
.quote-role { color: var(--ink-2); font-weight: 500; }

/* ---- How SDI works ------------------------------------------------------------------ */
.practice-list { display: grid; gap: 2rem var(--gap); margin-top: clamp(2rem, 5vw, 3rem); }
@media (min-width: 40rem) { .practice-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .practice-list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.practice-item { padding-top: 1.1rem; border-top: 2px solid var(--accent); }
.practice-title { font-weight: 600; font-size: 1.125rem; }
.practice-detail { margin-top: 0.5rem; font-size: 0.97rem; color: var(--ink-2); line-height: 1.55; }

/* ---- Closing note: a panel ----------------------------------------------------------- */
.closing {
  width: calc(100% - 2 * var(--gutter)); max-width: calc(var(--max) - 2 * var(--gutter));
  margin: clamp(4.5rem, 9vw, 8rem) auto clamp(3rem, 6vw, 5rem);
  padding: clamp(2rem, 5vw, 4rem);
  background: var(--paper-2);
  display: grid; gap: 1.25rem;
}
.closing-text { max-width: 26em; font-size: clamp(1.375rem, 1.15rem + 1vw, 2rem); line-height: 1.3; font-weight: 400; letter-spacing: -0.01em; }
.closing-links { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.5rem; }
.closing-links a, .about-links a, .simple-link a {
  display: inline-block; padding: 0.75rem 1.25rem; font-weight: 600; font-size: 0.9375rem;
  color: var(--accent); text-decoration: none; border: 1px solid var(--accent);
}
.closing-links a:hover, .about-links a:hover, .simple-link a:hover { background: var(--accent); color: var(--paper); }

/* ---- Footer ---------------------------------------------------------------------------- */
.site-footer { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter) 2.5rem; }
.site-footer p {
  display: flex; flex-wrap: wrap; gap: 0.35rem 0.8rem;
  padding-top: 1.5rem; border-top: 1px solid var(--rule);
  font-size: 0.6875rem; font-weight: 500; color: var(--ink-2);
}
.site-footer a { text-decoration: none; }
.site-footer a:hover, .site-footer a[aria-current] { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); }

/* ---- Inner pages ------------------------------------------------------------------------- */
.page {
  width: 100%; max-width: var(--max); margin: 0 auto;
  padding: clamp(2rem, 6vw, 5rem) var(--gutter) clamp(4.5rem, 9vw, 8rem);
}
.page-head { padding-bottom: 1.5rem; margin-bottom: clamp(2rem, 5vw, 3.5rem); border-bottom: 1px solid var(--rule); }
.page-title { font-weight: 650; font-size: clamp(2.25rem, 1.5rem + 3vw, 4rem); letter-spacing: -0.03em; line-height: 1.02; }
.page-lead { margin-top: 1rem; max-width: var(--measure); color: var(--ink-2); }
.prose { max-width: var(--measure); display: grid; gap: 1.1em; }
.prose a { text-decoration-color: var(--accent); }

.about-body { display: grid; gap: clamp(2rem, 5vw, 3rem) var(--gap); }
@media (min-width: 48rem) {
  .about-body { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .portrait { grid-column: 1 / span 4; }
  .about .prose { grid-column: 6 / -1; }
}
.portrait { max-width: 16.25rem; }
.about-links { margin-top: 0.75rem; }

/* ---- Contact: the address, below the heading's line (owner, 2026-10-20) ------------------- */
.contact-body { display: grid; gap: 0.75rem; }
.contact-lead { max-width: var(--measure); color: var(--ink-2); }
.contact-address {
  font-weight: 500; font-size: clamp(1.375rem, 1.15rem + 1vw, 1.875rem); line-height: 1.3;
  overflow-wrap: anywhere;
}
.contact-address a { text-decoration-color: var(--accent); text-underline-offset: 0.18em; }
.contact-address a:hover { color: var(--accent); }