/* birkanicacan.com · page styles layered on Meridian tokens.css + components.css */

.wrap { max-width: var(--content); margin: 0 auto; padding: 0 var(--s-5); }
.skip { position: absolute; left: -999px; top: 8px; background: var(--surface); padding: 8px 12px; border-radius: var(--r-1); z-index: 20; }
.skip:focus { left: 8px; }

/* ── top bar ── */
.topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 10; background: color-mix(in srgb, var(--ground) 86%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.topbar .wrap { display: flex; align-items: center; justify-content: space-between; height: 60px; }
.brand { display: inline-flex; align-items: center; gap: var(--s-3); border: 0; color: var(--ink); font-family: var(--font-display); font-weight: 500; font-size: var(--t-2); }
.mark { width: 22px; height: 22px; flex: none; }
.topbar nav { display: flex; align-items: center; gap: var(--s-4); }
.topbar nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--s-5); font-size: var(--t-2); }
.topbar nav a { border: 0; color: var(--ink-2); padding: 4px 0; transition: color var(--d-1) var(--ease); }
.topbar nav a:hover, .topbar nav a[aria-current] { color: var(--ink); }
.topbar nav a[aria-current] { font-weight: 500; }

/* ── hero ── */
.hero { position: relative; padding: var(--s-9) 0 var(--s-8); display: grid; grid-template-columns: 1.25fr 1fr; gap: var(--s-7); align-items: center; }
.hero h1 { margin-top: 0; }
.hero .lede { margin-top: var(--s-5); max-width: 40ch; }
.hero .btn-row { margin-top: var(--s-6); }

.portrait { position: relative; justify-self: end; width: 100%; max-width: 340px; aspect-ratio: 1; }
.portrait img { position: relative; z-index: 1; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; padding: 8px; background: var(--ground); border: 2px solid var(--primary); }

/* ── sections ── */
section.s { padding: var(--s-9) 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: 220px 1fr; gap: var(--s-7); }
section.s > header { position: sticky; top: 84px; align-self: start; }
section.s > header h2 { font-size: var(--t-5); margin-top: var(--s-2); }
section.s > header p { font-size: var(--t-2); color: var(--ink-3); margin-top: var(--s-3); }
section.s > div { min-width: 0; }

.prose { display: grid; gap: var(--s-4); }
.prose p { font-size: var(--t-3); color: var(--ink-2); }

blockquote.q { margin-top: var(--s-6); }


/* ── work ── */
.roles { display: grid; }
.role { display: grid; grid-template-columns: 152px 1fr; gap: var(--s-4); padding: var(--s-5) 0; border-bottom: 1px solid var(--line); }
.role:first-child { padding-top: 0; }
.role:last-child { border-bottom: 0; }
.role .when { font-family: var(--font-mono); font-size: var(--t-1); color: var(--ink-3); padding-top: 6px; font-variant-numeric: tabular-nums; line-height: 1.7; }
.role .when small { display: block; font-size: inherit; color: var(--ink-3); opacity: .8; }
.role h3 { display: flex; align-items: center; gap: var(--s-3); font-size: var(--t-4); font-weight: 500; flex-wrap: wrap; }
.role .title { font-family: var(--font-display); font-weight: 400; font-size: var(--t-3); color: var(--ink-2); margin-top: 2px; }
.role ul { margin: var(--s-3) 0 0; padding-left: 1.1em; display: grid; gap: var(--s-2); font-size: var(--t-2); color: var(--ink-2); max-width: var(--measure); }
.role ul li::marker { color: var(--line-strong); }
.role p { font-size: var(--t-2); color: var(--ink-2); margin-top: var(--s-2); }
.sub { margin: var(--s-7) 0 var(--s-2); }
.sub .eyebrow { display: block; }
.sub + .roles .role:first-child { padding-top: var(--s-4); border-top: 1px solid var(--line); }

/* ── contact ── */
.contact { display: grid; gap: var(--s-5); }

footer.end small { font-size: inherit; }

/* ── responsive ── */
@media (max-width: 820px) {
  section.s { grid-template-columns: 1fr; gap: var(--s-5); padding: var(--s-8) 0; }
  section.s > header { position: static; }
  .hero { grid-template-columns: 1fr; gap: var(--s-6); padding: var(--s-7) 0 var(--s-7); }
  .portrait { order: -1; justify-self: start; max-width: 168px; }
}
@media (max-width: 600px) {
  .wrap { padding: 0 var(--s-4); }
  .hero { padding-top: var(--s-6); gap: var(--s-5); }
  .portrait { max-width: 144px; }
  .brand span { display: none; }
  .topbar nav ul { gap: var(--s-4); }
  h1 { font-size: var(--t-7); }
  .role { grid-template-columns: 1fr; gap: var(--s-2); }
  .role .when { padding-top: 0; }
}

/* ── polish ── */
section.s { scroll-margin-top: 60px; }

/* ── button icons + touch targets ── */
.btn svg { width: 16px; height: 16px; flex: none; }
.btn { min-height: 44px; padding-block: 11px; }
.topbar nav a { padding: 12px 2px; }
.expand { min-height: 44px; }
.theme { width: 40px; height: 40px; }
@media (pointer: coarse) { .replay { min-height: 44px; } }

