/* ==========================================================================
   Aryeh Goldman — personal site
   Built on the Aryeh Goldman design system.
   1. Tokens   2. Base   3. Design system components   4. Page sections
   ========================================================================== */

/* 1. Tokens ============================================================== */

:root{
  /* base palette */
  --ink:#3a3031;
  --orange:#f07d3a;
  --blue:#2d7dd2;
  --mist:#c0d6df;
  --cloud:#e0fbfc;
  --paper:#f8f8f8;
  --white:#ffffff;
  /* ramps */
  --orange-hover:#d9662a;
  --orange-soft:#fdeadd;
  --blue-hover:#2368b3;
  --blue-soft:#e3eefa;
  --ink-2:#6b5e60;
  --ink-3:#9b8f91;
  /* semantic */
  --text-body:var(--ink);
  --text-muted:var(--ink-2);
  --text-faint:var(--ink-3);
  --text-on-accent:var(--white);
  --surface-page:var(--paper);
  --surface-card:var(--white);
  --surface-tint:var(--cloud);
  --surface-accent-soft:var(--orange-soft);
  --border-quiet:var(--mist);
  --border-strong:var(--ink);
  --action-primary:var(--orange);
  --action-primary-hover:var(--orange-hover);
  --link:var(--blue);
  --link-hover:var(--blue-hover);
  --focus-ring:var(--blue);

  /* type */
  --font-display:"Titan One",system-ui,sans-serif;
  --font-body:"Figtree",system-ui,sans-serif;
  --text-lg:18px;
  --text-md:16px;
  --text-sm:14px;
  --text-xs:12px;
  --text-xl:19px;
  --leading-display:1.05;
  --leading-heading:1.2;
  --leading-body:1.55;
  --tracking-display:0.02em;
  --tracking-caps:0.08em;

  /* spacing */
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:24px;
  --space-6:32px;
  --space-7:48px;
  --space-8:64px;
  --space-9:96px;
  --container:1080px;

  /* effects */
  --radius-sm:8px;
  --radius-md:12px;
  --radius-lg:16px;
  --radius-pill:999px;
  --shadow-sticker:3px 3px 0 var(--ink);
  --shadow-sticker-press:1px 1px 0 var(--ink);
  --shadow-soft:0 2px 8px rgba(58,48,49,.08);
  --shadow-float:0 8px 24px rgba(58,48,49,.14);
  --border-sticker:2px solid var(--ink);
  --border-hairline:1px solid var(--mist);
  --ease-quick:150ms ease-out;

  /* fluid page scale */
  --hero-size:clamp(34px,6vw,60px);
  --h2-size:clamp(26px,3.4vw,36px);
  --h3-size:clamp(20px,2.2vw,26px);
  --section-pad:clamp(56px,8vw,96px);
}

/* 2. Base =============================================================== */

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:88px}
body{
  margin:0;
  background:var(--surface-page);
  font-family:var(--font-body);
  color:var(--text-body);
  font-size:var(--text-md);
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%}
a{color:var(--link)}
a:hover{color:var(--link-hover)}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px}

.display{
  font-family:var(--font-display);
  font-weight:400;
  letter-spacing:var(--tracking-display);
  text-transform:uppercase;
  line-height:var(--leading-heading);
  text-wrap:pretty;
}
.wrap{max-width:var(--container);margin:0 auto;padding:0 var(--space-5)}
.measure{max-width:66ch;text-wrap:pretty}

.skiplink{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--white);color:var(--ink);
  border:var(--border-sticker);border-radius:var(--radius-sm);
  padding:10px 16px;font-weight:700;text-decoration:none;
}
.skiplink:focus{left:var(--space-5);top:var(--space-3)}

/* 3. Design system components =========================================== */

.ds-btn{
  font-family:var(--font-body);font-weight:700;
  border-radius:var(--radius-md);cursor:pointer;
  display:inline-flex;align-items:center;gap:8px;
  transition:all var(--ease-quick);line-height:1;text-decoration:none;
}
.ds-btn:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.ds-btn-sm{font-size:13px;padding:8px 14px;border-radius:var(--radius-sm)}
.ds-btn-md{font-size:15px;padding:12px 22px}
.ds-btn-lg{font-size:17px;padding:15px 28px}
.ds-btn-primary{background:var(--action-primary);color:var(--text-on-accent);border:2px solid var(--border-strong);box-shadow:var(--shadow-sticker)}
.ds-btn-primary:hover{background:var(--action-primary-hover);color:var(--text-on-accent)}
.ds-btn-secondary{background:var(--surface-card);color:var(--ink);border:2px solid var(--border-strong);box-shadow:var(--shadow-sticker)}
.ds-btn-secondary:hover{background:var(--surface-tint);color:var(--ink)}
.ds-btn-primary:active,.ds-btn-secondary:active{transform:translate(2px,2px);box-shadow:var(--shadow-sticker-press)}

