:root { color-scheme:light; --paper:#f6f4ed; --ink:#223e35; --muted:#617168; --rule:#ccd3c9; --accent:#28513f; --serif:Georgia,'Times New Roman',serif; --sans:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:30px; }
body { margin:0; background:var(--paper); color:var(--ink); font:16px/1.65 var(--sans); }
a { color:inherit; text-underline-offset:4px; }
button { font:inherit; }
img { display:block; max-width:100%; height:auto; }
.wrap { width:min(1160px,calc(100% - 80px)); margin-inline:auto; }
.skip { position:absolute; top:-80px; left:20px; z-index:20; background:var(--ink); color:white; padding:12px; }.skip:focus{top:10px;}
.site-header { display:flex; justify-content:space-between; align-items:center; gap:24px; padding-block:27px; border-bottom:1px solid var(--rule); }
.brand { display:inline-flex; align-items:center; gap:10px; font-weight:650; letter-spacing:-.025em; text-decoration:none; white-space:nowrap; }.brand-note { font-size:12px; font-weight:400; color:var(--muted); margin-left:4px; }
nav { display:flex; align-items:center; gap:25px; font-size:13px; }nav a { text-decoration:none; }nav a:hover { text-decoration:underline; }.nav-source { border-left:1px solid var(--rule); padding-left:25px; }
.hero { display:grid; grid-template-columns:1.1fr 1fr; gap:75px; align-items:center; padding-block:90px 84px; }
.eyebrow { font-size:11px; font-weight:600; line-height:1.6; text-transform:uppercase; letter-spacing:.115em; margin:0 0 24px; }
.status-dot { display:inline-block; width:6px; height:6px; border-radius:50%; background:currentColor; margin-right:7px; vertical-align:middle; }
h1,h2 { font-family:var(--serif); font-weight:400; letter-spacing:-.055em; line-height:1.08; margin:0; }
h1 { font-size:clamp(42px,5.3vw,74px); }h1 em { font-weight:400; }
h2 { font-size:clamp(34px,3.5vw,48px); }h3 { margin:0 0 8px; font-size:17px; font-weight:600; letter-spacing:-.025em; line-height:1.35; }
p { margin:0 0 18px; }.lede { font-size:17px; line-height:1.8; color:var(--muted); max-width:440px; margin-top:25px; }
.button-row { display:flex; align-items:center; flex-wrap:wrap; gap:25px; margin-top:30px; }
.button { display:inline-flex; justify-content:center; align-items:center; gap:30px; background:var(--ink); color:var(--paper); border:1px solid var(--ink); border-radius:3px; text-decoration:none; font-size:13px; font-weight:500; padding:13px 19px; min-height:47px; cursor:pointer; }.button:hover { background:#355847; }
.text-link { font-size:13px; font-weight:500; text-decoration:none; border-bottom:1px solid currentColor; padding-block:3px; }
.fine { color:var(--muted); font-size:11px; line-height:1.75; margin-top:20px; }
.hero-calendar { background:#fcfbf7; border:1px solid #bfcbbf; box-shadow:7px 9px 0 #e4e8de; border-radius:4px; transform:rotate(1.5deg); }
.calendar-chrome { display:flex; justify-content:space-between; gap:20px; border-bottom:1px solid var(--rule); padding:18px 23px; }.tiny-label { font-size:9px; text-transform:uppercase; letter-spacing:.1em; }
.hero-calendar .tlh-events { margin:0; padding:20px 23px 5px; --events-date-column:3rem; --events-column-gap:1.25rem; --events-day-size:3rem; --events-title-size:1.3rem; --events-detail-size:.7rem; --events-description-size:.8rem; --events-row-space:1.2rem; font-family:var(--sans); }
.hero-calendar .tlh-events__section-header,.hero-calendar .tlh-events__past { display:none; }
.hero-calendar .tlh-event { border-bottom:0; }
.hero-calendar .tlh-event__body > h3 { font-family:var(--serif); font-weight:400; font-size:25px; }
.hero-calendar .tlh-event__footer { gap:1rem; margin-top:1rem; }.hero-calendar .tlh-event__website a { padding:.5rem; font-size:10px; }.hero-calendar .tlh-event__venue { font-size:11px; }
.calendar-foot { font-size:10px; color:var(--muted); padding:12px 23px; border-top:1px solid var(--rule); }
.spec-strip { border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); }.spec-inner { display:flex; justify-content:space-between; gap:20px; padding-block:18px; font-size:11px; color:var(--muted); }
.section { display:grid; grid-template-columns:1fr 1.2fr; gap:110px; padding-block:85px; }.section-intro > p:not(.eyebrow) { color:var(--muted); margin-top:23px; max-width:360px; font-size:14px; }
.feature-list article { display:flex; align-items:start; gap:23px; padding:0 0 24px; margin-bottom:24px; border-bottom:1px solid var(--rule); }.feature-list article:last-child { margin-bottom:0; }.feature-number { color:var(--muted); font-size:10px; padding-top:4px; }.feature-list p { color:var(--muted); font-size:13px; margin:0; }
.demo-band { background:#e9eee4; border-block:1px solid var(--rule); padding-block:70px; }.demo-heading { display:flex; align-items:end; justify-content:space-between; gap:30px; }.demo-heading .eyebrow { margin-bottom:16px; }.demo-intro { max-width:620px; color:var(--muted); font-size:14px; margin-top:20px; }
.screenshot-grid { display:grid; grid-template-columns:1fr 1fr; gap:28px; margin-top:35px; }.screenshot-grid figure { margin:0; min-width:0; }.screenshot-grid figure > a { display:block; height:340px; overflow:hidden; border:1px solid #b7c5b4; border-radius:3px; background:var(--paper); }.screenshot-grid img { width:100%; height:100%; object-fit:cover; object-position:top; }.screenshot-grid figcaption { display:flex; justify-content:space-between; flex-wrap:wrap; gap:15px; padding-top:14px; font-size:11px; }.screenshot-grid figcaption a { text-decoration:none; }
.install-steps { list-style:none; padding:0; margin:0; }.install-steps li { display:flex; align-items:start; gap:25px; padding:0 0 23px; margin-bottom:23px; border-bottom:1px solid var(--rule); }.install-steps li > span { width:24px; height:24px; flex-shrink:0; border:1px solid var(--rule); border-radius:50%; text-align:center; font-size:11px; line-height:22px; }.install-steps p { color:var(--muted); font-size:13px; margin:0; }.shortcode { display:block; border:1px solid var(--rule); background:#efeee7; padding:12px 16px; font:14px/1.5 ui-monospace,monospace; margin-top:13px; }
.newsletter-section { display:grid; grid-template-columns:1fr 1fr; gap:95px; align-items:center; padding:45px 45px; border:1px solid var(--rule); background:#f0f0e7; margin-bottom:85px; }.newsletter-section > div:first-child > p:not(.eyebrow):not(.fine) { color:var(--muted); font-size:14px; max-width:370px; margin-top:24px; }.newsletter-section .button-row { gap:15px; }.newsletter-section .button { font-size:11px; padding:11px; }
.email-sample { background:#fffdf9; color:#334139; border:1px solid #d2d6cb; padding:25px 28px; max-height:480px; overflow:auto; font-family:var(--serif); }.email-label { text-transform:uppercase; letter-spacing:.12em; font:9px/1.5 var(--sans); margin-bottom:22px; padding-bottom:15px; border-bottom:1px solid var(--rule); }.email-sample h2 { font-size:22px!important; letter-spacing:-.035em; }.email-sample h3 { font:20px/1.3 var(--serif)!important; }.email-sample p,.email-sample address { font-size:12px!important; }.email-sample article { padding-bottom:20px; border-bottom:1px solid var(--rule); }
.faq-section { display:grid; grid-template-columns:1fr 1.2fr; gap:110px; padding-bottom:85px; }.faq-list details { border-bottom:1px solid var(--rule); padding:17px 0; }.faq-list details:first-child { border-top:1px solid var(--rule); }.faq-list summary { font-size:14px; cursor:pointer; font-weight:500; }.faq-list p { font-size:13px; color:var(--muted); margin:15px 0 5px; }
.site-footer { display:flex; justify-content:space-between; gap:35px; border-top:1px solid var(--rule); padding-block:30px 40px; font-size:11px; }.site-footer p { color:var(--muted); margin:12px 0 0; }.site-footer > div:last-child { display:flex; flex-wrap:wrap; gap:20px; align-items:start; padding-top:6px; }.site-footer > div:last-child span { color:var(--muted); flex-basis:100%; text-align:right; }
a:focus-visible,button:focus-visible,summary:focus-visible { outline:3px solid #728d68; outline-offset:5px; }
.demo-page { --font-body:var(--sans); --font-heading:var(--serif); --font-entry:var(--serif); }.demo-page .demo-main { max-width:850px; padding-block:65px; }.demo-page .demo-kicker { display:flex; justify-content:space-between; gap:20px; color:var(--muted); font-size:11px; }.demo-page h1 { font-size:60px; margin-block:25px; }.demo-page .demo-lede { color:var(--muted); max-width:650px; font:17px/1.8 var(--serif); }.fiction-notice { font-size:11px; color:var(--muted); border-block:1px solid var(--rule); padding-block:14px; margin-top:28px; }.demo-page .tlh-events { --events-title-size:1.6rem; --events-detail-size:.8rem; --events-description-size:1rem; --events-row-space:2rem; --events-day-size:3.6rem; }.demo-page .tlh-event__body > h3 { font-weight:400; }.demo-page .tlh-event__description { font-family:var(--serif); }
.playground-main { padding-block:45px; }.playground-main h1 { font-size:45px; margin-bottom:20px; }.playground-main p { color:var(--muted); font-size:14px; max-width:800px; }.editor-frame { width:100%; height:1100px; border:1px solid var(--rule); margin-top:20px; background:white; }
@media(max-width:1000px) { .wrap{width:calc(100% - 50px);} .hero {gap:40px;padding-block:65px;} .section,.faq-section{gap:60px;} .newsletter-section{gap:40px;padding:30px;} nav{gap:15px;} .brand-note{display:none;} .screenshot-grid figure>a{height:280px;} }
@media(max-width:720px) { .wrap{width:calc(100% - 36px);} .site-header{padding-block:20px;align-items:start;} .brand{font-size:15px;} .brand img{width:26px;} nav{gap:16px;flex-wrap:wrap;justify-content:end;font-size:11px;} nav a[href='#features'],nav a[href='#support'],.nav-source{display:none;} .hero{grid-template-columns:1fr;gap:45px;padding-block:50px;} h1{font-size:55px;} .lede{font-size:16px;} .hero-calendar{max-width:480px;transform:rotate(1deg);margin:0 5px;} .spec-inner{display:grid;grid-template-columns:1fr 1fr;gap:9px 15px;font-size:10px;} .section,.faq-section{grid-template-columns:1fr;gap:35px;padding-block:55px;} .section-intro>p:not(.eyebrow){max-width:100%;} .demo-band{padding-block:50px;} .demo-heading{display:block;} .demo-heading>.text-link{display:inline-block;margin-top:20px;} .screenshot-grid{grid-template-columns:1fr;gap:30px;} .screenshot-grid figure>a{height:330px;} .newsletter-section{grid-template-columns:1fr;gap:30px;padding:25px;margin-bottom:0;} .site-footer{flex-direction:column;} .site-footer>div:last-child{gap:12px 20px;}.site-footer>div:last-child span{text-align:left;} .demo-page .demo-main{padding-block:35px;}.demo-page h1{font-size:48px;}.demo-page .demo-kicker{flex-direction:column;gap:3px;}.demo-page .tlh-events{--events-title-size:1.3rem;} }
@media(max-width:360px) { h1{font-size:46px;} nav{gap:10px;} .brand{gap:6px;font-size:14px;} .hero-calendar .tlh-events{padding-inline:15px;} .calendar-chrome{padding-inline:15px;} .tiny-label{font-size:8px;} }
@media(prefers-reduced-motion:reduce) { html{scroll-behavior:auto;}.hero-calendar{transform:none;} }