/* Basalt Studio — hellobasalt.dev
   Layout: a field survey sheet. Mono specimen labels, catalogue rows, one column of olivine. */

@font-face {
  font-family: "Archivo";
  src: url("fonts/archivo-latin-ext.woff2") format("woff2");
  font-weight: 400 700; font-stretch: 100% 125%; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Archivo";
  src: url("fonts/archivo-latin.woff2") format("woff2");
  font-weight: 400 700; font-stretch: 100% 125%; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Arial sized to Archivo's metrics, so text does not reflow when Archivo arrives */
@font-face {
  font-family: "Archivo Fallback";
  src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("Roboto");
  size-adjust: 97.9%; ascent-override: 89.7%; descent-override: 21.5%; line-gap-override: 0%;
}
@font-face {
  font-family: "Archivo Wide Fallback";
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("Roboto Bold");
  font-weight: 400 900;
  size-adjust: 122.8%; ascent-override: 71.5%; descent-override: 17.1%; line-gap-override: 0%;
}
@font-face {
  font-family: "Geist Mono";
  src: url("fonts/geist-mono.woff2") format("woff2");
  font-weight: 400 600; font-style: normal; font-display: swap;
}

:root {
  /* colour */
  --paper: #F1F2EE;      /* Pumice */
  --surface: #F8F9F6;    /* Ash */
  --ink: #1A1D1C;        /* Basalt */
  --stone: #565E5A;      /* Stone */
  --rule: #D3D7D1;
  --olivine: #4A6519;    /* Olivine, for text and links */
  --olivine-fill: #8DA84A;
  /* mark */
  --m-l: #3A403D; --m-f: #2A2F2D; --m-r: #1A1D1C; --m-t: #C3C9C3; --m-a: var(--olivine-fill); --m-w: var(--ink);
  /* column field */
  --c-t: #E3E6E1; --c-l: #BCC2BC; --c-f: #9BA39D; --c-r: #737B76; --c-a: var(--olivine-fill);
  /* type */
  --display: "Archivo", "Archivo Wide Fallback", "Helvetica Neue", Arial, sans-serif;
  --body: "Archivo", "Archivo Fallback", "Helvetica Neue", Arial, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --step--1: 0.8125rem;
  --step-0: 1.0625rem;
  --step-1: 1.25rem;
  --step-2: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  --step-3: clamp(2.125rem, 1.4rem + 3vw, 3.75rem);
  --measure: 64ch;
  --wrap: 72rem;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #101312; --surface: #171B19; --ink: #E6E9E4; --stone: #99A19C; --rule: #2A302D;
    --olivine: #A6C163; --olivine-fill: #A6C163;
    --m-l: #8E9590; --m-f: #6E7671; --m-r: #545B57; --m-t: #E6E9E4;
    --c-t: #4A524D; --c-l: #363D39; --c-f: #2B312E; --c-r: #202523;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #101312; --surface: #171B19; --ink: #E6E9E4; --stone: #99A19C; --rule: #2A302D;
  --olivine: #A6C163; --olivine-fill: #A6C163;
  --m-l: #8E9590; --m-f: #6E7671; --m-r: #545B57; --m-t: #E6E9E4;
  --c-t: #4A524D; --c-l: #363D39; --c-f: #2B312E; --c-r: #202523;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--step-0);
  line-height: 1.6;
  font-stretch: 100%;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; }
a { color: inherit; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: 0.2em; }
a:hover { color: var(--olivine); text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--olivine); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--olivine-fill); color: #101312; }

.wrap {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-left: max(20px, env(safe-area-inset-left, 0px));
  padding-right: max(20px, env(safe-area-inset-right, 0px));
}
.skip { position: absolute; left: -999px; }
.skip:focus { left: 16px; top: 16px; background: var(--surface); padding: 8px 12px; z-index: 20; }

/* mark and column field */
.m-l { fill: var(--m-l); } .m-f { fill: var(--m-f); } .m-r { fill: var(--m-r); }
.m-t { fill: var(--m-t); } .m-a { fill: var(--m-a); } .m-w { fill: var(--m-w); }
.field .t { fill: var(--c-t); } .field .l { fill: var(--c-l); } .field .f { fill: var(--c-f); }
.field .r { fill: var(--c-r); } .field .a { fill: var(--c-a); }

/* labels */
.label {
  font-family: var(--mono);
  font-size: var(--step--1);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--stone);
  font-weight: 450;
}

/* header */
.site-head { border-bottom: 1px solid var(--rule); }
.site-head .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: 18px; flex-wrap: wrap; }
.brand-link { display: inline-flex; line-height: 0; }
.brand-link svg { height: 26px; width: auto; }
.nav { display: flex; gap: 22px; flex-wrap: wrap; font-size: 0.9375rem; }
.nav a { text-decoration: none; color: var(--stone); }
.nav a:hover, .nav a[aria-current="page"] { color: var(--ink); }

/* type */
h1, h2, h3 { font-family: var(--display); font-stretch: 125%; font-weight: 620; line-height: 1.04; letter-spacing: -0.02em; margin: 0; text-wrap: balance; }
h1 { font-size: var(--step-3); }
h2 { font-size: var(--step-2); }
h3 { font-size: var(--step-1); letter-spacing: -0.01em; line-height: 1.2; }
p { margin: 0; max-width: var(--measure); }
.lede { font-size: var(--step-1); line-height: 1.5; color: var(--stone); max-width: 38ch; text-wrap: pretty; }
.lede strong { color: var(--ink); font-weight: 500; }

