/* PHOMI base — tokens, chrome (nav + footer + mobile drawer), buttons,
   typography utilities. Homepage-only sections live in home.css. */

/* ─── Fonts (self-hosted woff2) ───
   Both Newsreader and JetBrains Mono are variable fonts on Google;
   Google serves the same woff2 file for weights 400 + 500 within each
   subset. Each typeface gets two physical files: a `latin` subset
   (basic ASCII + ä ö õ ü) and a `latin-ext` subset (š ž and friends).
   unicode-range hints let the browser fetch latin-ext only when needed. */
@font-face{
  font-family:"Newsreader";font-style:italic;font-weight:400 500;font-display:swap;
  src:url("../fonts/newsreader-italic.woff2") format("woff2");
  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;
}
@font-face{
  font-family:"Newsreader";font-style:italic;font-weight:400 500;font-display:swap;
  src:url("../fonts/newsreader-italic-ext.woff2") format("woff2");
  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:"JetBrains Mono";font-style:normal;font-weight:400 500;font-display:swap;
  src:url("../fonts/jetbrains-mono.woff2") format("woff2");
  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;
}
@font-face{
  font-family:"JetBrains Mono";font-style:normal;font-weight:400 500;font-display:swap;
  src:url("../fonts/jetbrains-mono-ext.woff2") format("woff2");
  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;
}

/* ─── Tokens ─── */
:root{
  /* Brand palette — mineral cyan */
  --primary:#77c7d0;
  --primary-deep:#3d8e98;
  --primary-soft:#c6e3e6;
  --ink:#0f1419;
  --ink-2:#252a30;
  --stone:#eef1f3;     /* cool limestone — section bg */
  --stone-2:#dfe4e7;
  --sand:#c5ccd1;
  --paper:#ffffff;
  --line:rgba(15,20,25,.12);
  --line-soft:rgba(15,20,25,.06);
  --muted:rgba(15,20,25,.58);

  /* Type — Helvetica × Newsreader (italic accents) */
  --f-sans:"Helvetica Neue","Helvetica","Arial",sans-serif;
  --f-serif:"Newsreader","Tiempos Headline",Georgia,serif;
  --f-mono:"JetBrains Mono","IBM Plex Mono",ui-monospace,monospace;

  --shadow-card:0 1px 0 rgba(255,255,255,.6) inset, 0 24px 48px -24px rgba(21,24,27,.18);
  --easing:cubic-bezier(.2,.7,.2,1);
}

