/* Hallmark · shape: Narrative Workflow · genre: atmospheric · theme: Refract (deal 2/3, seed omuryalcin-com-yal-isel-9754·be816976·2026-11-09·r0) · job: listen · draw: bba4f4
 * hero: Corridor · nav: floating pill · footer: mast · imagery: product sample in slot portre (9:16 reel frame), no photographs · signature: sun through a glazed window split by a prism into a slow spectral fan, falling around the headline · refract: glass/pool
 * axes: light/grotesk-sans/cool · posture: restrained · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R4 V4 · weakest: S, a personal page risks reading like any creator bio; the three stages carry his own rule (use, show, state the limit) with a real tool list and a real limit from his notes instead of claims */
/* Hallmark · waive 77 · the contact close is one head and one mailto link set at display size · the email address itself is the action this personal page ends on */
/* Hallmark · answered F7 · the nav is a floating pill by the draw, the reel avatar is a circle and its progress bar a track inside the built sample, the skip link is a control */
@import url("./tokens.css");
@import url("./base.css");

/* ---------- skip link ---------- */
.skip { position: absolute; left: var(--space-md); top: calc(-1 * var(--space-3xl)); z-index: var(--z-toast); padding: var(--space-xs) var(--space-md); border-radius: var(--radius-pill); background: var(--color-ink); color: var(--color-paper); }
.skip:focus-visible { top: var(--space-md); }

/* ---------- controls ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs);
  min-height: 48px; padding: 0 var(--space-lg);
  border: 0; border-radius: var(--radius-pill);
  background: var(--color-accent); color: var(--color-accent-ink);
  box-shadow: inset 0 1px 0 color-mix(in oklab, var(--color-light) 45%, transparent), var(--shadow-card);
  font: 500 var(--text-md)/1 var(--font-body); white-space: nowrap; text-decoration: none; cursor: pointer;
  transition: background-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out), box-shadow var(--dur-short) var(--ease-out);
}
.btn:hover { background: var(--color-accent-hi); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }
.btn--clear {
  background: color-mix(in oklab, var(--color-light) 82%, transparent); color: var(--color-ink);
  box-shadow: var(--edge-light), 0 0 0 1px var(--color-rule), var(--shadow-card);
}
.btn--clear:hover { background: var(--color-light); transform: translateY(-2px); box-shadow: var(--edge-light), 0 0 0 1px var(--color-rule), var(--shadow-cast); }
.btn--clear:active { transform: translateY(0); }
.btn--nav { min-height: 44px; padding: 0 var(--space-md); box-shadow: var(--edge-light), 0 0 0 1px var(--color-rule); }

/* ---------- floating pill nav ---------- */
.nav-wrap { position: fixed; inset: var(--space-md) 0 auto; z-index: var(--z-sticky-nav); display: flex; justify-content: center; padding-inline: var(--space-md); pointer-events: none; }
.nav {
  pointer-events: auto; display: flex; align-items: center; gap: var(--space-lg);
  width: 100%; max-width: 720px; min-height: 64px; padding: var(--space-2xs) var(--space-2xs) var(--space-2xs) var(--space-lg);
  border-radius: var(--radius-pill);
  background: color-mix(in oklab, var(--color-light) 86%, transparent);
  box-shadow: var(--edge-light), 0 0 0 1px var(--color-rule-2), var(--shadow-card);
}
.wordmark { font: 400 var(--text-lg)/1 var(--font-display); letter-spacing: var(--tracking-display); color: var(--color-ink); text-decoration: none; white-space: nowrap; }
.nav__links { display: flex; gap: var(--space-lg); margin: 0 0 0 auto; padding: 0; list-style: none; }
.nav__links a { font-size: var(--text-sm); font-weight: 500; color: var(--color-ink-2); text-decoration: none; white-space: nowrap; transition: color var(--dur-short) var(--ease-out); }
.nav__links a:hover { color: var(--color-accent); }
.wordmark:focus-visible, .nav__links a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; border-radius: var(--space-2xs); }

