@import url("tokens/import.css");

:root { --wrap: var(--container-max); }

html { scroll-behavior: smooth; }
body { overflow-x: hidden; }
img { display: block; max-width: 100%; }
strong { color: inherit; }

.wrap {
  width: min(100% - 48px, var(--wrap));
  margin-inline: auto;
}

.section {
  position: relative;
  padding-block: var(--space-7);
  border-top: 1px solid var(--border-hairline);
}

.paper {
  background: var(--surface-page);
  background-image:
    radial-gradient(circle at 18% 30%, rgba(52,42,28,.035) 0 1px, transparent 1.4px),
    radial-gradient(circle at 72% 66%, rgba(52,42,28,.025) 0 1px, transparent 1.2px);
  background-size: 17px 19px, 23px 29px;
  color: var(--text-body);
}

h1, h2 { text-wrap: balance; }
h1, h2, blockquote { font-family: "Bodoni 72", Didot, Georgia, serif; font-stretch: normal; letter-spacing: -.035em; }
h2 { font-size: clamp(34px, 3.25vw, 47px); font-weight: 700; line-height: .95; }

.eyebrow,
.section-number {
  display: flex;
  align-items: center;
  gap: 10px;
  font: var(--type-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
}

.eyebrow { color: var(--text-accent); }
.section-number { margin-bottom: var(--space-4); color: var(--text-accent); }
.eyebrow::before,
.section-number::after {
  content: "";
  width: 18px;
  height: 2px;
  background: currentColor;
}
.section-number::after { width: 54px; height: 1px; opacity: .5; }

.amber { color: var(--amber-500); }
.prose { display: grid; gap: var(--space-3); max-width: var(--measure-prose); }
.prose.compact { gap: var(--space-2); }
.lead { font-size: var(--size-title-3); line-height: var(--leading-tight); }
.caption { font-size: var(--size-caption); color: var(--text-muted); }

.button {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  min-width: 440px;
  min-height: 56px;
  padding: 12px var(--space-5);
  border: 0;
  border-radius: var(--radius-control);
  background: var(--amber-500);
  color: var(--black);
  font-family: var(--font-ui);
  font-size: var(--size-body-sm);
  font-weight: var(--weight-bold);
  text-decoration: none;
  transition: var(--transition-control);
}
.button:hover { color: var(--black); background: var(--amber-600); border-bottom-color: transparent; }
.button:active { background: var(--amber-700); }

.hero {
  position: relative;
  min-height: 710px;
  overflow: hidden;
  background: var(--black);
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--black) 0 30%, rgba(0,0,0,.82) 43%, rgba(0,0,0,.34) 66%, rgba(0,0,0,.06) 100%);
}
.hero-image {
  position: absolute;
  inset: 0 0 0 auto;
  width: 67%;
  height: 100%;
  object-fit: cover;
  object-position: 48% 43%;
}
.hero-notes {
  position: absolute;
  z-index: 2;
  top: 10%;
  right: max(4vw, calc((100vw - var(--wrap)) / 2));
  display: grid;
  gap: 7px;
  width: 220px;
  transform: rotate(-4deg);
  font-size: clamp(17px, 1.7vw, 24px);
  font-family: "Bradley Hand", "Segoe Print", cursive;
  color: rgba(255,255,255,.72);
}
.hero-notes span { width: max-content; padding-bottom: 3px; border-bottom: 1px solid rgba(255,255,255,.4); }
.hero-notes strong { margin: var(--space-3) 0 0 45px; padding: var(--space-3); border: 2px solid var(--amber-500); border-radius: 50%; color: var(--amber-500); font-weight: var(--weight-regular); }
.hero-grid { position: relative; z-index: 1; min-height: 710px; display: grid; align-items: center; }
.hero-copy { max-width: 620px; padding-block: var(--space-6); }
.brand { width: 112px; margin-bottom: 2px; }
.brand-tagline { margin-bottom: var(--space-5); font: var(--type-eyebrow); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--text-muted); }
.hero h1 { max-width: 21ch; font-size: clamp(48px, 4.8vw, 69px); font-weight: 700; line-height: .92; }
.hero-kicker { margin-top: var(--space-3); font-size: var(--size-title-3); font-weight: var(--weight-bold); line-height: var(--leading-tight); color: var(--text-display); }
.hero .prose { margin-top: var(--space-4); max-width: 51ch; gap: var(--space-2); font-size: var(--size-body-sm); line-height: 1.45; color: var(--text-body); }
.hero .button { margin-top: var(--space-4); }
.hero .caption { margin-top: var(--space-3); }

