/* SELFSTORAGELOCK — main stylesheet
   Static site, no build step. Edit this file directly.
   Layers: reset < tokens < base < layout < components < utilities */

@layer reset, tokens, base, layout, components, utilities;

/* ---------- Fonts (self-hosted, no third-party requests) ---------- */

@font-face {
  font-family: "Archivo";
  src: url("fonts/archivo-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* Metric-tuned fallback: Arial adjusted to Archivo's metrics so a late
   font swap causes no layout shift. Values measured with fonttools. */
@font-face {
  font-family: "Archivo Fallback";
  src: local("Arial"), local("Liberation Sans");
  size-adjust: 98.67%;
  ascent-override: 88.98%;
  descent-override: 21.28%;
  line-gap-override: 0%;
}

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  html { -webkit-text-size-adjust: 100%; }
  body { min-block-size: 100svh; }
  img, picture, svg, video { display: block; max-inline-size: 100%; block-size: auto; }
  input, button, textarea, select { font: inherit; }
  h1, h2, h3, h4 { overflow-wrap: break-word; }
  ul[class], ol[class], nav ul, nav ol { list-style: none; padding: 0; }
}

@layer tokens {
  :root {
    color-scheme: light dark;

    /* Brand constants (do not theme) */
    --ssl-blue: #0055FD;
    --ssl-dark: #1E1E1C;
    --on-brand: #FFFFFF;

    /* Light theme (default) */
    --bg: #FFFFFF;
    --surface: #F5F5F3;
    --text: #1E1E1C;
    --muted: #56564F;          /* 7.40:1 on --bg, 6.77:1 on --surface */
    --accent: #0055FD;         /* 5.65:1 on --bg */
    /* Brand blue used as a GRAPHIC (rules, squares, the band's top edge).
       True #0055FD only reaches 2.96:1 on the #1E1E1C surface, just under the
       3:1 non-text threshold, so dark surfaces get a hair-lifted blue that is
       indistinguishable by eye. Buttons keep true --ssl-blue: they carry white
       text at 5.65:1 and are the real brand moment. */
    --rule: var(--ssl-blue);   /* 5.65:1 on --bg, 5.42:1 on --surface */
    --line: #E2E1DC;
    --line-strong: #C9C8C2;
    --header-bg: color-mix(in srgb, #FFFFFF 88%, transparent);
    --pending-bg: #FAF3E3;
    --pending-border: #B97700;
    --pending-label: #6E4A00;
    --shadow: 0 1px 2px rgb(30 30 28 / 0.06), 0 8px 24px rgb(30 30 28 / 0.07);

    /* Fluid type scale, Utopia method, 320px to 1440px viewport */
    --step--1: clamp(0.875rem, 0.8536rem + 0.1071vi, 0.95rem);
    --step-0:  clamp(1rem, 0.9643rem + 0.1786vi, 1.125rem);
    --step-1:  clamp(1.2rem, 1.1411rem + 0.2946vi, 1.4063rem);
    --step-2:  clamp(1.44rem, 1.3492rem + 0.454vi, 1.7578rem);
    --step-3:  clamp(1.728rem, 1.594rem + 0.6706vi, 2.1975rem);
    --step-4:  clamp(2.0738rem, 1.8814rem + 0.9616vi, 2.7469rem);
    --step-5:  clamp(2.4881rem, 2.2181rem + 1.35vi, 3.4331rem);
    --step-6:  clamp(2.9863rem, 2.6134rem + 1.8643vi, 4.2913rem);

    /* Fluid space scale, same slopes as the type scale */
    --space-3xs: clamp(0.3125rem, 0.2946rem + 0.0893vi, 0.375rem);
    --space-2xs: clamp(0.5rem, 0.4821rem + 0.0893vi, 0.5625rem);
    --space-xs:  clamp(0.75rem, 0.7143rem + 0.1786vi, 0.875rem);
    --space-s:   clamp(1rem, 0.9643rem + 0.1786vi, 1.125rem);
    --space-m:   clamp(1.5rem, 1.4464rem + 0.2679vi, 1.6875rem);
    --space-l:   clamp(2rem, 1.9286rem + 0.3571vi, 2.25rem);
    --space-xl:  clamp(3rem, 2.8929rem + 0.5357vi, 3.375rem);
    --space-2xl: clamp(4rem, 3.8571rem + 0.7143vi, 4.5rem);
    --space-3xl: clamp(6rem, 5.7857rem + 1.0714vi, 6.75rem);

    /* Hardware, not app store: near-square edges throughout. */
    --radius-s: 3px;
    --radius-m: 3px;
    --radius-l: 4px;
    --wrap-max: 72rem;
    --wrap-narrow: 48rem;   /* reading measure container, prose pages */
    --measure: 65ch;
  }

  @media (prefers-color-scheme: dark) {
    :root {
      --bg: #151514;
      --surface: #1E1E1C;
      --text: #F0EFEC;
      --muted: #ABA9A1;        /* 7.76:1 on --bg, 7.09:1 on --surface */
      --accent: #5C8DFF;       /* 5.84:1 on --bg, 5.33:1 on --surface */
      --rule: #0A5CFF;         /* 3.45:1 on --bg, 3.17:1 on --surface */
      --line: #33322F;
      --line-strong: #4A4945;
      --header-bg: color-mix(in srgb, #151514 85%, transparent);
      --pending-bg: #2B2416;
      --pending-border: #B97700;
      --pending-label: #E5B963;
      /* Black-on-near-black elevation is invisible. Dark carries structure on
         hairlines instead, which is also the more industrial read. */
      --shadow: none;
    }
  }
}

@layer base {
  html { scroll-behavior: smooth; }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
      transition-duration: 0.01ms !important;
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
    }
  }

  body {
    font-family: "Archivo", "Archivo Fallback", Arial, sans-serif;
    font-size: var(--step-0);
    line-height: 1.6;
    background-color: var(--bg);
    color: var(--text);
  }

  h1, h2, h3, h4 {
    line-height: 1.15;
    font-weight: 650;
    letter-spacing: -0.015em;
    text-wrap: balance; /* enhancement, ignored where unsupported */
  }

  p, li { max-inline-size: var(--measure); }

  a { color: var(--accent); text-decoration-thickness: 0.08em; text-underline-offset: 0.15em; }
  a:hover { text-decoration-thickness: 0.14em; }

  :focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 2px;
    border-radius: 2px;
  }

  ::selection { background: var(--ssl-blue); color: var(--on-brand); }

  strong { font-weight: 650; }
}

