:root {
  --paper:#f5f4ef;
  --ink:#20231f;
  --muted:#65675f;
  --line:#d8d9ce;
  --accent:#d74c27;
  --green:#65735a
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:95px
}
body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:Arial,Helvetica,sans-serif;
  -webkit-font-smoothing:antialiased
}
a {
  color:inherit;
  text-decoration:none
}
button {
  font:inherit
}
a,button,summary {
  -webkit-tap-highlight-color:transparent
}
a:focus-visible,button:focus-visible,summary:focus-visible {
  outline:3px solid var(--accent);
  outline-offset:6px
}
::selection {
  background:#edb8a4
}
.section,.header,.footer {
  max-width:1440px;
  margin:0 auto;
  padding-left:6%;
  padding-right:6%
}
.header {
  height:100px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--line)
}
.brand {
  font-weight:800;
  font-size:39px;
  letter-spacing:-4px
}
.brand span {
  color:var(--accent)
}
nav {
  display:flex;
  gap:36px;
  align-items:center;
  font-size:13px
}
nav a:hover,.text-link:hover {
  color:var(--accent)
}
.nav-contact {
  border:1px solid var(--ink);
  padding:13px 18px;
  border-radius:3px
}
.nav-contact span {
  margin-left:24px
}
.skip {
  position:fixed;
  top:-80px;
  left:15px;
  padding:15px;
  background:var(--ink);
  color:white;
  z-index:5
}
.skip:focus {
  top:15px
}
.hero {
  padding-top:68px;
  display:grid;
  grid-template-columns:1.12fr 1fr;
  gap:30px 55px
}
.availability,.section-label,.visual-top,.visual-bottom,.hero-footer,.project-number,.skill-status,.contact-status {
  font-family:'Courier New',monospace;
  font-size:10px;
  letter-spacing:1px;
  font-weight:600
}
.availability {
  display:flex;
  align-items:center;
  gap:9px;
  margin:0 0 30px
}
.availability>span,.contact-status i {
  height:7px;
  width:7px;
  border-radius:50%;
  background:var(--green);
  display:inline-block;
  box-shadow:0 0 0 4px #65735a15
}
.intro {
  font-size:18px;
  margin-bottom:16px
}
h1 {
  font-size:clamp(46px,5.3vw,76px);
  line-height:1.05;
  letter-spacing:-3px;
  margin:0 0 28px;
  font-weight:600
}
h1>span {
  color:var(--accent)
}
.hero-description {
  max-width:410px;
  color:var(--muted);
  font-size:15px;
  line-height:1.8
}
.hero-description strong {
  font-weight:500;
  color:var(--ink)
}
.actions {
  display:flex;
  align-items:center;
  gap:25px;
  margin-top:29px
}
.button {
  display:inline-flex;
  align-items:center;
  gap:29px;
  padding:17px 20px;
  font-size:12px;
  border-radius:3px;
  transition:background .2s,transform .2s
}
.button:hover {
  background:var(--accent);
  transform:translateY(-2px)
}
.dark {
  background:var(--ink);
  color:white
}
.text-link {
  font-size:12px;
  display:inline-block;
  line-height:1.6
}
.hero-visual {
  align-self:center;
  border:1px solid #d1d3c6;
  border-radius:6px;
  background-color:#e9ebdf;
  background-image:radial-gradient(#b5baaa 1px,transparent 1px);
  background-size:17px 17px;
  overflow:hidden;
  position:relative;
  margin-top:15px
}
.visual-top,.visual-bottom {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:20px 23px;
  font-size:9px
}
.cross {
  font-size:21px
}
.network {
  height:350px;
  position:relative;
  max-width:500px;
  margin:auto
}
.connections {
  position:absolute;
  width:100%;
  height:100%;
  color:#929985
}
.network-cloud {
  position:absolute;
  top:10%;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  gap:12px;
  border:1px solid #aeb5a1;
  border-radius:30px;
  background:#f1f2e9;
  padding:10px 22px;
  font-family:monospace;
  font-size:10px;
  letter-spacing:2px
}
.network-cloud>span {
  font-size:22px
}
.server {
  position:absolute;
  top:34%;
  left:50%;
  transform:translateX(-50%) rotate(-5deg);
  width:192px;
  background:#30382e;
  border:1px solid #171e17;
  padding:14px;
  border-radius:5px;
  box-shadow:9px 10px 0 #bec3b0;
  z-index:1
}
.server-title {
  display:flex;
  justify-content:space-between;
  font:8px monospace;
  letter-spacing:1px;
  color:#dfe5d3;
  margin-bottom:12px
}
.led {
  width:5px;
  height:5px;
  border-radius:50%;
  background:#add689
}
.rack {
  height:26px;
  border:1px solid #606955;
  border-radius:2px;
  margin-top:6px;
  display:flex;
  align-items:center;
  gap:5px;
  padding:7px;
  background:#3c4537
}
.rack i {
  height:3px;
  width:3px;
  background:#a8c285;
  border-radius:50%
}
.rack b {
  font:8px monospace;
  color:#a1aa97;
  margin-left:auto
}
.node {
  position:absolute;
  bottom:0;
  width:80px;
  text-align:center
}
.node>span {
  display:flex;
  align-items:center;
  justify-content:center;
  width:50px;
  height:45px;
  border:1px solid #aab29c;
  background:#f3f4ed;
  margin:0 auto 11px;
  border-radius:4px;
  font-size:29px
}
.node small {
  font:8px monospace;
  letter-spacing:1px
}
.node-one {
  left:10%
}
.node-two {
  left:calc(50% - 40px)
}
.node-three {
  right:10%
}
.terminal {
  font:10px monospace;
  border-top:1px solid #c9cebe;
  border-bottom:1px solid #c9cebe;
  background:#e0e4d4;
  margin:29px 23px 0;
  padding:13px 10px;
  white-space:nowrap
}
.prompt {
  color:#59624e
}
.cursor {
  color:var(--accent);
  animation:blink 1.2s steps(2,start) infinite
}
.visual-bottom {
  font-size:7px;
  padding-top:17px;
  padding-bottom:17px
}
.hero-footer {
  grid-column:1/-1;
  display:flex;
  justify-content:space-between;
  border-top:1px solid var(--line);
  padding:23px 0;
  font-size:8px;
  margin-top:35px;
  color:var(--muted)
}
.hero-footer a span {
  margin-left:15px
}
.about,.skills,.projects,.motivation {
  padding-top:78px;
  padding-bottom:80px
}
.section-label {
  display:flex;
  justify-content:space-between;
  font-size:9px;
  margin-bottom:45px;
  color:var(--muted)
}
h2 {
  font-size:clamp(32px,3.4vw,47px);
  font-weight:500;
  line-height:1.12;
  letter-spacing:-1.9px;
  margin:0
}
h2>span {
  color:#828578
}
.about-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px
}
.about-copy p {
  font-size:14px;
  line-height:1.85;
  color:var(--muted);
  margin:0 0 18px
}
.about-copy p:first-child {
  font-size:18px;
  color:var(--ink);
  line-height:1.65
}
.about-copy .text-link {
  margin-top:8px;
  border-bottom:1px solid var(--ink);
  padding-bottom:5px
}
.values {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:40px;
  margin-top:60px
}
.values>div {
  border-top:1px solid var(--line);
  padding-top:23px
}
.values>div>span {
  font:10px monospace;
  color:var(--accent)
}
h3 {
  font-size:19px;
  font-weight:500;
  letter-spacing:-.4px;
  margin:15px 0 12px
}
.values p {
  font-size:13px;
  line-height:1.7;
  color:var(--muted);
  max-width:270px
}
.skills {
  background:#eceee5
}
.section-heading {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:40px;
  margin-bottom:38px
}
.section-heading>p {
  font-size:12px;
  line-height:1.8;
  color:var(--muted);
  margin:0 0 3px
}
.skill-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px
}
.skill-card {
  position:relative;
  border:1px solid #d1d5c7;
  border-radius:3px;
  padding:27px 24px;
  background:#f5f5ef
}
.skill-icon {
  display:block;
  font-size:31px;
  color:var(--green);
  margin-bottom:31px
}
.skill-status {
  font-size:8px;
  color:var(--muted)
}
.skill-card h3 {
  margin-top:13px
}
.skill-card p {
  color:var(--muted);
  font-size:12px;
  line-height:1.8;
  min-height:66px
}
.tags {
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:23px
}
.tags span {
  font-size:9px;
  border:1px solid var(--line);
  border-radius:3px;
  padding:6px 8px;
  color:#5e6456
}
.project {
  border:1px solid var(--line);
  border-radius:4px;
  overflow:hidden;
  display:grid;
  grid-template-columns:1fr 1fr
}
.project-art {
  min-height:370px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  background:#ddd9ce;
  position:relative;
  background-image:linear-gradient(35deg,transparent 49.7%,#c8c4b780 50%,transparent 50.3%)
}
.home-window {
  width:68%;
  border:1px solid #aea998;
  box-shadow:12px 12px 0 #c9c4b7;
  border-radius:5px;
  background:#f2f0e8;
  transform:rotate(-4deg);
  padding:14px
}
.window-top {
  font:8px monospace;
  color:#78786a;
  display:flex;
  justify-content:space-between;
  padding-bottom:10px;
  border-bottom:1px solid #d5d1c4
}
.window-top>span:first-child {
  font-size:6px;
  letter-spacing:3px
}
.house {
  text-align:center;
  font-size:89px;
  line-height:1.4;
  color:#768166
}
.home-devices {
  display:flex;
  gap:8px
}
.home-devices>span {
  background:#e5e8d9;
  width:33%;
  padding:10px 2px;
  text-align:center;
  color:#68785e;
  font-size:22px;
  border-radius:3px
}
.home-devices small {
  display:block;
  font:6px monospace;
  letter-spacing:1px;
  margin-top:8px
}
.art-caption {
  font:7px monospace;
  letter-spacing:1px;
  margin-top:37px;
  color:#747364
}
.project-copy {
  padding:35px
}
.project-number {
  font-size:9px;
  color:var(--muted)
}
.project-number>span {
  margin:0 8px
}
.project-copy h3 {
  font-size:28px;
  line-height:1.15;
  margin-top:25px;
  letter-spacing:-1px
}
.project-copy p,.small-project p {
  font-size:12px;
  line-height:1.85;
  color:var(--muted)
}
.project-copy .project-lesson {
  color:var(--ink)
}
details {
  border-top:1px solid var(--line);
  margin-top:26px;
  font-size:12px
}
summary {
  padding:16px 0;
  cursor:pointer;
  display:flex;
  justify-content:space-between;
  list-style:none
}
summary::-webkit-details-marker {
  display:none
}
details[open] summary>span {
  transform:rotate(45deg)
}
details>div {
  line-height:1.8;
  color:var(--muted);
  padding:0 0 15px
}
.project-pair {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px;
  margin-top:22px
}
.small-project {
  border:1px solid var(--line);
  border-radius:4px;
  padding:29px 32px
}
.small-project-top {
  display:flex;
  justify-content:space-between;
  align-items:center
}
.small-project h3 {
  font-size:24px;
  margin-top:27px
}
.small-project .text-link {
  margin-top:29px
}
.next-project {
  background:#eeeee5
}
.motivation {
  border-top:1px solid var(--line)
}
.motivation-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px
}
.motivation-grid>div>p {
  font-size:13px;
  line-height:1.9;
  color:var(--muted);
  max-width:370px;
  margin:24px 0
}
.contributions>div {
  display:flex;
  gap:22px;
  padding:5px 0 22px;
  border-bottom:1px solid var(--line);
  margin-bottom:20px
}
.contributions>div>span {
  font-size:23px;
  color:var(--accent);
  margin-top:11px
}
.contributions h3 {
  margin-top:10px;
  font-size:18px
}
.contributions p {
  font-size:12px;
  line-height:1.8;
  color:var(--muted);
  margin-bottom:0
}
.contact {
  padding-top:40px;
  padding-bottom:49px;
  background:#252c23;
  color:#f1f2e9
}
.contact .section-label {
  color:#b4bcac
}
.contact-status i {
  background:#bdce99;
  margin-right:7px
}
.contact-kicker {
  margin:55px 0 18px;
  font-size:14px;
  color:#bbc1b4
}
.contact h2 {
  font-size:clamp(70px,9.5vw,135px);
  letter-spacing:-6px;
  line-height:.95;
  position:relative;
  max-width:900px
}
.contact h2 em {
  font-style:normal;
  color:#bdcb9e
}

