@import url("styles.css?v=e6796dbf65a8");
.area-link { display:block; height:100%; text-decoration:none; color:var(--ink); padding:20px; border:1px solid var(--line); border-radius:12px; }
.area-link:hover { border-color:var(--accent-text); background:var(--soft); }
/* Portfolio cards and detail pages */
.home-link { margin-left: 24px; }
#selected-projects, .project-cards li { scroll-margin-top: 32px; }
[tabindex="-1"]:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 6px; }
.project-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.project-card { display: flex; flex-direction: column; height: 100%; padding: clamp(24px, 4vw, 36px); border: 1px solid var(--line); border-radius: 12px; color: var(--ink); text-decoration: none; background: var(--surface); }
.project-card:hover { border-color: var(--accent-text); background: var(--soft); }
.card-meta { color: var(--muted); font-size: .8125rem; line-height: 1.6; }
.project-card h3 { margin: 20px 0 12px; font-size: clamp(1.375rem,3vw,1.75rem); font-weight: 600; line-height: 1.3; letter-spacing: -.025em; }
.project-card p { margin: 0 0 28px; color: var(--muted); line-height: 1.75; }
.card-action { margin-top: auto; color: var(--accent-text); font-size: .875rem; }
.project-detail .hero { padding-bottom: 64px; }
.project-detail .eyebrow { margin-top: 40px; }
.project-detail h1 { font-size: clamp(2.75rem,6vw,5rem); }
.project-meta { display: flex; flex-wrap: wrap; gap: 12px 32px; margin-top: 28px; color: var(--muted); font-size: .875rem; }
.detail-copy { max-width: 720px; }
.detail-copy p, .detail-copy li { color: var(--muted); font-size: 1.125rem; line-height: 1.85; }
.detail-copy p { margin: 0 0 24px; }
.detail-copy ul { padding-left: 24px; margin: 0; }
.detail-copy li + li { margin-top: 12px; }
.project-navigation { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 24px; padding: 32px 0 48px; border-top: 1px solid var(--line); }
@media (max-width: 600px) { .project-cards { grid-template-columns: 1fr; } .home-link { margin-left: 0; display: block; margin-top: 12px; } }

/* The local workflow simulation also reads as a complete example without JS. */
.demo-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.demo-heading .section-title { margin-bottom:0; }
.demo-badge { display:inline-block; border:1px solid var(--line); border-radius:99px; background:var(--soft); color:var(--accent-text); font-size:.6875rem; padding:6px 10px; white-space:nowrap; }
.demo-intro { max-width:720px; font-size:1.125rem; line-height:1.75; margin:24px 0 10px; }
.demo-note { color:var(--muted); font-size:.8125rem; line-height:1.7; }
.demo-controls { display:flex; align-items:center; flex-wrap:wrap; gap:12px; margin:28px 0; }
.demo-status { flex:1 1 220px; color:var(--muted); font-size:.8125rem; line-height:1.6; padding:4px 0; }
button:disabled { cursor:progress; opacity:.7; }
.workflow-steps { list-style:none; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; padding:0; margin:28px 0 24px; }
.workflow-step { display:flex; flex-direction:column; gap:8px; height:100%; border:1px solid var(--line); border-radius:12px; padding:20px; text-decoration:none; color:var(--ink); background:var(--surface); }
.workflow-step strong { font-weight:600; font-size:.9375rem; }
.workflow-step>span:last-child { font-size:.75rem; color:var(--muted); line-height:1.5; }
.step-number { color:var(--accent-text); font-size:.75rem; margin-bottom:8px; }
.workflow-step[aria-current="step"] { border:2px solid var(--accent-text); padding:19px; background:var(--soft); }
.workflow-step[aria-current="step"] .step-number::after { content:" / SELECTED"; font-size:.6rem; }
.workflow-step.is-complete .step-number::after { content:" / DONE"; font-size:.6rem; }
.workflow-step:hover { border-color:var(--accent-text); }
.stage-panel { border:1px solid var(--line); border-radius:16px; padding:clamp(20px,4vw,36px); margin-bottom:20px; background:var(--surface); scroll-margin-top:24px; }
.stage-heading h3 { font-size:clamp(1.4rem,3vw,2rem); letter-spacing:-.035em; margin:12px 0; font-weight:600; }
.stage-heading p { color:var(--muted); line-height:1.8; max-width:680px; margin:0 0 28px; }
.sample-articles { list-style:none; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:0; padding:0; }
.sample-articles li { display:flex; flex-direction:column; gap:10px; padding:20px; border:1px solid var(--line); border-radius:10px; }
.sample-articles strong { font-size:.9375rem; font-weight:500; line-height:1.6; }
.sample-articles li>span:last-child { color:var(--muted); font-size:.8125rem; line-height:1.7; }
.source-label { color:var(--accent-text); font-size:.6875rem; text-transform:uppercase; letter-spacing:.06em; }
.sample-stats { display:flex; flex-wrap:wrap; gap:20px; padding:24px 0; }
.sample-stats>span { flex:1; min-width:100px; color:var(--muted); font-size:.875rem; }
.sample-stats strong { display:block; color:var(--accent-text); font-size:3rem; font-weight:600; margin-bottom:8px; }
.removed-item { color:var(--muted); border-top:1px solid var(--line); padding-top:20px; font-size:.875rem; line-height:1.7; }
.digest-preview { padding:24px; border:1px solid var(--line); border-radius:12px; background:var(--paper); }
.digest-heading { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; font-size:.6875rem; color:var(--muted); }
.digest-preview h4 { font-size:1.375rem; letter-spacing:-.03em; margin:28px 0 20px; }
.digest-preview ol { padding-left:22px; margin:0; }
.digest-preview li { font-size:.9375rem; line-height:1.8; margin-bottom:20px; padding-left:4px; }
.digest-preview li span { display:block; color:var(--muted); font-size:.75rem; }
.digest-preview>p { margin:20px 0 0; padding-top:16px; border-top:1px solid var(--line); font-size:.8125rem; line-height:1.7; color:var(--muted); }
@media(max-width:600px) { .workflow-steps { grid-template-columns:repeat(2,minmax(0,1fr)); } .workflow-step { padding:16px; } .workflow-step[aria-current="step"] { padding:15px; } .sample-articles { grid-template-columns:1fr; } .digest-preview { padding:20px; } }