@layer layout {
  .wrap {
    max-inline-size: var(--wrap-max);
    margin-inline: auto;
    padding-inline: var(--space-m);
  }

  .section { padding-block: var(--space-3xl); }
  .section + .section { padding-block-start: 0; }

  .section-head { margin-block-end: var(--space-xl); }

  /* Landing-page section headings. Without this they fall back to the UA
     default 1.5em and end up SMALLER than the intro paragraph under them,
     which flattens the whole page below the hero. Ramp is
     h1 step-5 -> section h2 step-3 -> card model step-3 -> body step-0. */
  .section-head h2,
  .split h2,
  .panel h2 { font-size: var(--step-3); }

  .section-head p { color: var(--muted); font-size: var(--step-0); line-height: 1.6; margin-block-start: var(--space-s); }

  .skip-link {
    position: absolute;
    inset-block-start: var(--space-2xs);
    inset-inline-start: var(--space-2xs);
    z-index: 100;
    background: var(--bg);
    color: var(--text);
    padding: var(--space-2xs) var(--space-s);
    border-radius: var(--radius-s);
    border: 2px solid var(--accent);
    transform: translateY(-200%);
  }
  .skip-link:focus-visible { transform: none; }
}

@layer components {

  /* ---------- Header ---------- */

  .site-header {
    position: sticky;
    inset-block-start: 0;
    z-index: 50;
    background: var(--header-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-block-end: 1px solid var(--line);
  }
  .site-header .wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2xs) var(--space-m);
    min-block-size: 4.25rem;
    padding-block: var(--space-2xs);
  }
  .brand {
    color: var(--text);
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    border-radius: var(--radius-s);
  }
  /* Sized by height, not width: the header variant is a single-line wordmark,
     so its height is the thing that has to stay legible. */
  .brand svg { block-size: clamp(1.75rem, 1.55rem + 0.9vi, 2.125rem); inline-size: auto; }

  .site-nav ul {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2xs) var(--space-s);
  }
  .site-nav a {
    display: inline-block;
    color: var(--text);
    text-decoration: none;
    font-weight: 500;
    font-size: var(--step--1);
    padding: var(--space-2xs) var(--space-2xs); /* keeps 24px minimum target */
    border-radius: var(--radius-s);
  }
  .site-nav a:hover { color: var(--accent); }
  .site-nav a[aria-current="page"] { color: var(--accent); }

  /* ---------- Buttons ---------- */

  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2xs);
    padding: 0.8em 1.5em;
    border-radius: var(--radius-s);
    font-weight: 600;
    font-size: var(--step-0);
    text-decoration: none;
    border: 1px solid transparent;
    transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
  }
  .btn-primary { background: var(--ssl-blue); color: var(--on-brand); }
  .btn-primary:hover { background: color-mix(in oklab, var(--ssl-blue), var(--text) 14%); }
  .btn-secondary { border-color: var(--line-strong); color: var(--text); }
  .btn-secondary:hover { border-color: var(--accent); color: var(--accent); }
  .btn-small { font-size: var(--step--1); padding: 0.55em 1.1em; }

  /* ---------- Eyebrow ---------- */

  .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    font-size: var(--step--1);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent);
    margin-block-end: var(--space-s);
  }
  /* The house device: a short blue rule, lifted from the horizontal rule that
     runs through the client's own lockup. Repeated at every eyebrow and above
     each page title so the four pages read as one family. */
  .eyebrow::before {
    content: "";
    inline-size: 1.25em;
    block-size: 2px;
    background: var(--rule);
  }

  /* ---------- Hero ---------- */

  .hero {
    border-block-end: 1px solid var(--line);
    background: var(--bg);
  }
  .hero .wrap {
    display: grid;
    gap: var(--space-2xl);
    align-items: center;
    padding-block: var(--space-2xl);
  }
  @media (min-width: 56em) {
    .hero .wrap { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-3xl); }
  }
  .hero h1 {
    font-size: var(--step-5);
    line-height: 1.06;
    letter-spacing: -0.025em;
    font-weight: 700;
    max-inline-size: 18ch;
  }
  .hero h1 em { font-style: normal; color: var(--accent); }
  .hero .lead {
    font-size: var(--step-1);
    line-height: 1.5;
    color: var(--muted);
    margin-block-start: var(--space-m);
    max-inline-size: 36ch;
  }
  .hero .cta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-s);
    margin-block-start: var(--space-l);
  }
  /* Photography is the most industrial asset here. Square-cut with a hairline,
     no radius and no drop shadow: the product, not a framed picture. */
  .hero-figure { margin: 0; }
  .hero-figure img {
    inline-size: 100%;
    border: 1px solid var(--line);
  }

  /* ---------- System cards ---------- */

  .cards {
    container-type: inline-size;
  }
  .card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
    gap: var(--space-m);
  }
  /* Cards are equipment nameplates: model designation as display type, the
     descriptor under it, and the access methods as a spec line below a rule.
     No hover state, because nothing in a card is clickable. */
  .card {
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-l);
    overflow: hidden;
  }
  .card img { inline-size: 100%; aspect-ratio: 3 / 2.4; object-fit: cover; }
  .card-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: var(--space-m);
  }
  .card-title { display: flex; flex-direction: column; gap: var(--space-3xs); }
  .card-model {
    font-size: var(--step-3);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.01em;
  }
  .card-desc {
    font-size: var(--step-0);
    font-weight: 500;
    line-height: 1.3;
    color: var(--muted);
    letter-spacing: normal;
  }

  /* Spec line sits a fixed distance below the title, NOT bottom-anchored, so
     the hairline rules align across all three cards even though each system
     has a different number of access methods. */
  .spec-label {
    margin-block-start: var(--space-m);
    font-size: var(--step--1);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
  }
  .card .tags {
    display: block;
    margin-block-start: var(--space-3xs);
    padding-block-start: var(--space-2xs);
    border-block-start: 1px solid var(--line-strong);
    font-size: var(--step--1);
    line-height: 1.5;
    color: var(--muted);
  }
  .tag { display: inline; }
  .tag:not(:last-child)::after {
    content: "\00B7";
    margin-inline: 0.45em;
  }

  /* When the card row collapses to a single column, let images breathe less */
  @container (max-width: 36em) {
    .card img { aspect-ratio: 3 / 2; }
  }

  /* ---------- Split feature section (the software) ---------- */

  .split {
    background: var(--surface);
    border-block: 1px solid var(--line);
  }
  .split .wrap {
    display: grid;
    gap: var(--space-2xl);
    align-items: center;
    padding-block: var(--space-3xl);
  }
  @media (min-width: 56em) {
    .split .wrap { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--space-3xl); }
  }
  .split p { color: var(--muted); font-size: var(--step-0); line-height: 1.6; margin-block-start: var(--space-s); }
  .split-figure { margin: 0; }
  /* Brent supplied a dedicated landscape gate shot for this section. */
  .split-figure img {
    inline-size: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    object-position: 50% 38%;
    border: 1px solid var(--line);
  }
  .checklist { margin-block-start: var(--space-m); }
  .checklist li {
    display: flex;
    gap: var(--space-xs);
    align-items: baseline;
    padding-block: var(--space-xs);
    border-block-end: 1px solid var(--line);
  }
  .checklist li:last-child { border-block-end: 0; }
  .checklist li::before {
    content: "";
    flex: none;
    inline-size: 0.5em;
    block-size: 0.5em;
    background: var(--rule);
  }

  /* ---------- Contact panel ---------- */

  /* The page closes on a full-bleed band, the way a hardware catalogue does,
     and it is IDENTICAL in both themes, so the last beat of the page stops
     being a filter of the first. Edge to edge rather than an inset box: at
     --ssl-dark on a --bg of #151514 an inset panel all but disappears in dark,
     while a full-width band plus the blue rule reads clearly in both.
     Theme tokens are redefined locally so descendants inherit them. Ratios on
     --ssl-dark: text 14.52:1, muted 7.09:1, accent 5.33:1, and white on the
     brand-blue button 5.65:1. */
  .panel {
    --text: #F0EFEC;
    --muted: #ABA9A1;
    --accent: #5C8DFF;
    --rule: #0A5CFF;
    background: var(--ssl-dark);
    border-block-start: 3px solid var(--rule);
    color: var(--text);
    padding-block: var(--space-3xl);
    text-align: center;
  }
  .panel .eyebrow { justify-content: center; }
  .panel p { margin-inline: auto; color: var(--muted); margin-block: var(--space-s) var(--space-l); max-inline-size: 46ch; }

  /* ---------- Footer ---------- */

  .site-footer {
    border-block-start: 1px solid var(--line);
    padding-block: var(--space-xl);
    font-size: var(--step--1);
    color: var(--muted);
  }
  .site-footer .wrap {
    display: grid;
    gap: var(--space-l);
  }
  @media (min-width: 42em) {
    .site-footer .wrap { grid-template-columns: 1fr auto; align-items: start; }
  }
  .site-footer a { color: var(--muted); }
  .site-footer a:hover { color: var(--accent); }
  .footer-brand { color: var(--text); margin-block-end: var(--space-s); display: inline-block; }
  .footer-brand svg { inline-size: 2.25rem; block-size: auto; }
  .footer-legal { font-style: normal; line-height: 1.7; }
  .footer-nav ul { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-m); }
  .footer-nav a { display: inline-block; padding-block: var(--space-3xs); }
  .footer-meta { grid-column: 1 / -1; border-block-start: 1px solid var(--line); padding-block-start: var(--space-s); }

  /* ---------- Legal / prose pages ---------- */

  /* Prose pages centre on a reading measure. At 72rem the 65ch column pinned
     left leaves a ~500px empty right field, which reads as an unfinished
     two-column layout rather than a designed document. */
  .page-head,
  .prose {
    max-inline-size: var(--wrap-narrow);
    margin-inline: auto;
  }

  .page-head { padding-block: var(--space-2xl) 0; }
  .page-head h1 { font-size: var(--step-4); }
  /* Same blue rule as the eyebrow, so the legal pages read as one family
     with the landing page. */
  .page-head h1::before {
    content: "";
    display: block;
    inline-size: 2.5rem;
    block-size: 3px;
    background: var(--rule);
    margin-block-end: var(--space-s);
  }
  .page-head .updated { color: var(--muted); font-size: var(--step--1); margin-block-start: var(--space-s); }

  .breadcrumb { font-size: var(--step--1); color: var(--muted); margin-block-end: var(--space-l); }
  .breadcrumb ol { display: flex; flex-wrap: wrap; gap: var(--space-2xs); }
  .breadcrumb li + li::before { content: "/"; margin-inline-end: var(--space-2xs); color: var(--line-strong); }
  .breadcrumb a { color: var(--muted); }

  .prose { padding-block: var(--space-2xl) var(--space-3xl); }
  .prose > * + * { margin-block-start: var(--space-s); }
  .prose h2 { font-size: var(--step-2); margin-block-start: var(--space-xl); }
  .prose h3 { font-size: var(--step-1); margin-block-start: var(--space-l); }
  .prose ul,
  .prose ol { padding-inline-start: 1.2em; }
  .prose li + li { margin-block-start: var(--space-3xs); }
  .prose .lead-in { font-size: var(--step-1); line-height: 1.5; color: var(--muted); }

  .policy-contact {
    background: var(--surface);
    border-inline-start: 3px solid var(--rule);
    padding: var(--space-s) var(--space-m);
  }

  .processing-list {
    display: grid;
    gap: var(--space-m);
    margin-block-start: var(--space-l);
  }
  .processing-item {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-m);
    padding: var(--space-m);
  }
  .processing-item h3 { margin-block-start: 0; }
  .policy-facts {
    display: grid;
    gap: var(--space-s);
    margin-block-start: var(--space-m);
  }
  .policy-facts div {
    border-block-start: 1px solid var(--line);
    padding-block-start: var(--space-s);
  }
  .policy-facts dt {
    color: var(--muted);
    font-size: var(--step--1);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .policy-facts dd { margin: var(--space-3xs) 0 0; }
  @media (min-width: 44rem) {
    .policy-facts { grid-template-columns: 1fr 1fr; }
  }

  /* Pending client input: impossible to miss, in both themes */
  .pending {
    background: var(--pending-bg);
    border: 2px dashed var(--pending-border);
    border-radius: var(--radius-m);
    padding: var(--space-s) var(--space-m);
  }
  .pending > strong {
    display: block;
    color: var(--pending-label);
    font-size: var(--step--1);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-block-end: var(--space-3xs);
  }

  .contact-list { display: grid; gap: var(--space-s); margin-block-start: var(--space-m); }
  .contact-list div {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-m);
    padding: var(--space-s) var(--space-m);
  }
  .contact-list dt { font-size: var(--step--1); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
  .contact-list dd { margin: var(--space-3xs) 0 0; font-size: var(--step-1); font-weight: 600; overflow-wrap: anywhere; }
  @media (min-width: 42em) {
    .contact-list { grid-template-columns: 1fr 1fr; }
  }
}

@layer utilities {
  .visually-hidden {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
  .muted { color: var(--muted); }
}