/* Editorial home. Shared colour tokens and public account pages live in styles.css. */
.editorial { --hero: hsl(14 48% 36%); --hero-ink: hsl(36 65% 94%); }
.editorial h2 em { font-style: normal; color: var(--terracotta); }
.editorial .button { gap: 18px; }
.skip-link { position: fixed; left: 16px; top: -80px; padding: 12px; background: var(--paper); z-index: 99; }
.skip-link:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--terracotta); outline-offset: 5px; }
section[id] { scroll-margin-top: 100px; }
.opening { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; padding-block: 85px 80px; }
.opening h1 { font-size: clamp(4rem, 7.8vw, 7rem); letter-spacing: -.055em; }
.intro { font-size: clamp(1.15rem, 2vw, 1.4rem); line-height: 1.65; margin: 30px 0 20px; }
.opening-description { max-width: 400px; color: var(--muted); margin-bottom: 28px; }
.release-note { display: flex; gap: 9px; align-items: center; font-size: .76rem; color: var(--muted); margin-top: 20px; }
.status-dot { width: 6px; height: 6px; background: var(--terracotta); border-radius: 50%; }
.app-stage { display: flex; position: relative; flex-direction: column; align-items: center; padding: 32px 0 12px; }
.app-stage::before { content: ''; position: absolute; inset: 8% -5% 9%; background: var(--sand); border-radius: 48% 48% 10px 10px; transform: rotate(-5deg); z-index: -1; }
.stage-note { font: 500 .95rem 'Lora', serif; color: var(--terracotta); padding-bottom: 22px; }
.app-preview { width: min(342px,100%); padding: 22px 20px 14px; border: 1px solid var(--line); border-radius: 32px; background: var(--cream); box-shadow: 0 14px 38px #432c2110; transform: rotate(2deg); }
.preview-brand { display: flex; align-items: center; gap: 8px; font: 600 17px 'Lora', serif; margin-bottom: 24px; }
.preview-brand img { border-radius: 11px; }.preview-brand > span { margin-left: auto; font-size: 25px; }
.app-preview .eyebrow { font-size: 9px; margin: 0 0 8px; }.app-preview h2 { margin: 0; font-size: 35px; font-weight: 500; }
.preview-greeting { color: var(--muted); font-size: 11px; margin-block: 12px 20px; }
.today-banner { border-radius: 19px; padding: 19px; background: var(--hero); color: var(--hero-ink); }
.today-label { display: flex; justify-content: space-between; font-size: 9px; letter-spacing: .09em; }.today-label span { letter-spacing: 0; }
.today-name { font: 500 32px 'Lora', serif; margin-top: 7px; display: flex; justify-content: space-between; }.today-name span { font-size: 26px; }
.today-banner p { font-size: 11px; line-height: 1.65; margin-bottom: 16px; }
.copy-preview { display: block; padding: 8px; text-align: center; border: 1px solid #fff5; border-radius: 100px; font-size: 10px; }
.app-preview .upcoming-label { margin-top: 24px; }.app-preview h3 { font-size: 23px; font-weight: 500; margin: 0 0 10px; }
.agenda-example { display: flex; align-items: center; gap: 14px; border-bottom: 1px solid var(--line); padding-block: 10px; }
.agenda-example > div { display: grid; text-align: center; color: var(--terracotta); }.agenda-example b { font: 500 26px 'Lora',serif; }.agenda-example span { font-size: 8px; }.agenda-example strong { font-size: 13px; font-weight: 500; }.agenda-example small { font-size: 9px; margin-left: auto; color: var(--muted); }
.preview-tabs { display: flex; justify-content: space-around; margin-top: 16px; border: 1px solid var(--line); border-radius: 40px; background: var(--paper); padding: 6px; }.preview-tabs > span { display: flex; align-items: center; gap: 3px; padding: 6px; font-size: 17px; border-radius: 20px; }.preview-tabs small { font: 8px 'Inter', sans-serif; }.preview-tabs .active { background: var(--sand); color: var(--terracotta); }
.preview-caption { font-size: 10px; color: var(--muted); padding-top: 22px; }
.occasion-strip { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 30px; padding: 25px 20px; border-block: 1px solid var(--line); font: 500 20px 'Lora',serif; }.occasion-strip i { color: var(--terracotta); font-style: normal; font-size: 14px; }
.story-section { padding-block: 110px; }.section-heading h2,.practical h2 { font-size: clamp(2.4rem,4.5vw,3.7rem); font-weight: 500; margin: 0; line-height: 1.15; }.section-copy { color: var(--muted); max-width: 440px; margin: 25px 0 0; }
.open-features { display: grid; grid-template-columns: repeat(3,1fr); gap: 40px; margin-top: 60px; }.open-features article { border-top: 1px solid var(--line); padding-top: 24px; }.feature-number { font: 500 16px 'Lora',serif; color: var(--terracotta); }.open-features h3 { font-size: 24px; font-weight: 500; margin: 25px 0 15px; }.open-features p { font-size: 14px; color: var(--muted); }
.timeline-section { padding-block: 96px; background: var(--sand); }.split-section { display: grid; grid-template-columns: 1fr 1fr; gap: 90px; align-items: center; }.demo-hint { font-size: 13px; color: var(--terracotta); margin-top: 35px; }
.timeline-demo { background: var(--cream); border: 1px solid var(--line); border-radius: 28px; overflow: hidden; }.demo-top { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 6px; padding: 22px; border-bottom: 1px solid var(--line); font: 500 17px 'Lora',serif; }.demo-top small { font: 10px 'Inter',sans-serif; color: var(--muted); }.timeline-body { display: flex; height: 480px; padding: 18px 10px 0; }.month-rail { display: flex; flex-direction: column; flex: 0 0 58px; position: relative; padding-bottom: 15px; }.month-rail button { flex: 1; font: 500 10px 'Inter',sans-serif; background: none; border: none; border-left: 2px solid var(--line); color: var(--muted); cursor: pointer; border-radius: 0 9px 9px 0; }.month-rail button[aria-current="true"] { border-left-color: var(--terracotta); color: var(--terracotta); background: var(--sand); }.month-scroll { flex: 1; min-width: 0; overflow-y: auto; overscroll-behavior: contain; scroll-behavior: smooth; padding: 0 16px; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }.demo-month { min-height: 245px; padding-top: 4px; }.demo-month:last-child { min-height: 462px; }.demo-month h3 { display: flex; align-items: baseline; gap: 10px; font-size: 31px; font-weight: 500; margin: 0 0 15px; }.demo-month h3 span { font: 11px 'Inter',sans-serif; color: var(--terracotta); }.demo-event { display: flex; align-items: center; gap: 13px; padding: 18px 0; border-top: 1px solid var(--line); }.demo-event > span { font: 500 25px 'Lora',serif; color: var(--terracotta); }.demo-event strong { display: block; font-size: 14px; font-weight: 500; }.demo-event small { display: block; font-size: 11px; color: var(--muted); margin-top: 3px; }.demo-footnote { margin: 0; padding: 12px 20px; border-top: 1px solid var(--line); font-size: 10px; color: var(--muted); }
.sharing-art { border-block: 1px solid var(--line); padding: 30px 14px; }.sharing-art h3 { font-size: 40px; font-weight: 500; margin: 12px 0 0; }.share-link-label { font-size: 12px; color: var(--muted); display: block; margin: 8px 0 30px; }.people-example { display: flex; align-items: center; gap: 15px; padding: 17px 0; border-top: 1px solid var(--line); font-size: 14px; }.people-example > span { border-radius: 50%; width: 44px; height: 44px; display: grid; place-items: center; background: var(--sand); color: var(--terracotta); font-size: 12px; }.people-example small { display: block; color: var(--muted); font-size: 11px; }.people-example b { margin-left: auto; color: var(--terracotta); }.share-preview-footer { margin-top: 25px; }.share-preview-footer > span { display: block; text-align: center; font-size: 11px; color: var(--muted); }.share-preview-footer strong { display: block; background: var(--hero); color: var(--hero-ink); border-radius: 40px; padding: 15px; font-size: 13px; font-weight: 500; text-align: center; margin-top: 10px; }.share-facts { display: flex; flex-wrap: wrap; gap: 10px 20px; margin-top: 30px; font-size: 11px; color: var(--terracotta); }
.practical { display: grid; grid-template-columns: 1fr 1fr; gap: 0 90px; padding-block: 10px 90px; }.practical > .eyebrow { grid-column: 1 / -1; }.practical-lines > div { border-top: 1px solid var(--line); padding: 18px 0; }.practical-lines span { font-size: 16px; font-weight: 500; }.practical-lines p { font-size: 13px; color: var(--muted); margin: 8px 0 0; }
.faq-section { padding-block: 40px 100px; max-width: 860px; }.faq-section .section-heading { margin-bottom: 35px; }.faq-section details { border-bottom: 1px solid var(--line); padding-block: 22px; }.faq-section summary { cursor: pointer; font-size: 16px; padding-right: 12px; }.faq-section details p { font-size: 14px; color: var(--muted); padding-right: 25px; }
.invitation { background: var(--hero); color: var(--hero-ink); text-align: center; padding: 90px 0; }.invitation .eyebrow { color: inherit; opacity: .8; }.invitation h2 { font-size: clamp(3.3rem,6vw,5.5rem); font-weight: 500; margin: 25px 0; }.invitation h2 em { color: inherit; opacity: .75; }.invitation p { font-size: 15px; }.invitation .button { margin-top: 18px; background: var(--cream); border-color: var(--cream); color: var(--hero); }.invitation .invitation-note { font-size: 11px; margin: 15px 0 28px; }.text-link { font-size: 13px; text-underline-offset: 5px; }.editorial .footer { padding-block: 48px; }.editorial .footer-links { max-width: 470px; }
@media(max-width:860px) { .opening { gap: 32px; padding-block: 50px; }.opening h1 { font-size: 64px; }.split-section { gap: 40px; }.open-features { gap: 24px; }.story-section { padding-block: 75px; }.practical { gap: 25px; } }
@media(max-width:640px) { .opening { grid-template-columns: 1fr; }.opening h1 { font-size: clamp(62px,16vw,84px); }.opening-copy .eyebrow { font-size: 10px; }.app-stage { margin-top: 10px; }.app-stage::before { inset-inline: 0; }.app-preview { transform: none; }.opening-description { font-size: 14px; }.occasion-strip { gap: 12px 18px; font-size: 14px; }.occasion-strip i { font-size: 10px; }.occasion-strip i:last-of-type { display: none; }.split-section,.open-features,.practical { grid-template-columns: 1fr; }.open-features { gap: 22px; margin-top: 35px; }.open-features h3 { margin-top: 12px; }.timeline-section { padding-block: 65px; }.timeline-body { height: 455px; }.section-heading h2,.practical h2 { font-size: 38px; }.sharing-section .section-heading { grid-row: 1; }.practical { padding-bottom: 40px; }.practical-lines { margin-top: 12px; }.faq-section { padding-bottom: 65px; }.invitation { padding-block: 65px; }.editorial .nav-links { gap: 0; }.editorial .brand-name { font-size: 20px; }.editorial .brand { gap: 7px; }.editorial .nav { gap: 12px; }.editorial .nav .button { font-size: 11px; padding-inline: 13px; gap: 8px; }.editorial .brand img { width: 36px; height: 36px; } }
@media(prefers-reduced-motion:reduce) { .month-scroll { scroll-behavior: auto; } }