/* DORFA.FR — palette, typographie et espacements se règlent ici. */
:root {
  --paper:#f3f1eb;
  --ink:#242720;
  --muted:#62665b;
  --line:#d1d2c7;
  --accent:#aa391c;
  --dark:#252a24;
  --dark-muted:#b9bfb3;
  --mono:Consolas,"Liberation Mono",monospace;
  --sans:Arial,Helvetica,sans-serif;
  --width:1248px
}

* {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:100px
}

body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased
}

::selection {
  background:var(--accent);
  color:white
}

a {
  color:inherit;
  text-decoration:none;
  text-underline-offset:5px
}

button {
  font:inherit;
  color:inherit
}

a,button,summary {
  -webkit-tap-highlight-color:transparent
}

a:focus-visible,button:focus-visible,summary:focus-visible {
  outline:2px solid var(--accent);
  outline-offset:6px
}

a:hover {
  color:var(--accent)
}

h1,h2,h3,p,figure,ol,ul,dl,dd {
  margin:0
}

h1,h2,h3 {
  line-height:1.12
}

ul,ol {
  padding:0
}

.container {
  width:calc(100% - 112px);
  max-width:var(--width);
  margin-inline:auto
}

.mono {
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.06em;
  text-transform:uppercase;
  font-weight:400
}

.skip-link {
  position:fixed;
  left:16px;
  top:-100px;
  z-index:100;
  background:var(--ink);
  color:white;
  padding:12px 20px
}

.skip-link:focus {
  top:12px;
  color:white
}

.site-header {
  position:sticky;
  top:0;
  z-index:20;
  background:var(--paper);
  border-bottom:1px solid var(--line)
}

.header-inner {
  min-height:80px;
  display:flex;
  align-items:center;
  gap:32px
}

.wordmark {
  font-size:25px;
  line-height:1;
  font-weight:800;
  letter-spacing:-1.6px;
  white-space:nowrap
}

.wordmark span {
  color:var(--accent);
  margin:0 3px
}

.header-label {
  color:var(--muted);
  margin-right:auto
}

.main-nav {
  display:flex;
  align-items:center;
  gap:28px;
  font-size:12px
}

.main-nav a {
  padding:14px 0;
  position:relative
}

.main-nav a[aria-current="location"]::after {
  content:"";
  position:absolute;
  height:2px;
  background:var(--accent);
  bottom:5px;
  left:0;
  right:0
}

.main-nav a:last-child span {
  color:var(--accent);
  margin-left:12px
}

.menu-toggle {
  display:none;
  border:1px solid var(--ink);
  background:none;
  padding:7px 12px
}

.menu-toggle[hidden] {
  display:none
}

.hero {
  padding-top:38px
}

.hero-meta {
  display:flex;
  justify-content:space-between;
  color:var(--muted)
}

.hero-meta>span:first-child {
  display:flex;
  gap:10px;
  align-items:center
}

.square {
  display:inline-block;
  width:7px;
  height:7px;
  background:var(--accent);
  flex:none
}

.hero-grid {
  display:grid;
  grid-template-columns:minmax(0,1fr) 236px;
  gap:55px;
  padding-top:59px;
  padding-bottom:60px;
  align-items:center
}

h1 {
  font-size:clamp(66px,8vw,112px);
  font-weight:600;
  letter-spacing:-.065em;
  line-height:.98;
  margin-left:-5px
}

.title-period {
  color:var(--accent)
}

.hero-role {
  font-size:27px;
  line-height:1.2;
  letter-spacing:-.035em;
  margin-top:30px
}

.hero-keywords {
  margin-top:26px;
  font-size:11px;
  letter-spacing:.04em;
  line-height:2
}

.hero-keywords span {
  color:var(--accent);
  margin:0 10px
}

.hero-actions {
  display:flex;
  gap:27px;
  align-items:center;
  flex-wrap:wrap;
  margin-top:35px;
  font-size:12px
}

.button {
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:36px;
  padding:13px 20px;
  min-height:48px
}

.button-solid {
  background:var(--ink);
  color:var(--paper);
  border:1px solid var(--ink)
}

.button-solid:hover {
  background:var(--accent);
  border-color:var(--accent);
  color:white
}

.text-link {
  display:inline-block;
  padding:9px 0;
  border-bottom:1px solid var(--line)
}