/* ─── Reset ─── */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{
  font-family:var(--f-sans);
  font-size:17px;
  line-height:1.55;
  color:var(--ink);
  background:var(--paper);
  font-feature-settings:"ss01","ss02","cv11";
  overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

/* WP accessibility — visually-hidden but screen-reader-visible. */
.screen-reader-text{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.skip-link{
  position:absolute;top:-40px;left:8px;z-index:1000;
  background:var(--ink);color:var(--paper);
  padding:8px 16px;border-radius:4px;
  font-size:14px;
}
.skip-link:focus{ top:8px }

/* ─── Type scale ─── */
.eyebrow{
  font-family:var(--f-mono);
  font-size:11px;
  font-weight:500;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted);
}
.h-display{
  font-family:var(--f-sans);
  font-weight:500;
  letter-spacing:-.035em;
  line-height:.96;
  font-size:clamp(40px,7.4vw,108px);
}
.h-display em{
  font-family:var(--f-serif);
  font-style:italic;
  font-weight:400;
  letter-spacing:-.01em;
}
.h-section{
  font-family:var(--f-sans);
  font-weight:500;
  letter-spacing:-.025em;
  line-height:1.02;
  font-size:clamp(34px,4.8vw,68px);
}
.h-section em{
  font-family:var(--f-serif);
  font-style:italic;
  font-weight:400;
  letter-spacing:-.005em;
}
.lede{
  font-size:clamp(17px,1.4vw,21px);
  line-height:1.5;
  color:var(--ink-2);
  max-width:54ch;
}

/* ─── Container ─── */
.wrap{
  width:100%;
  max-width:1480px;
  margin:0 auto;
  padding:0 32px;
}
@media (max-width:720px){ .wrap{ padding:0 20px } }

/* ─── Buttons ─── */
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  height:52px;
  padding:0 22px;
  border-radius:999px;
  font-weight:500;
  font-size:15px;
  letter-spacing:.005em;
  transition:transform .25s var(--easing), background .25s var(--easing), color .25s var(--easing);
}
.btn .arrow{
  width:18px;height:18px;display:inline-block;
  transition:transform .25s var(--easing);
}
.btn:hover .arrow{ transform:translateX(4px) }
.btn-primary{ background:var(--ink); color:var(--paper) }
.btn-primary:hover{ background:var(--primary-deep); color:#fff }
.btn-ghost{
  background:rgba(255,255,255,.08);
  color:#fff;
  backdrop-filter:blur(20px) saturate(140%);
  border:.5px solid rgba(255,255,255,.25);
}
.btn-ghost:hover{ background:rgba(255,255,255,.16) }
.btn-link{
  display:inline-flex;align-items:center;gap:8px;
  font-weight:500;font-size:15px;
  border-bottom:1px solid currentColor;
  padding:2px 0;line-height:1;
}

/* ─── Texture placeholders (used until real product photography lands) ─── */
.tex{
  position:relative;
  overflow:hidden;
  background:#ddd5c8;
  isolation:isolate;
}
.tex::before{
  content:"";
  position:absolute;inset:0;
  background:
    repeating-linear-gradient(135deg, rgba(21,24,27,.04) 0 2px, transparent 2px 9px),
    repeating-linear-gradient(45deg, rgba(255,255,255,.06) 0 1px, transparent 1px 6px);
  mix-blend-mode:multiply;
  z-index:1;
}
.tex .label{
  position:absolute;
  left:14px;bottom:12px;
  font-family:var(--f-mono);
  font-size:10.5px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:rgba(21,24,27,.55);
  z-index:2;
  background:rgba(255,255,255,.55);
  padding:4px 8px;
  border-radius:4px;
  backdrop-filter:blur(6px);
}
.tex--dark{ background:#2a3539; color:#cfd7d8 }
.tex--dark::before{
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.04) 0 2px, transparent 2px 10px),
    repeating-linear-gradient(45deg, rgba(0,0,0,.18) 0 1px, transparent 1px 7px);
  mix-blend-mode:screen;
}
.tex--dark .label{ background:rgba(255,255,255,.1); color:rgba(255,255,255,.7) }
.tex--travertine{ background:#d9cdb8 }
.tex--stone{ background:#bdb6a9 }
.tex--brick{ background:#a96f59 }
.tex--wood{ background:#9f7a55 }
.tex--leather{ background:#6a4a3a }
.tex--woven{ background:#8a8170 }
.tex--natural{ background:#8e9088 }
.tex--mineral{ background:#789a9f }

/* ─── Reveal animation utility (home.js drives .in) ─── */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .9s var(--easing), transform .9s var(--easing) }
.reveal.in{ opacity:1; transform:none }
.reveal.d1{ transition-delay:.08s }
.reveal.d2{ transition-delay:.16s }
.reveal.d3{ transition-delay:.24s }
.reveal.d4{ transition-delay:.32s }

/* ─── NAV (chrome — site-wide) ─── */
.nav{
  position:fixed;
  top:0;left:0;right:0;
  z-index:80;
  padding:18px 0;
  transition:padding .35s var(--easing), background .35s var(--easing), backdrop-filter .35s var(--easing), box-shadow .35s var(--easing), color .35s var(--easing);
  color:var(--ink);
}
.nav.over-dark{ color:#fff }
.nav.scrolled{
  padding:10px 0;
  /* backdrop-filter blur removed — the fixed nav was re-blurring every
     scroll frame, the dominant cost during scroll. A near-opaque tint
     reads almost identically without the per-frame compositor work. */
  background:rgba(251,249,245,.96);
  box-shadow:0 .5px 0 var(--line-soft);
  color:var(--ink);
}
.nav-inner{
  display:flex;align-items:center;justify-content:space-between;
  gap:24px;
}
.logo{
  display:flex;align-items:center;gap:10px;
  font-family:var(--f-sans);
  font-weight:600;
  font-size:18px;
  letter-spacing:-.01em;
}
.logo .mark{
  width:28px;height:28px;border-radius:6px;
  background:var(--primary);
  display:grid;place-items:center;
  font-family:var(--f-serif);
  font-style:italic;
  font-size:18px;
  color:var(--ink);
}
.logo .sub{
  font-family:var(--f-mono);
  font-size:10px;
  letter-spacing:.14em;
  text-transform:uppercase;
  opacity:.6;
  margin-left:6px;
  border-left:1px solid currentColor;
  padding-left:8px;
}
/* Custom logo (uploaded via Customize → Site Identity) — overrides
   the inline-SVG mark + text fallback in header.php/footer.php. */
.logo .custom-logo-link{
  display:inline-flex;
  align-items:center;
}
.logo img.custom-logo{
  height:32px;
  width:auto;
  display:block;
}
/* Hero is dark — when nav is `.over-dark`, invert dark-on-white logos
   so the brand reads. Removed (back to neutral) once .scrolled kicks in. */
.nav.over-dark:not(.scrolled) .logo img.custom-logo{
  filter:brightness(0) invert(1);
}
.footer-brand .logo img.custom-logo{
  height:44px;
}
.nav-links{
  display:flex;gap:32px;
  font-size:14.5px;
}
.nav-links a{ opacity:.85; transition:opacity .2s }
.nav-links a:hover{ opacity:1 }
.nav-cta{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:40px;padding:0 8px 0 18px;border-radius:999px;
  background:var(--primary);
  color:var(--ink);
  font-size:14px;font-weight:500;line-height:1;
  transition:transform .2s var(--easing), background .2s;
  white-space:nowrap;
}
.nav-cta .arrow{
  width:26px;height:26px;border-radius:999px;
  background:var(--ink);color:var(--primary);
  display:inline-grid;place-items:center;
  flex-shrink:0;
  transition:transform .25s var(--easing), background .25s var(--easing), color .25s var(--easing);
}
.nav-cta .arrow > svg{ width:12px; height:12px }
.nav-cta:hover{ background:var(--primary-deep); color:#fff }
.nav-cta:hover .arrow{ background:#fff; color:var(--ink) }
.nav.over-dark .nav-cta{ background:var(--primary) }

/* Language switcher (EE · FI) — mono, uppercase, matches the .logo .sub treatment. */
.lang-switch{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--f-mono);
  font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  white-space:nowrap;
}
.lang-switch .lang-link{ opacity:.55; transition:opacity .2s }
.lang-switch .lang-link:hover{ opacity:.9 }
.lang-switch .lang-link.is-current{ opacity:1; font-weight:600 }
.lang-switch .lang-link + .lang-link{ border-left:1px solid currentColor; padding-left:8px }
.mobile-nav-panel .lang-switch{ margin-top:18px }

.nav-burger{
  display:none;
  width:40px;height:40px;border-radius:999px;
  align-items:center;justify-content:center;
  color:inherit;
}

@media (max-width:880px){
  .nav-links{ display:none }
  .nav-burger{ display:inline-flex }
  .nav-cta{ display:none }
  .nav-inner > .lang-switch{ display:none }
}

/* ─── Mobile drawer ─── */
.mobile-nav{
  position:fixed;inset:0;
  z-index:120;
  display:none;
}
.mobile-nav.is-open{ display:block }
.mobile-nav-scrim{
  position:absolute;inset:0;
  background:rgba(15,20,25,.45);
}
.mobile-nav-panel{
  position:absolute;top:0;left:0;bottom:0;
  width:min(340px,86vw);
  background:var(--paper);
  display:flex;flex-direction:column;
  transform:translateX(-100%);
  transition:transform .28s var(--easing);
  box-shadow:0 0 40px rgba(0,0,0,.18);
}
.mobile-nav.is-open .mobile-nav-panel{ transform:translateX(0) }
.mobile-nav-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 22px;
  border-bottom:1px solid var(--line);
}
.mobile-nav-head strong{
  font-family:var(--f-sans);
  font-weight:500;
  font-size:15px;
  letter-spacing:.005em;
}
.mobile-nav-head button{
  width:32px;height:32px;border-radius:999px;
  display:grid;place-items:center;
  color:var(--ink-2);
}
.mobile-nav-panel nav{
  padding:8px 0;
  display:flex;flex-direction:column;
  flex:1;overflow-y:auto;
}
.mobile-nav-panel nav a{
  padding:14px 22px;
  font-size:15.5px;
  border-bottom:1px solid var(--line-soft);
}
.mobile-nav-panel nav a:hover{ background:var(--stone) }
.mobile-nav-panel .mobile-nav-cta{
  margin:18px 22px;
  background:var(--primary);
  border-radius:999px;
  text-align:center;
  font-weight:500;
  padding:14px 22px;
  border-bottom:0;
}
.mobile-nav-panel .mobile-nav-cta:hover{ background:var(--primary-deep); color:#fff }

body.phomi-no-scroll{ overflow:hidden }

/* ─── FOOTER (chrome — site-wide) ─── */
.footer{
  background:var(--paper);
  border-top:1px solid var(--line);
  padding:80px 0 40px;
}
.footer-top{
  display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:48px;
  margin-bottom:64px;
}
.footer-brand .logo{ margin-bottom:18px }
.footer-brand p{
  color:var(--muted);font-size:14.5px;line-height:1.55;max-width:36ch;
}
.footer-col h4{
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);
  margin-bottom:18px;font-weight:500;
}
.footer-col ul{ list-style:none; display:flex; flex-direction:column; gap:10px }
.footer-col a{
  font-size:15px;line-height:1.4;
  transition:color .2s;
}
.footer-col a:hover{ color:var(--primary-deep) }
.footer-bottom{
  display:flex;justify-content:space-between;align-items:center;
  gap:24px;flex-wrap:wrap;
  padding-top:24px;
  border-top:1px solid var(--line);
  font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);
}
.footer-bottom a{ color:var(--muted); transition:color .2s }
.footer-bottom a:hover{ color:var(--ink) }
.footer-copy{ display:flex; flex-direction:column; gap:12px; align-items:flex-start }
.footer-bestor{ display:inline-flex }
.footer-bestor img{ height:16px; width:auto; display:block; opacity:.85; transition:opacity .2s }
.footer-bestor:hover img{ opacity:1 }
.footer-legal{ display:flex; gap:24px; flex-wrap:wrap }
.footer-legal ul{ display:flex; gap:24px; flex-wrap:wrap; list-style:none }
@media (max-width:780px){
  .footer-top{ grid-template-columns:1fr 1fr; gap:32px }
}
@media (max-width:480px){
  .footer-top{ grid-template-columns:1fr }
}

/* ─── Fallback pages (page.php, index.php, 404.php) ─── */
/* Breadcrumb strip — shared by the product, category and generic page
   templates. Lives here (not product.css) because styles.css is the only
   sheet loaded on every route. Dark band sitting under the fixed nav. */
.crumb{
  padding-top:64px;
  background:var(--ink);
  color:rgba(255,255,255,.55);
}
.crumb .wrap{
  display:flex; justify-content:space-between; align-items:center;
  font-family:var(--f-mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  padding-top:18px; padding-bottom:18px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.crumb a{ transition:color .2s }
.crumb a:hover{ color:#fff }
.crumb .sep{ opacity:.4; margin:0 12px }
.crumb .here{ color:#fff }
.crumb .right{ display:flex; gap:24px; align-items:center }
.crumb .right .pip{
  width:6px; height:6px; border-radius:50%;
  background:var(--primary); display:inline-block; margin-right:6px;
  vertical-align:middle;
}

.fallback-page{
  padding:60px 0 96px;
  background:var(--paper);
  min-height:60vh;
}
.fallback-page h1.h-section,
.fallback-page h2.h-section{ margin-bottom:24px }
.fallback-page .prose{
  font-size:17px;line-height:1.65;color:var(--ink-2);
}
.fallback-page .prose p{ margin-bottom:16px }
.fallback-page .prose h2,
.fallback-page .prose h3{ margin-top:32px;margin-bottom:12px;font-family:var(--f-sans);font-weight:500 }
.fallback-page .prose a{ color:var(--primary-deep); border-bottom:1px solid currentColor }
.fallback-page .page-links{ margin-top:24px; font-family:var(--f-mono); font-size:12px; letter-spacing:.06em }
/* Author-entered content (the_content) can carry wide media, embeds and
   tables that have no idea about the column width. Keep them inside the
   viewport on every device. img already gets max-width:100% globally, but
   it also needs height:auto so intrinsic width/height attrs don't distort. */
.fallback-page .prose img{ height:auto }
.fallback-page .prose video,
.fallback-page .prose iframe,
.fallback-page .prose embed,
.fallback-page .prose object{ max-width:100%; }
.fallback-page .prose iframe{ width:100% }
.fallback-page .prose pre{ overflow-x:auto }
.fallback-page .prose table{ display:block; max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch }
.fallback-page .prose{ overflow-wrap:break-word }