/* ============================================================
   Siri — Portfolio
   Design system: Apple-style (see DESIGN-apple.md)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  /* ---- Colors ---- */
  --primary: #0066cc;
  --primary-focus: #0071e3;
  --primary-on-dark: #2997ff;
  --ink: #1d1d1f;
  --body: #1d1d1f;
  --body-on-dark: #ffffff;
  --body-muted: #cccccc;
  --ink-muted-80: #333333;
  --ink-muted-48: #7a7a7a;
  --divider-soft: #f0f0f0;
  --hairline: #e0e0e0;
  --canvas: #ffffff;
  --canvas-parchment: #f5f5f7;
  --surface-pearl: #fafafc;
  --surface-tile-1: #272729;
  --surface-tile-2: #2a2a2c;
  --surface-tile-3: #252527;
  --surface-black: #000000;
  --surface-chip-translucent: rgba(210, 210, 215, 0.64);
  --on-primary: #ffffff;
  --on-dark: #ffffff;

  /* ---- Radius ---- */
  --r-none: 0px;
  --r-xs: 5px;
  --r-sm: 8px;
  --r-md: 11px;
  --r-lg: 18px;
  --r-pill: 9999px;
  --r-full: 9999px;

  /* ---- Spacing ---- */
  --sp-xxs: 4px;
  --sp-xs: 8px;
  --sp-sm: 12px;
  --sp-md: 17px;
  --sp-lg: 24px;
  --sp-xl: 32px;
  --sp-xxl: 48px;
  --sp-section: 80px;

  /* ---- Font stacks ---- */
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", system-ui, sans-serif;
  --font-text: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", system-ui, sans-serif;

  /* ---- Shadow ---- */
  --product-shadow: 3px 5px 30px 0 rgba(0, 0, 0, 0.22);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-text);
  color: var(--body);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
button { font-family: inherit; border: none; cursor: pointer; background: none; }
ul { list-style: none; margin: 0; padding: 0; }

.wrap {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 var(--sp-xl);
}

.narrow {
  max-width: 980px;
  margin: 0 auto;
}

/* ---- Typography tokens ---- */
.t-hero-display   { font-family: var(--font-display); font-size: 56px; font-weight: 600; line-height: 1.07; letter-spacing: -0.28px; margin: 0; }
.t-display-lg      { font-family: var(--font-display); font-size: 40px; font-weight: 600; line-height: 1.10; letter-spacing: 0; margin: 0; }
.t-display-md      { font-family: var(--font-text); font-size: 34px; font-weight: 600; line-height: 1.2; letter-spacing: -0.374px; margin: 0; }
.t-lead            { font-family: var(--font-display); font-size: 28px; font-weight: 400; line-height: 1.14; letter-spacing: 0.196px; margin: 0; }
.t-lead-airy       { font-family: var(--font-text); font-size: 24px; font-weight: 300; line-height: 1.5; letter-spacing: 0; margin: 0; }
.t-tagline         { font-family: var(--font-display); font-size: 21px; font-weight: 600; line-height: 1.19; letter-spacing: 0.231px; margin: 0; }
.t-body-strong     { font-family: var(--font-text); font-size: 17px; font-weight: 600; line-height: 1.24; letter-spacing: -0.374px; margin: 0; }
.t-body            { font-family: var(--font-text); font-size: 17px; font-weight: 400; line-height: 1.47; letter-spacing: -0.374px; margin: 0; }
.t-dense-link      { font-family: var(--font-text); font-size: 17px; font-weight: 400; line-height: 2.41; letter-spacing: 0; margin: 0; }
.t-caption         { font-family: var(--font-text); font-size: 14px; font-weight: 400; line-height: 1.43; letter-spacing: -0.224px; margin: 0; }
.t-caption-strong  { font-family: var(--font-text); font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: -0.224px; margin: 0; }
.t-fine-print      { font-family: var(--font-text); font-size: 12px; font-weight: 400; line-height: 1.0; letter-spacing: -0.12px; margin: 0; }
.t-micro-legal     { font-family: var(--font-text); font-size: 10px; font-weight: 400; line-height: 1.3; letter-spacing: -0.08px; margin: 0; }

/* ============================================================
   Global Nav
   ============================================================ */

