/* Ultralight Base — shared design system
   Sand, off-white and black. Square edges, hairline rules, no shadows.
   Every page links this file; page files hold only layout specific to that tool. */

:root{
  /* surfaces */
  --bg:        #F7F5F1;   /* off-white page */
  --bg-raise:  #FFFFFF;   /* panels */
  --glass:     #FFFFFF;
  --glass-2:   #F7F5F1;   /* hover */
  --glass-3:   #EFEBE3;   /* pressed / selected */
  --line:      #E8E4DC;
  --line-2:    #D6D0C4;

  /* text */
  --text:      #0D0D0D;
  --text-2:    #6F6B64;
  --text-3:    #A8ACAF;

  /* accent */
  --sand:      #C2A878;
  --sand-deep: #9C8556;

  /* status */
  --moss:      #2A7A4B;   /* good / open */
  --creek:     #2A5C7A;   /* info */
  --pollen:    #7A6A2A;   /* caution */
  --manzanita: #B87333;   /* warning */
  --ember:     #B03A2E;   /* urgent */

  /* weight classes (calculator) */
  --sul: #2A7A4B;
  --ul:  #2A5C7A;
  --lw:  #7A6A2A;
  --tr:  #B87333;
  --red: #B03A2E;

  /* aliases used by inline styles inside page scripts */
  --silver: var(--text-3);
  --muted:  var(--text-2);
  --border: var(--line);
  --green:  var(--moss);
  --amber:  var(--manzanita);
  --blue:   var(--creek);
  --black:  var(--text);
  --off:    var(--bg);

  --font: 'Manrope', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'Space Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --bar-h: 52px;
  --tab-h: 60px;
  --safe-b: env(safe-area-inset-bottom, 0px);
}