.text-link span {
  margin-left:10px;
  color:var(--accent)
}

.index {
  align-self:end;
  padding-bottom:4px
}

.index-label {
  color:var(--muted);
  padding-bottom:16px
}

.index ol {
  list-style:none;
  border-top:1px solid var(--ink)
}

.index li {
  border-bottom:1px solid var(--line)
}

.index li a {
  display:grid;
  grid-template-columns:28px 1fr 14px;
  gap:8px;
  align-items:center;
  font-size:13px;
  padding:11px 0
}

.index li span:first-child {
  font-family:var(--mono);
  font-size:10px;
  color:var(--muted)
}

.index li span:last-child {
  color:var(--accent)
}

.index-note {
  font-size:12px;
  color:var(--muted);
  margin-top:25px;
  line-height:1.6
}

.hero-bottom {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:19px 0;
  border-top:1px solid var(--ink);
  color:var(--muted)
}

.hero-bottom a span {
  margin-left:36px;
  color:var(--accent);
  font-size:17px
}

.section {
  display:grid;
  grid-template-columns:200px minmax(0,1fr);
  gap:45px;
  padding-block:80px;
  border-bottom:1px solid var(--line)
}

.section-rail {
  padding-top:5px
}

.section-number {
  color:var(--accent);
  display:block;
  margin-bottom:15px
}

.section-rail h2 {
  font-size:20px;
  font-weight:500;
  letter-spacing:-.035em
}

.section-body {
  min-width:0
}

.lead {
  font-size:clamp(28px,3.15vw,42px);
  letter-spacing:-.045em;
  line-height:1.2;
  font-weight:500
}

.profile-copy {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:36px;
  margin-top:29px;
  color:var(--muted);
  font-size:14px;
  line-height:1.8
}

.profile-facts {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  border-top:1px solid var(--line);
  margin-top:34px;
  padding-top:21px
}

.profile-facts dt {
  font-size:10px;
  color:var(--muted);
  margin-bottom:8px
}

.profile-facts dd {
  font-size:12px
}

.section-intro {
  max-width:560px;
  color:var(--muted);
  font-size:15px;
  margin-bottom:32px
}

.timeline {
  list-style:none
}

.timeline li {
  display:grid;
  grid-template-columns:155px minmax(0,1fr);
  gap:18px;
  padding:27px 0;
  border-top:1px solid var(--line)
}

.timeline li:last-child {
  padding-bottom:0
}

.timeline-date {
  color:var(--muted);
  font-size:10px;
  padding-top:4px;
  white-space:nowrap
}

.job-heading {
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:16px;
  margin-bottom:12px
}

.job-heading h3 {
  font-size:18px;
  letter-spacing:-.025em;
  font-weight:500
}

.employer {
  font-size:10px;
  color:var(--accent)
}

.timeline p {
  font-size:13px;
  color:var(--muted);
  max-width:610px
}

.infrastructure {
  background:var(--dark);
  color:var(--paper);
  padding-block:76px 56px;
  margin-top:36px
}

.infra-heading {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:50px;
  margin-bottom:42px
}

.eyebrow {
  margin-bottom:25px
}

.eyebrow>span {
  color:var(--accent);
  margin-right:20px
}

.infrastructure .eyebrow>span {
  color:#f49a77
}

.infra-heading h2 {
  font-size:clamp(42px,5vw,64px);
  font-weight:500;
  letter-spacing:-.05em
}

.infra-heading h2>span {
  color:var(--dark-muted)
}

.infra-heading>p {
  max-width:275px;
  color:var(--dark-muted);
  font-size:14px;
  padding-bottom:4px
}

.infra-purpose {
  max-width:850px;
  font-size:14px;
  line-height:1.8;
  color:var(--dark-muted);
  margin-bottom:32px
}

.architecture {
  border:1px solid #586052;
  padding:23px 28px 20px
}

.diagram-caption {
  display:flex;
  justify-content:space-between;
  gap:20px;
  color:var(--dark-muted);
  font-size:10px
}

.hypervisor {
  position:relative;
  border:1px solid #818a79;
  width:340px;
  max-width:100%;
  margin:34px auto 0;
  display:flex;
  flex-direction:column;
  text-align:center;
  padding:17px 24px
}

.hypervisor>.mono {
  font-size:9px;
  color:var(--dark-muted)
}

