/* Oculus: theme layer on top of the TWA foundation. CSS only. */
:root{ --oculus-ui: var(--wp--custom--font-ui, system-ui, sans-serif); --oculus-hw: var(--wp--custom--heading-weight, 600); --oculus-r: var(--wp--custom--radius--base, 6px); --oculus-card: var(--twa-surface-2); }
@supports (color: color-mix(in srgb, red, blue)) { :root{ --oculus-card: color-mix(in srgb, var(--twa-ink) 4%, var(--twa-surface)); } }
.oculus-label, .is-style-label, .oculus-label a{ font-family:var(--oculus-ui); font-size:.72rem; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--twa-ink-soft); text-decoration:none; margin:0; }
.oculus-pill{ display:inline-flex; align-items:center; margin:0; padding:.36rem .6rem; border-radius:999px; background:var(--twa-accent-soft); color:var(--twa-accent-ink); font-family:var(--oculus-ui); font-size:.68rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; line-height:1; }
.oculus-deck, .is-style-deck, .oculus-lede{ font-size:var(--wp--preset--font-size--medium); color:var(--twa-ink-soft); line-height:1.5; }
.oculus-soft{ color:var(--twa-ink-soft); }
.wp-block-post-terms, .wp-block-post-date, .wp-block-post-author-name, .wp-block-query-pagination, .wp-block-categories, .wp-block-navigation{ font-family:var(--oculus-ui); }
.oculus-meta{ gap:.45rem .8rem; margin-bottom:.4rem; font-family:var(--oculus-ui); font-size:var(--wp--preset--font-size--small); color:var(--twa-ink-soft); }
.oculus-meta > *{ margin:0; }
.oculus-meta a{ color:var(--twa-ink-soft); }
.oculus-reading, .oculus-count{ font-family:var(--oculus-ui); }
.oculus-updated-label{ margin-right:.15em; }
/* Header */
.oculus-header{ border-bottom:1px solid var(--twa-line); }
.oculus-header-row{ gap:var(--wp--preset--spacing--30); }
.oculus-header .wp-block-site-title{ font-family:var(--wp--custom--font-display); font-weight:var(--oculus-hw); font-size:var(--wp--preset--font-size--medium); letter-spacing:-.01em; margin:0; }
.oculus-header .wp-block-site-title a{ color:var(--twa-ink); text-decoration:none; }
.oculus-header-actions{ gap:var(--wp--preset--spacing--40); }
.oculus-header .wp-block-navigation{ font-size:var(--wp--preset--font-size--small); }
.oculus-header .wp-block-navigation a{ color:var(--twa-ink-soft); text-decoration:none; }
.oculus-header .wp-block-navigation a:hover{ color:var(--twa-ink); }
.wp-block-navigation__responsive-container.is-menu-open{ padding:var(--wp--preset--spacing--50) var(--wp--preset--spacing--40); background:var(--twa-surface); color:var(--twa-ink); }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content{ font-size:var(--wp--preset--font-size--large); padding-block:.35em; color:var(--twa-ink); }
@media (max-width:600px){ .oculus-header .oculus-header-cta{ display:none; } }
/* Sections */
.oculus-section{ margin-top:var(--wp--preset--spacing--70); }
.oculus-sec-head{ margin-bottom:var(--wp--preset--spacing--40); gap:var(--wp--preset--spacing--30); }
.oculus-sec-head h2{ margin:0; }
.oculus-sec-link{ margin:0; font-family:var(--oculus-ui); font-size:var(--wp--preset--font-size--small); }
.oculus-sec-link a{ color:var(--twa-accent-ink); }
.oculus-cards.is-layout-grid, .oculus-pillar-grid.is-layout-grid{ grid-template-columns:repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); }
.oculus-cards, .oculus-pillar-grid{ gap:var(--wp--preset--spacing--30); }
.oculus-card{ height:100%; padding:var(--wp--preset--spacing--40); border:1px solid var(--twa-line); border-radius:var(--oculus-r); background:var(--twa-surface); }
.oculus-card:hover{ border-color:var(--twa-accent); }
.oculus-card .oculus-card-title{ font-size:var(--wp--preset--font-size--medium); line-height:1.25; margin:.55em 0 .3em; }
.oculus-card .oculus-card-title a{ color:var(--twa-ink); text-decoration:none; }
.oculus-card .wp-block-post-excerpt{ color:var(--twa-ink-soft); font-size:var(--wp--preset--font-size--small); margin:0; }
.oculus-card .wp-block-post-excerpt__excerpt, .oculus-pillar-card .wp-block-post-excerpt__excerpt, .oculus-pillar-item .wp-block-post-excerpt__excerpt{ margin:0; }
.oculus-pillar-card{ height:100%; padding:var(--wp--preset--spacing--40); background:var(--oculus-card); border-top:3px solid var(--twa-accent); border-radius:0 0 var(--oculus-r) var(--oculus-r); }
.oculus-pillar-card .wp-block-post-title{ font-size:var(--wp--preset--font-size--large); margin:.3em 0; }
.oculus-pillar-card .wp-block-post-title a{ color:var(--twa-ink); text-decoration:none; }
.oculus-pillar-card .wp-block-post-excerpt{ font-size:var(--wp--preset--font-size--small); color:var(--twa-ink-soft); margin:0; }
.oculus-count{ font-size:.8rem; font-weight:600; color:var(--twa-accent-ink); margin:.8em 0 0; }
.oculus-list{ list-style:none; padding:0; margin:0; }
.oculus-list > li{ border-top:1px solid var(--twa-line); padding-block:var(--wp--preset--spacing--30); margin:0; }
.oculus-list > li:last-child{ border-bottom:1px solid var(--twa-line); }
.oculus-list-title{ font-family:var(--oculus-ui); font-size:var(--wp--preset--font-size--base); font-weight:600; line-height:1.35; margin:0; }
.oculus-list-title a{ color:var(--twa-ink); text-decoration:none; }
.oculus-list-title a:hover{ text-decoration:underline; }
.oculus-list-meta{ gap:.3rem .9rem; margin-top:.25rem; font-family:var(--oculus-ui); font-size:var(--wp--preset--font-size--small); color:var(--twa-ink-soft); }
.oculus-list-meta > *{ margin:0; }
.oculus-list-meta a{ color:inherit; }
/* Article */
.oculus-article-head .wp-block-post-title{ margin:.25em 0 .3em; }
.oculus-byline{ gap:.2rem .6rem; margin-top:var(--wp--preset--spacing--40); font-family:var(--oculus-ui); font-size:var(--wp--preset--font-size--small); color:var(--twa-ink-soft); }
.oculus-byline > *{ margin:0; }
.oculus-byline a{ color:var(--twa-ink); font-weight:600; text-decoration:none; }
.oculus-byline .wp-block-post-author-name::after{ content:"·"; margin-left:.6rem; color:var(--twa-ink-soft); }
.oculus-body{ font-size:calc(var(--wp--preset--font-size--base) * 1.05); line-height:1.75; }
.oculus-body h2{ margin-top:1.8em; }
.twa-takeaways, .oculus-takeaways{ padding:var(--wp--preset--spacing--40); background:var(--twa-accent-soft); border-radius:var(--oculus-r); }
.twa-takeaways > :first-child{ color:var(--twa-ink); }
.wp-block-quote.is-style-pull{ border:0; padding:0; margin-block:var(--wp--preset--spacing--50); font-family:var(--wp--custom--font-display); font-weight:var(--oculus-hw); font-size:var(--wp--preset--font-size--x-large); line-height:1.3; color:var(--twa-accent-ink); }
.wp-block-quote cite{ display:block; font-family:var(--oculus-ui); font-size:var(--wp--preset--font-size--small); font-style:normal; color:var(--twa-ink-soft); }
.oculus-part-of{ gap:.6rem; padding-block:var(--wp--preset--spacing--30); border-block:1px solid var(--twa-line); }
.oculus-part-of .wp-block-post-terms a{ color:var(--twa-ink); font-weight:600; }
.oculus-siblings{ list-style:none; padding:0; margin:var(--wp--preset--spacing--20) 0 0; }
.oculus-siblings > li{ margin:0; border-top:1px solid var(--twa-line); }
.oculus-sibling{ font-family:var(--oculus-ui); font-size:var(--wp--preset--font-size--base); margin:0; }
.oculus-sibling a{ display:block; padding-block:.7rem; color:var(--twa-ink); text-decoration:underline; text-decoration-color:var(--twa-line); line-height:1.35; }
.oculus-author-card{ gap:var(--wp--preset--spacing--30); padding-block:var(--wp--preset--spacing--40); border-block:1px solid var(--twa-line); }
.oculus-author-card .wp-block-avatar img{ border-radius:50%; }
.oculus-author-card .wp-block-post-author-name{ font-weight:600; }
.oculus-author-card .wp-block-post-author-biography{ font-size:var(--wp--preset--font-size--small); color:var(--twa-ink-soft); }
.wp-block-details{ border-top:1px solid var(--twa-line); padding-block:.8rem; }
.wp-block-details summary{ font-weight:600; cursor:pointer; min-height:28px; }
/* Pillar */
.oculus-pillar-meta{ gap:.3rem .9rem; font-family:var(--oculus-ui); font-size:var(--wp--preset--font-size--small); color:var(--twa-ink-soft); }
.oculus-pillar-meta > *{ margin:0; }
.oculus-pillar-meta .oculus-count{ font-size:inherit; margin:0; }
.oculus-pillar-list{ list-style:none; padding:0; counter-reset:oculus-p; }
.oculus-pillar-list > li{ margin:0; counter-increment:oculus-p; display:grid; grid-template-columns:2.6rem 1fr; padding-block:var(--wp--preset--spacing--30); border-top:1px solid var(--twa-line); }
.oculus-pillar-list > li::before{ content:counter(oculus-p, decimal-leading-zero); font-family:var(--oculus-ui); font-weight:700; color:var(--twa-accent-ink); }
.oculus-pillar-item .wp-block-post-title{ font-size:var(--wp--preset--font-size--medium); margin:0 0 .2em; }
.oculus-pillar-item .wp-block-post-title a{ color:var(--twa-ink); text-decoration:none; }
.oculus-pillar-item .wp-block-post-excerpt{ color:var(--twa-ink-soft); font-size:var(--wp--preset--font-size--small); margin:0; }
/* Newsletter */
.oculus-newsletter{ margin-top:var(--wp--preset--spacing--70); background:var(--twa-accent-soft); border-radius:var(--oculus-r); padding:var(--wp--preset--spacing--60) var(--wp--preset--spacing--50); }
.oculus-newsletter-inner{ align-items:center; gap:var(--wp--preset--spacing--40); }
.oculus-newsletter h2{ margin:.25em 0 .3em; }
.oculus-newsletter .oculus-soft{ margin:0; color:var(--twa-ink); }
.oculus-newsletter .oculus-label{ color:var(--twa-ink); }
.oculus-newsletter .twa-core-subscribe, .oculus-newsletter form{ display:flex; flex-wrap:wrap; gap:.5rem; }
.oculus-newsletter input[type="email"]{ flex:1 1 13rem; padding:.5rem .8rem; font:inherit; min-height:44px; }
.wp-block-group.is-style-panel{ padding:var(--wp--preset--spacing--40); border:1px solid var(--twa-line); border-radius:var(--oculus-r); }
.wp-block-group.is-style-band{ padding:var(--wp--preset--spacing--50); background:var(--twa-accent-soft); border-radius:var(--oculus-r); }
.oculus-topics-list{ list-style:none; padding:0; margin:var(--wp--preset--spacing--30) 0 0; display:flex; flex-wrap:wrap; gap:.5rem; }
.oculus-topics-list li a{ display:inline-flex; align-items:center; min-height:44px; padding:0 .9rem; border:1px solid var(--twa-line); border-radius:999px; color:var(--twa-ink); text-decoration:none; font-family:var(--oculus-ui); font-size:var(--wp--preset--font-size--small); }
.oculus-chips{ gap:.5rem; }
.oculus-chips .wp-block-button__link{ border-radius:999px; min-height:44px; display:inline-flex; align-items:center; padding:.4rem 1rem; font-size:var(--wp--preset--font-size--small); }
/* Footer */
.oculus-footer{ border-top:1px solid var(--twa-line); color:var(--twa-ink-soft); font-family:var(--oculus-ui); font-size:var(--wp--preset--font-size--small); }
.oculus-footer .wp-block-site-title{ font-family:var(--wp--custom--font-display); font-weight:var(--oculus-hw); font-size:var(--wp--preset--font-size--medium); color:var(--twa-ink); margin:0; }
.oculus-footer-tagline{ margin:.3em 0 0; max-width:28rem; }
.oculus-footer-nav a{ color:var(--twa-ink-soft); text-decoration:none; }
.oculus-footer-nav a:hover{ color:var(--twa-ink); }
.oculus-footer-nav .wp-block-navigation-item__content{ min-height:44px; display:inline-flex; align-items:center; }
.oculus-credit{ margin:var(--wp--preset--spacing--40) 0 0; }
.oculus-credit a{ color:inherit; }
.wp-block-search__input{ min-height:44px; }
/* Dark mode: the primary button stays light and strong whatever the brand colour. */
:root{ --oculus-btn-dark: var(--twa-ink); }
@supports (color: oklch(from red l c h)) {
  :root{ --oculus-btn-dark: oklch(from var(--twa-brand) max(l, calc(0.7 + 0.24 * (1 - min(c / 0.06, 1)))) min(c, 0.16) h); }
}
@media (prefers-color-scheme: dark) {
  html:not(.twa-no-dark):not([data-theme="light"]) .wp-block-button:not(.is-style-outline):not(.is-style-text) > .wp-block-button__link,
  html:not(.twa-no-dark):not([data-theme="light"]) .twa-core-subscribe button{ background-color:var(--oculus-btn-dark); color:var(--twa-surface); }
}
html[data-theme="dark"] .wp-block-button:not(.is-style-outline):not(.is-style-text) > .wp-block-button__link,
html[data-theme="dark"] .twa-core-subscribe button{ background-color:var(--oculus-btn-dark); color:var(--twa-surface); }
@media print{ .oculus-newsletter, .oculus-header-actions{ display:none !important; } }