.grid-three { display: grid; grid-template-columns: 1fr .82fr 1fr; gap: var(--space-6); align-items: start; }
.grid-two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-7); align-items: start; }
.subhead { margin-top: var(--space-3); max-width: 19ch; font: var(--weight-regular) var(--size-title-1)/var(--leading-title) var(--font-ui); color: var(--text-display); }
.notes { display: grid; gap: var(--space-2); padding-top: var(--space-6); }
.notes p { padding-bottom: var(--space-2); border-bottom: 1px solid var(--border-hairline); font-size: var(--size-title-3); font-style: italic; color: var(--text-muted); }
.notes p, .case-note, .limits-note, .method-visual strong { font-family: "Bradley Hand", "Segoe Print", cursive; }
.notes.small { gap: 4px; padding-block: 8px; }
.notes.small p { padding-bottom: 4px; font-size: var(--size-body-sm); }

.case-study {
  min-height: 516px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: linear-gradient(90deg, rgba(0,0,0,.96) 0 34%, rgba(0,0,0,.72) 50%, rgba(0,0,0,.08) 78%), url("assets/photo-signal.png") center/cover no-repeat;
}
.case-copy { max-width: 500px; }
.case-note { position: absolute; top: 24%; right: 12%; transform: rotate(-5deg); font-size: clamp(24px, 3vw, 42px); font-style: italic; line-height: 1.15; text-align: center; color: rgba(255,255,255,.76); }
.case-copy .prose { margin-top: var(--space-5); color: var(--text-body); }
.case-copy .button { margin-top: var(--space-6); }

.method-intro { margin-top: var(--space-4); font-size: var(--size-body-sm); line-height: 1.45; }
.method { padding-block: 55px; }
.method-intro .button { margin-top: var(--space-3); }
.method-grid { grid-template-columns: 1.05fr .95fr .72fr; gap: var(--space-5); }
.signal-list { margin: var(--space-5) 0 0; }
.signal-list > div { display: grid; grid-template-columns: 150px 1fr; gap: var(--space-3); padding-block: 9px; border-top: 1px solid var(--border-hairline); }
.signal-list dt { font-family: var(--font-ui); font-weight: var(--weight-bold); color: var(--text-display); }
.signal-list dd { margin: 0; font-size: var(--size-body-sm); line-height: 1.4; color: var(--text-muted); }
.method-visual { min-height: 320px; display: flex; flex-direction: column; justify-content: space-between; padding: var(--space-5); background: linear-gradient(rgba(0,0,0,.32), rgba(0,0,0,.58)), url("assets/photo-limits.png") 24% 88%/cover no-repeat; color: var(--white); }
.method-visual strong { align-self: flex-end; transform: rotate(-4deg); font-size: var(--size-title-2); font-style: italic; font-weight: var(--weight-regular); line-height: 1.2; text-align: center; }
.method-visual span { max-width: 15ch; align-self: flex-end; font-size: var(--size-caption); text-align: right; }
.thesis { margin-top: var(--space-8); padding-top: var(--space-6); border-top: 1px solid var(--border-strong); }
.thesis p { font-size: var(--size-title-3); color: var(--text-muted); }
.thesis strong { display: block; margin-top: var(--space-2); font: var(--type-section); font-stretch: var(--display-stretch); color: var(--text-display); }

.opinions { padding-block: var(--space-6); background: var(--bone-50); }
.dash-list { margin: var(--space-4) 0 0; padding: 0; list-style: none; }
.dash-list li { position: relative; padding: 6px 0 6px var(--space-5); border-bottom: 1px solid var(--border-hairline); font-size: var(--size-body-sm); }
.dash-list li::before { content: "—"; position: absolute; left: 0; color: var(--text-accent); }
.deliverable { padding-top: var(--space-4); font-size: var(--size-body-sm); }
.deliverable ul { display: grid; gap: 6px; margin: var(--space-3) 0 0; padding-left: var(--space-5); }
.refusals { border-top: 3px solid var(--text-accent); background: var(--surface-card); }
.refusals p { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border-hairline); font-weight: var(--weight-semibold); }

.limits { display: grid; grid-template-columns: minmax(280px, 36%) 1fr; padding: 0; background: var(--ground-900); }
.limits-image { position: relative; min-height: 460px; background: url("assets/photo-limits.png") center/cover no-repeat; }
.limits-note { position: absolute; top: 16%; right: 8%; display: grid; gap: var(--space-2); transform: rotate(-3deg); font-style: italic; color: rgba(255,255,255,.72); }
.limits-note strong { max-width: 13ch; margin-top: var(--space-3); color: var(--amber-500); font-weight: var(--weight-semibold); }
.limits-content { max-width: 920px; padding: var(--space-7) var(--space-6); }
.limits-content h2 { max-width: 18ch; }
.limits-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: var(--space-5); border-top: 1px solid var(--border-strong); border-left: 1px solid var(--border-hairline); }
.limits-grid p { min-height: 104px; padding: var(--space-3); border-right: 1px solid var(--border-hairline); border-bottom: 1px solid var(--border-hairline); font-size: var(--size-body-sm); line-height: 1.4; color: var(--text-body); }
.limit-thesis { margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--amber-500); font-size: var(--size-body); font-weight: var(--weight-bold); color: var(--amber-500); }
.limits-content .muted { margin-top: var(--space-3); font-size: var(--size-caption); line-height: 1.4; color: var(--text-muted); }
.limits-content .button { margin-top: var(--space-4); }

