/* =========================================================
   Feynline — stylesheet
   Concept: an operator's working notebook. Graph-paper hero,
   charcoal ink, one ink-blue signal.
   ========================================================= */

:root{
  --paper:    #F2F1EC;
  --paper-2:  #EAE9E2;
  --ink:      #1C2024;
  --ink-soft: #45494E;
  --mid:      #B7B6B0;   /* light half of the mark on paper */
  --line:     #D9D8D1;
  --blue:     #1E3A6B;   /* fountain-pen / blueprint ink */
  --blue-2:   #2C508F;

  --font-display:'Schibsted Grotesk', system-ui, sans-serif;
  --font-mono:'IBM Plex Mono', ui-monospace, monospace;
  --font-serif:'Newsreader', Georgia, serif;

  --wrap: 1140px;
  --gap: clamp(1.5rem, 4vw, 4rem);
  --pad-y: clamp(4.5rem, 9vw, 8rem);
  --r: 14px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-display);
  font-weight:500;
  line-height:1.6;
  font-size:clamp(1rem, 0.96rem + 0.2vw, 1.075rem);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

a{ color:inherit; }
img,svg{ display:block; max-width:100%; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:clamp(1.25rem, 5vw, 2.5rem); }
.measure{ max-width:24ch; }

.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--ink); color:var(--paper); padding:.7rem 1rem; border-radius:0 0 8px 0;
}
.skip:focus{ left:0; }

/* ---------- shared type ---------- */
.eyebrow{
  font-family:var(--font-mono); font-weight:500;
  font-size:.78rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--blue); margin:0 0 1.4rem;
}
.h2{
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(1.8rem, 1.2rem + 2.6vw, 3rem);
  line-height:1.08; letter-spacing:-.02em; margin:0 0 1.5rem;
}
.h3{
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(1.15rem, 1rem + .7vw, 1.4rem);
  line-height:1.2; letter-spacing:-.01em; margin:0 0 .55rem;
}
p{ margin:0 0 1.1rem; color:var(--ink-soft); }
p:last-child{ margin-bottom:0; }
strong{ color:var(--ink); font-weight:600; }

/* ---------- buttons ---------- */
.btn{
  --bh:1;
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-family:var(--font-display); font-weight:600; font-size:1rem;
  padding:.85rem 1.45rem; border-radius:999px; text-decoration:none;
  border:1.5px solid transparent; cursor:pointer;
  transition:transform .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
}
.btn:focus-visible{ outline:3px solid var(--blue); outline-offset:3px; }
.btn-primary{ background:var(--ink); color:var(--paper); }
.btn-primary:hover{ background:var(--blue); transform:translateY(-2px); }
.btn-ghost{ border-color:var(--line); color:var(--ink); font-family:var(--font-mono); font-size:.9rem; }
.btn-ghost:hover{ border-color:var(--ink); transform:translateY(-2px); }
.btn-block{ width:100%; }

/* =========================================================
   HEADER
   ========================================================= */
.site{
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--paper) 82%, transparent);
  backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid transparent;
  transition:border-color .3s ease, background .3s ease;
}
.site.scrolled{ border-bottom-color:var(--line); }
.bar{ display:flex; align-items:center; justify-content:space-between; min-height:68px; }

.brand{ display:inline-flex; align-items:center; gap:.6rem; text-decoration:none; color:var(--ink); }
.brand-logo{ height:27px; width:auto; display:block; }
.brand-mark{ width:34px; height:auto; color:var(--ink); }
.brand-word{ font-family:var(--font-display); font-weight:800; font-size:1.3rem; letter-spacing:-.02em; }

.nav{ display:flex; align-items:center; gap:2rem; }
.nav a{ text-decoration:none; font-size:.95rem; font-weight:500; color:var(--ink-soft); transition:color .15s ease; }
.nav a:hover{ color:var(--ink); }
.nav .nav-cta{
  color:var(--ink); border:1.5px solid var(--ink); padding:.5rem 1.05rem; border-radius:999px;
  transition:background .18s ease, color .18s ease;
}
.nav .nav-cta:hover{ background:var(--ink); color:var(--paper); }