.contact-bottom {
  position:relative;
  border-top:1px solid #505747;
  padding-top:30px;
  margin-top:45px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px
}
.email {
  font-size:clamp(16px,2.3vw,29px);
  letter-spacing:-.5px
}
.email span {
  margin-left:22px;
  color:#bdcb9e
}
#copy-email {
  border:1px solid #758069;
  color:#e3e8d8;
  background:none;
  border-radius:3px;
  padding:12px 16px;
  cursor:pointer;
  font-size:11px
}
#copy-email:hover {
  background:#3b4434
}
#copy-email span {
  margin-left:20px
}
.copy-status {
  position:absolute;
  bottom:-25px;
  right:0;
  font-size:11px;
  color:#bdcb9e
}
.footer {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding-top:27px;
  padding-bottom:27px
}
.footer .brand {
  font-size:30px
}
.footer>span {
  font-size:10px;
  color:var(--muted)
}
.footer>a:last-child {
  font:8px monospace;
  letter-spacing:1px
}
@keyframes blink {
  to {
    visibility:hidden
  }

}
@media(min-width:1440px) {
  .section,.header,.footer {
    padding-left:86px;
    padding-right:86px
  }

}
@media(max-width:1050px) {
  .hero {
    gap:25px
  }
  .actions {
    gap:16px;
    flex-wrap:wrap
  }
  h1 {
    letter-spacing:-3px
  }
  .about-grid,.motivation-grid {
    gap:40px
  }
  .network {
    height:305px
  }
  .terminal {
    font-size:8px
  }
  .skill-card {
    padding:20px 16px
  }
  .project-copy {
    padding:27px
  }

  .skill-card p {
    min-height:85px
  }

}
@media(max-width:720px) {
  .header {
    height:80px
  }
  nav {
    gap:18px;
    font-size:11px
  }
  .nav-contact {
    padding:10px
  }
  .nav-contact span {
    margin-left:8px
  }
  .hero {
    grid-template-columns:1fr;
    padding-top:37px;
    gap:30px
  }
  h1 {
    font-size:60px
  }
  .hero-description {
    max-width:470px
  }
  .hero-visual {
    width:100%;
    max-width:500px;
    margin:5px auto
  }
  .network {
    height:330px
  }
  .hero-footer {
    margin-top:3px;
    gap:15px;
    font-size:7px
  }
  .hero-footer>span:last-child {
    display:none
  }
  .about,.skills,.projects,.motivation {
    padding-top:50px;
    padding-bottom:50px
  }
  .section-label {
    margin-bottom:30px;
    font-size:8px;
    gap:20px
  }
  .section-label>span:last-child:not(.contact-status) {
    display:none
  }
  .about-grid,.motivation-grid {
    grid-template-columns:1fr;
    gap:28px
  }
  .values {
    gap:18px;
    margin-top:32px
  }
  .values h3 {
    font-size:16px
  }
  .values p {
    font-size:11px
  }
  .section-heading {
    display:block
  }
  .section-heading>p {
    margin-top:20px
  }
  .skill-grid {
    grid-template-columns:1fr
  }
  .skill-card {
    padding:24px
  }
  .skill-icon {
    margin-bottom:20px
  }
  .skill-card p {
    min-height:0
  }
  .project {
    grid-template-columns:1fr
  }
  .project-art {
    min-height:310px
  }
  .home-window {
    max-width:290px
  }
  .project-copy {
    padding:26px
  }
  .project-pair {
    grid-template-columns:1fr
  }
  .small-project {
    padding:26px
  }
  .contact {
    padding-top:30px;
    padding-bottom:42px
  }
  .contact-kicker {
    margin-top:40px;
    font-size:12px
  }
  .contact h2 {
    font-size:83px;
    letter-spacing:-4px
  }

  .contact-bottom {
    flex-wrap:wrap;
    align-items:flex-start
  }
  .email {
    font-size:20px
  }
  .email span {
    margin-left:5px
  }
  .copy-status {
    left:0;
    right:auto
  }
  .footer {
    flex-wrap:wrap;
    gap:18px
  }
  .footer>span:nth-child(3) {
    display:none
  }
  .footer>a:last-child {
    margin-left:auto
  }
  .terminal {
    font-size:10px
  }

}
@media(max-width:380px) {
  nav {
    gap:11px
  }
  nav>a:first-child {
    display:none
  }
  h1 {
    font-size:51px
  }
  .values {
    grid-template-columns:1fr
  }
  .values p {
    max-width:none;
    font-size:12px
  }
  .contact h2 {
    font-size:72px
  }

  .terminal {
    font-size:8px
  }
  .visual-bottom {
    font-size:6px
  }

}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  *,*::before,*::after {
    animation:none!important;
    transition:none!important
  }

}
@media print {
  .header,.hero-visual,.hero-footer,.actions,.project-art,.skip,button,.footer>a:last-child {
    display:none
  }
  .section {
    padding:20px 0!important;
    break-inside:avoid
  }
  body {
    background:white;
    color:black;
    font-size:11px
  }
  h1 {
    font-size:44px
  }
  h2 {
    font-size:25px
  }
  .hero,.about-grid,.motivation-grid {
    display:block
  }
  .contact {
    background:white;
    color:black
  }
  .contact h2 {
    font-size:40px
  }

  .contact h2 em,.contact .section-label,.contact-kicker {
    color:black
  }
  .skill-grid {
    display:block
  }
  .skill-card {
    margin-bottom:10px
  }
  .contact-bottom {
    margin-top:15px
  }
  .email {
    font-size:16px
  }
  details>div {
    display:block
  }
  .contact-kicker {
    margin-top:10px
  }

}