*,*::before,*::after{ box-sizing: border-box; margin: 0; padding: 0; }
html{ -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--bar-h) + 12px); }
body{
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.55;
  color: var(--text);
  background: var(--bg);
  min-height: 100vh;
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a{ color: inherit; }
button, input, select{ font: inherit; color: inherit; }
::selection{ background: rgba(194, 168, 120, 0.35); }
.num{ font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* ── TOP BAR ─────────────────────────────────────────────── */
.topbar{
  position: sticky; top: 0; z-index: 60;
  height: var(--bar-h);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 0 max(20px, env(safe-area-inset-left)) 0 max(20px, env(safe-area-inset-right));
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.brand{ text-decoration: none; white-space: nowrap; font-size: 12px; font-weight: 600; letter-spacing: 0.26em; text-transform: uppercase; }
.brand span{ color: var(--sand); }

.toplinks{ display: none; gap: 28px; }
.toplinks a{
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-3); text-decoration: none;
  padding: 4px 0; border-bottom: 1px solid transparent;
  transition: color .15s, border-color .15s;
}
.toplinks a:hover{ color: var(--text); }
.toplinks a[aria-current="page"]{ color: var(--text); border-bottom-color: var(--sand); }

/* ── BOTTOM TAB BAR (phone) ──────────────────────────────── */
.tabbar{
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  height: calc(var(--tab-h) + var(--safe-b));
  padding-bottom: var(--safe-b);
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
}
.tabbar a{
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text-3); text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.tabbar a[aria-current="page"]{ color: var(--text); }
.tabbar a[aria-current="page"]::before{ content: ''; position: absolute; top: -1px; left: 28%; right: 28%; height: 2px; background: var(--sand); }
body.has-tabbar{ padding-bottom: calc(var(--tab-h) + var(--safe-b)); }

@media (min-width: 860px){
  .toplinks{ display: flex; }
  .tabbar{ display: none; }
  body.has-tabbar{ padding-bottom: 0; }
}

.ico{ fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: square; stroke-linejoin: miter; }

/* ── PAGE FRAME ──────────────────────────────────────────── */
.wrap{ width: 100%; max-width: 1100px; margin: 0 auto; padding: 0 20px; }
@media (min-width: 700px){ .wrap{ padding: 0 32px; } }

.page-head{ padding: 32px 0 24px; }
@media (min-width: 700px){ .page-head{ padding: 52px 0 32px; } }
.eyebrow{ font-size: 10px; font-weight: 500; letter-spacing: 0.32em; text-transform: uppercase; color: var(--text-3); margin-bottom: 12px; }
.page-title{ font-size: clamp(28px, 6vw, 36px); font-weight: 500; letter-spacing: -0.01em; line-height: 1.15; }
.page-sub{ margin-top: 10px; max-width: 580px; font-size: 14px; color: var(--text-2); line-height: 1.75; }

/* ── SURFACES ────────────────────────────────────────────── */
.panel{ background: transparent; border: 0; border-top: 1px solid var(--line); }
.label{ font-size: 10px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-3); }

/* ── CONTROLS ────────────────────────────────────────────── */
.field, .select{
  width: 100%; min-height: 44px;
  padding: 10px 14px;
  font-size: 16px; /* 16px stops iOS zooming on focus */
  color: var(--text);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 0;
  outline: none;
  transition: border-color .15s;
}
.field::placeholder{ color: #C8C4BC; }
.field:focus, .select:focus{ border-color: var(--sand); }
.select{
  appearance: none; -webkit-appearance: none; cursor: pointer;
  padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23A8ACAF' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
}

.btn{
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 18px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  border-radius: 0;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--text);
  cursor: pointer; text-decoration: none;
  transition: background .15s, color .15s, border-color .15s;
  -webkit-tap-highlight-color: transparent;
}
.btn:hover{ background: var(--text); color: #fff; border-color: var(--text); }
.btn-primary{ background: var(--text); color: #fff; border-color: var(--text); }
.btn-primary:hover{ background: #333; border-color: #333; }

.chips{ display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-bottom: 2px; }
.chips::-webkit-scrollbar{ display: none; }
@media (min-width: 860px){ .chips.wrap-desktop{ flex-wrap: wrap; overflow: visible; } }
.chip{
  flex-shrink: 0;
  min-height: 32px; padding: 0 12px;
  font-size: 11px; font-weight: 500; letter-spacing: 0.06em; white-space: nowrap;
  color: var(--text-2);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 0;
  cursor: pointer;
  transition: color .15s, background .15s, border-color .15s;
  -webkit-tap-highlight-color: transparent;
}
.chip:hover{ color: var(--text); border-color: var(--line-2); }
.chip.active, .chip[aria-pressed="true"]{ color: #fff; background: var(--text); border-color: var(--text); }

.seg{ display: inline-flex; border: 1px solid var(--line); background: #fff; }
.seg button{ min-width: 44px; min-height: 34px; padding: 0 12px; border: 0; background: transparent; color: var(--text-2); font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; cursor: pointer; }
.seg button.active{ background: var(--text); color: #fff; }

.tag{
  display: inline-flex; align-items: center; gap: 6px;
  height: 22px; padding: 0 8px;
  font-size: 9.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap;
  color: var(--text-2); background: var(--bg); border: 1px solid var(--line);
}
.tag.moss{ color: var(--moss); background: #EAF5EE; border-color: #CFE6D7; }
.tag.creek{ color: var(--creek); background: #EAF0F6; border-color: #CCDAE6; }
.tag.pollen{ color: var(--pollen); background: #F6F2E2; border-color: #E6DDB8; }
.tag.manz{ color: var(--manzanita); background: #FEF3E2; border-color: #F2DCBC; }
.tag.ember{ color: var(--ember); background: #FDEAEA; border-color: #F2C9C4; }

.link-arrow{ display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text); text-decoration: none; }
.link-arrow:hover{ color: var(--sand-deep); }

/* ── FOOTER ──────────────────────────────────────────────── */
.site-foot{ margin-top: 56px; padding: 22px 0 28px; border-top: 1px solid var(--line); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-3); }
.site-foot .wrap{ display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between; }

@media (prefers-reduced-motion: reduce){
  *{ transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* ── 2000s SPORT-OPTIC DETAILS ───────────────────────────── */
/* cut corners: top-left and bottom-right chamfers */
:root{ --cut: 7px; }
.cut, .btn, .chip, .tag, .seg, .seg button{
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
}
.btn, .chip, .seg{ border: 0; }
.btn{ background: var(--glass-3); }
.btn:hover{ background: var(--text); color: #fff; }
.chip{ background: var(--glass-3); color: var(--text-2); }
.chip:hover{ color: var(--text); background: #E6E1D6; }
.tag{ border: 0; }
.seg{ background: var(--glass-3); padding: 0; }
.seg button{ clip-path: none; }
.seg button.active{ clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut)); }
.tabbar a[aria-current="page"]::before{ left: 30%; right: 30%; height: 3px; clip-path: polygon(4px 0, 100% 0, calc(100% - 4px) 100%, 0 100%); }

/* forward-slanted heads */
.slant, .page-title, .brand{ display: inline-block; transform: skewX(-9deg); transform-origin: left bottom; }
.page-title{ display: block; text-transform: uppercase; font-weight: 700; letter-spacing: -0.005em; }

/* spec microtext */
.spec-tx{ font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); }
.spec-tx b{ font-weight: 700; color: var(--sand-deep); }
.eyebrow{ font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; }
.eyebrow b{ font-weight: 700; color: var(--sand-deep); }

/* lens-curve rule: a shallow arc, used under page heads */
.lens{ display: block; width: 100%; height: 22px; margin-top: 22px; color: var(--sand); }
.lens path{ fill: none; stroke: currentColor; stroke-width: 1; vector-effect: non-scaling-stroke; }
.lens path + path{ stroke: var(--line-2); }

/* text arrows replace icons */
.arr{ display: inline-block; font-weight: 400; color: var(--sand-deep); transition: transform .2s; }
a:hover .arr{ transform: translateX(3px); }
[hidden]{ display: none !important; }
.site-foot a{ color: inherit; text-decoration: none; }
.site-foot a:hover{ color: var(--text); }
.btn-primary{ background: var(--text); color: #fff; }
.btn-primary:hover{ background: #333; color: #fff; }