/* ── theme toggle ── */
.theme { background: none; border: 1px solid transparent; color: var(--ink-2); width: 32px; height: 32px; border-radius: var(--r-1); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; transition: border-color var(--d-1) var(--ease), color var(--d-1) var(--ease); }
.theme:hover { border-color: var(--line-strong); color: var(--ink); }
.theme svg { width: 18px; height: 18px; }

/* ── reveals ── */
.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity var(--d-3) var(--ease), transform var(--d-3) var(--ease); }
.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; } }

/* ── SWOS.EXE ── */
.term { display: grid; width: 100%; text-align: left; margin-top: var(--s-5); background: var(--screen); color: var(--screen-ink); border-radius: var(--r-2); padding: var(--s-4); font: 400 12px/1.7 var(--font-mono); min-height: 128px; cursor: pointer; gap: var(--s-3); align-content: start; border: 1px solid transparent; transition: border-color var(--d-2) var(--ease); }
.term:hover { border-color: var(--line-strong); }
.term:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.term .term-out { display: block; margin: 0; font: inherit; white-space: pre-wrap; color: inherit; }
.term.live .term-out::after { content: ""; display: inline-block; width: 7px; height: 1.05em; margin-left: 2px; vertical-align: text-bottom; background: var(--screen-ink); animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.term-mark { width: 28px; height: 28px; opacity: 0; transition: opacity var(--d-2) var(--ease); }
.term-mark.in { opacity: 1; }

/* ── journey: meridian line + collapsible roles ── */
.role .body { position: relative; padding-left: 28px; }
.role .body::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 11px; height: 11px; box-sizing: border-box; border-radius: 50%; background: var(--surface); border: 2px solid var(--primary); }
.role.now .body::before { background: var(--accent); border-color: var(--accent); }
.role .body::after { content: ""; position: absolute; left: 5px; top: calc(0.5em + 13px); bottom: calc(-1 * var(--s-5) - 1px); width: 1px; background: var(--line-strong); }
.role:last-child .body::after { display: none; }
.expand { background: none; border: 0; padding: 0; margin-top: var(--s-3); font: 500 var(--t-2) var(--font-body); color: var(--accent); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.expand svg { width: 14px; height: 14px; transition: transform var(--d-2) var(--ease); }
.expand[aria-expanded="true"] svg { transform: rotate(180deg); }
.js .more { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--d-2) var(--ease); }
.js .more > div { overflow: hidden; min-height: 0; }
.js .more.open { grid-template-rows: 1fr; }
.js .expand { display: inline-flex; } .expand { display: none; }

@media (max-width: 820px) {
  .term { max-width: 260px; }
}

/* ── journey route map ── */
.journey-wrap { position: relative; margin: 0 0 var(--s-6); }
.journey { margin: 0; }
.journey svg.m { display: none; }
.replay { position: absolute; top: 10px; right: 10px; font: 500 var(--t-1) var(--font-mono); letter-spacing: .06em; text-transform: uppercase; background: var(--surface); border: 1px solid var(--line-strong); color: var(--ink-2); padding: 6px 12px; min-height: 32px; border-radius: var(--r-pill); cursor: pointer; transition: border-color var(--d-1) var(--ease), color var(--d-1) var(--ease); }
.replay:hover { border-color: var(--ink-3); color: var(--ink); }
.journey .lats line { stroke: var(--line); stroke-width: 1; stroke-dasharray: 2 6; }
.journey .legs path { fill: none; stroke: var(--primary); stroke-width: 1.5; stroke-linecap: round; }
.journey .plane { fill: var(--accent); opacity: 0; }
.journey .city circle { fill: var(--surface); stroke: var(--primary); stroke-width: 2; transition: r var(--d-2) var(--ease); }
.journey .city.now circle { fill: var(--accent); stroke: var(--accent); }
.journey .city text { font-family: var(--font-body); font-size: 12px; fill: var(--ink); }
.journey .city .yr { font-family: var(--font-mono); font-size: 10px; fill: var(--ink-3); }
.js .journey.anim .legs path { stroke-dasharray: var(--len) var(--len); stroke-dashoffset: var(--len); }
.js .journey.anim .city { opacity: 0.25; transition: opacity var(--d-2) var(--ease); }
.js .journey.anim .city.lit { opacity: 1; }
.js .journey.anim .plane { opacity: 1; }

@media (max-width: 360px) {
  .portrait { max-width: 112px; }
  h1 { font-size: var(--t-6); }
  .hero .lede { font-size: var(--t-3); }
}

/* route map layouts: desktop landscape above 600px, portrait below (kept last so it wins the cascade) */
@media (max-width: 600px) {
  .journey svg.d { display: none; }
  .journey svg.m { display: block; min-width: 0; }
  .replay { top: auto; bottom: 10px; }
}

/* ── top bar: progressive disclosure ── */
.js .topbar { transform: translateY(-100%); opacity: 0; visibility: hidden; transition: transform var(--d-2) var(--ease), opacity var(--d-2) var(--ease), visibility 0s linear var(--d-2); }
.js .topbar.show { transform: none; opacity: 1; visibility: visible; transition-delay: 0s; }