/* EVERSIGHT: our design CSS.
   Moved word for word from Ghost admin > Settings > Code injection > Site header
   (the <style> block) on 2026-10-08. Loaded by partials/head.hbs after Ubud's own CSS. */

@font-face {
font-family: concourse_6;
font-style: normal;
font-weight: normal;
font-stretch: normal;
font-display: fallback;
src: url('../fonts/concourse_6_regular-v2.woff2') format('woff2');
}

@font-face {
font-family: concourse_6;
font-style: italic;
font-weight: normal;
font-stretch: normal;
font-display: fallback;
src: url('../fonts/concourse_6_regular-v2.woff2') format('woff2');
}
    
@font-face {
font-family: valkyrie_a;
font-style: normal;
font-weight: normal;
font-stretch: normal;
font-display: fallback;
src: url('../fonts/valkyrie_a_regular-v2.woff2') format('woff2');
}

@font-face {
font-family: valkyrie_a;
font-style: italic;
font-weight: normal;
font-stretch: normal;
font-display: fallback;
src: url('../fonts/valkyrie_a_italic-v2.woff2') format('woff2');
}

@font-face {
font-family: valkyrie_a;
font-style: normal;
font-weight: bold;
font-stretch: normal;
font-display: fallback;
src: url('../fonts/valkyrie_a_bold-v2.woff2') format('woff2');
}

@font-face {
font-family: valkyrie_a;
font-style: italic;
font-weight: bold;
font-stretch: normal;
font-display: fallback;
src: url('../fonts/valkyrie_a_bold-v2.woff2') format('woff2');
}
    
@font-face {
font-family: valkyrie_a_caps;
font-style: normal;
font-weight: normal;
font-stretch: normal;
font-display: fallback;
src: url('../fonts/valkyrie_a_caps_regular-v2.woff2') format('woff2');
}

@font-face {
font-family: valkyrie_a_caps;
font-style: normal;
font-weight: bold;
font-stretch: normal;
font-display: fallback;
src: url('../fonts/valkyrie_a_caps_bold-v2.woff2') format('woff2');
}
  
html { font-size: 2.4vw; }
@media all and (min-width:1000px) { html { font-size: 24px; } }
@media all and (max-width:520px) { html{ font-size: 18px; } }
    
body {
font-family: valkyrie_a;
font-size: 0.91rem;
font-variant-numeric: oldstyle-nums;
line-height: 1.55;
}
    
.deck {
font-size: 115%;
font-weight: bolder;
line-height: 1.25;
hyphens: none;
padding-top: 0.25rem;
padding-bottom: 0.25rem;
}
    
.c-nav__link {
font-family: "concourse_6";
font-feature-settings: 'case' 1;
font-size: 0.73rem;
letter-spacing: 1px;
text-transform: uppercase;
}
    
.c-home--content-only {
border-radius: 7px;
background-color: #fff;
box-shadow: 0px 0px 13px -6px rgba(0, 0, 0, 0.10),0px 20px 31px 3px rgba(0, 0, 0, 0.05),0px 8px 38px 7px rgba(0, 0, 0, 0.05);
-webkit-box-shadow: 0px 0px 13px -6px rgba(0, 0, 0, 0.10),0px 20px 31px 3px rgba(0, 0, 0, 0.05),0px 8px 38px 7px rgba(0, 0, 0, 0.05);
-moz-box-shadow: 0px 0px 13px -6px rgba(0, 0, 0, 0.10),0px 20px 31px 3px rgba(0, 0, 0, 0.05),0px 8px 38px 7px rgba(0, 0, 0, 0.05);
}
    
.c-title-bar__divider {
margin-top: 6px;
}
    
h1, .c-post-header__title {
font-family: "valkyrie_a";
display: block;
font-size: 170%;
hyphens: none;
letter-spacing: inherit;
line-height: 1.1;
margin-top: 2rem;
margin-bottom: 2rem;
/** padding-bottom: 0.15em;
padding-top: 0.1em; **/
text-transform: inherit;
font-weight: 400;
font-style: italic;
}
    
.title {
font-size: 125% !important;
font-weight: bold;
line-height: 1.1 !important;
hyphens: none;
text-align: center;
margin-bottom: 1rem;
font-family: valkyrie_a;
font-style: normal;
letter-spacing: normal !important;  
}
    
h2, .c-content h2 {
margin-top: 1.25rem;
font-size: 110%;
font-style: normal;
font-weight: bolder;
font-family: valkyrie_a;
line-height: 1.45;
font-variant-numeric: oldstyle-nums;
letter-spacing: var(--font-letter);
}
    
.c-title-bar__title {
font-family: valkyrie_a_caps;
line-height: 1.3;
text-transform: lowercase;
font-feature-settings: 'c2sc' 1;
font-weight: bolder;
font-size: 0.93rem;
font-variant-numeric: oldstyle-nums;
margin-top: 0;
}
    
.c-post-card__title {
margin-top: 0;
}
    
.c-content h2, .c-content h3, .c-content .price {
font-family: valkyrie_a_caps;
line-height: 1.3;
margin-top: 1.4rem;
text-transform: lowercase;
font-feature-settings: 'c2sc' 1;
font-weight: bolder;
font-size: 1rem; /** 0.91rem **/
font-variant-numeric: oldstyle-nums;
margin-bottom: 0.25rem;
letter-spacing: var(--font-letter);
}
    
