/* ==========================================================================
   JanstechApps landing page (index.html)

   Design direction: "JanstechApps Product Editorial".
   Full rationale and rules: docs/janstechapps-redesign.md

   The short version:
   - one flat, warm charcoal page; no ambient washes, no glow, no dot grid
   - hairlines and whitespace separate content, not rounded card frames
   - one copper brand accent; per-app colours are small identifiers only
   - serif display for the site's own voice, sans for product names and UI,
     mono for metadata labels and index numbers

   App pages under /apps/ use style.css and legal pages under /legal/ use their
   own local stylesheet, so this file carries its own reset and tokens.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */

:root{
  /* Page surfaces. Warm charcoal rather than navy: no gradient, no image. */
  --page-bg:#121110;
  --page-bg-raised:#171614;
  --surface:#1b1917;
  --surface-subtle:#151412;

  /* Text */
  --text:#ece9e6;
  --text-muted:#b5aea6;
  --text-dim:#8f8880;

  /* Hairlines. The main structural device on this page. */
  --rule:#2b2825;
  --rule-strong:#443e38;

  /* Brand accent: one warm copper, used sparingly. */
  --brand:#e07a4f;
  --brand-hover:#f0906a;
  --brand-soft:rgba(224,122,79,.14);
  --on-brand:#1a0d06;
  --focus:#e07a4f;

  /* Per-app identifiers: an index number, a bullet rule, an icon frame edge.
     Never a background, a glow or a whole card. */
  --accent-kauppalista:#8fb894;
  --accent-waveiq:#8aa6c6;
  --accent-gainsai:#c78d6a;
  --accent-tyotori:#a79ac6;
  --app-accent:var(--brand);

  /* Type families. System stacks only, no downloaded fonts. */
  --font-sans:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --font-display:"Iowan Old Style","Hoefler Text",Georgia,"Noto Serif",serif;
  --font-mono:ui-monospace,"Cascadia Mono","Segoe UI Mono",Menlo,Consolas,monospace;

  /* Type scale */
  --fs-display:clamp(2.15rem, 1.55rem + 2.7vw, 3.25rem);
  --fs-h2:clamp(1.5rem, 1.28rem + 1vw, 2.05rem);
  --fs-h3:clamp(1.14rem, 1.08rem + .3vw, 1.32rem);
  --fs-lede:clamp(1.06rem, 1.01rem + .28vw, 1.2rem);
  --fs-body:1.0625rem;
  --fs-small:.9375rem;
  --fs-meta:.8125rem;
  --fs-label:.75rem;

  --lh-display:1.08;
  --lh-heading:1.2;
  --lh-body:1.65;

  /* Spacing scale (4px base) */
  --space-1:.25rem;
  --space-2:.5rem;
  --space-3:.75rem;
  --space-4:1rem;
  --space-5:1.5rem;
  --space-6:2rem;
  --space-7:3rem;
  --space-8:4rem;
  --space-9:6rem;

  /* Layout */
  --shell:1240px;
  --gutter:20px;
  --measure:64ch;
  --prose:68ch;
  --section-gap:clamp(3rem, 2rem + 4.5vw, 5.25rem);

  /* Radii stay small: buttons and icon frames only. */
  --radius-sm:4px;
  --radius-md:8px;
  --radius-icon:11px;

  --t:.18s ease;
}

@media (min-width: 640px){
  :root{ --gutter:32px; }
}

@media (min-width: 1100px){
  :root{ --gutter:48px; }
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */

*{ box-sizing:border-box; }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:2rem;
}