.ds-card{background:var(--surface-card);border-radius:var(--radius-lg);color:var(--ink);padding:28px}
.ds-card-quiet{border:1px solid var(--border-quiet);box-shadow:var(--shadow-soft)}
.ds-card-feature{border:2px solid var(--border-strong);box-shadow:var(--shadow-sticker)}

/* 4. Page sections ====================================================== */

.section{padding:var(--section-pad) 0}
.section-tint{
  background:var(--surface-tint);
  border-top:1px solid var(--border-quiet);
  border-bottom:1px solid var(--border-quiet);
}
.sectionhead{margin-bottom:var(--space-7)}
.sectionhead h2{font-size:var(--h2-size);margin:0}
.sectionhead p{
  margin:var(--space-4) 0 0;font-size:var(--text-lg);
  color:var(--text-muted);line-height:var(--leading-body);
}
.eyebrow{
  font-size:var(--text-xs);font-weight:800;
  letter-spacing:var(--tracking-caps);text-transform:uppercase;
  color:var(--text-muted);
}

/* nav */
.nav{position:sticky;top:0;z-index:30;background:var(--surface-page);border-bottom:2px solid var(--ink)}
.navbar{display:flex;align-items:center;gap:var(--space-2);padding-top:12px;padding-bottom:12px}
.navmark{font-size:clamp(15px,2vw,19px);color:var(--ink);text-decoration:none;margin-right:auto}
.navlinks{display:flex;gap:2px}
.navlink{font-size:15px;font-weight:600;color:var(--ink);text-decoration:none;padding:8px 12px;border-radius:var(--radius-sm)}
.navlink:hover{background:var(--surface-tint);color:var(--ink)}
.navtoggle{display:none;background:var(--white);color:var(--ink);border:2px solid var(--ink);border-radius:var(--radius-sm);padding:6px;cursor:pointer}
.mobilenav{display:none;flex-direction:column;padding:8px var(--space-5) 16px;border-top:1px solid var(--border-quiet);background:var(--surface-page)}
.mobilenav[hidden]{display:none}

/* hero */
.hero{padding:clamp(48px,7vw,84px) 0 clamp(40px,6vw,72px)}
.herogrid{
  display:grid;grid-template-columns:1.25fr .75fr;
  gap:clamp(28px,5vw,64px);align-items:center;min-height:min(58vh,520px);
}
.herogrid h1{font-size:var(--hero-size);margin:0;line-height:var(--leading-display)}
.herolede{font-size:var(--text-xl);line-height:1.5;margin:var(--space-5) 0 0;font-weight:500}
.herometa{font-size:var(--text-md);line-height:var(--leading-body);margin:var(--space-4) 0 0;color:var(--text-muted)}
.herocta{display:flex;gap:var(--space-3);flex-wrap:wrap;margin-top:var(--space-6)}
.heroshot{
  aspect-ratio:4/5;border:var(--border-sticker);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sticker);overflow:hidden;background:var(--white);
}
.heroshot img{width:100%;height:100%;object-fit:cover;object-position:center 22%;display:block}

/* credibility strip */
.strip{background:var(--surface-tint);border-top:2px solid var(--ink);border-bottom:2px solid var(--ink)}
.striprow{
  display:grid;grid-template-columns:repeat(5,1fr);gap:var(--space-5);
  padding-top:var(--space-6);padding-bottom:var(--space-6);
}
.proof{border-left:2px solid var(--ink);padding-left:var(--space-4)}
.proofnum{
  font-family:var(--font-display);font-weight:400;letter-spacing:.01em;
  font-size:clamp(24px,3vw,34px);color:var(--orange);line-height:1.1;margin-bottom:6px;
}
.proof p{font-size:var(--text-sm);line-height:1.4;color:var(--text-muted);font-weight:600;margin:0}

/* work */
.worklist{display:grid;gap:var(--space-7)}
.workblock{border-top:2px solid var(--ink);padding-top:var(--space-5)}
.workblock h3{font-size:var(--h3-size);margin:var(--space-3) 0 var(--space-5)}
.pargrid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-6)}
.pargrid p{margin:0;font-size:var(--text-md);line-height:var(--leading-body)}
.parlabel{
  font-size:var(--text-xs);font-weight:800;letter-spacing:var(--tracking-caps);
  text-transform:uppercase;color:var(--orange);margin-bottom:8px;
}
.breakimg{height:clamp(220px,34vw,400px);border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);overflow:hidden}
.breakimg img{width:100%;height:100%;object-fit:cover;object-position:center 4%;display:block}

