:root {
  --ink: #171717;
  --light: #f4f0e8;
  --light-deep: #e5ddcf;
  --red: #e44736;
  --soft-ink: #5c574e;
  --display: "Iowan Old Style", "Baskerville", "Times New Roman", serif;
  --body: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

* { box-sizing: border-box; }
html { background: var(--light); scroll-behavior: smooth; }
body { min-width: 320px; margin: 0; color: var(--ink); background: var(--light); font-family: var(--body); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
h1, h2, p { margin: 0; }
canvas { display: block; }

:focus-visible { outline: 3px solid var(--red); outline-offset: 5px; }
.skip-link { position: fixed; z-index: 10; top: 1rem; left: 1rem; padding: .8rem 1rem; color: var(--ink); background: var(--light); font-weight: 700; transform: translateY(-180%); }
.skip-link:focus { transform: translateY(0); }
.page-shell { width: min(100% - 3rem, 1280px); margin-inline: auto; }

.field { position: relative; isolation: isolate; min-height: max(760px, 100svh); overflow: clip; color: var(--light); background: var(--ink); }
.field::after { position: absolute; z-index: -2; inset: 0; content: ""; pointer-events: none; opacity: .12; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.76' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E"); }
.site-header { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; padding-top: max(1.35rem, env(safe-area-inset-top)); }
.brand { display: inline-flex; align-items: center; gap: .62rem; color: var(--light); font-size: .8rem; font-weight: 760; letter-spacing: -.015em; }
.brand-mark { width: 1.72rem; height: 1.72rem; fill: var(--red); }
.header-link { display: inline-flex; align-items: center; gap: .35rem; min-height: 44px; color: rgba(244, 240, 232, .8); font-size: .88rem; font-weight: 600; transition: color 180ms var(--ease-out); }
.header-link span { color: var(--red); font-size: 1.1rem; transition: transform 180ms var(--ease-out); }
@media (hover: hover) {
  .header-link:hover { color: var(--light); }
  .header-link:hover span { transform: translate(2px, -2px); }
}

.signal-field { position: absolute; z-index: -1; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.field-copy { display: grid; align-content: end; min-height: calc(max(760px, 100svh) - 4.5rem); padding-top: clamp(11rem, 24vh, 18rem); padding-bottom: clamp(3.5rem, 7vw, 6.5rem); }
.field-note { width: max-content; max-width: 100%; margin-bottom: 1.1rem; padding: .43rem .64rem .48rem; color: #121212; background: var(--red); font-size: .77rem; font-weight: 760; line-height: 1.1; }
h1, h2 { text-wrap: balance; }
.field h1 { max-width: 1100px; color: var(--light); font-family: var(--display); font-size: clamp(3.1rem, 8.4vw, 6rem); font-weight: 400; letter-spacing: -.035em; line-height: .96; }
.field-bottom { display: grid; grid-template-columns: minmax(250px, 420px) auto; gap: 1.5rem 4rem; align-items: end; margin-top: clamp(2.1rem, 4vw, 3.5rem); }
.field-bottom > p { max-width: 31rem; color: rgba(244, 240, 232, .77); font-size: clamp(1rem, 1.45vw, 1.16rem); line-height: 1.55; text-wrap: pretty; }
.field-actions { display: flex; flex-wrap: wrap; gap: .8rem; align-items: stretch; }
.idea-action { display: grid; grid-template-columns: 1fr auto; gap: .16rem 1rem; min-width: 248px; min-height: 52px; padding: .62rem .85rem .6rem 1rem; color: var(--light); background: var(--red); font-size: .94rem; font-weight: 760; line-height: 1.1; transition: color 180ms var(--ease-out), background-color 180ms var(--ease-out); }
.idea-action span { grid-column: 1 / -1; color: #121212; font-size: .67rem; font-weight: 720; }
.idea-action svg { align-self: end; width: 1.1rem; fill: none; stroke: currentColor; stroke-width: 1.8; transition: transform 180ms var(--ease-out); }
@media (hover: hover) {
  .idea-action:hover { color: var(--ink); background: var(--light); }
  .idea-action:hover svg { transform: translate(3px, -3px); }
}
.channel-action, .closing__action { display: inline-flex; align-items: center; justify-content: space-between; gap: 1.7rem; min-width: 202px; min-height: 52px; padding: .7rem .85rem .7rem 1rem; color: var(--ink); background: var(--light); font-size: .94rem; font-weight: 760; transition: color 180ms var(--ease-out), background-color 180ms var(--ease-out); }
.channel-action svg { width: 1.1rem; fill: none; stroke: var(--red); stroke-width: 1.8; transition: transform 180ms var(--ease-out); }
@media (hover: hover) {
  .channel-action:hover { color: var(--light); border-color: var(--red); background: var(--red); }
  .channel-action:hover svg { stroke: currentColor; transform: translate(3px, -3px); }
}
.field-index { position: absolute; right: max(1.5rem, env(safe-area-inset-right)); bottom: 1.6rem; color: rgba(244, 240, 232, .43); font-size: .68rem; font-weight: 690; letter-spacing: .04em; }

.products { position: relative; overflow: clip; padding: clamp(5.5rem, 10vw, 9rem) 0; background: var(--light-deep); }
.products::after { position: absolute; inset: 0; content: ""; pointer-events: none; opacity: .055; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.78' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E"); }
.products__heading, .product-grid { position: relative; z-index: 1; }
.products__heading { display: grid; grid-template-columns: minmax(185px, .34fr) minmax(0, 1fr); gap: 2rem clamp(3rem, 9vw, 9rem); align-items: start; }
.products__heading p { padding-top: .6rem; color: var(--red); font-size: .72rem; font-weight: 780; letter-spacing: .075em; }
.products h2 { max-width: 740px; font-family: var(--display); font-size: clamp(2.7rem, 5.4vw, 5.1rem); font-weight: 400; letter-spacing: -.035em; line-height: .97; }
.product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(.85rem, 2vw, 1.5rem); margin-top: clamp(3rem, 6vw, 5rem); }
.product-card { position: relative; display: flex; flex-direction: column; min-height: 410px; overflow: hidden; padding: clamp(1.35rem, 2.5vw, 2rem); color: var(--ink); background: var(--light); transition: transform 220ms var(--ease-out), background-color 220ms var(--ease-out); }
.product-card__kind { position: relative; z-index: 2; font-size: .75rem; font-weight: 760; letter-spacing: -.012em; }
.product-card__title { position: relative; z-index: 2; max-width: 15rem; margin-top: auto; font-family: var(--display); font-size: clamp(2.25rem, 3.5vw, 3.45rem); font-weight: 400; letter-spacing: -.04em; line-height: .96; }
.product-card__copy { position: relative; z-index: 2; max-width: 15rem; margin-top: 1rem; font-size: .9rem; line-height: 1.45; }
.product-card__arrow { position: absolute; z-index: 3; right: 1.35rem; bottom: 1.25rem; font-size: 2rem; line-height: 1; transition: transform 220ms var(--ease-out); }
.product-card--telegram { color: var(--light); background: var(--red); }
.product-card--telegram .product-card__kind { color: #1d1715; }
.product-card--telegram .product-card__copy { color: rgba(244, 240, 232, .77); }
.product-card--generator { background: #f6f3eb; }
.product-card--generator::after { position: absolute; right: -6%; top: 8%; width: 73%; height: 73%; content: ""; border: 1px solid rgba(23, 23, 23, .16); border-radius: 50%; }
.product-card__diagram { position: absolute; top: 20%; right: 9%; width: 58%; height: 31%; }
.product-card__diagram::before, .product-card__diagram::after { position: absolute; top: 50%; left: 10%; width: 72%; height: 1px; content: ""; background: var(--red); transform: rotate(-24deg); transform-origin: left; }
.product-card__diagram::after { transform: rotate(22deg); }
.product-card__diagram i, .product-card__diagram b { position: absolute; display: block; width: .72rem; height: .72rem; border-radius: 50%; background: var(--ink); }
.product-card__diagram i:nth-child(1) { top: 5%; left: 6%; }.product-card__diagram i:nth-child(2) { top: 45%; left: 38%; background: var(--red); }.product-card__diagram i:nth-child(3) { right: 5%; bottom: 5%; }.product-card__diagram b { top: 45%; right: 8%; width: 1.3rem; height: 1.3rem; border: 3px solid var(--red); background: transparent; }
.product-card--table { color: var(--light); background: #394849; }
.product-card--table .product-card__kind { color: #d2b269; }.product-card--table .product-card__copy { color: rgba(244, 240, 232, .73); }
.product-card__table { position: absolute; top: 12%; right: 4%; width: 70%; height: auto; fill: none; stroke: rgba(244, 240, 232, .45); stroke-width: 1.4; }
.product-card__table-mark { stroke: #d2b269; stroke-width: 3; stroke-linecap: square; }
@media (hover: hover) { .product-card:hover { transform: translateY(-5px); }.product-card:hover .product-card__arrow { transform: translate(3px, -3px); }.product-card--telegram:hover { background: #cb392a; }.product-card--table:hover { background: #304143; } }

.thesis { position: relative; overflow: clip; padding-top: clamp(6.5rem, 12vw, 12rem); background: var(--light); }
.thesis::before { position: absolute; top: clamp(2rem, 5vw, 5rem); right: 9vw; width: min(34vw, 460px); height: 2px; content: ""; background: var(--red); transform: rotate(-19deg); transform-origin: right; }
.thesis__top { display: grid; grid-template-columns: minmax(190px, .34fr) minmax(0, 1fr); gap: 2rem clamp(3rem, 10vw, 10rem); align-items: start; }
.thesis__aside { max-width: 17rem; padding-top: .65rem; color: var(--soft-ink); font-size: .92rem; line-height: 1.55; }
.thesis h2 { max-width: 900px; font-family: var(--display); font-size: clamp(2.8rem, 6vw, 5.7rem); font-weight: 400; letter-spacing: -.036em; line-height: .94; }
.practice { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 4vw, 4rem); margin-top: clamp(5rem, 11vw, 10rem); padding-bottom: clamp(6rem, 12vw, 12rem); }
.practice p { display: grid; gap: .7rem; padding-top: 1rem; color: var(--soft-ink); border-top: 2px solid var(--ink); font-size: 1rem; line-height: 1.5; }
.practice p:nth-child(2) { border-top-color: var(--red); }
.practice p:nth-child(3) { border-top-color: var(--light-deep); }
.practice span { color: var(--ink); font-size: 1.3rem; font-weight: 760; letter-spacing: -.025em; }

.author { position: relative; background: var(--light-deep); }
.author::after { position: absolute; inset: 0; content: ""; pointer-events: none; opacity: .06; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E"); }
.author__grid { position: relative; z-index: 1; display: grid; grid-template-columns: 7rem minmax(0, 1fr) minmax(190px, .33fr); gap: 2rem clamp(3rem, 8vw, 8rem); padding-top: clamp(5.5rem, 11vw, 10rem); padding-bottom: clamp(5.5rem, 11vw, 10rem); }
.author__stamp { color: var(--red); font-family: var(--display); font-size: 2.75rem; line-height: .67; letter-spacing: -.1em; }
.author h2 { max-width: 760px; font-family: var(--display); font-size: clamp(2.65rem, 5vw, 5rem); font-weight: 400; letter-spacing: -.038em; line-height: .94; }
.author__copy { max-width: 29rem; margin-top: 1.75rem; font-size: 1.04rem; line-height: 1.55; text-wrap: pretty; }
.author__number { align-self: end; margin-bottom: .35rem; color: var(--soft-ink); font-size: .94rem; line-height: 1.55; }

.closing { position: relative; isolation: isolate; min-height: 660px; overflow: clip; color: var(--light); background: var(--red); }
.closing::before { position: absolute; z-index: -1; inset: 0; content: ""; opacity: .1; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.65'/%3E%3C/svg%3E"); }
.closing__content { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 950px) 1fr; align-content: start; gap: 1.4rem 2rem; min-height: 660px; padding-top: clamp(5rem, 10vw, 8.5rem); padding-bottom: 3.5rem; }
.closing__prelude { grid-column: 1 / -1; color: rgba(23, 23, 23, .78); font-size: .86rem; font-weight: 760; }
.closing h2 { max-width: 950px; color: var(--light); font-family: var(--display); font-size: clamp(3rem, 6.7vw, 6rem); font-weight: 400; letter-spacing: -.038em; line-height: .9; }
.closing__action { align-self: end; justify-self: start; min-width: 215px; color: var(--light); background: var(--ink); }
.closing__action span { color: var(--red); font-size: 1.15rem; transition: transform 180ms var(--ease-out); }
@media (hover: hover) {
  .closing__action:hover { color: var(--ink); background: var(--light); }
  .closing__action:hover span { transform: translate(2px, -2px); }
}
.closing small { grid-column: 1 / -1; align-self: end; margin-top: auto; color: rgba(244, 240, 232, .72); font-size: .72rem; }
.closing__word { position: absolute; z-index: 0; right: max(1.5rem, calc((100vw - 1280px) / 2)); bottom: .75rem; margin: 0; color: rgba(23, 23, 23, .15); font-family: var(--display); font-size: clamp(7rem, 20vw, 18rem); letter-spacing: -.08em; line-height: .62; pointer-events: none; }

@media (max-width: 860px) {
  .field-bottom, .thesis__top, .author__grid, .products__heading { grid-template-columns: 1fr; }
  .field-bottom { gap: 1.8rem; }
  .field-actions { justify-content: start; }
  .thesis__aside { max-width: 23rem; padding-top: 0; }
  .author__grid { gap: 1.35rem; }
  .products__heading { gap: 1.1rem; }
  .products__heading p { padding-top: 0; }
  .author__number { margin-top: 1rem; }
  .closing__content { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .page-shell { width: min(100% - 2.25rem, 1280px); }
  .field { min-height: max(680px, 100svh); }
  .site-header { padding-top: max(1rem, env(safe-area-inset-top)); }
  .brand { gap: .45rem; font-size: .75rem; }
  .brand-mark { width: 1.38rem; height: 1.38rem; }
  .header-link { font-size: .82rem; }
  .field-copy { min-height: calc(max(680px, 100svh) - 3.6rem); padding-top: 12rem; padding-bottom: 3rem; }
  .field-note { margin-bottom: .85rem; font-size: .7rem; }
  .field h1 { font-size: clamp(2.75rem, 13.3vw, 4.55rem); line-height: .98; }
  .field-bottom { margin-top: 1.65rem; }
  .field-bottom > p { font-size: .96rem; }
  .field-actions { display: grid; }
  .idea-action, .channel-action { width: 100%; }
  .channel-action, .closing__action { min-height: 50px; }
  .field-index { right: 1.15rem; bottom: 1rem; font-size: .59rem; }
  .products { padding-top: 5rem; padding-bottom: 5rem; }
  .products h2 { font-size: clamp(2.55rem, 11.5vw, 3.6rem); }
  .product-grid { grid-template-columns: 1fr; gap: .8rem; margin-top: 3rem; }
  .product-card { min-height: 335px; }.product-card__title { font-size: 2.8rem; }.product-card__diagram { top: 15%; width: 46%; }.product-card__table { top: 10%; width: 52%; }
  .thesis { padding-top: 5.25rem; }
  .thesis::before { top: 2rem; width: 35vw; }
  .thesis h2 { font-size: clamp(2.55rem, 12vw, 3.6rem); line-height: .96; }
  .practice { grid-template-columns: 1fr; gap: 1.6rem; margin-top: 4rem; padding-bottom: 5.5rem; }
  .practice p { grid-template-columns: 7.5rem 1fr; gap: 1rem; font-size: .94rem; }
  .practice span { font-size: 1.08rem; }
  .author h2 { font-size: clamp(2.45rem, 11.8vw, 3.6rem); }
  .author__stamp { font-size: 2.1rem; }
  .author__copy { margin-top: 1.25rem; font-size: .98rem; }
  .closing { min-height: 610px; }
  .closing__content { min-height: 610px; padding-top: 4rem; }
  .closing h2 { font-size: clamp(2.75rem, 12.5vw, 4.25rem); line-height: .92; }
  .closing__word { right: 1rem; bottom: .8rem; font-size: 8.2rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .001ms !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
}