.c-content .price {
font-family: valkyrie_a_caps;
line-height: 1.3;
margin-top: 0.5rem;
text-transform: lowercase;
font-feature-settings: 'c2sc' 1;
font-weight: bolder;
font-size: 0.91rem;
font-variant-numeric: oldstyle-nums;
margin-bottom: 0rem;
letter-spacing: var(--font-letter);
text-align: center;
}
    
button, .c-btn--full,input {  
font-family: "concourse_6";
font-feature-settings: 'case' 1;
font-size: 0.7rem;
letter-spacing: 1px;
text-transform: uppercase;
font-weight: 400;
}
    
.c-pagination {
margin-bottom: 0;
}
    
footer.c-footer {
margin-top: 0;
}
    
.c-footer-copy {
color: #757575;
max-width: var(--content-width) !important;
text-align: center;
margin: 0 auto;
line-height: 1.5;
}
    
.c-footer-copy a {
color: #757575;
border-bottom: 1px dotted #757575;
}
    
.c-footer-copy a:hover {
color: #333 !important;
border-bottom: none;
}
        
.c-archive__title {
margin-bottom: 0;
font-size: 170%;
letter-spacing: inherit;
}
    
.cta {
text-align: center;
}
    
.c-post ul {
font-size: 100%;
}
    
a.c-post-card__url {
font-family: valkyrie_a;
line-height: 1.3;
font-feature-settings: 'c2sc' 1;
font-size: 0.85rem;
font-variant-numeric: oldstyle-nums;
}
    
figure.kg-card {
padding-top: 5px;
background-color: #fff !important;
}
    
blockquote {
margin-top: 35px !important;
margin-bottom: 10px;
}

article ul li {
padding-left: 5px;
}
    
p.c-post-card__excerpt {
font-family: valkyrie_a;
font-size: 0.7rem;
font-variant-numeric: oldstyle-nums;
line-height: 1.5; 
}
    
.kg-video-container,video,kg-video-card {
   outline: unset  !important;
   border: none !important;
    /** background: #fff !important;
        -webkit-mask-image: -webkit-radial-gradient(white, black);
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden; **/
}
    
.u-bg-gray {
background-color: #fff;
margin-top: 0;
}
    
input {
background-color: #ccc;
}
    
input .c-form-group__input,.c-form-group__btn {
font-family: "concourse_6";
font-feature-settings: 'case' 1;
font-size: 0.6rem;
letter-spacing: 1px;
text-transform: uppercase;
font-weight: 400;
}
    
/**
    input[type="email"] {
border: 1px solid #D2D2D2;
color: #a8a8a8;
}
    
input[type="email"]:focus {
    outline: none !important;
    border: 1px solid #eee;
color: #eee;
}
    
input[type="email"]:hover {
    outline: none !important;
    border: 1px solid #000;
color: #000 !important;
}
**/
    
.c-form-group {
width: 90%;
margin: 0 auto;
}
    
ul.c-share {
justify-content: center;
}
    
@media all and (min-width:1000px) {
	video {
		max-width: 60%;
        align-self: center;
  	}
    
    .c-content > * {
min-width: 0;
    }
    
    .c-title-bar__divider {
    margin-left: 20px;
    }
}
    
@media all and (max-width:1000px) {
	video {
		max-width: 100%;
        align-self: center;
  	}
    
    .c-content > * {
min-width: 0;
    }
    
    .c-home--content-only {
border-radius: none;
background-color: #fff;
box-shadow: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
}
    
.c-title-bar__divider {
    margin-left: 0;
    }
    
.c-home {
    margin-bottom: 0;
    }
}
    
.c-content {
align-items: normal !important;
}
    
.c-post-header__excerpt,.c-post-header__author_media {
    display: none;
    }
    
.c-post-header__meta,.c-post-header__author_name,.c-post-header__date {
    font-family: valkyrie_a_caps;
text-transform: lowercase;
font-feature-settings: 'c2sc' 1;
font-size: 0.8rem !important;
font-variant-numeric: oldstyle-nums;
    color: #757575;
    font-weight: normal;
letter-spacing: normal;
    }
    
.c-post-header__reading-time {
    display: none;
    }
    
    .c-post-header__author_name {
        color: #757575;
    }
    
    .c-post-header__title {
        margin-bottom: 0rem !important;
        line-height: 1.3 !important;
    }
    
    .c-post-header__author {
        display: inherit;
    }
    
    .c-tags {
        display: none;
    }
    
    .c-post ul {
        margin-top: var(--space-16) !important;
    }
    
input[type="email"] {
font-size: 0.6rem;
}
    
.c-pagination--count-3 {
    margin-top: 5px;
    margin-bottom: 5px;
    }
    
.c-title-bar {
    margin-top: 5px;
    }
    
.c-nav__link::after {
display: none;
}
    
.c-post-card__meta {
display: none;
}
    
.c-post-card {
grid-template-columns: repeat(9,1fr);
grid-template-areas: "content content content content content content media media media";
}
    
.c-header .is-membership { display: none; }
    
.c-post-card__visibility {
display: none;
}
    
h2.summary {
border-bottom: 4px double #ccc;
display: block;
font-family: "concourse_6";
font-feature-settings: 'case' 1;
font-size: 0.8rem;
letter-spacing: 2px;
margin-bottom: 1em;
padding-bottom: 0.6em;
text-align: center;
text-transform: uppercase;
font-weight: normal;
}
    
