.material-symbols-rounded {
  font-family: 'Material Symbols Rounded';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

:root{
  --font-display:"Poppins","Segoe UI",system-ui,-apple-system,sans-serif;
  --font-body:"Poppins","Segoe UI",system-ui,-apple-system,sans-serif;
  --font-mono:"IBM Plex Mono",Consolas,"SFMono-Regular",Menlo,monospace;
  --font-icon:"Material Symbols Rounded";
}
.sq-icon{font-family:var(--font-icon);font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:"liga";-webkit-font-smoothing:antialiased;font-variation-settings:"FILL" 0,"wght" 400,"GRAD" 0,"opsz" 24}
.sq-icon[data-fill="1"]{font-variation-settings:"FILL" 1,"wght" 400,"GRAD" 0,"opsz" 24}

:root{
  /* base ramp — warm neutrals (espresso → sand → paper) */
  --warm-1000:#1C1410;
  --warm-900:#2A211C;
  --warm-800:#3A2E27;
  --warm-700:#5A4A40;
  --warm-600:#7B6A5E;
  --warm-500:#9A8878;
  --warm-400:#BFAE9D;
  --warm-300:#DCCFBF;
  --warm-200:#EDE4D8;
  --warm-100:#F7F1E8;
  --warm-050:#FCF9F4;
  --paper:#FFFFFF;

  /* brand — clay (square) and amber (round) */
  --clay-700:#8C3A1D;
  --clay-600:#A54523;
  --clay-500:#C1522B;
  --clay-400:#D5714D;
  --clay-300:#E7A187;
  --clay-200:#F5D5C8;
  --clay-100:#FBEBE4;

  --amber-600:#B87A1E;
  --amber-500:#E8A33D;
  --amber-400:#F0BC6B;
  --amber-300:#F7D9A6;
  --amber-100:#FDF2DF;

  /* supporting */
  --moss-600:#40654B;
  --moss-500:#547F5E;
  --moss-100:#E4EDE4;
  --slate-600:#3E5A6B;
  --slate-500:#54748A;
  --slate-100:#E5EDF2;

  /* semantic — text */
  --text-strong:var(--warm-1000);
  --text-body:var(--warm-900);
  --text-muted:var(--warm-700);
  --text-subtle:var(--warm-500);
  --text-invert:var(--warm-050);
  --text-brand:var(--clay-600);
  --text-link:var(--clay-600);
  --text-link-hover:var(--clay-700);

  /* semantic — surfaces */
  --surface-page:var(--warm-050);
  --surface-card:var(--paper);
  --surface-sunken:var(--warm-100);
  --surface-raised:var(--paper);
  --surface-inverse:var(--warm-1000);
  --surface-brand:var(--clay-500);
  --surface-brand-soft:var(--clay-100);
  --surface-accent:var(--amber-500);
  --surface-accent-soft:var(--amber-100);
  --surface-code:var(--warm-1000);

  /* semantic — lines */
  --border-subtle:var(--warm-200);
  --border-default:var(--warm-300);
  --border-strong:var(--warm-400);
  --border-brand:var(--clay-500);
  --border-inverse:#4A3B32;

  /* semantic — status */
  --status-success:var(--moss-500);
  --status-success-soft:var(--moss-100);
  --status-warning:var(--amber-600);
  --status-warning-soft:var(--amber-100);
  --status-danger:#B23A2E;
  --status-danger-soft:#FBE7E3;
  --status-info:var(--slate-500);
  --status-info-soft:var(--slate-100);

  /* focus */
  --focus-ring:0 0 0 3px var(--amber-300);
}

:root{
  --text-display-1:clamp(44px,6vw,76px);
  --text-display-2:clamp(36px,4.6vw,56px);
  --text-h1:40px;
  --text-h2:30px;
  --text-h3:22px;
  --text-h4:18px;
  --text-lead:20px;
  --text-body-lg:17px;
  --text-body-md:15px;
  --text-body-sm:13.5px;
  --text-caption:12px;
  --text-overline:11.5px;

  --leading-tight:1.05;
  --leading-snug:1.2;
  --leading-normal:1.5;
  --leading-relaxed:1.65;

  --weight-light:300;
  --weight-regular:400;
  --weight-medium:500;
  --weight-semibold:600;
  --weight-bold:700;

  --tracking-display:-0.025em;
  --tracking-heading:-0.015em;
  --tracking-body:0em;
  --tracking-overline:0.14em;
}

:root{
  --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;
  --space-10:128px;

  --gutter-page:24px;
  --gutter-page-lg:48px;
  --max-width-prose:64ch;
  --max-width-content:1180px;
  --section-y:var(--space-9);
}

:root{
  /* the square/round system: sharp square, softened square, full round */
  --radius-square:0px;
  --radius-xs:3px;
  --radius-sm:6px;
  --radius-md:10px;
  --radius-lg:16px;
  --radius-xl:24px;
  --radius-round:999px;

  --radius-control:var(--radius-sm);
  --radius-card:var(--radius-lg);
  --radius-pill:var(--radius-round);
  --radius-mark:22%;

  --border-width-hairline:1px;
  --border-width-strong:2px;
  --rule-width:3px;
}

:root{
  --shadow-none:none;
  --shadow-xs:0 1px 2px rgba(42,33,28,.06);
  --shadow-sm:0 2px 6px rgba(42,33,28,.07);
  --shadow-md:0 6px 18px rgba(42,33,28,.09);
  --shadow-lg:0 18px 40px rgba(42,33,28,.12);
  --shadow-inset:inset 0 1px 0 rgba(255,255,255,.6);
  --shadow-brand:0 10px 26px rgba(193,82,43,.22);
}

:root{
  --ease-standard:cubic-bezier(.2,.6,.3,1); /* @kind other */
  --ease-out:cubic-bezier(0,.6,.3,1); /* @kind other */
  --ease-in:cubic-bezier(.5,0,1,.5); /* @kind other */
  --duration-instant:90ms; /* @kind other */
  --duration-fast:160ms; /* @kind other */
  --duration-base:240ms; /* @kind other */
  --duration-slow:420ms; /* @kind other */
  --transition-control:background-color var(--duration-fast) var(--ease-standard),border-color var(--duration-fast) var(--ease-standard),color var(--duration-fast) var(--ease-standard),box-shadow var(--duration-fast) var(--ease-standard),transform var(--duration-instant) var(--ease-standard); /* @kind other */
}

*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--surface-page);color:var(--text-body);font-family:var(--font-body);font-size:var(--text-body-md);line-height:var(--leading-normal);-webkit-font-smoothing:antialiased;text-wrap:pretty}
h1,h2,h3,h4{font-family:var(--font-display);color:var(--text-strong);letter-spacing:var(--tracking-heading);line-height:var(--leading-snug);margin:0}
a{color:var(--text-link);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--text-link-hover)}
code,pre,kbd{font-family:var(--font-mono)}
::selection{background:var(--amber-300);color:var(--warm-1000)}
:focus-visible{outline:none;box-shadow:var(--focus-ring)}

html{scroll-behavior:smooth}html,body{margin:0}body{background:var(--surface-page)}#top,#work,#approach,#about,#contact{scroll-margin-top:76px}