/* One Or More Gnomes — site styles.
   Palette, type and structure follow the identity concept sheet:
   Slate Ink on Snowlight, white cards, hairline rules, 4px radius,
   Outfit for everything spoken and JetBrains Mono for everything labelled.

   Fonts are self-hosted. The site makes no third-party requests of any
   kind, which is what lets the privacy policy say so plainly. */

/* ---- fonts --------------------------------------------------------- */

@font-face{
  font-family:"Outfit";font-style:normal;font-weight:300;font-display:swap;
  src:url("/fonts/outfit-latin-300-normal.woff2") format("woff2");
}
@font-face{
  font-family:"Outfit";font-style:normal;font-weight:400;font-display:swap;
  src:url("/fonts/outfit-latin-400-normal.woff2") format("woff2");
}
@font-face{
  font-family:"Outfit";font-style:normal;font-weight:600;font-display:swap;
  src:url("/fonts/outfit-latin-600-normal.woff2") format("woff2");
}
@font-face{
  font-family:"Outfit";font-style:normal;font-weight:800;font-display:swap;
  src:url("/fonts/outfit-latin-800-normal.woff2") format("woff2");
}
@font-face{
  font-family:"JetBrains Mono";font-style:normal;font-weight:400;font-display:swap;
  src:url("/fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2");
}

/* ---- tokens -------------------------------------------------------- */

:root{
  --ink:#26313f;          /* Slate Ink   */
  --snow:#f7f4ec;         /* Snowlight   */
  --pine:#2b8f63;         /* Pine        */
  --clay:#c06a4f;         /* Nose Clay   */
  --surf:#ffffff;

  --ink-80:rgba(38,49,63,.80);
  --ink-72:rgba(38,49,63,.72);
  --ink-55:rgba(38,49,63,.55);
  --hair:rgba(38,49,63,.10);
  --hair-strong:rgba(38,49,63,.14);

  --font:"Outfit",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --r:4px;
  --page:868px;
  --card-pad-x:clamp(22px,4vw,34px);
  --prose:62ch;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  padding:clamp(28px,5vw,64px) clamp(20px,5vw,56px) clamp(56px,9vw,96px);
  background:var(--snow);
  color:var(--ink);
  font:400 17px/1.6 var(--font);
  -webkit-font-smoothing:antialiased;
}

.page{
  max-width:var(--page);
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:clamp(40px,7vw,72px);
}

/* ---- utility labels ------------------------------------------------ */

.label{
  font:400 11px/1.4 var(--mono);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-55);
  margin:0;
}
.label-pine{color:var(--pine)}

/* ---- masthead ------------------------------------------------------ */

.masthead{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:24px;
  flex-wrap:wrap;
  border-bottom:1px solid var(--hair-strong);
  padding-bottom:18px;
}

.masthead a{
  color:var(--ink-55);
  text-decoration:none;
}
.masthead a:hover{color:var(--pine)}

/* ---- hero ---------------------------------------------------------- */

.hero{
  background:var(--surf);
  border:1px solid var(--hair);
  border-radius:var(--r);
  padding:clamp(48px,9vw,80px) clamp(24px,5vw,40px) clamp(44px,7vw,72px);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:clamp(30px,5vw,44px);
}

.mark{
  width:min(400px,78vw);
  height:auto;
  color:var(--ink);
  overflow:visible;
}

/* The mark's whole idea: a mountain range at a glance, gnomes on a
   closer look. The faces arrive a beat after the hats so the page
   performs that reading once, on load. */
.mark .faces{
  animation:faces-in .55s ease-out .75s both;
}
@keyframes faces-in{from{opacity:0}to{opacity:1}}

.lockup{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  text-align:center;
}

.lockup .qualifier{
  font-size:clamp(13px,2.6vw,19px);
  font-weight:300;
  letter-spacing:.42em;
  text-transform:uppercase;
  padding-left:.42em;
  margin:0;
}

.lockup .wordmark{
  font-size:clamp(38px,9vw,64px);
  font-weight:800;
  letter-spacing:.06em;
  line-height:.95;
  text-transform:uppercase;
  padding-left:.06em;
  margin:0;
}

.tagline{
  margin:0;
  color:var(--ink-72);
  font-size:1rem;
  text-align:center;
  max-width:36ch;
}

/* ---- sections ------------------------------------------------------ */

.section{
  display:flex;
  flex-direction:column;
  gap:22px;
}

.section > h2{
  margin:0;
  font-size:clamp(21px,3.4vw,26px);
  font-weight:600;
  letter-spacing:-.01em;
  line-height:1.2;
}

