:root {
  color-scheme: light;
  --paper: #f5f0e6;
  --paper-deep: #ece4d6;
  --ink: #1d1a19;
  --muted: #625d57;
  --rule: rgba(41, 35, 29, 0.22);
  --violet: #4b2d70;
  --violet-soft: #d8c9e5;
  --green: #164b39;
  --green-soft: #cbd9cb;
  --vermilion: #a9462f;
  --max: 1240px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: "Be Vietnam Pro", sans-serif; line-height: 1.65; }
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .2; mix-blend-mode: multiply; 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='.78' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.12'/%3E%3C/svg%3E"); z-index: 20; }
a { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-family: "Fraunces", serif; font-weight: 600; line-height: 1.03; }
h1 { font-size: clamp(3.2rem, 6.7vw, 6.65rem); letter-spacing: -.045em; }
h2 { font-size: clamp(2.35rem, 4.5vw, 4.75rem); letter-spacing: -.035em; }
h3 { font-size: 2rem; }
.skip-link { position: fixed; top: 8px; left: 8px; transform: translateY(-160%); z-index: 100; background: var(--ink); color: #fff; padding: 10px 14px; }
.skip-link:focus { transform: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.site-header { min-height: 78px; padding: 16px max(24px, calc((100vw - var(--max)) / 2)); border-bottom: 1px solid var(--rule); display: grid; grid-template-columns: auto 1fr auto; gap: 36px; align-items: center; position: relative; z-index: 5; }
.brand { text-decoration: none; display: inline-flex; gap: 12px; align-items: center; font-family: "Fraunces", serif; font-size: 1.35rem; }
.brand-mark { width: 28px; height: 28px; display: grid; grid-template-columns: 1fr 1fr; gap: 3px; transform: rotate(45deg); }
.brand-mark i { display: block; background: var(--violet); border-radius: 2px 8px 2px 8px; }
.site-header nav:not(.mobile-nav) { display: flex; justify-content: flex-end; gap: clamp(20px, 3vw, 42px); }
.site-header nav a { text-decoration: none; font-size: .82rem; font-weight: 600; }
.site-header nav a:hover, .site-header nav a:focus-visible { color: var(--violet); }
.button { min-height: 46px; padding: 12px 20px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid transparent; border-radius: 4px; text-decoration: none; font-weight: 700; font-size: .88rem; }
.button-ink { color: #fff; background: var(--violet); }
.button-ink:hover, .button-ink:focus-visible { background: #32194e; }
.menu-toggle, .mobile-nav { display: none; }
.hero { max-width: var(--max); min-height: min(720px, calc(100vh - 78px)); margin: auto; padding: clamp(72px, 9vw, 132px) 24px 80px; display: grid; grid-template-columns: .78fr 1.22fr; gap: clamp(48px, 7vw, 96px); align-items: center; }
.hero-copy > p { max-width: 530px; font-size: clamp(1.05rem, 1.4vw, 1.3rem); color: var(--muted); }
.hero-actions { display: flex; gap: 24px; align-items: center; margin-top: 34px; }
.text-link { text-underline-offset: 5px; font-weight: 600; }
.hero-studio { min-height: 480px; position: relative; display: grid; grid-template-columns: .75fr 1.35fr .82fr; gap: 18px; align-items: center; }
.hero-studio::before, .hero-studio::after { content: ""; position: absolute; height: 1px; border-top: 1px dashed #7c6b83; width: 80%; left: 10%; z-index: -1; }
.hero-studio::before { top: 31%; }.hero-studio::after { bottom: 31%; }
.studio-sheet, .studio-canvas { background: rgba(255,255,255,.28); border: 1px solid #81776e; min-height: 320px; padding: 48px 18px 20px; position: relative; }
.studio-canvas { min-height: 430px; border: 3px solid var(--violet); box-shadow: 10px 10px 0 rgba(75,45,112,.1); }
.sheet-label { position: absolute; top: 0; left: -1px; right: -1px; padding: 9px 12px; background: var(--violet); color: white; font-size: .7rem; text-align: center; text-transform: uppercase; letter-spacing: .09em; font-weight: 700; }
.skill-sheet .sheet-label { background: var(--green); }
.swatches { display: flex; gap: 6px; margin-bottom: 25px; }.swatches i { width: 24px; height: 24px; background: var(--violet); }.swatches i:nth-child(2){background:#a9462f}.swatches i:nth-child(3){background:#d2a879}.swatches i:nth-child(4){background:#164b39}.swatches i:nth-child(5){background:#ddd3bf}
.type-sample { margin: 0; font: 3.2rem/1 "Fraunces", serif; }.studio-sheet small { display: block; color: var(--muted); font-size: .66rem; }.component-lines { margin-top: 32px; }.component-lines i { display: block; width: 80%; height: 12px; margin: 11px 0; background: var(--violet); }.component-lines i:nth-child(2){width:48%;border-radius:99px}.component-lines i:nth-child(3){height:1px;background:#716a64}
.skill-sheet { display: flex; flex-direction: column; gap: 7px; }.skill-sheet strong { margin-top: 12px; text-transform: uppercase; font-size: .67rem; }.canvas-layout { padding: 34px 22px; display: grid; grid-template-columns: 1fr 1.4fr; gap: 16px; }.canvas-layout b { font: 4rem/1 "Fraunces", serif; }.canvas-layout i { display: block; height: 36px; border-bottom: 1px solid #857b73; }.canvas-layout .canvas-hero { grid-row: span 2; height: 140px; background: linear-gradient(145deg, transparent 0 44%, #c8c0b5 45% 65%, #968b9f 66%); }.studio-result { position: absolute; bottom: 0; left: 50%; transform: translate(-50%, 50%); width: max-content; max-width: 90%; padding: 10px 22px; color: white; background: var(--violet); font-size: .72rem; text-transform: uppercase; letter-spacing: .09em; }
.formula { border-block: 1px solid var(--rule); padding: 34px max(24px, calc((100vw - var(--max)) / 2)); display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: 28px; text-align: center; }
.formula-part strong { display: block; font: 2rem/1.2 "Fraunces", serif; color: var(--violet); }.formula-part span { font-family: "Fraunces", serif; }.skill-color strong { color: var(--green); }.result-color strong, .result-color span { color: var(--vermilion); }.formula-symbol { font: 3rem/1 "Fraunces", serif; }
.section-shell { max-width: var(--max); margin: auto; padding: 110px 24px; }.section-index { text-transform: uppercase; letter-spacing: .14em; font-size: .73rem; font-weight: 700; color: var(--violet); }
.heart { display: grid; grid-template-columns: .75fr 1.25fr; gap: 80px; align-items: center; }.section-copy p { color: var(--muted); max-width: 500px; }.callout-line { padding-top: 20px; border-top: 1px solid var(--rule); font-weight: 700; color: var(--violet) !important; }
.heart-map { display: grid; grid-template-columns: .8fr 1.2fr; gap: 46px; align-items: center; }.rings { aspect-ratio: 1; position: relative; }.rings i { position: absolute; inset: calc(var(--n, 0) * 8%); border-radius: 50%; background: rgba(75,45,112,.12); }.rings i:nth-child(1){--n:0}.rings i:nth-child(2){--n:1;background:rgba(75,45,112,.18)}.rings i:nth-child(3){--n:2;background:rgba(75,45,112,.26)}.rings i:nth-child(4){--n:3;background:rgba(75,45,112,.4)}.rings i:nth-child(5){--n:4;background:var(--violet);display:grid;place-items:center;color:var(--paper);font-size:2.2rem}.heart-map ol { list-style: none; padding: 0; margin: 0; }.heart-map li { display: flex; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--rule); }.heart-map li b { color: var(--violet); }.heart-map li strong, .heart-map li small { display: block; }.heart-map li small { color: var(--muted); }
.skills-section { border-top: 1px solid var(--rule); }.wide-heading { max-width: 850px; }.wide-heading > p:last-child { color: var(--muted); }.skill-rail { margin-top: 48px; display: grid; grid-template-columns: 70px repeat(4, 1fr) 1.1fr; border: 1px solid #8a8179; }.rail-title { background: var(--green); color: white; writing-mode: vertical-rl; transform: rotate(180deg); text-align: center; padding: 18px; text-transform: uppercase; font-weight: 700; letter-spacing: .12em; }.skill-rail article { padding: 24px 18px; border-right: 1px solid var(--rule); }.skill-rail article b, .skill-rail article span { display: block; }.skill-rail article b { font-size: .84rem; }.skill-rail article span { min-height: 40px; color: var(--muted); font-size: .68rem; }.skill-rail > p { padding: 24px; align-self: center; font-size: .84rem; }.skill-rail i { display: block; height: 120px; margin-top: 20px; border: 1px solid #7d756e; background: linear-gradient(135deg, rgba(75,45,112,.13), transparent 55%), repeating-linear-gradient(0deg, transparent 0 17px, rgba(30,30,30,.15) 18px); }
.layers-section { border-block: 1px solid var(--rule); background: rgba(255,255,255,.18); }.layer-flow { list-style: none; padding: 0; margin: 52px 0 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; }.layer-flow li { position: relative; padding: 48px 14px 20px; min-height: 190px; border: 1px solid var(--rule); }.layer-flow li:not(:last-child)::after { content: "→"; position: absolute; right: -16px; top: 50%; background: var(--paper); z-index: 1; }.layer-flow b { position: absolute; top: 12px; left: 12px; width: 24px; height: 24px; display: grid; place-items: center; color: white; background: var(--violet); border-radius: 50%; font-size: .7rem; }.layer-flow strong, .layer-flow span { display: block; }.layer-flow span { margin-top: 10px; color: var(--muted); font-size: .72rem; }.layer-flow li:nth-child(4) b { background: var(--green); }.layer-flow li:nth-child(5) b { background: var(--vermilion); }.layer-output { border-color: var(--green) !important; }
.formats { display: grid; grid-template-columns: .55fr 1.45fr; gap: 70px; align-items: center; }.formats-copy p:not(.section-index) { color: var(--muted); }.format-stage { display: grid; grid-template-columns: 1fr auto 1fr .8fr; align-items: center; gap: 18px; }.poster-preview, .video-preview { aspect-ratio: 4/5; padding: 24px; border: 1px solid #706962; display: flex; flex-direction: column; justify-content: space-between; background: linear-gradient(145deg, transparent 42%, #d9a079 43% 57%, #4b2d70 58%); }.poster-preview small, .video-preview small { text-transform: uppercase; letter-spacing: .1em; }.poster-preview h3, .video-preview h3 { font-size: clamp(1.6rem, 3vw, 3rem); }.poster-preview span, .video-preview span { font-size: .7rem; text-transform: uppercase; }.video-preview { color: #f8f0df; background: linear-gradient(145deg, #1d1a19 42%, #a9462f 43% 62%, #4b2d70 63%); }.video-preview button { align-self: center; width: 52px; height: 52px; border: 1px solid #fff; border-radius: 50%; color: #fff; background: rgba(0,0,0,.3); }.format-arrow { font: 2rem "Fraunces", serif; }.format-stage aside { padding: 24px 18px; border: 1px dashed var(--vermilion); color: var(--vermilion); }.format-stage aside strong { text-transform: uppercase; font-size: .7rem; letter-spacing: .1em; }.format-stage aside p { color: var(--ink); font-size: .76rem; margin-bottom: 0; }
.compare { border-block: 1px solid var(--rule); background: rgba(255,255,255,.18); }.centered { margin: auto; text-align: center; }.compare-grid { margin-top: 46px; display: grid; grid-template-columns: 1fr auto 1fr; gap: 32px; align-items: center; }.compare-grid article { padding: 40px; border: 1px solid var(--rule); }.compare-grid article:first-child h3 { color: var(--violet); }.compare-grid article:last-child h3 { color: var(--green); }.compare-lead { font-style: italic; }.compare-grid li { margin: 9px 0; color: var(--muted); }.versus { font: 1.5rem "Fraunces", serif; }.compare-conclusion { margin: 34px 0 0; text-align: center; color: var(--vermilion); font-weight: 600; }
.workflow-line { list-style: none; padding: 0; margin: 52px 0 0; display: grid; grid-template-columns: repeat(6, 1fr); border-block: 1px solid var(--rule); }.workflow-line li { min-height: 220px; padding: 52px 18px 24px; position: relative; border-right: 1px solid var(--rule); }.workflow-line li:last-child { border-right: 0; }.workflow-line b { position: absolute; top: 14px; left: 18px; color: var(--violet); font: 1.6rem "Fraunces", serif; }.workflow-line strong, .workflow-line span { display: block; }.workflow-line span { margin-top: 12px; color: var(--muted); font-size: .74rem; }
.finale { padding-top: 40px; display: grid; grid-template-columns: .8fr 1.2fr; gap: 30px; }.checklist { padding: 34px; border: 1px solid var(--rule); }.checklist h2 { font-size: 2rem; }.checklist ul { padding-left: 20px; }.checklist li { margin: 8px 0; font-size: .84rem; }.final-cta { min-height: 320px; padding: 46px; display: grid; grid-template-columns: auto 1fr; gap: 20px 30px; align-items: center; background: var(--violet); color: white; }.final-cta h2 { font-size: clamp(2.4rem, 4vw, 4rem); }.final-cta p { color: #ded2e8; max-width: 600px; }.final-cta .button { grid-column: 2; justify-self: start; }.botanical { font-size: 3rem; }.button-paper { color: var(--violet); background: var(--paper); }.button-paper:hover, .button-paper:focus-visible { background: #fff; }
footer { max-width: var(--max); margin: 0 auto; padding: 28px 24px 40px; border-top: 1px solid var(--rule); display: flex; justify-content: space-between; gap: 24px; font-size: .78rem; } footer a { font-weight: 700; }
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .65s ease, transform .65s ease; }.reveal.is-visible { opacity: 1; transform: none; }
/* Keep the first meaningful screen immediately readable; lower sections still reveal on scroll. */
.hero .reveal { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; }.reveal { opacity: 1; transform: none; transition: none; } }
@media (max-width: 980px) {
  .site-header { grid-template-columns: 1fr auto; }.site-header nav:not(.mobile-nav), .header-cta { display: none; }.menu-toggle { display: block; border: 1px solid var(--rule); background: transparent; padding: 10px 14px; font: inherit; }.mobile-nav { position: absolute; top: 78px; left: 0; right: 0; padding: 18px 24px; background: var(--paper); border-bottom: 1px solid var(--rule); }.mobile-nav:not([hidden]) { display: grid; gap: 14px; }
  .hero { grid-template-columns: 1fr; padding-top: 80px; }.hero-studio { min-height: 420px; }.heart, .formats { grid-template-columns: 1fr; }.heart-map { max-width: 800px; }.skill-rail { grid-template-columns: 56px repeat(2, 1fr); }.skill-rail article:nth-of-type(2) { border-right: 0; }.skill-rail > p { grid-column: 2 / -1; }.layer-flow, .workflow-line { grid-template-columns: repeat(3, 1fr); }.format-stage { grid-template-columns: 1fr auto 1fr; }.format-stage aside { grid-column: 1 / -1; }.finale { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .site-header { min-height: 68px; padding-inline: 18px; }.brand { font-size: 1.12rem; }.mobile-nav { top: 68px; }
  .hero { min-height: auto; padding: 62px 18px 70px; gap: 58px; }.hero-actions { align-items: flex-start; flex-direction: column; }.hero-studio { min-height: 600px; grid-template-columns: 1fr 1fr; gap: 12px; align-content: center; }.studio-canvas { grid-column: 1 / -1; grid-row: 1; min-height: 300px; }.studio-sheet { min-height: 260px; }.studio-result { font-size: .56rem; padding-inline: 10px; bottom: -4px; }.formula { grid-template-columns: 1fr; gap: 12px; }.formula-symbol { transform: rotate(90deg); font-size: 2rem; }
  .section-shell { padding: 76px 18px; }.heart { gap: 50px; }.heart-map { grid-template-columns: 1fr; }.rings { max-width: 300px; width: 82%; margin: auto; }.skill-rail { grid-template-columns: 44px 1fr; }.skill-rail article { border-right: 0; border-bottom: 1px solid var(--rule); }.skill-rail > p { grid-column: 2; }.layer-flow, .workflow-line { grid-template-columns: 1fr; }.layer-flow li { min-height: 150px; }.layer-flow li:not(:last-child)::after { content: "↓"; right: 50%; top: auto; bottom: -18px; }.workflow-line li { min-height: 155px; border-right: 0; border-bottom: 1px solid var(--rule); }.format-stage { grid-template-columns: 1fr; }.format-arrow { transform: rotate(90deg); justify-self: center; }.format-stage aside { grid-column: auto; }.compare-grid { grid-template-columns: 1fr; }.versus { text-align: center; }.compare-grid article { padding: 28px 22px; }.finale { padding-top: 20px; }.checklist, .final-cta { padding: 28px 22px; }.final-cta { grid-template-columns: 1fr; }.final-cta .button { grid-column: auto; }.botanical { display: none; } footer { flex-direction: column; padding-inline: 18px; }
}