@font-face { font-family: 'Artific'; src: url('fonts/artific-regular.woff') format('woff'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Artific'; src: url('fonts/artific-medium.otf') format('opentype'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Artific'; src: url('fonts/artific-semibold.otf') format('opentype'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Artific'; src: url('fonts/artific-superbold.otf') format('opentype'); font-weight: 700; font-display: swap; }

* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --color-bg: #f3f2f2;
  --color-surface: #eae9e9;
  --color-text: #201e1d;
  --color-gray: #6b6966;
  --color-rule: #dad9d9;
  --color-accent: #000;
  --header-h: 64px;
  --side: clamp(24px, 9.72vw, 140px);
}

html {
  background: var(--color-bg);
  scrollbar-color: color-mix(in srgb, var(--color-text) 55%, transparent) var(--color-surface);
}
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--color-surface); }
::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--color-text) 55%, transparent); border-radius: 5px; }

body {
  color: var(--color-text);
  font-family: 'Artific', 'Archivo', -apple-system, BlinkMacSystemFont, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--color-accent); text-decoration: none; }
a:hover { opacity: 0.75; }

.mono {
  font: 400 9px/1.4 ui-monospace, Menlo, monospace;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

/* ── Header (same as Work) ── */
.header {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 0 clamp(18px, 3vw, 40px);
  background: var(--color-bg);
  z-index: 30;
}
.header-title { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 18px; letter-spacing: -0.01em; color: inherit; }
.header-nav { margin-left: auto; display: flex; gap: 24px; align-items: center; }
.header-nav .is-current { text-decoration: underline; text-underline-offset: 5px; }

/* ── Shared ── */
.wrap { max-width: 1160px; margin: 0 auto; }
.pg-label { font-size: 13px; letter-spacing: 0.08em; color: var(--color-gray); }
.pg-title { margin-top: 12px; font-weight: 600; letter-spacing: -0.01em; line-height: normal; }
.pg-rule { height: 1px; background: var(--color-rule); }
.pg-cols { display: grid; grid-template-columns: 36.2% 36.2% 1fr; }
.pg-col-label { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; color: var(--color-gray); }

/* ── About ── */
.ab-hero { position: relative; height: 636px; padding: 120px var(--side) 0; }
.ab-text { max-width: min(600px, calc(100vw - 560px - 2 * var(--side))); }
.ab-hero .pg-label { font-weight: 700; }
.ab-hero .pg-title { font-size: clamp(44px, 4.6vw, 66px); font-weight: 700; }
.ab-lede { margin-top: 17px; font-size: clamp(18px, 1.53vw, 22px); }
.ab-body { margin-top: 14px; font-size: 16px; }
.ab-portrait { position: absolute; right: 0; top: 0; width: 560px; height: 636px; object-fit: cover; }
.ab-tools { padding: 0 var(--side) 38px; }
.ab-tools-title { margin-top: 32px; font-size: 40px; font-weight: 600; }
.ab-tools .pg-cols { margin-top: 22px; }
.ab-tools .pg-col-label { font-size: 13px; font-weight: 600; letter-spacing: 0.06em; }
.ab-list { margin-top: 14px; list-style: none; font-size: 17px; line-height: 1.85; }

/* ── Contact ── */
.ct { padding: 110px var(--side) 118px; }
.ct .pg-label { font-weight: 600; }
.ct .pg-title { font-size: clamp(44px, 4.45vw, 64px); }
.ct-lede { margin-top: 10px; max-width: 620px; font-size: clamp(17px, 1.39vw, 20px); }
.ct-btns { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 14px; }
.ct-btn {
  display: inline-flex;
  align-items: center;
  padding: 15px 24px;
  border: 1.5px solid var(--color-rule);
  border-radius: 999px;
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text);
}
.ct-btn-fill { background: var(--color-text); border-color: var(--color-text); color: #fff; }
.ct .pg-rule { margin-top: 97px; }
.ct .pg-cols { margin-top: 39px; }
.ct-val { margin-top: 12px; font-size: 17px; font-weight: 500; line-height: 1.5; }

@media (max-width: 960px) {
  .ab-hero { height: auto; padding-top: calc(var(--header-h) + 40px); }
  .ab-text { max-width: 600px; }
  .ab-portrait { position: static; display: block; width: min(100%, 420px); height: auto; aspect-ratio: 560 / 636; margin: 32px 0 0 auto; }
  .pg-cols { grid-template-columns: 1fr; row-gap: 32px; }
  .ct { padding-top: calc(var(--header-h) + 40px); }
  .ct .pg-rule { margin-top: 64px; }
}
@media (max-width: 820px) {
  .header-nav { gap: 16px; }
}