@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:wght@400;500;700&family=Manrope:wght@400;500;600;700;800&family=Newsreader:opsz,wght@6..72,400;6..72,500;6..72,600&display=swap');

:root {
  --ink: #151515;
  --muted: #77746d;
  --paper: #f3f0eb;
  --line: rgba(21, 21, 21, .16);
  --accent: #c8ff3d;
  --sans: "Manrope", "PingFang SC", "Microsoft YaHei", sans-serif;
  --body: "DM Sans", "PingFang SC", "Microsoft YaHei", sans-serif;
  --mono: "DM Mono", "SFMono-Regular", Consolas, monospace;
  --serif: "Newsreader", "Songti SC", "STSong", serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; color: var(--ink); background: var(--paper); font-family: var(--body); line-height: 1.55; }
a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }
::selection { color: var(--ink); background: var(--accent); }
.skip-link { position: absolute; top: -48px; left: 20px; z-index: 10; padding: 10px 14px; background: var(--ink); color: var(--paper); }
.skip-link:focus { top: 12px; }
.container { width: min(1180px, calc(100% - 48px)); margin-inline: auto; }
.site-nav { min-height: 82px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font: 500 12px/1 var(--mono); letter-spacing: .08em; }
.brand-mark { display: grid; width: 28px; height: 28px; place-items: center; border: 1.5px solid currentColor; border-radius: 50%; font: 500 15px/1 var(--sans); letter-spacing: 0; }
.nav-links { display: flex; align-items: center; gap: clamp(18px, 3vw, 40px); font-size: 13px; }
.nav-links a { position: relative; color: var(--muted); transition: color .2s ease; }
.nav-links a:hover, .nav-links a:focus-visible, .nav-links a.is-active { color: inherit; }
.nav-links a.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -8px; height: 2px; background: currentColor; }
.nav-status { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font: 400 10px/1 var(--mono); letter-spacing: .08em; }
.nav-status i { width: 7px; height: 7px; display: inline-block; border-radius: 50%; background: #61c95b; }
.eyebrow { margin: 0; color: var(--muted); font: 500 11px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 20px; min-height: 46px; padding: 0 18px; border: 1px solid currentColor; font-size: 13px; transition: transform .2s ease, background .2s ease, color .2s ease; }
.btn:hover, .btn:focus-visible { transform: translateY(-3px); }
.btn-dark { color: #f4f1eb; background: #151515; border-color: #151515; }
.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 32px; }
.section-heading h2, .guide-intro h2 { margin: 16px 0 0; font: 500 clamp(35px, 5vw, 66px)/.98 var(--sans); letter-spacing: -.06em; }
.section-note { max-width: 320px; margin: 0; color: var(--muted); font-size: 13px; }

/* Selector */
.theme-selector { --ink: #191918; --muted: #77756f; --paper: #f2f0eb; --line: rgba(25,25,24,.17); background: var(--paper); }
.selector-nav { border-bottom: 1px solid var(--line); }
.selector-hero { min-height: 600px; display: grid; grid-template-columns: 1.02fr .98fr; align-items: center; gap: 50px; padding-top: 72px; padding-bottom: 86px; }
.selector-hero-copy { max-width: 590px; }
.selector-hero h1 { margin: 25px 0 26px; font: 600 clamp(56px, 8.4vw, 112px)/.89 var(--sans); letter-spacing: -.09em; }
.selector-hero h1 span { color: #7d7b73; }
.selector-lead { max-width: 410px; margin: 0 0 30px; color: var(--muted); font-size: 15px; }
.selector-hero-art { position: relative; min-height: 390px; overflow: hidden; background: #d8d6ce; }
.selector-art-grid { position: absolute; inset: 0; opacity: .33; background-image: linear-gradient(rgba(25,25,24,.32) 1px, transparent 1px), linear-gradient(90deg, rgba(25,25,24,.32) 1px, transparent 1px); background-size: 32px 32px; }
.selector-art-card { position: absolute; display: grid; place-items: center; text-align: center; box-shadow: 10px 12px 0 rgba(25,25,24,.9); }
.selector-art-card-a { top: 65px; left: 52px; width: 152px; height: 195px; background: #151515; color: #f2f0eb; font: 500 37px/1 var(--mono); transform: rotate(-8deg); }
.selector-art-card-b { right: 45px; bottom: 39px; width: 170px; height: 130px; background: var(--accent); color: #151515; font: 700 24px/.9 var(--sans); letter-spacing: -.08em; transform: rotate(8deg); }
.selector-art-ring { position: absolute; right: 24%; top: 18%; width: 190px; height: 190px; border: 1px solid rgba(25,25,24,.75); border-radius: 50%; }
.selector-art-ring::after { content: ""; position: absolute; inset: 25px; border: 1px solid rgba(25,25,24,.45); border-radius: 50%; }
.selector-hero-art p { position: absolute; right: 32px; top: 27px; margin: 0; font: 500 12px/1.1 var(--mono); letter-spacing: .08em; }
.selector-hero-art p span { display: block; margin-top: 10px; font-size: 24px; }
.templates-section { padding-bottom: 118px; }
.choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 54px 24px; margin-top: 48px; }
.choice-card { min-width: 0; }
.choice-preview { position: relative; display: block; overflow: hidden; aspect-ratio: 1.57 / 1; }
.preview-arrow { position: absolute; right: 14px; bottom: 12px; display: grid; width: 37px; height: 37px; place-items: center; border-radius: 50%; background: rgba(255,255,255,.9); color: #151515; font-size: 18px; opacity: 0; transform: translate(-5px, 5px); transition: opacity .2s ease, transform .2s ease; }
.choice-preview:hover .preview-arrow, .choice-preview:focus-visible .preview-arrow { opacity: 1; transform: translate(0, 0); }
.choice-info { padding-top: 17px; }
.choice-info > div:first-child { display: flex; align-items: baseline; gap: 11px; }
.choice-info h3 { margin: 0; font: 600 22px/1.1 var(--sans); letter-spacing: -.04em; }
.choice-number { color: var(--muted); font: 500 11px var(--mono); }
.choice-info p { max-width: 520px; min-height: 44px; margin: 10px 0 14px; color: var(--muted); font-size: 13px; }
.choice-tags { display: flex; flex-wrap: wrap; gap: 7px; }
.choice-tags span { padding: 5px 9px; border: 1px solid var(--line); color: var(--muted); font: 400 10px var(--mono); }
.guide-section { display: grid; grid-template-columns: .8fr 1.2fr; gap: 80px; padding: 78px 0 115px; border-top: 1px solid var(--line); }
.guide-intro h2 { font-size: clamp(35px, 4.5vw, 58px); }
.guide-intro h2 span { color: var(--muted); }
.guide-list { border-top: 1px solid var(--line); }
.guide-row { display: grid; grid-template-columns: 1fr 1.12fr .9fr; gap: 16px; align-items: center; padding: 17px 0; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 12px; }
.guide-row b { color: var(--ink); font-weight: 500; }
.guide-row span:last-child { text-align: right; }
.selector-footer { display: flex; justify-content: space-between; gap: 20px; padding: 22px 0 28px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; }
.selector-footer p { margin: 0; }
.selector-footer a { color: var(--ink); }

/* Shared miniature previews */
.mini-editorial, .mini-noir, .mini-brutal, .mini-journal { position: absolute; inset: 0; overflow: hidden; }
.mini-editorial { padding: 18px 20px; color: #181817; background: #e6e5df; font-family: var(--sans); }
.mini-editorial-bar, .mini-noir-bar, .mini-brutal-bar, .mini-journal-bar { display: flex; justify-content: space-between; align-items: center; font: 500 8px var(--mono); letter-spacing: .06em; }
.mini-editorial-copy { position: absolute; left: 20px; bottom: 26px; }
.mini-editorial-copy small, .mini-noir-copy small, .mini-brutal-copy small, .mini-journal-copy small { display: block; font: 500 7px var(--mono); letter-spacing: .08em; }
.mini-editorial-copy strong { display: block; margin-top: 8px; font: 600 32px/.85 var(--sans); letter-spacing: -.09em; }
.mini-editorial-copy em { color: #77756f; font-style: normal; }
.mini-editorial-block { position: absolute; right: 35px; bottom: 38px; width: 105px; height: 140px; background: #c4ff3c; transform: rotate(12deg); }
.mini-editorial-index { position: absolute; top: 50%; right: 20px; color: #77756f; font: 8px var(--mono); transform: rotate(90deg); }
.mini-noir { padding: 18px 20px; color: #f4f5f6; background: #080a10; font-family: var(--sans); }
.mini-noir-bar { color: #aeb1bc; }
.mini-noir-bar b { color: #f4f5f6; font-family: var(--sans); font-size: 10px; letter-spacing: .06em; }
.mini-noir-bar b span { color: #9c78ff; }
.mini-noir-copy { position: absolute; left: 20px; bottom: 25px; z-index: 1; }
.mini-noir-copy small { color: #8c8e99; }
.mini-noir-copy strong { display: block; margin-top: 7px; font: 700 29px/.9 var(--sans); letter-spacing: -.08em; }
.mini-noir-copy i { color: #aa87ff; font-style: normal; }
.mini-noir-orb { position: absolute; right: 38px; top: 32px; width: 170px; height: 170px; border-radius: 50%; background: radial-gradient(circle at 30% 25%, #f2ddff 0, #a678ff 18%, #4c3d9a 44%, #101421 70%); box-shadow: 0 0 64px rgba(161, 116, 255, .35); }
.mini-noir-orb::before { content: ""; position: absolute; inset: 35px -18px; border: 1px solid rgba(205,186,255,.55); border-radius: 50%; transform: rotate(-22deg); }
.mini-noir-chip { position: absolute; right: 20px; bottom: 25px; padding: 8px 10px; border: 1px solid rgba(255,255,255,.2); color: #e5d9ff; font: 8px var(--mono); }
.mini-brutal { padding: 18px 20px; color: #171716; background: #f2ec57; font-family: var(--sans); }
.mini-brutal-bar { border-bottom: 2px solid #171716; padding-bottom: 8px; }
.mini-brutal-bar b { font-size: 11px; letter-spacing: -.08em; }
.mini-brutal-bar span { font-size: 7px; }
.mini-brutal-copy { position: absolute; left: 20px; bottom: 26px; }
.mini-brutal-copy strong { display: block; margin-top: 9px; font: 800 34px/.83 var(--sans); letter-spacing: -.1em; }
.mini-brutal-copy u { text-decoration-thickness: 5px; text-decoration-color: #f25a31; text-underline-offset: 1px; }
.mini-brutal-sticker { position: absolute; top: 55px; right: 35px; display: grid; width: 110px; height: 110px; place-items: center; text-align: center; background: #f25a31; border: 2px solid #171716; border-radius: 50%; box-shadow: 5px 5px #171716; font: 800 17px/.8 var(--sans); transform: rotate(11deg); }
.mini-brutal-bottom { position: absolute; right: 20px; bottom: 19px; font: 7px var(--mono); }
.mini-journal { padding: 18px 20px; color: #493f36; background: #dfd2c2; font-family: var(--sans); }
.mini-journal-bar { color: #88796c; }
.mini-journal-bar b { color: #493f36; font: 500 14px var(--serif); }
.mini-journal-copy { position: absolute; left: 20px; bottom: 28px; z-index: 1; }
.mini-journal-copy small { color: #88796c; }
.mini-journal-copy strong { display: block; margin-top: 8px; font: 500 31px/.85 var(--serif); letter-spacing: -.07em; }
.mini-journal-copy i { color: #a36d55; font-style: normal; }
.mini-journal-portrait { position: absolute; right: 30px; top: 48px; width: 145px; height: 168px; overflow: hidden; background: #a97861; border-radius: 49% 49% 8px 8px; transform: rotate(7deg); }
.mini-journal-portrait::before { content: ""; position: absolute; top: 25px; left: 39px; width: 67px; height: 82px; border-radius: 48% 48% 44% 44%; background: #e1ad8b; }
.mini-journal-portrait::after { content: ""; position: absolute; left: 23px; right: 23px; bottom: -28px; height: 95px; border-radius: 50% 50% 0 0; background: #5b6152; }
.mini-journal-line { position: absolute; left: 20px; right: 20px; bottom: 18px; border-top: 1px solid rgba(73,63,54,.4); }

/* Editorial template */
.theme-editorial { --ink: #171717; --muted: #7c7b75; --paper: #f4f3ef; --line: rgba(23,23,23,.17); --acid: #c4ff3c; background: var(--paper); }
.editorial-nav { border-bottom: 1px solid var(--line); }
.editorial-hero { display: grid; grid-template-columns: 1.2fr .8fr; gap: 72px; align-items: end; padding-top: 104px; padding-bottom: 110px; }
.editorial-title { max-width: 800px; margin: 26px 0 30px; font: 500 clamp(62px, 9vw, 126px)/.84 var(--sans); letter-spacing: -.105em; }
.editorial-title em { color: var(--muted); font-style: normal; }
.editorial-hero-description { max-width: 385px; margin: 0 0 29px; color: var(--muted); font-size: 14px; }
.editorial-note { align-self: stretch; display: flex; flex-direction: column; justify-content: space-between; min-height: 300px; padding: 22px; border: 1px solid var(--line); background: #e8e7e1; }
.editorial-note-top { display: flex; justify-content: space-between; color: var(--muted); font: 10px var(--mono); }
.editorial-note h2 { max-width: 240px; margin: auto 0 17px; font: 500 37px/.95 var(--sans); letter-spacing: -.08em; }
.editorial-note p { max-width: 250px; margin: 0; color: var(--muted); font-size: 12px; }
.editorial-note-mark { align-self: flex-end; display: grid; width: 63px; height: 63px; place-items: center; border: 1px solid currentColor; border-radius: 50%; font: 20px var(--mono); }
.editorial-work { padding-bottom: 122px; }
.editorial-work .section-heading { padding-bottom: 25px; border-bottom: 1px solid var(--line); }
.editorial-work h2 { margin: 0; font: 500 23px var(--mono); letter-spacing: -.04em; }
.editorial-work .section-heading p { max-width: 310px; }
.editorial-project-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 50px 24px; margin-top: 30px; }
.editorial-project { min-width: 0; }
.editorial-project:nth-child(2) { margin-top: 120px; }
.editorial-project:nth-child(3) { grid-column: 1 / -1; display: grid; grid-template-columns: 1.15fr .85fr; gap: 24px; align-items: end; }
.editorial-project:nth-child(3) .project-visual { min-height: 330px; }
.project-visual { position: relative; display: flex; min-height: 470px; overflow: hidden; align-items: flex-end; padding: 24px; }
.project-visual::after { content: "↗"; position: absolute; top: 20px; right: 20px; display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid currentColor; border-radius: 50%; font-size: 20px; }
.visual-nova { color: #e8e7e1; background: #292b26; }
.visual-nova::before { content: "NOVA"; position: absolute; top: 37%; left: 12%; color: var(--acid); font: 700 clamp(64px, 10vw, 154px)/.8 var(--sans); letter-spacing: -.13em; transform: rotate(-90deg); transform-origin: left top; }
.visual-nova .visual-shape { position: absolute; top: 72px; right: 25%; width: 160px; height: 300px; border: 1px solid rgba(196,255,60,.7); border-radius: 90px; transform: rotate(35deg); }
.visual-nova .visual-shape::after { content: ""; position: absolute; inset: 22px 22px 22px 45px; border: 1px solid rgba(196,255,60,.4); border-radius: 80px; }
.visual-kinetic { color: #20201e; background: #d6d1c5; }
.visual-kinetic::before { content: ""; position: absolute; right: -45px; bottom: -75px; width: 340px; height: 340px; border: 30px solid #f25b38; border-radius: 50%; }
.visual-kinetic::after { color: #20201e; }
.visual-kinetic .visual-shape { position: absolute; top: 72px; left: 22%; width: 110px; height: 260px; background: #20201e; transform: skewY(-25deg) rotate(19deg); }
.visual-kinetic .visual-shape::after { content: ""; position: absolute; top: 34px; left: 27px; width: 55px; height: 190px; background: #d6d1c5; }
.visual-mono { color: #1a1a19; background: #c4ff3c; }
.visual-mono::before { content: "S"; position: absolute; top: -57px; right: 7%; font: 800 430px/.9 var(--sans); letter-spacing: -.2em; }
.visual-mono .visual-shape { position: absolute; left: 10%; bottom: 21%; width: 70%; border-top: 1px solid #1a1a19; transform: rotate(-13deg); }
.project-visual-label { position: relative; z-index: 1; font: 500 11px var(--mono); }
.project-meta { display: flex; justify-content: space-between; gap: 15px; padding-top: 14px; font: 11px var(--mono); }
.project-meta span:last-child { color: var(--muted); }
.editorial-bottom { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding: 24px 0 70px; border-top: 1px solid var(--line); }
.editorial-bottom h2 { max-width: 480px; margin: 0; font: 500 clamp(36px, 5vw, 70px)/.88 var(--sans); letter-spacing: -.09em; }
.editorial-bottom h2 span { color: var(--muted); }
.editorial-bottom-copy { display: flex; flex-direction: column; justify-content: space-between; gap: 28px; }
.editorial-bottom-copy p { max-width: 350px; margin: 0; color: var(--muted); font-size: 14px; }
.editorial-footer { display: flex; justify-content: space-between; padding: 24px 0 30px; border-top: 1px solid var(--line); color: var(--muted); font: 11px var(--mono); }

/* Noir template */
.theme-noir { --noir-bg: #080a10; --noir-surface: #10131c; --noir-text: #f5f3f7; --noir-muted: #9295a1; --noir-line: rgba(245,243,247,.15); --violet: #a477ff; color: var(--noir-text); background: var(--noir-bg); font-family: var(--body); }
.theme-noir::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .18; background-image: radial-gradient(rgba(255,255,255,.7) .55px, transparent .55px); background-size: 5px 5px; mix-blend-mode: soft-light; }
.noir-nav { border-bottom: 1px solid var(--noir-line); }
.theme-noir .brand { color: var(--noir-text); }
.theme-noir .brand-mark { border-color: var(--violet); color: var(--violet); }
.theme-noir .nav-links a, .theme-noir .nav-status { color: var(--noir-muted); }
.theme-noir .nav-links a:hover, .theme-noir .nav-links a:focus-visible, .theme-noir .nav-links a.is-active { color: var(--noir-text); }
.theme-noir .nav-links a.is-active::after { background: var(--violet); }
.theme-noir .nav-status i { background: #a477ff; box-shadow: 0 0 10px #a477ff; }
.noir-hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 50px; align-items: center; min-height: 680px; padding-top: 74px; padding-bottom: 90px; }
.noir-hero-copy { position: relative; z-index: 1; }
.noir-hero .eyebrow { color: var(--noir-muted); }
.noir-title { max-width: 690px; margin: 25px 0 26px; font: 600 clamp(60px, 8.6vw, 120px)/.86 var(--sans); letter-spacing: -.095em; }
.noir-title i { color: var(--violet); font-style: normal; }
.noir-lead { max-width: 395px; margin: 0 0 30px; color: var(--noir-muted); font-size: 14px; }
.noir-hero .btn { border-color: var(--noir-line); }
.noir-btn { color: var(--noir-text); background: transparent; }
.noir-orbit-stage { position: relative; min-height: 500px; display: grid; place-items: center; }
.noir-orbit-stage::before { content: ""; position: absolute; width: 70%; aspect-ratio: 1; border: 1px solid var(--noir-line); border-radius: 50%; }
.noir-orbit-stage::after { content: ""; position: absolute; width: 92%; aspect-ratio: 1; border: 1px solid rgba(164,119,255,.16); border-radius: 50%; transform: rotate(44deg) scaleY(.35); }
.noir-sphere { position: relative; z-index: 1; width: min(390px, 75vw); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 28% 23%, #f5d8ff 0, #c28fff 12%, #8d5ee5 29%, #30245e 57%, #15152a 74%, #080a10 75%); box-shadow: -20px -20px 100px rgba(166,125,255,.14), 20px 30px 100px rgba(103,67,204,.25); }
.noir-sphere::before, .noir-sphere::after { content: ""; position: absolute; left: -18%; width: 136%; height: 38%; border: 1px solid rgba(215,195,255,.65); border-radius: 50%; transform: rotate(-21deg); }
.noir-sphere::before { top: 27%; }
.noir-sphere::after { top: 37%; border-color: rgba(215,195,255,.2); transform: rotate(-21deg) scaleX(.88); }
.noir-orbit-tag { position: absolute; z-index: 2; right: 9%; bottom: 10%; padding: 10px 12px; color: #d8c6ff; border: 1px solid rgba(164,119,255,.42); background: rgba(17,18,31,.7); font: 10px var(--mono); }
.noir-selected { display: grid; grid-template-columns: .72fr 1.28fr; gap: 70px; align-items: end; padding: 28px 0 100px; border-top: 1px solid var(--noir-line); }
.noir-selected h2 { margin: 0; font: 500 14px var(--mono); color: var(--noir-muted); }
.noir-selected-copy { max-width: 615px; }
.noir-selected-copy p { margin: 0; font: 500 clamp(28px, 4vw, 53px)/1.04 var(--sans); letter-spacing: -.075em; }
.noir-selected-copy p span { color: var(--violet); }
.noir-projects { padding-bottom: 105px; }
.noir-section-head { display: flex; justify-content: space-between; align-items: end; padding-bottom: 20px; border-bottom: 1px solid var(--noir-line); }
.noir-section-head h2 { margin: 0; font: 500 22px var(--mono); }
.noir-section-head p { margin: 0; color: var(--noir-muted); font: 11px var(--mono); }
.noir-project-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 14px; }
.noir-project-card { position: relative; min-height: 335px; padding: 18px; overflow: hidden; border: 1px solid var(--noir-line); background: linear-gradient(145deg, rgba(255,255,255,.07), rgba(255,255,255,.015)); }
.noir-project-card:hover { border-color: rgba(164,119,255,.66); }
.noir-project-number { display: flex; justify-content: space-between; color: var(--noir-muted); font: 10px var(--mono); }
.noir-project-card h3 { position: absolute; left: 18px; bottom: 45px; margin: 0; font: 500 30px/.92 var(--sans); letter-spacing: -.08em; }
.noir-project-card p { position: absolute; left: 18px; bottom: 18px; margin: 0; color: var(--noir-muted); font: 10px var(--mono); }
.noir-project-visual { position: absolute; inset: 70px 20px 86px; }
.noir-project-visual::before, .noir-project-visual::after { content: ""; position: absolute; border-radius: 50%; }
.noir-project-visual::before { inset: 10% 22%; background: radial-gradient(circle at 33% 26%, #e9d7ff, #8c62dd 27%, #332765 60%, transparent 61%); box-shadow: 0 0 45px rgba(164,119,255,.32); }
.noir-project-visual::after { left: 5%; right: 5%; top: 42%; height: 30%; border: 1px solid rgba(216,198,255,.44); transform: rotate(-21deg); }
.noir-project-card:nth-child(2) .noir-project-visual::before { background: radial-gradient(circle at 32% 25%, #fff1cf, #f19f6c 22%, #9d365e 58%, transparent 59%); box-shadow: 0 0 45px rgba(241,159,108,.22); }
.noir-project-card:nth-child(3) .noir-project-visual::before { background: radial-gradient(circle at 32% 25%, #ccfff4, #52bbb0 24%, #1b4c59 58%, transparent 59%); box-shadow: 0 0 45px rgba(82,187,176,.22); }
.noir-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; padding: 28px 0 72px; border-top: 1px solid var(--noir-line); }
.noir-metric { padding-right: 20px; border-right: 1px solid var(--noir-line); }
.noir-metric:last-child { border-right: 0; }
.noir-metric strong { display: block; color: var(--noir-text); font: 500 clamp(34px, 5vw, 65px)/1 var(--sans); letter-spacing: -.08em; }
.noir-metric span { display: block; margin-top: 9px; color: var(--noir-muted); font: 10px var(--mono); }
.noir-footer { display: flex; justify-content: space-between; gap: 18px; padding: 22px 0 30px; border-top: 1px solid var(--noir-line); color: var(--noir-muted); font: 11px var(--mono); }
.noir-footer a { color: var(--noir-text); }

/* Brutalist template */
.theme-brutalist { --brutal-ink: #171716; --brutal-paper: #f3efdb; --brutal-yellow: #f2ed55; --brutal-orange: #f15b35; --brutal-blue: #72a8ff; --brutal-line: #171716; color: var(--brutal-ink); background: var(--brutal-paper); font-family: var(--sans); }
.brutal-nav { min-height: 76px; border-bottom: 3px solid var(--brutal-line); }
.brutal-nav .brand { font: 800 16px/1 var(--sans); letter-spacing: -.08em; }
.brutal-nav .brand-mark { width: 31px; height: 31px; border: 3px solid var(--brutal-ink); border-radius: 0; font-weight: 800; }
.brutal-nav .nav-links { font: 700 11px var(--mono); text-transform: uppercase; }
.brutal-nav .nav-links a { color: var(--brutal-ink); }
.brutal-nav .nav-links a.is-active::after { height: 3px; bottom: -9px; }
.brutal-nav .nav-status { color: var(--brutal-ink); font-weight: 500; }
.brutal-nav .nav-status i { background: var(--brutal-orange); border-radius: 0; }
.brutal-hero { display: grid; grid-template-columns: 1.1fr .9fr; gap: 24px; padding: 24px 0 80px; }
.brutal-hero-copy { min-height: 585px; display: flex; flex-direction: column; justify-content: space-between; padding: 28px 30px 25px; border: 3px solid var(--brutal-line); background: var(--brutal-yellow); box-shadow: 10px 10px 0 var(--brutal-ink); }
.brutal-hero-copy .eyebrow { color: var(--brutal-ink); font-weight: 700; }
.brutal-title { max-width: 700px; margin: auto 0 23px; font: 800 clamp(61px, 9.5vw, 131px)/.78 var(--sans); letter-spacing: -.12em; }
.brutal-title u { text-decoration-color: var(--brutal-orange); text-decoration-thickness: 10px; text-underline-offset: -1px; }
.brutal-hero-intro { display: flex; justify-content: space-between; gap: 20px; align-items: end; }
.brutal-hero-intro p { max-width: 265px; margin: 0; font-size: 13px; font-weight: 700; }
.brutal-hero-intro .btn { min-height: 42px; padding-inline: 14px; border-width: 3px; background: var(--brutal-paper); font-weight: 800; }
.brutal-side { position: relative; display: flex; flex-direction: column; gap: 24px; }
.brutal-sticker { position: absolute; z-index: 1; top: 68px; right: 26px; display: grid; width: 132px; height: 132px; place-items: center; text-align: center; border: 3px solid var(--brutal-ink); border-radius: 50%; background: var(--brutal-orange); box-shadow: 7px 7px 0 var(--brutal-ink); font: 800 18px/.82 var(--sans); transform: rotate(12deg); }
.brutal-portrait { position: relative; flex: 1; min-height: 355px; overflow: hidden; border: 3px solid var(--brutal-line); background: var(--brutal-blue); }
.brutal-portrait::before { content: ""; position: absolute; top: 42px; left: 50%; width: 215px; height: 255px; border: 3px solid var(--brutal-ink); border-radius: 47% 47% 10px 10px; background: #eaad8f; transform: translateX(-50%); }
.brutal-portrait::after { content: ""; position: absolute; left: calc(50% - 108px); bottom: 0; width: 216px; height: 150px; border: 3px solid var(--brutal-ink); border-bottom: 0; border-radius: 50% 50% 0 0; background: var(--brutal-orange); }
.brutal-face { position: absolute; z-index: 1; top: 106px; left: calc(50% - 50px); width: 100px; height: 12px; border-bottom: 3px solid var(--brutal-ink); border-radius: 50%; }
.brutal-side-note { display: flex; justify-content: space-between; gap: 20px; padding: 17px 18px; border: 3px solid var(--brutal-line); background: var(--brutal-paper); font: 700 11px var(--mono); }
.brutal-side-note span:last-child { text-align: right; }
.brutal-projects { padding: 40px 0 85px; border-top: 3px solid var(--brutal-line); }
.brutal-section-head { display: flex; justify-content: space-between; align-items: end; margin-bottom: 24px; }
.brutal-section-head h2 { margin: 0; font: 800 clamp(35px, 5vw, 65px)/.9 var(--sans); letter-spacing: -.1em; }
.brutal-section-head p { max-width: 300px; margin: 0; font: 700 11px/1.4 var(--mono); }
.brutal-project-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
.brutal-project { min-height: 380px; display: flex; flex-direction: column; justify-content: space-between; padding: 17px; border: 3px solid var(--brutal-line); box-shadow: 7px 7px 0 var(--brutal-ink); }
.brutal-project:nth-child(1) { background: var(--brutal-orange); }
.brutal-project:nth-child(2) { background: var(--brutal-blue); }
.brutal-project:nth-child(3) { background: var(--brutal-yellow); }
.brutal-project-top { display: flex; justify-content: space-between; font: 700 10px var(--mono); }
.brutal-project h3 { margin: 20px 0 0; font: 800 clamp(32px, 4vw, 50px)/.8 var(--sans); letter-spacing: -.11em; }
.brutal-project p { max-width: 200px; margin: 0; font-size: 12px; font-weight: 700; }
.brutal-project-bottom { display: flex; justify-content: space-between; align-items: end; gap: 15px; }
.brutal-project-arrow { display: grid; width: 45px; height: 45px; place-items: center; border: 3px solid var(--brutal-line); border-radius: 50%; font-size: 23px; }
.brutal-process { display: grid; grid-template-columns: .65fr 1.35fr; gap: 60px; padding: 41px 0 96px; border-top: 3px solid var(--brutal-line); }
.brutal-process h2 { margin: 0; font: 800 clamp(38px, 5vw, 70px)/.84 var(--sans); letter-spacing: -.11em; }
.brutal-process-list { border-top: 3px solid var(--brutal-line); }
.brutal-process-item { display: grid; grid-template-columns: 55px 1fr 1fr; gap: 16px; align-items: center; padding: 17px 0; border-bottom: 3px solid var(--brutal-line); font-size: 12px; font-weight: 700; }
.brutal-process-item strong { font: 800 25px var(--mono); }
.brutal-process-item span:last-child { text-align: right; font: 11px var(--mono); }
.brutal-footer { display: flex; justify-content: space-between; gap: 20px; padding: 20px 0 27px; border-top: 3px solid var(--brutal-line); font: 700 11px var(--mono); }

/* Journal template */
.theme-journal { --journal-ink: #493f36; --journal-muted: #8c7e70; --journal-paper: #f2ece4; --journal-soft: #e2d6c8; --journal-line: rgba(73,63,54,.22); --terracotta: #a36d55; color: var(--journal-ink); background: var(--journal-paper); font-family: var(--body); }
.journal-nav { border-bottom: 1px solid var(--journal-line); }
.journal-nav .brand { font: 500 21px/1 var(--serif); letter-spacing: -.04em; }
.journal-nav .brand-mark { width: 27px; height: 27px; border-color: var(--terracotta); color: var(--terracotta); font-family: var(--serif); }
.journal-nav .nav-links a { color: var(--journal-muted); }
.journal-nav .nav-links a:hover, .journal-nav .nav-links a:focus-visible, .journal-nav .nav-links a.is-active { color: var(--journal-ink); }
.journal-nav .nav-links a.is-active::after { background: var(--terracotta); }
.journal-nav .nav-status { color: var(--journal-muted); }
.journal-nav .nav-status i { background: var(--terracotta); }
.journal-hero { display: grid; grid-template-columns: 1.1fr .9fr; gap: 65px; align-items: center; min-height: 660px; padding-top: 76px; padding-bottom: 110px; }
.journal-hero h1 { max-width: 690px; margin: 24px 0 22px; font: 500 clamp(60px, 8.5vw, 120px)/.82 var(--serif); letter-spacing: -.1em; }
.journal-hero h1 i { color: var(--terracotta); font-style: italic; }
.journal-lead { max-width: 390px; margin: 0 0 26px; color: var(--journal-muted); font-size: 14px; }
.journal-link { display: inline-flex; align-items: center; gap: 13px; border-bottom: 1px solid currentColor; padding-bottom: 6px; font-size: 13px; }
.journal-portrait { position: relative; min-height: 470px; overflow: hidden; background: var(--journal-soft); }
.journal-portrait::before { content: ""; position: absolute; inset: 32px 35px 0; border-radius: 48% 48% 0 0; background: var(--terracotta); }
.journal-portrait::after { content: ""; position: absolute; top: 95px; left: 50%; width: 180px; height: 215px; border-radius: 48% 48% 42% 42%; background: #e2ae8e; transform: translateX(-50%); }
.journal-face { position: absolute; z-index: 1; top: 181px; left: calc(50% - 42px); width: 84px; height: 30px; border-bottom: 1px solid var(--journal-ink); border-radius: 50%; }
.journal-hair { position: absolute; z-index: 2; top: 76px; left: 50%; width: 194px; height: 100px; border-radius: 50% 50% 38% 38%; background: #50473e; transform: translateX(-50%) rotate(-7deg); }
.journal-hair::after { content: ""; position: absolute; left: 13px; top: 44px; width: 60px; height: 80px; border-radius: 50%; background: #50473e; transform: rotate(28deg); }
.journal-portrait-caption { position: absolute; z-index: 3; right: 21px; bottom: 18px; color: var(--journal-paper); font: 10px var(--mono); }
.journal-story { display: grid; grid-template-columns: .73fr 1.27fr; gap: 72px; padding: 30px 0 110px; border-top: 1px solid var(--journal-line); }
.journal-story h2 { margin: 0; font: 500 19px var(--mono); }
.journal-story-copy { max-width: 650px; }
.journal-story-copy > p { margin: 0; font: 500 clamp(31px, 4.2vw, 55px)/1.02 var(--serif); letter-spacing: -.06em; }
.journal-story-copy > p em { color: var(--terracotta); font-style: italic; }
.journal-story-copy .small-copy { max-width: 360px; margin: 25px 0 0; color: var(--journal-muted); font: 14px/1.7 var(--body); }
.journal-notes { padding-bottom: 105px; }
.journal-notes-head { display: flex; justify-content: space-between; align-items: end; padding-bottom: 18px; border-bottom: 1px solid var(--journal-line); }
.journal-notes-head h2 { margin: 0; font: 500 37px var(--serif); letter-spacing: -.06em; }
.journal-notes-head span { color: var(--journal-muted); font: 11px var(--mono); }
.journal-entry-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.journal-entry { padding: 20px 0 24px; border-bottom: 1px solid var(--journal-line); }
.journal-entry time { color: var(--terracotta); font: 11px var(--mono); }
.journal-entry h3 { margin: 37px 0 12px; font: 500 28px/1 var(--serif); letter-spacing: -.05em; }
.journal-entry p { min-height: 67px; margin: 0; color: var(--journal-muted); font-size: 13px; }
.journal-entry a { display: inline-flex; gap: 10px; margin-top: 22px; font-size: 12px; }
.journal-quote { display: grid; grid-template-columns: 1.2fr .8fr; gap: 40px; align-items: center; padding: 54px 0; border-top: 1px solid var(--journal-line); border-bottom: 1px solid var(--journal-line); }
.journal-quote blockquote { margin: 0; font: 500 clamp(31px, 4.4vw, 60px)/.95 var(--serif); letter-spacing: -.07em; }
.journal-quote blockquote span { color: var(--terracotta); }
.journal-quote cite { max-width: 220px; color: var(--journal-muted); font: 12px/1.7 var(--body); font-style: normal; }
.journal-footer { display: flex; justify-content: space-between; gap: 20px; padding: 23px 0 32px; color: var(--journal-muted); font: 11px var(--mono); }
.journal-footer a { color: var(--journal-ink); }

@media (max-width: 820px) {
  .site-nav { min-height: 74px; }
  .nav-status { display: none; }
  .selector-hero, .editorial-hero, .noir-hero, .brutal-hero, .journal-hero { grid-template-columns: 1fr; }
  .selector-hero { padding-top: 65px; }
  .selector-hero-art { min-height: 330px; }
  .selector-hero h1 { font-size: clamp(54px, 13vw, 90px); }
  .guide-section, .journal-story, .noir-selected, .brutal-process { grid-template-columns: 1fr; gap: 34px; }
  .editorial-hero, .noir-hero, .journal-hero { padding-top: 70px; }
  .editorial-note { min-height: 270px; }
  .noir-orbit-stage { min-height: 420px; }
  .noir-selected { gap: 22px; }
  .brutal-hero-copy { min-height: 520px; }
  .brutal-side { min-height: 530px; }
  .journal-portrait { min-height: 410px; }
}

@media (max-width: 620px) {
  .container { width: min(100% - 30px, 1180px); }
  .site-nav { gap: 12px; }
  .brand { font-size: 10px; }
  .brand-mark { width: 25px; height: 25px; font-size: 13px; }
  .nav-links { gap: 13px; font-size: 11px; }
  .selector-hero { min-height: auto; padding: 54px 0 72px; }
  .selector-hero-art { min-height: 285px; }
  .selector-art-card-a { left: 25px; top: 42px; width: 115px; height: 150px; font-size: 28px; }
  .selector-art-card-b { right: 20px; bottom: 24px; width: 130px; height: 100px; font-size: 18px; }
  .selector-art-ring { width: 145px; height: 145px; right: 19%; }
  .templates-section { padding-bottom: 80px; }
  .section-heading { display: block; }
  .section-note { margin-top: 20px; }
  .choice-grid { grid-template-columns: 1fr; gap: 42px; margin-top: 35px; }
  .choice-info p { min-height: 0; }
  .guide-section { padding: 55px 0 75px; }
  .guide-row { grid-template-columns: 1fr; gap: 5px; padding: 15px 0; }
  .guide-row span:last-child { text-align: left; }
  .selector-footer, .editorial-footer, .noir-footer, .brutal-footer, .journal-footer { display: block; }
  .selector-footer a, .editorial-footer a, .noir-footer a, .brutal-footer a, .journal-footer a { display: block; margin-top: 10px; }
  .editorial-hero, .noir-hero, .journal-hero { padding: 55px 0 80px; }
  .editorial-title, .noir-title, .journal-hero h1 { font-size: clamp(54px, 16vw, 88px); }
  .editorial-note { min-height: 235px; }
  .editorial-project-grid, .editorial-project:nth-child(3) { grid-template-columns: 1fr; }
  .editorial-project:nth-child(2) { margin-top: 0; }
  .editorial-project:nth-child(3) { grid-column: auto; }
  .editorial-project:nth-child(3) .project-visual, .project-visual { min-height: 320px; }
  .editorial-bottom { grid-template-columns: 1fr; padding-bottom: 55px; }
  .noir-hero { min-height: auto; }
  .noir-orbit-stage { min-height: 325px; }
  .noir-sphere { width: 260px; }
  .noir-project-list, .journal-entry-list { grid-template-columns: 1fr; }
  .noir-project-card { min-height: 315px; }
  .noir-metrics { gap: 12px; }
  .noir-metric { padding-right: 8px; }
  .noir-metric strong { font-size: 33px; }
  .brutal-hero { padding-top: 15px; }
  .brutal-hero-copy { min-height: 480px; padding: 20px; box-shadow: 7px 7px 0 var(--brutal-ink); }
  .brutal-title { font-size: clamp(55px, 17vw, 95px); }
  .brutal-hero-intro { display: block; }
  .brutal-hero-intro .btn { margin-top: 18px; }
  .brutal-side { min-height: 470px; }
  .brutal-portrait { min-height: 310px; }
  .brutal-sticker { width: 105px; height: 105px; top: 42px; right: 14px; font-size: 14px; }
  .brutal-project-grid { grid-template-columns: 1fr; }
  .brutal-project { min-height: 280px; }
  .brutal-process { padding-bottom: 70px; }
  .brutal-process-item { grid-template-columns: 42px 1fr; }
  .brutal-process-item span:last-child { grid-column: 2; text-align: left; }
  .journal-hero { min-height: auto; }
  .journal-portrait { min-height: 350px; }
  .journal-story { padding-bottom: 75px; }
  .journal-notes { padding-bottom: 75px; }
  .journal-quote { grid-template-columns: 1fr; }
}

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

/* Second set: miniature previews */
.mini-bento, .mini-terminal, .mini-poster, .mini-studio { position: absolute; inset: 0; overflow: hidden; }
.mini-bento { padding: 18px 20px; color: #243038; background: #e6f0ee; font-family: var(--sans); }
.mini-bento-bar, .mini-terminal-bar, .mini-poster-bar, .mini-studio-bar { display: flex; justify-content: space-between; align-items: center; font: 500 8px var(--mono); letter-spacing: .04em; }
.mini-bento-bar b { font-size: 12px; letter-spacing: -.06em; }
.mini-bento-copy { position: absolute; z-index: 1; left: 20px; bottom: 28px; }
.mini-bento-copy small, .mini-terminal-copy > span, .mini-poster-copy small, .mini-studio-copy small { display: block; font: 500 7px var(--mono); letter-spacing: .08em; }
.mini-bento-copy strong { display: block; margin-top: 7px; font: 800 29px/.84 var(--sans); letter-spacing: -.1em; }
.mini-bento-copy i { color: #6e73d9; font-style: normal; }
.mini-bento-pill { position: absolute; z-index: 2; top: 60px; left: 20px; padding: 7px 8px; border: 1px solid rgba(36,48,56,.28); border-radius: 99px; font: 8px var(--mono); }
.mini-bento-orb { position: absolute; right: 28px; top: 28px; width: 150px; height: 150px; border-radius: 38% 62% 55% 45%; background: #9aa0f1; transform: rotate(21deg); }
.mini-bento-orb::after { content: ""; position: absolute; inset: 25px; border: 1px solid rgba(255,255,255,.65); border-radius: 50%; }
.mini-bento-grid { position: absolute; right: 10px; bottom: 20px; width: 145px; height: 100px; opacity: .38; background-image: linear-gradient(rgba(36,48,56,.45) 1px, transparent 1px), linear-gradient(90deg, rgba(36,48,56,.45) 1px, transparent 1px); background-size: 16px 16px; transform: rotate(-8deg); }
.mini-terminal { padding: 17px 20px; color: #c8ffc0; background: #10140e; font-family: var(--mono); }
.mini-terminal-bar { color: #758a6e; }
.mini-terminal-bar b { color: #f2a45f; letter-spacing: .06em; }
.mini-terminal-copy { position: absolute; left: 20px; top: 64px; }
.mini-terminal-copy > span { color: #89ae80; }
.mini-terminal-copy strong { display: block; margin: 9px 0 19px; color: #c8ffc0; font: 500 27px/.86 var(--mono); letter-spacing: -.1em; }
.mini-terminal-copy strong::first-line { color: #f2a45f; }
.mini-terminal-lines { position: absolute; right: 17px; bottom: 22px; color: #6d8567; font: 7px/1.7 var(--mono); text-align: right; }
.mini-poster { padding: 18px 20px; color: #151a4e; background: #f0dfd3; font-family: var(--sans); }
.mini-poster-bar { color: #151a4e; }
.mini-poster-copy { position: absolute; z-index: 1; left: 20px; bottom: 27px; }
.mini-poster-copy strong { display: block; margin-top: 7px; font: 800 32px/.78 var(--sans); letter-spacing: -.13em; }
.mini-poster-copy i { color: #e85732; font-style: normal; }
.mini-poster-ring { position: absolute; right: 37px; top: 37px; width: 158px; height: 158px; border: 20px solid #3e40d6; border-radius: 50%; }
.mini-poster-ring::after { content: ""; position: absolute; inset: 24px; border: 1px solid #f0dfd3; border-radius: 50%; }
.mini-poster-slash { position: absolute; right: 82px; top: 22px; width: 22px; height: 220px; background: #e85732; transform: rotate(29deg); }
.mini-poster-side { position: absolute; right: 17px; bottom: 25px; color: #3e40d6; font: 7px var(--mono); transform: rotate(-90deg); transform-origin: right bottom; }
.mini-studio { padding: 18px 20px; color: #2b3430; background: #e6e4f7; font-family: var(--sans); }
.mini-studio-bar b { font-size: 10px; letter-spacing: -.06em; }
.mini-studio-copy { position: absolute; z-index: 2; left: 20px; bottom: 27px; }
.mini-studio-copy strong { display: block; margin-top: 7px; font: 700 31px/.82 var(--sans); letter-spacing: -.11em; }
.mini-studio-copy i { color: #d8786e; font-style: normal; }
.mini-studio-blob { position: absolute; right: -2px; top: 45px; width: 205px; height: 185px; border-radius: 54% 46% 50% 50%; background: #b7a8f2; transform: rotate(15deg); }
.mini-studio-blob::before { content: ""; position: absolute; inset: 27px 38px; border: 1px solid rgba(43,52,48,.42); border-radius: 50%; }
.mini-studio-card { position: absolute; z-index: 3; top: 60px; right: 45px; width: 74px; height: 90px; padding: 8px; background: #ff9e86; font: 500 9px var(--mono); transform: rotate(-9deg); }
.mini-studio-card span { display: block; margin-top: 13px; font-size: 7px; line-height: 1.15; }

/* Bento template */
.theme-bento { --bento-ink: #263238; --bento-muted: #78878a; --bento-bg: #edf4f2; --bento-line: rgba(38,50,56,.15); --bento-indigo: #9398ec; --bento-coral: #ffae98; --bento-lime: #d4e992; color: var(--bento-ink); background: var(--bento-bg); }
.bento-nav { border-bottom: 1px solid var(--bento-line); }
.bento-nav .brand { font: 700 17px/1 var(--sans); letter-spacing: -.08em; }
.bento-nav .brand-mark { width: 29px; height: 29px; border-color: var(--bento-indigo); color: var(--bento-indigo); font-size: 13px; }
.bento-nav .nav-links a { color: var(--bento-muted); }
.bento-nav .nav-links a:hover, .bento-nav .nav-links a:focus-visible, .bento-nav .nav-links a.is-active { color: var(--bento-ink); }
.bento-nav .nav-links a.is-active::after { background: var(--bento-indigo); }
.bento-nav .nav-status { color: var(--bento-muted); }
.bento-nav .nav-status i { background: #79c98f; }
.bento-hero { display: grid; grid-template-columns: 1.2fr .8fr; gap: 18px; align-items: stretch; padding-top: 58px; padding-bottom: 18px; }
.bento-card { position: relative; overflow: hidden; border: 1px solid var(--bento-line); border-radius: 25px; background: rgba(255,255,255,.38); }
.bento-welcome { position: relative; min-height: 450px; overflow: hidden; padding: 24px 27px; border-radius: 25px; color: #f5f5ef; background: #313a40; }
.bento-card-label { display: flex; justify-content: space-between; gap: 15px; color: var(--bento-muted); font: 500 10px var(--mono); letter-spacing: .05em; }
.bento-welcome .bento-card-label { position: relative; z-index: 2; color: rgba(245,245,239,.63); }
.bento-welcome h1 { position: relative; z-index: 2; max-width: 590px; margin: 125px 0 18px; font: 800 clamp(55px, 7vw, 98px)/.83 var(--sans); letter-spacing: -.12em; }
.bento-welcome h1 i { color: var(--bento-lime); font-style: normal; }
.bento-welcome p { position: relative; z-index: 2; max-width: 310px; margin: 0; color: rgba(245,245,239,.66); font-size: 13px; }
.bento-link { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 14px; margin-top: 24px; padding-bottom: 6px; border-bottom: 1px solid currentColor; font: 500 12px var(--mono); }
.bento-welcome-orb { position: absolute; top: 46px; right: 11%; width: 220px; height: 220px; border: 1px solid rgba(212,233,146,.3); border-radius: 50%; }
.bento-welcome-orb::before, .bento-welcome-orb::after { content: ""; position: absolute; border-radius: 50%; }
.bento-welcome-orb::before { inset: 22px; border: 1px solid rgba(212,233,146,.5); }
.bento-welcome-orb::after { top: 85px; left: 85px; width: 47px; height: 47px; background: var(--bento-coral); box-shadow: 0 0 40px rgba(255,174,152,.35); }
.bento-side-stack { display: grid; grid-template-rows: auto 1fr; gap: 18px; }
.bento-profile { display: flex; align-items: center; gap: 15px; min-height: 120px; padding: 18px; background: var(--bento-lime); }
.bento-avatar { display: grid; width: 58px; height: 58px; flex: 0 0 auto; place-items: center; border-radius: 50%; background: var(--bento-ink); color: var(--bento-lime); font: 800 26px var(--sans); }
.bento-profile strong { display: block; font: 700 16px/1.02 var(--sans); letter-spacing: -.07em; }
.bento-profile span:not(.bento-open-dot) { display: block; margin-top: 8px; color: rgba(38,50,56,.63); font: 10px var(--mono); }
.bento-open-dot { width: 9px; height: 9px; margin-left: auto; align-self: flex-start; border-radius: 50%; background: #67bb78; box-shadow: 0 0 0 4px rgba(103,187,120,.16); }
.bento-now { min-height: 310px; padding: 22px; background: var(--bento-coral); }
.bento-now strong { position: absolute; left: 22px; bottom: 24px; font: 700 clamp(30px, 4vw, 46px)/.88 var(--sans); letter-spacing: -.1em; }
.bento-now-symbol { position: absolute; top: 18px; right: 22px; display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid rgba(38,50,56,.55); border-radius: 50%; font-size: 21px; }
.bento-grid { display: grid; grid-template-columns: 1.1fr .9fr .9fr; grid-template-rows: 265px 230px; gap: 18px; padding-bottom: 100px; }
.bento-grid .bento-card { padding: 20px; }
.bento-work-card { grid-row: span 2; color: #fff7f2; background: var(--bento-indigo); }
.bento-work-card .bento-card-label { color: rgba(255,247,242,.68); }
.bento-work-card h2 { position: absolute; z-index: 1; left: 20px; bottom: 22px; margin: 0; font: 700 clamp(34px, 4.7vw, 63px)/.84 var(--sans); letter-spacing: -.1em; }
.bento-work-card h2 i { color: #f6f1b4; font-style: normal; }
.bento-work-shape { position: absolute; top: 48px; right: 16%; width: 185px; height: 185px; border: 14px solid rgba(255,247,242,.8); border-radius: 50%; transform: rotate(23deg); }
.bento-work-shape::after { content: ""; position: absolute; left: 50%; top: -16px; width: 1px; height: 210px; background: rgba(255,247,242,.66); transform: rotate(42deg); }
.bento-corner-arrow { position: absolute; top: 17px; right: 19px; display: grid; width: 40px; height: 40px; place-items: center; border: 1px solid rgba(255,247,242,.55); border-radius: 50%; font-size: 18px; }
.bento-stack-card { background: var(--bento-lime); }
.bento-stack-card .bento-card-label { color: rgba(38,50,56,.61); }
.bento-stack-card ul { margin: 34px 0 0; padding: 0; list-style: none; }
.bento-stack-card li { display: flex; justify-content: space-between; gap: 12px; padding: 13px 0; border-bottom: 1px solid rgba(38,50,56,.18); font-size: 13px; }
.bento-stack-card li b { font: 500 10px var(--mono); }
.bento-quote-card { background: #fffaf5; }
.bento-quote-mark { display: block; color: var(--bento-coral); font: 500 58px/.7 Georgia, serif; }
.bento-quote-card blockquote { margin: 22px 0 0; font: 700 26px/.92 var(--sans); letter-spacing: -.08em; }
.bento-quote-card blockquote i { color: #7779d9; font-style: normal; }
.bento-quote-card cite { position: absolute; bottom: 18px; left: 20px; color: var(--bento-muted); font: 10px var(--mono); }
.bento-contact-card { color: #27322f; background: #d4e7dd; }
.bento-contact-card .bento-card-label { color: rgba(38,50,56,.6); }
.bento-contact-card h2 { margin: 54px 0 0; font: 700 39px/.84 var(--sans); letter-spacing: -.1em; }
.bento-contact-card .bento-link { margin-top: 20px; }
.bento-footer { display: flex; justify-content: space-between; gap: 20px; padding: 23px 0 31px; border-top: 1px solid var(--bento-line); color: var(--bento-muted); font: 10px var(--mono); }
.bento-footer a { color: var(--bento-ink); }

/* Terminal template */
.theme-terminal { --term-bg: #10140e; --term-panel: #171d14; --term-text: #c9f5be; --term-muted: #7f9c78; --term-green: #9eff6b; --term-orange: #f0a469; --term-line: rgba(201,245,190,.2); color: var(--term-text); background: var(--term-bg); font-family: "DM Mono", Consolas, monospace; }
.theme-terminal::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .18; background: linear-gradient(rgba(158,255,107,.12) 1px, transparent 1px); background-size: 100% 4px; }
.terminal-nav { border-bottom: 1px solid var(--term-line); }
.terminal-nav .brand { color: var(--term-text); font: 500 12px var(--mono); }
.terminal-nav .brand-mark { width: 36px; height: 26px; border-color: var(--term-green); border-radius: 3px; color: var(--term-green); font-size: 10px; }
.terminal-nav .nav-links a { color: var(--term-muted); font: 400 11px var(--mono); }
.terminal-nav .nav-links a:hover, .terminal-nav .nav-links a:focus-visible, .terminal-nav .nav-links a.is-active { color: var(--term-green); }
.terminal-nav .nav-links a.is-active::after { background: var(--term-green); }
.terminal-nav .nav-status { color: var(--term-muted); font: 10px var(--mono); }
.terminal-nav .nav-status i { background: var(--term-green); box-shadow: 0 0 9px var(--term-green); }
.terminal-hero { display: grid; grid-template-columns: .95fr 1.05fr; gap: 70px; align-items: center; padding-top: 95px; padding-bottom: 112px; }
.terminal-prompt { margin: 0; color: var(--term-muted); font: 12px var(--mono); }
.terminal-prompt span { color: var(--term-green); }
.terminal-prompt b { color: var(--term-orange); font-weight: 400; }
.terminal-intro h1 { margin: 25px 0 27px; color: var(--term-text); font: 500 clamp(61px, 8.5vw, 116px)/.82 var(--mono); letter-spacing: -.13em; }
.terminal-intro h1 span { color: var(--term-orange); animation: terminal-blink 1.1s steps(2, start) infinite; }
@keyframes terminal-blink { 50% { opacity: 0; } }
.terminal-summary { max-width: 375px; margin: 0 0 28px; color: var(--term-muted); font: 12px/1.8 var(--mono); }
.terminal-command-links { display: flex; flex-wrap: wrap; gap: 13px 25px; }
.terminal-command-links a { color: var(--term-green); font: 11px var(--mono); }
.terminal-command-links a:hover { color: var(--term-orange); }
.terminal-window { border: 1px solid var(--term-line); background: rgba(23,29,20,.72); box-shadow: 12px 12px 0 rgba(158,255,107,.06); }
.terminal-window-bar { display: flex; justify-content: space-between; padding: 13px 16px; border-bottom: 1px solid var(--term-line); color: var(--term-muted); font: 10px var(--mono); }
.terminal-window-bar span:first-child { color: var(--term-orange); letter-spacing: .08em; }
.terminal-window-body { min-height: 390px; padding: 24px; color: var(--term-text); font: 12px/1.85 var(--mono); }
.terminal-window-body p { margin: 0 0 21px; }
.terminal-window-body .terminal-green { color: var(--term-green); }
.terminal-window-body .terminal-comment { color: var(--term-muted); }
.terminal-window-body em { color: var(--term-green); font-style: normal; }
.terminal-files { color: var(--term-orange); }
.terminal-cursor { color: var(--term-green); }
.terminal-main-grid, .terminal-about { padding-bottom: 88px; }
.terminal-section-title { display: grid; grid-template-columns: 44px 1fr auto; gap: 18px; align-items: baseline; padding: 15px 0; border-top: 1px solid var(--term-line); border-bottom: 1px solid var(--term-line); color: var(--term-muted); font: 11px var(--mono); }
.terminal-section-title span:first-child { color: var(--term-orange); }
.terminal-section-title h2 { margin: 0; color: var(--term-text); font: 500 17px var(--mono); }
.terminal-project-list { border-bottom: 1px solid var(--term-line); }
.terminal-project { display: grid; grid-template-columns: 76px 1fr 40px; gap: 16px; align-items: center; padding: 25px 10px; border-bottom: 1px solid var(--term-line); transition: background .2s ease, padding .2s ease; }
.terminal-project:last-child { border-bottom: 0; }
.terminal-project:hover, .terminal-project:focus-visible { padding-left: 17px; background: rgba(158,255,107,.05); }
.terminal-project-num { color: var(--term-orange); font-size: 11px; }
.terminal-project b { display: block; color: var(--term-text); font: 500 25px var(--mono); }
.terminal-project small { display: block; margin-top: 5px; color: var(--term-muted); font: 10px var(--mono); }
.terminal-project-arrow { display: grid; width: 32px; height: 32px; place-items: center; border: 1px solid var(--term-line); border-radius: 50%; color: var(--term-green); }
.terminal-about { display: grid; grid-template-columns: .62fr 1.38fr; gap: 70px; }
.terminal-about .terminal-section-title { border-top: 0; }
.terminal-principles { padding-top: 15px; }
.terminal-principles p { margin: 0; padding: 17px 0; border-bottom: 1px solid var(--term-line); color: var(--term-muted); font: 12px/1.55 var(--mono); }
.terminal-principles b { display: inline-block; width: 42px; color: var(--term-orange); font-weight: 400; }
.terminal-footer { display: flex; justify-content: space-between; gap: 20px; padding: 23px 0 31px; border-top: 1px solid var(--term-line); color: var(--term-muted); font: 10px var(--mono); }
.terminal-footer a { color: var(--term-green); }

/* Poster template */
.theme-poster { --poster-ink: #171b54; --poster-bg: #f3e3d9; --poster-blue: #4749db; --poster-orange: #ed6545; --poster-lime: #c9ea76; --poster-line: rgba(23,27,84,.25); color: var(--poster-ink); background: var(--poster-bg); font-family: "Space Grotesk", var(--sans); }
.poster-nav { border-bottom: 1px solid var(--poster-line); }
.poster-nav .brand { font: 700 12px var(--mono); letter-spacing: .06em; }
.poster-nav .brand-mark { width: 27px; height: 27px; border: 2px solid var(--poster-ink); border-radius: 2px; font: 700 13px var(--sans); }
.poster-nav .nav-links a { color: rgba(23,27,84,.63); font-size: 12px; }
.poster-nav .nav-links a:hover, .poster-nav .nav-links a:focus-visible, .poster-nav .nav-links a.is-active { color: var(--poster-ink); }
.poster-nav .nav-links a.is-active::after { background: var(--poster-orange); }
.poster-nav .nav-status { color: rgba(23,27,84,.63); }
.poster-nav .nav-status i { background: var(--poster-orange); border-radius: 0; }
.poster-hero { display: grid; grid-template-columns: 54px 1.03fr .97fr; gap: 26px; align-items: stretch; min-height: 645px; padding-top: 58px; padding-bottom: 85px; }
.poster-vertical-mark { display: flex; align-items: center; justify-content: center; color: var(--poster-orange); font: 10px var(--mono); letter-spacing: .06em; writing-mode: vertical-rl; transform: rotate(180deg); }
.poster-hero-copy { position: relative; z-index: 2; padding-top: 15px; }
.poster-hero-copy .eyebrow { color: rgba(23,27,84,.62); }
.poster-hero h1 { margin: 25px 0 23px; font: 700 clamp(76px, 11vw, 157px)/.73 var(--sans); letter-spacing: -.14em; }
.poster-hero h1 i { color: var(--poster-orange); font-style: normal; }
.poster-lead { max-width: 280px; margin: 0; color: rgba(23,27,84,.68); font: 13px/1.6 var(--sans); }
.poster-circle-link { display: flex; width: 104px; height: 104px; margin-top: 33px; align-items: center; justify-content: space-between; padding: 17px; border-radius: 50%; color: var(--poster-bg); background: var(--poster-blue); font: 700 10px/1.05 var(--mono); transition: transform .2s ease; }
.poster-circle-link:hover, .poster-circle-link:focus-visible { transform: rotate(12deg); }
.poster-circle-link b { align-self: flex-end; font-size: 17px; font-weight: 400; }
.poster-art { position: relative; overflow: hidden; border: 1px solid var(--poster-line); background: var(--poster-blue); }
.poster-art-circle { position: absolute; top: 10%; right: -17%; width: 115%; aspect-ratio: 1; border: 50px solid var(--poster-orange); border-radius: 50%; }
.poster-art-disc { position: absolute; z-index: 1; top: 26%; left: 15%; display: grid; width: 220px; height: 220px; place-items: center; border-radius: 50%; color: var(--poster-ink); background: var(--poster-lime); font: 700 180px/.8 var(--sans); letter-spacing: -.2em; }
.poster-art-line { position: absolute; z-index: 2; left: 41%; top: -10%; width: 34px; height: 125%; background: var(--poster-bg); transform: rotate(27deg); }
.poster-art-caption { position: absolute; z-index: 3; left: 20px; bottom: 19px; color: var(--poster-bg); font: 10px/1.35 var(--mono); }
.poster-intro { display: grid; grid-template-columns: .3fr 1.7fr; gap: 50px; padding: 30px 0 100px; border-top: 1px solid var(--poster-line); }
.poster-kicker, .poster-section-head span { color: rgba(23,27,84,.58); font: 10px var(--mono); letter-spacing: .05em; }
.poster-intro p { max-width: 760px; margin: 0; font: 500 clamp(29px, 4.1vw, 55px)/1.02 var(--sans); letter-spacing: -.08em; }
.poster-intro p i { color: var(--poster-orange); font-style: normal; }
.poster-work { padding-bottom: 106px; }
.poster-section-head { display: flex; justify-content: space-between; align-items: end; padding-bottom: 18px; border-bottom: 1px solid var(--poster-line); }
.poster-section-head h2 { margin: 0; font: 700 28px var(--sans); letter-spacing: -.08em; }
.poster-work-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin-top: 15px; }
.poster-work-item { position: relative; display: flex; min-height: 345px; flex-direction: column; justify-content: space-between; overflow: hidden; padding: 18px; border: 1px solid var(--poster-line); transition: transform .2s ease; }
.poster-work-item:hover, .poster-work-item:focus-visible { transform: translateY(-7px); }
.poster-work-orange { color: var(--poster-bg); background: var(--poster-orange); }
.poster-work-blue { color: var(--poster-bg); background: var(--poster-blue); }
.poster-work-lime { color: var(--poster-ink); background: var(--poster-lime); }
.poster-work-index { font: 11px var(--mono); }
.poster-work-item h3 { margin: 0; font: 700 clamp(37px, 5vw, 68px)/.76 var(--sans); letter-spacing: -.13em; }
.poster-work-type { font: 10px var(--mono); }
.poster-work-arrow { position: absolute; top: 16px; right: 16px; display: grid; width: 37px; height: 37px; place-items: center; border: 1px solid currentColor; border-radius: 50%; font-size: 19px; }
.poster-footer { display: flex; justify-content: space-between; gap: 20px; padding: 23px 0 31px; border-top: 1px solid var(--poster-line); color: rgba(23,27,84,.62); font: 10px var(--mono); }
.poster-footer a { color: var(--poster-ink); }

/* Studio template */
.theme-studio { --studio-ink: #2b3430; --studio-muted: #718079; --studio-bg: #e9e7f8; --studio-coral: #ff9e86; --studio-lilac: #b8aaf4; --studio-lime: #cfe48e; --studio-line: rgba(43,52,48,.18); color: var(--studio-ink); background: var(--studio-bg); font-family: var(--sans); }
.studio-nav { border-bottom: 1px solid var(--studio-line); }
.studio-nav .brand { font: 700 14px var(--sans); letter-spacing: -.07em; }
.studio-nav .brand-mark { width: 27px; height: 27px; border-color: var(--studio-coral); color: var(--studio-coral); font-family: var(--serif); }
.studio-nav .nav-links a { color: var(--studio-muted); font-size: 12px; }
.studio-nav .nav-links a:hover, .studio-nav .nav-links a:focus-visible, .studio-nav .nav-links a.is-active { color: var(--studio-ink); }
.studio-nav .nav-links a.is-active::after { background: var(--studio-coral); }
.studio-nav .nav-status { color: var(--studio-muted); }
.studio-nav .nav-status i { background: #6fb883; }
.studio-hero { display: grid; grid-template-columns: 1.02fr .98fr; gap: 50px; align-items: center; min-height: 630px; padding-top: 70px; padding-bottom: 105px; }
.studio-hero h1 { margin: 23px 0 21px; font: 700 clamp(63px, 8.4vw, 115px)/.81 var(--sans); letter-spacing: -.13em; }
.studio-hero h1 i { color: var(--studio-coral); font-style: normal; }
.studio-hero-copy > p:not(.eyebrow) { max-width: 385px; margin: 0; color: var(--studio-muted); font-size: 14px; line-height: 1.75; }
.studio-button { display: inline-flex; gap: 17px; align-items: center; margin-top: 29px; padding: 13px 15px; border-radius: 99px; color: var(--studio-ink); background: var(--studio-lime); font: 500 12px var(--mono); transition: transform .2s ease; }
.studio-button:hover, .studio-button:focus-visible { transform: translateY(-4px) rotate(-2deg); }
.studio-hero-art { position: relative; min-height: 465px; }
.studio-blob { position: absolute; border-radius: 50% 50% 44% 56%; }
.studio-blob-back { inset: 4% 12% 13% 8%; background: var(--studio-lilac); transform: rotate(16deg); }
.studio-blob-front { top: 18%; left: 25%; width: 55%; height: 57%; background: var(--studio-coral); border-radius: 57% 43% 51% 49%; transform: rotate(-18deg); }
.studio-blob-front::after { content: ""; position: absolute; inset: 24px; border: 1px solid rgba(43,52,48,.5); border-radius: 50%; }
.studio-art-label { position: absolute; z-index: 2; right: 4%; bottom: 6%; padding: 12px; border-radius: 5px; color: var(--studio-ink); background: var(--studio-lime); font: 10px/1.25 var(--mono); transform: rotate(7deg); }
.studio-art-dot { position: absolute; z-index: 2; top: 14%; right: 8%; width: 26px; height: 26px; border-radius: 50%; background: var(--studio-ink); }
.studio-services { padding-bottom: 105px; }
.studio-section-head { display: grid; grid-template-columns: 44px 1fr auto; gap: 18px; align-items: baseline; padding: 15px 0; border-top: 1px solid var(--studio-line); border-bottom: 1px solid var(--studio-line); color: var(--studio-muted); font: 11px var(--mono); }
.studio-section-head h2 { margin: 0; color: var(--studio-ink); font: 500 18px var(--sans); letter-spacing: -.04em; }
.studio-service-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin-top: 15px; }
.studio-service-list article { position: relative; min-height: 245px; padding: 18px; border: 1px solid var(--studio-line); border-radius: 21px; background: rgba(255,255,255,.26); }
.studio-service-list article:nth-child(1) { background: var(--studio-coral); }
.studio-service-list article:nth-child(2) { background: var(--studio-lime); }
.studio-service-list article:nth-child(3) { background: var(--studio-lilac); }
.studio-service-list article > span { color: rgba(43,52,48,.58); font: 10px var(--mono); }
.studio-service-list h3 { position: absolute; left: 18px; bottom: 54px; margin: 0; font: 700 31px/.84 var(--sans); letter-spacing: -.1em; }
.studio-service-list p { position: absolute; left: 18px; right: 18px; bottom: 18px; margin: 0; font-size: 11px; line-height: 1.4; }
.studio-about { display: grid; grid-template-columns: .5fr 1.5fr; gap: 70px; align-items: start; padding: 30px 0 110px; border-top: 1px solid var(--studio-line); }
.studio-about-badge { display: grid; width: 70px; height: 70px; place-items: center; border-radius: 50%; color: var(--studio-bg); background: var(--studio-ink); font: 700 31px var(--sans); }
.studio-section-label { color: var(--studio-muted); font: 10px var(--mono); letter-spacing: .05em; }
.studio-about p { margin: 26px 0 0; font: 500 clamp(33px, 4.5vw, 61px)/.98 var(--sans); letter-spacing: -.1em; }
.studio-about p i { color: var(--studio-coral); font-style: normal; }
.studio-feature { display: grid; grid-template-columns: 1.05fr .95fr; gap: 50px; align-items: center; padding-bottom: 105px; }
.studio-feature-art { position: relative; min-height: 350px; overflow: hidden; border-radius: 25px; background: var(--studio-lime); }
.studio-feature-art > span { position: absolute; z-index: 2; top: 18px; left: 20px; font: 11px var(--mono); }
.studio-feature-art > div { position: absolute; top: 15%; left: 23%; width: 57%; height: 66%; border-radius: 50% 50% 43% 57%; background: var(--studio-coral); transform: rotate(19deg); }
.studio-feature-art > div::after { content: ""; position: absolute; inset: 29px; border: 1px solid rgba(43,52,48,.45); border-radius: 50%; }
.studio-feature-copy h2 { margin: 25px 0 19px; font: 700 clamp(44px, 6vw, 79px)/.82 var(--sans); letter-spacing: -.13em; }
.studio-feature-copy h2 i { color: var(--studio-coral); font-style: normal; }
.studio-feature-copy p { max-width: 330px; margin: 0; color: var(--studio-muted); font-size: 13px; line-height: 1.7; }
.studio-text-link { display: inline-flex; gap: 14px; margin-top: 25px; padding-bottom: 6px; border-bottom: 1px solid currentColor; font: 12px var(--mono); }
.studio-footer { display: flex; justify-content: space-between; gap: 20px; padding: 23px 0 31px; border-top: 1px solid var(--studio-line); color: var(--studio-muted); font: 10px var(--mono); }
.studio-footer a { color: var(--studio-ink); }

@media (max-width: 820px) {
  .bento-hero, .terminal-hero, .poster-hero, .studio-hero { grid-template-columns: 1fr; }
  .bento-hero { padding-top: 50px; }
  .bento-side-stack { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; }
  .bento-now { min-height: 250px; }
  .bento-grid { grid-template-columns: 1fr 1fr; grid-template-rows: 245px 210px 210px; }
  .bento-work-card { grid-row: span 2; }
  .bento-contact-card { grid-column: 1 / -1; }
  .terminal-hero { gap: 50px; padding-top: 65px; }
  .terminal-about { grid-template-columns: 1fr; gap: 30px; }
  .poster-hero { grid-template-columns: 42px 1fr; min-height: auto; }
  .poster-art { grid-column: 2; min-height: 430px; }
  .poster-intro { grid-template-columns: 1fr; gap: 20px; }
  .studio-hero { gap: 25px; padding-top: 60px; }
  .studio-hero-art { min-height: 380px; }
  .studio-about { gap: 35px; }
}

@media (max-width: 620px) {
  .templates-more-section { padding-top: 20px; }
  .bento-welcome { min-height: 390px; padding: 20px; }
  .bento-welcome h1 { margin-top: 105px; font-size: clamp(50px, 16vw, 82px); }
  .bento-welcome-orb { right: -1%; width: 180px; height: 180px; }
  .bento-side-stack { grid-template-columns: 1fr; }
  .bento-now { min-height: 220px; }
  .bento-grid { grid-template-columns: 1fr; grid-template-rows: auto; }
  .bento-grid .bento-card { min-height: 225px; }
  .bento-work-card { grid-row: auto; min-height: 320px !important; }
  .bento-contact-card { grid-column: auto; }
  .bento-footer, .terminal-footer, .poster-footer, .studio-footer { display: block; }
  .bento-footer a, .terminal-footer a, .poster-footer a, .studio-footer a { display: block; margin-top: 10px; }
  .terminal-hero { padding-top: 55px; padding-bottom: 78px; }
  .terminal-intro h1 { font-size: clamp(54px, 16vw, 90px); }
  .terminal-window-body { min-height: 340px; padding: 19px; font-size: 11px; }
  .terminal-section-title { grid-template-columns: 35px 1fr; }
  .terminal-section-title span:last-child { grid-column: 2; }
  .terminal-project { grid-template-columns: 55px 1fr 33px; gap: 10px; padding-inline: 0; }
  .terminal-project b { font-size: 20px; }
  .poster-hero { grid-template-columns: 28px 1fr; gap: 14px; padding-top: 43px; padding-bottom: 70px; }
  .poster-hero h1 { font-size: clamp(63px, 21vw, 110px); }
  .poster-vertical-mark { font-size: 8px; }
  .poster-art { grid-column: 2; min-height: 320px; }
  .poster-art-disc { width: 150px; height: 150px; font-size: 120px; }
  .poster-art-circle { border-width: 34px; }
  .poster-intro { padding-bottom: 75px; }
  .poster-work-list { grid-template-columns: 1fr; }
  .poster-work-item { min-height: 265px; }
  .studio-hero { min-height: auto; padding-top: 52px; padding-bottom: 75px; }
  .studio-hero h1 { font-size: clamp(56px, 17vw, 92px); }
  .studio-hero-art { min-height: 320px; }
  .studio-services { padding-bottom: 75px; }
  .studio-section-head { grid-template-columns: 34px 1fr; }
  .studio-section-head span:last-child { grid-column: 2; }
  .studio-service-list { grid-template-columns: 1fr; }
  .studio-service-list article { min-height: 215px; }
  .studio-about { grid-template-columns: 1fr; padding-bottom: 75px; }
  .studio-feature { grid-template-columns: 1fr; padding-bottom: 75px; }
  .studio-feature-art { min-height: 280px; }
}

/* Gentle set: miniature previews */
.mini-linen, .mini-cloud, .mini-botanical, .mini-notebook { position: absolute; inset: 0; overflow: hidden; }
.mini-linen { padding: 18px 20px; color: #51483f; background: #e9dfd2; font-family: var(--body); }
.mini-linen-bar, .mini-cloud-bar, .mini-botanical-bar, .mini-notebook-bar { display: flex; justify-content: space-between; align-items: center; color: #968779; font: 500 8px var(--mono); }
.mini-linen-bar b { color: #51483f; font: 500 15px var(--serif); }
.mini-linen-copy { position: absolute; z-index: 2; left: 20px; bottom: 25px; }
.mini-linen-copy small, .mini-cloud-copy small, .mini-botanical-copy small, .mini-notebook-copy small { display: block; font: 500 7px var(--mono); letter-spacing: .07em; }
.mini-linen-copy strong { display: block; margin-top: 7px; font: 500 31px/.83 var(--serif); letter-spacing: -.08em; }
.mini-linen-copy i { color: #aa765d; font-style: italic; }
.mini-linen-arch { position: absolute; right: 42px; top: 42px; width: 135px; height: 164px; border-radius: 75px 75px 0 0; background: #aa765d; }
.mini-linen-arch::before { content: ""; position: absolute; inset: 23px 23px 0; border-radius: 55px 55px 0 0; background: #e9dfd2; }
.mini-linen-arch::after { content: ""; position: absolute; top: 35px; left: 45px; width: 36px; height: 36px; border-radius: 50%; background: #e7b986; }
.mini-linen-line { position: absolute; left: 20px; right: 20px; bottom: 16px; border-top: 1px solid rgba(81,72,63,.3); }
.mini-cloud { padding: 18px 20px; color: #566174; background: #e8edf5; font-family: var(--body); }
.mini-cloud-bar b { color: #566174; font: 500 13px var(--serif); }
.mini-cloud-copy { position: absolute; z-index: 2; left: 20px; bottom: 25px; }
.mini-cloud-copy strong { display: block; margin-top: 7px; font: 500 34px/.8 var(--serif); letter-spacing: -.09em; }
.mini-cloud-copy i { color: #8d82c3; font-style: italic; }
.mini-cloud-bubble { position: absolute; border-radius: 50%; }
.mini-cloud-bubble-a { right: 28px; top: 38px; width: 164px; height: 108px; border-radius: 62px; background: #f7d1bf; transform: rotate(-17deg); }
.mini-cloud-bubble-a::before, .mini-cloud-bubble-a::after { content: ""; position: absolute; bottom: -14px; border-radius: 50%; background: #f7d1bf; }
.mini-cloud-bubble-a::before { left: 30px; width: 45px; height: 45px; }
.mini-cloud-bubble-a::after { right: 28px; width: 29px; height: 29px; }
.mini-cloud-bubble-b { right: 76px; top: 62px; width: 56px; height: 56px; background: #beb3e9; }
.mini-cloud-star { position: absolute; right: 22px; bottom: 25px; color: #d29a53; font-size: 25px; }
.mini-botanical { padding: 18px 20px; color: #455346; background: #e4e3d2; font-family: var(--body); }
.mini-botanical-bar b { color: #455346; font: 500 9px var(--mono); }
.mini-botanical-copy { position: absolute; z-index: 3; left: 20px; bottom: 25px; }
.mini-botanical-copy strong { display: block; margin-top: 7px; font: 500 32px/.8 var(--serif); letter-spacing: -.09em; }
.mini-botanical-copy i { color: #9a7052; font-style: italic; }
.mini-botanical-stem { position: absolute; right: 91px; top: 41px; width: 2px; height: 180px; background: #758266; transform: rotate(12deg); transform-origin: bottom; }
.mini-botanical-leaf { position: absolute; width: 75px; height: 36px; border-radius: 100% 0 100% 0; background: #889b7b; }
.mini-botanical-leaf-a { right: 64px; top: 61px; transform: rotate(-28deg); }
.mini-botanical-leaf-b { right: 95px; top: 112px; background: #aa765d; transform: rotate(27deg) scale(.8); }
.mini-notebook { padding: 18px 20px; color: #5c5047; background: #faf4e7; font-family: var(--body); }
.mini-notebook-tape { position: absolute; z-index: 3; top: -5px; left: 45%; width: 46px; height: 23px; opacity: .76; background: #e9be7e; transform: rotate(-5deg); }
.mini-notebook-bar b { color: #5c5047; font: 500 16px var(--serif); }
.mini-notebook-copy { position: absolute; z-index: 2; left: 20px; bottom: 27px; }
.mini-notebook-copy strong { display: block; margin-top: 7px; font: 500 35px/.77 var(--serif); letter-spacing: -.11em; }
.mini-notebook-copy i { color: #b87968; font-style: italic; }
.mini-notebook-scribble { position: absolute; right: 30px; top: 76px; color: #8b91bf; font: 500 17px/1.28 var(--serif); transform: rotate(9deg); }
.mini-notebook-flower { position: absolute; right: 21px; bottom: 27px; color: #d49b52; font-size: 31px; }

/* Linen template */
.theme-linen { --linen-ink: #51483f; --linen-muted: #97897a; --linen-bg: #f3ede4; --linen-soft: #e7dacc; --linen-terracotta: #aa765d; --linen-line: rgba(81,72,63,.19); color: var(--linen-ink); background: var(--linen-bg); font-family: var(--body); }
.linen-nav { border-bottom: 1px solid var(--linen-line); }
.linen-nav .brand { font: 500 21px/1 var(--serif); letter-spacing: -.05em; }
.linen-nav .brand-mark { width: 27px; height: 27px; border-color: var(--linen-terracotta); color: var(--linen-terracotta); font-family: var(--serif); }
.linen-nav .nav-links a { color: var(--linen-muted); }
.linen-nav .nav-links a:hover, .linen-nav .nav-links a:focus-visible, .linen-nav .nav-links a.is-active { color: var(--linen-ink); }
.linen-nav .nav-links a.is-active::after { background: var(--linen-terracotta); }
.linen-nav .nav-status { color: var(--linen-muted); }
.linen-nav .nav-status i { background: var(--linen-terracotta); }
.linen-hero { display: grid; grid-template-columns: 1.06fr .94fr; gap: 70px; align-items: center; min-height: 650px; padding-top: 75px; padding-bottom: 105px; }
.linen-hero h1 { margin: 25px 0 22px; font: 500 clamp(61px, 8.5vw, 118px)/.83 var(--serif); letter-spacing: -.1em; }
.linen-hero h1 i { color: var(--linen-terracotta); font-style: italic; }
.linen-hero-copy > p:not(.eyebrow) { max-width: 380px; margin: 0; color: var(--linen-muted); font-size: 14px; line-height: 1.75; }
.linen-link { display: inline-flex; align-items: center; gap: 13px; margin-top: 28px; padding-bottom: 6px; border-bottom: 1px solid currentColor; font-size: 13px; }
.linen-hero-art { position: relative; min-height: 460px; overflow: hidden; background: var(--linen-soft); }
.linen-arch { position: absolute; top: 14%; left: 22%; width: 57%; height: 82%; border-radius: 170px 170px 0 0; background: var(--linen-terracotta); }
.linen-arch::before { content: ""; position: absolute; inset: 29px 29px 0; border-radius: 140px 140px 0 0; background: var(--linen-soft); }
.linen-arch::after { content: ""; position: absolute; top: 20%; left: 42%; width: 17%; aspect-ratio: 1; border-radius: 50%; background: #e9b982; }
.linen-sun { position: absolute; z-index: 2; top: 22%; right: 13%; width: 56px; height: 56px; border-radius: 50%; background: #e9b982; }
.linen-sun::after { content: ""; position: absolute; top: 72px; left: -110px; width: 175px; border-top: 1px solid rgba(81,72,63,.45); transform: rotate(29deg); }
.linen-hero-art span { position: absolute; z-index: 3; left: 20px; bottom: 18px; color: var(--linen-bg); font: 10px/1.3 var(--mono); }
.linen-about { display: grid; grid-template-columns: .55fr 1.45fr; gap: 60px; padding: 30px 0 110px; border-top: 1px solid var(--linen-line); }
.linen-section-label { color: var(--linen-muted); font: 10px var(--mono); letter-spacing: .06em; }
.linen-about p { max-width: 760px; margin: 0; font: 500 clamp(29px, 4.2vw, 55px)/1.03 var(--serif); letter-spacing: -.06em; }
.linen-about p i { color: var(--linen-terracotta); font-style: italic; }
.linen-work { padding-bottom: 110px; }
.linen-section-head { display: flex; justify-content: space-between; align-items: end; padding-bottom: 18px; border-bottom: 1px solid var(--linen-line); }
.linen-section-head h2 { margin: 0; font: 500 27px var(--serif); letter-spacing: -.05em; }
.linen-section-head span { color: var(--linen-muted); font: 10px var(--mono); }
.linen-project-list { border-bottom: 1px solid var(--linen-line); }
.linen-project { display: grid; grid-template-columns: 54px 1fr 1fr 38px; gap: 20px; align-items: center; padding: 22px 10px; border-bottom: 1px solid var(--linen-line); transition: padding .2s ease, background .2s ease; }
.linen-project:last-child { border-bottom: 0; }
.linen-project:hover, .linen-project:focus-visible { padding-left: 18px; background: rgba(231,218,204,.5); }
.linen-project > span { color: var(--linen-terracotta); font: 10px var(--mono); }
.linen-project strong { font: 500 26px var(--serif); letter-spacing: -.05em; }
.linen-project small { color: var(--linen-muted); font-size: 11px; }
.linen-project b { display: grid; width: 31px; height: 31px; place-items: center; border: 1px solid var(--linen-line); border-radius: 50%; font-weight: 400; }
.linen-notes { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; padding: 31px 0 96px; border-top: 1px solid var(--linen-line); }
.linen-notes h2 { margin: 25px 0 0; font: 500 clamp(42px, 5vw, 71px)/.84 var(--serif); letter-spacing: -.09em; }
.linen-notes h2 i { color: var(--linen-terracotta); font-style: italic; }
.linen-note-copy { align-self: end; max-width: 340px; }
.linen-note-copy p { margin: 0; color: var(--linen-muted); font-size: 14px; line-height: 1.75; }
.linen-footer { display: flex; justify-content: space-between; gap: 20px; padding: 23px 0 31px; border-top: 1px solid var(--linen-line); color: var(--linen-muted); font: 10px var(--mono); }
.linen-footer a { color: var(--linen-ink); }

/* Cloud template */
.theme-cloud { --cloud-ink: #586477; --cloud-muted: #8d98a8; --cloud-bg: #edf2f7; --cloud-peach: #f5cfc0; --cloud-lilac: #cfc7ef; --cloud-blue: #b9dce7; --cloud-line: rgba(88,100,119,.19); color: var(--cloud-ink); background: var(--cloud-bg); font-family: var(--body); }
.cloud-nav { border-bottom: 1px solid var(--cloud-line); }
.cloud-nav .brand { font: 500 19px/1 var(--serif); letter-spacing: -.04em; }
.cloud-nav .brand-mark { width: 27px; height: 27px; border-color: #c092c1; color: #c092c1; font-family: var(--serif); }
.cloud-nav .nav-links a { color: var(--cloud-muted); }
.cloud-nav .nav-links a:hover, .cloud-nav .nav-links a:focus-visible, .cloud-nav .nav-links a.is-active { color: var(--cloud-ink); }
.cloud-nav .nav-links a.is-active::after { background: #c092c1; }
.cloud-nav .nav-status { color: var(--cloud-muted); }
.cloud-nav .nav-status i { background: #c092c1; }
.cloud-hero { display: grid; grid-template-columns: .87fr 1.13fr; gap: 56px; align-items: center; min-height: 680px; padding-top: 70px; padding-bottom: 110px; }
.cloud-hero h1 { margin: 25px 0 23px; font: 500 clamp(72px, 10.5vw, 145px)/.73 var(--serif); letter-spacing: -.13em; }
.cloud-hero h1 i { color: #9f91d2; font-style: italic; }
.cloud-hero-copy > p:not(.eyebrow) { max-width: 370px; margin: 0; color: var(--cloud-muted); font-size: 14px; line-height: 1.75; }
.cloud-button { display: inline-flex; align-items: center; gap: 16px; margin-top: 28px; padding: 12px 15px; border-radius: 99px; color: var(--cloud-ink); background: #fffaf5; font: 11px var(--mono); box-shadow: 0 8px 23px rgba(88,100,119,.08); transition: transform .2s ease, box-shadow .2s ease; }
.cloud-button:hover, .cloud-button:focus-visible { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(88,100,119,.15); }
.cloud-sky { position: relative; min-height: 465px; overflow: hidden; background: #dce8f0; }
.cloud-sky-sun { position: absolute; top: 15%; right: 16%; width: 80px; height: 80px; border-radius: 50%; background: #f3d4a7; box-shadow: 0 0 0 18px rgba(243,212,167,.14), 0 0 0 36px rgba(243,212,167,.09); }
.cloud-bubble { position: absolute; border-radius: 50%; }
.cloud-bubble-a { top: 33%; left: 10%; width: 54%; height: 32%; border-radius: 70px; background: #fffaf5; box-shadow: 62px 18px 0 -12px #fffaf5, 126px 8px 0 -20px #fffaf5; }
.cloud-bubble-b { right: 3%; bottom: 8%; width: 43%; height: 31%; border-radius: 60% 40% 50% 50%; background: var(--cloud-peach); transform: rotate(-12deg); }
.cloud-bubble-c { left: 19%; bottom: -5%; width: 40%; height: 27%; border-radius: 50%; background: var(--cloud-lilac); }
.cloud-sky-note { position: absolute; left: 23px; bottom: 22px; color: var(--cloud-ink); font: 10px/1.4 var(--mono); }
.cloud-sky-star { position: absolute; right: 24px; bottom: 23px; color: #cf9a5b; font-size: 29px; }
.cloud-about { display: grid; grid-template-columns: .35fr 1.45fr .3fr; gap: 35px; align-items: start; padding: 29px 0 112px; border-top: 1px solid var(--cloud-line); }
.cloud-about-label { display: flex; flex-direction: column; gap: 10px; color: var(--cloud-muted); font: 10px var(--mono); }
.cloud-about-label span:first-child { color: #c092c1; }
.cloud-about p { max-width: 760px; margin: 0; font: 500 clamp(29px, 4.1vw, 55px)/1.04 var(--serif); letter-spacing: -.06em; }
.cloud-about p i { color: #9f91d2; font-style: italic; }
.cloud-about-caption { justify-self: end; color: var(--cloud-muted); font: 10px/1.45 var(--mono); text-align: right; }
.cloud-work { padding-bottom: 107px; }
.cloud-section-head { display: flex; justify-content: space-between; align-items: end; padding-bottom: 18px; border-bottom: 1px solid var(--cloud-line); }
.cloud-section-head h2 { margin: 0; font: 500 27px var(--serif); letter-spacing: -.06em; }
.cloud-section-head span { color: var(--cloud-muted); font: 10px var(--mono); }
.cloud-project-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin-top: 15px; }
.cloud-project { position: relative; min-height: 313px; overflow: hidden; padding: 18px; border-radius: 21px; transition: transform .2s ease; }
.cloud-project:hover, .cloud-project:focus-visible { transform: translateY(-6px); }
.cloud-project-peach { background: var(--cloud-peach); }
.cloud-project-lilac { background: var(--cloud-lilac); }
.cloud-project-blue { background: var(--cloud-blue); }
.cloud-project > span { color: rgba(88,100,119,.63); font: 10px var(--mono); }
.cloud-project h3 { position: absolute; left: 18px; bottom: 55px; margin: 0; font: 500 37px/.85 var(--serif); letter-spacing: -.08em; }
.cloud-project small { position: absolute; bottom: 20px; left: 18px; color: rgba(88,100,119,.7); font: 10px var(--mono); }
.cloud-project b { position: absolute; top: 17px; right: 17px; display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid rgba(88,100,119,.35); border-radius: 50%; font-weight: 400; }
.cloud-project::after { content: ""; position: absolute; right: -12%; top: 26%; width: 145px; height: 145px; border: 17px solid rgba(255,250,245,.72); border-radius: 50%; }
.cloud-project-lilac::after { border-color: rgba(255,250,245,.55); transform: rotate(25deg); }
.cloud-project-blue::after { border-color: rgba(255,250,245,.48); transform: rotate(-17deg); }
.cloud-contact { padding: 30px 0 102px; border-top: 1px solid var(--cloud-line); }
.cloud-contact > span { color: var(--cloud-muted); font: 10px var(--mono); }
.cloud-contact h2 { margin: 23px 0 0; font: 500 clamp(44px, 6vw, 79px)/.83 var(--serif); letter-spacing: -.1em; }
.cloud-footer { display: flex; justify-content: space-between; gap: 20px; padding: 23px 0 31px; border-top: 1px solid var(--cloud-line); color: var(--cloud-muted); font: 10px var(--mono); }
.cloud-footer a { color: var(--cloud-ink); }

/* Botanical template */
.theme-botanical { --bot-ink: #455346; --bot-muted: #899386; --bot-bg: #f0f0e5; --bot-sage: #a9b99e; --bot-terracotta: #a8785b; --bot-line: rgba(69,83,70,.2); color: var(--bot-ink); background: var(--bot-bg); font-family: var(--body); }
.botanical-nav { border-bottom: 1px solid var(--bot-line); }
.botanical-nav .brand { font: 500 12px var(--mono); letter-spacing: .05em; }
.botanical-nav .brand-mark { width: 27px; height: 27px; border-color: var(--bot-terracotta); color: var(--bot-terracotta); font-family: var(--serif); }
.botanical-nav .nav-links a { color: var(--bot-muted); }
.botanical-nav .nav-links a:hover, .botanical-nav .nav-links a:focus-visible, .botanical-nav .nav-links a.is-active { color: var(--bot-ink); }
.botanical-nav .nav-links a.is-active::after { background: var(--bot-terracotta); }
.botanical-nav .nav-status { color: var(--bot-muted); }
.botanical-nav .nav-status i { background: #799c72; }
.botanical-hero { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; min-height: 680px; padding-top: 70px; padding-bottom: 112px; }
.botanical-hero h1 { margin: 25px 0 22px; font: 500 clamp(64px, 9vw, 125px)/.79 var(--serif); letter-spacing: -.11em; }
.botanical-hero h1 i { color: var(--bot-terracotta); font-style: italic; }
.botanical-hero-copy > p:not(.eyebrow) { max-width: 390px; margin: 0; color: var(--bot-muted); font-size: 14px; line-height: 1.75; }
.botanical-link { display: inline-flex; align-items: center; gap: 15px; margin-top: 28px; padding-bottom: 6px; border-bottom: 1px solid currentColor; font-size: 13px; }
.botanical-garden { position: relative; min-height: 470px; overflow: hidden; background: var(--bot-sage); }
.botanical-garden::before { content: ""; position: absolute; inset: 20px; border: 1px solid rgba(69,83,70,.35); border-radius: 50% 50% 0 0; }
.botanical-pot { position: absolute; z-index: 2; bottom: 34px; left: 29%; width: 42%; height: 26%; background: var(--bot-terracotta); clip-path: polygon(12% 0, 88% 0, 75% 100%, 25% 100%); }
.botanical-pot::after { content: ""; position: absolute; top: 17px; left: 12%; width: 76%; border-top: 1px solid rgba(240,240,229,.45); }
.botanical-stem { position: absolute; z-index: 1; bottom: 23%; left: 50%; width: 3px; height: 52%; background: var(--bot-ink); transform-origin: bottom; }
.botanical-stem-a { transform: rotate(16deg); }
.botanical-stem-b { height: 59%; transform: rotate(-26deg); }
.botanical-leaf { position: absolute; z-index: 3; width: 112px; height: 55px; border-radius: 100% 0 100% 0; background: #6e896a; }
.botanical-leaf-a { top: 19%; left: 25%; transform: rotate(25deg); }
.botanical-leaf-b { top: 26%; right: 18%; background: var(--bot-terracotta); transform: rotate(-39deg) scale(.9); }
.botanical-leaf-c { top: 42%; left: 17%; background: #849b7a; transform: rotate(-18deg) scale(.76); }
.botanical-garden > span { position: absolute; z-index: 4; right: 19px; bottom: 17px; color: var(--bot-bg); font: 10px/1.35 var(--mono); }
.botanical-about { display: grid; grid-template-columns: .52fr 1.48fr; gap: 60px; padding: 30px 0 110px; border-top: 1px solid var(--bot-line); }
.botanical-section-label { color: var(--bot-muted); font: 10px var(--mono); letter-spacing: .06em; }
.botanical-about p { max-width: 760px; margin: 0; font: 500 clamp(29px, 4.1vw, 55px)/1.04 var(--serif); letter-spacing: -.06em; }
.botanical-about div > span:last-child { display: block; margin-top: 25px; color: var(--bot-muted); font: 11px var(--mono); }
.botanical-work { padding-bottom: 105px; }
.botanical-section-head { display: flex; justify-content: space-between; align-items: end; padding-bottom: 18px; border-bottom: 1px solid var(--bot-line); }
.botanical-section-head h2 { margin: 0; font: 500 28px var(--serif); letter-spacing: -.05em; }
.botanical-section-head span { color: var(--bot-muted); font: 10px var(--mono); }
.botanical-project-list { border-bottom: 1px solid var(--bot-line); }
.botanical-project { display: grid; grid-template-columns: 54px 1fr 35px; gap: 20px; align-items: center; padding: 24px 10px; border-bottom: 1px solid var(--bot-line); transition: padding .2s ease, background .2s ease; }
.botanical-project:last-child { border-bottom: 0; }
.botanical-project:hover, .botanical-project:focus-visible { padding-left: 18px; background: rgba(169,185,158,.21); }
.botanical-project > span { color: var(--bot-terracotta); font: 10px var(--mono); }
.botanical-project h3 { margin: 0; font: 500 26px var(--serif); letter-spacing: -.05em; }
.botanical-project small { display: block; margin-top: 6px; color: var(--bot-muted); font-size: 12px; }
.botanical-project b { display: grid; width: 31px; height: 31px; place-items: center; border: 1px solid var(--bot-line); border-radius: 50%; font-weight: 400; }
.botanical-quote { display: grid; grid-template-columns: 1.3fr .7fr; gap: 35px; align-items: end; padding: 35px 0 105px; border-top: 1px solid var(--bot-line); }
.botanical-quote blockquote { margin: 0; font: 500 clamp(36px, 5vw, 67px)/.86 var(--serif); letter-spacing: -.09em; }
.botanical-quote blockquote i { color: var(--bot-terracotta); font-style: italic; }
.botanical-quote cite { color: var(--bot-muted); font: 11px/1.5 var(--mono); font-style: normal; }
.botanical-footer { display: flex; justify-content: space-between; gap: 20px; padding: 23px 0 31px; border-top: 1px solid var(--bot-line); color: var(--bot-muted); font: 10px var(--mono); }
.botanical-footer a { color: var(--bot-ink); }

/* Notebook template */
.theme-notebook { --note-ink: #5c5047; --note-muted: #9a8b7c; --note-bg: #f8f0e2; --note-yellow: #f3dda8; --note-pink: #f0cfc8; --note-blue: #d4e2ea; --note-red: #bd796b; --note-line: rgba(92,80,71,.18); color: var(--note-ink); background: var(--note-bg); font-family: var(--body); }
.theme-notebook::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .24; background-image: radial-gradient(rgba(92,80,71,.25) .6px, transparent .6px); background-size: 5px 5px; }
.notebook-nav { border-bottom: 1px solid var(--note-line); }
.notebook-nav .brand { font: 500 20px/1 var(--serif); letter-spacing: -.05em; }
.notebook-nav .brand-mark { width: 27px; height: 27px; border-color: var(--note-red); color: var(--note-red); font-family: var(--serif); }
.notebook-nav .nav-links a { color: var(--note-muted); }
.notebook-nav .nav-links a:hover, .notebook-nav .nav-links a:focus-visible, .notebook-nav .nav-links a.is-active { color: var(--note-ink); }
.notebook-nav .nav-links a.is-active::after { background: var(--note-red); }
.notebook-nav .nav-status { color: var(--note-muted); }
.notebook-nav .nav-status i { background: var(--note-red); }
.notebook-hero { display: grid; grid-template-columns: 1fr 48px; gap: 20px; align-items: stretch; min-height: 650px; padding-top: 70px; padding-bottom: 100px; }
.notebook-paper { position: relative; overflow: hidden; padding: 62px 70px 60px; background-color: #fbf5e9; background-image: linear-gradient(rgba(125,157,182,.15) 1px, transparent 1px); background-size: 100% 31px; box-shadow: 8px 10px 0 rgba(92,80,71,.11); }
.notebook-paper::before { content: ""; position: absolute; top: 0; bottom: 0; left: 62px; border-left: 1px solid rgba(189,121,107,.31); }
.notebook-tape { position: absolute; z-index: 2; top: -8px; width: 84px; height: 34px; opacity: .78; background: #e7bd7f; }
.notebook-tape-left { left: 17%; transform: rotate(-5deg); }
.notebook-tape-right { right: 14%; transform: rotate(7deg); }
.notebook-hand { position: relative; z-index: 1; margin: 0; color: var(--note-red); font: 500 25px/1 "Caveat", var(--serif); }
.notebook-paper h1 { position: relative; z-index: 1; max-width: 660px; margin: 27px 0 21px; font: 500 clamp(63px, 9vw, 124px)/.77 var(--serif); letter-spacing: -.12em; }
.notebook-paper h1 i { color: var(--note-red); font-style: italic; }
.notebook-intro { position: relative; z-index: 1; max-width: 375px; margin: 0; color: var(--note-muted); font-size: 13px; line-height: 1.75; }
.notebook-link { position: relative; z-index: 1; display: inline-flex; gap: 13px; align-items: center; margin-top: 28px; padding-bottom: 5px; border-bottom: 1px solid currentColor; font-size: 13px; }
.notebook-doodle { position: absolute; color: #d39b54; font: 32px "Caveat", cursive; }
.notebook-doodle-sun { right: 15%; top: 25%; }
.notebook-doodle-heart { right: 9%; bottom: 17%; color: var(--note-red); transform: rotate(10deg); }
.notebook-margin { display: flex; flex-direction: column; justify-content: space-between; padding: 13px 0 18px; color: var(--note-muted); font: 10px/1.25 var(--mono); text-align: center; }
.notebook-margin p { margin: auto 0; color: var(--note-red); font: 500 16px/1.25 "Caveat", cursive; transform: rotate(4deg); }
.notebook-note-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; padding: 31px 0 107px; border-top: 1px solid var(--note-line); }
.notebook-label { color: var(--note-muted); font: 10px var(--mono); letter-spacing: .06em; }
.notebook-note-intro h2 { margin: 25px 0 0; font: 500 clamp(44px, 5.7vw, 78px)/.83 var(--serif); letter-spacing: -.1em; }
.notebook-note-intro h2 i { color: var(--note-red); font-style: italic; }
.notebook-note-intro > p { align-self: end; max-width: 365px; margin: 0; color: var(--note-muted); font-size: 14px; line-height: 1.75; }
.notebook-notes { padding-bottom: 107px; }
.notebook-section-head { display: flex; justify-content: space-between; align-items: end; padding-bottom: 18px; border-bottom: 1px solid var(--note-line); }
.notebook-section-head h2 { margin: 0; font: 500 29px var(--serif); letter-spacing: -.06em; }
.notebook-section-head span { color: var(--note-muted); font: 10px var(--mono); }
.notebook-page-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 15px; }
.notebook-page { position: relative; min-height: 300px; padding: 18px; overflow: hidden; border: 1px solid var(--note-line); box-shadow: 5px 6px 0 rgba(92,80,71,.08); transition: transform .2s ease; }
.notebook-page:hover, .notebook-page:focus-visible { transform: translateY(-6px) rotate(-1deg); }
.notebook-page > span { color: rgba(92,80,71,.63); font: 10px var(--mono); }
.notebook-page h3 { position: absolute; left: 18px; right: 18px; bottom: 73px; margin: 0; font: 500 29px/.9 var(--serif); letter-spacing: -.07em; }
.notebook-page p { position: absolute; left: 18px; right: 18px; bottom: 20px; margin: 0; color: rgba(92,80,71,.7); font-size: 11px; line-height: 1.45; }
.notebook-page b { position: absolute; top: 15px; right: 15px; display: grid; width: 33px; height: 33px; place-items: center; border: 1px solid rgba(92,80,71,.3); border-radius: 50%; font-weight: 400; }
.notebook-page-yellow { background: var(--note-yellow); }
.notebook-page-pink { background: var(--note-pink); }
.notebook-page-blue { background: var(--note-blue); }
.notebook-contact { padding: 31px 0 103px; border-top: 1px solid var(--note-line); }
.notebook-contact h2 { margin: 24px 0 14px; font: 500 clamp(50px, 7vw, 95px)/.8 var(--serif); letter-spacing: -.12em; }
.notebook-contact p { max-width: 420px; margin: 0; color: var(--note-muted); font-size: 14px; line-height: 1.7; }
.notebook-footer { display: flex; justify-content: space-between; gap: 20px; padding: 23px 0 31px; border-top: 1px solid var(--note-line); color: var(--note-muted); font: 10px var(--mono); }
.notebook-footer a { color: var(--note-ink); }
.notebook-records { width: 100%; display: flex; flex-wrap: wrap; gap: 7px 20px; padding-top: 14px; border-top: 1px solid var(--note-line); }
.notebook-records a { color: var(--note-muted); font-size: 10px; }
.notebook-records a:hover, .notebook-records a:focus-visible { color: var(--note-red); }

@media (max-width: 820px) {
  .linen-hero, .cloud-hero, .botanical-hero { grid-template-columns: 1fr; }
  .linen-hero, .cloud-hero, .botanical-hero { padding-top: 60px; }
  .linen-hero-art, .cloud-sky, .botanical-garden { min-height: 390px; }
  .linen-about, .notebook-note-intro, .botanical-about { grid-template-columns: 1fr; gap: 28px; }
  .linen-notes { gap: 35px; }
  .cloud-about { grid-template-columns: .4fr 1.6fr; }
  .cloud-about-caption { display: none; }
  .cloud-project-list, .notebook-page-list { grid-template-columns: repeat(2, 1fr); }
  .cloud-project:last-child, .notebook-page:last-child { grid-column: 1 / -1; }
  .botanical-quote { grid-template-columns: 1.2fr .8fr; }
  .notebook-paper { padding-left: 62px; }
}

@media (max-width: 620px) {
  .selector-nav { flex-wrap: wrap; padding-top: 13px; padding-bottom: 13px; }
  .selector-nav .nav-links { order: 3; width: 100%; justify-content: space-between; gap: 9px; }
  .templates-gentle-section { padding-top: 20px; }
  .linen-hero, .cloud-hero, .botanical-hero { min-height: auto; padding-top: 52px; padding-bottom: 78px; }
  .linen-hero h1, .cloud-hero h1, .botanical-hero h1 { font-size: clamp(56px, 17vw, 92px); }
  .linen-hero-art, .cloud-sky, .botanical-garden { min-height: 300px; }
  .linen-arch { left: 25%; width: 52%; }
  .linen-about, .linen-notes, .cloud-about, .notebook-note-intro, .botanical-about, .botanical-quote { padding-bottom: 75px; }
  .linen-project { grid-template-columns: 36px 1fr 31px; gap: 10px; padding-inline: 0; }
  .linen-project small { grid-column: 2; grid-row: 2; }
  .linen-project b { grid-column: 3; grid-row: 1 / span 2; }
  .linen-notes { grid-template-columns: 1fr; gap: 30px; }
  .cloud-about { grid-template-columns: 1fr; gap: 20px; }
  .cloud-about-label { flex-direction: row; gap: 13px; }
  .cloud-project-list, .notebook-page-list { grid-template-columns: 1fr; }
  .cloud-project:last-child, .notebook-page:last-child { grid-column: auto; }
  .cloud-project { min-height: 260px; }
  .cloud-contact { padding-bottom: 75px; }
  .botanical-about { gap: 20px; }
  .botanical-project { grid-template-columns: 35px 1fr 31px; gap: 10px; padding-inline: 0; }
  .botanical-quote { grid-template-columns: 1fr; gap: 25px; }
  .notebook-hero { grid-template-columns: 1fr; min-height: auto; padding-top: 52px; padding-bottom: 78px; }
  .notebook-paper { padding: 52px 27px 52px 42px; }
  .notebook-paper::before { left: 31px; }
  .notebook-tape { width: 61px; height: 27px; }
  .notebook-paper h1 { font-size: clamp(56px, 17vw, 91px); }
  .notebook-margin { flex-direction: row; padding: 14px 0 0; }
  .notebook-margin p { margin: 0; }
  .notebook-page { min-height: 260px; }
  .linen-footer, .cloud-footer, .botanical-footer, .notebook-footer { display: block; }
  .linen-footer a, .cloud-footer a, .botanical-footer a, .notebook-footer a { display: block; margin-top: 10px; }
  .notebook-records { display: block; }
  .notebook-records a { margin-top: 8px; }
  .notebook-records a:first-child { margin-top: 0; }
}