/* approach + skills */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-5)}
.ds-card h3{margin:0;font-size:var(--text-lg);font-weight:800;line-height:1.35}
.ds-card p{margin:var(--space-3) 0 0;font-size:var(--text-md);line-height:var(--leading-body);color:var(--text-muted)}
.skillgroup{
  background:var(--white);border:var(--border-hairline);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-soft);padding:28px;
}
.skillgroup p{margin:0;font-size:var(--text-lg);line-height:1.5}

/* credentials */
.credlist{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:0 var(--space-7)}
.credlist li{display:flex;flex-direction:column;gap:4px;padding:var(--space-4) 0;border-bottom:1px solid var(--border-quiet)}
.credlist .cred-title{font-weight:800;font-size:var(--text-lg)}
.credlist .cred-meta{color:var(--text-muted);font-size:var(--text-md)}
.credaside{
  font-style:italic;font-size:var(--text-lg);line-height:var(--leading-body);
  margin:var(--space-7) 0 0;color:var(--ink-2);
}

/* career timeline */
.timeline{list-style:none;margin:0;padding:0 0 0 var(--space-6);border-left:2px solid var(--mist);display:grid;gap:var(--space-6)}
.timeline li{position:relative}
.timeline li::before{
  content:"";position:absolute;left:calc(-1 * var(--space-6) - 8px);top:4px;
  width:14px;height:14px;border-radius:999px;background:var(--orange);border:2px solid var(--ink);
}
.timeline h3{margin:6px 0 2px;font-size:var(--text-lg);font-weight:800}
.timeline .org{font-size:var(--text-md);font-weight:600;color:var(--blue)}
.timeline p{margin:var(--space-2) 0 0;font-size:var(--text-md);line-height:var(--leading-body);color:var(--text-muted)}

/* about */
.aboutgrid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,5vw,56px);align-items:start}
.aboutgrid p{font-size:var(--text-xl);line-height:1.5;margin:0}
.aboutgrid p + p{margin-top:var(--space-5)}
.aboutshot{
  aspect-ratio:4/3;border:var(--border-sticker);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sticker);overflow:hidden;background:var(--white);
}
.aboutshot img{width:100%;height:100%;object-fit:cover;object-position:center 3%;display:block}
.photostrip{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-5) var(--space-4);margin-top:var(--space-8)}
.shot{margin:0}
.shotframe{aspect-ratio:3/2;border:1px solid var(--ink);border-radius:var(--radius-md);overflow:hidden;background:var(--white)}
.shotframe img{width:100%;height:100%;object-fit:cover;display:block}
.shot figcaption{font-size:var(--text-sm);color:var(--text-muted);margin-top:8px;line-height:1.4}

/* contact */
.contact{padding:var(--section-pad) 0 var(--space-9)}
.contactinner{text-align:center;max-width:720px;margin:0 auto}
.contactinner h2{font-size:var(--h2-size);margin:0}
.contactlede{font-size:var(--text-xl);line-height:1.5;margin:var(--space-5) auto 0;max-width:58ch}
.bigmail{
  display:inline-block;font-family:var(--font-display);font-weight:400;
  font-size:clamp(20px,3.4vw,38px);letter-spacing:.01em;margin-top:var(--space-6);
  color:var(--ink);text-decoration:none;border-bottom:3px solid var(--orange);word-break:break-word;
}
.bigmail:hover{color:var(--orange-hover);border-color:var(--ink)}
.contactrow{
  display:flex;justify-content:center;gap:var(--space-5);margin-top:var(--space-5);
  font-size:var(--text-lg);font-weight:600;flex-wrap:wrap;
}
.lockup{display:block;width:min(340px,80%);margin:var(--space-9) auto 0;height:auto}

/* footer */
.footer{background:var(--ink);color:var(--cloud)}
.footrow{display:flex;align-items:center;gap:var(--space-5);padding-top:var(--space-6);padding-bottom:var(--space-6);flex-wrap:wrap}
.footmark{font-size:20px;color:#fff}
.foottag{opacity:.8;font-size:var(--text-sm)}
.footyear{margin-left:auto;font-size:var(--text-sm);opacity:.7}

/* responsive */
@media (max-width:900px){
  .navlinks{display:none}
  .navtoggle{display:inline-flex}
  .mobilenav{display:flex}
  .herogrid,.aboutgrid,.grid2,.pargrid{grid-template-columns:1fr}
  .heroshot{aspect-ratio:3/2;max-height:320px}
  .credlist{grid-template-columns:1fr}
  .striprow{grid-template-columns:1fr 1fr}
  .photostrip{
    grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:74%;
    overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px;
  }
  .shot{scroll-snap-align:start}
  .pargrid{gap:var(--space-5)}
  .footyear{margin-left:0}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none !important;animation:none !important}
}