/* Shared by index.html, work.html and experience.html */
.hero { position: relative; padding: 168px 0 96px; }
.hero-grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: 56px; align-items: center; }
.badge { display: inline-flex; gap: 10px; align-items: center; padding: 6px 14px 6px 10px; border: 1px solid var(--line2); border-radius: 999px; font-size: 13px; color: var(--soft); background: var(--panel); }
.badge i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 25%, transparent); animation: pulse 2s infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--c) 8%, transparent); } }
h1 { font-size: clamp(2.8rem, 6.4vw, 5.4rem); line-height: 1; letter-spacing: -.045em; font-weight: 650; margin: 24px 0 22px; }
h1 .grad { background: linear-gradient(92deg, var(--a2) 0%, var(--a) 45%, var(--b) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lead { font-size: clamp(1.05rem, 1.4vw, 1.2rem); color: var(--mute); max-width: 52ch; }
.lead b { color: var(--text); font-weight: 500; }
.actions { display: flex; gap: 12px; margin-top: 34px; flex-wrap: wrap; }

.strip { border-block: 1px solid var(--line); padding: 22px 0; overflow: hidden; background: color-mix(in srgb, var(--panel) 50%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent); mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent); }
.strip-in { display: flex; gap: 56px; width: max-content; animation: marquee 45s linear infinite; color: var(--mute); font-weight: 500; font-size: 18px; letter-spacing: -.01em; }
.strip-in span::before { content: "◆"; font-size: 9px; margin-right: 56px; vertical-align: 3px; color: var(--b); }
@keyframes marquee { to { transform: translateX(-50%); } }

section.s { padding: 120px 0; }

.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-top: 44px; }
.fact { padding: 22px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); }
.fact span { font-size: 12px; color: var(--mute); text-transform: uppercase; letter-spacing: .1em; }
.fact strong { display: block; margin-top: 10px; font-size: 1.15rem; font-weight: 600; letter-spacing: -.02em; }

.bento { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 48px; }
.pcard { position: relative; border-radius: var(--r); background: var(--panel); border: 1px solid var(--line); overflow: hidden; display: flex; flex-direction: column; isolation: isolate; transition: box-shadow .3s; }
.pcard:hover { box-shadow: 0 30px 60px -35px rgba(40,25,15,.45); }
.pcard:first-child { grid-column: span 2; }
.pcard::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; z-index: 2; pointer-events: none;
  background: radial-gradient(380px circle at var(--x, 50%) var(--y, 50%), var(--a), transparent 45%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity .3s; }