/* Keep the intrinsic width of long titles inside narrow grid columns. */
.hero-copy,.hero-visual,.about-copy,.skill-card,.project-copy,.small-project {
  min-width:0
}

@media(max-width:720px) {
  h1 {
    font-size:clamp(38px,12.8vw,60px);
    letter-spacing:-3px
  }
  .header .brand {
    flex-shrink:0
  }
  nav {
    gap:14px;
    white-space:nowrap
  }
  .nav-contact span {
    margin-left:4px
  }
  .hero {
    grid-template-columns:minmax(0,1fr)
  }

}

@media(max-width:420px) {
  nav>a:first-child {
    display:none
  }
  .contact .section-label {
    font-size:7px;
    letter-spacing:.5px
  }
  .contact h2 {
    font-size:74px
  }

}


/* CV: professional experience, education and concrete projects. */
.skill-notes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; margin-top: 30px; }
.skill-notes h3 { font-size: 16px; }
.skill-notes p, .education-grid p { font-size: 12px; line-height: 1.8; color: var(--muted); }
.website-list { list-style: none; padding: 0; margin: 22px 0 0; }
.website-list li { border-top: 1px solid var(--line); }
.website-list a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 0; font-size: 13px; overflow-wrap: anywhere; }
.website-list a:hover, .contact-links a:hover { color: var(--accent); }
.experience { padding-top: 70px; padding-bottom: 70px; background: #eceee5; }
.timeline article { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 30px; border-top: 1px solid #cdd2c3; padding: 28px 0; }
.timeline-date { font: 10px/1.7 'Courier New', monospace; color: var(--muted); margin: 0; }
.timeline article h3 { font-size: 23px; }
.timeline article > div > p { font-size: 13px; line-height: 1.8; color: var(--muted); max-width: 710px; }
.education-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; margin-top: 25px; }
.education-grid article { padding: 25px; border: 1px solid #cdd2c3; background: var(--paper); border-radius: 3px; }
.target-roles { padding-left: 17px; margin: 0 0 28px; font-size: 12px; line-height: 1.9; color: var(--muted); }
.contact-links { display: flex; flex-wrap: wrap; gap: 18px 35px; margin-top: 35px; font-size: 14px; color: #d4dec5; }
.contact-bottom { margin-top: 28px; }
@media (max-width: 720px) {
  .skill-notes, .education-grid { grid-template-columns: minmax(0, 1fr); gap: 15px; }
  .timeline article { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .experience { padding-top: 50px; padding-bottom: 50px; }
  .hero-footer { flex-wrap: wrap; line-height: 1.7; }
}
@media print {
  .experience { background: white; }
  .timeline article { break-inside: avoid; }
  .contact-links { color: black; }
}

/* The infrastructure diagram is also the subject selector. */
.network-help { margin: 0 20px; text-align: center; font-size: 12px; line-height: 1.5; color: #46513d; }
.network-help span { margin-left: 6px; color: var(--accent); }
.topic-link { cursor: pointer; border-radius: 5px; }
.network-cloud.topic-link { border-radius: 30px; }
.topic-link .question-chevron { pointer-events: none; }
.topic-link > span { transition: background .15s, border-color .15s, box-shadow .15s; }
.node.topic-link small { font-weight: 700; font-size: 9px; text-decoration: underline; text-underline-offset: 3px; }
.node.topic-link:hover > span, .node.topic-link:focus-visible > span { background: #dce5cd; border-color: #526a3f; box-shadow: 0 3px 0 #b5c3a4; }
.network-cloud.topic-link:hover { background: #dce5cd; }
.node.topic-link[aria-current="true"] > span, .network-cloud.topic-link[aria-current="true"] { background: #303d29; border-color: #303d29; color: #f5f4ef; box-shadow: 0 0 0 3px #f5f4ef, 0 0 0 5px #708460; }
.node.topic-link[aria-current="true"] small { color: #263d1b; }
.topic-panel { scroll-margin-top: 20px; }
.topic-panel[hidden] { display: none; }
.topic-panel + .topic-panel { margin-top: 20px; }
.topic-panel h3 { font-size: 17px; margin: 0 0 5px; color: #35492a; }
.topic-description { font-size: 12px; line-height: 1.6; color: #5c6455; margin: 0 0 14px; }
.explorer-contact { display: inline-block; margin-top: 18px; font-size: 12px; text-decoration: underline; text-underline-offset: 4px; }
.explorer-contact:hover { color: var(--accent); }
/* Longer, familiar labels stay readable on small screens. */
.node.topic-link { width: 94px; }
.node-two.topic-link { left: calc(50% - 47px); }
.node-one.topic-link { left: 5%; }
.node-three.topic-link { right: 5%; }
.node.topic-link small { font-size: 8px; letter-spacing: .4px; }
.connections { pointer-events: none; }
.topic-panel:not([hidden]) { margin-top: 18px; }
.explorer-eyebrow > span { font-size: 15px; font-weight: bold; margin-right: 6px; color: #35492a; }
@media (max-width: 420px) {
  .node.topic-link { width: 82px; }
  .node-two.topic-link { left: calc(50% - 41px); }
  .node-one.topic-link { left: 2%; }
  .node-three.topic-link { right: 2%; }
  .node.topic-link small { font-size: 7px; }
}

/* A terminal aesthetic, with plain-language choices instead of commands. */
.profile-console { margin: 25px 18px 0; border: 1px solid #4c5943; border-radius: 7px; overflow: hidden; background: #20291e; color: #e7eddc; font: 12px/1.7 'Courier New', monospace; box-shadow: 0 8px 20px #26351b12; }
.console-bar { display: flex; align-items: center; gap: 12px; padding: 12px 15px; background: #303c29; border-bottom: 1px solid #4c5943; }
.console-dots { color: #bdcb9e; font-size: 8px; white-space: nowrap; letter-spacing: 2px; }
.profile-console h2 { margin: 0; font: 11px/1.4 'Courier New', monospace; letter-spacing: 0; color: #e7eddc; }
.console-session { margin-left: auto; font-size: 7px; color: #bdcb9e; letter-spacing: .6px; }
.console-body { padding: 18px; }
.console-welcome { margin: 0 0 7px; color: #d4e5b6; }
.console-welcome > span { color: #ef9a75; }
.console-help { color: #b1bea5; font: 12px/1.6 Arial, Helvetica, sans-serif; margin: 0 0 19px; }
.profile-console .topic-panel { margin: 0; }
.profile-console .console-topic { color: #d4e5b6; margin: 0 0 9px; font: 11px/1.6 'Courier New', monospace; }
.console-topic > span { color: #ef9a75; }
.console-questions { display: grid; gap: 3px; margin-bottom: 18px; }
.console-question { display: flex; align-items: baseline; gap: 8px; min-height: 40px; border: 1px solid transparent; border-radius: 3px; padding: 8px; color: #d9e1ce; font: 12px/1.55 Arial, Helvetica, sans-serif; cursor: pointer; }
.console-question > span { color: #ef9a75; font: bold 16px/1 monospace; }
.console-question:hover { background: #34422b; border-color: #68795a; }
.console-question[aria-current="true"] { background: #3b4b30; border-color: #879b6d; color: #f5f8ef; }
.profile-console a:focus-visible { outline-color: #efb693; }
.console-screen { border-top: 1px dashed #607052; padding-top: 15px; }
.console-screen[hidden], .console-source[hidden] { display: none; }
.console-prompt { margin: 0 0 10px; font-size: 10px; line-height: 1.6; overflow-wrap: anywhere; }
.console-prompt > span:first-child { color: #b6d28e; }
#console-selection { color: #efb693; }
.console-response { min-height: 180px; overflow-wrap: anywhere; line-height: 1.85; }
.console-cursor { font-weight: bold; color: #cbeba0; animation: console-blink 1.1s step-end infinite; }
@keyframes console-blink { 50% { opacity: 0; } }
.console-action, .console-source a { display: inline-block; margin-top: 13px; padding: 7px 0; color: #c5dda3; font-size: 11px; text-decoration: underline; text-underline-offset: 4px; }
.console-action:hover, .console-source a:hover { color: #efb693; }
.console-announcement { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.console-source { border-top: 1px dashed #607052; padding: 12px 0; }
.console-source h4 { color: #efb693; margin: 0; }
@media (max-width: 420px) {
  .profile-console { margin-left: 10px; margin-right: 10px; font-size: 11px; }
  .console-body { padding: 14px; }
  .console-bar { gap: 8px; padding: 11px; }
  .console-session { display: none; }
  .console-question { min-height: 44px; }
  .console-response { min-height: 210px; }
}
@media (prefers-reduced-motion: reduce) { .console-cursor { animation: none; } }

/* A single command line drives the profile menu. */
.console-response { white-space: pre-wrap; }
.console-form { margin-top: 18px; border-top: 1px solid #4c5943; padding-top: 12px; }
.console-input-label { display: block; font-size: 10px; color: #c5dda3; margin-bottom: 4px; overflow-wrap: anywhere; }
.console-input-row { display: flex; align-items: center; gap: 7px; }
.console-input-row input { flex: 1; min-width: 0; width: 100%; border: 0; border-bottom: 1px solid #70865b; background: #293523; color: #f5f8ef; font: inherit; padding: 10px; border-radius: 2px; caret-color: #cbeba0; }
.console-input-row input::placeholder { color: #b1bea5; }
.console-input-row input:focus-visible { outline: 2px solid #efb693; outline-offset: 2px; }
.console-input-row button { flex-shrink: 0; width: 44px; height: 44px; border: 1px solid #879b6d; border-radius: 3px; color: #e7eddc; background: #3b4b30; cursor: pointer; font-size: 23px; }
.console-input-row button:hover { background: #526640; }
.console-shortcuts { margin: 10px 0 0; font-size: 10px; line-height: 1.9; color: #b1bea5; }
.console-shortcuts code { color: #efb693; }
.console-action[hidden] { display: none; }

/* Standalone terminal: every choice and navigation action is clickable. */
.hero-terminal { min-width: 0; align-self: center; }
.hero-terminal .profile-console { margin: 0; width: 100%; box-shadow: 0 14px 36px #26351b18; }
.hero-terminal .console-body { padding: 24px; }
.console-response { min-height: 76px; }
.showing-answer .console-response { min-height: 230px; }
.console-choices { display: grid; gap: 7px; margin: 10px 0 20px; }
.console-choices[hidden] { display: none; }
.console-choice { width: 100%; text-align: left; display: flex; gap: 12px; align-items: baseline; min-height: 46px; padding: 12px; border: 1px solid #61744e; border-radius: 3px; background: #2a3623; color: #e7eddc; font: 12px/1.6 'Courier New', monospace; cursor: pointer; }
.console-choice > span { color: #efb693; font-weight: bold; }
.console-choice:hover { background: #3b4b30; border-color: #b3cd91; }
.console-navigation { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 14px; border-top: 1px dashed #607052; }
.console-navigation button { cursor: pointer; border: 1px solid #70835b; border-radius: 3px; padding: 9px 12px; min-height: 44px; background: transparent; color: #e7eddc; font: 11px/1.5 'Courier New', monospace; }
.console-navigation button span { color: #efb693; margin-right: 7px; }
.console-navigation button:hover:not(:disabled) { background: #3b4b30; }
.console-navigation button:disabled { opacity: .45; cursor: default; }
.profile-console button:focus-visible { outline: 2px solid #efb693; outline-offset: 3px; }
@media (max-width: 720px) { .hero-terminal { width: 100%; } }
@media (max-width: 420px) { .hero-terminal .console-body { padding: 16px; } .showing-answer .console-response { min-height: 260px; } }

/* Live links are rendered after the introductory terminal answer. */
.console-sites, .console-project-data { list-style: none; margin: 12px 0 18px; padding: 0; white-space: normal; }
.console-sites[hidden] { display: none; }
.console-sites li, .console-project-data li { border-top: 1px dashed #526347; padding: 12px 0; }
.console-sites a, .console-project-data a { display: inline-block; max-width: 100%; padding: 5px 0; color: #c5dda3; text-decoration: underline; text-underline-offset: 4px; overflow-wrap: anywhere; }
.console-sites a:hover { color: #efb693; }
.console-sites p, .console-project-data p { margin: 4px 0 0; font: 12px/1.75 'Courier New', monospace; color: #d2dcc7; }
.showing-answer:has(.console-sites:not([hidden])) .console-response { min-height: 0; }

/* Site names are choices; each description gets its own animated response. */
.showing-site-menu .console-response { min-height: 82px; }
.console-choice { overflow-wrap: anywhere; }

.console-documents { display: grid; gap: 7px; margin: 16px 0; white-space: normal; }
.console-documents[hidden] { display: none; }
.console-documents a, .console-contact-action { display: flex; align-items: baseline; gap: 12px; min-height: 46px; padding: 12px; border: 1px solid #61744e; border-radius: 3px; background: #2a3623; color: #e7eddc; font: 12px/1.6 'Courier New', monospace; text-decoration: none; }
.console-documents a:hover, .console-contact-action:hover { background: #3b4b30; border-color: #b3cd91; }
.console-document-data a { display: block; }

/* Give the interactive terminal more room in the introduction. */
@media screen and (min-width: 1001px) {
  .hero {
    max-width: 1600px;
    grid-template-columns: minmax(0, .66fr) minmax(0, 1.54fr);
    column-gap: clamp(28px, 3vw, 48px);
  }
  .hero-terminal .console-body { padding: 28px 30px; }
  .hero-terminal .console-response { font-size: 13px; line-height: 1.85; }
}
@media screen and (min-width: 721px) and (max-width: 1000px) {
  .hero { grid-template-columns: minmax(0, 1fr); }
  .hero-copy { max-width: 620px; }
  .hero-description { max-width: 560px; }
  .hero-terminal { width: 100%; }
}

/* Keep the title, prompt and navigation outside the scrolling viewport. */
@media screen {
  .hero-terminal .profile-console.console-fixed { height: 640px; display: flex; flex-direction: column; }
  .console-fixed .console-bar { flex: 0 0 auto; }
  .hero-terminal .console-fixed .console-body { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 22px 24px; }
  .console-fixed .console-welcome, .console-fixed .console-help { flex: 0 0 auto; }
  .console-fixed .console-screen { flex: 1; min-height: 0; display: flex; flex-direction: column; }
  .console-fixed .console-screen[hidden] { display: none; }
  .console-fixed .console-prompt { flex: 0 0 auto; margin-bottom: 12px; white-space: nowrap; overflow-x: auto; scrollbar-width: thin; }
  .console-fixed #console-selection { display: inline; }
  .console-fixed .console-scroll { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior-y: contain; overflow-anchor: none; scrollbar-gutter: stable; scrollbar-width: thin; scrollbar-color: #879b6d #20291e; padding: 0 10px 12px 0; }
  .console-scroll:focus-visible { outline: 2px solid #efb693; outline-offset: -2px; }
  .console-fixed .console-response { min-height: 0; }
  .console-fixed .console-choices { margin-bottom: 0; }
  .console-fixed .console-navigation { flex: 0 0 auto; margin-top: 12px; }
}
@media screen and (max-width: 720px) {
  .hero-terminal .profile-console.console-fixed { height: clamp(360px, 76svh, 560px); }
  .hero-terminal .console-fixed .console-body { padding: 16px; }
  .console-fixed .console-help { margin-bottom: 12px; }
}

/* Company choices stay compact; the CV closes the menu on its own row. */
.console-experience-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.console-experience-choices .console-choice { min-width: 0; }
.console-experience-choices .console-documents { grid-column: 1 / -1; margin: 0; }

/* A single, gentle startup signal draws attention to the interactive terminal. */
@media (prefers-reduced-motion: no-preference) {
  .profile-console.console-booting { animation: console-startup 1.1s ease-out both; }
  .console-booting #console-output { color: #c5dda3; }
  @keyframes console-startup {
    0% { box-shadow: 0 0 0 1px #b3cd91, 0 0 0 0 rgb(179 205 145 / .35); }
    45% { box-shadow: 0 0 0 2px #b3cd91, 0 0 32px 8px rgb(179 205 145 / .22); }
    100% { box-shadow: 0 0 0 1px transparent, 0 0 42px 12px transparent; }
  }
}

/* Before login, only the terminal window and connection log are visible. */
.console-booting .console-welcome,
.console-booting .console-help,
.console-booting .console-prompt,
.console-booting .console-navigation,
.console-booting .console-session { display: none; }

.console-bar #console-title { min-width: 0; overflow-wrap: anywhere; }
.console-bar .console-dots, .console-bar .console-session { flex-shrink: 0; }

/* Read the home menu row by row, with four subjects in each column. */
.console-home-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.console-home-choices .console-choice { min-width: 0; }
.console-home-choices .console-choice:nth-child(9) { grid-column: 1 / -1; }

.console-invitation { margin-top: 20px; padding-top: 16px; border-top: 1px solid #61744e; color: #d4e5b6; }
.console-invitation[hidden], .console-invitation .console-choice[hidden] { display: none; }
.console-invitation p { margin: 0 0 12px; }
.console-invitation-actions { display: grid; gap: 7px; }

/* A self-contained overview alongside the interactive interview. */
.hero-alternance { margin: 22px 0; padding: 16px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: 12px; line-height: 1.7; }
.hero-alternance p { margin: 0 0 12px; }
.hero-alternance p:last-child { margin-bottom: 0; }
.alternance-facts { display: flex; flex-direction: column; gap: 2px; }
.alternance-facts strong { font-size: 18px; }
.target-summary { color: var(--muted); }
.project-summary-grid .small-project { display: flex; flex-direction: column; }
.project-summary-grid .small-project p { font-size: 13px; line-height: 1.8; color: var(--muted); }
.project-summary-grid .text-link { margin-top: auto; padding-top: 18px; overflow-wrap: anywhere; }
.timeline-summary article { padding-top: 22px; padding-bottom: 22px; }
@media (min-width: 721px) {
  .skill-grid-summary, .summary-notes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Invitation à échanger dans le bloc contact. */
.contact-intro { display: grid; grid-template-columns: 1.2fr 1fr; align-items: center; gap: clamp(40px, 6vw, 100px); }
.contact-intro > h2 { margin: 0; }
.contact-invitation { border-left: 1px solid #505747; padding: 12px 0 12px clamp(28px, 4vw, 60px); }
.contact-invitation h3 { margin: 0 0 16px; font-size: clamp(22px, 2vw, 28px); font-weight: 500; letter-spacing: -.5px; }
.contact-invitation p { max-width: 370px; margin: 0; font-size: 16px; line-height: 1.8; color: #bbc1b4; }
.contact-interview { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; margin-top: 26px; padding: 14px 22px; border-radius: 3px; background: #bdcb9e; color: #252c23; font-size: 14px; font-weight: 600; text-decoration: none; }
.contact-interview:hover { background: #d0dcb7; }
.contact-interview:focus-visible { outline: 2px solid #f1f2e9; outline-offset: 5px; }
@media (max-width: 760px) {
  .contact-intro { grid-template-columns: 1fr; gap: 32px; }
  .contact-invitation { padding: 24px 0 0; border-left: 0; border-top: 1px solid #505747; }
  .contact-invitation p { max-width: 460px; }
}
@media print {
  .contact-invitation { border-color: #999; }
  .contact-invitation p { color: black; }
  .contact-interview { border: 1px solid #999; background: white; color: black; }
}

.console-project-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.console-project-links a { min-width: 0; overflow-wrap: anywhere; }
.console-project-links a:first-child { grid-column: 1 / -1; }
.console-project-links-data a { display: block; }

.console-service-choices { grid-template-columns: minmax(0, 1fr); }
.console-service-choices .console-choice { min-width: 0; }
.console-service-choices .console-documents { grid-column: 1 / -1; margin: 0; }