/* Styles for namritachahal.ca. You normally never need to edit this file. */
/* Layout: ivory editorial page with two dark bands (selected work, off the clock). One deliberate look in every theme. */
:root {
  color-scheme: light;
  --ivory: #F7F4EE; --paper: #FFFDF8; --paper-rule: #E4DDCE; --ink: #16181D; --ink-2: #3B3F47; --muted: #5A5E66; --rule: #DDD6C8;
  --gold: #7D5E26;
  --night: #101216; --night-card: #171A20; --night-node: #1E222A; --night-rule: #2A2E36; --night-line: #343944;
  --moon: #EDE8DD; --moon-2: #C9C2B4; --moon-muted: #A39C8E; --gold-lt: #D4B06A; --gold-bg: #2A2416; --ok: #7FB38A; --dim: #8A8478;
  --serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --sans: 'Geist', -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--ivory); color: var(--ink); font-family: var(--sans); font-size: 17px; line-height: 1.65; overflow-x: hidden; }
a { color: var(--ink); }
a:hover { color: var(--gold); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--gold-lt); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3 { text-wrap: balance; }
img { max-width: 100%; display: block; }
strong { font-weight: 500; }

.wrap { max-width: 1160px; margin: 0 auto; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }
.eyebrow { font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.h2 { margin: 0; font-weight: 600; font-size: clamp(30px, 4.5vw, 40px); line-height: 1.1; letter-spacing: -0.025em; }

/* header */
.site-header { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 10; background: rgba(247, 244, 238, 0.92); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.site-header .wrap { display: flex; flex-wrap: wrap; gap: 10px 24px; align-items: center; justify-content: space-between; padding-block: 18px; }
.brand { font-family: var(--serif); font-size: 28px; text-decoration: none; line-height: 1; }
.nav { display: flex; gap: 24px; align-items: center; font-size: 15px; overflow-x: auto; white-space: nowrap; max-width: 100%; padding-block: 4px; scrollbar-width: none; }
.nav::-webkit-scrollbar { display: none; }
.nav a { text-decoration: none; }
.pill { display: inline-block; text-decoration: none; padding: 11px 20px; border-radius: 999px; font-weight: 500; }
.pill-dark { background: var(--ink); color: var(--ivory); }
.pill-dark:hover { background: var(--gold); color: var(--ivory); }
.pill-line { border: 1px solid var(--ink); }

/* hero */
.hero { display: flex; flex-wrap: wrap; gap: clamp(40px, 7vw, 88px); align-items: center; padding-block: clamp(24px, 5vw, 64px) clamp(56px, 8vw, 88px); }
.hero-text { flex: 999 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 26px; }
.hero .eyebrow { color: var(--gold); font-size: 13px; }
.hero h1 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(44px, 8vw, 76px); line-height: 1.03; letter-spacing: -0.01em; }
.hero h1 em { color: var(--gold); }
.lede { margin: 0; max-width: 560px; font-size: clamp(17px, 2.2vw, 19px); color: var(--ink-2); }
.ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.ctas .pill { padding: 14px 26px; }
.fine { font-size: 14px; color: var(--muted); }
.portrait { margin: 0; flex: 1 1 300px; max-width: 400px; display: flex; flex-direction: column; gap: 12px; }
.portrait img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 52% 20%; border-radius: 220px 220px 18px 18px; }
.portrait figcaption { font-family: var(--mono); font-size: 12px; color: var(--muted); }

/* where I've been */
.been { padding-bottom: clamp(72px, 10vw, 112px); }
.been .eyebrow { padding-bottom: 14px; border-bottom: 1px solid var(--ink); }
.been-grid { display: flex; flex-wrap: wrap; column-gap: 32px; }
.been-grid > div { flex: 1 1 170px; min-width: 0; padding-block: 22px; border-bottom: 1px solid var(--rule); }
.been-grid > div.wide { flex: 2.1 1 340px; }
.been-grid b { display: block; font-size: 22px; font-weight: 600; letter-spacing: -0.01em; }
.been-grid span { font-size: 14px; color: var(--muted); }