/* ---------- hero: corridor in the light ---------- */
.hero { position: relative; isolation: isolate; display: grid; align-items: center; min-height: 100dvh; padding-block: var(--space-4xl) var(--space-3xl); overflow: hidden; }
.light {
  position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 48% 44% at 50% 52%, transparent 30%, var(--color-ink) 100%);
          mask-image: radial-gradient(ellipse 48% 44% at 50% 52%, transparent 30%, var(--color-ink) 100%);
}
.hero__inner { display: flex; flex-direction: column; align-items: center; text-align: center; }
.hero h1 { max-width: 15ch; font-size: clamp(3rem, 6vw + 0.5rem, 6rem); line-height: 1.0; }
.hero__lead { margin-top: var(--space-lg); max-width: 40ch; color: var(--color-muted); }
.hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-sm); margin-top: var(--space-xl); }
.light-toggle {
  position: absolute; right: var(--gutter); bottom: var(--space-lg);
  min-height: 44px; padding: 0 var(--space-md); border: 0; border-radius: var(--radius-pill);
  background: color-mix(in oklab, var(--color-light) 80%, transparent); color: var(--color-ink-2);
  box-shadow: var(--edge-light), 0 0 0 1px var(--color-rule);
  font: 500 var(--text-sm)/1 var(--font-body); cursor: pointer;
  transition: color var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out);
}
.light-toggle:hover { color: var(--color-ink); background: var(--color-light); }
.light-toggle:active { transform: translateY(1px); }
.light-toggle:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
html:not(.js) .light-toggle { display: none; }

/* ---------- about statement ---------- */
.about { padding-block: var(--section-gap-s) var(--section-gap); }
.statement { max-width: 32ch; font: 300 clamp(2.25rem, 3.6vw + 0.5rem, 4rem)/1.1 var(--font-display); letter-spacing: var(--tracking-display); color: var(--color-ink); text-wrap: balance; }

/* ---------- method: three stages ---------- */
.method { padding-block: 0 var(--section-gap-l); }
.head-block { display: grid; gap: var(--space-md); margin-bottom: var(--space-2xl); }
.head-block .lead { color: var(--color-muted); }
.stages { margin: 0; padding: 0; list-style: none; counter-reset: stage; }
.stage {
  counter-increment: stage;
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-2xl) var(--gap-columns);
  align-items: center; padding-block: var(--space-2xl); border-top: var(--rule-hair) solid var(--color-rule);
}
.stage__text { display: grid; gap: var(--space-md); align-content: center; }
.stage h3 { font-size: var(--text-3xl); line-height: 1.05; }
.stage h3::before { content: counter(stage) ". "; color: var(--color-muted); }
.stage__text p { color: var(--color-ink-2); max-width: 38ch; }

.clear { background: color-mix(in oklab, var(--color-light) 80%, transparent); border-radius: var(--radius-card); box-shadow: var(--edge-light), var(--shadow-card); }

/* stage 1: the tools on the table */
.tools { margin: 0; padding: var(--space-xs) var(--space-xl); }
.tools > div { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--space-md); align-items: baseline; padding-block: var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule); }
.tools > div:first-child { border-top: 0; }
.tools dt { font: 400 var(--text-xl)/1.1 var(--font-display); letter-spacing: var(--tracking-display); color: var(--color-ink); }
.tools dd { margin: 0; color: var(--color-ink-2); }

/* stage 2: the reel frame (slot) */
.reel { justify-self: center; width: min(100%, 340px); aspect-ratio: 9 / 16; margin: 0; padding: var(--space-sm); box-shadow: var(--edge-light), var(--shadow-cast); }
.reel > img { border-radius: var(--radius-card); outline: 1px solid color-mix(in oklab, var(--color-ink) 8%, transparent); outline-offset: -1px; }
.reel__frame {
  position: relative; display: flex; align-items: flex-end; height: 100%; padding: var(--space-lg);
  border-radius: var(--radius-inner);
  background: linear-gradient(170deg, var(--color-shade), var(--color-shade-2));
}
.reel__sub { width: 100%; padding: var(--space-md); border-radius: var(--radius-inner); background: var(--color-ink); color: var(--color-paper); font: 500 var(--text-xl)/1.2 var(--font-body); text-align: center; text-wrap: balance; }
.reel__top { position: absolute; inset: var(--space-md) var(--space-md) auto; display: flex; align-items: center; gap: var(--space-xs); color: var(--color-ink); font-size: var(--text-sm); font-weight: 500; }
.reel__avatar { width: 28px; height: 28px; border-radius: var(--radius-pill); background: var(--color-light); box-shadow: var(--edge-light), 0 0 0 1px var(--color-shade-2); }
.reel__bar { position: absolute; left: var(--space-md); right: var(--space-md); bottom: var(--space-xs); height: 3px; border-radius: var(--radius-pill); background: color-mix(in oklab, var(--color-light) 55%, transparent); }
.reel__bar::before { content: ""; position: absolute; inset: 0 62% 0 0; border-radius: inherit; background: var(--color-light); }
.reel__sub b { font-weight: 500; color: var(--spec-2); }