.hypervisor strong {
  font-size:27px;
  font-weight:500;
  letter-spacing:-1px;
  margin-top:5px
}

.hypervisor-caption {
  font-size:11px;
  color:var(--dark-muted)
}

.hypervisor::after {
  content:"";
  position:absolute;
  left:50%;
  width:1px;
  background:#818a79;
  height:26px;
  top:100%
}

.architecture-branches {
  position:relative;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:26px;
  margin-top:50px
}

.architecture-branches::before {
  content:"";
  position:absolute;
  left:calc((100% - 52px)/6);
  right:calc((100% - 52px)/6);
  height:1px;
  background:#818a79;
  top:-25px
}

.machine {
  border:1px solid #586052;
  padding:21px 21px 0;
  position:relative;
  display:flex;
  flex-direction:column;
  min-width:0
}

.machine::before {
  content:"";
  position:absolute;
  top:-26px;
  height:25px;
  width:1px;
  left:50%;
  background:#818a79
}

.machine-id {
  font-size:9px;
  color:var(--dark-muted);
  margin-bottom:19px
}

.machine h3 {
  font-family:var(--mono);
  font-size:20px;
  font-weight:400;
  letter-spacing:-.05em
}

.machine-role {
  font-size:12px;
  color:var(--dark-muted);
  margin-top:6px
}

.machine ul {
  list-style:none;
  margin:24px 0 20px;
  font-size:12px
}

.machine li {
  padding:7px 0;
  border-top:1px solid #414b3e
}

.machine li span {
  display:block;
  font-size:10px;
  color:var(--dark-muted)
}

.machine-foot {
  border-top:1px solid #586052;
  padding:13px 0;
  margin-top:auto;
  font-size:9px;
  display:flex;
  gap:10px;
  align-items:center
}

.machine-foot .square {
  background:#f49a77;
  width:5px;
  height:5px
}

.diagram-note {
  font-size:10px;
  color:var(--dark-muted);
  margin-top:22px;
  max-width:720px
}

.infra-notes {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:44px;
  padding-top:30px
}

.infra-notes .mono {
  font-size:10px;
  color:#f49a77
}

.infra-notes p {
  font-size:12px;
  color:var(--dark-muted);
  margin-top:10px;
  max-width:280px
}

.skills-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0 30px
}

.skills-grid article {
  border-top:1px solid var(--line);
  padding:22px 0 30px
}

.skill-index {
  font-size:10px;
  color:var(--accent)
}

.skills-grid h3 {
  font-size:18px;
  font-weight:500;
  margin-top:13px;
  margin-bottom:15px;
  letter-spacing:-.03em
}

.skills-grid ul {
  list-style:none;
  color:var(--muted);
  font-size:12px;
  line-height:2
}

.project {
  border-top:1px solid var(--line)
}

.project:last-child {
  border-bottom:1px solid var(--line)
}

.project summary {
  cursor:pointer;
  display:grid;
  grid-template-columns:52px minmax(0,1fr) 20px;
  gap:20px;
  align-items:center;
  padding:26px 0;
  list-style:none
}

.project summary::-webkit-details-marker {
  display:none
}

.project summary:hover .project-title {
  color:var(--accent)
}

.project-number {
  color:var(--muted);
  font-size:10px
}

.project-category {
  display:block;
  color:var(--muted);
  font-size:9px;
  margin-bottom:8px
}

.project-title {
  display:block;
  font-size:29px;
  line-height:1.15;
  letter-spacing:-.04em
}

.details-sign {
  width:18px;
  height:18px;
  position:relative;
  color:var(--accent)
}

.details-sign::before,.details-sign::after {
  content:"";
  position:absolute;
  background:currentColor;
  width:14px;
  height:1px;
  left:2px;
  top:9px
}

.details-sign::after {
  transform:rotate(90deg)
}

.project[open] .details-sign::after {
  transform:rotate(0)
}

.project-content {
  padding:0 40px 26px 72px;
  font-size:14px;
  color:var(--muted);
  max-width:700px
}

.project-content .text-link {
  font-size:12px;
  color:var(--ink);
  margin-top:10px
}

.project-stack {
  font-size:10px;
  margin-top:17px;
  color:var(--accent)
}

.journey-lead {
  margin-bottom:39px
}

