/*
Purpose: Style the portfolio's proof of work, technical studies, approach, experience, and contact sections.
Rationale: Product-like interfaces let the work demonstrate design judgement without relying on unsupported claims.
Notes: Decorative interfaces are representative and excluded from the accessibility tree in the markup.
*/
.hero { background: var(--paper); padding-block: clamp(4rem, 8vw, 7.5rem) clamp(6rem, 10vw, 9rem); }
.hero-grid { align-items: center; display: grid; gap: clamp(3rem, 7vw, 7rem); grid-template-columns: 1.05fr .95fr; }
.hero h1 { font-size: clamp(3.8rem, 7.2vw, 7rem); margin: 0 0 2rem; max-width: 10ch; }
.hero h1 span { color: var(--orange); display: block; }
.hero-intro { color: var(--text-soft); font-size: clamp(1.05rem, 1.8vw, 1.3rem); line-height: 1.6; max-width: 40rem; }
.hero-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 1.4rem; margin-top: 2.25rem; }
.hero-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: 0 28px 80px var(--card-shadow); min-height: 35rem; overflow: hidden; position: relative; transform: rotate(1.2deg); }
.hero-card::before { background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 38px 38px; content: ""; inset: 3rem 0 0; opacity: .45; position: absolute; }
.card-bar { align-items: center; border-bottom: 1px solid var(--line); display: flex; gap: .4rem; height: 3rem; padding: 0 1rem; position: relative; }
.card-bar i { background: var(--line); border-radius: 50%; height: .55rem; width: .55rem; }
.card-bar span { color: var(--text-muted); font-size: .67rem; font-weight: 650; margin-left: auto; }
.system-orbit { border: 1px solid var(--text); border-radius: 50%; height: 20rem; left: 50%; position: absolute; top: 54%; transform: translate(-50%, -50%); width: 20rem; }
.system-core { align-items: center; background: var(--orange); border-radius: var(--radius); color: var(--white); display: flex; font-size: 2.3rem; font-weight: 750; height: 7.5rem; justify-content: center; left: 50%; letter-spacing: -.08em; position: absolute; top: 50%; transform: translate(-50%, -50%) rotate(-1.2deg); width: 7.5rem; }
.system-node { align-items: center; background: var(--surface); border: 1px solid var(--text); border-radius: 2rem; display: flex; font-size: .72rem; font-weight: 720; min-height: 2.5rem; padding: .5rem .9rem; position: absolute; }
.node-one { left: -2rem; top: 3rem; }.node-two { right: -3.2rem; top: 8rem; }.node-three { bottom: 1.5rem; left: 1.2rem; }.node-four { left: -3rem; top: 12rem; }
.signal { background: var(--orange); height: .55rem; position: absolute; right: 2rem; top: 5.5rem; transform: rotate(-8deg); width: 5.5rem; }
.signal::before, .signal::after { background: var(--orange); content: ""; height: 100%; position: absolute; transform: rotate(60deg); width: 100%; }
.signal::after { transform: rotate(-60deg); }
.marquee { background: var(--ink); border-block: 1px solid var(--line-dark); color: var(--white); overflow: hidden; padding-block: 1rem; position: relative; }
.marquee::before, .marquee::after { content: ""; inset-block: 0; pointer-events: none; position: absolute; width: clamp(1.25rem, 4vw, 4rem); z-index: 1; }
.marquee::before { background: linear-gradient(90deg, var(--ink), transparent); left: 0; }
.marquee::after { background: linear-gradient(270deg, var(--ink), transparent); right: 0; }
.marquee-track { animation: marquee-scroll 32s linear infinite; display: flex; width: max-content; will-change: transform; }
.marquee-group { align-items: center; display: flex; flex: 0 0 auto; gap: clamp(1.8rem, 3vw, 3.5rem); padding-right: clamp(1.8rem, 3vw, 3.5rem); }
.marquee span { align-items: center; display: flex; font-size: .72rem; font-weight: 700; gap: clamp(1.8rem, 3vw, 3.5rem); letter-spacing: .09em; white-space: nowrap; text-transform: uppercase; }
.marquee span::after { color: var(--orange); content: "×"; font-size: 1.25rem; font-weight: 750; line-height: .7; }
@keyframes marquee-scroll { to { transform: translateX(-50%); } }

.section-top { align-items: end; display: flex; gap: 4rem; justify-content: space-between; margin-bottom: clamp(3.5rem, 7vw, 6rem); }
.section-top h2 { margin: 0; max-width: 11ch; }
.section-top .section-intro { margin: 0 0 .6rem; }
.project-meta { font-size: .7rem; font-weight: 720; letter-spacing: .08em; text-transform: uppercase; }
.tags { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 1.4rem 0 0; padding: 0; }
.tags li { border: 1px solid currentColor; border-radius: 2rem; font-size: .66rem; font-weight: 700; padding: .35rem .65rem; }