.project-card h3,.stage-heading h3,.digest-preview h4 { font-family:var(--font-heading); font-weight:600; }

/* DevFest case study: intrinsic media ratios stay intact on narrow screens. */
.card-tags { display:block; color:var(--muted); font-size:.8125rem; line-height:1.8; margin:0 0 24px; }
.devfest-gallery { display:grid; grid-template-columns:minmax(0, 2fr) minmax(0, 1fr); align-items:start; gap:24px; margin-top:28px; }
.devfest-gallery figure { margin:0; min-width:0; }
.devfest-gallery img, .devfest-gallery video { display:block; width:100%; height:auto; border-radius:12px; border:1px solid var(--line); }
.devfest-gallery figcaption { margin-top:12px; color:var(--muted); font-size:.875rem; line-height:1.7; }
@media(max-width:600px) { .devfest-gallery { grid-template-columns:1fr; } .devfest-gallery .portrait-media { width:min(100%, 280px); justify-self:center; } }

/* Field Notes: listing, post typography and tag chips. */
.note-meta { display:flex; flex-wrap:wrap; gap:4px 16px; }
.note-cards { grid-template-columns:1fr; max-width:820px; }
.note-card h3 { margin:16px 0 12px; }
.note-card p { margin-bottom:20px; }
.tag-list { list-style:none; display:flex; flex-wrap:wrap; gap:8px; margin:24px 0 0; padding:0; }
.note-card .tag-list { margin:0 0 24px; }
.tag-list li { border:1px solid var(--line); border-radius:99px; background:var(--soft); color:var(--accent-text); font-size:.75rem; line-height:1; padding:7px 11px; }
.note-body { max-width:720px; }
.note-body h2 { font-family:var(--font-heading); font-weight:600; font-size:clamp(1.375rem,3vw,1.75rem); letter-spacing:-.025em; line-height:1.3; color:var(--ink); margin:48px 0 16px; scroll-margin-top:24px; }
.note-body h3 { font-family:var(--font-heading); font-weight:600; font-size:1.25rem; color:var(--ink); margin:36px 0 12px; }
.note-body > :first-child { margin-top:0; }
.note-body strong { color:var(--ink); }
.note-body ol { padding-left:24px; margin:0 0 24px; }
.note-body ul { margin:0 0 24px; }
.note-body blockquote { margin:0 0 24px; padding:4px 0 4px 24px; border-left:3px solid var(--accent); }
.note-body blockquote p { color:var(--ink); }
.note-body img { display:block; max-width:100%; height:auto; margin:8px 0 24px; border-radius:8px; border:1px solid var(--line, rgba(0,0,0,.12)); }
.note-body code { font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.875em; background:var(--soft); border-radius:4px; padding:2px 6px; overflow-wrap:anywhere; }
.note-body pre { overflow-x:auto; background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:20px; margin:0 0 24px; line-height:1.6; }
.note-body pre code { background:none; padding:0; font-size:.875rem; overflow-wrap:normal; }
.note-body img { display:block; max-width:100%; height:auto; border-radius:12px; border:1px solid var(--line); }
.note-body hr { border:0; border-top:1px solid var(--line); margin:40px 0; }
.note-body table { display:block; overflow-x:auto; border-collapse:collapse; margin:0 0 24px; font-size:.9375rem; line-height:1.6; }
.note-body th, .note-body td { text-align:left; vertical-align:top; padding:12px 16px 12px 0; border-bottom:1px solid var(--line); color:var(--muted); }
.note-body th { color:var(--ink); font-weight:600; }
.note-share .footer-links { flex-wrap:wrap; font-size:.9375rem; }
.notes-page .note h1 { font-size:clamp(2.25rem,5vw,4rem); letter-spacing:-.045em; }