/* alohanoghosa.com brand tokens, measured from the live site (Oct 2026) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
:root {
  --bg: #000000;
  --ink: #FFFFFF;
  --ink-64: rgba(255, 255, 255, .64);
  --ink-32: rgba(255, 255, 255, .32);
  --ink-12: rgba(255, 255, 255, .12);
  --ink-06: rgba(255, 255, 255, .06);
  --accent: #EB4513;
  --surface: #0B0B0B;
  --line: rgba(255, 255, 255, .10);
  --font: 'Inter', system-ui, -apple-system, sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--bg); color: var(--ink); font-family: var(--font); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
b, strong { font-weight: 600; }

/* type ramp (web sizes) */
.t-display { font-size: 72px; line-height: 72px; font-weight: 500; letter-spacing: -1.44px; }
.t-display-lg { font-size: 150px; line-height: 136px; font-weight: 500; letter-spacing: -4.5px; }
.t-h2 { font-size: 66px; line-height: 66px; font-weight: 500; letter-spacing: -1.44px; }
.t-h3 { font-size: 24px; line-height: 30px; font-weight: 500; letter-spacing: -0.48px; }
.t-body { font-size: 16px; line-height: 24px; letter-spacing: -0.16px; }
.t-small { font-size: 14px; line-height: 20px; letter-spacing: -0.13px; }
.t-micro { font-size: 13px; line-height: 20px; letter-spacing: -0.13px; }
.muted { color: var(--ink-64); }
.faint { color: var(--ink-32); }
.acc { color: var(--accent); }

/* 12-column dashed guide lines, as on the portfolio */
.grid-lines { position: absolute; inset: 0; pointer-events: none; display: flex; justify-content: space-between; padding: 0 72px; }
.grid-lines i { width: 1px; height: 100%; border-left: 1px dashed rgba(255, 255, 255, .10); }

/* header */
.hdr { display: flex; align-items: flex-start; justify-content: space-between; padding: 40px 72px 0; height: 108px; position: relative; }
.hdr .left { display: flex; align-items: center; gap: 16px; }
.hdr .wordmark { font-size: 16px; line-height: 24px; letter-spacing: -0.16px; font-weight: 400; }
.pill { background: var(--accent); color: #fff; font-size: 13px; line-height: 20px; letter-spacing: -0.13px; padding: 2px 8px; display: inline-block; }
.hdr .right { display: flex; gap: 120px; align-items: flex-start; }
.hdr nav { display: flex; flex-direction: column; gap: 0; }
.hdr nav a, .hdr .cta { font-size: 14px; line-height: 20px; letter-spacing: -0.13px; }
.arrow::after { content: ' →'; }

/* sections */
.sec { position: relative; padding: 176px 72px; }
.sec.tight { padding: 120px 72px; }
.sec-head { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: end; margin-bottom: 88px; }
.sec-head .t-display { max-width: 640px; }
.sec-head p { max-width: 420px; }
.idx { display: grid; grid-template-columns: 96px 1fr; gap: 24px; align-items: start; }
.hair { border-top: 1px solid var(--line); }
.btn { display: inline-flex; align-items: center; gap: 10px; background: var(--ink); color: #000; font-size: 14px; line-height: 20px; letter-spacing: -0.13px; font-weight: 500; padding: 14px 22px; }
.btn.acc { background: var(--accent); color: #fff; }
.btn.ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink-32); }
.input { background: transparent; border: 0; border-bottom: 1px solid var(--ink-32); color: var(--ink); font: 400 16px/24px var(--font); letter-spacing: -0.16px; padding: 14px 0; width: 100%; outline: 0; }
.input::placeholder { color: var(--ink-32); }
.label { font-size: 14px; line-height: 20px; letter-spacing: -0.13px; color: var(--ink-64); }
.card { background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); padding: 32px; }