.journey {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  list-style:none
}

.journey li {
  border-top:1px solid var(--line);
  position:relative;
  padding:25px 20px 0 0
}

.journey li::before {
  content:"";
  position:absolute;
  left:0;
  top:-4px;
  width:7px;
  height:7px;
  background:var(--accent)
}

.journey li:not(:last-child)::after {
  content:"→";
  position:absolute;
  right:20px;
  top:24px;
  color:var(--accent);
  font-size:17px;
  line-height:1
}

.journey .mono {
  font-size:10px;
  color:var(--muted)
}

.journey h3 {
  font-size:21px;
  font-weight:500;
  letter-spacing:-.04em;
  margin:21px 0 13px
}

.journey p {
  font-size:12px;
  color:var(--muted)
}

.school {
  display:block;
  font-size:11px;
  margin-top:14px
}

.journey-note {
  margin-top:30px;
  font-size:14px;
  max-width:660px;
  color:var(--muted)
}

.off-duty {
  border-top:1px solid var(--line);
  margin-top:32px;
  padding-top:20px;
  display:flex;
  gap:28px;
  align-items:baseline
}

.off-duty .mono {
  color:var(--accent);
  font-size:9px;
  flex-shrink:0
}

.off-duty p {
  font-size:12px;
  color:var(--muted)
}

.contact {
  background:#e7e6dd;
  padding-block:70px;
  margin-top:36px
}

.contact-inner {
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  gap:80px
}

.contact-heading .eyebrow {
  margin-bottom:20px
}

.contact h2 {
  font-size:clamp(46px,5vw,66px);
  font-weight:500;
  letter-spacing:-.055em
}

.contact h2>span {
  color:var(--accent)
}

.contact-heading>p:last-child {
  font-size:13px;
  color:var(--muted);
  margin-top:22px;
  max-width:320px
}

.contact-links {
  border-top:1px solid var(--ink)
}

.contact-links a {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  padding:16px 0;
  border-bottom:1px solid #c5c6ba;
  font-size:13px
}

.contact-links .contact-email {
  font-size:clamp(15px,1.7vw,21px);
  letter-spacing:-.025em;
  overflow-wrap:anywhere
}

.contact-links a>span:last-child {
  color:var(--accent)
}

.footer {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:25px;
  padding-block:31px
}

.footer .wordmark {
  font-size:20px
}

.footer p {
  color:var(--muted);
  font-size:10px
}

.footer>.mono {
  font-size:9px
}

.footer>.mono span {
  margin-left:20px;
  color:var(--accent)
}

@media(min-width:1600px) {
  .hero-grid {
    padding-top:70px;
    padding-bottom:80px
  }
}

@media(max-width:1100px) {
  .container {
    width:calc(100% - 72px)
  }
  .header-label {
    display:none
  }
  .wordmark {
    margin-right:auto
  }
  .hero-grid {
    gap:32px;
    grid-template-columns:minmax(0,1fr) 200px
  }
  h1 {
    font-size:clamp(62px,8.2vw,94px)
  }
  .section {
    grid-template-columns:150px minmax(0,1fr);
    gap:30px
  }
  .timeline li {
    grid-template-columns:1fr;
    gap:12px
  }
  .architecture {
    padding-inline:20px
  }
  .architecture-branches {
    gap:16px
  }
  .architecture-branches::before {
    left:calc((100% - 32px)/6);
    right:calc((100% - 32px)/6)
  }
  .machine {
    padding-inline:14px
  }
  .machine h3 {
    font-size:17px
  }
  .contact-inner {
    gap:40px
  }
  .hero-actions {
    gap:20px
  }
}