.global-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  height: 44px;
  background: var(--surface-black);
  color: var(--on-dark);
}

.global-nav .wrap {
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.global-nav .brand {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.2px;
}

.global-nav .nav-links {
  display: flex;
  gap: 20px;
}

.global-nav .nav-links a {
  font-family: var(--font-text);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: -0.12px;
  opacity: 0.8;
  transition: opacity 0.15s ease;
}

.global-nav .nav-links a:hover { opacity: 1; }

.global-nav .nav-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.nav-toggle {
  display: none;
  width: 32px;
  height: 32px;
  color: var(--on-dark);
}

.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  content: "";
  display: block;
  width: 18px;
  height: 1.5px;
  background: currentColor;
  position: relative;
  margin: 0 auto;
}
.nav-toggle span::before { position: absolute; top: -6px; }
.nav-toggle span::after { position: absolute; top: 6px; }

/* ---- Sub nav (frosted) ---- */

.sub-nav-frosted {
  position: sticky;
  top: 44px;
  z-index: 90;
  height: 52px;
  background: rgba(245, 245, 247, 0.8);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
}

.sub-nav-frosted .wrap {
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sub-nav-frosted .category { color: var(--ink); }

.sub-nav-frosted .sub-links {
  display: flex;
  align-items: center;
  gap: 24px;
}

.sub-nav-frosted .sub-links a.text-link {
  font-family: var(--font-text);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: -0.224px;
  color: var(--ink-muted-80);
}

/* ============================================================
   Buttons
   ============================================================ */

.button-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--primary);
  color: var(--on-primary);
  font-family: var(--font-text);
  font-size: 17px;
  font-weight: 400;
  letter-spacing: -0.374px;
  border-radius: var(--r-pill);
  padding: 11px 22px;
  transition: transform 0.12s ease;
}
.button-primary:active { transform: scale(0.95); }
.button-primary:focus-visible { outline: 2px solid var(--primary-focus); outline-offset: 2px; }

.button-secondary-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--primary);
  font-family: var(--font-text);
  font-size: 17px;
  font-weight: 400;
  letter-spacing: -0.374px;
  border: 1px solid var(--primary);
  border-radius: var(--r-pill);
  padding: 11px 22px;
  transition: transform 0.12s ease;
}
.button-secondary-pill:active { transform: scale(0.95); }

.button-secondary-pill.on-dark {
  color: var(--primary-on-dark);
  border-color: var(--primary-on-dark);
}

.button-dark-utility {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--ink);
  color: var(--on-dark);
  font-family: var(--font-text);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: -0.224px;
  border-radius: var(--r-sm);
  padding: 8px 15px;
  transition: transform 0.12s ease;
}
.button-dark-utility:active { transform: scale(0.95); }

.button-pearl-capsule {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-pearl);
  color: var(--ink-muted-80);
  font-family: var(--font-text);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: -0.224px;
  border: 3px solid var(--divider-soft);
  border-radius: var(--r-md);
  padding: 8px 14px;
  transition: transform 0.12s ease;
}
.button-pearl-capsule:active { transform: scale(0.95); }

.button-store-hero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--primary);
  color: var(--on-primary);
  font-family: var(--font-text);
  font-size: 18px;
  font-weight: 300;
  border-radius: var(--r-pill);
  padding: 14px 28px;
  transition: transform 0.12s ease;
}
.button-store-hero:active { transform: scale(0.95); }

.button-icon-circular {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: var(--surface-chip-translucent);
  color: var(--ink);
  border-radius: var(--r-full);
  transition: transform 0.12s ease;
}
.button-icon-circular:active { transform: scale(0.95); }

.text-link {
  color: var(--primary);
  font-family: var(--font-text);
  font-size: 17px;
  letter-spacing: -0.374px;
}
.text-link:hover { text-decoration: underline; }

.text-link-on-dark {
  color: var(--primary-on-dark);
  font-family: var(--font-text);
  font-size: 17px;
  letter-spacing: -0.374px;
}
.text-link-on-dark:hover { text-decoration: underline; }

.cta-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* ============================================================
   Product tiles (section chassis)
   ============================================================ */

.tile {
  padding: var(--sp-section) var(--sp-xl);
  border-radius: var(--r-none);
}