.pcard::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(500px circle at var(--x, 50%) var(--y, 50%), color-mix(in srgb, var(--b) 14%, transparent), transparent 45%); opacity: 0; transition: opacity .3s; }
.pcard:hover::before, .pcard:hover::after { opacity: 1; }
/* covers are drawn panels in the same look as the Right now card; the screenshot lives on the project page */
.cover { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 20px; aspect-ratio: 16 / 9; min-height: 232px; padding: 22px 24px; background: var(--code-bg); color: var(--code-text); overflow: hidden; flex: none; container-type: inline-size; }
.cover::before { content: ""; position: absolute; width: 70%; aspect-ratio: 1; right: -18%; top: -45%; border-radius: 50%; background: radial-gradient(closest-side, rgba(192,138,90,.34), transparent); transition: transform .9s var(--ease); pointer-events: none; }
.pcard:hover .cover::before { transform: translate(-24px, 22px) scale(1.12); }
.cover > * { position: relative; }
.cover-top { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: #b3a394; }
.cover-status { display: inline-flex; align-items: center; gap: 10px; color: var(--code-text); }
.cover-status i { width: 8px; height: 8px; border-radius: 50%; background: #e0c09a; }
.cover-status.live i { background: #9fb58a; box-shadow: 0 0 0 4px rgba(159,181,138,.22); }
.cover-line { display: block; max-width: 24ch; font-size: clamp(1.3rem, 5.4cqw, 2.3rem); font-weight: 600; letter-spacing: -.03em; line-height: 1.12; text-wrap: balance; }
.cover-num { font-size: 12px; letter-spacing: .1em; color: #b3a394; }
.pcard:first-child { flex-direction: row; }
.pcard:first-child .cover { width: 58%; align-self: stretch; }
.pcard:first-child .pbody { justify-content: center; padding: 32px; }
.vt-back .rv { transition: none !important; }
.coffee { margin-top: 28px; }
.coffee-label { font-size: 12px; color: var(--a); letter-spacing: .12em; text-transform: uppercase; }
.coffee-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-top: 12px; }
.coffee-shop { display: block; padding: 18px 22px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); transition: border-color .2s, transform .2s var(--ease); }
.coffee-shop:hover { border-color: var(--a); transform: translateY(-2px); }
.coffee-shop:focus-visible { outline: 2px solid var(--a); outline-offset: 2px; }
.coffee-shop i { font-style: normal; color: var(--a); }
.coffee-order { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 14px; font-weight: 550; }
.coffee-order small { display: block; margin-bottom: 2px; font-size: 11px; font-weight: 400; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }
.coffee-shop strong { display: block; font-size: 1.05rem; font-weight: 600; letter-spacing: -.02em; }
.coffee-shop span { display: block; margin-top: 2px; font-size: 12px; color: var(--mute); }
.coffee-shop p { margin-top: 10px; font-size: 14px; color: var(--soft); }
.pbody { padding: 24px; display: flex; flex-direction: column; flex: 1; }
.pbody h3 { font-size: 1.4rem; letter-spacing: -.025em; font-weight: 600; margin: 0 0 8px; }
.pbody p { color: var(--soft); font-size: 15px; }
.plinks { display: flex; gap: 18px; margin-top: auto; padding-top: 18px; font-size: 14px; }
.pnote { color: var(--mute); }
.pbody h3 { width: fit-content; max-width: 100%; }
.plink::after { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; }
.plink:focus-visible { outline: none; } .pcard:has(.plink:focus-visible) { outline: 2px solid var(--a); outline-offset: 3px; }
.plinks { flex-wrap: wrap; align-items: center; }
.plinks a { position: relative; z-index: 4; }
.pmore { margin-left: auto; color: var(--text); font-weight: 550; white-space: nowrap; }
.pmore span { display: inline-block; color: var(--a); transition: transform .3s var(--ease); }
.pcard:hover .pmore span { transform: translateX(6px); }
.plinks a { color: var(--a); font-weight: 500; } .plinks a:hover { color: var(--text); }

.exp-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 48px; margin-top: 48px; align-items: start; }
.tl { position: relative; padding-left: 34px; }
.tl::before { content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px; background: var(--line2); }
.tl-fill { position: absolute; left: 7px; top: 8px; width: 2px; height: 0; background: linear-gradient(var(--a), var(--b)); }
.ti { position: relative; padding-bottom: 44px; }
.ti:last-child { padding-bottom: 0; }
.ti::before { content: ""; position: absolute; left: -33px; top: 6px; width: 14px; height: 14px; border-radius: 50%; background: var(--bg); border: 2px solid var(--a); }
.ti-head { display: flex; justify-content: space-between; gap: 6px 16px; flex-wrap: wrap; align-items: baseline; }
.ti h3 { font-size: 1.25rem; font-weight: 600; letter-spacing: -.02em; }
.ti .org { color: var(--mute); margin-top: 2px; }
.ti .date { font-size: 13px; color: var(--mute); }
.ti ul { margin-top: 12px; color: var(--soft); padding-left: 18px; font-size: 15px; }
.ti li + li { margin-top: 4px; }
.edu { padding: 24px; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); }
.edu + .edu { margin-top: 12px; }
.edu .date { font-size: 13px; color: var(--mute); }
.edu h3 { font-size: 1.15rem; font-weight: 600; margin: 8px 0 2px; }
.edu .org { color: var(--mute); }
.edu ul { margin-top: 12px; color: var(--soft); padding-left: 18px; font-size: 14.5px; }
.label { font-size: 12px; color: var(--mute); text-transform: uppercase; letter-spacing: .12em; margin-bottom: 14px; }

.skills { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 48px; }
.skill { padding: 26px; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); }
.skill h3 { font-size: 1rem; font-weight: 600; display: flex; justify-content: space-between; }
.skill h3 span { color: var(--mute); font-weight: 400; font-size: 13px; }
.skill .chips .chip { font-size: 13px; padding: 6px 12px; }

.cta-card { position: relative; border-radius: 24px; padding: 88px 28px; text-align: center; overflow: hidden; border: 1px solid var(--line2);
  background: radial-gradient(700px circle at 50% -10%, color-mix(in srgb, var(--b) 35%, transparent), transparent 60%), radial-gradient(500px circle at 90% 120%, color-mix(in srgb, var(--a) 22%, transparent), transparent 60%), var(--panel); }
.cta-card h2 { font-size: clamp(2.4rem, 5.5vw, 4.4rem); }
.cta-card .sub { margin: 0 auto; }
.cta-card .actions { justify-content: center; }
.copy-ok { color: var(--c); }