body{
  margin:0;
  min-height:100vh;
  background:var(--page-bg);
  color:var(--text);
  font-family:var(--font-sans);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  overflow-wrap:break-word;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{
  margin:0;
  line-height:var(--lh-heading);
  text-wrap:balance;
}

/* The site's own voice: hero title and section titles. */
h1,h2{
  font-family:var(--font-display);
  font-weight:600;
  letter-spacing:-.012em;
}

/* Product names and UI: the sans voice. */
h3{
  font-family:var(--font-sans);
  font-weight:600;
  letter-spacing:-.005em;
}

p{ margin:0; }

ul,ol{ margin:0; padding:0; list-style:none; }

img{ max-width:100%; height:auto; }

a{ color:inherit; text-decoration:none; }

dl,dd{ margin:0; }

/* .btn is inline-flex, which would otherwise beat the user-agent [hidden]
   rule and reveal elements a page keeps hidden until it has verified data. */
[hidden]{ display:none !important; }

a:focus-visible,
button:focus-visible{
  outline:2px solid var(--focus);
  outline-offset:3px;
  border-radius:var(--radius-sm);
}

.skip-link{
  position:absolute;
  top:-100px;
  left:var(--gutter);
  z-index:10;
  padding:.7rem 1.1rem;
  border-radius:var(--radius-sm);
  background:var(--brand);
  color:var(--on-brand);
  font-weight:700;
  transition:top var(--t);
}

.skip-link:focus{ top:12px; }

/* --------------------------------------------------------------------------
   3. Layout and shared typographic helpers
   -------------------------------------------------------------------------- */

.shell{
  width:100%;
  max-width:var(--shell);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

.section{ padding-block:var(--section-gap); }

/* Sections are separated by a hairline, not by a change of surface. */
.section + .section > .shell{ border-top:1px solid var(--rule); padding-top:var(--section-gap); }
.section + .section{ padding-block-start:0; }

/* Small uppercase mono label. Used for section labels and spec terms only. */
.label{
  display:block;
  font-family:var(--font-mono);
  font-size:var(--fs-label);
  font-weight:500;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--text-dim);
}

.section__head{ margin-bottom:clamp(1.75rem, 1.25rem + 2vw, 3rem); }

.section__title{
  margin-top:var(--space-3);
  font-size:var(--fs-h2);
}

.section__intro{
  max-width:var(--measure);
  margin-top:var(--space-4);
  color:var(--text-muted);
  font-size:var(--fs-lede);
}

/* --------------------------------------------------------------------------
   4. Buttons and links
   -------------------------------------------------------------------------- */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  min-height:48px;
  padding:.7rem 1.3rem;
  border:1px solid var(--rule-strong);
  border-radius:var(--radius-sm);
  background:transparent;
  color:var(--text);
  font:inherit;
  font-size:var(--fs-small);
  font-weight:600;
  text-align:center;
  cursor:pointer;
  transition:background var(--t), border-color var(--t), color var(--t);
}

.btn:hover{
  border-color:var(--text-dim);
  background:rgba(255,255,255,.035);
}

.btn--primary{
  border-color:var(--brand);
  background:var(--brand);
  color:var(--on-brand);
}

.btn--primary:hover{
  border-color:var(--brand-hover);
  background:var(--brand-hover);
  color:var(--on-brand);
}

/* Secondary action: a text link with an arrow, never a second filled button. */
.link{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  min-height:44px;
  color:var(--text);
  font-size:var(--fs-small);
  font-weight:600;
  text-decoration:underline;
  text-decoration-color:var(--rule-strong);
  text-decoration-thickness:1px;
  text-underline-offset:.3em;
  transition:color var(--t), text-decoration-color var(--t);
}

.link::after{
  content:"\2192";
  font-weight:400;
  transition:transform var(--t);
}

.link--out::after{ content:"\2197"; }

.link--plain::after{ content:none; }

.link:hover{
  color:var(--brand);
  text-decoration-color:var(--brand);
}

/* Legal and other tertiary links: findable, but clearly not calls to action. */
.quiet{
  display:flex;
  flex-wrap:wrap;
  column-gap:1.25rem;
}

.quiet a{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  color:var(--text-dim);
  font-size:var(--fs-meta);
  text-decoration:underline;
  text-decoration-color:transparent;
  text-underline-offset:.25em;
  transition:color var(--t), text-decoration-color var(--t);
}

.quiet a:hover{
  color:var(--text);
  text-decoration-color:var(--rule-strong);
}