@media(max-width:760px) {
  html {
    scroll-padding-top:86px
  }
  .container {
    width:calc(100% - 40px)
  }
  .header-inner {
    min-height:68px;
    gap:12px;
    flex-wrap:wrap
  }
  .wordmark {
    font-size:23px
  }
  .main-nav {
    width:100%;
    justify-content:space-between;
    gap:12px;
    padding-bottom:12px;
    font-size:13px
  }
  .js-menu .menu-toggle {
    display:block
  }
  .js-menu .main-nav {
    display:none
  }
  .js-menu .main-nav.is-open {
    display:flex
  }
  .hero {
    padding-top:25px
  }
  .hero-meta {
    font-size:11px;
    gap:12px;
    flex-wrap:wrap
  }
  .hero-grid {
    grid-template-columns:1fr;
    padding-top:41px;
    padding-bottom:35px;
    gap:39px
  }
  h1 {
    font-size:clamp(52px,12.6vw,92px);
    margin-left:-2px
  }
  .hero-role {
    font-size:24px;
    margin-top:25px
  }
  .hero-keywords {
    font-size:11px;
    margin-top:21px;
    max-width:100%;
    line-height:2.1
  }
  .hero-keywords span {
    margin:0 4px
  }
  .hero-actions {
    gap:20px;
    margin-top:27px;
    font-size:13px
  }
  .button {
    gap:28px;
    padding:11px 16px
  }
  .index {
    display:none
  }
  .hero-bottom {
    font-size:11px;
    gap:12px;
    flex-wrap:wrap;
    padding-block:16px
  }
  .hero-bottom a span {
    margin-left:10px
  }
  .section {
    grid-template-columns:1fr;
    gap:27px;
    padding-block:48px
  }
  .section-rail {
    display:flex;
    align-items:baseline;
    gap:16px;
    padding-top:0
  }
  .section-number {
    margin:0;
    font-size:12px
  }
  .section-rail h2 {
    font-size:18px
  }
  .lead {
    font-size:31px
  }
  .profile-copy {
    gap:22px;
    font-size:15px;
    margin-top:23px;
    grid-template-columns:1fr
  }
  .profile-facts {
    gap:16px
  }
  .profile-facts dd {
    font-size:13px
  }
  .profile-facts dt {
    font-size:11px
  }
  .section-intro {
    font-size:15px;
    margin-bottom:23px
  }
  .timeline li {
    padding-block:23px
  }
  .timeline-date,.employer {
    font-size:12px;
    white-space:normal
  }
  .timeline p {
    font-size:15px
  }
  .job-heading {
    gap:14px
  }
  .job-heading h3 {
    font-size:17px
  }
  .infrastructure {
    padding-block:47px 36px;
    margin-top:16px
  }
  .infra-heading {
    display:block;
    margin-bottom:28px
  }
  .eyebrow {
    font-size:12px;
    margin-bottom:21px
  }
  .infra-heading h2 {
    font-size:43px
  }
  .infra-heading>p {
    max-width:380px;
    margin-top:23px;
    font-size:15px
  }
  .infra-purpose {
    font-size:15px;
    margin-bottom:28px
  }
  .architecture {
    padding:18px
  }
  .diagram-caption {
    font-size:11px;
    align-items:flex-start;
    flex-wrap:wrap;
    gap:10px
  }
  .diagram-caption>span:first-child {
    max-width:none
  }
  .hypervisor {
    width:100%;
    margin-top:26px;
    padding:16px
  }
  .hypervisor::after {
    display:none
  }
  .hypervisor>.mono {
    font-size:11px
  }
  .hypervisor-caption {
    font-size:13px
  }
  .architecture-branches {
    grid-template-columns:1fr;
    gap:18px;
    margin-top:26px;
    padding-left:20px
  }
  .architecture-branches::before {
    left:0;
    right:auto;
    top:-26px;
    bottom:0;
    height:auto;
    width:1px
  }
  .machine {
    padding:19px 18px 0
  }
  .machine::before {
    left:-21px;
    top:30px;
    width:20px;
    height:1px
  }
  .machine-id {
    margin-bottom:12px;
    font-size:11px
  }
  .machine h3 {
    font-size:22px
  }
  .machine ul {
    margin-top:20px;
    font-size:14px
  }
  .machine-role {
    font-size:14px
  }
  .machine li {
    display:flex;
    justify-content:space-between;
    gap:12px;
    flex-wrap:wrap
  }
  .machine li span {
    text-align:right;
    font-size:12px
  }
  .machine-foot {
    font-size:11px
  }
  .diagram-note {
    font-size:12px
  }
  .infra-notes {
    grid-template-columns:1fr;
    gap:20px;
    padding-top:25px
  }
  .infra-notes p {
    max-width:none;
    margin-top:5px;
    font-size:15px
  }
  .infra-notes .mono {
    font-size:12px
  }
  .skills-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:0 22px
  }
  .skills-grid article {
    padding:18px 0 24px
  }
  .skills-grid h3 {
    font-size:18px
  }
  .skills-grid ul {
    font-size:14px;
    line-height:1.8;
    overflow-wrap:anywhere
  }
  .skill-index {
    font-size:12px
  }
  .project summary {
    grid-template-columns:35px minmax(0,1fr) 18px;
    gap:12px;
    padding-block:24px
  }
  .project-title {
    font-size:25px
  }
  .project-content {
    padding-left:47px;
    padding-right:10px;
    font-size:15px
  }
  .project-category {
    font-size:11px
  }
  .project-number,.project-stack {
    font-size:12px
  }
  .project-content .text-link {
    font-size:14px
  }
  .journey-lead {
    margin-bottom:30px
  }
  .journey {
    grid-template-columns:1fr;
    gap:0
  }
  .journey li {
    border-top:0;
    border-left:1px solid var(--line);
    padding:0 0 30px 24px
  }
  .journey li::before {
    top:6px;
    left:-4px
  }
  .journey li:not(:last-child)::after {
    display:none
  }
  .journey h3 {
    margin:10px 0;
    font-size:23px
  }
  .journey p {
    font-size:15px
  }
  .journey .mono {
    font-size:12px
  }
  .journey li:last-child {
    padding-bottom:0
  }
  .school {
    margin-top:8px;
    font-size:13px
  }
  .journey-note {
    font-size:15px
  }
  .off-duty {
    display:block
  }
  .off-duty p {
    margin-top:8px;
    font-size:14px
  }
  .off-duty .mono {
    font-size:12px
  }
  .contact {
    padding-block:43px;
    margin-top:16px
  }
  .contact-inner {
    grid-template-columns:1fr;
    gap:30px
  }
  .contact h2 {
    font-size:53px
  }
  .contact-heading>p:last-child {
    margin-top:16px;
    font-size:15px
  }
  .contact-links a {
    font-size:15px
  }
  .contact-links .contact-email {
    font-size:18px
  }
  .footer {
    flex-wrap:wrap;
    padding-block:25px;
    gap:20px
  }
  .footer .wordmark {
    margin:0
  }
  .footer p {
    margin-left:auto;
    font-size:12px
  }
  .footer>.mono {
    width:100%;
    text-align:right;
    font-size:12px
  }
}