.section-head{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.card{
  background:var(--surf);
  border:1px solid var(--hair);
  border-radius:var(--r);
  padding:clamp(26px,4vw,36px) var(--card-pad-x);
}

.card > *:first-child{margin-top:0}
.card > *:last-child{margin-bottom:0}

.card h3{
  margin:0 0 4px;
  font-size:clamp(24px,4vw,30px);
  font-weight:800;
  letter-spacing:.02em;
  text-transform:uppercase;
  line-height:1.05;
}

.card .label{margin-bottom:20px}

p{margin:0 0 16px;max-width:var(--prose);text-wrap:pretty}
p:last-child{margin-bottom:0}

ul{margin:0 0 16px;padding-left:20px;max-width:var(--prose)}
li{margin-bottom:7px}
li::marker{color:var(--pine)}

strong{font-weight:600}

a{
  color:var(--pine);
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-thickness:1px;
  text-decoration-color:rgba(43,143,99,.4);
}
a:hover{text-decoration-color:var(--pine)}
a:focus-visible{
  outline:2px solid var(--clay);
  outline-offset:3px;
  border-radius:2px;
}

/* ---- screenshots --------------------------------------------------- */

/* A plain horizontal strip. It bleeds to the card's padding edges so the
   shots line up with the text above them and the last one runs off the
   side, which is what tells you there are more. No carousel, no JS. */

.shots{
  display:flex;
  gap:12px;
  margin:26px calc(var(--card-pad-x) * -1) 0;
  padding:3px var(--card-pad-x);
  overflow-x:auto;
  overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;
  scroll-padding-left:var(--card-pad-x);
  scrollbar-width:thin;
  scrollbar-color:var(--hair-strong) transparent;
}

.shots:focus-visible{
  outline:2px solid var(--clay);
  outline-offset:-1px;
  border-radius:2px;
}

.shots figure{
  margin:0;
  flex:none;
  display:flex;
  flex-direction:column;
  gap:10px;
  scroll-snap-align:start;
}

/* Height is fixed and width follows from each file's own proportions, so
   portrait and landscape shots can sit in the same strip. */
.shots img{
  display:block;
  height:clamp(240px,50vh,400px);
  width:auto;
  border:1px solid var(--hair-strong);
  border-radius:10px;
  background:var(--snow);
}

.shots .label{
  margin:0;
  max-width:24ch;
  line-height:1.5;
}

/* ---- status chip --------------------------------------------------- */

.status{
  display:inline-flex;
  align-items:center;
  gap:9px;
  margin-top:22px;
  padding:8px 14px;
  border:1px solid var(--hair-strong);
  border-radius:999px;
  font:400 11px/1 var(--mono);
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ink-72);
}
.status::before{
  content:"";
  width:6px;height:6px;
  border-radius:50%;
  background:var(--clay);
  flex:none;
}

/* ---- footer -------------------------------------------------------- */

.foot{
  border-top:1px solid var(--hair-strong);
  padding-top:20px;
  display:flex;
  flex-direction:column;
  gap:9px;
}

.foot .label{color:var(--ink-55)}
.foot a{
  color:var(--ink-55);
  text-decoration-color:var(--hair-strong);
}
.foot a:hover{color:var(--pine)}

.count{color:var(--clay)}

/* ---- policy page --------------------------------------------------- */

.doc-head{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.doc-head h1{
  margin:0;
  font-size:clamp(32px,6.5vw,46px);
  font-weight:800;
  letter-spacing:.02em;
  text-transform:uppercase;
  line-height:1;
}

.summary{
  background:var(--surf);
  border:1px solid var(--hair);
  border-left:3px solid var(--pine);
  border-radius:var(--r);
  padding:22px 24px;
}
.summary p{max-width:none}

.doc .section{gap:14px}
.doc .section > h2{
  font-size:clamp(18px,3vw,21px);
  padding-top:22px;
  border-top:1px solid var(--hair);
}
.doc h3{
  margin:22px 0 8px;
  font-size:16px;
  font-weight:600;
  letter-spacing:.01em;
}
.doc h3:first-of-type{margin-top:6px}

.backlink{
  display:inline-flex;
  align-items:center;
  gap:11px;
  text-decoration:none;
  color:var(--ink-55);
  font:400 11px/1 var(--mono);
  letter-spacing:.14em;
  text-transform:uppercase;
  align-self:flex-start;
}
.backlink img{width:34px;height:auto;display:block}
.backlink:hover{color:var(--pine)}

/* ---- 404 ----------------------------------------------------------- */

.stub{
  display:flex;
  flex-direction:column;
  gap:16px;
  align-items:flex-start;
}
.stub h1{
  margin:0;
  font-size:clamp(28px,6vw,40px);
  font-weight:800;
  letter-spacing:.02em;
  text-transform:uppercase;
  line-height:1.05;
}

/* ---- quality floor ------------------------------------------------- */

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-delay:0ms !important;
    transition-duration:.001ms !important;
  }
}

@media (prefers-contrast:more){
  :root{
    --ink-72:rgba(38,49,63,.92);
    --ink-55:rgba(38,49,63,.8);
    --hair:rgba(38,49,63,.3);
    --hair-strong:rgba(38,49,63,.4);
  }
}

/* ---- inline mark parts (CSP-safe: no style attributes) ------------- */

.mark .knock{fill:var(--surf);stroke:var(--surf)}
.mark .line{fill:none;stroke:currentColor}
.mark .fill{fill:currentColor}
.mark .nose{fill:var(--surf);stroke:currentColor}