.founder { height: 300px; padding-block: var(--space-5); overflow: hidden; }
.founder-grid { display: grid; grid-template-columns: 1fr 1fr .72fr; gap: var(--space-6); align-items: center; }
.founder-bio { margin-top: var(--space-3); font-size: var(--size-caption); line-height: 1.45; }
.founder-grid > div:nth-child(2) { font-size: var(--size-micro); line-height: 1.3; }
blockquote { margin: 8px 0; font-size: var(--size-title-3); font-weight: 700; line-height: var(--leading-title); color: var(--text-display); }
.dark-caption { color: var(--text-muted); }
.founder-photo { position: relative; margin: 0; overflow: hidden; border-radius: var(--radius-card); background: var(--ground-900); }
.founder-photo img { width: 100%; height: 290px; object-fit: cover; object-position: 50% 18%; filter: grayscale(1) contrast(1.05); }
.founder-photo figcaption { position: absolute; inset: auto 0 0; display: grid; padding: var(--space-4); background: rgba(0,0,0,.8); color: var(--white); font-size: var(--size-caption); }

.final-cta { min-height: 315px; display: flex; align-items: center; padding-block: var(--space-7); background: var(--black); border-top: 1px solid var(--border-hairline); }
.final-cta .wrap { flex: 1; }
.final-grid { display: grid; grid-template-columns: 1.25fr .9fr .55fr; gap: var(--space-7); align-items: center; }
.final-grid h2 { margin-block: var(--space-3); font-size: var(--size-display-3); }
.final-grid > div:first-child > p:last-child { max-width: 54ch; color: var(--text-muted); }
.final-grid .caption { margin-top: var(--space-3); }
.final-brand { padding-left: var(--space-6); border-left: 1px solid var(--border-strong); }
.final-brand img { width: 150px; margin-bottom: var(--space-3); }
.final-brand p { font-size: var(--size-caption); color: var(--text-muted); }

@media (min-width: 650px) and (max-width: 700px) {
  body { min-width: 0; height: 1600px; overflow: hidden; }
  main {
    position: absolute;
    inset: 0 auto auto 0;
    width: 1547px;
    --wrap: 1328px;
    transform: scale(.4311570782);
    transform-origin: top left;
  }
}

@media (min-width: 521px) {
  .explanation {
    z-index: 2;
    margin: 0 0 -14px;
    clip-path: polygon(0 2%, 23% 0, 56% 1.5%, 78% 0, 100% 2%, 100% 98%, 76% 100%, 42% 98.5%, 18% 100%, 0 98%);
    padding-block: calc(var(--space-7) + 14px);
  }
}

@media (max-width: 649px) {
  .grid-three, .grid-two, .founder-grid, .final-grid { grid-template-columns: 1fr; gap: var(--space-7); }
  .method-visual { min-height: 260px; }
  .hero::after { background: linear-gradient(90deg, rgba(0,0,0,.94), rgba(0,0,0,.58)); }
  .hero-image { width: 100%; opacity: .62; }
  .hero-notes, .case-note { display: none; }
  .notes, .deliverable { padding-top: 0; }
  .limits { grid-template-columns: 1fr; }
  .limits-image { min-height: 340px; }
  .limits-note { top: 12%; right: 8%; }
  .final-brand { padding: var(--space-6) 0 0; border-left: 0; border-top: 1px solid var(--border-strong); }
  .founder { height: auto; overflow: visible; }
  .final-cta { min-height: 0; }
  .button { min-width: 0; }
}

@media (max-width: 520px) {
  .wrap { width: min(100% - 32px, var(--wrap)); }
  .section { padding-block: var(--space-8); }
  .hero, .hero-grid { min-height: 760px; }
  .brand { margin-bottom: var(--space-7); }
  .hero h1 { font-size: 46px; }
  .hero-copy { padding-block: var(--space-7); }
  .button { width: 100%; }
  .signal-list > div { grid-template-columns: 1fr; gap: var(--space-1); }
  .case-study { min-height: 700px; background-position: 58% center; }
  .limits-content { padding: var(--space-8) var(--space-4); }
  .limits-grid { grid-template-columns: 1fr; }
  .limits-grid p { min-height: 0; }
  .founder-photo { max-width: 360px; }
}