.tile-light   { background: var(--canvas); color: var(--ink); }
.tile-parchment { background: var(--canvas-parchment); color: var(--ink); }
.tile-dark    { background: var(--surface-tile-1); color: var(--on-dark); }
.tile-dark-2  { background: var(--surface-tile-2); color: var(--on-dark); }
.tile-dark-3  { background: var(--surface-tile-3); color: var(--on-dark); }

.tile-inner {
  max-width: 1440px;
  margin: 0 auto;
}

.tile-header {
  text-align: center;
  max-width: 700px;
  margin: 0 auto var(--sp-xxl);
}

.tile-header .kicker {
  display: block;
  color: var(--primary);
  margin-bottom: var(--sp-sm);
}

.tile-dark .tile-header .kicker,
.tile-dark-2 .tile-header .kicker,
.tile-dark-3 .tile-header .kicker {
  color: var(--primary-on-dark);
}

.tile-header .t-lead {
  margin-top: var(--sp-md);
  color: var(--ink-muted-80);
}

.tile-dark .tile-header .t-lead,
.tile-dark-2 .tile-header .t-lead,
.tile-dark-3 .tile-header .t-lead {
  color: var(--body-muted);
}

/* ============================================================
   Hero
   ============================================================ */

.hero {
  background: var(--canvas);
  padding: 64px var(--sp-xl) var(--sp-section);
  text-align: center;
}

.hero .kicker {
  display: block;
  color: var(--primary);
  margin-bottom: var(--sp-md);
}

.hero h1 { margin: 0 auto; max-width: 760px; }

.hero .t-lead {
  margin: var(--sp-lg) auto 0;
  max-width: 620px;
  color: var(--ink-muted-80);
}

.hero .cta-row { justify-content: center; margin-top: var(--sp-xl); }

.hero-art {
  margin: 64px auto 0;
  max-width: 640px;
}

.hero-card {
  background: var(--canvas-parchment);
  border-radius: var(--r-lg);
  padding: var(--sp-xxl) var(--sp-xl);
  box-shadow: var(--product-shadow);
  display: flex;
  flex-direction: column;
  gap: var(--sp-md);
}

.chat-bubble {
  align-self: flex-start;
  max-width: 78%;
  background: var(--canvas);
  border-radius: var(--r-lg);
  padding: var(--sp-sm) var(--sp-md);
}

.chat-bubble.me {
  align-self: flex-end;
  background: var(--primary);
  color: var(--on-primary);
}

.chat-bubble p { margin: 0; }

/* ============================================================
   About — split "for you / for us"
   ============================================================ */

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-xl);
}

.split-card {
  background: var(--surface-tile-2);
  border-radius: var(--r-lg);
  padding: var(--sp-xl);
}

.split-card .t-tagline { color: var(--primary-on-dark); margin-bottom: var(--sp-sm); }

.split-card p { color: var(--body-muted); margin-top: var(--sp-sm); }

.about-quote {
  margin-top: var(--sp-xxl);
  text-align: center;
  max-width: 780px;
  margin-left: auto;
  margin-right: auto;
}

.about-quote .t-lead-airy { color: var(--body-muted); }

/* ============================================================
   Timeline
   ============================================================ */

.timeline {
  position: relative;
  max-width: 780px;
  margin: 0 auto;
  padding-left: var(--sp-xl);
}

.timeline::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 6px;
  bottom: 6px;
  width: 1px;
  background: var(--hairline);
}

.timeline-item {
  position: relative;
  padding-bottom: var(--sp-xxl);
}

.timeline-item:last-child { padding-bottom: 0; }

.timeline-item::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--sp-xl) + 0px);
  top: 6px;
  width: 9px;
  height: 9px;
  border-radius: var(--r-full);
  background: var(--primary);
}

.timeline-item .t-caption-strong {
  color: var(--primary);
  display: block;
  margin-bottom: var(--sp-xxs);
}

.timeline-item .t-tagline { margin-bottom: var(--sp-xs); }

.timeline-item p { color: var(--ink-muted-80); margin-top: var(--sp-xs); }

/* ============================================================
   Skills — configurator chips
   ============================================================ */

.chip-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--sp-md);
}

.configurator-option-chip {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: var(--r-pill);
  padding: 12px 16px;
  color: var(--ink);
}

