/* North of Atlas shell and theme.
Two files are concatenated here in the order the cascade expects: the base
shell first, then the editorial theme that overrides it. The board app's own
stylesheet is board-1.css and is loaded only by the home page, which is the
only page carrying the board.
Type is self-hosted and latin-subset. Archivo is one variable face with a
width axis, so the condensed uppercase display and the body text come out of
the same family: the display face is simply the same font set narrow and
heavy. Nothing is fetched from another domain to render a page. */
@font-face {
font-family: 'Archivo';
font-style: normal; font-weight: 400 800; font-stretch: 75% 125%;
font-display: swap;
src: url('/fonts/archivo-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Archivo';
font-style: italic; font-weight: 400 800; font-stretch: 75% 125%;
font-display: swap;
src: url('/fonts/archivo-italic-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'JetBrains Mono';
font-style: normal; font-weight: 400 600;
font-display: swap;
src: url('/fonts/jetbrains-mono-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
--font-display: 'Archivo', 'Arial Narrow', Arial, sans-serif;
--font-sans: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
--font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}
:root{--ink:#fff;--ink-2:#f1f4f8;--panel:#fff;--panel-2:#eef2f8;--text:#152846;--muted:#566477;--border:#d9e0e9;--gold:#2856d8;--gold-text:#244fc4;--gold-soft:#b9c9f4;--night:#152846;--night-2:#223b60;--measure:1240px;--blue:#2856d8;--grain:none}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:96px}body{margin:0;color:var(--text);background:#fff;font:16px/1.65 var(--font-sans);-webkit-font-smoothing:antialiased}h1,h2,h3,p{margin-top:0}h1,h2,h3{font-family:var(--font-sans);font-weight:500;letter-spacing:-.045em;line-height:1.08}a{color:inherit}button,input,select,textarea{font:inherit}button,a{touch-action:manipulation}button{cursor:pointer}a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible{outline:3px solid #2856d8;outline-offset:4px}::selection{background:#c3d2ff;color:#152846}.container{width:min(1240px,calc(100% - 80px));margin:auto}.site-nav{height:90px;display:flex;align-items:center;justify-content:space-between;gap:28px;border-bottom:1px solid var(--border)}.wordmark{display:flex;align-items:center;gap:12px;text-decoration:none;font-size:16px;font-weight:700;line-height:1.15;letter-spacing:.03em}.wordmark img{width:36px;height:36px}.navlinks{display:flex;align-items:center;gap:28px}.navlinks a{font-size:14px;text-decoration:none;white-space:nowrap}.navlinks a:hover,.navlinks a[aria-current=page]{color:var(--blue)}.navlinks .nav-cta,.button{display:inline-flex;align-items:center;justify-content:center;gap:16px;background:var(--blue);color:#fff;border:1px solid var(--blue);border-radius:4px;padding:12px 24px;font-size:14px;text-decoration:none;line-height:1.4}.navlinks .nav-cta:hover{color:#fff;background:#173d9f}.button.outline{background:transparent;color:var(--text);border-color:var(--border)}.nav-toggle-new{display:none;background:none;border:1px solid var(--border);padding:8px 12px;border-radius:4px}.overline{font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--blue);margin-bottom:20px}.mast{padding:48px 0 40px;display:grid;grid-template-columns:1.35fr 1fr;gap:72px;align-items:center}.mast h1{font-size:clamp(42px,4.5vw,66px);margin:0}.mast h1 em,.page-intro h1 em{font-family:Georgia,serif;font-weight:400;color:var(--blue)}.mast p{font-size:18px;color:var(--muted);max-width:410px;margin-bottom:16px}.trust{font-size:12px;letter-spacing:.06em;color:var(--muted)}.app-shell{padding:32px 0 44px;background:#f2f5f9;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}.wrap{max-width:1320px;padding:0 40px}.app-shell .label{font-size:12px;color:var(--blue);letter-spacing:.14em}.app-shell #board-title{font-family:var(--font-sans);font-size:28px;font-weight:500;letter-spacing:-.04em}.toolbar{margin-top:24px}.tool,.sit-btn{font-size:14px;border-radius:4px;min-height:43px}.sit-btn{background:var(--blue);color:#fff}.board-head-row{margin-bottom:0}.empty{padding:0!important;text-align:left!important;border:0;background:transparent;max-width:none;margin:0}.empty-showcase{display:grid;grid-template-columns:1.15fr 1fr 1fr 1fr;gap:20px;margin-top:24px}.empty-start{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:24px;border:1px dashed #a8b6ce;border-radius:8px}.empty-start .plus-sign{font-size:32px;color:var(--blue);line-height:1;margin-bottom:16px}.empty-start h2{font-size:24px!important;margin-bottom:12px;line-height:1.15}.empty-start p{font-size:14px!important;line-height:1.5;max-width:260px;margin:0 0 16px}.empty-start button{font-size:14px;border-radius:4px;padding:12px 16px}.empty-start .btn-quiet{padding:12px 0 0;background:none;border:0}.sample-card{border-radius:8px;background:#fff;overflow:hidden;box-shadow:0 5px 18px #15284607;display:flex;flex-direction:column}.sample-card img{width:100%;height:190px;object-fit:cover}.sample-card .caption{padding:16px;font-size:16px;line-height:1.35;letter-spacing:-.02em}.sample-card small{display:block;font-size:12px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);margin-bottom:8px}.sample-card.words{background:#203e76;color:#fff;justify-content:space-between;padding:24px}.sample-card.words p{font-family:Georgia,serif;font-size:28px;line-height:1.2;color:#fff;margin:20px 0}.sample-card.words small{color:#c4d4f2}.sample-card.words .caption{padding:0;font-size:12px;color:#c4d4f2}.sample-label{font-size:12px;color:var(--muted);text-align:right;margin:12px 0 0}.grid{gap:20px}.tile{border-radius:8px;box-shadow:0 3px 12px #14284608}.tile-text{background:#e6ecfa!important}.tile-line{font-family:Georgia,serif}.add-tile{border-radius:8px}.stats{font-size:14px}.stat-chip{font-size:12px}.board-note{font-size:12px;margin:20px 0 0;color:#566477}.section-new{padding:84px 0}.section-top{display:flex;justify-content:space-between;align-items:end;gap:32px;margin-bottom:40px}.section-top h2{font-size:44px;margin:0;max-width:600px}.text-link{font-size:14px;text-underline-offset:5px}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:44px}.step{border-top:1px solid #aab9d1;padding-top:20px}.step span{color:var(--blue);font-size:14px}.step h3{font-size:24px;margin:20px 0 12px}.step p{color:var(--muted);font-size:16px}.ritual-new{background:#152846;color:#fff;padding:56px 64px;display:grid;grid-template-columns:150px 1fr auto;align-items:center;gap:52px;border-radius:8px}.ritual-number{font:72px/1 Georgia,serif;color:#c3d3fc;border:1px solid #8298bb;border-radius:50%;width:140px;height:140px;display:flex;align-items:center;justify-content:center}.ritual-number small{font:16px var(--font-sans)}.ritual-new h2{font-size:40px;margin-bottom:16px}.ritual-new p{color:#c5d1e3;max-width:500px;margin:0}.ritual-new .button{background:#fff;color:#152846;border-color:#fff}.guide-strip{display:grid;grid-template-columns:145px 1fr auto;align-items:center;gap:52px;border-top:1px solid var(--border);padding-top:40px}.guide-strip img{width:145px;box-shadow:5px 6px 0 #d7dfec}.guide-strip h2{font-size:40px;margin:0 0 16px}.guide-strip p{color:var(--muted);max-width:620px}.faq-new{display:grid;grid-template-columns:1fr 1.6fr;gap:80px}.faq-new h2{font-size:44px}.accordion details{border-top:1px solid var(--border);padding:20px 0}.accordion summary{cursor:pointer;font-size:18px;list-style:none;display:flex;justify-content:space-between;gap:20px}.accordion summary::after{content:'+';font-size:24px;color:var(--blue);line-height:1}.accordion details[open] summary::after{content:'−'}.accordion details p{color:var(--muted);padding-top:16px;margin-bottom:0}.page-intro{padding:76px 0 60px;border-bottom:1px solid var(--border)}.page-intro h1{font-size:clamp(43px,5.4vw,74px);max-width:930px;margin-bottom:28px}.page-intro .deck{font-size:20px;color:var(--muted);max-width:750px;line-height:1.6;margin-bottom:24px}.meta{font-size:14px;color:var(--muted);letter-spacing:.02em}.reading-layout{display:grid;grid-template-columns:250px minmax(0,750px);gap:84px;padding:64px 0 84px}.contents{align-self:start;position:sticky;top:30px}.contents p{font-size:12px;text-transform:uppercase;letter-spacing:.14em;color:var(--muted)}.contents a{display:block;padding:8px 0;font-size:14px;text-decoration:none;line-height:1.4}.contents a:hover{color:var(--blue)}.article-copy h2{font-size:32px;margin:48px 0 24px}.article-copy section:first-child h2{margin-top:0}.article-copy p,.article-copy li{font-size:18px;line-height:1.8;color:#394c65}.article-copy li{margin-bottom:8px}.article-copy a{color:var(--blue);text-underline-offset:4px}.article-copy blockquote{margin:32px 0;padding:24px 32px;border-left:3px solid var(--blue);background:#f1f5fc;font:28px/1.45 Georgia,serif}.article-copy .callout{background:#f1f5fc;padding:24px 32px;border-radius:4px;margin:28px 0}.callout p:last-child{margin:0}.article-end{border-top:1px solid var(--border);padding-top:36px;margin-top:44px}.article-end h3{font-size:28px}.article-end .button{color:#fff}.category-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}.idea-card{border:1px solid var(--border);padding:32px;border-radius:8px}.idea-card .overline{margin-bottom:16px}.idea-card h2{font-size:32px;margin-bottom:20px}.idea-card h3{font-size:16px;letter-spacing:0;font-weight:bold;margin:24px 0 12px}.idea-card p{color:var(--muted)}.idea-card blockquote{font:24px/1.4 Georgia,serif;margin:16px 0;color:var(--blue)}.journal-list>a{display:grid;grid-template-columns:170px 1fr 48px;gap:44px;padding:40px 0;border-top:1px solid var(--border);text-decoration:none}.journal-list h2{font-size:36px;max-width:730px;margin:0 0 16px}.journal-list p{max-width:700px;color:var(--muted);margin:0}.journal-list>a:hover h2{color:var(--blue)}.journal-list .arrow{font-size:32px;color:var(--blue)}.journal-list .meta{padding-top:8px}.guide-hero{display:grid;grid-template-columns:1fr 1fr;gap:100px;align-items:center;padding:72px 0}.guide-hero h1{font-size:80px;max-width:550px}.guide-hero .deck{font-size:20px;color:var(--muted)}.guide-art{background:#e9eef8;display:flex;justify-content:center;align-items:center;padding:52px;border-radius:8px}.guide-art img{width:min(100%,305px);height:auto;box-shadow:12px 14px 0 #ccd6e8;transform:rotate(-3deg)}.price{font-size:32px;margin:28px 0 20px;letter-spacing:-.03em}.price small{font-size:14px;color:var(--muted);letter-spacing:0}.actions{display:flex;gap:12px;flex-wrap:wrap}.spec-row{display:grid;grid-template-columns:repeat(4,1fr);border-block:1px solid var(--border);padding:24px 0;text-align:center;font-size:14px;color:var(--muted)}.spec-row b{display:block;font-size:28px;color:var(--text);font-weight:500}.preview-pages{display:grid;grid-template-columns:repeat(3,1fr);gap:36px}.preview-pages img{width:100%;height:auto;border:1px solid var(--border)}.preview-pages figcaption{font-size:14px;color:var(--muted);margin-top:16px}.preview-pages figure{margin:0}.site-footer{margin-top:44px;background:#132440;color:#fff;padding:56px 0 24px}.footer-top{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:72px;padding-bottom:52px}.footer-top h2{font-size:36px;max-width:420px;margin-bottom:20px}.footer-top p{font-size:14px;color:#b9c9e0;max-width:330px}.footer-top nav a{display:block;font-size:14px;color:#d4dfef;margin:8px 0;text-decoration:none}.footer-bottom{border-top:1px solid #385071;padding-top:24px;display:flex;justify-content:space-between;gap:20px;color:#b9c9e0;font-size:12px}.footer-bottom a{color:inherit}.review-notice{font-size:12px;padding:8px 20px;text-align:center;background:#edf2ff;color:#254fab}.skip-new{position:absolute;left:-9999px}.skip-new:focus{left:10px;top:10px;z-index:999;background:#fff;padding:12px}.page-table{width:100%;border-collapse:collapse;font-size:16px}.page-table th,.page-table td{text-align:left;border-bottom:1px solid var(--border);padding:16px;vertical-align:top}.page-table a{color:var(--blue)}.breathe-ring{border-color:#b9c9f4}.overlay .sit-line{font-family:Georgia,serif}.form-tile label{font-size:14px}.form-tile input,.form-tile textarea,.form-tile select{font-size:16px}.form-tile{border-radius:8px}@media(max-width:1000px){.container{width:calc(100% - 48px)}.navlinks{gap:16px}.mast{gap:32px}.empty-showcase{grid-template-columns:1.15fr 1fr 1fr}.sample-card.words{display:none}.reading-layout{gap:40px;grid-template-columns:190px minmax(0,1fr)}.ritual-new{padding:36px;grid-template-columns:100px 1fr;gap:32px}.ritual-number{width:100px;height:100px;font-size:56px}.ritual-new .button{grid-column:2;justify-self:start}.guide-hero{gap:44px}.guide-hero h1{font-size:64px}.guide-strip{gap:32px}.navlinks a{font-size:14px}}@media(max-width:720px){.container{width:calc(100% - 32px)}.wrap{padding:0 20px}.site-nav{height:74px;position:relative}.nav-toggle-new{display:block}.navlinks{display:none;position:absolute;top:73px;left:0;right:0;background:#fff;padding:20px;box-shadow:0 12px 25px #15284615;z-index:100;border:1px solid var(--border)}.navlinks.open{display:flex;flex-direction:column;align-items:stretch;gap:0}.navlinks a{font-size:16px;padding:12px}.wordmark{font-size:14px}.mast{padding:32px 0;grid-template-columns:1fr;gap:20px}.mast h1{font-size:44px}.mast p{font-size:16px;margin-bottom:8px}.overline{margin-bottom:16px}.app-shell{padding-top:24px}.app-shell #board-title{font-size:24px}.toolbar{flex-wrap:wrap}.empty-showcase{grid-template-columns:1fr 1fr;gap:12px}.empty-start{grid-column:1/-1;min-height:170px}.empty-start p{max-width:none}.sample-card img{height:155px}.sample-card .caption{font-size:16px;padding:12px}.section-new{padding:52px 0}.section-top{display:block}.section-top h2{font-size:36px;margin-bottom:20px}.steps{grid-template-columns:1fr;gap:24px}.step h3{margin-top:12px}.ritual-new{grid-template-columns:1fr;padding:28px;gap:24px}.ritual-new .button{grid-column:auto}.ritual-new h2{font-size:36px}.ritual-number{width:80px;height:80px;font-size:44px}.guide-strip{grid-template-columns:85px 1fr;gap:24px}.guide-strip img{width:85px}.guide-strip h2{font-size:32px}.guide-strip>.button{grid-column:1/-1;justify-self:start}.faq-new{grid-template-columns:1fr;gap:16px}.faq-new h2{font-size:36px}.page-intro{padding:44px 0 32px}.page-intro h1{font-size:44px}.page-intro .deck{font-size:18px}.reading-layout{grid-template-columns:1fr;gap:36px;padding:32px 0 40px}.contents{position:static;border-bottom:1px solid var(--border);padding-bottom:20px}.article-copy h2{font-size:28px}.article-copy p,.article-copy li{font-size:18px}.category-grid{grid-template-columns:1fr}.journal-list>a{grid-template-columns:1fr 30px;gap:16px}.journal-list .meta{grid-column:1/-1}.journal-list h2{font-size:28px}.guide-hero{grid-template-columns:1fr;gap:40px;padding:40px 0}.guide-hero h1{font-size:64px}.guide-art{padding:36px}.guide-art img{max-width:230px}.spec-row{grid-template-columns:1fr 1fr;gap:20px}.preview-pages{grid-template-columns:1fr;max-width:400px;margin:auto}.footer-top{grid-template-columns:1fr 1fr;gap:32px}.footer-top>div{grid-column:1/-1}.footer-bottom{flex-direction:column}.page-table{font-size:14px}.page-table td,.page-table th{padding:12px}.review-notice{font-size:12px}.tool-group{flex-wrap:wrap}.board-note{line-height:1.5}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}@media print{.site-nav,.mast,.site-footer,.review-notice,.section-new,.ritual-new{display:none!important}}
:root{--ink:#f7f4ed;--ink-2:#f0ebe0;--panel:#fffdf8;--panel-2:#f3eee3;--text:#17253c;--muted:#525d6a;--border:#e2dccc;--gold:#9a7638;--gold-text:#77561D;--gold-soft:#c9a961;--blue:#77561D;--rose:#a0563d;--green:#4e7351;--night:#16233a;--night-2:#1e2e49;--measure:1440px;--accent:#9a7638}
body{background:var(--ink);font-family:var(--font-sans)}.container{width:min(1440px,calc(100% - 72px))}h1,h2{font-family:var(--font-display);font-weight:700;letter-spacing:-.025em;text-transform:uppercase;line-height:.98}h3{letter-spacing:-.035em;font-weight:500}a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible{outline-color:#77561D}::selection{background:#d5bf98;color:#17253c}.review-notice{background:#16233a;color:#e9e6db;padding:4px 20px;font-size:12px}.review-notice a{color:#dcc69d}.site-nav{height:88px;border:0;gap:20px}.wordmark{font-family:var(--font-display);font-size:32px;letter-spacing:-.03em;line-height:1}.wordmark>span{display:flex;align-items:center;gap:4px}.brand-middle{font:12px/1 var(--font-sans);writing-mode:vertical-rl;transform:rotate(180deg)}.brand-star{font:40px/1 Georgia,serif;margin-left:8px;color:#9a7638}.navlinks{gap:24px}.navlinks a{font-size:14px}.button,.navlinks .nav-cta{border-radius:0;background:#17253c;color:#fffdf8;border-color:#17253c;font-size:14px;padding:16px 24px;min-height:49px;transition:background .18s,transform .18s}.button:hover,.navlinks .nav-cta:hover{background:#77561D;color:#fff;transform:translateY(-2px)}.button.outline{color:var(--text);border-color:#68675f;background:transparent}.overline{color:#77561D;font-size:12px;letter-spacing:.12em;margin-bottom:16px}.hero-editorial{position:relative;margin:0 20px;isolation:isolate;background:#16233a;min-height:650px;overflow:hidden;color:#fffdf8;padding:24px 40px 32px}.hero-landscape,.hero-shade{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}.hero-landscape{object-position:center 50%}.hero-shade{z-index:-1;background:linear-gradient(90deg,rgba(19,24,20,.66),rgba(19,24,20,.14)),linear-gradient(0deg,rgba(12,18,14,.7),transparent 50%)}.hero-topline{display:flex;justify-content:space-between;gap:20px;font-size:12px;letter-spacing:.12em;border-bottom:1px solid #ffffff45;padding-bottom:16px}.hero-editorial h1{font-size:clamp(82px,9.4vw,150px);line-height:.87;letter-spacing:-.025em;margin:36px 0 36px;position:relative;z-index:2;max-width:65%}.hero-editorial h1>span{color:#e0c89a}.hero-bottom{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;position:relative;z-index:3}.hero-bottom p{font-size:16px;line-height:1.45;margin:0 0 20px;color:#fff}.hero-bottom .button{background:var(--accent);color:#17253c;border-color:var(--accent);min-width:210px}.hero-note{display:flex;gap:32px;color:#fffdf8;align-items:center;text-decoration:none;line-height:1.35;font-size:14px;border-top:1px solid #ffffff80;padding-top:16px}.hero-note-arrow{font-size:32px}.ticker{display:flex;justify-content:space-around;align-items:center;gap:20px;padding:16px 28px;background:#9a7638;color:#17253c;margin:0 20px;font-size:12px;letter-spacing:.1em;font-weight:600}.ticker b{font-size:24px;line-height:1}.hero-collage{position:absolute;right:4%;top:80px;width:36%;height:410px;z-index:1}.pin-photo{position:absolute;background:#fffdf8;padding:8px 8px 32px;box-shadow:0 12px 28px #0005;color:#17253c;margin:0}.pin-photo img{width:100%;height:100%;object-fit:cover;display:block}.pin-photo figcaption{font:italic 18px/1.2 Georgia,serif;padding-top:8px;text-align:center}.pin-photo:before{content:'';position:absolute;width:65px;height:22px;background:#ece4cacc;top:-9px;left:38%;transform:rotate(-5deg);z-index:1}.pin-home{width:65%;height:225px;right:6%;top:5px;transform:rotate(8deg)}.pin-morning{width:56%;height:185px;left:0;top:174px;transform:rotate(-9deg)}.pin-note{position:absolute;right:0;bottom:3px;transform:rotate(5deg);width:47%;background:#ead7af;padding:24px 20px;color:#17253c;font:italic 28px/1.15 Georgia,serif;box-shadow:0 8px 18px #0003}.pin-note small{font:12px var(--font-sans);display:block;margin-top:16px;text-transform:uppercase;letter-spacing:.12em}
.app-shell{background:#f0ebe0;border:0;padding:36px 0 32px;scroll-margin-top:15px}.wrap{max-width:1512px;padding:0 36px}.app-shell .label{font:12px var(--font-sans);color:#77561D}.app-shell #board-title{font:700 40px/1 var(--font-display);text-transform:uppercase}.toolbar{margin:20px 0}.tool,.sit-btn{border-radius:2px}.sit-btn{background:#16233a}.tool-primary,.btn-primary{background:#9a7638!important;color:#17253c!important;border-color:#9a7638!important}.tab.active{background:#16233a;color:#fffdf8;border-color:#16233a}.empty-showcase{grid-template-columns:1.15fr 1fr .88fr 1fr;gap:24px;align-items:center;margin:24px 4px 0}.empty-start{padding:24px 16px;border:0;border-radius:0}.empty-start .plus-sign{display:none}.empty-start h2{font:700 36px/1 var(--font-display)!important;text-transform:uppercase}.empty-start p{font-size:16px!important;color:#525d6a}.empty-start button{min-height:44px;border-radius:0}.sample-card{padding:8px 8px 0;border-radius:0;box-shadow:0 5px 10px #302c201a;transform:rotate(-3deg);border:1px solid #d8d3c9}.sample-card:last-child{transform:rotate(3deg)}.sample-card img{height:210px}.sample-card .caption{padding:12px 8px 16px;font:italic 20px/1.3 Georgia,serif}.sample-card small{font:12px var(--font-sans);color:#525d6a;letter-spacing:.1em}.sample-card.words{display:flex;background:#e9dab9;color:#17253c;transform:rotate(3deg);padding:24px;min-height:240px;border:none}.sample-card.words p{color:#17253c;font:italic 32px/1.2 Georgia,serif;margin:12px 0 20px}.sample-card.words small,.sample-card.words .caption{color:#6c5c3d}.sample-label{color:#525d6a;margin-top:24px}.board-note{color:#525d6a}.tile{border:0;border-radius:0;padding:8px 8px 0;box-shadow:0 5px 12px #39302315}.tile-body{border-left:0;min-height:95px;padding:16px 8px}.tile-line{font:italic 20px/1.3 Georgia,serif}.tile-cat{font:12px var(--font-sans);color:#77561D}.tile-img-wrap{aspect-ratio:1.13}.tile-text{background:#e9dab9!important;min-height:300px}.add-tile{border-radius:0;border-color:#9b9689}.tile-text .tile-text-inner{background:transparent}.grid{gap:24px}.board-head-row .stat-chip{background:#f9f7ef;color:#525d6a}.form-tile,.modal{border-radius:4px}.breathe-ring{border-color:#c9a961}.section-new{padding:56px 0}.section-top{margin-bottom:28px}.section-top h2,.faq-new h2{font-size:clamp(38px,4.6vw,64px)}.process-section{display:grid;grid-template-columns:.85fr 1.15fr;gap:56px;align-items:stretch}.process-photo{position:relative;min-height:530px;overflow:hidden}.process-photo img{width:100%;height:100%;position:absolute;object-fit:cover}.process-photo>span{position:absolute;bottom:24px;left:24px;right:24px;color:#fff;font:700 64px/.95 var(--font-display);text-shadow:0 1px 10px #0006}.process-content h2{font-size:clamp(38px,4.4vw,64px);margin-bottom:24px}.process-content .steps{display:block}.process-content .step{display:grid;grid-template-columns:30px 1fr;gap:20px;padding:20px 0;border-color:#b9b5aa}.process-content .step h3{margin:0 0 8px;font-size:24px}.process-content .step p{margin:0}.process-content .step span{color:#77561D;font-size:14px}.process-content>.text-link{display:inline-block;margin-top:20px}.steps{gap:28px}.step{border-color:#bcb6aa}.step span{color:#77561D}.step h3{font-size:28px}.ritual-new{border-radius:0;background:#16233a;color:#fffdf8;padding:44px 44px;grid-template-columns:190px 1fr auto;gap:36px}.ritual-number{border:0;border-radius:0;font:700 144px/.9 var(--font-display);color:#d6bc8b;width:auto;height:auto}.ritual-number small{font-size:24px;align-self:flex-end;margin-bottom:12px}.ritual-new h2{font-size:clamp(35px,4vw,57px)}.ritual-new p{color:#c7ccd5}.ritual-new .button{color:#17253c;background:#f7f4ed;border-color:#f7f4ed}.guide-strip{border:0;background:#eee5d4;padding:36px;grid-template-columns:130px 1fr auto;gap:40px}.guide-strip img{width:120px;transform:rotate(-6deg);box-shadow:8px 10px 0 #bcb0a2}.guide-strip h2{font-size:64px}.faq-new{gap:64px;grid-template-columns:.8fr 1.2fr}.accordion details{border-color:#bfb9ac;padding:20px 0}.accordion summary{font-size:18px}.accordion summary:after{color:#77561D}.page-intro{position:relative;margin:0 20px;background:#16233a;color:#fffdf8;padding:40px 0;overflow:hidden;border:0}.page-intro>.container{position:relative;z-index:1;min-height:240px;display:flex;flex-direction:column;justify-content:center}.page-intro h1{font-size:clamp(54px,6.5vw,94px);max-width:78%;margin-bottom:24px}.page-intro .overline{color:#d6bc8b}.page-intro .deck{color:#e0e2e7;max-width:700px;font-size:18px;line-height:1.5}.page-intro .meta{color:#525d6a;max-width:75%}.page-intro:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#16233aed 0%,#16233abf 55%,#16233a33),url('/hero-assets/horizon.webp') center 53%/cover}.reading-layout{grid-template-columns:230px minmax(0,800px);gap:64px;padding:44px 0 56px;justify-content:space-between}.contents{top:20px;border-top:3px solid #17253c;padding-top:16px}.contents a{font-size:14px;padding:8px 0}.article-copy h2{font-size:40px;margin:36px 0 16px}.article-copy p,.article-copy li{color:#4d5c6f;font-size:18px;line-height:1.7}.article-copy blockquote{background:#eee5d4;border-left:3px solid #9a7638;color:#17253c}.article-copy .callout{background:#f0ebe0}.article-end{background:#eee5d4;padding:28px;border:0}.article-end .button{color:#fff}.category-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;align-items:start}.idea-card{border:0;border-radius:0;background:#f0ebe0;padding:28px;box-shadow:0 4px 10px #25251f08}.idea-card:nth-child(2){margin-top:32px;background:#eadbb8}.idea-card:nth-child(3){background:#e1e8df}.idea-card:nth-child(5){background:#e9dbd3}.idea-card h2{font-size:40px}.idea-card h3{margin:20px 0 8px}.idea-card blockquote{font:italic 24px/1.35 Georgia,serif;color:#77561D}.idea-card .idea-image{width:calc(100% + 54px);max-width:none;height:205px;object-fit:cover;margin:-28px -28px 24px;display:block}.idea-card:last-child .overline{color:#5f4928}.journal-list>a{gap:24px;padding:28px 0}.journal-list h2{font-size:44px}.journal-list .arrow{color:#77561D}.journal-image{width:100%;height:230px;object-fit:cover;display:block}.journal-list:has(.journal-image){display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}.journal-list>a:has(.journal-image){display:flex;flex-direction:column;gap:16px;border:0;padding:0 0 24px;background:#f0ebe0}.journal-list>a:has(.journal-image)>:not(img){margin-left:24px;margin-right:24px}.journal-list>a:has(.journal-image) h2{font-size:40px}.journal-list>a:has(.journal-image) .arrow{align-self:flex-end}.guide-hero{background:#eee5d4;gap:56px;padding:44px;margin-bottom:32px}.guide-hero h1{font-size:clamp(80px,9vw,135px);margin-bottom:24px}.guide-hero .deck{font-size:20px}.guide-art{background:#16233a;border-radius:0;padding:44px}.guide-art img{box-shadow:16px 20px 0 #0f1829;max-width:290px}.spec-row{padding:20px 0}.spec-row b{font:700 48px var(--font-display)}.site-footer{margin-top:20px;background:#16233a;color:#faf7ef;padding:44px 0 24px}.footer-top{gap:40px;padding-bottom:32px;grid-template-columns:1.5fr 1fr 1fr}.footer-top h2{font-size:64px}.footer-top p,.footer-top nav a,.footer-bottom{color:#c7ccd5}.footer-bottom{border-color:#38475f}.page-table a{color:#77561D}body[data-page=privacy] .page-intro,body[data-page=terms] .page-intro,body[data-page=concept] .page-intro{background:#eee5d4;color:#17253c}body[data-page=privacy] .page-intro:after,body[data-page=terms] .page-intro:after,body[data-page=concept] .page-intro:after{display:none}body[data-page=privacy] .page-intro .deck,body[data-page=terms] .page-intro .deck,body[data-page=concept] .page-intro .deck{color:#525d6a}body[data-page=privacy] .page-intro .overline,body[data-page=terms] .page-intro .overline,body[data-page=concept] .page-intro .overline{color:#77561D}body[data-page=concept] .page-intro .meta{color:#525d6a}
@media(min-width:1500px){.hero-editorial{min-height:730px}.hero-collage{top:105px;right:7%;width:33%;height:470px}.pin-home{height:260px}.pin-morning{height:230px;top:210px}.pin-note{bottom:5px}}
@media(max-width:1100px){.container{width:calc(100% - 48px)}.navlinks{gap:16px}.wordmark{font-size:28px}.hero-editorial{padding:24px 28px;min-height:610px}.hero-editorial h1{font-size:104px;max-width:65%}.hero-collage{right:4%;width:35%;top:100px;height:350px}.pin-home{height:180px}.pin-morning{height:145px;top:160px}.pin-note{font-size:24px;padding:16px}.process-section{gap:32px}.process-content h2{font-size:48px}.process-photo{min-height:530px}.process-photo>span{font-size:48px}.ritual-new{grid-template-columns:130px 1fr;gap:24px;padding:36px}.ritual-number{font-size:112px}.ritual-new .button{grid-column:2;justify-self:start}.category-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.idea-card:nth-child(2){margin-top:0}.empty-showcase{gap:20px;grid-template-columns:1.05fr 1fr 1fr}.sample-card.words{display:none}.guide-strip{grid-template-columns:100px 1fr;gap:24px}.guide-strip>.button{grid-column:2;justify-self:start}.guide-strip img{width:95px;grid-row:span 2}.reading-layout{gap:36px;grid-template-columns:190px minmax(0,1fr)}.guide-hero{padding:32px;gap:32px}.journal-list:has(.journal-image){gap:16px}.journal-list>a:has(.journal-image) h2{font-size:32px}}
@media(max-width:720px){.container{width:calc(100% - 32px)}.site-nav{height:70px}.wordmark{font-size:28px}.nav-toggle-new{border-radius:0;border-color:#a4a194;min-height:42px}.navlinks{top:65px;background:#faf7ef}.navlinks .nav-cta{color:#fff}.hero-editorial{margin:0 12px;padding:20px 20px 24px;min-height:750px}.hero-topline{font-size:12px;letter-spacing:.08em}.hero-editorial h1{font-size:clamp(73px,17vw,115px);line-height:.91;max-width:100%;margin:28px 0 0}.hero-landscape{object-position:66% center}.hero-collage{position:relative;top:auto;right:auto;margin:24px 0 20px auto;width:85%;height:215px}.pin-home{width:52%;height:150px;right:3%;top:0;transform:rotate(6deg)}.pin-morning{width:50%;height:140px;left:0;top:42px}.pin-photo{padding:8px 8px 28px}.pin-photo figcaption{font-size:14px}.pin-note{right:0;bottom:0;width:41%;font-size:20px;padding:16px}.pin-note small{font-size:12px;margin-top:8px}.hero-bottom{gap:16px;align-items:center}.hero-bottom p{font-size:16px}.hero-bottom .button{min-width:185px;padding:12px 16px}.hero-note{display:none}.ticker{margin:0 12px;gap:12px;flex-wrap:wrap;justify-content:center;padding:12px 16px;font-size:12px}.ticker span:last-child,.ticker b:last-of-type{display:none}.ticker b{font-size:18px}.app-shell{padding:28px 0}.wrap{padding:0 20px}.app-shell #board-title{font-size:32px}.empty-showcase{grid-template-columns:1fr 1fr;margin:12px 4px 0;gap:12px}.empty-start{grid-column:1/-1;padding:8px 0 20px;min-height:0}.empty-start h2{font-size:36px!important}.empty-start h2 br{display:none}.empty-start p{max-width:100%}.sample-card img{height:160px}.sample-card .caption{font-size:18px;padding:12px 4px}.sample-label{font-size:12px}.section-new{padding:36px 0}.process-section{grid-template-columns:1fr;gap:28px}.process-photo{min-height:310px}.process-photo img{object-position:center 55%}.process-photo>span{font-size:48px;max-width:250px}.process-content h2{font-size:44px}.process-content .step{padding:16px 0}.process-content .step h3{font-size:24px}.ritual-new{grid-template-columns:90px 1fr;padding:24px;gap:20px}.ritual-number{font-size:88px;align-self:start}.ritual-number small{font-size:18px;margin-bottom:8px}.ritual-new h2{font-size:36px}.ritual-new p{font-size:16px}.ritual-new .button{grid-column:1/-1;justify-self:stretch}.guide-strip{padding:24px 20px;gap:24px;grid-template-columns:75px 1fr}.guide-strip img{width:75px;grid-row:auto}.guide-strip h2{font-size:44px}.guide-strip p{font-size:16px}.guide-strip>.button{grid-column:1/-1}.faq-new{grid-template-columns:1fr;gap:16px}.faq-new h2{font-size:44px}.page-intro{margin:0 12px;padding:32px 0}.page-intro>.container{min-height:230px}.page-intro h1{font-size:clamp(46px,11.5vw,65px);max-width:100%;margin-bottom:20px;overflow-wrap:break-word}.page-intro .deck{font-size:18px}.page-intro .meta{max-width:100%;font-size:12px}.reading-layout{grid-template-columns:1fr;padding:28px 0 36px;gap:28px}.contents{padding:16px 0}.contents a{padding:8px 0}.article-copy h2{font-size:36px}.category-grid{grid-template-columns:1fr;gap:20px}.idea-card h2{font-size:40px}.idea-card .idea-image{height:230px}.journal-list:has(.journal-image){grid-template-columns:1fr;gap:24px}.journal-list>a:has(.journal-image) h2{font-size:40px}.guide-hero{padding:28px 24px;grid-template-columns:1fr;gap:32px}.guide-hero h1{font-size:96px}.guide-art{padding:36px}.guide-art img{max-width:220px}.spec-row b{font-size:44px}.preview-pages{gap:28px}.footer-top{grid-template-columns:1fr 1fr;gap:20px}.footer-top>div{grid-column:1/-1}.footer-top h2{font-size:56px}.footer-top nav a{font-size:14px}.footer-bottom{font-size:12px}.page-table{min-width:620px}}
@media print{.hero-editorial,.ticker,.hero-collage{display:none!important}.tile{box-shadow:none}}
.add-form label{font-size:14px}.add-form input,.add-form textarea,.add-form select{font-size:16px}.tile-text .tile-line{font-family:Georgia,serif;font-style:italic;font-size:28px}.tile-text .tile-line.is-bold{font-weight:700}.tile-text .tile-line.is-big{font-size:32px}.form-hint{font-size:14px}
.category-grid{display:block;column-count:3;column-gap:24px}.idea-card{break-inside:avoid;margin-bottom:24px}.idea-card:nth-child(2){margin-top:0}@media(max-width:1100px){.category-grid{column-count:2}}@media(max-width:720px){.category-grid{column-count:1}}
/* Brand refinement: original identity, softer forms, richer photographic content. */
.wordmark{font-family:Georgia,'Times New Roman',serif;font-weight:600;font-size:24px;letter-spacing:-.035em;gap:12px;line-height:1.1;color:var(--text);flex-shrink:0}.wordmark>span{display:block}.wordmark .brand-mark{width:34px;height:39px;object-fit:contain;flex:none}.navlinks .nav-cta,.button,.empty-start button,.tool,.sit-btn,.nav-toggle-new{border-radius:999px}.button,.navlinks .nav-cta{padding-inline:24px}.hero-bottom .button,.tool-primary,.btn-primary{background:#77561D!important;border-color:#77561D!important;color:#fff!important}.hero-bottom .button:hover,.tool-primary:hover,.btn-primary:hover{background:#80602b!important;border-color:#80602b!important}.hero-editorial{border-radius:28px}.hero-shade{background:linear-gradient(90deg,rgba(16,27,46,.70),rgba(16,27,46,.12)),linear-gradient(0deg,rgba(12,23,39,.74),transparent 55%)}.hero-note-arrow{display:grid;place-items:center;width:46px;height:46px;border:1px solid #ffffff6b;border-radius:50%;font-size:28px}.hero-note{gap:20px}.ticker{margin-top:12px;margin-bottom:16px;border-radius:999px;background:#eee4d0;border:1px solid #ded1b6;color:#5b4a2b;padding-block:12px}.ticker b{color:#9a7638}.pin-photo{border-radius:12px;padding:8px 8px 36px}.pin-photo img{border-radius:4px}.pin-note{border-radius:4px 4px 20px 4px}.pin-home{height:240px;width:70%}.pin-morning{height:195px;width:58%;top:181px}.pin-photo figcaption{font-size:16px}.app-shell{border-radius:28px;margin:0 20px}.empty-start .btn-quiet{padding-inline:12px}.sample-card{border-radius:12px}.sample-card img{border-radius:8px}.sample-card.words{border-radius:8px}.tile{border:1px solid #e2dccc;border-radius:16px}.tile-img-wrap{border-radius:8px}.tile-text{border-radius:8px}.tile-text .tile-line{color:#17253c}.add-tile,.add-form,.form-tile,.modal,.form-hint{border-radius:16px}.tool:focus-visible,.button:focus-visible{outline-offset:3px}.process-photo,.guide-strip,.ritual-new,.guide-art,.page-intro,.idea-card,.article-end,.article-copy .callout{border-radius:20px}.process-photo{overflow:hidden}.process-photo img{object-position:55% center}.process-photo:after{content:'';position:absolute;inset:45% 0 0;background:linear-gradient(0deg,#111c31bb,transparent);pointer-events:none}.process-photo>span{z-index:1;font-size:clamp(42px,4.5vw,65px)}.guide-strip img{border-radius:4px;box-shadow:5px 8px 18px #17253c20}.guide-art{background:radial-gradient(ellipse at 50% 20%,#344462,#16233a 70%)}.guide-art img{border-radius:4px}.guide-hero{border-radius:28px}.preview-pages img{border-radius:12px}.idea-card{overflow:hidden}.article-copy blockquote{border-radius:0 16px 16px 0}.journal-list>a:has(.journal-image){border-radius:20px;overflow:hidden}.article-visual{margin:0 0 32px}.article-visual img{display:block;width:100%;height:auto;border-radius:20px}.article-visual figcaption{font-size:14px;color:var(--muted);margin-top:12px}.starter-board-photo{width:100%;height:190px;object-fit:cover;border-radius:12px;display:block;margin-top:16px}.inspiration-intro{max-width:370px}.inspiration-intro p{font-size:16px;line-height:1.55;color:var(--muted);margin-bottom:12px}.inspiration-mosaic{display:grid;grid-template-columns:1.25fr .85fr .85fr;grid-template-rows:245px 245px;gap:20px}.inspiration-tile{position:relative;border-radius:20px;overflow:hidden;isolation:isolate;display:flex;align-items:flex-end;text-decoration:none;background:var(--night);color:#fff;min-width:0}.inspiration-tile:after{content:'';position:absolute;inset:35% 0 0;background:linear-gradient(0deg,#101b2de6,transparent);z-index:-1;pointer-events:none}.inspiration-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform .5s ease}.inspiration-tile:hover img{transform:scale(1.035)}.inspiration-tile>div{padding:24px}.inspiration-tile span{display:block;font-size:12px;letter-spacing:.1em;color:#e4d3b1;margin-bottom:8px}.inspiration-tile h3{font-size:28px;font-weight:500;line-height:1.08;margin:0;color:#fff}.inspiration-board{grid-column:1;grid-row:1 / 3}.inspiration-board img{object-position:center;object-fit:cover}.inspiration-board h3{font-size:36px}.inspiration-car{grid-column:2 / 4;grid-row:1}.inspiration-car img{object-position:center 61%}.inspiration-money{grid-column:2;grid-row:2}.inspiration-photo{grid-column:3;grid-row:2}.inspiration-photo img{object-position:43% center}.inspiration-section .section-top{align-items:flex-end}.site-footer{border-radius:28px 28px 0 0}.page-intro:after{border-radius:inherit}.article-copy a:not(.button):hover,.text-link:hover{color:#6f511e}.idea-card[style]{background:#eee1c4!important}.article-copy .button{color:#fff}.article-copy .button.outline{color:var(--text)}
@media(min-width:1500px){.pin-home{height:270px}.pin-morning{height:235px;top:208px}}
@media(max-width:1100px){.wordmark{font-size:24px;gap:8px}.wordmark .brand-mark{width:30px;height:35px}.navlinks{gap:16px}.navlinks .nav-cta{padding:12px 20px}.pin-home{height:195px}.pin-morning{height:163px;top:161px}.inspiration-mosaic{grid-template-columns:1fr 1fr;grid-template-rows:260px 230px 230px}.inspiration-board{grid-column:1;grid-row:1 / 3}.inspiration-car{grid-column:2;grid-row:1}.inspiration-money{grid-column:2;grid-row:2}.inspiration-photo{grid-column:1 / 3;grid-row:3}.inspiration-photo img{object-position:center 45%}.inspiration-photo h3{font-size:32px}.inspiration-board h3{font-size:32px}}
@media(max-width:850px) and (min-width:721px){.site-nav{gap:12px}.navlinks{gap:12px}.navlinks a{font-size:14px}.wordmark{font-size:20px}.navlinks .nav-cta{padding:12px}}
@media(max-width:720px){.wordmark{font-size:24px}.hero-editorial{border-radius:20px}.ticker{border-radius:20px;margin-top:12px;margin-bottom:12px}.pin-home{width:59%;height:156px}.pin-morning{width:51%;height:148px;top:51px}.pin-photo figcaption{font-size:14px}.hero-collage{height:230px}.pin-note{font-size:20px;width:40%;bottom:0}.app-shell{margin:0 12px;border-radius:20px}.wrap{padding:0 16px}.process-photo,.guide-strip,.ritual-new,.guide-art,.page-intro,.idea-card,.article-end{border-radius:20px}.process-photo{min-height:360px}.process-photo img{object-position:center}.process-photo>span{font-size:48px}.inspiration-intro{margin-top:20px;max-width:100%}.inspiration-mosaic{grid-template-columns:1fr 1fr;grid-template-rows:310px 210px 220px;gap:12px}.inspiration-board{grid-column:1 / 3;grid-row:1}.inspiration-board img{object-position:center 46%}.inspiration-car{grid-column:1;grid-row:2}.inspiration-money{grid-column:2;grid-row:2}.inspiration-photo{grid-column:1 / 3;grid-row:3}.inspiration-tile{border-radius:16px}.inspiration-tile>div{padding:16px}.inspiration-tile h3{font-size:24px}.inspiration-tile span{font-size:12px;letter-spacing:.08em}.inspiration-board h3,.inspiration-photo h3{font-size:32px}.inspiration-car img{object-position:54% center}.article-visual{margin-bottom:24px}.guide-hero{border-radius:20px}.starter-board-photo{height:230px}.site-footer{border-radius:20px 20px 0 0}}
@media print{.inspiration-section{display:none!important}}
body[data-page="vision-board-ideas"] .page-intro:after,body[data-page="2027-vision-board"] .page-intro:after{background-image:linear-gradient(90deg,#16233af2 0%,#16233ad4 50%,#16233a55),url('/hero-assets/finished-board.webp');background-position:center,center 43%}body[data-page="how-to-make-a-vision-board"] .page-intro:after,body[data-page="why-vision-boards-stop-working"] .page-intro:after{background-image:linear-gradient(90deg,#16233af2 0%,#16233ad4 50%,#16233a55),url('/hero-assets/writing.webp')}body[data-page="blog"] .page-intro:after{background-image:linear-gradient(90deg,#16233af2 0%,#16233ad4 50%,#16233a55),url('/hero-assets/scrapbook-board.webp')}body[data-page="about"] .page-intro:after{background-image:linear-gradient(90deg,#16233af2 0%,#16233ad4 50%,#16233a55),url('/hero-assets/photography.webp')}
/* ---------- Display face ----------
The width axis is what makes the headline a headline. Archivo set narrow and
heavy carries the concept's condensed uppercase display without shipping a
second font, and it degrades to Arial Narrow where the variable face has not
loaded yet. */
h1, h2, .wordmark, .hero-editorial h1, .display {
font-variation-settings: 'wdth' 78;
}
h3, h4 { font-variation-settings: 'wdth' 96; }
body { font-variation-settings: 'wdth' 100; }
/* The restore offer in the empty state. Small, and only one line, because it
matters to the few people moving a board rather than starting one. */
.empty-restore { margin: 16px 0 0; font-size: 14px; color: var(--muted); }
.empty-restore .link-btn {
letter-spacing: 0;
background: none; border: 0; padding: 0; cursor: pointer;
color: var(--gold-text); font: inherit;
text-decoration: underline; text-underline-offset: 3px;
}
.empty-restore .link-btn:hover { color: var(--night); }
/* ---------- Installed app, and devices with a notch ----------
board-1.css carries these rules for the old markup; these are the same
intentions expressed against the classes this design actually uses. Without
them the installed app opens on a full-screen marketing hero instead of the
board, and the header sits underneath the status bar.
Nothing is removed from the document: the sections below the board stay
reachable, so a link from the nav or the footer never lands on a dead end. */
@media (display-mode: standalone) {
.hero-editorial,
.ticker { display: none; }
.app-shell { padding-top: max(20px, env(safe-area-inset-top, 0px)); }
header.container { padding-top: env(safe-area-inset-top, 0px); }
.site-nav { height: 68px; }
.site-footer { padding-bottom: max(32px, env(safe-area-inset-bottom, 0px)); }
}
/* A phone with a notch in landscape puts the cutout at the side, so the gutter
has to grow rather than the top inset. */
@media (max-width: 900px) and (orientation: landscape) {
.container { width: min(1440px, calc(100% - 32px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px))); }
}
/* ---------- Readability on the two page-intro variants ----------
.page-intro is a photographic navy band on the article pages and a plain tan
band on terms and privacy. The theme already recolours the deck and the
eyebrow for both, but it never recoloured the meta line, so the dateline sat
at roughly 1.3:1 on tan and 2.3:1 on the photograph. It now follows the
band it is actually on, like everything else in the block. */
.page-intro .meta { color: rgba(255, 253, 248, 0.74); }
body[data-page=terms] .page-intro .meta,
body[data-page=privacy] .page-intro .meta { color: #525d6a; }
/* The label on the process photograph is white type over the bright page of a
notebook. The theme's scrim starts at 45% and tops out around 73% alpha,
which is not enough there: measured over the rendered pixels the type came
out well under 4.5:1. This starts the scrim higher and takes it darker at
the foot, where the words actually sit. */
.process-photo:after {
inset: 26% 0 0;
background: linear-gradient(0deg,
rgba(10, 16, 28, 0.90) 0%,
rgba(10, 16, 28, 0.66) 40%,
rgba(10, 16, 28, 0) 100%);
}
.process-photo > span { text-shadow: 0 1px 3px rgba(10, 16, 28, 0.5); }
/* At the tablet width the note card rode up over the caption of the board
photograph, so "the future, in pictures" was half-covered. Measured at
768px: a 94x39 overlap. Dropping the note and trimming it clears the
caption without changing the composition at any other width. */
@media (min-width: 721px) and (max-width: 900px) {
.pin-note { bottom: 0; width: 43%; font-size: 18px; padding: 16px 16px; }
.pin-home { height: 148px; }
.pin-morning { top: 140px; }
}
/* The not-found page sits outside the .page-intro band, so its heading was
inheriting the small default rather than the display size every other page
uses. */
body[data-page="404"] main h1 { font-size: clamp(40px, 6vw, 76px); margin-bottom: 28px; }
/* Below the tablet break the collage stacks and the note card lands across the
caption of the board photograph, clipping it to "…in pictures". The collage
is decorative (the group carries its own aria-label and every image has alt
text), and at this size that caption is a few illegible words, so it goes
rather than being squeezed. The writing photo's caption clears the note and
stays. Measured at 600, 430 and 390px. */
@media (max-width: 720px) {
.pin-home figcaption { display: none; }
.pin-home { padding-bottom: 8px; }
}
/* ---------- The card face must follow its column ----------
The theme pins .tile-text to min-height:300px. Combined with its
aspect-ratio of 1/1 that also forces the WIDTH to 300px, so on a two-column
phone board a 157px tile was holding a 300px face and the card's text ran
off the right edge and was cut mid-word. The square already follows the
column width on its own; the minimum is the thing that broke it.
The floor is kept for wide boards, where a column is comfortably over 300px
anyway, by expressing it against the available width rather than as a fixed
pixel value. */
.tile-text { min-height: 0; }
/* ---------- Photographs sized for the device ----------
These bands paint a full-width photograph behind the page heading. Every one
of them was serving the same ~290KB 1536px file to a 390px phone, which is
most of the weight of an article page for pixels nobody can see. The ![]()
elements on the site use srcset for this; a background-image cannot, so the
swap is made by width here instead.
Only the photograph changes. The gradient, the position and everything else
stay exactly as the theme set them, so nothing moves. */
@media (max-width: 900px) {
.page-intro:after { background-image: linear-gradient(90deg,#16233aed 0%,#16233abf 55%,#16233a33), url('/hero-assets/horizon-800.webp'); }
body[data-page="vision-board-ideas"] .page-intro:after,body[data-page="2027-vision-board"] .page-intro:after { background-image: linear-gradient(90deg,#16233af2 0%,#16233ad4 50%,#16233a55), url('/hero-assets/finished-board-800.webp'); }
body[data-page="how-to-make-a-vision-board"] .page-intro:after,body[data-page="why-vision-boards-stop-working"] .page-intro:after { background-image: linear-gradient(90deg,#16233af2 0%,#16233ad4 50%,#16233a55), url('/hero-assets/writing-800.webp'); }
body[data-page="blog"] .page-intro:after { background-image: linear-gradient(90deg,#16233af2 0%,#16233ad4 50%,#16233a55), url('/hero-assets/scrapbook-board-800.webp'); }
body[data-page="about"] .page-intro:after { background-image: linear-gradient(90deg,#16233af2 0%,#16233ad4 50%,#16233a55), url('/hero-assets/photography-800.webp'); }
}
@media (max-width: 560px) {
.page-intro:after { background-image: linear-gradient(90deg,#16233aed 0%,#16233abf 55%,#16233a33), url('/hero-assets/horizon-640.webp'); }
body[data-page="vision-board-ideas"] .page-intro:after,body[data-page="2027-vision-board"] .page-intro:after { background-image: linear-gradient(90deg,#16233af2 0%,#16233ad4 50%,#16233a55), url('/hero-assets/finished-board-640.webp'); }
body[data-page="how-to-make-a-vision-board"] .page-intro:after,body[data-page="why-vision-boards-stop-working"] .page-intro:after { background-image: linear-gradient(90deg,#16233af2 0%,#16233ad4 50%,#16233a55), url('/hero-assets/writing-640.webp'); }
body[data-page="blog"] .page-intro:after { background-image: linear-gradient(90deg,#16233af2 0%,#16233ad4 50%,#16233a55), url('/hero-assets/scrapbook-board-640.webp'); }
body[data-page="about"] .page-intro:after { background-image: linear-gradient(90deg,#16233af2 0%,#16233ad4 50%,#16233a55), url('/hero-assets/photography-640.webp'); }
}
/* ---------- The More menu must stay on screen ----------
The menu is anchored with transform: translateX(calc(-100% + 44px)), which
only lands correctly if its wrapper is exactly the width of the 44px button.
On an empty board the wrapper is a stretched grid item, so the menu was
pulled 166px left of a 161px wrapper and opened 140px off the left edge of
a phone screen, covering the page behind it.
Pinning the wrapper to its content makes the assumption true everywhere
rather than only where it happened to hold. */
.menu-wrap { width: max-content; justify-self: end; }
/* On an empty board the only control left in the toolbar is the More menu, but
the toolbar is a grid whose hidden first track still reserved its column, so
the button sat stranded in the middle of the row. A flex row puts the one
remaining control where it belongs, at the end, and the menu then opens
under it without needing to be rescued. */
.board-empty .toolbar { display: flex; justify-content: flex-end; }
/* The theme anchored this menu horizontally with
transform: translateX(calc(-100% + 44px)), but .menu also runs a menuIn
keyframe that animates transform. An animation's transform replaces the
property outright while it runs, so for the first 130ms the anchoring was
simply discarded: the menu appeared in one place and snapped to another.
Horizontal position belongs in layout, not in a transform that something
else is already animating. right: 0 puts the menu's right edge on the
button's right edge, works whatever the wrapper is doing, leaves the
keyframe free to own the entry, and gives a correct box to measure the
instant it opens. */
.menu-wrap .menu {
right: 0;
left: auto;
transform: none;
max-width: calc(100vw - 20px);
}
/* ---------- The ticker separator ----------
U+2733 has an emoji presentation, and iOS picks it: the separators rendered
as green emoji tiles rather than as a typographic mark. Drawing the mark
instead of asking a font for it removes the question entirely, on every
platform. */
.ticker b {
font-size: 0 !important;
line-height: 0;
width: 7px; height: 7px;
display: inline-block;
flex: none;
background: currentColor;
transform: rotate(45deg);
opacity: 0.85;
}
/* ---------- Controls are controls, not text ----------
Nothing on the site set user-select, so on iOS the label inside a button is
selectable text sitting on top of the control. A tap that is held even
slightly, or drifts a pixel, starts a text selection and the click never
fires: the button reads as simply not working, with the label highlighted.
Prose, card text and article copy stay selectable. This is only for the
things you press. -webkit-touch-callout stops the long-press menu on the
same elements for the same reason. */
button,
.button,
.btn-primary,
.btn-quiet,
.nav-cta,
.tool,
.tab,
.sit-btn,
summary,
[role="menuitem"],
.nav-toggle-new,
.tile-menu-btn {
-webkit-user-select: none;
user-select: none;
-webkit-touch-callout: none;
}
/* The board title is deliberately editable, so it must stay selectable even
though it sits among the controls. */
#board-title { -webkit-user-select: text; user-select: text; }
/* ==========================================================================
Motion
==========================================================================
The curves and durations already existed, but only in board-2.css, which
only the home page loads. Every other page was resolving var(--ease-out) to
nothing. They live here now so the whole site shares one set.
Two curves, three durations, and that is the whole vocabulary. Anything
entering or leaving uses --ease-out; anything travelling across the screen
uses --ease-in-out. Do not add a third curve. */
:root {
--ease-out: cubic-bezier(0.23, 1, 0.32, 1);
--ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
--dur-press: 120ms;
--dur-hover: 180ms;
--dur-ui: 240ms;
}
/* ---------- Hover belongs to pointers ----------
The theme carried two hover transforms, both ungated: a 2px lift on every
button and a 1.035 scale on the mosaic tiles. A tap on a phone fires a
hover, so either one stayed applied until something else was touched, and
the tile one also compounded with the scale below, `transform` and `scale`
being separate properties that multiply rather than replace. Both are
switched off unconditionally and re-expressed inside the pointer query. */
.button:hover, .navlinks .nav-cta:hover,
.inspiration-tile:hover img { transform: none; }
@media (hover: hover) and (pointer: fine) {
.button:hover, .navlinks .nav-cta:hover { transform: translateY(-2px); }
.inspiration-tile img,
.idea-card img,
.journal-image { transition: scale var(--dur-ui) var(--ease-out); }
.inspiration-tile:hover img,
.idea-card:hover img { scale: 1.03; }
}
/* ---------- Press feedback ----------
Pressed at most a few times a visit, so this is the near-imperceptible
tier: the job is only to confirm the interface heard you. One frame of
travel, and it is over before it registers as an animation. */
.button,
.btn-primary,
.btn-quiet,
.nav-cta,
.tool,
.sit-btn,
.accordion summary,
.text-link {
transition: transform var(--dur-press) var(--ease-out),
background-color var(--dur-hover) ease,
border-color var(--dur-hover) ease,
color var(--dur-hover) ease;
}
.button:active,
.btn-primary:active,
.nav-cta:active,
.sit-btn:active { transform: translateY(1px) scale(0.985); }
.btn-quiet:active,
.tool:active,
.text-link:active { transform: translateY(1px); }
/* ---------- The hero collage assembles ----------
Seen once per visit, so this is the rare tier where explanation is worth
paying for: the collage IS the product, and watching the photographs and
the note settle onto the board says what the thing is faster than the
sentence underneath it does.
translate rather than transform, because each card carries its own rotation
in transform and animating that property would flatten them. The background
photograph is deliberately untouched: it is the largest contentful paint,
and fading it in would delay the only thing the page is measured on. */
@media (prefers-reduced-motion: no-preference) {
.hero-collage .pin-photo,
.hero-collage .pin-note {
animation: collageIn 620ms var(--ease-out) backwards;
}
.hero-collage .pin-home { animation-delay: 120ms; }
.hero-collage .pin-morning { animation-delay: 210ms; }
.hero-collage .pin-note { animation-delay: 300ms; }
}
@keyframes collageIn {
from { opacity: 0; translate: 0 22px; }
to { opacity: 1; translate: 0 0; }
}
/* ---------- Sections arrive as you reach them ----------
The hidden state is only ever applied by script, so with JavaScript off, or
with reduced motion asked for, the page is simply visible and there is
nothing to undo. Each section does this once. */
.js-reveal {
opacity: 0;
translate: 0 14px;
transition: opacity 520ms var(--ease-out), translate 520ms var(--ease-out);
}
.js-reveal.is-in { opacity: 1; translate: 0 0; }
/* ---------- Reduced motion ----------
The shell at the top of this file already answers the media query with a
blunt `animation: none; transition: none` on everything, so nothing above
plays for a reader who has asked for less movement. What still needs
undoing here is the motion that is not an animation or a transition: a
transform or a scale applied by a state is instant, and would survive that
rule. */
@media (prefers-reduced-motion: reduce) {
.button:active, .btn-primary:active, .nav-cta:active,
.sit-btn:active, .btn-quiet:active, .tool:active, .text-link:active { transform: none; }
.inspiration-tile:hover img, .idea-card:hover img { scale: 1; }
}
/* ---------- Print ----------
A section the reader never scrolled to is still sitting at opacity 0 when
the print stylesheet runs, and would come out of the printer blank. */
@media print {
.js-reveal { opacity: 1; translate: none; transition: none; animation: none; }
}
/* ==========================================================================
Landing page corrections
==========================================================================
Found by rendering the home page at 1440, 1024, 768, 430 and 390 and
reading the result rather than trusting that it was fine. Each of these is
a thing that was visibly wrong on screen. */
/* ---------- The claim strip lost a claim ----------
Below 430px a rule hid the last span outright, so "Make it yours" simply
was not on the page; between there and 900px every phrase broke across two
lines mid-sentence and the strip grew to 66px of fragments with a separator
dangling at the end of the first row.
Three claims in a grid of three columns instead of fighting over one line.
Each phrase may wrap to two lines inside its own column, balanced, so the
strip stays one even row. The diamonds are what separate items on a single
line, so they go when the line does. */
@media (max-width: 900px) {
.ticker {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px 16px;
justify-items: center;
align-items: center;
text-align: center;
text-wrap: balance;
padding: 12px 16px;
line-height: 1.3;
}
.ticker b { display: none; }
.ticker span:last-child { display: block; }
}
/* ---------- Collage captions were being cut off ----------
The cards carry a fixed height at every breakpoint and reserved a flat 35px
for the caption, so a caption that wrapped to two lines ran out through the
bottom edge: at 768px "put it into your own words" hung 8px past the card
and the last word was sliced in half.
Laying the card out as a column lets the caption take the height it needs
and the photograph absorb the difference, which holds at every one of the
breakpoints that set a card height without having to revisit any of them. */
.hero-collage .pin-photo {
display: flex;
flex-direction: column;
padding-bottom: 16px;
}
.hero-collage .pin-photo img {
flex: 1 1 auto;
min-height: 0;
height: auto;
}
.hero-collage .pin-photo figcaption { flex: none; }
/* ---------- An empty board was mostly empty rows ----------
Before there is a board there is no streak, so "No streak yet" was telling
the visitor about something that cannot exist yet. It also pushed the lone
More button onto a second full-width row of its own, leaving 85px of blank
page between the board's title and the first thing you can actually do —
and on a phone it sat hard left under a centred title.
The chip comes back the moment there is a board to have a streak on. */
.board-empty .head-right { display: none; }
.board-empty .board-head-row { margin-bottom: 0; }
/* ---------- The rule under a text link should be as wide as the text ----------
.btn-quiet carried 12px of side padding and drew its underline across the
whole button, so the line ran past "Try 3 example cards" at both ends and
read as a misdrawn border. The vertical padding stays: that is the tap
target. */
.btn-quiet { padding-inline: 0; }
/* ---------- The note under the examples belongs to the row ----------
It was inheriting a max-width meant for the body copy in the starting card,
so this one-line caption was being held to 415px and wrapping, with "your
board." alone on a second line under the middle card. It captions all three
cards, so it gets the width of all three. */
.empty p.sample-label { max-width: none; }
/* ---------- A collage caption was painting underneath its neighbour ----------
The two photographs overlap by design, but nothing ordered them, so the
notebook card was covering the left half of "the future, in pictures" on
the card behind it. Ordering them puts the caption back on top; the corner
it now covers on the notebook card is empty white margin. */
.hero-collage .pin-home { z-index: 2; }
.hero-collage .pin-morning { z-index: 1; }
.hero-collage .pin-note { z-index: 3; }
/* Two example cards side by side looked ragged whenever one caption ran to an
extra line and the other did not — at 390px the Home card stood 21px taller
than the People card and their bottoms did not line up. Reserving a fixed
number of lines only moves the problem to the next width, so the cards are
simply told to fill their grid row: the taller caption sets the height and
the shorter card takes the same, whatever the width.
Only below 841px, where the starting card takes a row of its own and the
example cards share the next one. Above that the starting card sits beside
them, and filling that row would stretch a 314px polaroid to 435px. */
@media (max-width: 840px) {
.empty-showcase { align-items: stretch; }
.empty-showcase > .sample-card { height: 100%; }
}
/* ---------- Overlines were washing out on the brightest photographs ----------
The scrim started at 35% and was fully transparent by the top of it, which
is where the small gold overline sits. Over the money jar and the coast
road it was effectively unreadable. Starting the scrim higher and holding
it darker for longer costs nothing on the darker tiles. */
.inspiration-tile:after {
inset: 20% 0 0;
background: linear-gradient(0deg, #0d1728f5 10%, #0d1728b3 48%, transparent);
}
/* ---------- The note under the examples, on a phone ----------
Right-aligned works under three cards on a wide screen. On a phone it wraps
and the ragged left edge reads as a mistake. */
@media (max-width: 720px) {
.sample-label { text-align: left; }
}
/* ---------- "Your words. Your direction." was sitting on a white page ----------
The scrim over that photograph started at 45% and the headline sits at the
bottom left, which is exactly where the open notebook is brightest: white
type on a near-white page, measured at 1.1:1 against a 3:1 floor for text
that size. Same treatment as the mosaic — the scrim starts higher and holds
longer, and the text keeps its shadow. */
.process-photo:after {
inset: 25% 0 0;
background: linear-gradient(0deg, #0b1220f0 12%, #0b1220a6 50%, transparent);
}
/* ---------- Headlines were breaking into orphans ----------
A scan of every heading on all twelve pages at 1440, 768 and 390 found a
single short word stranded on its own line in twenty-two places: "like" in
"What would you | like | more of?" on the ideas page at 390, "the" in the
middle of a journal headline at 768, "life" alone on the about page, and so
on. Two causes, and both are fixed here.
First, the browser fills each line greedily and leaves the remainder on the
last one. text-wrap: balance asks it to even the lines out instead, which
is what a typesetter would do and what these display faces need. Browsers
without it wrap as before.
Second, the editorial
s in the page headlines were placed for a wide
column. Once the first half no longer fits on one line they stop being line
breaks and start being orphan factories, so below 900px they step aside and
let the balancing do the work. Every one of them already has a space in
front of it, so removing the break never welds two words together. */
h1, h2, h3 { text-wrap: balance; }
/* balance evens every line, which is right for a two or three line display
headline and wrong for a long one: it will happily set "Does manifestation
actually work?" as four lines of one word each, because that is the most
even arrangement of a heading whose longest word is that long. The
long-form headings get `pretty` instead, which leaves the greedy fill alone
and only pulls a word back to save the last line. */
.page-intro h1, .journal-list h2, .article-copy h2, .article-end h3 {
text-wrap: pretty;
}
@media (max-width: 900px) {
.page-intro h1 br,
.mast h1 br,
.article-end h3 br { display: none; }
}
/* ---------- Field notes went straight from three columns to one ----------
The journal cards are a three-across grid down to 721px, where they become
a single column. That leaves the whole tablet range setting a 31px headline
in a 185px card: "When your | vision board | fades into | the | background."
was five lines for a six word title, and no wrapping strategy can rescue a
column that narrow. The missing middle step is two columns. */
@media (max-width: 1040px) and (min-width: 721px) {
.journal-list:has(.journal-image) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* ==========================================================================
An empty board is not a board
==========================================================================
Before there is a board, the page was showing: the overline "Your board", an
editable title naming a board that does not exist, a chip reporting a streak
that cannot exist, a menu whose three items were Save a backup (nothing to
save), Restore from backup (offered again by name four lines below) and
Clear the whole board (nothing to clear), a row of category filters with no
categories to filter — and only then the question the page is actually
asking, as a second headline underneath the first.
Two headlines competing, two rows reporting on nothing, one action offered
twice. Hiding a piece at a time was a patch. What is true is simpler: an
empty board is an invitation, so the invitation is the whole section, and
every piece of board furniture arrives with the board it describes. */
.board-empty .board-head-row,
.board-empty .toolbar,
.board-empty .tabs { display: none; }
/* The question now sits where the board's title sits once there is one, so the
section keeps the same shape as every other section on the page: overline,
headline, a line of copy, then the thing itself. */
.empty-head {
text-align: center;
max-width: 720px;
margin: 0 auto 40px;
}
.empty-head .label {
font-size: 12px;
letter-spacing: .14em;
text-transform: uppercase;
color: #77561D;
margin-bottom: 16px;
}
.empty-head h2 {
font-size: clamp(30px, 4.2vw, 46px);
line-height: 1.04;
margin: 0 0 20px;
text-wrap: balance;
}
.empty-head p {
font-size: 18px;
line-height: 1.6;
color: var(--muted);
max-width: 560px;
margin: 0 auto;
}
/* The actions sit with the question they answer. The dashed cell they used to
live in held nothing else once the question moved up, so it is gone and the
examples have the row to themselves. */
.empty-actions {
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
margin-top: 32px;
}
.empty-actions .btn-primary {
min-width: 260px;
min-height: 52px;
font-size: 16px;
}
.empty-actions .btn-quiet { padding-inline: 0; }
/* Three examples across the full 1332px of the section made each card 430px
wide — bigger than any card the board will ever draw, so they read as the
subject of the section rather than as a hint about what a card is. Held to
a card-sized width and centred. */
.empty-showcase {
grid-template-columns: repeat(3, minmax(0, 1fr));
max-width: 1040px;
margin-inline: auto;
}
/* The middle example is the one made of words, and the theme drops it below
1100px. Holding three columns there leaves an empty third and squeezes the
two survivors into the left of the row, which is what it was doing on a
phone. The breakpoint is the width that card actually leaves at, measured,
not a round number. */
@media (max-width: 1099px) {
.empty-showcase {
grid-template-columns: repeat(2, minmax(0, 1fr));
max-width: 760px;
}
}
/* The note under the examples is a sibling of the grid, not a cell in it, so
it was running the full width of the section and landing on the corner of
the last card, which is rotated. It belongs under the row it describes, at
the width of that row, with clearance for the rotation. */
.empty > p.sample-label {
max-width: 1040px;
margin: 28px auto 0;
text-align: center !important;
}
/* Moving a board across is a route for the few people who need it, so it sits
with the other quiet print at the foot of the section rather than beside the
button that everyone else is going to press. `.empty` sets a left alignment
with !important, so this has to answer in kind. */
.empty > p.empty-restore {
text-align: center !important;
max-width: none;
font-size: 14px;
color: var(--muted);
margin: 24px 0 0;
}
@media (max-width: 720px) {
.empty-head { margin-bottom: 28px; }
.empty-head p { font-size: 16px; }
.empty-actions .btn-primary { width: 100%; min-width: 0; }
}
/* ---------- Text cards were reserving room for text they do not hold ----------
A card with a photograph keeps its category, its line and its date in the
footer, so the footer has a 95px floor. A card made of words keeps the line
in the coloured block above, leaving the footer holding a single category
label — and still standing 95px tall, which is why every text card on a
phone had a band of empty white under it.
board-2.css already says `.tile-body-text { min-height: auto }`. This
stylesheet loads after it and its plain `.tile-body` rule was winning on
order alone, so the exception has to be restated on this side. */
.tile-body.tile-body-text { min-height: 0; }
/* ==========================================================================
The installed app
==========================================================================
On the site you arrive at a dark photographic hero with a gold call to
action. The installed app arrived at a beige form: the header, a strip of
sales claims, an empty band, then the board's title set small on cream.
The app now opens the way the site does, built from the site's own parts:
the coastal photograph and its shade, the gold topline over a hairline, the
display face at hero size, and the main action in gold inside the card. */
/* iOS draws a button's label in the system tint unless it is told otherwise,
so the Menu button was blue on every iPhone, in the app and on the site. */
.nav-toggle-new { color: var(--text); }
@media (display-mode: standalone) {
/* The claim strip is switched off for the app further up this file, then
the phone-width grid below that switched it back on. It sells the site to
someone who has already installed it. */
.ticker { display: none; }
/* The header already clears the notch and the board was clearing it a
second time: that is the empty band that sat above "Your board". In the
app the board is the page, not a card laid on the page. */
.app-shell {
margin: 0;
padding: 4px 0 28px;
background: transparent;
border: 0;
border-radius: 0;
}
/* ---------- The hero, once there is a board ---------- */
.board-head-row {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
grid-template-rows: auto 1fr auto;
grid-template-areas:
"label stats"
"title title"
"cta cta";
min-height: clamp(320px, 46vh, 420px);
margin: 0 0 16px;
padding: 20px 24px 24px;
border-radius: 28px;
overflow: hidden;
isolation: isolate;
color: #fffdf8;
background:
linear-gradient(90deg, rgba(16, 27, 46, .74), rgba(16, 27, 46, .18)),
linear-gradient(0deg, rgba(12, 23, 39, .88), rgba(12, 23, 39, 0) 64%),
#16233a url(/hero-assets/horizon-800.webp) center 55% / cover no-repeat;
background:
linear-gradient(90deg, rgba(16, 27, 46, .74), rgba(16, 27, 46, .18)),
linear-gradient(0deg, rgba(12, 23, 39, .88), rgba(12, 23, 39, 0) 64%),
#16233a image-set(url(/hero-assets/horizon-800.webp) 1x, url(/hero-assets/horizon-1100.webp) 2x) center 55% / cover no-repeat;
}
/* The label and the title live in one wrapper in the markup; flattening it
lets the label share a row with the streak and the title drop to the foot
of the card on its own. */
.board-head-row .title-block { display: contents; }
/* The topline: gold label left, streak right, one hairline under both. */
.board-head-row::before {
content: '';
grid-column: 1 / -1;
grid-row: 1;
align-self: end;
border-bottom: 1px solid rgba(255, 255, 255, .3);
pointer-events: none;
}
.board-head-row .label {
grid-area: label;
align-self: center;
padding-bottom: 16px;
font: 600 12px/1.2 var(--font-sans);
letter-spacing: .14em;
text-transform: uppercase;
color: #e0c89a;
margin: 0;
}
.board-head-row .head-right {
grid-area: stats;
align-self: center;
padding: 0 0 16px 12px;
margin: 0;
}
.board-head-row .stats { justify-content: flex-end; }
.board-head-row .stat-chip {
background: rgba(255, 253, 248, .12);
border: 1px solid rgba(255, 253, 248, .26);
color: #fffdf8;
font-size: 12px;
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
}
.board-head-row .stat-chip b { color: #fffdf8; }
.board-head-row .stat-chip .dot { background: #e0c89a; }
/* The title is the headline: the site's display face at hero size, sitting
at the foot of the card. It is still the editable title; the dashed rule
under it and the pencil are what say so, lightened for the dark ground. */
.board-head-row .title-edit {
grid-area: title;
align-self: end;
margin: 32px 0 24px;
min-width: 0;
}
.board-head-row #board-title {
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(46px, 13.5vw, 84px);
line-height: .9;
letter-spacing: -.025em;
text-transform: uppercase;
color: #fffdf8;
text-wrap: balance;
overflow-wrap: anywhere;
border-bottom-color: rgba(255, 253, 248, .38);
}
.board-head-row #board-title[data-length="medium"] { font-size: clamp(38px, 10.5vw, 68px); }
.board-head-row #board-title[data-length="long"] { font-size: clamp(30px, 8vw, 54px); line-height: .95; }
.board-head-row .title-pencil { color: rgba(255, 253, 248, .7); }
/* Daily focus, moved into the card by board.js: the site's gold primary. */
.board-head-row .sit-btn {
grid-area: cta;
width: 100%;
min-height: 54px;
justify-content: center;
background: #77561D;
border: 1px solid #77561D;
border-radius: 999px;
color: #fff;
font: 600 16px/1 var(--font-sans);
letter-spacing: 0;
display: inline-flex;
align-items: center;
gap: 12px;
}
/* The icon's size was only ever set for the toolbar (.toolbar .sit-btn svg),
so once the button moved into the hero the clock grew to fill the card. */
.board-head-row .sit-btn svg { width: 18px; height: 18px; flex: none; }
@media (hover: hover) and (pointer: fine) {
.board-head-row .sit-btn:hover { background: #80602b; border-color: #80602b; }
}
/* Before board.js has moved it, it must not flash in the toolbar. */
.toolbar #sitBtn { display: none; }
/* ---------- The hero, before there is a board ---------- */
.empty-head {
display: flex;
flex-direction: column;
justify-content: flex-end;
min-height: clamp(380px, 58vh, 480px);
max-width: none;
margin: 0 0 28px;
padding: 20px 24px 24px;
border-radius: 28px;
overflow: hidden;
text-align: left;
color: #fffdf8;
background:
linear-gradient(90deg, rgba(16, 27, 46, .74), rgba(16, 27, 46, .18)),
linear-gradient(0deg, rgba(12, 23, 39, .9), rgba(12, 23, 39, 0) 68%),
#16233a url(/hero-assets/horizon-800.webp) center 55% / cover no-repeat;
background:
linear-gradient(90deg, rgba(16, 27, 46, .74), rgba(16, 27, 46, .18)),
linear-gradient(0deg, rgba(12, 23, 39, .9), rgba(12, 23, 39, 0) 68%),
#16233a image-set(url(/hero-assets/horizon-800.webp) 1x, url(/hero-assets/horizon-1100.webp) 2x) center 55% / cover no-repeat;
}
.empty-head .label {
margin: 0 0 auto;
padding-bottom: 16px;
border-bottom: 1px solid rgba(255, 255, 255, .3);
color: #e0c89a;
font-weight: 600;
}
.empty-head h2 {
margin: 32px 0 16px;
font-size: clamp(40px, 11.5vw, 72px);
line-height: .92;
color: #fffdf8;
}
.empty-head p {
margin: 0;
max-width: 34ch;
color: rgba(255, 253, 248, .86);
}
.empty-actions { align-items: stretch; margin-top: 24px; }
.empty-actions .btn-quiet {
align-self: center;
color: #fffdf8;
border-bottom-color: rgba(255, 253, 248, .6);
}
@media (min-width: 721px) {
.board-head-row .sit-btn,
.empty-actions .btn-primary { width: auto; min-width: 260px; justify-self: start; }
.empty-actions { align-items: flex-start; }
.empty-actions .btn-quiet { align-self: flex-start; }
}
}
/* ==========================================================================
The guide page, second edition
==========================================================================
The guide grew to 47 pages, added an EPUB alongside the PDF, and now cites
24 sources. The page gained three things to carry that: the author's own
account of what the guide is, a plain list of what is in the download, and
the note about referenced teachers set directly under the contents, so the
disclaimer sits next to the name it qualifies. */
/* What it is: the two-column layout the page already uses for its questions. */
.guide-about .article-copy p:first-child { margin-top: 0; }
.guide-about .article-copy blockquote { margin: 28px 0 0; }
.guide-note {
margin: 28px 0 0;
max-width: 660px;
font-size: 14px;
line-height: 1.6;
color: var(--muted);
}
/* In your download: the same ruled rows as the contents above it, two across. */
.included-list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: 44px;
}
.included-list li {
border-top: 1px solid var(--border);
padding: 20px 0 24px;
font-size: 18px;
line-height: 1.55;
color: var(--muted);
}
.included-list b {
display: block;
margin-bottom: 4px;
font-size: 20px;
font-weight: 600;
letter-spacing: -.01em;
color: var(--text);
}
.guide-included .meta { margin: 8px 0 0; }
@media (max-width: 720px) {
.included-list { grid-template-columns: 1fr; }
}
/* The five parts were laid out with an inline style holding the label in a
fixed column beside the text at every width, so on a phone the descriptions
ran about four words to a line beside "I / The idea". Below 720px the label
sits above its part instead. */
.guide-part {
display: grid;
grid-template-columns: minmax(80px, 160px) minmax(0, 1fr);
gap: 20px;
padding: 24px 0;
border-top: 1px solid var(--border);
}
@media (max-width: 720px) {
.guide-part { grid-template-columns: 1fr; gap: 8px; padding: 24px 0; }
.guide-part h3 { font-size: 24px !important; }
}
/* ==========================================================================
Polish pass: spacing, labels, type, corners
==========================================================================
An audit against a design checklist found the site already designed, with
the usual tells left over: spacing off any grid, small uppercase labels
above every section, fourteen text sizes, twelve corner radii, and arrows
meaning "leaves the site" on links that stay on it. This layer and the edits
above it fix those; the palette, photography, headline face and the
handwritten card stay exactly as they were. */
/* ---------- Spacing ----------
Every padding, margin and gap above was snapped to a 4px grid. Two kinds of
spacing were still falling off it, both from the browser's default "1em":
paragraphs in long-form copy (18px text, so 18px apart) and the guide's part
headings (27px). They are set explicitly now. */
.article-copy p { margin: 0 0 20px; }
.guide-part h3 { margin: 0 0 12px; }
/* ---------- Labels ----------
Small uppercase labels with wide tracking sat above nearly every section and
on every board control. They now read as plain sentence-case text: same
colour and weight, normal spacing, big enough to read. The rubber-stamp
marks ("Achieved") and the display headlines keep their capitals on
purpose; those are the brand, not labels. */
.overline,
.hero-topline,
.ticker,
.app-shell .label,
.empty-head .label,
.board-head-row .label,
.title-block .label,
.sample-card small,
.contents p,
.pin-note small,
.inspiration-tile span,
.sit-cat,
.breath-cue,
.share-picker label {
text-transform: none;
letter-spacing: 0;
}
.overline,
.hero-topline,
.app-shell .label,
.empty-head .label,
.board-head-row .label,
.title-block .label { font-size: 14px; font-weight: 600; }
.ticker { font-size: 14px; font-weight: 500; }
.breath-cue { font-size: 16px; }
.inspiration-tile span { font-size: 14px; font-weight: 500; }