/* hero */
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: end; padding-block: clamp(48px, 8vw, 104px) clamp(40px, 6vw, 72px); }
.hero-copy { display: grid; gap: 24px; min-width: 0; }
.hero-figure { margin: 0; display: grid; gap: 12px; min-width: 0; }
.hero-figure svg { width: 100%; height: auto; display: block; }
.hero-figure figcaption { max-width: 46ch; }
.actions { display: flex; gap: 12px; flex-wrap: wrap; padding-top: 4px; }
.button {
  display: inline-flex; align-items: center; gap: 8px;
  font: 500 0.9375rem/1 var(--body);
  padding: 13px 18px; border-radius: 4px; text-decoration: none;
  border: 1px solid var(--ink);
}
.button.primary { background: var(--ink); color: var(--paper); }
.button.primary:hover { background: var(--olivine); border-color: var(--olivine); color: var(--paper); }
.button.quiet { color: var(--ink); }
.button.quiet:hover { color: var(--olivine); border-color: var(--olivine); }

/* sections */
.section { border-top: 1px solid var(--rule); }
.section > .wrap { padding-block: clamp(48px, 7vw, 88px); display: grid; gap: clamp(28px, 4vw, 44px); }
.section-head { display: grid; grid-template-columns: minmax(0, 14rem) minmax(0, 1fr); gap: 16px 32px; align-items: baseline; }
.section-head p { color: var(--stone); }

/* product catalogue */
.catalogue { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.specimen {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1.3fr) minmax(0, 1fr) 9.5rem;
  gap: 12px 32px;
  padding-block: 28px;
  border-bottom: 1px solid var(--rule);
  align-items: start;
}
.specimen .no { font-family: var(--mono); font-size: var(--step--1); color: var(--stone); padding-top: 0.45em; font-variant-numeric: tabular-nums; }
.specimen .what { display: grid; gap: 8px; min-width: 0; }
.specimen h3 { font-size: clamp(1.375rem, 1.1rem + 1vw, 1.75rem); }
.specimen .what p { color: var(--stone); }
.specs { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 16px; font-size: 0.9375rem; padding-top: 0.3em; min-width: 0; }
.specs dt { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--stone); padding-top: 0.2em; }
.specs dd { margin: 0; }
.specimen .go { padding-top: 0.3em; white-space: nowrap; text-align: right; }
.go a { font-weight: 500; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.status { display: inline-flex; align-items: center; gap: 8px; }
.status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--stone); flex: none; }
.status.live::before { background: var(--olivine-fill); }
.status.soon::before { background: transparent; border: 1.5px solid var(--olivine-fill); }

/* principles */
.principles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.principle { display: grid; gap: 10px; align-content: start; padding-top: 18px; border-top: 1px solid var(--ink); }
.principle p { color: var(--stone); }

/* studio and contact */
.split, .section > .wrap.split { display: grid; grid-template-columns: minmax(0, 14rem) minmax(0, 1fr); gap: 16px 32px; }
.prose { display: grid; gap: 16px; }
.contacts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 0; }
.contacts div { display: grid; gap: 6px; padding-top: 14px; border-top: 1px solid var(--rule); min-width: 0; }
.contacts dt { order: 0; }
.contacts dd { margin: 0; font-family: var(--mono); font-size: 0.9375rem; overflow-wrap: anywhere; }
.contacts dd a { text-decoration: none; }
.contacts .note { font-family: var(--body); color: var(--stone); font-size: 0.9375rem; }

/* footer */
.site-foot { border-top: 1px solid var(--rule); }
.site-foot .wrap { display: flex; justify-content: space-between; gap: 16px 32px; flex-wrap: wrap; padding-block: 28px 40px; color: var(--stone); font-size: 0.875rem; }
.site-foot nav { display: flex; gap: 20px; flex-wrap: wrap; }
.site-foot a { color: var(--stone); }

@media (max-width: 860px) {
  .hero .wrap { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .hero-figure { max-width: 520px; }
  .section-head, .split, .section > .wrap.split { grid-template-columns: minmax(0, 1fr); }
  .specimen { grid-template-columns: 3rem minmax(0, 1fr); }
  .specimen .specs, .specimen .go { grid-column: 2; }
  .specimen .go { text-align: left; }
  .principles, .contacts { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}
/* phones: logo and menu stay on one row; the less important links drop out first */
@media (max-width: 520px) {
  .site-head .wrap { flex-wrap: nowrap; gap: 16px; }
  .nav { gap: 14px; flex-wrap: nowrap; font-size: 0.875rem; white-space: nowrap; }
  .nav .nav-more { display: none; }
  .brand-link svg { height: 22px; }
}
@media (max-width: 359px) {
  .nav .nav-less { display: none; }
  .brand-link svg { height: 20px; }
}
@media (prefers-reduced-motion: no-preference) {
  .button, a { transition: color .15s ease, background-color .15s ease, border-color .15s ease; }
}