/* --------------------------------------------------------------------------
   5. Masthead
   -------------------------------------------------------------------------- */

.masthead{ border-bottom:1px solid var(--rule); }

.masthead__inner{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:0 var(--space-4);
  padding-block:var(--space-3);
}

.masthead .brand{ grid-column:1; grid-row:1; }
.masthead .langswitch{ grid-column:2; grid-row:1; justify-self:end; }

.brand{
  display:flex;
  flex-direction:column;
  min-width:0;
  padding-block:.2rem;
}

.brand__name{
  font-size:1.2rem;
  font-weight:700;
  letter-spacing:-.015em;
}

.brand__tag{
  color:var(--text-dim);
  font-size:var(--fs-meta);
}

.masthead__nav{
  grid-column:1 / -1;
  grid-row:2;
  display:flex;
  flex-wrap:wrap;
  gap:0 1.4rem;
  margin-top:var(--space-2);
  border-top:1px solid var(--rule);
}

.masthead__nav a{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  color:var(--text-muted);
  font-size:var(--fs-small);
  font-weight:600;
  transition:color var(--t), box-shadow var(--t);
}

.masthead__nav a:hover{ color:var(--text); }

.masthead__nav a[aria-current="page"]{
  color:var(--text);
  box-shadow:inset 0 -2px 0 var(--brand);
}

/* --------------------------------------------------------------------------
   6. Language switch (masthead + footer share this component)
   -------------------------------------------------------------------------- */

.langswitch{
  display:flex;
  align-items:center;
  gap:var(--space-2);
}

.langswitch__label{
  display:none;
  color:var(--text-dim);
  font-size:var(--fs-meta);
}

.langswitch__group{
  display:flex;
  border:1px solid var(--rule);
  border-radius:var(--radius-sm);
  overflow:hidden;
}

.langswitch__btn{
  min-width:48px;
  min-height:44px;
  padding:0 .55rem;
  border:0;
  background:transparent;
  color:var(--text-dim);
  font:inherit;
  font-size:var(--fs-meta);
  font-weight:700;
  letter-spacing:.06em;
  cursor:pointer;
  transition:background var(--t), color var(--t);
}

.langswitch__btn + .langswitch__btn{ border-left:1px solid var(--rule); }

.langswitch__btn:hover{ color:var(--text); }

.langswitch__btn[aria-pressed="true"]{
  background:var(--brand-soft);
  color:var(--brand);
}

/* --------------------------------------------------------------------------
   7. Hero

   Controlled asymmetry: the message on the left, a typographic app index on
   the right. No icon collage, no glow panel, no fake dashboard.
   -------------------------------------------------------------------------- */

.hero{ padding-block:clamp(2.25rem, 1.5rem + 4vw, 4.5rem) clamp(1.75rem, 1.25rem + 2vw, 3rem); }

.hero__inner{
  display:grid;
  gap:clamp(2.25rem, 1.5rem + 4vw, 3.75rem);
}

.hero__copy{ min-width:0; }

.hero__title{
  margin-top:var(--space-4);
  font-size:var(--fs-display);
  line-height:var(--lh-display);
  max-width:17ch;
}

.hero__lede{
  max-width:54ch;
  margin-top:var(--space-4);
  color:var(--text-muted);
  font-size:var(--fs-lede);
}

.hero__actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--space-3) var(--space-5);
  margin-top:var(--space-6);
}

.hero__actions .btn{ min-width:min(100%, 15rem); }

/* Typographic app index: rows of number, name and category. */
.hero__index{ min-width:0; }

.hero__index-list{
  margin-top:var(--space-3);
  border-top:1px solid var(--rule);
}

.hero__index-list li{ border-bottom:1px solid var(--rule); }

.hero__index-list a{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:baseline;
  gap:0 var(--space-3);
  min-height:52px;
  padding-block:.65rem;
  transition:color var(--t);
}

.hero__index-list a:hover{ color:var(--brand); }