.work { background: var(--paper); padding-block: clamp(6rem, 11vw, 10rem); }
.project-feature { background: var(--orange); border-radius: var(--radius-lg); color: var(--white); display: grid; grid-template-columns: 1.02fr .98fr; min-height: 43rem; overflow: hidden; }
.project-feature-copy { display: flex; flex-direction: column; padding: clamp(2rem, 5vw, 4.5rem); }
.project-feature h3 { font-size: clamp(3rem, 5.4vw, 5.25rem); margin: auto 0 1.5rem; max-width: 8ch; }
.project-feature-copy > p:not(.project-meta) { font-size: .98rem; line-height: 1.65; margin-bottom: 1rem; max-width: 34rem; }
.translator-console { background: #232321; border-radius: .7rem; margin: 1rem; min-height: 34rem; overflow: hidden; }
.console-bar { align-items: center; border-bottom: 1px solid var(--line-dark); color: var(--white); display: flex; font-size: .67rem; gap: .4rem; height: 3rem; padding-inline: 1rem; }
.console-bar i { background: #666; border-radius: 50%; height: .45rem; width: .45rem; }
.console-bar span { color: #aaa; margin-left: auto; }
.translation-list { color: var(--white); padding: clamp(1rem, 3vw, 2rem); }
.translation-summary { align-items: center; border-bottom: 1px solid var(--line-dark); display: flex; font-size: .68rem; justify-content: space-between; letter-spacing: .06em; padding: .25rem 0 1.25rem; text-transform: uppercase; }
.translation-summary span { color: #aaa; }.translation-summary strong { color: var(--orange-soft); }
.translation-row { border-bottom: 1px solid var(--line-dark); display: grid; gap: 1.25rem; grid-template-columns: 1fr 1fr; padding-block: 1.4rem; }
.translation-row small { color: #999; display: block; font-size: .62rem; letter-spacing: .05em; text-transform: uppercase; }
.translation-row p { font-size: .78rem; margin: .5rem 0 0; }
.match-result { border-left: 2px solid #6ca678; padding-left: 1rem; }
.match-result span { color: #91ce9d; font-size: .62rem; font-weight: 700; text-transform: uppercase; }
.match-result strong { display: block; font-size: .75rem; margin: .38rem 0; }
.translation-row.is-review .match-result { border-left-color: var(--orange); }
.translation-row.is-review .match-result span { color: #ff9d7a; }
.project-grid { display: grid; gap: 1rem; margin-top: 1rem; }
.project-grid-two { grid-template-columns: 1fr 1fr; }
.project-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); display: flex; flex-direction: column; min-height: 27rem; padding: clamp(1.5rem, 3vw, 2.5rem); transition: border-color .2s ease, transform .2s ease; }
.project-card:hover { border-color: var(--text); transform: translateY(-4px); }
.project-card .project-meta { color: var(--text-muted); }
.project-card h3 { font-size: clamp(2.2rem, 4vw, 3.5rem); margin: auto 0 1.25rem; max-width: 11ch; }
.project-card > p:not(.project-meta) { color: var(--text-soft); font-size: .93rem; line-height: 1.65; }
.project-card .tags { color: var(--text-muted); }

.venture { background: var(--surface); padding-block: clamp(6rem, 11vw, 10rem); }
.venture-card { border: 1px solid var(--line); border-radius: var(--radius-lg); display: grid; grid-template-columns: 1fr .9fr; overflow: hidden; }
.venture-copy { padding: clamp(2rem, 5vw, 4.5rem); }
.venture-copy .project-meta { color: var(--orange); }
.venture-copy h3 { font-size: clamp(2.6rem, 4.5vw, 4.25rem); margin: 4rem 0 1.5rem; max-width: 11ch; }
.venture-copy > p:not(.project-meta) { color: var(--text-soft); line-height: 1.7; max-width: 39rem; }
.venture-note { border-left: 3px solid var(--orange); font-size: .84rem; margin-top: 2rem; padding-left: 1rem; }
.pipeline { background: var(--ink); color: var(--white); display: flex; flex-direction: column; justify-content: center; padding: clamp(2rem, 5vw, 4rem); }
.pipeline > i { color: var(--orange); font-style: normal; margin: .6rem 0 .6rem 1.2rem; transform: rotate(90deg); width: min-content; }
.pipeline-step { border: 1px solid var(--line-dark); border-radius: var(--radius-sm); display: grid; gap: .25rem; grid-template-columns: 2.5rem 1fr; padding: 1.15rem; }
.pipeline-step span { color: var(--orange-soft); font-size: .66rem; grid-row: 1 / 3; padding-top: .15rem; }
.pipeline-step strong { font-size: .9rem; }
.pipeline-step small { color: #aaa; font-size: .68rem; }

.studies { background: var(--paper); padding-block: clamp(6rem, 11vw, 10rem); }
.study-grid { display: grid; gap: 1rem; grid-template-columns: 1fr 1fr; }
.study-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.study-visual { background: var(--ink); color: var(--white); height: 19rem; overflow: hidden; position: relative; }
.study-visual > span { bottom: 1.25rem; color: #aaa; font-size: .65rem; left: 1.5rem; letter-spacing: .08em; position: absolute; text-transform: uppercase; }
.modem-study i { border: 2px solid var(--orange); border-radius: 50%; height: calc(3rem + var(--ring, 0rem)); left: 50%; position: absolute; top: 47%; transform: translate(-50%, -50%); width: calc(3rem + var(--ring, 0rem)); }
.modem-study i:nth-child(1) { --ring: 0rem; background: var(--orange); }.modem-study i:nth-child(2) { --ring: 4rem; opacity: .75; }.modem-study i:nth-child(3) { --ring: 9rem; opacity: .48; }.modem-study i:nth-child(4) { --ring: 14rem; opacity: .25; }
.cpu-study { align-items: center; display: flex; justify-content: center; }
.chip { align-items: center; background: var(--orange); border: 1px solid #ff9c79; display: flex; font-size: 3rem; font-weight: 750; height: 8rem; justify-content: center; position: relative; width: 8rem; }
.chip::before, .chip::after { background-image: repeating-linear-gradient(90deg, transparent 0 7px, #777 7px 10px, transparent 10px 18px); content: ""; height: 1rem; left: -2rem; position: absolute; right: -2rem; }
.chip::before { top: -1rem; }.chip::after { bottom: -1rem; }
.study-copy { padding: clamp(1.5rem, 3vw, 2.5rem); }
.study-copy .project-meta { color: var(--text-muted); }
.study-copy h3 { font-size: clamp(2.1rem, 3.5vw, 3.2rem); margin: 3rem 0 1rem; }
.study-copy > p:not(.project-meta) { color: var(--text-soft); font-size: .93rem; line-height: 1.7; }

.approach { background: var(--surface); padding-block: clamp(6rem, 11vw, 10rem); }
.approach-statement { align-items: end; display: grid; gap: clamp(2rem, 6vw, 6rem); grid-template-columns: 1.1fr .9fr; margin-bottom: clamp(4rem, 8vw, 7rem); }
.approach-statement .eyebrow { grid-column: 1 / -1; margin-bottom: -2rem; }
.approach-statement h2 { margin: 0; max-width: 10ch; }
.approach-statement > p:last-child { color: var(--text-soft); font-size: clamp(1.1rem, 1.8vw, 1.3rem); line-height: 1.7; margin: 0 0 .5rem; }
.principles { display: grid; gap: 1rem; grid-template-columns: repeat(3, 1fr); }
.principle { border: 1px solid var(--line); border-radius: var(--radius-lg); display: flex; flex-direction: column; min-height: 20rem; padding: clamp(1.5rem, 3vw, 2.25rem); }
.principle-number { color: var(--orange); font-size: .72rem; font-weight: 750; }
.principle h3 { font-size: clamp(1.8rem, 3vw, 2.65rem); margin: auto 0 .75rem; }
.principle p { color: var(--text-soft); font-size: .91rem; margin: 0; }
.approach-note { border-left: 3px solid var(--orange); color: var(--text-soft); font-size: 1rem; line-height: 1.7; margin: 3rem 0 0; max-width: 50rem; padding-left: 1.25rem; }

.experience { background: var(--ink); color: var(--white); padding-block: clamp(6rem, 11vw, 10rem); }
.experience .section-intro { color: #bbb9b5; }
.experience-list { border-top: 1px solid var(--line-dark); }
.experience-item { display: grid; gap: 2rem; grid-template-columns: 10rem 1fr 1.15fr; padding-block: 2rem; }
.experience-item + .experience-item { border-top: 1px solid var(--line-dark); }
.experience-date, .experience-org { color: #aaa; font-size: .72rem; font-weight: 650; margin: .25rem 0 0; }
.experience-item h3 { font-size: clamp(1.55rem, 2.8vw, 2.4rem); margin: 0; }
.experience-detail { color: #bbb9b5; font-size: .91rem; margin: .25rem 0 0; }
.education { border-top: 1px solid var(--line-dark); display: grid; gap: 3rem; grid-template-columns: .5fr 1.5fr; margin-top: 5rem; padding-top: 3rem; }
.education h3 { color: #aaa; font-size: .78rem; letter-spacing: .08em; margin: .25rem 0 0; text-transform: uppercase; }
.education-grid { display: grid; gap: 1rem; grid-template-columns: 1fr 1fr; }
.education-card { border: 1px solid var(--line-dark); border-radius: var(--radius); padding: 1.5rem; }
.education-card span { color: var(--orange-soft); font-size: .68rem; font-weight: 700; }
.education-card h4 { font-size: 1.25rem; line-height: 1.2; margin: 2.5rem 0 .5rem; }
.education-card p { color: #aaa; margin: 0; }

.contact { background: var(--orange); color: var(--white); padding-block: clamp(6rem, 11vw, 10rem); }
.contact-grid { display: grid; gap: clamp(3rem, 8vw, 8rem); grid-template-columns: .9fr 1.1fr; }
.contact h2 { margin-bottom: 1.5rem; }
.contact-copy > p:last-child { font-size: 1.08rem; line-height: 1.65; max-width: 31rem; }
.contact-card { align-self: start; background: var(--surface); border-radius: var(--radius-lg); color: var(--text); padding: clamp(1.5rem, 4vw, 3rem); }
.contact-card-label { color: var(--orange); font-size: .68rem; font-weight: 720; letter-spacing: .09em; margin: 0 0 1.25rem; text-transform: uppercase; }
.contact-card h3 { font-size: clamp(1.75rem, 3vw, 2.7rem); margin: 0 0 1rem; }
.contact-card > p:not(.contact-card-label, .contact-email-output, .contact-privacy, .contact-email-fallback) { color: var(--text-muted); line-height: 1.65; margin: 0; max-width: 34rem; }
.contact-card .button { margin-top: 2rem; }
.contact-card [hidden] { display: none; }
.contact-email-output { margin: 2rem 0 0; }
.contact-email-link { color: var(--text); display: inline-block; font-size: clamp(1.05rem, 2.4vw, 1.45rem); font-weight: 720; overflow-wrap: anywhere; text-decoration-color: var(--orange); text-decoration-thickness: .12em; text-underline-offset: .25em; }
.contact-email-link:hover { color: var(--orange); }
.contact-privacy, .contact-email-fallback { color: var(--text-muted); font-size: .72rem; line-height: 1.5; margin: 1.25rem 0 0; max-width: 28rem; }

@media (max-width: 950px) {
  .hero-grid, .project-feature, .venture-card, .contact-grid { grid-template-columns: 1fr; }
  .hero-card { min-height: 31rem; }
  .section-top { align-items: start; flex-direction: column; gap: 1.5rem; }
  .translator-console { min-height: 31rem; }
  .pipeline { gap: .55rem; }
  .project-grid-two, .study-grid { grid-template-columns: 1fr; }
  .project-card { min-height: 22rem; }
  .approach-statement { align-items: start; grid-template-columns: 1fr; }
  .approach-statement .eyebrow { grid-column: 1; margin-bottom: 0; }
  .principles { grid-template-columns: 1fr; }
  .principle { min-height: 13rem; }
  .experience-item { grid-template-columns: 8rem 1fr; }
  .experience-detail { grid-column: 2; }
  .education { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .js [data-reveal] { opacity: 1; transform: none; }
  .hero { padding-top: 3rem; }
  .hero h1 { font-size: clamp(3.15rem, 15.2vw, 4.4rem); }
  .hero-card { min-height: 25rem; }
  .system-orbit { height: 15rem; width: 15rem; }
  .system-core { height: 6rem; width: 6rem; }
  .node-one { left: -1rem; }.node-two { right: -1.7rem; }.node-four { left: -1.5rem; }
  .project-feature { min-height: 0; }
  .project-feature h3 { font-size: clamp(2.8rem, 13vw, 4rem); }
  .translator-console { min-height: 28rem; }
  .translation-list { padding-inline: 1rem; }
  .translation-row { gap: .8rem; grid-template-columns: 1fr; }
  .match-result { margin-top: .3rem; }
  .venture-copy h3 { margin-top: 2.5rem; }
  .pipeline { padding: 1.25rem; }
  .study-visual { height: 16rem; }
  .experience-item { gap: .7rem; grid-template-columns: 1fr; }
  .experience-detail { grid-column: 1; }
  .experience-item h3 { margin-top: .4rem; }
  .education-grid { grid-template-columns: 1fr; }
}