.c-content .kg-callout-card {
display: block;
/** margin-top: 1.5rem;
margin-bottom: 1.5rem; **/
background: #fcfcfc;
background: radial-gradient(circle at center, #ffffff 17%, #fcfcfc 100%);
padding: 1rem 1rem 1rem 1rem;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
font-variant-numeric: normal;
border-radius: 0;
}
    
.c-post-header__author_name {
font-family: valkyrie_a_caps;
/** line-height: 1.3;
margin-top: 1.4rem; **/
text-transform: lowercase;
font-feature-settings: 'c2sc' 1;
/** font-weight: bolder; **/
font-size: 0.7rem;
font-variant-numeric: oldstyle-nums;
}

.c-content a:not([class]) {
/** border-bottom: 1px dotted  #555;
border-bottom: 2px solid #ddd; **/
border-bottom: 1px dotted #7d867c;
text-decoration: none;
text-underline-position: under;
}

.c-content a:hover {
  color: #000 !important;
/** border-bottom: 2px solid  #819F68 !important; **/
border-bottom: 1px solid #999892 !important;
/** background: #fcf8ce; **/
}
    
a:active,a:focus {
outline: none;
}
    
.c-nav-wrap a:hover {
color: #819F68;
transition-property: all;
transition-duration: 0.1s;
}
    
.c-alert--success {
color: var(--color-text-secondary);
text-align: center;
}
    
.c-content ul, .c-content ol {
padding-left: var(--space-24);
font-variant-numeric: oldstyle-nums;
}


/* ==========================================================================
   EVERSIGHT ADDITIONS
   Everything above this line is the code injection copy. Everything below
   was added in the theme itself.
   ========================================================================== */

/* Menu spacing: Ubud 1.1.2 narrowed the gap between desktop menu items from
   24px to 20px. Restore the 1.0.8 spacing. Same breakpoint as Ubud's rule. */
@media (min-width: 61.25em) {
  .c-nav__item:not(:last-child) {
    margin-right: var(--space-24);
  }
}


/* ---------- Typography fixes per Butterick's Practical Typography ----------
   1. Space between paragraphs: his range is 50-100% of the text size; ours was a
      fixed 24px (110% on desktop, 146% on phones). 0.8em scales with the text.
   2. Small caps get 5-12% letterspacing. Our small-caps rules above use
      var(--font-letter), which was never defined, so they had none.
   (Line spacing deliberately stays at our 155%, a little above his 120-145%.) */
.c-content > p + p {
  margin-top: 0.8em;
}

.c-content h2,
.c-content h3,
.c-content .price,
.c-title-bar__title,
.c-post-header__meta,
.c-post-header__author_name,
.c-post-header__date {
  letter-spacing: 0.05em;
}

/* Idea titles are sentences in ordinary type, not small caps: no letterspacing. */
.c-content .ev-idea__title {
  letter-spacing: normal;
}


/* ==========================================================================
   EVERSIGHT: IDEAS PAGE (page-ideas.hbs, partials/ideas-domain.hbs, js/ideas.js)
   ========================================================================== */

/* ---------- Domain buttons: Concourse capitals with Roman numerals ----------
   The seven buttons are wider than the 730px text column, so on desktop the
   button area may run a little wider (up to 880px, still centred) and splits 4 + 3. */
.ev-domains {
  margin: 2rem 0 1.5rem;
}

.ev-domains__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem calc(0.5rem + 5px);    /* across: the same visible gap as before the padding fix below */
}

/* The theme's 'article ul li' padding (5px, meant for bulleted lists) pushed every button
   5px right; on phones that left the grid out of line with the text. */
.ev-domains__item { padding-left: 0; }

.ev-domains__break { display: none; }

@media (min-width: 61.25em) {
  .ev-domains {
    --ev-domains-width: min(880px, calc(100vw - 4rem));
    width: var(--ev-domains-width);
    margin-left: calc((100% - var(--ev-domains-width)) / 2);
  }
  .ev-domains__break {
    display: block;
    flex-basis: 100%;
    height: 0;
  }
}

.ev-domains__tab {
  display: block;
  padding: 0.45em 0.85em 0.4em;
  border: 1px solid #d6d6d6;
  border-radius: 999px;
  background: #fff;
  color: #181818;
  font-family: "concourse_6";
  font-feature-settings: 'case' 1;
  font-size: 0.6rem;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  text-decoration: none;
  transition: border-color 0.1s, background-color 0.1s, color 0.1s;
}

.ev-domains__tab:hover { border-color: #181818; }

.ev-domains__tab[aria-selected='true'] {
  background: #181818;
  border-color: #181818;
  color: #fff;
}


.ev-domains__num {
  margin-right: 0.4em;
  opacity: 0.6;                    /* was 0.5: grey #747474, 4.6:1 contrast (WCAG AA) */
}

.ev-domains__tab[aria-selected='true'] .ev-domains__num { opacity: 0.6; }

/* Phones and tablets: an even grid, two equal columns with the names centred and VII centred
   below at the same width (option P1, chosen 2026-10-21). 11px with the usual letter-spacing is
   the largest size at which the longest names (Surviving randomness, Questioning crowds) keep
   room inside their pills in Safari on a 393px iPhone; narrower phones scale the text down so
   nothing spills. The grid stops at 440px wide so pills don't stretch on tablets. */
@media (max-width: 61.24em) {
  .ev-domains { margin-top: 26px; }   /* phones: buttons a little closer to the intro (32px of visible space, was 42px) */
  .ev-domains__break { display: none; }
  .ev-domains__list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 8px;
    max-width: 440px;
    margin: 0 auto;
  }
  .ev-domains__item:last-child {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc(50% - 4px);
  }
  .ev-domains__tab {
    font-size: min(calc((100vw - 32px) * 0.03047), 11px);
    letter-spacing: 0.6px;
    padding: 0.65em 0.2em 0.6em;
    text-align: center;
    white-space: nowrap;
  }
}