.hero__index-num{
  font-family:var(--font-mono);
  font-size:var(--fs-meta);
  color:var(--app-accent);
}

.hero__index-name{ font-weight:600; }

.hero__index-cat{
  grid-column:2;
  color:var(--text-dim);
  font-size:var(--fs-meta);
}

.hero__index-note{
  margin-top:var(--space-4);
  color:var(--text-dim);
  font-size:var(--fs-meta);
}

/* --------------------------------------------------------------------------
   8. App index (the product rows that replaced the app cards)
   -------------------------------------------------------------------------- */

.a-kauppalista{ --app-accent:var(--accent-kauppalista); }
.a-waveiq{ --app-accent:var(--accent-waveiq); }
.a-gainsai{ --app-accent:var(--accent-gainsai); }
.a-tyotori{ --app-accent:var(--accent-tyotori); }

.app-index{ border-top:1px solid var(--rule); }

.app-row{ border-bottom:1px solid var(--rule); }

.app-row__inner{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  grid-template-areas:
    "mark head"
    "body body"
    "side side";
  gap:var(--space-4) var(--space-4);
  padding-block:clamp(1.75rem, 1.25rem + 2vw, 2.75rem);
}

.app-row__mark{
  grid-area:mark;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:var(--space-2);
}

.app-row__num{
  font-family:var(--font-mono);
  font-size:var(--fs-meta);
  letter-spacing:.08em;
  color:var(--app-accent);
}

.app-row__icon{
  width:52px;
  height:52px;
  padding:3px;
  border:1px solid var(--rule);
  border-radius:var(--radius-icon);
  background:var(--surface-subtle);
  object-fit:contain;
}

.app-row__head{
  grid-area:head;
  min-width:0;
  align-self:center;
}

.app-row__cat{
  color:var(--text-dim);
  font-size:var(--fs-meta);
}

.app-row__name{
  margin-top:var(--space-1);
  font-size:clamp(1.3rem, 1.15rem + .7vw, 1.65rem);
}

/* inline-flex + min-height keeps the title link a 44px touch target */
.app-row__name a{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  transition:color var(--t);
}
.app-row__name a:hover{ color:var(--brand); }

.app-row__body{ grid-area:body; min-width:0; }

.app-row__promise{
  max-width:52ch;
  color:var(--text);
}

.app-row__features{
  display:grid;
  gap:.4rem;
  margin-top:var(--space-4);
}

.app-row__features li{
  position:relative;
  padding-left:1.15rem;
  color:var(--text-muted);
  font-size:var(--fs-small);
}

/* A short rule in the app colour instead of a coloured dot or glow. */
.app-row__features li::before{
  content:"";
  position:absolute;
  left:0;
  top:.72em;
  width:.6rem;
  height:1px;
  background:var(--app-accent);
}

.app-row__side{
  grid-area:side;
  min-width:0;
}

.spec{
  display:grid;
  gap:.45rem;
  padding-top:var(--space-3);
  border-top:1px solid var(--rule);
}

.spec__row{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:var(--space-4);
}

.spec dt{ color:var(--text-dim); }

.spec dd{
  color:var(--text-muted);
  font-size:var(--fs-meta);
  text-align:right;
}

.app-row__actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--space-3) var(--space-5);
  margin-top:var(--space-5);
}

.app-row__legal{ margin-top:var(--space-2); }

/* --------------------------------------------------------------------------
   9. Principles
   -------------------------------------------------------------------------- */

.tenets{ border-top:1px solid var(--rule); }

.tenet{
  display:grid;
  gap:var(--space-2) var(--space-6);
  padding-block:clamp(1.4rem, 1rem + 1.4vw, 2rem);
  border-bottom:1px solid var(--rule);
}

.tenet__num{
  font-family:var(--font-mono);
  font-size:var(--fs-meta);
  letter-spacing:.08em;
  color:var(--text-dim);
}

.tenet__claim{ font-size:var(--fs-h3); }

.tenet__text{
  max-width:60ch;
  color:var(--text-muted);
  font-size:var(--fs-small);
}

