/* Inter variable — crisp on all screens */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300..800&display=swap');
/* Supreme Extralight Italic (use for every weight) */
@font-face{
  font-family: "Supreme Italic";
  src: url("/fonts/Supreme-ExtralightItalic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face{
  font-family: "Supreme Italic";
  src: url("/fonts/Supreme-ExtralightItalic.woff2") format("woff2");  /* same file */
  font-weight: 600;        /* pretend this file is semibold so <strong> works */
  font-style: italic;
  font-display: swap;
}

:root{

  --font-supreme: "Supreme Italic", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  /* Canvas + text */
  --bg-1:#ffffff;
  --bg-2:#f5f8f8;
  --ink:#0b1220;
  --muted:#475569;

  /* Dark turquoise scale */
  --accent:#0f766e;        /* primary (teal-700) */
  --accent-strong:#115e59; /* hover/focus (teal-800) */
  --accent-bright:#14b8a6; /* subtle glow/selection */

  --rule: var(--accent-strong); /* used by the left bar */

  --maxw:72rem;
  --step-size:22px;      /* indent per step (tweak here) */
  --gutter: 40px;                 
  --header-h: 72px;     /* taller header */
  --hero-gap: clamp(28px, 5vh, 72px);     /* space between intro and arrow */
  --hero-bottom-offset: 20vh;             /* distance from bottom edge */

  --intro-min: 35px;         /* smallest size */
  --intro-fluid: 2vw;     /* how fast it grows */
  --intro-max: 50px;         /* cap on large screens */
}

*{box-sizing:border-box}
html,body{height:100%}

body{
  margin:0;
  color:var(--ink);
  font-family: "Plus Jakarta Sans", Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  /* Subtle modern background */
  background:
    radial-gradient(1200px 700px at 20% 10%, rgba(255,255,255,.045) 0%, transparent 60%),
    linear-gradient(180deg, var(--bg-2), var(--bg-1));
}

body::after{
  content:""; position:fixed; inset:0; pointer-events:none;
  background: radial-gradient(900px 600px at 25% 20%, rgba(255,255,255,.035), transparent 60%);
}


/* Shared container on one grid */



.container-left{
  max-width: none;        /* was: var(--maxw) */
  width: 100%;
  margin-left: var(--gutter);
  margin-right: auto;
  padding-right: var(--gutter);
  padding-left: 0;
  margin-top: auto;
}
/* Header: tiny glass + hairline */
header{
  height: var(--header-h);
  display:flex; align-items:center;
  backdrop-filter: saturate(1.2) blur(8px);
  background: color-mix(in oklab, #ffffff 96%, var(--accent) 4%);
  border-bottom: 1px solid rgba(2, 6, 23, .06);  /* soft hairline */
}
header .container{ padding-inline: var(--gutter); }
nav a{ color: var(--ink); }
nav a:hover{ color: var(--accent-strong); }
@supports not (backdrop-filter: blur(6px)) {
  header{ background: rgba(0,0,0,.08); }
}

/* full-width with gutters; pushes PORTFOLIO to the far right */
header .container{
  max-width: none;
  margin: 0;
  padding: 0 var(--gutter);
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo{
  font-weight:800;
  letter-spacing:.06em;
  font-size:clamp(18px, 2vw, 24px);
}
.logo span{ color:var(--accent); font-weight:800; }

nav a{
  color:var(--ink);
  text-decoration:none;
  font-weight:700;
  letter-spacing:.08em;
  font-size:clamp(12px, 1.2vw, 14px);
  opacity:.92;
  border-bottom:2px solid transparent;
  transition:opacity .18s ease, border-color .18s ease, color .18s ease;
}
nav a:hover{ opacity:1; border-color:var(--accent); }

/* Hero spacing + balanced text */
main{
  min-height: calc(100dvh - var(--header-h));
  display: flex;
  flex-direction: column;
  row-gap: 24px;
  padding-top: 10vh;
  padding-bottom: var(--hero-bottom-offset);
  background: var(--bg-2);          /* 🟢 add this line */
  align-items: center; /* center the intro */
}


/* intro stays left; don’t center it */
.intro{
  max-width: 150ch;
  margin: 0;                      /* IMPORTANT: no auto centering */
  position: relative;
  padding-left: 18px;
  line-height: 1.65;
  text-wrap: balance;
}

.intro::before{
  content:"";
  position:absolute; left:0; top:0; bottom:0;
  border-left: 3px solid var(--rule, #189143);
  opacity:.95;
}
.intro p{
  margin: 0 0 1.2em;
  font-size: clamp(var(--intro-min), calc(var(--intro-fluid) + 0.2rem), var(--intro-max));
  font-weight: 500;
  letter-spacing: .005em;               /* tiny tracking for clarity */
  color: var(--ink, #f4f5f6);
  padding-block: 8px;  
}

.intro p:last-child{
  margin-bottom: 0;            /* NEW: prevents the line looking “short” at bottom */
}

/* apply Supreme only to the hero copy */
.intro,
.intro p{
  font-family: var(--font-supreme);
  font-style: italic;   /* ← add this */
  font-weight: 400;     /* or 600 for heavier look */
}

/* emphasize bits (uses the 600 you loaded) */

.intro strong{
  font-family: var(--font-supreme);
  font-style: italic;   /* keep italic */
  font-weight: 600;     /* maps to your 600 face */
}

.arrow-row{
  background: var(--bg-2);
  display: flex;
  justify-content: center;
  padding: 0;             /* nothing → no rounding issue */
}

/* arrow itself no longer needs its own margin */
.arrow{ margin: 0; }

.arrow{
  text-align:center;
  font-size: clamp(28px, 3.5vw, 42px);  /* bigger arrow */
  color: var(--accent);
  margin-top: 32px;
  opacity:.85;
  cursor:pointer;
  transition: opacity .2s ease;
}
.arrow:hover {
  opacity: 1;
  transform: translateY(3px);
}

.arrow a {
  text-decoration: none;
  color: inherit;
}
html {
  scroll-behavior: smooth;
}

footer {
  background: var(--bg-2);
  border-top: 1px solid rgba(2, 6, 23, .06); /* subtle hairline */
  padding: 18px var(--gutter);
  font-size: 13px;
  color: var(--muted);
  text-align: center;
}

footer .container {
  max-width: var(--maxw);
  margin: 0 auto;
}


@media (prefers-reduced-motion: no-preference){
  .arrow{ animation: nudge 1.6s ease-in-out infinite; }
  @keyframes nudge{
    0%,100%{ transform: translateY(0); }
    50%{    transform: translateY(6px); }
  }
}

/* Mobile polish */
@media (max-width: 640px){
  .intro{ padding-left: 16px; }
  .intro p{ font-size: clamp(18px, 5.2vw, 22px); line-height: 1.7; }
  :root {
    --gutter: 10px; /* Use a smaller gutter on small screens */
  }
}

@supports (height: 100dvh){
  main{
    min-height: calc(100dvh - var(--header-h));
  }
}