.skill-page { background: var(--paper); }
.skill-page code { padding: .12em .35em; border-radius: 5px; background: rgba(24,24,22,.08); font: .88em/1.3 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

.skill-breadcrumb { width: min(1440px, 100%); margin: 0 auto; padding: 24px clamp(20px, 5vw, 80px) 0; display: flex; gap: 10px; flex-wrap: wrap; color: var(--muted); font-size: 12px; font-weight: 750; }
.skill-breadcrumb a { text-underline-offset: 4px; }
.skill-breadcrumb span[aria-hidden] { opacity: .45; }

.skill-hero { width: min(1440px, 100%); margin: 0 auto; padding: clamp(50px, 8vw, 110px) clamp(20px, 5vw, 80px) clamp(74px, 9vw, 130px); display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(330px, .75fr); gap: clamp(48px, 8vw, 120px); align-items: end; }
.skill-hero .eyebrow { display: flex; gap: 12px; }
.skill-hero .eyebrow span { color: var(--muted); }
.skill-detail-code { display: block; margin: 50px 0 18px; color: var(--blue); font-size: 14px; font-weight: 900; }
.skill-hero h1 { max-width: 940px; margin: 0; font-size: clamp(56px, 7.8vw, 126px); line-height: .86; letter-spacing: -.078em; }
.skill-ability { max-width: 880px; margin-top: 40px; color: #4d4c47; font-size: clamp(19px, 1.7vw, 25px); line-height: 1.45; }
.skill-ability p { margin: 0 0 14px; }

.skill-passport { padding: 26px; color: var(--paper-light); background: var(--blue); border-radius: var(--radius); box-shadow: 18px 18px 0 var(--orange); transform: rotate(1deg); }
.skill-passport > p { margin: 0 0 30px; color: rgba(255,255,255,.65); font-size: 11px; }
.skill-passport > div { padding: 16px 0; border-top: 1px solid rgba(255,255,255,.22); }
.skill-passport > div > span { display: block; margin-bottom: 7px; color: rgba(255,255,255,.6); font-size: 10px; font-weight: 850; text-transform: uppercase; }
.skill-passport strong { display: block; font-size: 14px; line-height: 1.35; }
.skill-passport ul { margin: 0; padding: 0; list-style: none; }
.skill-passport li + li { margin-top: 8px; }
.skill-passport a { display: grid; grid-template-columns: 90px 1fr; gap: 8px; font-size: 13px; text-decoration: none; }
.skill-passport a:hover { color: var(--lime); }
.skill-passport a .mono { color: var(--lime); font-size: 10px; }

.skill-contract { width: min(1440px, 100%); margin: 0 auto; padding: clamp(78px, 10vw, 150px) clamp(20px, 5vw, 80px); display: grid; grid-template-columns: .72fr 1.28fr; gap: clamp(50px, 8vw, 120px); border-top: 1px solid var(--line); }
.skill-contract-heading { align-self: start; position: sticky; top: 130px; }
.skill-contract-heading h2 { margin: 0; font-size: clamp(50px, 6vw, 88px); line-height: .9; letter-spacing: -.065em; }
.skill-contract-steps > section { min-height: 300px; padding: 28px 0 50px; border-top: 1px solid var(--ink); }
.skill-contract-steps > section:first-child { border-top-width: 7px; }
.skill-step-number { color: var(--orange); font-size: 11px; font-weight: 850; text-transform: uppercase; }
.skill-contract-steps h2 { margin: 52px 0 20px; font-size: clamp(32px, 3vw, 46px); line-height: 1; letter-spacing: -.05em; }
.skill-contract-steps p, .skill-contract-steps li { max-width: 800px; color: var(--muted); font-size: 18px; }

.skill-proof { width: min(1440px, 100%); margin: 0 auto; padding: clamp(70px, 9vw, 130px) clamp(20px, 5vw, 80px); display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(50px, 8vw, 120px); }
.skill-proof h2 { margin: 0; font-size: clamp(52px, 6vw, 92px); line-height: .9; letter-spacing: -.065em; }
.skill-proof-list ul { margin: 0; padding: 0; list-style: none; counter-reset: evidence; }
.skill-proof-list li { counter-increment: evidence; min-height: 92px; padding: 24px 0 24px 72px; border-top: 1px solid rgba(255,255,255,.24); color: #d0cec5; position: relative; }
.skill-proof-list li::before { content: counter(evidence, decimal-leading-zero); position: absolute; left: 0; top: 28px; color: var(--lime); font: 800 12px/1 ui-monospace, monospace; }
.skill-proof-list p { color: #d0cec5; }

.skill-notes, .skill-source, .skill-related { width: min(1440px, 100%); margin: 0 auto; padding: clamp(70px, 9vw, 130px) clamp(20px, 5vw, 80px); display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(50px, 8vw, 120px); border-bottom: 1px solid var(--line); }
.skill-notes h2, .skill-source h2, .skill-related h2 { margin: 0; font-size: clamp(42px, 4.8vw, 72px); line-height: .95; letter-spacing: -.055em; }
.skill-notes ul { margin: 0; padding: 0; list-style: none; }
.skill-notes li { padding: 18px 0 18px 32px; border-top: 1px solid var(--ink); color: var(--muted); position: relative; }
.skill-notes li::before { content: "×"; position: absolute; left: 0; color: var(--orange); font-weight: 900; }
.skill-source { grid-template-columns: 120px 1fr; background: var(--paper-light); }
.skill-source > .mono { color: var(--orange); font-size: 11px; }
.skill-source p { max-width: 850px; color: var(--muted); font-size: 18px; }
.skill-source a { color: var(--blue); font-weight: 800; text-underline-offset: 5px; }
.skill-related-grid { display: grid; gap: 12px; }
.skill-related-grid > a { min-height: 100px; padding: 22px; display: grid; grid-template-columns: 112px 1fr; align-items: center; border: 1px solid var(--ink); border-radius: 14px; background: var(--paper-light); font-size: 19px; font-weight: 800; text-decoration: none; transition: transform .2s ease, background .2s ease; }
.skill-related-grid > a:hover { transform: translateX(5px); background: var(--lime); }
.skill-related-grid .mono { color: var(--blue); font-size: 11px; }

.skill-pagination { width: min(1440px, 100%); margin: 0 auto; padding: 0 clamp(20px, 5vw, 80px) clamp(80px, 10vw, 145px); display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.skill-pagination a { min-height: 150px; padding: 28px; display: flex; flex-direction: column; justify-content: space-between; border: 1px solid var(--ink); border-radius: var(--radius); text-decoration: none; }
.skill-pagination a:last-child { text-align: right; }
.skill-pagination a:hover { color: var(--paper-light); background: var(--blue); border-color: var(--blue); }
.skill-pagination span { color: var(--muted); font-size: 11px; font-weight: 850; text-transform: uppercase; }
.skill-pagination a:hover span { color: rgba(255,255,255,.65); }
.skill-pagination strong { max-width: 520px; font-size: 21px; line-height: 1.1; }
.skill-pagination a:last-child strong { align-self: flex-end; }

.skill-cta { width: min(1440px, 100%); margin: 0 auto; padding: clamp(75px, 9vw, 135px) clamp(20px, 5vw, 80px); display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(50px, 8vw, 120px); align-items: end; }
.skill-cta h2 { margin: 0; font-size: clamp(48px, 5.7vw, 84px); line-height: .92; letter-spacing: -.06em; }
.skill-cta > div:last-child p { margin: 0 0 28px; color: #aaa89f; font-size: 19px; }

@media (max-width: 1050px) {
  .skill-hero, .skill-contract, .skill-proof, .skill-notes, .skill-related, .skill-cta { grid-template-columns: 1fr; }
  .skill-passport { max-width: 650px; }
  .skill-contract-heading { position: static; }
}

@media (max-width: 720px) {
  .skill-hero { padding-top: 36px; }
  .skill-detail-code { margin-top: 36px; }
  .skill-hero h1 { font-size: clamp(52px, 16vw, 78px); }
  .skill-passport { margin-right: 12px; box-shadow: 10px 12px 0 var(--orange); }
  .skill-contract-steps > section { min-height: 0; }
  .skill-source { grid-template-columns: 1fr; }
  .skill-related-grid > a { grid-template-columns: 1fr; gap: 8px; }
  .skill-pagination { grid-template-columns: 1fr; }
  .skill-pagination a:last-child { text-align: left; }
  .skill-pagination a:last-child strong { align-self: flex-start; }
  .skill-page .site-footer { grid-template-columns: 1fr; gap: 22px; }
  .skill-page .site-footer > p { text-align: left; }
  .skill-page .site-footer > div { justify-content: flex-start; flex-wrap: wrap; }
}