/* Author on the home page */
.oculus-author-hero{ gap:var(--wp--preset--spacing--50); padding-block:var(--wp--preset--spacing--60); border-bottom:1px solid var(--twa-line); }
.oculus-author-hero .wp-block-avatar img{ border-radius:50%; width:min(160px, 36vw); height:auto; aspect-ratio:1; object-fit:cover; border:1px solid var(--twa-line); }
.oculus-author-hero h1{ font-size:var(--wp--preset--font-size--display); max-width:18ch; margin:.25em 0 .2em; }
.oculus-idea{ font-family:var(--wp--custom--font-display); font-style:italic; font-size:var(--wp--preset--font-size--medium); color:var(--twa-accent-ink); max-width:36rem; }
.oculus-kinds{ gap:var(--wp--preset--spacing--60); }
.oculus-essay-list .wp-block-post-template{ list-style:none; padding:0; margin:0; }
.oculus-essay{ padding-block:var(--wp--preset--spacing--40); border-top:1px solid var(--twa-line); }
.oculus-essay .wp-block-post-title{ font-size:var(--wp--preset--font-size--large); margin:.35em 0 .2em; }
.oculus-essay .wp-block-post-title a, .oculus-note-card .wp-block-post-title a, .oculus-practice-card .wp-block-post-title a{ color:var(--twa-ink); text-decoration:none; }
.oculus-essay .wp-block-post-excerpt{ color:var(--twa-ink-soft); margin:0; }
.oculus-essay .wp-block-post-excerpt__excerpt, .oculus-note-card .wp-block-post-excerpt__excerpt, .oculus-practice-card .wp-block-post-excerpt__excerpt{ margin:0; }
.oculus-note-list .wp-block-post-template{ list-style:none; padding:0; margin:0; display:grid; gap:.8rem; }
.oculus-note-card{ padding:var(--wp--preset--spacing--30) var(--wp--preset--spacing--40); border-left:3px solid var(--twa-accent); background:var(--oculus-card); border-radius:0 var(--oculus-r) var(--oculus-r) 0; }
.oculus-note-card .wp-block-post-title{ font-family:var(--wp--custom--font-display); font-weight:400; font-size:var(--wp--preset--font-size--base); line-height:1.5; margin:.2em 0 0; }
.oculus-note-card .wp-block-post-date{ font-size:.8rem; color:var(--twa-ink-soft); }
.oculus-practice-card{ height:100%; padding:var(--wp--preset--spacing--40); border:1px solid var(--twa-line); border-radius:var(--oculus-r); }
.oculus-practice-card .wp-block-post-title{ font-size:var(--wp--preset--font-size--medium); margin:.5em 0 .2em; }
.oculus-practice-card .wp-block-post-excerpt{ font-size:var(--wp--preset--font-size--small); color:var(--twa-ink-soft); margin:0; }
/* Essay */
.oculus-body.oculus-dropcap > p:first-of-type::first-letter{ float:left; font-family:var(--wp--custom--font-display); font-weight:var(--oculus-hw); font-size:3.6em; line-height:.85; margin:.08em .1em 0 0; color:var(--twa-accent-ink); }
.oculus-series{ display:flex; flex-wrap:wrap; gap:.3rem 1rem; align-items:center; padding:.8rem 1rem; background:var(--oculus-card); border-radius:var(--oculus-r); font-family:var(--oculus-ui); font-size:var(--wp--preset--font-size--small); margin-block:var(--wp--preset--spacing--40); }
.oculus-series p{ margin:0; }
.oculus-series-name{ font-weight:700; color:var(--twa-accent-ink); }
.oculus-signoff{ font-family:var(--wp--custom--font-display); font-style:italic; font-size:var(--wp--preset--font-size--medium); margin-top:var(--wp--preset--spacing--50); }
/* Note */
.oculus-note-head .wp-block-post-title{ font-size:var(--wp--preset--font-size--x-large); font-weight:400; line-height:1.4; }
.oculus-note-nav{ display:grid; grid-template-columns:1fr 1fr; gap:var(--wp--preset--spacing--30); margin-top:var(--wp--preset--spacing--60); }
.oculus-note-nav a{ display:block; padding:var(--wp--preset--spacing--30); border:1px solid var(--twa-line); border-radius:var(--oculus-r); color:var(--twa-ink); text-decoration:none; font-family:var(--oculus-ui); }
.oculus-note-nav a[rel="next"]{ text-align:right; grid-column:2; }
.oculus-note-nav span{ display:block; font-size:.8rem; color:var(--twa-ink-soft); }
/* Practice */
.oculus-facts{ gap:.4rem 1.2rem; font-family:var(--oculus-ui); font-size:var(--wp--preset--font-size--small); font-weight:600; color:var(--twa-ink-soft); margin-block:var(--wp--preset--spacing--30) var(--wp--preset--spacing--40); }
.oculus-facts > *{ margin:0; }
ol.oculus-steps{ counter-reset:oc-s; list-style:none; padding:0; margin:var(--wp--preset--spacing--40) 0; }
ol.oculus-steps > li{ counter-increment:oc-s; position:relative; padding:.9rem 0 .9rem 3rem; margin:0; border-top:1px solid var(--twa-line); }
ol.oculus-steps > li::before{ content:counter(oc-s); position:absolute; left:0; top:.75rem; width:2rem; height:2rem; border-radius:50%; display:grid; place-items:center; background:var(--twa-accent-soft); color:var(--twa-accent-ink); font-family:var(--oculus-ui); font-weight:700; font-size:.9rem; }
.oculus-why{ padding:var(--wp--preset--spacing--40); background:var(--twa-accent-soft); border-radius:var(--oculus-r); }
.oculus-why > :first-child{ margin-top:0; }
/* Archive */
.oculus-filter{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:var(--wp--preset--spacing--40); }
.oculus-filter a{ display:inline-flex; align-items:center; min-height:44px; padding:0 1rem; border:1px solid var(--twa-line); border-radius:999px; color:var(--twa-ink); text-decoration:none; font-family:var(--oculus-ui); font-size:var(--wp--preset--font-size--small); }
.oculus-filter a[aria-current="page"]{ background:var(--twa-ink); color:var(--twa-surface); border-color:var(--twa-ink); }
.oculus-year{ display:grid; gap:var(--wp--preset--spacing--30); padding-block:var(--wp--preset--spacing--50); border-top:1px solid var(--twa-line); }
@media (min-width:820px){ .oculus-year{ grid-template-columns:9rem 1fr; } }
.oculus-year h2{ font-size:var(--wp--preset--font-size--xx-large); color:var(--twa-accent-ink); margin:0; }
.oculus-year .oculus-list > li{ display:flex; flex-wrap:wrap; gap:.2rem .7rem; align-items:baseline; }
.oculus-kind{ font-family:var(--oculus-ui); font-size:.68rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--twa-ink-soft); }
.oculus-year-link{ font-weight:600; color:var(--twa-ink); text-decoration:none; }
.oculus-year-link:hover{ text-decoration:underline; }
.oculus-year-date{ font-family:var(--oculus-ui); font-size:.85rem; color:var(--twa-ink-soft); }
/* About */
.oculus-about-head .wp-block-post-featured-image img{ width:120px; height:120px; border-radius:50%; object-fit:cover; }