/* ---------- Domains ---------- */
.ev-panel + .ev-panel { margin-top: 3rem; }        /* without JavaScript: all stacked */
.ev-js .ev-panel + .ev-panel { margin-top: 0; }
.ev-panel:focus { outline: none; }
.ev-panel__title { text-align: center; }

/* With JavaScript the selected button names the domain, so the heading is kept
   for screen readers only. */
.ev-js .ev-panel__title {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.ev-panel__empty {
  margin-top: 2rem;
  color: #757575;
  font-style: italic;
  text-align: center;
}

/* Cross-fade when switching from the side list, Previous/Next or Back */
.ev-panel { transition: opacity 0.16s ease; }
.ev-panels.is-fading .ev-panel { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .ev-panel { transition: none; }
}

/* ---------- One idea ----------
   Decided 2026-10-11. Text follows the site-wide page settings (700px column, 145% line
   spacing, a full line between paragraphs, no hyphenation, our usual colour). */

/* ---------- Divider before each idea: "IDEA 2 OF 4" between hairlines ----------
   Counted per theme, with one before the first idea too. Space above and below is equal.
   Ghost's 16px padding under image captions is removed so an image doesn't leave a bigger
   gap than text does.
   ALTERNATES considered (2026-10-10), replacing the label with an ornament:
     O3 lozenge ◊ between hairlines (content: "\25CA", Valkyrie, 1.1rem; used for Divider cards)
     D3 three asterisks, no hairlines   D4 dot between hairlines   O6 small solid diamond */
.ev-sep {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin: 1.6rem 0;
  color: #757575;   /* was #8a8a8a: 4.6:1 contrast, the WCAG AA minimum for small text (same grey as the footer) */
  line-height: 1;
}
.ev-panel > .ev-sep:first-of-type { margin-top: 2rem; }

.ev-sep::before,
.ev-sep::after {                 /* the hairlines */
  content: "";
  flex: 1;
  border-top: 1px solid #e2e2e2;
}

.ev-sep__label {
  font-family: "concourse_6";
  font-feature-settings: 'case' 1;
  font-variant-numeric: lining-nums;   /* capital-height figures to match the capitals */
  font-size: 0.62rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  white-space: nowrap;
}

.ev-sep + .ev-idea { margin-top: 0; }
/* An idea's own address (/ideas/#slug) lands with its "Idea 2 of 4" divider in view */
.ev-idea { scroll-margin-top: 4rem; }
@media (max-width: 61.24em) { .ev-sep__label { font-size: 0.806rem; } }   /* phones: 30% larger */

.ev-idea .kg-card figcaption { padding-bottom: 0; }

.c-content .ev-idea__title {
  margin: 0;
  font-family: valkyrie_a;
  font-feature-settings: normal;
  font-size: 1rem;
  font-style: normal;
  font-weight: bold;
  letter-spacing: normal;
  line-height: 1.3;
  text-transform: none;
}

/* Keep each idea's title close to its own text (space above a heading, not below it) */
.c-content.ev-idea > .ev-idea__title + p,
.c-content.ev-idea > .ev-idea__source + * {
  margin-top: 0.5rem;
}

/* ---------- Book note ----------
   Narrower screens: "From Book" under the idea title, text only, in light grey.
   Wide screens: in the right margin, the cover with the italic title below and no "From"
   (still read out by screen readers). */
.page-ideas .c-content > .ev-idea__source {
  margin-top: 0.2rem;
  font-size: 0.75rem;
  line-height: 1.35;
  color: #757575;   /* was #8a8a8a: 4.6:1 contrast, the WCAG AA minimum for small text (same grey as the footer) */
}

.ev-mini-cover { display: none; }

/* ---------- Previous / Next at the bottom of each theme ---------- */
.ev-pager {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  /* Space alone ends each theme (2026-11-13; replaced Ubud's double rule): a line felt like a stop,
     space lets the reader flow on to the next theme. About 30px from the theme's last line to "NEXT"
     on phones, 41px on desktop.
     IF A LINE IS EVER WANTED AGAIN, these settings were tried and judged excellent (equal space above
     and below a hairline; 30px each on phones, 33px on desktop):
       .ev-pager { border-top: 1px solid #e2e2e2; margin-top: 1.67rem; padding-top: 1.53rem; }
       @media (min-width: 61.25em) { .ev-pager { margin-top: 1.38rem; padding-top: 1.25rem; } }  */
  margin-top: 1.56rem;
}
@media (min-width: 61.25em) {
  .ev-pager { margin-top: 1.63rem; }
}

.ev-pager__link {
  display: flex;
  flex-direction: column;
  gap: 0.235rem;                     /* between "NEXT" and the theme name; 10% more than before (was 0.15rem) */
  max-width: 48%;
  color: #181818;
  text-decoration: none;
}

.ev-pager__link--next {
  margin-left: auto;
  text-align: right;
}

.ev-pager__label {
  font-family: "concourse_6";
  font-feature-settings: 'case' 1;
  font-size: 0.62rem;                /* the same size as the "IDEA 1 OF 5" labels (was 0.55rem); 30% larger on phones below */
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #757575;
}

@media (max-width: 61.24em) { .ev-pager__label { font-size: 0.806rem; } }

/* The first theme has only "Next": centred under the theme instead of floating on the right */
.ev-pager--next-only { justify-content: center; }
.ev-pager--next-only .ev-pager__link--next { margin: 0 auto; text-align: center; align-items: center; }
/* ...and with the whole width to itself, its theme name needn't shrink on phones: full size (18px), like
   the idea titles. Desktop is unchanged (0.9rem everywhere). */
@media (max-width: 61.24em) {
  .ev-pager--next-only .ev-pager__link--next { max-width: 100%; }
  .ev-pager--next-only .ev-pager__name { font-size: max(18px, 0.9rem); }
}

.ev-pager__name {
  font-family: valkyrie_a;
  font-weight: bold;
  font-size: 0.9rem;
  line-height: 1.25;
}

.ev-pager__link:hover .ev-pager__name { color: #819F68; }
/* Phones: theme names 18px (the idea titles' size), shrinking only on narrow phones so a name never wraps
   beside its neighbour. The longest name, "Surviving randomness", appears only on Rethinking risk (as
   Previous), so that page alone uses a smaller fit: there both its names stay the same size (~16.2px on a
   393px iPhone). Elsewhere the longest is "Questioning crowds": 18px from about 385px wide, 17.5px at
   375px, 14.7px at 320px. Tablets: desktop's 0.9rem. No underline. */
@media (max-width: 61.24em) {
  .ev-pager__name { font-size: min(max(18px, 0.9rem), calc((100vw - 36px) * 0.0516)); }
  #rethinking-risk .ev-pager__name { font-size: min(max(18px, 0.9rem), calc((100vw - 36px) * 0.0459)); }
}
@media (min-width: 61.25em) { .ev-pager__link { gap: 0.22rem; } }   /* desktop: the same 10% increase */


/* ---------- Wide screens: side list (left margin) and book notes (right margin) ---------- */
.ev-rail { display: none; }

@media (min-width: 1240px) {
  .ev-panels { position: relative; }

  /* A zero-height sticky strip; the list hangs off it into the empty left margin,
     so it never takes width from the text. Shown once the buttons scroll away. */
  .ev-rail {
    display: block;
    position: sticky;
    top: 2rem;
    height: 0;
    z-index: 2;
    transition: opacity 0.2s, visibility 0.2s;
  }

  .ev-js .ev-rail:not(.is-visible) {
    opacity: 0;
    visibility: hidden;
  }

  .ev-rail__inner {
    position: absolute;
    top: 0;
    right: calc(100% + 48px);
    width: 180px;
  }

  .ev-rail__label {
    margin: 0 0 8px;
    font-family: "concourse_6";
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #757575;   /* was #8a8a8a: 4.6:1 contrast, the WCAG AA minimum for small text (same grey as the footer) */
  }

  .ev-rail__link {
    display: block;
    padding: 5px 0 5px 12px;
    border-left: 2px solid #ececec;
    font-size: 15px;
    line-height: 1.3;
    color: #6b6b6b;
    text-decoration: none;
  }

  .ev-rail__link:hover { color: #181818; }

  .ev-rail__link[aria-current='true'] {
    border-left-color: #181818;
    color: #181818;
    font-weight: bold;
  }

  /* Book note beside the idea title: the cover (flat, hairline, 100px), then the italic title */
  .ev-idea { position: relative; }

  .page-ideas .c-content > .ev-idea__source {
    position: absolute;
    top: 0.35rem;
    left: calc(100% + 48px);
    width: 170px;
    margin: 0;
    font-size: 15px;
  }

  .ev-idea__source-link { display: block; }
  .ev-idea__from {                 /* "From" is hidden on screen but read out by screen readers */
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }

  .ev-mini-cover {
    display: block;
    width: 100px;
    height: auto;
    aspect-ratio: 2 / 3;
    object-fit: cover;
    margin-bottom: 8px;
    border: 1px solid #dcdcdc;
    box-sizing: border-box;
    background: #eee;
  }
}

/* ==========================================================================
   EVERSIGHT: BOOKSHELF PAGE (page-bookshelf.hbs). Design G9, decided 2026-10-11:
   cover left (same shape for every book, hairline, no shadow), italic title,
   "Author · Year" in grey, idea count in small Concourse capitals, idea titles with
   a hanging arrow. Shares the intro's left edge; 760px wide on desktop so no idea title
   wraps. Books don't link; each idea title links to its spot on the Ideas page.
   ========================================================================== */

/* The shelf sits in the same column as the intro, so the covers share its left edge; on
   desktop it runs 60px past the column on the right (760px) so no idea title wraps. */
.ev-shelf { max-width: 700px; margin: 1.5rem auto 0; }   /* the same box as the intro text; 1.5rem (was 1rem): a little more room below the intro (36px desktop, 27px phones) */
@media (min-width: 61.25em) {
  .ev-shelf .ev-shelf__list { margin-right: -60px; }
}
.ev-shelf__list { list-style: none; margin: 0; padding: 0; }

.ev-shelf__book {
  display: grid; grid-template-columns: 150px 1fr; column-gap: 36px; align-items: start;
  margin: 0; padding: 36px 0; border-top: 1px solid #ececec;
}
.ev-shelf__book:first-child { border-top: 0; padding-top: 8px; }

.ev-shelf__cover {
  display: block; width: 100%; height: auto; aspect-ratio: 2 / 3; object-fit: cover;
  border: 1px solid #dcdcdc; box-sizing: border-box;
}
.ev-shelf__cover--none { background: #f3f2ef; }

.ev-shelf__text { min-width: 0; }
.ev-shelf__title {
  margin: 0; font-family: valkyrie_a; font-style: italic; font-weight: normal;
  font-size: 21px; line-height: 1.25; letter-spacing: 0;
}
.ev-shelf__author {
  margin: 0.2rem 0 0; color: #757575; font-family: valkyrie_a; font-size: 15px; line-height: 1.3;
}
.ev-shelf__year { white-space: nowrap; font-variant-numeric: oldstyle-nums; }
.ev-shelf__count {
  margin: 1.1rem 0 0; color: #757575;
  font-family: "concourse_6"; font-feature-settings: 'case' 1; text-transform: uppercase;
  font-variant-numeric: lining-nums;   /* capital-height "3" ('lnum' in font-feature-settings didn't take effect) */
  font-size: 0.62rem; letter-spacing: 1px; line-height: 1.3;   /* the same size as "IDEA 1 OF 5" (was 13.5px) */
}
@media (max-width: 61.24em) { .ev-shelf__count { font-size: 0.806rem; } }   /* tablets, as "IDEA 1 OF 5" */
/* Phones: the title and idea links shrink here, so the label does too (13.8px keeps desktop's
   proportion to the idea links; 14.5px looked large beside them) */
@media (max-width: 600px) { .ev-shelf__count { font-size: 13.8px; } }
.ev-shelf__ideas {
  list-style: none; margin: 0.35rem 0 0; padding: 0;
  font-family: valkyrie_a; font-size: 16px; line-height: 1.4;
}
/* The arrow hangs to the left so a wrapped line starts under the first word */
.ev-shelf__ideas li { position: relative; margin: 0.3rem 0 0; padding: 0 0 0 1.3em; }
.ev-shelf__ideas li::before { content: "\2192"; position: absolute; left: 0; color: #9a9a9a; }
/* Each idea links to its spot on the Ideas page, in the site's own link style
   (same as links in page text: dotted line, solid grey on hover) */
.ev-shelf__idea-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dotted #7d867c;
}
.ev-shelf__idea-link:hover,
.ev-shelf__idea-link:focus-visible { color: #000; border-bottom: 1px solid #999892; }

@media (max-width: 600px) {
  .ev-shelf__book { grid-template-columns: 96px 1fr; column-gap: 18px; padding: 24px 0; }
  .ev-shelf__title { font-size: 18px; }
  .ev-shelf__ideas { font-size: 15px; }
}

/* ==========================================================================
   EVERSIGHT: PAGE TEXT, SITE-WIDE (decided 2026-10-11)
   Every page, Ideas included: 700px column, 145% line spacing, a full line
   between paragraphs, original colour, no hyphenation.
   A Divider card in Ghost shows as the Ideas page lozenge (◊ between hairlines).
   ========================================================================== */

body.page-template .o-grid__col > article { max-width: 700px !important; }

body.page-template .c-content p,
body.page-template .c-content li { line-height: 1.45; }

body.page-template .c-content > p + p { margin-top: 1em; }
body.page-template .c-content li + li { margin-top: 0.6em; }

body.page-template .c-content > h2 { margin-top: 2.2rem; }
body.page-template .c-content > h2 + * { margin-top: 0.35rem; }

body.page-template .c-content > hr {
  height: 1.1rem; margin: 1.6rem 0; border: 0; overflow: visible; text-align: center;
  background:
    linear-gradient(#e2e2e2, #e2e2e2) left center / calc(50% - 1.25rem) 1px no-repeat,
    linear-gradient(#e2e2e2, #e2e2e2) right center / calc(50% - 1.25rem) 1px no-repeat;
}
/* The lozenge is Valkyrie's own ◊ outline, drawn as an image so its widest points sit exactly on
   the hairlines in every browser (as typed text, Safari set it about 4px low). Same size as the
   character at 1.1rem: 0.491em wide, 0.748em tall, centred in the 1.1rem-tall divider. */
body.page-template .c-content > hr::before {
  content: "";
  display: block;
  font-size: 1.1rem;
  width: 0.491em;
  height: 0.748em;
  margin: 0.126em auto 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 491 748'%3E%3Cpath fill='%23a3a3a3' d='M245 748 0 375 245 0 491 375ZM84 375 245 621 407 375 245 127Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
body.page-template .c-content > hr + * { margin-top: 0; }


/* ==========================================================================
   EVERSIGHT: PROCESS PAGE (the page at /process/, design P2, decided 2026-10-11)
   A thin line with a dot at each step joins the three phases, with "Step 1/2/3"
   above each heading. The theme finds the phases by their HEADING ADDRESSES, which
   Ghost makes from the heading text:
       Getting started  -> #getting-started   (Step 1)
       Initial work     -> #initial-work      (Step 2)
       Ongoing work     -> #ongoing-work      (Step 3)
       Fees             -> #fees              (the line stops before this heading)
   Renaming any of these four headings in Ghost means updating the names below.
   ========================================================================== */

/* Everything from "Getting started" up to (not including) "Fees". :where() keeps this rule
   weak, so the heading rules below can adjust their own spacing. */
.page-process .c-content > :where(#getting-started, #getting-started ~ *):not(:where(#fees, #fees ~ *)) {
  border-left: 1px solid #d6d6d6;
  padding-left: calc(2rem - 1px);  /* minus the line, so the text keeps the page's left edge */
  margin-top: 0 !important;        /* margins would break the line, so the spacing is padding */
  margin-bottom: 0 !important;
  padding-top: 1em;
}
.page-process .c-content > :is(#getting-started, #initial-work, #ongoing-work) { position: relative; }
.page-process .c-content > #getting-started { padding-top: 0; margin-top: 2.2rem !important; }
.page-process .c-content > :is(#initial-work, #ongoing-work) { padding-top: 2.2rem; }
.page-process .c-content > :is(#getting-started, #initial-work, #ongoing-work) + * { padding-top: 0.6rem; }
.page-process .c-content > :where(#getting-started, #getting-started ~ *):not(:where(#fees, #fees ~ *)):is(ol, ul) {
  margin-left: 0; padding-left: calc(2rem - 1px + 28px) !important;   /* beats Ubud's :root:root list rule */
  padding-inline-start: calc(2rem - 1px + 28px) !important;
}

/* The step label above each heading, and its dot on the line, level with the heading text
   (label 0.7rem x 1.3 + 0.15rem gap = 1.06rem, then half the heading's 1.3rem line).
   Label size 0.55rem → 0.7rem (option S3, 2026-11-12). The accent green stays as it is (2.96:1
   contrast, below WCAG AA's 4.5:1; the user's choice). A passing shade is #5c7349 (5.25:1). */
.page-process .c-content > :is(#getting-started, #initial-work, #ongoing-work)::before {
  display: block; margin-bottom: 0.15rem; color: #819F68;
  font-family: "concourse_6"; font-feature-settings: 'case' 1, 'lnum' 1; text-transform: uppercase;
  font-weight: normal; font-size: 0.7rem; letter-spacing: 1px; line-height: 1.3;
  font-variant-numeric: lining-nums;   /* capital-height numbers beside the capitals (the site default is old-style) */
}
.page-process .c-content > #getting-started::before { content: "Step 1"; }
.page-process .c-content > #initial-work::before { content: "Step 2"; }
.page-process .c-content > #ongoing-work::before { content: "Step 3"; }
.page-process .c-content > :is(#getting-started, #initial-work, #ongoing-work)::after {
  content: ""; position: absolute; left: -5px;   /* centred on the 1px line */
  top: calc(1.06rem + 0.65rem - 4.5px);
  width: 9px; height: 9px; border-radius: 50%; box-sizing: border-box;
  background: #fff; border: 1px solid #819F68;
}
.page-process .c-content > :is(#initial-work, #ongoing-work)::after { top: calc(2.2rem + 1.06rem + 0.65rem - 4.5px); }

.page-process .c-content > #fees { margin-top: 2.6rem; }
/* (A Process-only 2.6rem above the divider was removed 2026-11-13: it now has the same spacing as Fit) */

/* Wide screens: the line sits in the margin so all the text keeps one left edge */
@media (min-width: 1000px) {
  .page-process .c-content > :where(#getting-started, #getting-started ~ *):not(:where(#fees, #fees ~ *)) {
    margin-left: -2rem !important;
  }
}


/* ==========================================================================
   EVERSIGHT: HOME PAGE (home.hbs, decided 2026-10-11)
   One screen: header, photo, text, footer, with no scrolling on any device. The photo
   takes whatever height is left. On wide screens it is at most the text column's width
   (700px) at its own framing; if the screen is shorter, it trims a little top and bottom.
   The photo file is pre-cropped (heads to waist, the gap between the two people centred).
   The header is the same as on every page, so nothing jumps between pages.
   ========================================================================== */

.home-template main.o-wrapper { display: flex; flex-direction: column; }

.ev-home {
  flex: 1 1 auto; display: flex; flex-direction: column;
  max-width: 700px; margin: 0 auto; padding: 0.25rem 16px 0; box-sizing: content-box;   /* 16px side margin on phones */
}
.ev-home__title {                   /* the page's heading for search engines and screen readers, not shown */
  font-style: normal;               /* hidden, so don't make visitors download the italic font for it */
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.ev-home__media { flex: 1 1 0; position: relative; min-height: 110px; max-height: 520px; }
.ev-home__photo {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 40%;
}
@media (min-width: 61.25em) {
  .ev-home__media { max-height: calc(700px * 925 / 1950); }   /* the photo file's own shape at 700px wide */
}
/* Phones and tablets: a fixed 4:3 photo instead of filling the screen. Newer Safari counts the
   space behind its floating toolbar as part of the screen, so a photo that fills the leftover
   height pushed the text under the toolbar. */
@media (max-width: 61.24em) {
  .ev-home__media { flex: none; aspect-ratio: 4 / 3; min-height: 0; max-height: none; }
  /* ...and the footer follows the text instead of sitting at the very bottom, behind the toolbar */
  .home-template .c-site-container .o-wrapper { flex: none; }
  .home-template .c-footer { margin-top: 1.5rem; }
  /* the same space above and below the menu row */
  .ev-home { padding-top: 0; }
}
/* The photo's height follows the screen: as tall as it can be while the logo, menu, text and footer
   all stay above Safari's floating toolbar (calibrated on a real iPhone 15/16, where Safari reports a
   "safe" height of about 624px yet shows more: 360 leaves a small margin above the toolbar), never
   shorter than 150px and never taller than 4:3. 100svh = the screen height with Safari's bars showing. */
@media (max-width: 61.24em) {
  .ev-home__media { aspect-ratio: auto; height: clamp(150px, calc(100vh - 360px), 75vw); }
}
@supports (height: 100svh) {
  @media (max-width: 61.24em) {
    .ev-home__media { height: clamp(150px, calc(100svh - 360px), 75vw); }
  }
}

.ev-home__text { margin-top: 1.1rem; }
.ev-home__text p { line-height: 1.45; margin: 0; }
.ev-home__text p + p { margin-top: 1em; }

/* A little less space around the footer on the home page, so the photo gets the height */
@media (min-width: 601px) {
  .home-template .c-footer { padding-top: 18px; padding-bottom: 20px; }
}
/* Short phone screens (e.g. iPhone SE in Safari): tighter footer, text one step smaller */
@media (max-width: 600px) and (max-height: 700px) {
  .home-template .c-footer { padding-top: 14px; padding-bottom: 14px; }
  .ev-home__text { margin-top: 0.8rem; }
  .ev-home__text p { font-size: 15px; line-height: 1.42; }
}



/* ==========================================================================
   EVERSIGHT: MENU ON PHONES AND TABLETS (design N4, decided 2026-10-11)
   No menu button: the logo is centred, and the links sit in a row under it on every page, spread across
   the width, with the current page underlined (the theme marks it, from Ghost's
   navigation). Fits on one line down to 320px with four short links; a longer menu
   would need rethinking. Desktop is unchanged.
   ========================================================================== */
@media (max-width: 61.24em) {
  .c-nav-toggle { display: none; }
  .c-header__inner { flex-wrap: wrap; row-gap: 14px; }
  .c-nav-wrap {
    position: static; display: block; width: 100%; height: auto; padding: 0; background: none;
    opacity: 1; visibility: visible; transform: none;
  }
  .c-nav {
    height: auto; padding: 0; border-radius: 0; background: none; overflow: visible;
    flex-direction: row; justify-content: space-between; gap: 0;
  }
  .c-header { padding-top: 12px; padding-bottom: 12px; }   /* Safari's floating address bar already leaves space above the page */
  .c-post-header__title { margin-top: 10px; }                /* page titles closer to the menu */
  /* Text starts as far below the title as the title sits below the menu's underline
     (38px of visible space each, measured ink to ink; was 47px below) */
  .c-post-header + .c-content { margin-top: 23px; }
  .c-logo { margin-left: auto; margin-right: auto; }   /* logo centred above the links */
  .c-nav__link { display: block; padding: 8px 0; font-size: 14px; letter-spacing: 1.3px; }   /* 37px-tall tap targets */
  .c-nav__link--current { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
}


/* ==========================================================================
   EVERSIGHT: KEYBOARD FOCUS (2026-11-12)
   One clear ring on whatever you've reached with the Tab key: logo, menu, links, Ideas buttons,
   Previous/Next, footer. :focus-visible means only keyboard users see it; mouse and touch
   clicks never show it. Black (17:1 contrast), with a small gap so it also shows around the
   black selected button. Replaces Ubud's "no outline on links" and our earlier green rings.
   ========================================================================== */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid #181818 !important;
  outline-offset: 3px !important;
  border-radius: 2px;
}
.ev-domains__tab:focus-visible { border-radius: 999px; }   /* follow the pill's shape */
.c-logo a { display: inline-block; vertical-align: top; }   /* gives the logo link a box the ring can surround (layout unchanged) */

/* "Skip to content": the first thing the Tab key reaches; a small black label above the logo */
.c-skip-to-content:focus {
  z-index: 1000;
  background: #181818;
  color: #fff !important;
  font-family: "concourse_6";
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 4px;
}
.c-skip-to-content:focus-visible { outline-offset: 2px !important; }


/* ==========================================================================
   EVERSIGHT: SPACE ABOVE THE FOOTER (2026-11-13)
   Every page: 42px from the last line of text (or the last image, e.g. the last book cover) to
   the footer text, on every screen. Pages end where their content ends; on short pages and tall
   screens the extra room falls below the footer instead of between the text and the footer.
   (Ubud stretched every page to the window's height, and page.hbs ended with an invisible <hr>
   whose 32px margin added to the gap; both removed.)
   ========================================================================== */
.c-site-container { min-height: 0; }
footer.c-footer { padding-top: 39px; }                    /* + the text's own line spacing = 42px */
.ev-shelf__book:last-child { padding-bottom: 0; }         /* Bookshelf ends at its last cover */

/* Home on wide screens: the footer follows the text like on every other page. The photo keeps its
   own shape (700px wide), shrinking only on short windows so Home still fits on one screen. */
@media (min-width: 61.25em) {
  .home-template .c-site-container .o-wrapper { flex: none; }
  .ev-home { flex: none; }
  .ev-home__media { flex: none; height: clamp(110px, calc(100vh - 445px), calc(700px * 925 / 1950)); }
}
/* Home had its own, tighter footer spacing; now the same as every page */
.home-template footer.c-footer { margin-top: 0; padding-top: 39px; }
/* Ideas ends on Previous/Next and Bookshelf on a cover, not a line of text: 2px more to match */
.page-ideas footer.c-footer, .page-bookshelf footer.c-footer { padding-top: 42px; }
/* Ideas, last theme (Defining enough): it has no Previous/Next, so it ends on a small grey image caption.
   Below caption-size text the usual gap looks too wide, so here the footer comes closer: about
   27px of visible space below the caption (instead of 53px), a touch more than the ~22px between
   the photo and the caption; desktop, tablets and phones. Applies to whichever theme
   is last (the one without a pager). */
.page-ideas:has(.ev-panel:last-child:not([hidden])) footer.c-footer { padding-top: 16px; }
/* The not-found page: no extra space under its message; its link in the site's link style */
.ev-notfound { margin-bottom: 0; padding-bottom: 0; }
/* "404" in the page-title font (it was falling back to Ubud's Inter, which isn't loaded, so it showed in a
   system sans-serif) */
.ev-notfound .c-archive__title { font-family: valkyrie_a; font-style: italic; font-weight: normal; }
.ev-notfound a { color: inherit; text-decoration: none; border-bottom: 1px dotted #7d867c; }
.ev-notfound a:hover { color: #000; border-bottom: 1px solid #999892; }