.menu-toggle{ display:none; flex-direction:column; gap:5px; background:none; border:0; padding:.5rem; cursor:pointer; }
.menu-toggle span{ width:24px; height:2px; background:var(--ink); transition:transform .25s ease, opacity .25s ease; }
.menu-toggle[aria-expanded="true"] span:first-child{ transform:translateY(7px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:last-child{ transform:translateY(-7px) rotate(-45deg); }

.mobile-nav{ display:none; flex-direction:column; padding:.5rem clamp(1.25rem,5vw,2.5rem) 1.5rem; border-bottom:1px solid var(--line); }
.mobile-nav a{ padding:.85rem 0; text-decoration:none; font-size:1.05rem; border-bottom:1px solid var(--line); color:var(--ink); }
.mobile-nav a:last-child{ border-bottom:0; }

/* =========================================================
   HERO
   ========================================================= */
.hero{ position:relative; overflow:hidden; padding-block:clamp(3rem,7vw,5.5rem) clamp(3.5rem,8vw,6rem); }
.hero-grid{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(to right, var(--line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line) 1px, transparent 1px);
  background-size:34px 34px;
  -webkit-mask-image:radial-gradient(120% 90% at 50% 35%, #000 0%, transparent 72%);
          mask-image:radial-gradient(120% 90% at 50% 35%, #000 0%, transparent 72%);
  opacity:.55;
}
.hero-inner{ position:relative; z-index:1; max-width:780px; margin-inline:auto; text-align:center; }
.hero-copy{ display:flex; flex-direction:column; align-items:center; }

.hero-title{
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(2.5rem, 1.6rem + 4.6vw, 4.6rem);
  line-height:.98; letter-spacing:-.035em; margin:0 0 1.5rem;
}
.hero-lead{ font-size:clamp(1.08rem,1rem + .5vw,1.3rem); max-width:46ch; color:var(--ink-soft); margin-bottom:2rem; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:.85rem; align-items:center; justify-content:center; margin-bottom:1.75rem; }
.hero-foot{ font-family:var(--font-mono); font-size:.8rem; letter-spacing:.02em; color:var(--ink-soft); margin:0; }

/* =========================================================
   SECTIONS
   ========================================================= */
.section{ padding-block:var(--pad-y); }
.section-tint{ background:var(--paper-2); }

/* who I am */
.bio-grid{ display:grid; grid-template-columns:0.7fr 1.3fr; gap:var(--gap); align-items:center; }
.bio-portrait{ margin:0; }
.bio-portrait img{ width:100%; height:auto; border-radius:var(--r); border:1px solid var(--line); aspect-ratio:9/11; object-fit:cover; background:var(--paper); display:block; }
.bio-body .h2{ margin-bottom:.3rem; }
.bio-role{ font-family:var(--font-mono); font-size:.82rem; letter-spacing:.08em; text-transform:uppercase; color:var(--blue); margin:0 0 1.4rem; }
.bio-body p{ font-size:1.05rem; }
.linkedin{
  display:inline-flex; align-items:center; gap:.55rem; margin-top:1.6rem;
  font-family:var(--font-mono); font-size:.85rem; letter-spacing:.02em;
  color:var(--ink); text-decoration:none;
  border:1.5px solid var(--line); border-radius:999px; padding:.6rem 1.1rem;
  transition:border-color .18s ease, color .18s ease, transform .18s ease;
}
.linkedin:hover{ border-color:var(--blue); color:var(--blue); transform:translateY(-2px); }
.linkedin-logo{ width:18px; height:18px; }

/* who */
.who-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.who-card{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r); padding:1.8rem 1.6rem; }
.who-card p{ font-size:.98rem; }

/* process */
.proc{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.proc-step{ position:relative; }
.proc-n{
  display:inline-flex; align-items:center; justify-content:center;
  width:42px; height:42px; border-radius:50%; border:1.5px solid var(--ink);
  font-family:var(--font-mono); font-size:1rem; color:var(--ink); margin-bottom:1.1rem;
}
.proc-step p{ font-size:.96rem; }

/* contact */
.contact-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:var(--gap); align-items:center; }
.contact-lead{ font-size:1.1rem; max-width:38ch; }
.contact-card{ background:var(--paper-2); border:1px solid var(--line); border-radius:var(--r); padding:clamp(1.5rem,4vw,2.2rem); }
.contact-dl{ margin:1.6rem 0 0; display:grid; gap:1rem; }
.contact-dl > div{ display:flex; justify-content:space-between; gap:1rem; align-items:baseline; border-top:1px solid var(--line); padding-top:1rem; }
.contact-dl dt{ font-family:var(--font-mono); font-size:.76rem; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-soft); }
.contact-dl dd{ margin:0; font-weight:500; text-align:right; }
.contact-dl a{ text-decoration:none; color:var(--ink); border-bottom:1px solid var(--mid); }
.contact-dl a:hover{ border-color:var(--ink); }

/* =========================================================
   FOOTER
   ========================================================= */
.foot{ background:var(--paper); border-top:1px solid var(--line); padding-block:3rem; }
.foot-inner{ display:flex; flex-direction:column; gap:.8rem; align-items:flex-start; }
.foot-brand{ display:inline-flex; align-items:center; gap:.55rem; color:var(--ink); }
.foot-brand .brand-logo{ height:30px; }
.foot-brand .brand-mark{ width:28px; }
.foot-brand .brand-word{ font-size:1.1rem; }
.foot-meta{ font-size:.92rem; color:var(--ink-soft); margin:0; }
.foot-meta a{ color:var(--ink); text-decoration:none; border-bottom:1px solid var(--mid); }
.foot-fine{ font-family:var(--font-mono); font-size:.74rem; color:var(--mid); margin:.4rem 0 0; letter-spacing:.02em; }

/* =========================================================
   REVEAL
   ========================================================= */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 960px){
  .bio-grid{ grid-template-columns:1fr; }
  .bio-portrait{ max-width:300px; }
  .who-grid{ grid-template-columns:1fr; }
  .proc{ grid-template-columns:repeat(2,1fr); }
  .contact-grid{ grid-template-columns:1fr; }
}
@media (max-width: 720px){
  .nav{ display:none; }
  .menu-toggle{ display:flex; }
  .mobile-nav.open{ display:flex; }
  .hero-title{ letter-spacing:-.025em; }
}
@media (max-width: 440px){
  .proc{ grid-template-columns:1fr; }
}