.home { --home-green: #c7d5b1; --accent: #c7d5b1; background: #141811; color: #eeeee5; font-family: var(--sans); margin: 0; }
.home *, .home *::before, .home *::after { box-sizing: border-box; }
.home a { text-decoration: none; color: inherit; }
.home button { font: inherit; }
.home :is(a,button):focus-visible { outline: 2px solid #a4bb83; outline-offset: 6px; }
.home-skip { position: fixed; z-index: 100; top: -100px; left: 20px; padding: 14px; background: #c7d5b1; color: #141811 !important; }
.home-skip:focus { top: 12px; }
.home-nav { max-width: 1600px; margin: auto; min-height: 96px; padding: 20px 5.5%; display: flex; align-items: center; justify-content: space-between; gap: 30px; border-bottom: 1px solid #d6dfc31c; }
.home-brand { display: inline-flex; align-items: center; gap: 12px; font-size: 25px; font-weight: 500; letter-spacing: -.04em; }
.home-brand > span { display: grid; place-items: center; height: 36px; width: 32px; border-radius: 50%; background: #c7d5b1; color: #202919; font: 25px var(--serif); }
.home-brand i { font-style: normal; color: #c7d5b1; margin-left: -10px; }
.home-nav nav { display: flex; gap: 36px; color: #b5bbac; font-size: 13px; }
.home-nav nav a:hover { color: #fff; }
.home-nav-cta { border: 1px solid #64724f; padding: 12px 20px; border-radius: 30px; font-size: 13px; display: flex; gap: 24px; align-items: center; }
.home-nav-cta:hover { background: #c7d5b1; color: #141811; }
.home main { max-width: 1600px; margin: auto; }
.home-hero { padding: 66px 5.5% 72px; display: grid; grid-template-columns: 1fr 1fr; gap: 5%; align-items: center; }
.home-eyebrow { font-size: 10px; font-weight: 400; letter-spacing: .17em; color: #a8b49a; margin: 0 0 32px; line-height: 1.8; }
.home-eyebrow > span { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #c7d5b1; margin-right: 10px; box-shadow: 0 0 0 4px #c7d5b10c; }
.home-hero h1 { position: relative; margin: 0; font-family: var(--serif); font-size: clamp(60px,6.8vw,108px); line-height: 1.17; letter-spacing: -.025em; font-weight: 400; }
.home h1 em, .home h2 em { font-style: normal; color: #c7d5b1; }
.home-asterisk { font-family: var(--sans); font-size: .48em; color: #c7d5b1; display: inline-block; margin-left: 28px; vertical-align: 20%; }
.home-hero-description { color: #b3baaa; font-size: 14px; line-height: 2; margin: 30px 0; }
.home-hero-actions { display: flex; gap: 30px; align-items: center; }
.home-button { display: inline-flex; align-items: center; gap: 48px; padding: 17px 25px; border-radius: 5px; color: #1b2415 !important; background: #c7d5b1; font-size: 14px; transition: background .2s, transform .2s; }
.home-button:hover { background: #d8e4c4; transform: translateY(-2px); }
.home-text-link { font-size: 12px; color: #c4c9bb !important; }
.home-text-link span { margin-left: 12px; }
.home-hero-note { font-size: 10px; color: #89947c; margin-top: 28px; }
.home-hero-note span { margin: 0 9px; color: #58654c; }
.home [hidden] { display: none !important; }
.home-possibilities { padding: 70px 5.5% 100px; display: grid; grid-template-columns: .85fr 1.15fr; gap: 8%; border-top: 1px solid #d6dfc31c; }
.home-section-heading h2, .home-workflow h2 { font: 400 clamp(30px,3vw,46px)/1.5 var(--serif); margin: 0 0 20px; }
.home-section-heading > p:last-child { color: #9fa995; font-size: 13px; line-height: 1.95; }
.home-feature-list article { display: grid; grid-template-columns: 55px 1fr; gap: 15px 24px; padding: 26px 0; border-top: 1px solid #d6dfc326; }
.home-feature-list article:first-child { padding-top: 0; border-top: 0; }
.home-feature-symbol { font: 38px var(--serif); color: #c7d5b1; }
.home-feature-list h3 { font-size: 21px; font-weight: 400; margin: 0 0 12px; }
.home-feature-list p { margin: 0; font-size: 12px; color: #a5af9c; line-height: 1.95; max-width: 380px; }
.home-feature-index { grid-column: 2; color: #7d8d6f; font-size: 8px; letter-spacing: .14em; }
.home-collection { padding: 70px 5.5% 48px; background: #eeefe7; color: #293321; }
.home-collection .home-eyebrow { color: #667558; }
.home-collection-heading { display: flex; justify-content: space-between; align-items: end; gap: 30px; margin-bottom: 38px; }
.home-collection h2 { font: 400 clamp(28px,3vw,44px)/1.5 var(--serif); margin: 0; }
.home-collection h2 em { display: block; color: #697d52; }
.home-collection-heading > p { font-size: 12px; line-height: 1.9; color: #707b65; }
.home-template-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 28px; }
.home-template { min-width: 0; }
.home-template-stage { padding: 30px 40px; position: relative; background: var(--sample-bg); overflow: hidden; }
.home-template-stage canvas { display: block; width: 100%; height: auto; box-shadow: 0 8px 20px #242d251c; transition: transform .3s; }
.home-template:hover canvas { transform: translateY(-7px) rotate(-2deg); }
.home-template-index { position: absolute; top: 14px; left: 14px; font-size: 9px; color: #62715a; }
.home-template-open { position: absolute; bottom: 12px; left: 50%; transform: translate(-50%,8px); white-space: nowrap; opacity: 0; background: #24301fe8; color: #f1f2e9; padding: 10px 15px; font-size: 10px; transition: opacity .2s,transform .2s; }
.home-template:is(:hover,:focus-visible) .home-template-open { opacity: 1; transform: translate(-50%,0); }
.home-template-info { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 16px; }
.home-template-info h3 { font-size: 15px; font-weight: 400; margin: 0; }
.home-template-info > span { font-size: 10px; color: #69765d; }
.home-template-info i { margin-left: 10px; font-style: normal; }
.home-collection-note { margin: 32px 0 0; color: #747c6c; font-size: 10px; line-height: 1.8; }
.home-workflow { padding: 92px 5.5%; display: grid; grid-template-columns: .9fr 1.1fr; gap: 5%; }
.home-workflow ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; align-items: start; }
.home-workflow li { border-top: 1px solid #6a7a5666; padding-top: 20px; }
.home-workflow li > span { font: 36px var(--serif); color: #a7b693; }
.home-workflow h3 { font-size: 15px; font-weight: 400; margin: 25px 0 12px; }
.home-workflow li p { font-size: 11px; color: #9fa995; line-height: 1.9; }
.home-finale { position: relative; overflow: hidden; padding: 65px 5.5% 80px; background: #26311f; border-top: 1px solid #4b5a3d; }
.home-finale h2 { font: 400 clamp(48px,5.5vw,80px)/1.35 var(--serif); margin: 0 0 34px; position: relative; z-index: 1; }
.home-finale-mark { position: absolute; font: italic 480px/.8 var(--serif); right: 6%; bottom: -40px; color: #b3cb8c10; pointer-events: none; }
.home-finale .home-button { position: relative; z-index: 1; }
.home-footer { max-width: 1600px; margin: auto; padding: 30px 5.5%; display: flex; flex-wrap: wrap; gap: 20px 32px; align-items: center; border-top: 1px solid #d6dfc31c; }
.home-footer .home-brand { flex-shrink: 0; font: 32px var(--serif); }
.home-footer__meta { display: flex; flex: 1 1 420px; flex-wrap: wrap; align-items: center; min-width: 0; gap: 6px 22px; color: #a6b198; font-size: 11px; line-height: 1.9; }
.home-footer__meta > p { margin: 0; }
.home-footer__meta > :is(p,span) { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.home-footer__email { display: inline-flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%; min-height: 40px; padding: 4px 0; }
.home-footer__email > span { min-width: 0; overflow-wrap: anywhere; }
.home .home-footer__email { color: #c7d5b1; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px; }
.home .home-footer__email:hover, .home .home-footer__email:focus-visible { color: #eeeee5; text-decoration-color: currentColor; }
.home-footer__links { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; font-size: 11px; color: #b6c1a6; }
.home-footer__links a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }
.home-footer__links a:hover { color: #eeeee5; }
@media(max-width:760px) { .home-footer__meta { flex-basis: 100%; order: 2; gap: 6px 18px; } .home-footer__links { margin-left: auto; gap: 16px; } .home-footer__email { min-height: 44px; } }
@media(min-width:1000px) { .home-hero-copy { animation: home-enter .6s ease-out both; } .home-studio { animation: home-enter .8s .1s ease-out both; } }
@keyframes home-enter { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: none; } }
@media(max-width:1100px) { .home-hero { gap: 30px; padding-top: 48px; } .home-hero h1 { font-size: 72px; } .home-template-stage { padding: 28px; } .home-workflow { grid-template-columns: 1fr; gap: 32px; } }
@media(max-width:760px) { .home-nav { min-height: 78px; padding: 16px 6%; gap: 15px; } .home-nav nav { gap: 18px; font-size: 11px; } .home-nav nav a:last-child { display: none; } .home-brand { font-size: 22px; gap: 8px; } .home-brand > span { display: none; } .home-brand i { margin-left: -7px; } .home-nav-cta { padding: 9px 13px; gap: 12px; font-size: 11px; } .home-hero { padding: 44px 6% 50px; grid-template-columns: 1fr; gap: 40px; } .home-hero h1 { font-size: clamp(60px,12vw,86px); } .home-eyebrow { margin-bottom: 22px; font-size: 9px; } .home-hero-description { font-size: 13px; } .home-hero-actions { gap: 22px; } .home-button { font-size: 13px; gap: 30px; padding: 16px 20px; } .home-possibilities { grid-template-columns: 1fr; gap: 35px; padding: 48px 6% 50px; } .home-section-heading h2 br { display: none; } .home-feature-list article { gap: 12px 20px; } .home-collection { padding: 48px 6% 32px; } .home-collection-heading { display: block; } .home-collection-heading > p { margin-top: 20px; } .home-template-grid { grid-template-columns: 1fr; gap: 32px; } .home-template-stage { padding: 36px 22%; } .home-template-open { opacity: 1; transform: translate(-50%,0); } .home-template-info h3 { font-size: 17px; } .home-workflow { padding: 50px 6%; } .home-workflow ol { gap: 16px; } .home-workflow h3 { font-size: 13px; } .home-workflow li p { font-size: 10px; } .home-workflow li p br { display: none; } .home-finale { padding: 48px 6% 55px; } .home-finale-mark { font-size: 300px; right: -10%; bottom: -20px; } .home-footer { padding: 24px 6%; gap: 16px; flex-wrap: wrap; }  .home-footer > p { flex-basis: calc(100% - 90px); } .home-footer > a:last-child { margin-left: auto; } }
@media(max-width:360px) { .home-nav nav { gap: 12px; } .home-nav { gap: 12px; } .home-workflow ol { grid-template-columns: 1fr; gap: 24px; } .home-workflow li { display: grid; grid-template-columns: 45px 1fr; gap: 4px 12px; } .home-workflow h3 { margin: 0; align-self: center; } .home-workflow li p { grid-column: 2; margin: 0; } }
@media(prefers-reduced-motion:reduce) { .home *, .home *::before, .home *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

@media (max-width: 760px) {
  .home-finale h2 { font-size: clamp(34px, 10vw, 52px); }
}

.home-collection-tabs { display: flex; gap: 28px; border-bottom: 1px solid #aeb9a070; margin-bottom: 30px; }
.home-collection-tabs button { display: flex; align-items: center; gap: 10px; padding: 12px 0 16px; border: 0; border-bottom: 2px solid transparent; background: none; color: #748069; cursor: pointer; font-size: 14px; }
.home-collection-tabs button[aria-selected="true"] { color: #293b20; border-bottom-color: #526b3e; }
.home-collection-tabs button span { font-size: 10px; border: 1px solid #b9c3ad; border-radius: 20px; min-width: 22px; padding: 2px 6px; }
.home-article-paper { width: 100%; aspect-ratio: 3 / 4; overflow: hidden; background: #fff; position: relative; box-shadow: 0 8px 20px #242d251c; transition: transform .3s; }
.home-article-paper iframe { display: block; width: 375px; height: 1400px; border: 0; position: absolute; inset: 0 auto auto 0; transform: scale(var(--article-scale, .7)); transform-origin: top left; pointer-events: none; }
.home-article-template:hover .home-article-paper { transform: translateY(-7px); }
.home-article-description { font-size: 11px; line-height: 1.85; color: #6a775e; margin: 10px 0 0; }
@media (max-width:760px) { .home-article-stage { padding: 36px 16%; } .home-collection-tabs { gap: 24px; } .home-collection-tabs button { font-size: 13px; } }

.home-collection-controls { display: flex; align-items: center; gap: 22px; margin: -8px 0 26px; flex-wrap: wrap; }
.home-collection-controls > p { margin: 0; color: #6c795f; font-size: 11px; }
#collection-range { margin-left: 12px; font-variant-numeric: tabular-nums; }
.home-carousel-buttons { display: flex; align-items: center; gap: 6px; }
.home-carousel-buttons button { border: 1px solid #b9c3ad; color: #485e37; background: transparent; min-height: 34px; min-width: 36px; padding: 6px 10px; border-radius: 24px; cursor: pointer; font-size: 12px; }
.home-carousel-buttons #collection-pause { font-size: 10px; }
.home-carousel-buttons button:hover { background: #dce3d2; }
.home-browse { margin-left: auto; border: 0; padding: 8px 0; background: none; color: #405c2e !important; font-size: 12px; cursor: pointer; border-bottom: 1px solid #7e916b; }
.home-collection .home-template { animation: home-enter .45s ease-out both; }
.home-template-gate { margin-top: 40px; position: relative; min-height: 360px; isolation: isolate; overflow: hidden; }
.home-gate-samples { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 28px; padding: 20px; filter: blur(8px); opacity: .48; user-select: none; pointer-events: none; }
.home-gate-paper { padding: 30px; background: #fafaf6; color: #55684a; min-height: 330px; box-shadow: 0 6px 20px #26331f16; }
.home-gate-paper:nth-child(2) { background: #cbd6bd; transform: rotate(3deg); }
.home-gate-paper:nth-child(3) { background: #2d3826; color: #e3e9d9; transform: rotate(-3deg); }
.home-gate-paper small { font-size: 8px; }
.home-gate-paper strong { display: block; font: 32px/1.5 var(--serif); margin: 20px 0; }
.home-gate-paper i { display: block; height: 4px; margin: 10px 0; background: currentColor; opacity: .2; }
.home-gate-paper i:nth-of-type(2) { width: 70%; }
.home-gate-paper blockquote { font-size: 12px; margin: 24px 0; }
.home-gate-message { position: absolute; inset: 0; background: linear-gradient(#eeefe740, #eeefe7d9 35%, #eeefe7 96%); display: flex; align-items: center; justify-content: center; flex-direction: column; padding: 24px; text-align: center; }
.home-gate-message > span { font-size: 25px; color: #526b3e; }
.home-gate-message .home-eyebrow { margin: 12px 0; font-size: 9px; }
.home-gate-message h3 { font: 28px/1.5 var(--serif); margin: 0 0 10px; }
.home-gate-message > p:not(.home-eyebrow) { font-size: 12px; color: #68775c; line-height: 1.8; margin: 0 0 24px; }
.home-gate-message .home-button { background: #2d4022; color: #f2f5ec !important; font-size: 12px; }
.home-gate-message .home-button:hover { background: #415834; }
@media(max-width:760px) {
  .home-collection-controls { gap: 10px 12px; }
  .home-carousel-buttons { margin-left: auto; }
  .home-browse { flex-basis: 100%; text-align: right; margin-top: 6px; }
  .home-template-gate { min-height: 380px; }
  .home-gate-samples { width: 700px; margin-left: calc(50% - 350px); gap: 20px; }
  .home-gate-message { padding-inline: 12px; }
  .home-gate-message h3 { font-size: 24px; }
  .home-gate-message > p:not(.home-eyebrow) { font-size: 11px; }
  .home-gate-message .home-button { gap: 20px; padding-inline: 16px; }
}

.home-component-section { background: #1e2819; color: #e7eddf; }
.home-component-section .home-eyebrow { color: #a8bb94; }
.home-component-section h2 em { color: #bbcf9f; }
.home-component-section .home-collection-heading > p,
.home-component-section .home-collection-note,
.home-component-section .home-collection-controls > p { color: #a8b69a; }
.home-component-section .home-collection-tabs { border-color: #526344; }
.home-component-section .home-collection-tabs button { color: #9cad8c; }
.home-component-section .home-collection-tabs button[aria-selected="true"] { color: #d3e1c2; border-bottom-color: #bacfa0; }
.home-component-section .home-collection-tabs button span,
.home-component-section .home-carousel-buttons button { border-color: #627452; color: #c3d3b0; }
.home-component-section .home-carousel-buttons button:hover { background: #34442b; }
.home-component-section .home-browse { color: #c3d3b0 !important; border-color: #8fa774; }
.home-component-stage { height: 230px; padding: 20px; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; background: #edf0e7; border: 1px solid #4b5e3c; }
.home-component-stage .home-article-paper { width: 100%; height: 190px; aspect-ratio: auto; box-shadow: none; }
.home-component-stage canvas { display: block; width: 100%; height: auto; max-height: 190px; object-fit: contain; }
.home-component-section .home-template-info > span { color: #9eb38a; }
.home-component-section .home-gate-message { background: linear-gradient(#1e281940, #1e2819d9 35%, #1e2819 96%); }
.home-component-section .home-gate-message h3 { color: #e7eddf; }
.home-component-section .home-gate-message > p:not(.home-eyebrow) { color: #b4c4a2; }
.home-component-section .home-gate-message .home-button { background: #c7d5b1; color: #24311a !important; }
.home-component-section .home-gate-message > span { color: #bbcf9f; }
#components-range { margin-left: 12px; font-variant-numeric: tabular-nums; }
@media(max-width:760px) { .home-nav nav a:first-child { display: none; } .home-component-stage { height: 220px; padding: 16px; } }

/* A composition desk: two real formats, layered as finished editorial pieces. */
.home-hero { grid-template-columns: .95fr 1.05fr; gap: 4%; padding-top: 44px; padding-bottom: 58px; }
.home-hero h1 { font-size: clamp(60px, 6.5vw, 100px); }
.home-studio { position: relative; min-width: 0; isolation: isolate; }
.home-studio-heading { display: flex; align-items: center; justify-content: space-between; color: #8c9c7c; font-size: 8px; letter-spacing: .18em; padding: 0 14px 15px; border-bottom: 1px solid #a4b98b26; }
#studio-index { font-variant-numeric: tabular-nums; color: #bdcba9; letter-spacing: .12em; }
.home-studio-stage { position: relative; height: 540px; display: grid; place-items: center; padding: 32px 68px 30px 25px; }
.home-studio-stage::before { content: ''; position: absolute; width: 78%; aspect-ratio: 1; background: radial-gradient(circle,#a2bd7b12,transparent 70%); z-index: -2; top: 10%; left: 8%; }
.studio-watermark { position: absolute; z-index: -1; right: 10px; top: 10px; font: italic 240px/1 var(--serif); color: #9ebc7410; }
.studio-backpaper { position: absolute; width: 65%; height: 75%; left: 10%; top: 13%; transform: rotate(7deg); background: #85976d; border: 1px solid #9fb58a; box-shadow: 0 20px 60px #0002; z-index: -1; }
.studio-backpaper > span { position: absolute; top: 14px; right: 18px; font-size: 7px; letter-spacing: .16em; color: #e3ead6; }
.studio-guide { position: absolute; font-size: 9px; color: #97aa81; z-index: 5; letter-spacing: .06em; }
.studio-guide > span { margin-right: 8px; color: #becfa3; }
.studio-guide--top { top: 15px; left: 1px; }
.studio-guide--bottom { bottom: 13px; left: 20px; font-size: 8px; }
.studio-piece { grid-area: 1 / 1; position: relative; width: 100%; max-width: 355px; box-shadow: 4px 18px 45px #050a0355; animation: studio-appear .45s ease-out both; }
.studio-article { padding: 24px 26px 18px; background: #fafaf5; color: #2b3525; transform: rotate(-5deg); }
.studio-paper-meta { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 7px; letter-spacing: .06em; color: #737e66; border-bottom: 1px solid #d7ddcf; padding-bottom: 14px; }
.studio-paper-category { font-size: 6px; letter-spacing: .16em; color: #74865e; margin: 24px 0 10px; }
.studio-article h2 { font: 400 32px/1.5 var(--serif); letter-spacing: -.04em; margin: 0 0 13px; }
.studio-paper-intro { font-size: 10px; line-height: 1.95; color: #7d8773; margin: 0; }
.studio-paper-rule { width: 28px; height: 3px; background: #84966b; margin: 22px 0 16px; }
.studio-article h3 { font-size: 10px; font-weight: 500; margin: 0 0 12px; }
.studio-article h3 span { color: #8e9e78; font-size: 9px; margin-right: 8px; }
.studio-paper-body { font-size: 9px; line-height: 1.95; color: #7a836e; margin: 0; }
.studio-article blockquote { margin: 16px 0 22px; padding: 12px 16px; background: #edf0e6; border-left: 2px solid #9bab82; font: 12px/1.8 var(--serif); color: #5f6e50; }
.studio-article footer { display: flex; justify-content: space-between; padding-top: 10px; border-top: 1px solid #d7ddcf; font-size: 6px; letter-spacing: .1em; color: #7b866f; }
.studio-sticker { max-width: 295px; transform: rotate(-5deg); }
.studio-sticker canvas { display: block; width: 100%; height: auto; }
.studio-sticker-label { position: absolute; bottom: 18px; right: -18px; background: #61744d; border: 1px solid #8fa576; padding: 10px 12px; color: #e9efdf; font-size: 8px; letter-spacing: .04em; }
.studio-mini-sticker { width: 135px; position: absolute; right: 3px; bottom: 52px; background: #fafaf8; transform: rotate(9deg); box-shadow: -4px 8px 25px #03070145; border: 6px solid #fafaf8; z-index: 3; transition: opacity .25s, transform .25s; }
.studio-mini-sticker canvas { display: block; width: 100%; height: auto; }
.studio-mini-sticker > span { display: block; padding: 7px 0 2px; color: #858e7b; font-size: 5px; letter-spacing: .12em; text-align: center; }
.studio-mini-article { position: absolute; width: 144px; right: 0; bottom: 56px; background: #e4e8d8; padding: 18px 16px; color: #45543a; transform: rotate(9deg); box-shadow: -4px 8px 25px #03070145; z-index: 3; opacity: 0; visibility: hidden; }
.studio-mini-article > span { font-size: 6px; letter-spacing: .1em; }
.studio-mini-article strong { font: 22px/1.5 var(--serif); display: block; margin: 14px 0; }
.studio-mini-article i { display: block; background: #b2bca3; height: 2px; margin: 6px 0; }
.studio-mini-article i:last-of-type { width: 65%; }
.studio-mini-article small { display: block; font-size: 5px; margin-top: 18px; color: #849472; }
.studio-seal { width: 66px; height: 66px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 4px; border: 1px solid #b2c694; border-radius: 50%; background: #22301af2; color: #cfdfb8; font-size: 13px; transform: rotate(11deg); position: absolute; right: 12px; top: 48px; z-index: 4; }
.studio-seal i { font-style: normal; font-size: 7px; }
.home-studio[data-mode="sticker"] .studio-mini-sticker { opacity: 0; visibility: hidden; }
.home-studio[data-mode="sticker"] .studio-mini-article { opacity: 1; visibility: visible; animation: studio-note .4s ease-out; }
.home-studio-footer { border-top: 1px solid #a4b98b26; padding: 14px 4px 0; }
.studio-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.studio-switch button { display: flex; align-items: center; gap: 9px; padding: 12px 10px; border: 0; border-bottom: 1px solid #6b80533b; background: transparent; color: #8c9e79; font-size: 12px; cursor: pointer; text-align: left; transition: color .2s,border-color .2s; }
.studio-switch button > span { font-size: 8px; color: #6f855c; font-variant-numeric: tabular-nums; }
.studio-switch button > i { font-style: normal; margin-left: auto; font-size: 14px; opacity: .4; }
.studio-switch button[aria-selected="true"] { color: #dce8cc; border-color: #b2c795; }
.studio-switch button[aria-selected="true"] > i { opacity: 1; }
.home-studio-footer > p { font-size: 8px; letter-spacing: .05em; color: #82966e; margin: 14px 10px 0; }
@keyframes studio-appear { from { opacity: 0; translate: 0 10px; } to { opacity: 1; translate: 0 0; } }
@keyframes studio-note { from { opacity: 0; translate: 8px 5px; } to { opacity: 1; translate: 0 0; } }
@media(max-width:1100px) {
  .home-studio-stage { height: 505px; padding: 38px 50px 30px 15px; }
  .studio-article { padding: 22px 22px 16px; }
  .studio-article h2 { font-size: 27px; }
  .studio-mini-sticker { width: 108px; bottom: 40px; right: 0; }
  .studio-mini-article { width: 120px; bottom: 40px; padding: 14px; }
  .studio-mini-article strong { font-size: 19px; }
  .studio-seal { right: 0; top: 43px; width: 58px; height: 58px; font-size: 11px; }
}
@media(max-width:760px) {
  .home-hero { grid-template-columns: 1fr; padding-top: 38px; gap: 34px; }
  .home-hero h1 { font-size: clamp(60px, 12vw, 86px); }
  .home-studio { width: 100%; max-width: 500px; margin: auto; }
  .home-studio-stage { height: 485px; padding: 40px 52px 30px 18px; }
  .studio-article h2 { font-size: 27px; }
  .studio-article { padding: 22px 20px 15px; }
  .studio-mini-sticker { width: 112px; bottom: 42px; right: 5px; }
  .studio-mini-article { right: 3px; }
  .studio-guide--bottom { left: 6px; }
  .studio-seal { top: 35px; right: 7px; }
}
@media(max-width:360px) {
  .home-studio-stage { height: 465px; padding-right: 38px; padding-left: 10px; }
  .studio-article h2 { font-size: 23px; }
  .studio-article { padding: 20px 17px 14px; }
  .studio-paper-meta { font-size: 6px; }
  .studio-paper-category { font-size: 5px; }
  .studio-mini-sticker { width: 93px; right: 0; bottom: 46px; }
  .studio-mini-article { width: 105px; bottom: 46px; }
  .studio-mini-article strong { font-size: 18px; }
  .studio-switch button { padding-inline: 4px; font-size: 11px; }
}

/* The editorial studio: paper outside, a deep green composition desk inside. */
.home { --home-green: #bccd9e; --accent: #526b40; background: #f3f2eb; color: #263528; }
.home-reading-progress { position: fixed; z-index: 50; top: 0; left: 0; height: 3px; width: 100%; background: #526b40; transform: scaleX(var(--reading-progress,0)); transform-origin: left; pointer-events: none; }
.home-nav { position: sticky; top: 0; z-index: 30; max-width: none; min-height: 82px; background: #f3f2ebf2; backdrop-filter: blur(18px); border-color: #26352820; transition: box-shadow .3s; }
.home.is-scrolled .home-nav { box-shadow: 0 8px 25px #26352808; }
.home-brand > span { background: #293e2b; color: #edf0e4; border-radius: 3px; height: 34px; width: 34px; }
.home-brand i { color: #677c51; }
.home-nav nav { color: #63715f; gap: 28px; }
.home-nav nav a { position: relative; padding: 12px 0; }
.home-nav nav a::after { content: ''; position: absolute; bottom: 4px; height: 1px; left: 0; width: 100%; background: #45603b; transform: scaleX(0); transform-origin: left; transition: transform .25s; }
.home-nav nav a:is(:hover,[aria-current]) { color: #263528; }
.home-nav nav a:is(:hover,[aria-current])::after { transform: scaleX(1); }
.home-nav-cta { border-color: #a6b19a; min-height: 44px; }
.home-nav-cta:hover { background: #293e2b; color: #f3f2eb; }
.home-hero { grid-template-columns: 1fr 1fr; padding-block: 66px 72px; gap: 5%; align-items: center; }
.home-hero-copy { min-width: 0; }
.home-eyebrow { color: #697c5f; font-size: 10px; }
.home-eyebrow > span { background: #708d54; box-shadow: 0 0 0 4px #708d5414; }
.home-hero h1 { font-size: clamp(52px,5.3vw,84px); line-height: 1.35; letter-spacing: -.065em; }
.home h1 em { color: #6a8058; display: inline-block; position: relative; }
.home h1 em::after { content: ''; height: 7px; position: absolute; bottom: 5px; left: 0; width: 95%; background: #c0cfaa66; transform: rotate(-2deg); z-index: -1; }
.home-asterisk { position: absolute; right: 9%; top: -24px; margin: 0; font-size: 35px; color: #6a8058; }
.home-hero-description { color: #68725f; margin-block: 26px 32px; line-height: 2; }
.home-button { background: #293e2b; color: #f3f2eb !important; border-radius: 0; min-height: 54px; }
.home-button:hover { background: #45603b; box-shadow: 0 8px 22px #293e2b18; }
.home-button svg, .home-nav-cta svg, .home-text-link svg { transition: transform .25s; }
.home-button:hover svg, .home-nav-cta:hover svg { transform: translate(3px,-3px); }
.home-text-link { color: #556b47 !important; padding-block: 14px; }
.home-text-link:hover svg { transform: translateY(4px); }
.home-hero-note { color: #7d8573; margin-top: 30px; font-size: 10px; }
.home-studio { --paper:#fafaf5; --paper-ink:#2b3525; --paper-accent:#74865e; --paper-panel:#edf0e6; --paper-line:#d7ddcf; background: #1e2c22; color: #e7eddf; padding: 22px 26px 20px; border-radius: 3px; box-shadow: 0 24px 50px #25332714; }
.home-studio[data-tone="clay"] { --paper:#fff7ef; --paper-ink:#563c32; --paper-accent:#a3674f; --paper-panel:#f2e4d8; --paper-line:#e4cebf; }
.home-studio[data-tone="blue"] { --paper:#f4f8fb; --paper-ink:#273d50; --paper-accent:#567b9d; --paper-panel:#e4edf4; --paper-line:#cbdbe6; }
.home-studio-heading { padding: 0 0 14px; color: #afbea3; font-size: 8px; }
.home-studio-stage { height: 458px; padding: 34px 55px 28px 16px; transform: perspective(1100px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)); transition: transform .45s ease-out; }
.studio-piece { max-width: 302px; }
.studio-article { padding: 21px 23px 15px; background: var(--paper); color: var(--paper-ink); transition: background .4s,color .4s; }
.studio-article h2 { font-size: 28px; }
.studio-paper-category { margin-top: 20px; color: var(--paper-accent); }
.studio-paper-meta, .studio-article footer { color: var(--paper-accent); border-color: var(--paper-line); }
.studio-paper-rule { margin-block: 18px 14px; background: var(--paper-accent); }
.studio-paper-intro, .studio-paper-body { color: var(--paper-accent); }
.studio-article h3 span { color: var(--paper-accent); }
.studio-article blockquote { background: var(--paper-panel); border-color: var(--paper-accent); color: var(--paper-ink); margin-block: 14px 16px; }
.studio-sticker { max-width: 264px; }
.studio-mini-sticker { width: 110px; right: -6px; bottom: 32px; }
.studio-mini-article { right: -6px; width: 120px; bottom: 32px; }
.studio-mini-article strong { font-size: 20px; }
.studio-guide { color: #b4c5a5; font-size: 8px; }
.studio-guide--top { top: 12px; }
.studio-guide--bottom { bottom: 4px; left: 0; }
.studio-seal { width: 58px; height: 58px; top: 32px; right: -10px; font-size: 11px; }
.studio-backpaper { left: 12%; width: 62%; height: 76%; }
.studio-watermark { font-size: 210px; }
.studio-palette { display: flex; align-items: center; gap: 4px; padding: 14px 0 10px; }
.studio-palette > span { color: #c5d1ba; font-size: 10px; margin-right: 10px; }
.studio-palette button { width: 36px; height: 36px; border: 1px solid transparent; border-radius: 50%; background: transparent; cursor: pointer; padding: 8px; transition: border-color .2s,transform .2s; }
.studio-palette button::before { content: ''; display: block; width: 100%; height: 100%; background: var(--swatch); border-radius: 50%; border: 1px solid #ffffff30; }
.studio-palette button[aria-pressed="true"] { border-color: #d5dfc5; }
.studio-palette button:hover { transform: translateY(-2px); }
.studio-palette small { margin-left: auto; font-size: 8px; color: #a7ba99; }
.home-studio-footer { padding-top: 5px; }
.studio-switch button { min-height: 44px; }
.home-studio-footer > p { color: #a4b798; font-size: 9px; margin-top: 10px; }
.home-format-strip { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px 5.5%; border-block: 1px solid #293e2b28; }
.home-format-strip > span { font-size: 8px; letter-spacing: .12em; color: #78826e; }
.home-format-strip > div { display: flex; align-items: center; gap: 24px; }
.home-format-strip b { font-weight: 400; font-size: 14px; letter-spacing: .12em; }
.home-format-strip i { width: 4px; height: 4px; background: #84966e; transform: rotate(45deg); }
.home-format-strip > a { font-size: 11px; display: flex; align-items: center; gap: 20px; min-height: 40px; }
.home-possibilities { padding-block: 108px; border: 0; gap: 12%; }
.home-section-heading > p:last-child { color: #6c7863; }
.home-feature-list article { padding: 28px 0; border-color: #293e2b28; position: relative; transition: padding .3s; }
.home-feature-list article:hover { padding-left: 12px; }
.home-feature-symbol { color: #6c8257; }
.home-feature-list h3 { font: 26px/1.5 var(--serif); }
.home-feature-list p { color: #6c7863; }
.home-feature-index { color: #788b69; }
.home-section-heading h2, .home-workflow h2 { font-size: clamp(30px,3vw,46px); letter-spacing: -.04em; }
.home-collection { padding-block: 90px 60px; background: #e7eadf; border-top: 1px solid #293e2b20; }
.home-collection h2 { letter-spacing: -.04em; }
.home-template-grid { gap: 24px; }
.home-template-stage { border: 1px solid #2635280f; }
.home-template-info { padding-top: 20px; }
.home-template-info h3 { font-size: 17px; }
.home-template-info i svg { transition: transform .3s; }
.home-template:hover .home-template-info i svg { transform: translate(3px,-3px); }
.home-carousel-buttons button { min-width: 44px; min-height: 44px; }
.home-collection-tabs button { min-height: 52px; }
.home-component-section { background: #24352a; color: #e7eddf; border: 0; }
.home-component-section .home-gate-message { background: linear-gradient(#24352a40,#24352ad9 35%,#24352a 96%); }
.home-workflow { padding-block: 100px; }
.home-workflow h2 em { color: #72855f; }
.home-workflow li { border-color: #293e2b35; transition: transform .3s; }
.home-workflow li:hover { transform: translateY(-6px); }
.home-workflow li > span { color: #788d64; }
.home-workflow li p { color: #6c7863; }
.home-finale { background: #d8e2ca; color: #263528; border: 0; padding-block: 78px 90px; }
.home-finale h2 em { color: #6a8058; }
.home-finale-mark { color: #78966120; }
.home-footer { border-color: #293e2b20; }
.home-footer__meta { color: #6d7b63; }
.home-footer__links { color: #556b47; }
.home .home-footer__email { color: #45603b; }
.home-footer__links a:hover, .home .home-footer__email:hover { color: #263528; }
.home-reveal { transition: opacity .7s ease,translate .7s cubic-bezier(.2,.7,.2,1); }
.home-reveal.is-waiting { opacity: 0; translate: 0 24px; }
@media(min-width:1101px) { .home-section-heading { position: sticky; top: 130px; align-self: start; } }
@media(max-width:1100px) and (min-width:761px) {
  .home-hero { gap: 4%; padding-inline: 4%; }
  .home-hero h1 { font-size: 5.3vw; }
  .home-studio { padding-inline: 20px; }
  .home-studio-stage { height: 455px; padding-right: 40px; padding-left: 6px; }
  .studio-article h2 { font-size: 24px; }
  .studio-mini-sticker { width: 94px; }
  .home-format-strip > span { display: none; }
  .home-hero-actions { gap: 16px; flex-wrap: wrap; }
}
@media(max-width:760px) {
  .home-nav { min-height: 72px; padding: 12px 6%; gap: 12px; }
  .home-nav nav { gap: 16px; font-size: 11px; }
  .home-nav nav a { min-height: 44px; display: inline-flex; align-items: center; }
  .home-nav nav a:first-child, .home-nav nav a:last-child { display: none; }
  .home-nav-cta { padding-inline: 12px; gap: 8px; }
  .home-hero { padding: 48px 6% 42px; grid-template-columns: 1fr; gap: 36px; }
  .home-hero h1 { font-size: clamp(42px,8.6vw,65px); line-height: 1.4; letter-spacing: -.065em; }
  .home-asterisk { right: 7%; top: -7px; font-size: 26px; }
  .home-hero-description { font-size: 13px; margin-block: 20px 24px; }
  .home-hero-actions { gap: 22px; flex-wrap: wrap; }
  .home-hero-note { margin-top: 20px; }
  .home-studio { padding: 18px 18px 16px; max-width: 500px; }
  .home-studio-stage { height: 440px; padding: 32px 40px 26px 6px; }
  .studio-article { padding: 20px 19px 15px; }
  .studio-article h2 { font-size: 25px; }
  .studio-seal { right: -9px; top: 30px; width: 50px; height: 50px; font-size: 10px; }
  .studio-mini-sticker { width: 98px; right: -9px; bottom: 29px; }
  .studio-mini-article { width: 104px; right: -9px; }
  .studio-mini-article strong { font-size: 18px; }
  .studio-palette button { width: 44px; height: 44px; padding: 11px; }
  .studio-palette > span { margin-right: 1px; }
  .studio-palette small { font-size: 8px; }
  .home-studio-footer > p { font-size: 9px; }
  .home-format-strip { padding: 15px 6%; gap: 14px; }
  .home-format-strip > span, .home-format-strip > a { display: none; }
  .home-format-strip > div { width: 100%; justify-content: space-between; gap: 8px; }
  .home-format-strip b { font-size: 11px; letter-spacing: .05em; }
  .home-format-strip i { width: 3px; height: 3px; }
  .home-possibilities { padding: 56px 6%; gap: 28px; }
  .home-feature-list h3 { font-size: 23px; }
  .home-collection { padding: 56px 6% 38px; }
  .home-collection-controls { gap: 8px; }
  .home-carousel-buttons { gap: 4px; }
  .home-carousel-buttons button { padding-inline: 8px; font-size: 10px; }
  .home-workflow { padding: 56px 6%; }
  .home-finale { padding: 56px 6% 64px; }
}
@media(max-width:360px) {
  .home-nav nav a { font-size: 10px; }
  .home-nav nav { gap: 10px; }
  .home-brand { font-size: 20px; }
  .home-studio-stage { height: 420px; padding-right: 30px; }
  .studio-article h2 { font-size: 22px; }
  .studio-article { padding-inline: 15px; }
  .studio-palette small { display: none; }
  .home-collection-controls > p { font-size: 10px; }
}
@media(prefers-reduced-motion:no-preference) {
  html:has(.home) { scroll-behavior: smooth; scroll-padding-top: 100px; }
  .home-asterisk { animation: home-asterisk-turn 1.8s ease-out both; }
}
@keyframes home-asterisk-turn { from { rotate: -100deg; opacity: 0; } to { rotate: 0deg; opacity: 1; } }
@media(prefers-reduced-motion:reduce) {
  .home-reveal.is-waiting { opacity: 1; translate: none; }
  .home-studio-stage { transform: none; }
}
/* Keep rotated paper edges clear of the palette and format controls. */
@media(min-width:1101px) { .home-studio-stage { height: 510px; } }
@media(max-width:760px) { .home-studio-stage { height: 475px; } }
@media(max-width:360px) { .home-studio-stage { height: 450px; } }

html:has(.home) { scroll-padding-top: 100px; }
@media(max-width:760px) { .studio-guide--bottom { display: none; } }

/* A compact preview supports the headline without taking over the first screen. */
@media(min-width:761px) {
  .home-hero { grid-template-columns: 1.12fr .88fr; padding-block: 54px 62px; }
  .home-studio { width: 100%; max-width: 440px; margin-left: auto; padding: 20px 22px 16px; }
}
.home-studio-stage { height: 330px; padding: 18px 42px 12px 8px; }
.studio-piece { width: 300px; max-width: none; transform: rotate(-5deg) scale(.72); }
.studio-sticker { width: 264px; }
.studio-backpaper { height: 78%; width: 61%; top: 11%; left: 12%; }
.studio-mini-sticker { width: 84px; right: -2px; bottom: 20px; border-width: 4px; }
.studio-mini-article { width: 94px; right: -2px; bottom: 22px; padding: 12px; }
.studio-mini-article strong { font-size: 16px; }
.studio-seal { width: 46px; height: 46px; top: 23px; right: -3px; font-size: 9px; }
.studio-seal i { font-size: 6px; }
.studio-guide--top { top: 8px; }
.studio-guide--bottom { display: none; }
.studio-watermark { font-size: 170px; }
.studio-palette { padding-block: 10px 8px; }
.home-studio-footer > p { margin-top: 8px; }
@media(max-width:1100px) and (min-width:761px) {
  .home-studio { padding-inline: 16px; }
  .studio-palette small { display: none; }
  .studio-switch { gap: 8px; }
  .studio-switch button { padding-inline: 3px; font-size: 11px; }
}
@media(max-width:760px) {
  .home-studio { max-width: 420px; }
  .home-studio-stage { height: 335px; padding: 18px 34px 10px 2px; }
  .studio-piece { transform: rotate(-5deg) scale(.70); }
  .studio-seal { right: -5px; }
}
@media(max-width:360px) {
  .home-studio-stage { height: 310px; padding-right: 22px; }
  .studio-piece { transform: rotate(-5deg) scale(.65); }
  .studio-mini-sticker { width: 74px; right: -7px; }
  .studio-mini-article { width: 82px; right: -7px; }
}
.home-studio-stage { grid-template-rows: minmax(0,1fr); grid-template-columns: minmax(0,1fr); }
.studio-guide { display: none; }
html:has(.home) { color-scheme: light; }
/* Keep the first paint readable; motion belongs to the paper and later sections. */
.home-hero-copy, .home-studio { animation: none; }
.studio-piece { animation: studio-settle .45s ease-out both; }
@keyframes studio-settle { from { translate: 0 8px; } to { translate: 0 0; } }

/* Mobile disclosure keeps the masthead quiet and every section reachable. */
.home-menu-toggle { display: none; }
@media(max-width:760px) {
  .home-nav { gap: 8px; min-height: 64px; padding-block: 8px; }
  .home-nav .home-nav-cta { margin-left: 0; flex-shrink: 0; min-height: 44px; min-width: 44px; justify-content: flex-end; padding: 4px 0 4px 8px; border: 0; border-radius: 0; background: transparent; color: #344a30; font-size: 12px; }
  .home-nav .home-nav-cta > span { display: none; }
  .home-nav .home-nav-cta:hover { background: transparent; color: #647d50; }
  .home-menu-toggle { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; margin-left: auto; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 0; color: #344a30; background: transparent; cursor: pointer; }
  .home-menu-toggle__label { display: none; }
  .home-menu-toggle:hover { color: #647d50; }
  .home-menu-toggle__icon { position: relative; width: 16px; height: 16px; display: block; }
  .home-menu-toggle__icon i { position: absolute; left: 0; top: 5px; width: 16px; height: 1px; background: currentColor; transition: transform .2s,top .2s; }
  .home-menu-toggle__icon i:last-child { top: 11px; }
  .home-nav.is-menu-open .home-menu-toggle__icon i { top: 8px; transform: rotate(45deg); }
  .home-nav.is-menu-open .home-menu-toggle__icon i:last-child { transform: rotate(-45deg); }
  .home-nav .home-primary-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; max-height: calc(100dvh - 64px); overflow-y: auto; padding: 12px 6% 18px; background: #f3f2eb; border-bottom: 1px solid #cbd4c1; box-shadow: 0 16px 24px #25382012; flex-direction: column; align-items: stretch; gap: 0; }
  .home-nav.is-menu-open .home-primary-nav { display: flex; }
  .home-nav.is-menu-open nav a { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 48px; padding: 13px 4px; border-bottom: 1px solid #27352612; font-size: 13px; color: #43583a; }
  .home-nav.is-menu-open nav a:last-child { border-bottom: 0; }
  .home-nav.is-menu-open nav a::after { position: static; width: 6px; height: 6px; border: solid currentColor; border-width: 1px 1px 0 0; background: none; transform: rotate(45deg); flex-shrink: 0; }
  .home-nav.is-menu-open nav a[aria-current] { color: #263c21; background: #e5ecdd; }
  .home h2[tabindex="-1"]:focus { outline: none; }
}
@media(max-width:360px) {
  .home-nav { gap: 8px; }
  .home-menu-toggle__label { display: none; }
}