@media (max-width: 900px) {
  .hero { padding-top: 130px; }
  .hero-grid, .exp-grid { grid-template-columns: 1fr; }
  .bento, .skills { grid-template-columns: 1fr; }
  .pcard:first-child { grid-column: auto; flex-direction: column; }
  .pcard:first-child .cover { width: 100%; }
  .pcard:first-child .pbody { padding: 24px; }
  .facts { grid-template-columns: 1fr 1fr; }
  section.s { padding: 88px 0; }
}
/* freelance banner: same black & sky blue as the business card, in both themes */
.biz { display: flex; align-items: center; gap: 24px; margin-top: 18px; padding: 26px 30px; border-radius: 18px; background: #0b0b0d; color: #fff; border: 1px solid rgba(91,200,245,.25); position: relative; overflow: hidden; isolation: isolate; transition: transform .3s var(--ease), box-shadow .3s; }
.biz::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(70% 140% at 100% 50%, rgba(91,200,245,.16), transparent 60%); }
.biz:hover { transform: translateY(-3px); box-shadow: 0 30px 60px -36px rgba(11,11,13,.8); }
.biz-mm { width: 56px; height: 32px; flex: none; }
.biz-txt { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.biz small { font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: #8f96a1; }
.biz strong { font-family: "Space Grotesk", "Geist", sans-serif; font-size: clamp(1.15rem, 2.2vw, 1.5rem); font-weight: 700; letter-spacing: -.02em; line-height: 1.2; }
.biz strong span { color: #5bc8f5; }
.biz-go { flex: none; padding: 11px 18px; border-radius: 12px; background: #5bc8f5; color: #0b0b0d; font-weight: 600; font-size: 15px; }
.biz-go .arr { display: inline-block; transition: transform .3s var(--ease); }
.biz:hover .biz-go .arr { transform: translateX(4px); }
@media (max-width: 640px) { .biz { flex-direction: column; align-items: flex-start; gap: 16px; padding: 24px; } .biz-go { align-self: stretch; text-align: center; } }

/* "Right now" card on the home page */
.now { --now-mute: #b3a394; position: relative; padding: 26px 28px 12px; border: 1px solid var(--line2); border-radius: 20px; background: var(--code-bg); color: var(--code-text); box-shadow: 0 40px 90px -35px rgba(40,25,15,.55); }
.now-head { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--now-mute); }
.now-live { display: inline-flex; align-items: center; gap: 10px; color: var(--code-text); }
.now-live i { width: 8px; height: 8px; border-radius: 50%; background: #9fb58a; box-shadow: 0 0 0 4px rgba(159,181,138,.22); animation: pulse-now 2s infinite; }
@keyframes pulse-now { 50% { box-shadow: 0 0 0 7px rgba(159,181,138,.06); } }
.now-time { display: block; margin-top: 20px; font-size: clamp(3.2rem, 5.6vw, 4.6rem); font-weight: 620; letter-spacing: -.05em; line-height: 1; font-variant-numeric: tabular-nums; }
.now-time small { margin-left: 8px; font-size: .3em; font-weight: 500; letter-spacing: .02em; color: var(--now-mute); }
.now-day { display: block; margin: 8px 0 18px; font-size: 14px; color: var(--now-mute); }
.now-row { display: grid; grid-template-columns: 100px 1fr; gap: 12px; align-items: baseline; padding: 13px 0; border-top: 1px solid var(--code-line); }
.now-row dt { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--now-mute); }
.now-row dd { font-size: 15px; font-weight: 500; letter-spacing: -.01em; }
.now-row a { color: #e0c09a; }
.now-row a span { display: inline-block; transition: transform .3s var(--ease); }
.now-row a:hover span { transform: translateX(4px); }
.now-row a:focus-visible { outline: 2px solid #e0c09a; outline-offset: 3px; border-radius: 4px; }

/* page headers on Work and Experience */
.phero { position: relative; padding: 152px 0 0; }
.phero h1 { font-size: clamp(2.6rem, 6vw, 4.8rem); margin: 16px 0 14px; }
.phero .sub { font-size: 1.12rem; }
.phero .actions { margin-top: 24px; }
section.s.after-head { padding-top: 8px; }
.more-row { display: flex; justify-content: center; margin-top: 28px; }
.sub-head { margin-top: 96px; }
@media (max-width: 640px) { .phero { padding-top: 112px; } .now { padding: 22px 20px 8px; } .now-row { grid-template-columns: 88px 1fr; } }
@media (max-width: 480px) { .coffee-list { grid-template-columns: 1fr 1fr; } }
@media (max-width: 360px) { .facts, .coffee-list { grid-template-columns: 1fr; } }