@media(max-width:390px) {
  .hero-actions {
    gap:13px
  }
  .hero-actions .button {
    gap:20px
  }
  .profile-copy {
    grid-template-columns:1fr;
    gap:15px
  }
  .profile-facts {
    grid-template-columns:1fr;
    gap:16px
  }
  .profile-facts div {
    display:flex;
    justify-content:space-between;
    gap:12px
  }
  .profile-facts dt {
    margin:0
  }
  .contact-links .contact-email {
    font-size:16px
  }
  .skills-grid {
    gap:0 16px;
    grid-template-columns:1fr
  }
  .job-heading {
    flex-direction:column;
    gap:8px
  }
}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
}

@media print {
  html {
    scroll-behavior:auto
  }
  body {
    background:white;
    color:#111;
    font-size:11px
  }
  .container {
    width:100%;
    max-width:none
  }
  .site-header,.index,.hero-bottom,.hero-actions,.skip-link,.footer>a:last-child {
    display:none
  }
  .hero {
    padding-top:0
  }
  .hero-grid {
    display:block;
    padding:20px 0
  }
  h1 {
    font-size:52px
  }
  .hero-role {
    font-size:22px
  }
  .hero-meta {
    font-size:9px
  }
  .section {
    display:block;
    padding:24px 0;
    break-inside:avoid
  }
  .section-rail {
    margin-bottom:16px
  }
  .section-number {
    display:inline;
    margin-right:10px
  }
  .section-rail h2 {
    display:inline
  }
  .infrastructure {
    background:white;
    color:#111;
    margin:0;
    padding:25px 0;
    break-inside:avoid
  }
  .infrastructure * {
    color:#111!important
  }
  .infra-heading h2 {
    font-size:30px
  }
  .architecture {
    border-color:#888
  }
  .machine li,.machine-foot {
    border-color:#aaa
  }
  .lead {
    font-size:25px
  }
  .contact {
    background:white;
    margin:0;
    padding:25px 0
  }
  .contact h2 {
    font-size:35px
  }
  .footer {
    padding:15px 0
  }
}