/* --------------------------------------------------------------------------
   10. Developer
   -------------------------------------------------------------------------- */

.developer{
  display:grid;
  gap:var(--space-5) var(--space-8);
}

.developer__name{ margin-top:var(--space-3); font-size:var(--fs-h2); }

.developer__text{
  max-width:var(--prose);
  color:var(--text-muted);
}

.developer__text + .developer__text{ margin-top:var(--space-4); }

.developer__links{
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-2) var(--space-6);
  margin-top:var(--space-4);
}

/* --------------------------------------------------------------------------
   11. Footer
   -------------------------------------------------------------------------- */

.site-footer{
  border-top:1px solid var(--rule);
  background:var(--surface-subtle);
}

.site-footer__inner{ padding-block:var(--space-7) var(--space-5); }

.footer-grid{
  display:grid;
  gap:var(--space-6) var(--space-5);
}

.footer-group__heading{
  font-family:var(--font-mono);
  font-size:var(--fs-label);
  font-weight:500;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--text-dim);
}

.footer-links{ margin-top:var(--space-1); }

.footer-links a{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  color:var(--text-muted);
  font-size:var(--fs-small);
  transition:color var(--t);
}

.footer-links a:hover{
  color:var(--text);
  text-decoration:underline;
  text-underline-offset:.25em;
}

.footer-group .langswitch{ margin-top:var(--space-3); }

.footer-bottom{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:space-between;
  gap:var(--space-2) var(--space-5);
  margin-top:var(--space-7);
  padding-top:var(--space-4);
  border-top:1px solid var(--rule);
  color:var(--text-dim);
  font-size:var(--fs-meta);
}

/* --------------------------------------------------------------------------
   12. Responsive steps (mobile first, min-width only)
   -------------------------------------------------------------------------- */

@media (min-width: 560px){
  .app-row__features{
    grid-template-columns:repeat(2, minmax(0,1fr));
    column-gap:var(--space-5);
  }

  .footer-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}

@media (min-width: 720px){
  .masthead__inner{
    grid-template-columns:auto minmax(0,1fr) auto;
    gap:var(--space-6);
  }

  .masthead__nav{
    grid-column:2;
    grid-row:1;
    justify-content:flex-end;
    margin-top:0;
    border-top:0;
  }

  .masthead .langswitch{ grid-column:3; }

  .langswitch__label{ display:inline; }

  .tenet{ grid-template-columns:auto minmax(0,6fr) minmax(0,7fr); align-items:baseline; }
  .tenet__claim{ margin-top:0; }

  .developer{ grid-template-columns:minmax(0,4fr) minmax(0,8fr); }
  .developer__name{ margin-top:var(--space-2); }
}

@media (min-width: 900px){
  .section__head--split{
    display:grid;
    grid-template-columns:minmax(0,7fr) minmax(0,5fr);
    gap:var(--space-6);
    align-items:start;
  }

  /* Lines the deck up with the title rather than with the small label above it. */
  .section__head--split .section__intro{ margin-top:2.1rem; }
}

@media (min-width: 1024px){
  .hero__inner{
    grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
    align-items:start;
  }

  .hero__index{
    padding-left:var(--space-6);
    border-left:1px solid var(--rule);
  }

  .hero__index-list a{
    grid-template-columns:auto minmax(0,1fr) auto;
    align-items:baseline;
  }

  .hero__index-cat{
    grid-column:3;
    text-align:right;
  }

  .app-row__inner{
    grid-template-columns:auto minmax(0,1fr) minmax(15rem,19rem);
    grid-template-areas:
      "mark head side"
      "mark body side";
    column-gap:var(--space-7);
  }

  .app-row__mark{ align-items:center; }

  .app-row__icon{ width:60px; height:60px; }

  .footer-grid{ grid-template-columns:1.2fr 1.2fr 1fr auto; }
}

/* --------------------------------------------------------------------------
   13. Motion preferences
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }

  *,
  *::before,
  *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}