/* Sempervirens Automation
   Layout: a California travel poster. Flat color bands stacked like a landscape:
   sky hero with a tree-ring sun, kelp, paper, sand and redwood bands below. */
:root {
  --sky: #CFE3E6;
  --paper: #F5F7F4;
  --ink: #16262B;
  --ink-soft: #46585D;
  --redwood: #B23A22;
  --kelp: #2F5D45;
  --sand: #EFD29A;
  --ocean: #2D6E86;
  --ridge-far: #9CC3C6;
  --ridge-mid: #5E8F7E;
  --on-dark: #F4F2E9;
  --sun: #F3C77A;
  --card: #E3EEEE;

  --display: "Big Shoulders Display", "Arial Narrow", Impact, sans-serif;
  --body: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --measure: 62ch;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --sky: #142838;
    --paper: #0F1A1F;
    --ink: #EAF0EC;
    --ink-soft: #A9B8B6;
    --redwood: #E0623F;
    --kelp: #1D3B2D;
    --sand: #2C281C;
    --ocean: #1F4F63;
    --ridge-far: #24405A;
    --ridge-mid: #1F3A36;
    --sun: #D9A65A;
    --card: #182A30;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 18px/1.6 var(--body); }
img, svg { max-width: 100%; }
a { color: inherit; text-underline-offset: 4px; text-decoration-thickness: 2px; text-decoration-color: var(--redwood); }
a:hover { color: var(--redwood); }
:focus-visible { outline: 3px solid var(--redwood); outline-offset: 3px; }
p { margin: 0; max-width: var(--measure); }

.wrap {
  max-width: 1180px; margin: 0 auto;
  padding-left: max(20px, env(safe-area-inset-left, 0px));
  padding-right: max(20px, env(safe-area-inset-right, 0px));
}

h1, h2, h3, .display {
  font-family: var(--display); font-weight: 800; text-transform: uppercase;
  letter-spacing: .01em; margin: 0; text-wrap: balance;
}
h1 { font-size: clamp(58px, 10vw, 136px); line-height: .88; }
h2 { font-size: clamp(40px, 6vw, 76px); line-height: .92; }
h3 { font-size: 30px; line-height: 1; }
.label { font: 13px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; }

/* ---------- Header ---------- */
.site-header { background: var(--sky); }
.site-header .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 32px; padding-block: 20px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); }
.brand img { width: 46px; height: 46px; display: block; }
.brand-name { font: 800 28px/.9 var(--display); letter-spacing: .03em; display: grid; gap: 4px; }
.brand-name small { font: 11px/1 var(--mono); letter-spacing: .32em; }
.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 28px; }
.site-nav a { font: 800 22px/1 var(--display); text-transform: uppercase; letter-spacing: .04em; text-decoration: none; padding-block: 6px; border-bottom: 3px solid transparent; }
.site-nav a:hover, .site-nav a[aria-current="page"] { border-bottom-color: var(--redwood); color: var(--ink); }

/* ---------- Hero (home) ---------- */
.hero { background: var(--sky); position: relative; overflow: hidden; }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 24px 48px; align-items: center; padding-block: 32px calc(max(300px, 20.84vw) - 50px); position: relative; z-index: 2; }
.hero-text { display: grid; gap: 26px; min-width: 0; }
.hero h1 { font-size: clamp(50px, 7.2vw, 100px); }
.hero h1 .red { color: var(--redwood); }
.subhead { font: 700 clamp(22px, 2.4vw, 30px)/1.25 var(--body); color: var(--kelp); max-width: 28ch; }
@media (prefers-color-scheme: dark) { .subhead { color: var(--sun); } }
.lede { font-size: 21px; line-height: 1.5; }
.hint { font: 13px/1.5 var(--mono); color: var(--ink-soft); max-width: 46ch; }
.sun { position: relative; z-index: 1; justify-self: end; align-self: start; margin-top: -12px; width: min(100%, 560px); touch-action: none; cursor: crosshair; }
.sun svg { display: block; width: 100%; height: auto; overflow: visible; }
.sun .disc { fill: var(--sun); }
.sun .barkfill { fill: var(--redwood); }
.sun .pith { fill: var(--redwood); }
.sun .ring { fill: none; stroke: var(--redwood); stroke-width: 1; stroke-opacity: .5; }
.sun .ring.late { stroke-width: 2; stroke-opacity: .75; }
.sun .ray { stroke: var(--redwood); stroke-opacity: .3; stroke-width: 1; }
.sun .arm line { stroke: var(--ink); stroke-linecap: round; }
.sun .arm .joint { fill: var(--ink); }
.sun .arm .pin { fill: var(--sun); }
.sun .plate rect { fill: var(--redwood); }
.sun .plate circle { fill: var(--sun); }