/* work */
.work { background: var(--night); color: var(--moon); }
.work .wrap { display: flex; flex-direction: column; gap: clamp(32px, 5vw, 48px); padding-block: clamp(72px, 10vw, 112px); }
.work-head { display: flex; flex-direction: column; gap: 10px; max-width: 720px; }
.work-head .eyebrow { color: var(--gold-lt); letter-spacing: 0.1em; }
.work-head h2 { font-size: clamp(32px, 5vw, 46px); }
.work-head p { margin: 0; color: var(--moon-muted); }
.showcase { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.tabs { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.tab { text-align: left; font: inherit; color: #B5AE9F; background: transparent; border: 1px solid transparent; border-radius: 14px; padding: 16px 18px; cursor: pointer; display: flex; gap: 14px; align-items: baseline; min-height: 44px; transition: background .2s ease, border-color .2s ease, color .2s ease; }
.tab:hover { background: rgba(23, 26, 32, 0.6); color: var(--moon); }
.tab[aria-pressed="true"] { background: var(--night-card); border-color: #4A4434; color: var(--moon); }
.tab .n { font-family: var(--mono); font-size: 13px; color: #6E685D; }
.tab[aria-pressed="true"] .n { color: var(--gold-lt); }
.tab .t { display: flex; flex-direction: column; gap: 2px; }
.tab .t b { font-size: 16px; font-weight: 500; }
.tab .t span { font-family: var(--mono); font-size: 12px; color: var(--moon-muted); }
.panel { scroll-margin-top: 140px; flex: 999 1 560px; min-width: 0; background: var(--night-card); border: 1px solid var(--night-rule); border-radius: 22px; padding: clamp(22px, 4vw, 40px); }
.proj { display: flex; flex-direction: column; gap: 22px; }
@media (prefers-reduced-motion: no-preference) { .proj { animation: rise .35s ease both; } @keyframes rise { from { opacity: .4; transform: translateY(6px); } to { opacity: 1; transform: none; } } }
.proj .meta { font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--moon-muted); }
.proj h3 { margin: 0; font-weight: 600; font-size: clamp(24px, 3.5vw, 30px); line-height: 1.2; letter-spacing: -0.02em; }
.bul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; color: var(--moon-2); }
.bul li { display: flex; gap: 12px; }
.bul li::before { content: ""; flex: 0 0 6px; height: 6px; margin-top: 11px; border-radius: 50%; background: var(--gold-lt); }
.bul strong { color: var(--moon); }
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; font-size: 13px; }
.steps li { background: var(--night-node); border: 1px solid transparent; border-radius: 10px; padding: 12px; }
.steps li small { display: block; font-family: var(--mono); font-size: 11px; color: var(--moon-muted); }
.steps li.hot { background: var(--gold-bg); border-color: var(--gold-lt); }
.steps li.hot small { color: var(--gold-lt); }
.status { background: var(--night); border-radius: 12px; padding: 16px; display: flex; flex-direction: column; gap: 9px; font-family: var(--mono); font-size: 12px; }
.status div { display: flex; align-items: center; gap: 10px; }
.status div span:nth-child(2) { flex: 1 1 auto; color: var(--moon); }
.status i { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.s-done { color: var(--ok); } .s-done i { background: var(--ok); }
.s-run { color: var(--gold-lt); } .s-run i { background: var(--gold-lt); }
.s-wait { color: var(--dim); } .s-wait i { border: 1px solid var(--dim); } .s-wait span:nth-child(2) { color: var(--dim) !important; }
.tools { font-family: var(--mono); font-size: 12px; color: var(--moon-muted); padding-top: 18px; border-top: 1px solid var(--night-rule); }
.ph { color: var(--gold-lt); }

/* what I bring */
.bring { display: flex; flex-direction: column; gap: 32px; padding-block: clamp(72px, 10vw, 112px) 0; }
.bring .kit-head { display: flex; flex-direction: column; gap: 8px; }
.bring .kit-head p { margin: 0; color: var(--ink-2); }
.bring-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 32px; }
.bring-grid > div { border-top: 1px solid var(--ink); padding-top: 22px; display: flex; flex-direction: column; gap: 12px; }
.bring-grid h3 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(28px, 3.2vw, 36px); line-height: 1.08; letter-spacing: -0.01em; }
.bring-grid p { margin: 0; color: var(--ink-2); }
.bring-grid small { font-family: var(--mono); font-size: 12px; color: var(--gold); }

/* recommendation */
.rec { padding-block: clamp(72px, 10vw, 112px) 0; }
.rec figure { margin: 0; display: flex; flex-wrap: wrap; gap: 28px 64px; padding-bottom: clamp(56px, 8vw, 80px); border-bottom: 1px solid var(--rule); }
.rec-who { flex: 1 1 240px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.rec-who .eyebrow { color: var(--gold); }
.rec figcaption { display: flex; flex-direction: column; gap: 2px; }
.rec figcaption b { font-weight: 600; font-size: 18px; }
.rec figcaption span { font-size: 15px; color: var(--ink-2); }
.rec figcaption small { font-size: 14px; color: var(--muted); }
.rec blockquote { flex: 999 1 560px; min-width: 0; margin: 0; display: flex; flex-direction: column; gap: 20px; }
.rec blockquote p { margin: 0; font-size: 18px; color: var(--ink-2); max-width: 640px; }
.rec blockquote .big { font-family: var(--serif); font-size: clamp(30px, 4.5vw, 44px); line-height: 1.15; color: var(--ink); max-width: none; }

/* experience */
.exp { display: flex; flex-direction: column; gap: 32px; padding-block: clamp(72px, 10vw, 112px) clamp(40px, 6vw, 64px); }
.job { display: flex; flex-wrap: wrap; gap: 8px 40px; padding-block: 28px; border-top: 1px solid var(--rule); }
.job:first-child { border-top-color: var(--ink); }
.job:last-child { border-bottom: 1px solid var(--rule); }
.job-head { flex: 1 1 260px; min-width: 0; }
.job-head b { display: block; font-weight: 600; font-size: 19px; }
.job-head span { display: block; color: var(--ink-2); }
.job-head small { display: block; font-family: var(--mono); font-size: 13px; color: var(--muted); margin-top: 4px; }
.job ul { flex: 999 1 520px; min-width: 0; margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; color: var(--ink-2); }
.job strong { color: var(--ink); }

/* toolkit */
.kit { display: flex; flex-direction: column; gap: 24px; padding-block: clamp(40px, 6vw, 64px); }
.kit-head { display: flex; flex-direction: column; gap: 8px; }
.kit-head p { margin: 0; color: var(--ink-2); }
.kit dl { margin: 0; border-top: 1px solid var(--ink); }
.kit dl > div { display: flex; flex-wrap: wrap; gap: 6px 32px; padding-block: 18px; border-bottom: 1px solid var(--rule); }
.kit dt { flex: 0 0 160px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); padding-top: 3px; }
.kit dd { flex: 1 1 400px; min-width: 0; margin: 0; }
.kit .ai dt { color: var(--gold); }
.kit .ai dd { font-weight: 500; }

/* education & credentials */
.creds { display: flex; flex-direction: column; gap: 28px; padding-block: clamp(40px, 6vw, 64px) clamp(72px, 10vw, 104px); }
.cred-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.cred { background: var(--paper); border: 1px solid var(--paper-rule); border-radius: 18px; padding: 24px; display: flex; flex-direction: column; gap: 10px; }
.cred .eyebrow { color: var(--gold); }
.cred dl { margin: 0; display: flex; flex-direction: column; gap: 10px; font-size: 15px; }
.cred dt { font-weight: 600; }
.cred dd { margin: 0; color: var(--muted); }
.cred .school { font-weight: 600; line-height: 1.35; }
.cred .former { font-size: 14px; color: var(--muted); margin-top: -6px; }
.cred p { margin: 0; font-size: 15px; color: var(--ink-2); }
.cred .honours { padding-top: 10px; border-top: 1px solid var(--paper-rule); }
.more { font-size: 15px; font-weight: 500; align-self: flex-start; }

/* about */
.moonband { background: var(--ink); color: var(--moon); }
.moonband .wrap { display: flex; flex-wrap: wrap; gap: clamp(32px, 5vw, 64px); align-items: center; padding-block: clamp(64px, 9vw, 96px); }
.moonband img { flex: 0 0 auto; width: min(260px, 60vw); height: min(260px, 60vw); border-radius: 50%; object-fit: cover; box-shadow: 0 0 90px 6px rgba(237, 232, 221, 0.12); }
.moonband .text { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.moonband h2 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(34px, 5.5vw, 46px); line-height: 1.1; }
.moonband p { margin: 0; color: #CFC8BA; max-width: 600px; }

/* contact */
.contact { display: flex; flex-direction: column; gap: 24px; padding-block: clamp(72px, 10vw, 112px) 48px; }
.contact h2 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(56px, 12vw, 88px); line-height: 1; }
.contact p { margin: 0; max-width: 520px; color: var(--ink-2); }
.links { display: flex; flex-wrap: wrap; gap: 14px 32px; font-size: 18px; align-items: center; }
.email { user-select: all; overflow-wrap: anywhere; }
.foot { border-top: 1px solid var(--rule); padding-top: 22px; font-size: 13px; color: var(--muted); }

/* ===== motion & premium details ===== */
::selection { background: var(--gold-lt); color: var(--ink); }
.progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; background: var(--gold-lt); transform-origin: 0 50%; transform: scaleX(0); z-index: 50; pointer-events: none; }
.hero h1 { font-size: clamp(46px, 8.4vw, 92px); line-height: 1; letter-spacing: -0.02em; }
.hero h1 span { display: block; }
.draw { background-image: linear-gradient(var(--gold), var(--gold)); background-repeat: no-repeat; background-position: 0 92%; background-size: 100% 2px; padding-bottom: 2px; }
.nav a:not(.pill), .email { text-decoration: none; background-image: linear-gradient(currentColor, currentColor); background-repeat: no-repeat; background-position: 0 100%; background-size: 0% 1px; transition: background-size .45s cubic-bezier(.2,.7,.2,1); }
.nav a:not(.pill):hover, .email:hover { background-size: 100% 1px; }
.pill { transition: transform .35s cubic-bezier(.2,.7,.2,1), background-color .3s, color .3s; }
.pill:hover { transform: translateY(-2px); }
.pill .arr { display: inline-block; transition: transform .35s cubic-bezier(.2,.7,.2,1); }
.pill:hover .arr { transform: translateX(5px); }
.edu { transition: transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .45s, border-color .3s; }
.edu:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -24px rgba(22,24,29,.35); border-color: #CDBF9F; }
.moonrise { flex: 0 0 auto; border-radius: 50%; }
.contact h2 { font-size: clamp(64px, 14vw, 140px); letter-spacing: -0.02em; }
@keyframes nRise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes nArch { from { clip-path: inset(100% 0 0 0 round 220px 220px 18px 18px); transform: scale(1.06); } to { clip-path: inset(0 0 0 0 round 220px 220px 18px 18px); transform: none; } }
@keyframes nDraw { from { background-size: 0% 2px; } to { background-size: 100% 2px; } }
@keyframes nPanel { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes nReveal { from { opacity: 0; transform: translateY(36px); } to { opacity: 1; transform: none; } }
@keyframes nMoon { from { transform: translateY(90px) rotate(-10deg); } to { transform: translateY(-50px) rotate(6deg); } }
@keyframes nGlow { 0%, 100% { box-shadow: 0 0 60px 4px rgba(237,232,221,.10); } 50% { box-shadow: 0 0 130px 22px rgba(237,232,221,.24); } }
@keyframes nGrow { to { transform: scaleX(1); } }
@media (prefers-reduced-motion: no-preference) {
  .hero .eyebrow, .hero h1 span, .lede, .ctas, .hero .fine, .portrait figcaption { animation: nRise 1s cubic-bezier(.2,.7,.2,1) both; }
  .hero h1 span:nth-child(1) { animation-delay: .1s; }
  .hero h1 span:nth-child(2) { animation-delay: .22s; }
  .lede { animation-delay: .4s; } .ctas { animation-delay: .55s; } .hero .fine { animation-delay: .7s; } .portrait figcaption { animation-delay: .9s; }
  .portrait img { animation: nArch 1.5s cubic-bezier(.7,0,.15,1) .15s both; }
  .draw { animation: nDraw 1s cubic-bezier(.7,0,.2,1) 1.1s both; }
  .proj { animation: nPanel .55s cubic-bezier(.2,.7,.2,1) both; }
  .moonband img { animation: nGlow 7s ease-in-out infinite; }
  @supports (animation-timeline: view()) {
    .work-head, .h2, .bring-grid > div, .moonband h2, .contact h2 { animation: nReveal linear both; animation-timeline: view(); animation-range: entry 0% entry 100%; }
    .moonrise { animation: nMoon linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
    .progress { animation: nGrow linear both; animation-timeline: scroll(root); }
  }
}

/* ===== bigger, easier-to-read labels ===== */
.eyebrow { font-family: var(--sans); font-size: 15px; font-weight: 600; letter-spacing: 0.07em; }
.hero .eyebrow { font-size: 16px; }
.portrait figcaption { font-family: var(--sans); font-size: 15px; }
.fine, .been-grid span { font-size: 15px; }
.tab .n { font-family: var(--sans); font-size: 15px; font-weight: 600; }
.tab .t span { font-family: var(--sans); font-size: 14px; }
.proj .meta { font-family: var(--sans); font-size: 14px; font-weight: 600; letter-spacing: 0.06em; }
.steps { font-size: 15px; }
.steps li small { font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: 0.06em; }
.status { font-family: var(--sans); font-size: 14px; }
.tools { font-family: var(--sans); font-size: 14px; }
.job-head small { font-family: var(--sans); font-size: 15px; }
.kit dt { font-family: var(--sans); font-size: 14px; font-weight: 600; }
.bring-grid small { font-family: var(--sans); font-size: 14px; font-weight: 600; }
.rec figcaption small, .cred .former, .foot { font-size: 15px; }
.cred dl { font-size: 16px; }

/* ===== experience timeline + skills & credentials ===== */
:root { --sand: #EFE7D8; --sand-rule: #DCCFB6; }
.exp-band { background: var(--sand); }
.exp-band .wrap { padding-block: clamp(72px, 10vw, 112px); display: flex; flex-direction: column; gap: 44px; }
.exp-band .lead { margin: 8px 0 0; color: var(--ink-2); }
.timeline { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 48px 0; list-style: none; margin: 0; padding: 0; }
.stop { position: relative; padding: 32px 32px 0 0; border-top: 2px solid var(--ink); display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.stop::before { content: ""; position: absolute; top: -9px; left: 0; width: 16px; height: 16px; border-radius: 50%; background: var(--sand); border: 2px solid var(--ink); box-sizing: border-box; }
.stop.now::before { background: var(--gold); border-color: var(--gold); box-shadow: 0 0 0 6px rgba(125, 94, 38, 0.18); }
.stop .yr { font-family: var(--serif); font-size: clamp(52px, 6vw, 76px); line-height: 0.9; }
.stop.now .yr { color: var(--gold); }
.yr-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.now-tag { align-self: center; font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ivory); background: var(--gold); padding: 3px 11px; border-radius: 999px; }
.stop .co { margin: 14px 0 0; font-size: 24px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.2; }
.stop .role { font-size: 17px; color: var(--ink); }
.stop .when { font-size: 15px; color: var(--muted); }
.stop ul { list-style: disc; margin: 16px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 9px; color: var(--ink-2); font-size: 16px; }
.stop strong { color: var(--ink); }
.skills { display: flex; flex-direction: column; gap: 36px; padding-block: clamp(72px, 10vw, 112px) clamp(56px, 8vw, 88px); }
.skills-grid { display: flex; flex-wrap: wrap; gap: 48px 64px; align-items: flex-start; }
.tk { flex: 3 1 440px; min-width: 0; }
.cr { flex: 2 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.sub { margin: 0 0 14px; font-size: 15px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--gold); }
.tk dl { margin: 0; border-top: 1px solid var(--ink); }
.tk dl > div { display: flex; flex-wrap: wrap; gap: 6px 28px; padding-block: 18px; border-bottom: 1px solid var(--rule); }
.tk dt { flex: 0 0 150px; font-size: 14px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); padding-top: 3px; }
.tk dd { flex: 1 1 260px; min-width: 0; margin: 0; }
.tk .ai dt { color: var(--gold); }
.tk .ai dd { font-weight: 500; }
.edu { background: var(--paper); border: 1px solid var(--paper-rule); border-radius: 18px; padding: 24px; display: flex; flex-direction: column; gap: 6px; }
.edu .school { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; }
.edu .former { font-size: 15px; color: var(--muted); }
.edu p { margin: 6px 0 0; font-size: 15px; color: var(--ink-2); }
.edu .honours { padding-top: 12px; margin-top: 10px; border-top: 1px solid var(--paper-rule); }
.cert-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px 24px; }
.cert-col dl { margin: 0; display: flex; flex-direction: column; gap: 12px; font-size: 16px; }
.cert-col dt { font-weight: 600; line-height: 1.35; }
.cert-col dd { margin: 0; color: var(--muted); font-size: 15px; }

/* ===== personality ===== */
.moonband .mentor { color: var(--gold-lt); font-size: 18px; font-weight: 500; padding-top: 16px; border-top: 1px solid #343944; }
.quirks { flex: 1 1 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-top: 12px; list-style: none; padding: 0; }
.quirk { background: #1F2229; border: 1px solid #2F333C; border-radius: 18px; padding: 22px; display: flex; flex-direction: column; gap: 8px; transition: transform .45s cubic-bezier(.2,.7,.2,1), border-color .3s; }
.quirk:hover { transform: translateY(-4px) rotate(-0.6deg); border-color: #5A5140; }
.quirk .tag { font-size: 13px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--gold-lt); }
.quirk b { font-family: var(--serif); font-weight: 400; font-size: 26px; line-height: 1.1; color: var(--moon); }
.quirk span:last-child { font-size: 15px; color: #CFC8BA; }
.ask { display: flex; flex-direction: column; gap: 14px; }
.ask .label { font-size: 15px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--gold); }
.ask ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.ask li { border: 1px solid var(--ink); border-radius: 999px; padding: 10px 18px; font-size: 16px; background: var(--paper); transition: background-color .3s, color .3s, transform .35s cubic-bezier(.2,.7,.2,1); }
.ask li:hover { background: var(--ink); color: var(--ivory); transform: translateY(-2px); }

/* ===== scroll-driven storytelling ===== */
.work { position: relative; overflow: clip; }
.work::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .4s; background: radial-gradient(520px circle at var(--mx, 50%) var(--my, 50%), rgba(212, 176, 106, 0.11), transparent 60%); }
.work.lit::before { opacity: 1; }
.work .wrap { position: relative; }
.pin-track { position: relative; }
.tab .bar { display: block; height: 2px; margin-top: 8px; background: #2A2E36; border-radius: 2px; overflow: hidden; }
.tab .bar i { display: block; height: 100%; width: 0; background: var(--gold-lt); transition: width .25s linear; }
.tab[aria-pressed="true"] .bar i { width: var(--fill, 100%); }
.pin-hint { display: none; font-size: 14px; color: var(--moon-muted); margin-top: 10px; }
@media (min-width: 1000px) and (min-height: 760px) and (prefers-reduced-motion: no-preference) {
  .pinned .pin-track { height: 300vh; }
  .pinned .showcase { position: sticky; top: 96px; }
  .pinned .pin-hint { display: block; }
}
.portrait { transition: transform .6s cubic-bezier(.2,.7,.2,1); transform-style: preserve-3d; will-change: transform; }
.scrub .w { opacity: 0.22; transition: opacity .25s linear; }
.scrub .w.on { opacity: 1; }
.tl-wrap { position: relative; }
.tl-fill { position: absolute; left: 0; top: 0; height: 2px; width: 0; background: var(--gold); z-index: 1; pointer-events: none; }
.stop { transition: opacity .5s; }
.timeline.dim .stop { opacity: .45; }
.timeline.dim .stop.lit { opacity: 1; }
.stop.lit::before { background: var(--gold); border-color: var(--gold); transition: background .3s, border-color .3s; }
.stop.lit .yr { color: var(--gold); transition: color .4s; }
@media (prefers-reduced-motion: reduce) { .scrub .w { opacity: 1; } .timeline.dim .stop { opacity: 1; } }

/* ===== availability ===== */
.avail { display: inline-flex; align-items: center; gap: 10px; align-self: flex-start; padding: 9px 18px 9px 14px; border-radius: 999px; border: 1px solid rgba(125, 94, 38, 0.45); background: rgba(212, 176, 106, 0.14); color: var(--ink); font-size: 16px; font-weight: 600; letter-spacing: -0.005em; }
.avail .dot { position: relative; width: 10px; height: 10px; border-radius: 50%; background: var(--gold); flex-shrink: 0; }
.avail .dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--gold); opacity: 0.5; }
.avail b { color: var(--gold); font-weight: 700; white-space: nowrap; }
@media (max-width: 420px) { .avail { font-size: 15px; } }
.contact .avail { font-size: 18px; padding: 11px 22px 11px 16px; }
@keyframes nPing { 0% { transform: scale(1); opacity: .5; } 80%, 100% { transform: scale(2.6); opacity: 0; } }
@media (prefers-reduced-motion: no-preference) {
  .hero .avail { animation: nRise 1s cubic-bezier(.2,.7,.2,1) both; }
  .avail .dot::after { animation: nPing 2s cubic-bezier(0,0,.2,1) infinite; }
}

/* ===== skills & credentials v2 ===== */
.tool-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 28px 32px; padding-top: 28px; border-top: 1px solid var(--ink); }
.tg h3 { margin: 0 0 12px; font-size: 14px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); }
.tg.ai h3 { color: var(--gold); }
.tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.tags li { font-size: 15px; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--rule); background: var(--paper); line-height: 1.3; }
.tg.ai .tags li { background: rgba(212, 176, 106, 0.16); border-color: rgba(125, 94, 38, 0.45); font-weight: 500; }
.cred-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin-top: 12px; }
.ccard { background: var(--paper); border: 1px solid var(--paper-rule); border-radius: 18px; padding: 26px; display: flex; flex-direction: column; gap: 14px; transition: transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .45s, border-color .3s; }
.ccard:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -24px rgba(22, 24, 29, 0.35); border-color: #CDBF9F; }
.ccard h3 { margin: 0; font-size: 14px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--gold); }
.ccard dl { margin: 0; display: flex; flex-direction: column; gap: 14px; font-size: 16px; }
.ccard dt { font-weight: 600; line-height: 1.35; }
.ccard dd { margin: 2px 0 0; color: var(--muted); font-size: 15px; }
.ccard .school { font-size: 19px; font-weight: 600; line-height: 1.3; }
.ccard .former { font-size: 15px; color: var(--muted); margin-top: -10px; }
.ccard p { margin: 0; font-size: 15px; color: var(--ink-2); }
.ccard .honours { padding-top: 12px; border-top: 1px solid var(--paper-rule); }

