/* stefkal hub · direction: The dark room · type: Literata (Newsreader has no Greek) · palette: Soot and lime */
:root {
  --bg: #0f0f0f;
  --surface: #1a1a1a;
  --ink: #f0f0f0;
  --muted: #a3a3a3;
  --accent: #dafa9c;
  --accent-ink: #0f0f0f;
  --paper: #ffffff;

  --step-small: clamp(1rem, 0.97rem + 0.1vw, 1.0625rem);
  --step-body: clamp(1.0625rem, 1.02rem + 0.25vw, 1.25rem);
  --step-lead: clamp(1.375rem, 1.1rem + 1.1vw, 2.25rem);
  --step-head: clamp(2.25rem, 1.4rem + 3.4vw, 4.5rem);
  --step-display: clamp(3.5rem, 11vw, 10rem);

  --m: clamp(20px, 2.3vw, 32px);
  --gap: clamp(120px, 14vw, 200px);
  --ease: cubic-bezier(.2, .7, .2, 1);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Literata', Georgia, serif;
  font-optical-sizing: auto;
  font-size: var(--step-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
::selection { background: var(--accent); color: var(--accent-ink); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.button {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 22px;
  background: var(--accent); color: var(--accent-ink);
  font-size: var(--step-small); font-weight: 500; text-decoration: none;
  transition: transform .2s var(--ease), background-color .2s;
}
.button:hover { background: #e9ffbf; }
.button:active { transform: scale(.97); }

/* ---------- top bar ---------- */
.bar {
  position: absolute; inset: 0 0 auto; z-index: 5;
  display: flex; justify-content: space-between; align-items: baseline;
  padding: var(--m);
  font-size: var(--step-small);
}
.bar a { text-decoration: none; }
.bar__mark { font-size: var(--step-body); font-weight: 500; letter-spacing: -0.01em; }
.bar__nav { display: flex; gap: 28px; }
.bar__nav a { color: var(--muted); transition: color .2s; }
.bar__nav a:hover { color: var(--ink); }

/* ---------- hero: counter object, wide wordmark ---------- */
.hero {
  min-height: 100svh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 88px var(--m) 6svh;
  text-align: center;
}
.hero__object { width: min(31vw, 42svh * .8); }
.hero__screens { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--surface); }
.hero__screens img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: top;
  opacity: 0; transition: opacity 1.6s ease;
}
.hero__screens img.is-on { opacity: 1; }
.hero__screens img:first-child { opacity: 1; }
.js .hero__screens img:first-child:not(.is-on) { opacity: 0; }
.hero__wordmark { width: 72vw; height: auto; margin-top: 32px; }
.hero__wordmark text { fill: var(--ink); font-family: 'Literata', serif; font-size: 72px; font-weight: 300; }
.hero__title {
  margin-top: 20px; max-width: 22ch;
  font-size: var(--step-lead); font-weight: 400; line-height: 1.15; letter-spacing: -0.02em;
}
.hero__row {
  display: flex; align-items: center; justify-content: center; gap: 48px;
  margin-top: 28px; font-size: var(--step-small); color: var(--muted);
}
.hero__spec { min-width: 13em; text-decoration: none; }
.hero__row a.hero__spec:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.hero__row .hero__spec:first-child { text-align: right; transition: opacity .4s; }
.hero__row .hero__spec:last-child { text-align: left; }

/* ---------- work: title torn at the seam ---------- */
.work { position: relative; margin-top: clamp(48px, 6vw, 96px); }
.work__stage { position: relative; }
.work__heading {
  position: absolute; top: var(--m); left: var(--m); z-index: 3;
  font-size: var(--step-lead); font-weight: 400; letter-spacing: -0.02em;
}
.project { position: relative; height: 100svh; overflow: hidden; }
.pane { position: absolute; inset: 0; overflow: hidden; }
.pane img {
  position: absolute; left: 0; top: -10svh; width: 100%; height: calc(100% + 20svh);
  object-fit: cover; filter: brightness(var(--dim, .36)) saturate(.85);
  transform: translate3d(0, var(--pane, 0px), 0); will-change: transform;
}
.pane img { object-position: center top; }
.seam {
  position: absolute; left: 50%; top: 50%; z-index: 2; width: 100%;
  transform: translate(-50%, -50%);
  text-align: center; pointer-events: none;
}
.title {
  position: relative; display: grid;
  font-size: var(--step-display); font-weight: 600; line-height: .8; letter-spacing: -0.025em;
  text-transform: uppercase; color: var(--title, var(--ink));
  /* the heading's own box spans the halves' travel, so a torn half never reads as hidden under the picture */
  padding-block: 16svh; margin-block: -16svh;
}
.half { grid-area: 1 / 1; transform: translate3d(0, var(--half, 0px), 0); will-change: transform; }
.half--l { clip-path: inset(-20% 50% -20% 0); --half: calc(var(--off, 0) * -8svh); }
.half--r { clip-path: inset(-20% 0 -20% 50%); --half: calc(var(--off, 0) * 8svh); }
/* the landing page drifts as one piece; only the title tears */
.pane img { --pane: calc(var(--off, 0) * -6svh); }
.seam__foot { position: absolute; left: 0; right: 0; bottom: clamp(32px, 6svh, 64px); z-index: 2; text-align: center; padding: 0 var(--m); }
.seam__meta { font-size: var(--step-body); color: var(--ink); }
.seam__link {
  display: inline-flex; align-items: center; gap: .4em; min-height: 44px; margin-top: 4px;
  font-size: var(--step-body); color: var(--title); pointer-events: auto;
  text-underline-offset: 5px;
}
.seam__link span { transition: transform .2s var(--ease); }
.seam__link:hover span { transform: translateX(4px); }

/* pinned stage, only with script */
.js .work.is-pinned { height: calc(var(--count, 5) * 95svh + 100svh); }
.js .work.is-pinned .work__stage { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.js .work.is-pinned .project { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .45s ease, visibility 0s .45s; }
.js .work.is-pinned .project.is-on { opacity: 1; visibility: visible; transition: opacity .45s ease; }

/* ---------- how: drag through the stages ---------- */
.how {
  position: relative; margin-top: var(--gap);
  display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr auto;
  min-height: 88svh;
}
.how__text {
  grid-column: 1; grid-row: 1;
  padding: var(--m); padding-top: clamp(40px, 6vw, 80px);
}
.how__clause {
  max-width: 11em;
  font-size: var(--step-head); font-weight: 300; line-height: 1; letter-spacing: -0.035em;
  transition: opacity .2s;
}
.how__note { margin-top: 32px; max-width: 34ch; transition: opacity .2s; }
.how__ui {
  grid-column: 2; grid-row: 1 / 3;
  background: var(--surface);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px;
  padding: 64px var(--m) 140px;
}
.namefield { display: flex; flex-direction: column; gap: 6px; width: min(440px, 100%); font-size: var(--step-small); color: var(--muted); }
.namefield input {
  height: 48px; padding: 0 14px; border: 0; border-radius: 0;
  background: #262626; color: var(--ink); font: inherit; font-size: var(--step-body);
}
.namefield input:focus { outline: 2px solid var(--accent); outline-offset: 0; }

.browser { width: min(440px, 100%); background: #fff; color: #161616; font-family: system-ui, -apple-system, 'Segoe UI', sans-serif; }
.browser__bar {
  display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px;
  background: #ebebeb; font-size: 14px;
}
.browser__lock { color: #6b6b6b; opacity: 0; transition: opacity .2s; }
[data-stage="3"] .browser__lock { opacity: 1; }
.browser__url { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
.browser__demo { padding: 2px 8px; border-radius: 999px; background: #111; color: #fff; font-size: 12px; opacity: 0; transition: opacity .2s; }
[data-stage="1"] .browser__demo, [data-stage="2"] .browser__demo { opacity: 1; }
.browser__view { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.browser__view > div { position: absolute; inset: 0; padding: 28px; transition: opacity .2s; }
.notes { background: #fbf7e6; }
.notes__title { font-family: 'Literata', serif; font-size: 22px; font-weight: 500; }
.notes ul { margin-top: 14px; list-style: disc; padding-left: 20px; font-size: 15px; line-height: 1.9; }
.mini { display: flex; flex-direction: column; justify-content: flex-end; background: #f4efe6; }
.mini__name { font-family: 'Literata', serif; font-size: 34px; line-height: 1; letter-spacing: -0.03em; font-weight: 500; }
.mini__line { margin-top: 10px; font-size: 14px; color: #555; }
.mini__cta {
  align-self: flex-start; margin-top: 18px; padding: 10px 16px;
  background: #1c3d2e; color: #fff; font-size: 14px;
  transition: padding .25s var(--ease), font-size .25s var(--ease);
}
.mini__pin {
  position: absolute; top: 24px; right: 24px; padding: 8px 12px;
  background: #ffe55c; color: #111; font-size: 13px;
  opacity: 0; transform: rotate(-2deg); transition: opacity .2s;
}
[data-stage="2"] .mini__pin { opacity: 1; }
[data-stage="2"] .mini__cta, [data-stage="3"] .mini__cta { padding: 14px 22px; font-size: 16px; }
.browser [data-view] { opacity: 0; }
.browser[data-stage="0"] [data-view="0"],
.browser:not([data-stage="0"]) [data-view="1"] { opacity: 1; }

.how__slider {
  position: absolute; left: var(--m); right: var(--m); bottom: 28px; z-index: 2;
}
.how__slider input {
  -webkit-appearance: none; appearance: none; display: block;
  width: 100%; height: 32px; margin: 0; background: transparent; cursor: pointer;
}
.how__range { position: relative; }
.how__track { position: absolute; left: 0; right: 0; top: 12px; height: 8px; background: #3a3a3a; pointer-events: none; }
.how__track span { display: block; height: 100%; width: var(--fill, 0%); background: var(--ink); transition: width .2s var(--ease); }
.how__slider input { position: relative; }
.how__slider input::-webkit-slider-runnable-track { height: 8px; background: transparent; }
.how__slider input::-moz-range-track { height: 8px; background: transparent; }
.how__slider input::-webkit-slider-thumb { -webkit-appearance: none; width: 32px; height: 32px; margin-top: -12px; background: var(--accent); border: 0; border-radius: 0; transition: transform .15s; }
.how__slider input::-moz-range-thumb { width: 32px; height: 32px; background: var(--accent); border: 0; border-radius: 0; }
.how__slider input:active::-webkit-slider-thumb { transform: scale(1.12); }
.how__stops { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 10px; font-size: var(--step-small); color: var(--muted); }
.how__stops li { cursor: pointer; transition: color .2s; }
.how__stops li:nth-child(2) { text-align: center; transform: translateX(-16%); }
.how__stops li:nth-child(3) { text-align: center; transform: translateX(16%); }
.how__stops li:last-child { text-align: right; }
.how__stops li.is-on { color: var(--ink); }

/* ---------- contact: one field ---------- */
.contact { width: min(520px, 100% - 2 * var(--m)); margin: var(--gap) auto 160px; }
.contact__prompt { display: flex; flex-direction: column; font-size: var(--step-lead); font-weight: 500; line-height: 1.25; letter-spacing: -0.02em; }
.contact__prompt span:first-child { color: var(--muted); }
.field { position: relative; margin-top: 28px; }
.field input {
  width: 100%; height: 64px; padding: 0 64px 0 20px;
  border: 0; border-radius: 0; background: var(--paper); color: #111;
  font: inherit; font-size: var(--step-body);
}
.field input::placeholder { color: #6a6a6a; }
.field input:focus { outline: none; box-shadow: inset 0 0 0 2px #7fa23a; } /* taste-skill-ignore: focus ring, not a shadow at rest */
.field button {
  position: absolute; right: 10px; top: 10px; width: 44px; height: 44px;
  display: grid; place-items: center; border: 0; border-radius: 0;
  background: var(--accent); color: var(--accent-ink); cursor: pointer;
  transition: transform .15s var(--ease);
}
.field button:hover { transform: translateX(2px); }
.field button:active { transform: scale(.94); }
.contact__next { margin-top: 16px; font-size: var(--step-small); color: var(--muted); }
.contact__rows { margin-top: 72px; font-size: var(--step-small); }
.contact__rows div { display: grid; grid-template-columns: 7em 1fr; padding: 6px 0; }
.contact__rows dt { color: var(--muted); }

/* ---------- footer: name across the last photograph ---------- */
.foot { position: relative; height: 100svh; min-height: 560px; overflow: hidden; color: var(--paper); }
.foot__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 40% 55%; filter: brightness(.62); transform: scale(var(--zoom, 1.06)); }
.foot__top { position: relative; display: flex; justify-content: space-between; padding: var(--m); font-size: var(--step-body); }
.foot__top nav { display: flex; flex-direction: column; }
.foot__top a { text-decoration: none; }
.foot__top a:hover { text-decoration: underline; text-underline-offset: 4px; }
.foot__top p { text-align: right; }
.foot__bottom { position: absolute; left: var(--m); right: var(--m); bottom: 32px; }
.foot__mark { width: 100%; height: auto; }
.foot__mark text { fill: var(--paper); font-family: 'Literata', serif; font-size: 240px; font-weight: 300; letter-spacing: -0.04em; }
.foot__legal { margin-top: 16px; font-size: var(--step-small); max-width: 64ch; }

/* ---------- entrances ---------- */
.js [data-rise] { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: var(--d, 0ms); }
.js [data-rise].in { opacity: 1; transform: none; }

/* ---------- phone ---------- */
@media (max-width: 760px) {
  .bar__nav { gap: 16px; }
  .bar__nav a:not(:last-child) { display: none; }
  .hero { padding-top: 16svh; justify-content: flex-start; padding-bottom: 12svh; }
  .hero__object { width: 70vw; }
  .hero__wordmark { width: 100%; margin-top: 28px; }
  .hero__title { font-size: 6.6vw; max-width: none; }
  .hero__row { flex-direction: column; gap: 14px; width: 100%; }
  .hero__row .button { width: 100%; order: 0; }
  .hero__row .hero__spec { min-width: 0; text-align: center !important; }
  .hero__row .hero__spec:first-child { order: -1; }

  .title { font-size: 12.5vw; }
  /* phones show the site's own phone screenshot, whole and still: it was taken at 390×844 */
  .pane img { top: 0; height: 100%; object-fit: cover; object-position: center top; transform: none; }


  .how { grid-template-columns: 1fr; grid-template-rows: auto auto auto; min-height: 0; }
  .how__ui { grid-column: 1; grid-row: 1; padding: 40px var(--m); }
  .how__slider { position: static; grid-row: 3; padding: 40px var(--m) 0; }
  .how__slider input::-webkit-slider-thumb { width: 40px; height: 40px; margin-top: -16px; }
  .how__stops { grid-template-columns: 1fr 1fr; row-gap: 6px; }
  .how__stops li { text-align: left !important; transform: none !important; }
  .how__text { grid-row: 2; padding-top: 40px; }
  .how__clause { font-size: 9vw; }


  .contact__rows div { grid-template-columns: 1fr; gap: 2px; padding: 10px 0; }
  .foot { height: 88svh; }
  .foot__top { flex-direction: column; gap: 20px; }
  .foot__top p { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-rise] { transform: none; transition: opacity .4s; }
  .half, .pane img { transform: none !important; }
  .foot__photo { transform: none; }
}