/* ---------- Layered landscape ---------- */
.landscape { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: max(300px, 20.84vw); z-index: 3; pointer-events: none; display: block; }
.landscape.short { height: max(130px, 12.5vw); }
.ls-far path { fill: var(--ridge-far); }
.ls-mid path { fill: var(--ridge-mid); }
.ls-near path { fill: var(--kelp); }
.ls-fog { fill: var(--sky); opacity: .65; }
.ls-surf { fill: none; stroke: var(--sky); stroke-width: 2; stroke-linecap: round; opacity: .55; }

/* ---------- Bands ---------- */
.band { padding-block: 88px; }
.band > .wrap { display: grid; gap: 40px; }
.band.kelp { background: var(--kelp); color: var(--on-dark); }
.band.kelp a { text-decoration-color: var(--sun); }
.band.sand { background: var(--sand); }
.band.redwood { background: var(--redwood); color: var(--on-dark); }
.band.redwood a { color: var(--on-dark); text-decoration-color: var(--on-dark); }
.band.sky { background: var(--sky); }
.band.tight { padding-block: 64px; }

/* What I build: each capability is a well on a plate */
.wells-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr)); gap: 40px 56px; }
.wells-grid li { display: grid; gap: 8px; align-content: start; padding-top: 14px; border-top: 3px solid var(--sun); }
.wells-grid h3 { color: var(--sun); }
.band.kelp .wells-grid h3 { color: var(--sand); }
@media (prefers-color-scheme: dark) { .band.kelp .wells-grid h3 { color: var(--sun); } }

/* Philosophy: a big statement with a margin note */
.split { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 40px 64px; align-items: start; }
.statement { font: 800 clamp(40px, 5.4vw, 70px)/.95 var(--display); text-transform: uppercase; margin: 0; }
.statement em { font-style: normal; color: var(--redwood); }
.stack { display: grid; gap: 20px; }
.note { border-top: 3px solid var(--ink); padding-top: 12px; font: 14px/1.6 var(--mono); max-width: 44ch; }
.note i { font-family: var(--body); font-size: 16px; }

ul.plain-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; }
ul.plain-list li { padding-left: 18px; border-left: 3px solid var(--redwood); max-width: var(--measure); }
.band.kelp ul.plain-list li { border-left-color: var(--sun); }