/* ===== email, easy to find ===== */
.big-email { font-size: clamp(22px, 3.2vw, 32px); font-weight: 600; letter-spacing: -0.01em; }
.copy { font: inherit; font-size: 15px; font-weight: 500; padding: 10px 18px; border-radius: 999px; border: 1px solid var(--ink); background: transparent; color: var(--ink); cursor: pointer; transition: background-color .3s, color .3s; }
.copy:hover { background: var(--ink); color: var(--ivory); }

/* ===== pinned projects: fit shorter laptop screens ===== */
@media (min-width: 1000px) and (min-height: 640px) and (prefers-reduced-motion: no-preference) {
  .pinned .pin-track { height: 300vh; }
  .pinned .showcase { position: sticky; top: 84px; }
  .pinned .pin-hint { display: block; }
}
@media (min-width: 1000px) and (max-height: 900px) {
  .pinned .panel { padding: 24px 30px; }
  .pinned .proj { gap: 14px; }
  .pinned .proj h3 { font-size: 24px; }
  .pinned .bul { gap: 8px; font-size: 15.5px; line-height: 1.55; }
  .pinned .tab { padding: 12px 16px; }
  .pinned .steps li { padding: 9px 12px; }
  .pinned .status { padding: 12px; gap: 6px; }
  .pinned .tools { padding-top: 12px; }
}