.configurator-option-chip .chip-icon {
  width: 28px;
  height: 28px;
  border-radius: var(--r-full);
  background: var(--canvas-parchment);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}

/* ============================================================
   Projects — store utility cards
   ============================================================ */

.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-lg);
}

.store-utility-card {
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  padding: var(--sp-lg);
  display: flex;
  flex-direction: column;
  gap: var(--sp-sm);
}

.store-utility-card .card-thumb {
  aspect-ratio: 1 / 1;
  border-radius: var(--r-sm);
  background: var(--canvas-parchment);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 34px;
  margin-bottom: var(--sp-sm);
}

.store-utility-card .badge {
  display: inline-block;
  align-self: flex-start;
  background: var(--surface-pearl);
  color: var(--ink-muted-80);
  border: 1px solid var(--divider-soft);
  border-radius: var(--r-md);
  padding: 4px 10px;
  font-family: var(--font-text);
  font-size: 12px;
}

.store-utility-card .card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--sp-xs);
}

/* ============================================================
   Contact
   ============================================================ */

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-xxl);
  align-items: start;
}

.search-input {
  width: 100%;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 17px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: var(--r-pill);
  padding: 12px 20px;
  height: 44px;
  outline: none;
}

.search-input:focus { border-color: var(--primary); }

textarea.search-input {
  height: auto;
  min-height: 120px;
  border-radius: var(--r-lg);
  padding: var(--sp-md) 20px;
  resize: vertical;
  font-family: var(--font-text);
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-md);
}

.contact-form label {
  font-family: var(--font-text);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.224px;
  color: var(--ink-muted-80);
  display: block;
  margin-bottom: var(--sp-xxs);
}

.contact-channels {
  display: flex;
  flex-direction: column;
  gap: var(--sp-sm);
}

.contact-channel {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  padding: var(--sp-md);
}

.contact-channel .icon {
  width: 44px;
  height: 44px;
  border-radius: var(--r-full);
  background: var(--canvas-parchment);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

.form-status {
  min-height: 20px;
}

/* ============================================================
   Footer
   ============================================================ */

.footer {
  background: var(--canvas-parchment);
  color: var(--ink-muted-80);
  padding: 64px var(--sp-xl) var(--sp-xl);
}

.footer-columns {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-xl);
  border-bottom: 1px solid var(--hairline);
  padding-bottom: var(--sp-xl);
}

.footer-columns h4 { margin: 0 0 var(--sp-xs); color: var(--ink-muted-48); }

.footer-columns a { display: block; color: var(--ink-muted-80); }
.footer-columns a:hover { color: var(--primary); }

.footer-legal {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-sm);
  padding-top: var(--sp-lg);
  color: var(--ink-muted-48);
}

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 1068px) {
  .t-hero-display { font-size: 40px; }
  .card-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 833px) {
  .global-nav .nav-links { display: none; }
  .nav-toggle { display: block; }
  .sub-nav-frosted .sub-links a:not(.button-primary) { display: none; }
  .split { grid-template-columns: 1fr; }
  .footer-columns { grid-template-columns: repeat(2, 1fr); }
  .contact-grid { grid-template-columns: 1fr; }
}

@media (max-width: 734px) {
  .tile, .hero { padding-top: 48px; padding-bottom: 48px; }
  .card-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .t-hero-display { font-size: 34px; }
  .t-display-lg { font-size: 30px; }
  .footer-columns { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 419px) {
  .t-hero-display { font-size: 28px; }
  .wrap { padding: 0 var(--sp-lg); }
  .tile { padding-left: var(--sp-lg); padding-right: var(--sp-lg); }
}

/* ---- Mobile nav drawer ---- */

.mobile-nav {
  position: fixed;
  inset: 44px 0 0 0;
  background: var(--surface-black);
  z-index: 99;
  display: flex;
  flex-direction: column;
  padding: var(--sp-xl);
  gap: var(--sp-lg);
  transform: translateY(-100%);
  transition: transform 0.25s ease;
}

.mobile-nav.open { transform: translateY(0); }

.mobile-nav a {
  color: var(--on-dark);
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 600;
}

/* ---- Utility ---- */

.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.reveal.in { opacity: 1; transform: translateY(0); }