/* Instrument manifest */
.manifest { margin: 0; display: grid; gap: 0; border-top: 3px solid var(--ink); }
.manifest div { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 4px 32px; padding-block: 16px; border-bottom: 1px solid currentColor; }
.manifest dt { font: 13px/1.8 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.manifest dd { margin: 0; font: 800 clamp(24px, 3vw, 34px)/1.1 var(--display); text-transform: uppercase; }

/* Big referral line */
.cta { display: grid; gap: 24px; }
.cta .statement { max-width: 16ch; }
.cta-link { font: 800 28px/1 var(--display); text-transform: uppercase; letter-spacing: .03em; justify-self: start; }

/* ---------- Inner page heads ---------- */
.page-head { background: var(--sky); position: relative; overflow: hidden; }
.page-head .wrap { position: relative; z-index: 4; padding-block: 40px calc(max(130px, 12.5vw) + 36px); display: grid; gap: 20px; }
.updated { font: 13px/1.4 var(--mono); color: var(--ink-soft); }

.content { padding-block: 80px; }
.content > .wrap { display: grid; gap: 72px; }
section { display: grid; gap: 20px; align-content: start; }

/* Work: a deck of plates, chamfered corner and all */
.deck { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 28px; }
.plate-card {
  position: relative; background: var(--card); padding: 30px 28px 124px;
  clip-path: polygon(26px 0, 100% 0, 100% 100%, 0 100%, 0 26px);
  display: grid; gap: 12px; align-content: start; min-height: 290px;
}
.plate-card::after {
  content: ""; position: absolute; right: 22px; bottom: 20px; width: 132px; height: 88px;
  background-image: radial-gradient(circle, var(--redwood) 3.2px, transparent 3.8px);
  background-size: 11px 11px; opacity: .35;
}
.plate-card .label { color: var(--redwood); }
.plate-card h3 { font-size: 34px; }
.plate-card:nth-child(3n+2) { background: var(--sand); }

.principles { list-style: none; margin: 0; padding: 0; counter-reset: p; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 44px 64px; }
.principles li { counter-increment: p; display: grid; grid-template-columns: 82px minmax(0, 1fr); gap: 6px 18px; }
.principles li::before { content: counter(p); grid-row: span 2; font: 800 92px/.8 var(--display); color: var(--redwood); }

.faq { display: grid; gap: 36px; }
.faq div { display: grid; gap: 10px; border-top: 3px solid var(--ink); padding-top: 16px; }
.faq h3 { font-size: 32px; }

.button {
  display: inline-block; justify-self: start; font: 800 24px/1 var(--display); text-transform: uppercase; letter-spacing: .05em;
  color: var(--on-dark); background: var(--redwood); padding: 16px 26px 14px; border: 0; text-decoration: none; cursor: pointer;
}
.button:hover { background: var(--ink); color: var(--paper); }

/* Contact */
blockquote { margin: 0; padding-left: 20px; border-left: 4px solid var(--redwood); font: 400 clamp(20px, 1.9vw, 24px)/1.5 var(--body); max-width: 34ch; }
form { display: grid; gap: 22px; max-width: 640px; }
.field { display: grid; gap: 6px; }
label { font-weight: 700; }
.hint-text { font-size: 15px; color: var(--ink-soft); }
input, select, textarea { font: inherit; color: var(--ink); background: var(--paper); width: 100%; border: 2px solid var(--ink); border-radius: 0; padding: 12px 14px; }
textarea { min-height: 160px; resize: vertical; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Footer ---------- */
.site-footer { background: var(--ink); color: var(--paper); }
.site-footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 16px 40px; padding-block: 48px; }
.site-footer .display { font: 800 44px/.9 var(--display); }
.site-footer p { font: 14px/1.7 var(--mono); }
.site-footer a { text-decoration-color: var(--redwood); }
.site-footer .tm { flex-basis: 100%; max-width: none; font-size: 12px; opacity: .7; }
@media (prefers-color-scheme: dark) { .site-footer { background: #070D10; color: var(--ink); } }

@media (max-width: 760px) {
  body { font-size: 17px; }
  .hero .wrap { grid-template-columns: minmax(0, 1fr); padding-bottom: 150px; }
  .sun { justify-self: center; align-self: auto; margin-bottom: 0; width: min(88%, 360px); order: -1; }
  .landscape { height: 170px; }
  .landscape.short { height: 96px; }
  .page-head .wrap { padding-bottom: 120px; }
  .split { grid-template-columns: minmax(0, 1fr); }
  .manifest div { grid-template-columns: minmax(0, 1fr); }
  .principles li { grid-template-columns: 56px minmax(0, 1fr); }
  .principles li::before { font-size: 64px; }
  .band { padding-block: 64px; }
}
@media (prefers-reduced-motion: no-preference) {
  .button, .site-nav a { transition: background-color .15s, border-color .15s; }
}

/* About portrait and contact avatar */
.about-intro { display: grid; grid-template-columns: minmax(220px, 360px) minmax(0, 1fr); gap: 40px 64px; align-items: start; }
.portrait { margin: 0; position: relative; }
.portrait::before { content: ""; position: absolute; inset: 14px -14px -14px 14px; background: var(--redwood); border-radius: 4px; }
.portrait img { position: relative; display: block; width: 100%; height: auto; border-radius: 4px; border: 3px solid var(--ink); }
.from { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; }
.from img { width: 80px; height: 80px; border-radius: 50%; border: 3px solid var(--kelp); flex: none; }
.from p { margin: 0; font-weight: 700; }
@media (max-width: 760px) {
  .about-intro { grid-template-columns: minmax(0, 1fr); }
  .portrait { max-width: 300px; }
}
.about-intro .lede { margin: 0 0 20px; }