/* stage 3: a limit, said plainly */
.limit { margin: 0; padding-left: var(--space-xl); border-left: 2px solid var(--color-accent); }
.limit p { max-width: 28ch; font: 300 var(--text-display-s)/1.08 var(--font-display); letter-spacing: var(--tracking-display); color: var(--color-ink); text-wrap: balance; }
.limit footer { margin-top: var(--space-lg); font-size: var(--text-sm); color: var(--color-muted); }

/* ---------- channels as lanes ---------- */
.channels { padding-block: var(--section-gap-s); background: var(--color-paper-2); }
.head-block--split { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; gap: var(--gap-columns); }
.lanes { margin: 0; padding: 0; list-style: none; }
.lane {
  position: relative; isolation: isolate;
  display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 3fr) minmax(0, 4fr) auto; gap: var(--gap-columns); align-items: center;
  min-height: 112px; padding-block: var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule);
}
.lane:last-child { border-bottom: var(--rule-hair) solid var(--color-rule); }
.lane__name { font: 400 var(--text-2xl)/1 var(--font-display); letter-spacing: var(--tracking-display); color: var(--color-ink); }
.lane__handle { font-weight: 500; color: var(--color-ink); overflow-wrap: anywhere; }
.lane__what { color: var(--color-ink-2); }
.lane__light {
  position: absolute; inset: 22% -2% 22% 18%; z-index: -1; border-radius: var(--radius-pill);
  background: linear-gradient(100deg, transparent, color-mix(in oklab, var(--spec-3) 34%, transparent) 30%, color-mix(in oklab, var(--color-light) 90%, transparent) 46%, color-mix(in oklab, var(--spec-2) 30%, transparent) 62%, transparent);
  filter: blur(14px); opacity: 0.9;
}

/* ---------- contact band ---------- */
.contact { padding-block: var(--section-gap) var(--section-gap-s); }
.contact__inner { display: grid; gap: var(--space-xl); justify-items: start; }
.contact h2 { max-width: 22ch; }
.contact__mail {
  font: 300 clamp(1.5rem, 7.2vw, 5.75rem)/1.05 var(--font-display); letter-spacing: var(--tracking-display); white-space: nowrap;
  color: var(--color-accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; transition: color var(--dur-short) var(--ease-out);
}
.contact__mail:hover { color: var(--color-accent-hi); text-decoration-thickness: 2px; }
.contact__mail:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 6px; border-radius: var(--space-2xs); }

/* ---------- mast footer ---------- */
.mast { padding-block: var(--space-3xl) var(--space-xl); border-top: var(--rule-hair) solid var(--color-rule); }
.mast__word { margin: 0; font: 300 clamp(3.5rem, 12vw, 11rem)/0.95 var(--font-display); letter-spacing: -0.045em; color: var(--color-ink); overflow-wrap: break-word; min-width: 0; }
.mast__row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-lg); margin-top: var(--space-xl); }
.mast__links { display: flex; flex-wrap: wrap; gap: var(--space-lg); margin: 0; padding: 0; list-style: none; }
.mast__links a { color: var(--color-ink-2); text-decoration: none; transition: color var(--dur-short) var(--ease-out); }
.mast__links a:hover { color: var(--color-accent); text-decoration: underline; }
.mast__links a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; border-radius: var(--space-2xs); }
.mast__legal { font-size: var(--text-sm); color: var(--color-muted); }

/* ---------- responsive ---------- */
@media (max-width: 60rem) {
  .stage { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .head-block--split { grid-template-columns: minmax(0, 1fr); }
  .lane { grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-xs) var(--space-md); }
  .lane__name { grid-column: 1; }
  .lane__handle { grid-column: 1; }
  .lane__what { grid-column: 1; }
  .lane .btn { grid-column: 2; grid-row: 1 / span 3; }
  .light-toggle { right: var(--space-md); }
}
@media (max-width: 40rem) {
  .nav__links { display: none; }
  .nav { justify-content: space-between; }
  .hero { padding-block: var(--space-4xl) var(--space-4xl); }
  .tools { padding: var(--space-2xs) var(--space-lg); }
  .tools > div { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xs); }
  .limit { padding-left: var(--space-lg); }
  .lane .btn { grid-column: 1; grid-row: auto; justify-self: start; margin-top: var(--space-xs); }
}

@media (prefers-reduced-motion: reduce) {
  .btn, .btn--clear, .light-toggle, .nav__links a, .mast__links a, .contact__mail { transition: none; }
  .btn--clear:hover, .btn:active, .light-toggle:active { transform: none; }
}