/* Arthur & Bonnie Joyce — site styles
   One shared frame; each section sets --c (main), --c-rgb, --c2 (accent), --display (headline face). */

@font-face{font-family:Barlow;src:url(fonts/barlow-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Barlow;src:url(fonts/barlow-latin-400-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:Barlow;src:url(fonts/barlow-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:Barlow;src:url(fonts/barlow-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url(fonts/barlow-condensed-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url(fonts/barlow-condensed-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url(fonts/barlow-condensed-latin-800-normal.woff2) format("woff2");font-weight:800;font-display:swap}
@font-face{font-family:"Source Serif 4";src:url(fonts/source-serif-4-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Source Serif 4";src:url(fonts/source-serif-4-latin-400-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Source Serif 4";src:url(fonts/source-serif-4-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"EB Garamond";src:url(fonts/eb-garamond-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"EB Garamond";src:url(fonts/eb-garamond-latin-500-italic.woff2) format("woff2");font-weight:500;font-style:italic;font-display:swap}
@font-face{font-family:"EB Garamond";src:url(fonts/eb-garamond-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"DM Serif Display";src:url(fonts/dm-serif-display-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Cormorant Garamond";src:url(fonts/cormorant-garamond-latin-500-italic.woff2) format("woff2");font-weight:500;font-style:italic;font-display:swap}
@font-face{font-family:Fraunces;src:url(fonts/fraunces-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}

:root{
  /* Warm paper-and-ink neutrals */
  --ink:#24211D; --ink-2:#4A443D; --muted:#655C53; --line:#E5DED3; --line-strong:#CFC3B4; --paper:#F4F1EA; --white:#FFFDF9; --night:#1E2630;
  /* Spacing scale (4px base) */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:96px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --sans:Barlow,"Helvetica Neue",Arial,sans-serif; --cond:"Barlow Condensed","Arial Narrow",sans-serif;
  --serif:"Source Serif 4",Georgia,serif;
  /* section defaults (Journal) */
  --c:#A64B2A; --c-rgb:122,52,25; --c-dark:#7E3519; --c2:#F6DDD0; --on-c:#fff; --display:var(--serif); --display-weight:600; --display-style:normal;
}
.s-journal{--c:#A64B2A;--c-rgb:122,52,25;--c-dark:#7E3519;--c2:#F6DDD0;--on-c:#fff;--display:var(--serif);--display-weight:600;--display-style:normal}
.s-travels{--c:#14324F;--c-rgb:20,50,79;--c-dark:#0B1F33;--c2:#F2B705;--on-c:#fff;--display:var(--cond);--display-weight:800}
.s-sermons{--c:#6E1F24;--c-rgb:110,31,36;--c-dark:#4A1418;--c2:#D8B77A;--on-c:#F5EBDD;--display:"EB Garamond",Georgia,serif;--display-weight:500}
.s-music{--c:#1F4D3A;--c-rgb:31,77,58;--c-dark:#123326;--c2:#E9D49A;--on-c:#F2E9D0;--display:"DM Serif Display",Georgia,serif;--display-weight:400}
.s-selah{--c:#3F3D6B;--c-rgb:63,61,107;--c-dark:#2B2A4D;--c2:#F3C6A5;--on-c:#FBE3D1;--display:"Cormorant Garamond",Georgia,serif;--display-weight:500;--display-style:italic}
.s-photos{--c:#2E6B67;--c-rgb:46,107,103;--c-dark:#1E4A47;--c2:#D9A43A;--on-c:#fff;--display:Fraunces,Georgia,serif;--display-weight:600}
.s-about{--c:#5B4A3A;--c-rgb:70,56,43;--c-dark:#3E3227;--c2:#E8D8C2;--on-c:#fff}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
::selection{background:var(--c2);color:var(--ink)}
h1,h2,h3{text-wrap:balance}
img{max-width:100%;height:auto}
a{color:var(--c-dark);text-underline-offset:.18em;text-decoration-thickness:1px}
a:hover{color:var(--c)}
/* Focus: a dark ring on light surfaces, the light accent on dark ones */
:focus-visible{outline:3px solid var(--c-dark);outline-offset:3px}
.th-sec :focus-visible,.hero :focus-visible,.home-feature :focus-visible,.band :focus-visible,.site-footer :focus-visible,.selah-card :focus-visible,.player :focus-visible,.th-frame :focus-visible,.th-postcard :focus-visible,.lb :focus-visible{outline-color:var(--c2,#F6DDD0)}
.site-footer :focus-visible,.player :focus-visible,.lb :focus-visible{outline-color:#fff}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px}
.skip{position:absolute;left:-999px}.skip:focus{left:8px;top:8px;background:#fff;padding:8px 12px;z-index:99}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- header ---------- */
.site-header{background:var(--white);border-bottom:1px solid var(--line)}
.site-header .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s1) var(--s6);padding-top:var(--s3);padding-bottom:var(--s3)}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.shield{display:flex;align-items:center;justify-content:center;width:44px;height:48px;background:var(--c);color:var(--on-c);font-family:var(--cond);font-weight:800;font-size:18px;clip-path:polygon(0 0,100% 0,100% 72%,50% 100%,0 72%);padding-bottom:6px}
.s-travels .shield{color:var(--c2)}
.brand-name{font-family:var(--cond);font-weight:700;font-size:21px;text-transform:uppercase;color:var(--ink);letter-spacing:.02em}
.nav{display:flex;flex-wrap:wrap;gap:0 var(--s5)}
.nav a{color:var(--ink-2);text-decoration:none;font-weight:500;font-size:16px;padding:var(--s3) 0;transition:color .15s var(--ease)}
.nav a:hover{color:var(--c)}
.nav a[aria-current]{color:var(--c-dark);font-weight:600;box-shadow:inset 0 -3px 0 var(--c)}
.s-travels .nav a[aria-current]{box-shadow:inset 0 -4px 0 var(--c2)}

/* ---------- hero (photo + section-color scrim on the left) ---------- */
.hero{position:relative;overflow:hidden;background:var(--c);color:var(--on-c)}
.hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(var(--c-rgb),.95) 0%,rgba(var(--c-rgb),.86) 38%,rgba(var(--c-rgb),.25) 66%,rgba(var(--c-rgb),0) 82%)}
.hero .wrap{position:relative;z-index:1;padding-top:96px;padding-bottom:64px;display:flex;flex-direction:column;gap:14px}
.hero .wrap>*{max-width:620px;margin:0}
.hero.short .wrap{padding-top:64px;padding-bottom:44px}
.s-travels .hero{box-shadow:inset 0 -8px 0 var(--c2)}
.kicker{font-family:var(--cond);font-weight:700;font-size:15px;letter-spacing:.14em;text-transform:uppercase;color:var(--c2)}
.hero h1,.display{font-family:var(--display);font-weight:var(--display-weight);font-style:var(--display-style);line-height:1}
.hero h1{font-size:clamp(38px,5.4vw,64px)}
.s-travels .hero h1,.s-travels .display{text-transform:uppercase;line-height:.92}
.hero p{font-size:18px;line-height:1.45}
.hero .rule{width:140px;height:1px;background:var(--c2)}
.staff{display:flex;flex-direction:column;gap:9px;max-width:520px}.staff span{height:1px;background:rgba(201,162,74,.6)}
.hero .meta{font-size:16px;opacity:.9}
.hero.post h1{font-size:clamp(34px,4.7vw,57px);line-height:1.04}
@media (max-width:700px){.hero::after{background:linear-gradient(0deg,rgba(var(--c-rgb),.95) 0%,rgba(var(--c-rgb),.8) 55%,rgba(var(--c-rgb),.2) 100%)}.hero .wrap{padding-top:140px}}

.btn{display:inline-block;background:#fff;color:var(--c-dark);text-decoration:none;padding:12px 22px;border:0;font:inherit;font-size:16px;font-weight:600;line-height:1.4;cursor:pointer;transition:background-color .15s var(--ease),color .15s var(--ease)}
.btn:hover{background:var(--c2);color:var(--c-dark)}
.btn.solid{background:var(--c);color:var(--on-c)}
.btn.solid:hover{background:var(--c-dark);color:#fff}
.btn.ghost{background:transparent;border:1px solid currentColor;color:inherit}
.pill{display:inline-block;background:var(--white);color:var(--c-dark);font-family:var(--cond);font-weight:700;font-size:14px;letter-spacing:.1em;text-transform:uppercase;padding:5px 10px}

/* ---------- layout ---------- */
main{display:block}
.page{padding-top:var(--s7);padding-bottom:var(--s9);display:flex;flex-direction:column;gap:var(--s8)}
@media (max-width:700px){.page{padding-top:var(--s6);padding-bottom:var(--s8);gap:var(--s7)}}
.cols{display:flex;flex-wrap:wrap;gap:var(--s7) var(--s8);align-items:flex-start}
.cols>.main-col{flex:999 1 560px;min-width:0}
.cols>.side-col{flex:1 1 300px;min-width:0;display:flex;flex-direction:column;gap:var(--s5)}
.sec-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:var(--s2) var(--s3);border-bottom:1px solid var(--line);padding-bottom:var(--s3);margin-bottom:var(--s5)}
.sec-head h2{margin:0;font-family:var(--display);font-weight:var(--display-weight);font-style:var(--display-style);font-size:clamp(24px,2.9vw,30px);line-height:1.1;letter-spacing:-.005em}
.s-travels .sec-head h2{text-transform:uppercase}
.sec-head a{font-weight:600;font-size:16px}
h2,h3{line-height:1.2}

/* ---------- journal list ---------- */
.chips{display:flex;flex-wrap:wrap;gap:var(--s2);margin-bottom:var(--s3)}
.chips a{border:1px solid var(--line-strong);background:transparent;color:var(--ink-2);text-decoration:none;font-weight:500;font-size:15px;padding:9px 15px;transition:border-color .15s var(--ease),color .15s var(--ease),background-color .15s var(--ease)}
.chips a:hover{border-color:var(--c);color:var(--c-dark)}
.chips a[aria-current]{background:var(--c);border-color:var(--c);color:var(--on-c);font-weight:600}
.entry:last-child{border-bottom:0}
.entry h3{margin:0;font-family:var(--serif);font-weight:600;font-size:24px;line-height:1.15}
.entry h3 a{color:var(--ink);text-decoration:none}
.entry h3 a:hover{color:var(--c)}
.entry p{margin:0;font-family:var(--serif);font-size:16px;line-height:1.55;color:var(--ink-2)}
.pager{display:flex;justify-content:space-between;gap:12px;margin-top:24px}
.pager a{font-weight:600}

/* ---------- side cards ---------- */
.card{background:var(--white);border:1px solid var(--line);padding:var(--s5);display:flex;flex-direction:column;gap:var(--s3)}
.card h2{margin:0;font-family:var(--serif);font-weight:600;font-size:21px}
.card.photo{padding:0}.card.photo>img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block}.card.photo>div{padding:20px 22px 24px;display:flex;flex-direction:column;gap:8px}
.selah-card{background:#3F3D6B;color:#FBE3D1;padding:26px 24px;display:flex;flex-direction:column;gap:10px}
.selah-card .kicker{color:#F3C6A5}
.band .kicker{color:var(--c2)}
.selah-card blockquote{margin:0;font-family:"Cormorant Garamond",Georgia,serif;font-style:italic;font-weight:500;font-size:23px;line-height:1.3;color:#fff}
.selah-card .who{font-size:16px;color:#E3D4E0}
.selah-card a{color:#F3C6A5}
.form label{font-size:15px;color:var(--ink-2)}
.form input,.form textarea{font:inherit;font-size:16px;padding:12px 14px;border:1px solid var(--line-strong);background:#fff;width:100%;transition:border-color .15s var(--ease)}
.form input:hover,.form textarea:hover{border-color:var(--muted)}
.form label{font-weight:500}
.form-note{font-size:15px;color:var(--muted)}
/* Contact form: the "message sent" confirmation has to be impossible to miss */
#sent:not([hidden]){display:flex;align-items:center;gap:var(--s3);margin:0 0 var(--s5);padding:var(--s4) var(--s5);background:#E4F1E8;border:1px solid #1F4D3A;border-left-width:6px;color:#1F4D3A;font-size:20px;font-weight:600;line-height:1.35}
#sent:not([hidden])::before{content:"✓";flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#1F4D3A;color:#fff;font-size:18px;line-height:1}

/* ---------- article ---------- */
.article{max-width:760px;margin:0 auto;font-family:var(--serif);font-size:18px;line-height:1.7}
.article>p:first-child{font-size:20px;line-height:1.55}
.article h2,.article h3{font-family:var(--serif);font-weight:600}
.article blockquote{margin:1.2em 0;padding-left:20px;border-left:3px solid var(--c2);font-style:italic}
.article figure{margin:28px 0}
.article figure img{display:block;width:100%;cursor:zoom-in}
.article figcaption{font-family:var(--sans);font-size:15px;color:var(--muted);padding-top:8px}
.article figure.align-left{float:left;width:45%;margin:6px 28px 16px 0}
.article figure.align-right{float:right;width:45%;margin:6px 0 16px 28px}
.article figure.align-center{width:75%;margin-left:auto;margin-right:auto}
.article .gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin:28px 0;clear:both}
.article .gallery figure{margin:0}
.article .gallery img{aspect-ratio:4/3;object-fit:cover}
.article::after{content:"";display:block;clear:both}
.video{position:relative;aspect-ratio:16/9;margin:28px 0;background:#000;clear:both}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
@media (max-width:700px){.article figure.align-left,.article figure.align-right{float:none;width:100%;margin:24px 0}}
.post-foot{max-width:760px;width:100%;margin:0 auto;display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s4);border-top:1px solid var(--line);padding-top:var(--s5)}
.post-foot a{font-weight:600}
.post-foot .lbl{display:block;font-size:14px;color:var(--muted);font-weight:500}
.tags{display:flex;flex-wrap:wrap;gap:var(--s2);max-width:760px;width:100%;margin:0 auto}
.tags a{font-size:14px;font-weight:500;color:var(--ink-2);border:1px solid var(--line-strong);padding:6px 12px;text-decoration:none}
.tags a:hover{border-color:var(--c);color:var(--c-dark)}

/* ---------- tiles ---------- */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--s4)}
.tile{position:relative;display:block;overflow:hidden;text-decoration:none;height:190px;background:var(--c)}
.tile img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s}
.tile:hover img{transform:scale(1.04)}
.tile::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(var(--c-rgb),.94) 0%,rgba(var(--c-rgb),.4) 50%,rgba(var(--c-rgb),0) 75%)}
.tile .lab{position:absolute;left:18px;right:18px;bottom:16px;z-index:1;display:flex;flex-direction:column;color:var(--on-c)}
.tile .lab b{font-family:var(--display);font-weight:var(--display-weight);font-style:var(--display-style);font-size:30px;line-height:1}
.tile.s-travels .lab b{text-transform:uppercase}
.tile .lab span{font-size:14px}
.tile.s-travels{box-shadow:inset 0 -6px 0 #F2B705}

.photo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--s3)}
.photo-grid a,.photo-grid figure{position:relative;display:block;margin:0;text-decoration:none}
.photo-grid img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block;cursor:zoom-in}
.photo-grid .cap{position:absolute;left:0;bottom:0;background:rgba(27,36,48,.85);color:#fff;font-weight:600;font-size:15px;padding:8px 12px}
.photo-grid figcaption{font-size:15px;color:var(--muted);padding:6px 2px 0}

/* ---------- lists with play buttons ---------- */
.rows{display:flex;flex-direction:column;background:var(--white);border:1px solid var(--line)}
.row{display:flex;align-items:center;gap:var(--s4);padding:var(--s3) var(--s4);border-bottom:1px solid var(--line);transition:background-color .15s var(--ease)}
.row:hover{background:rgba(var(--c-rgb),.035)}
.row:last-child{border-bottom:0}
.row .t{flex:1;min-width:0;font-weight:600}
.row .t small{display:block;font-weight:400;color:var(--muted);font-size:15px}
.row .d{color:var(--muted);font-size:16px;white-space:nowrap}
.row.playing{background:rgba(var(--c-rgb),.07)}
.play{width:46px;height:46px;border-radius:50%;border:1.5px solid var(--c);background:transparent;color:var(--c);display:flex;align-items:center;justify-content:center;flex-shrink:0;cursor:pointer;transition:background-color .15s var(--ease),color .15s var(--ease)}
.play:hover,.row.playing .play{background:var(--c);color:var(--on-c)}
.play svg{width:15px;height:15px}
.play .i-pause{display:none}.row.playing.is-on .i-play{display:none}.row.playing.is-on .i-pause{display:block}
.year-h{font-family:var(--display);font-weight:var(--display-weight);font-size:24px;color:var(--c-dark);margin:var(--s7) 0 var(--s3);padding-bottom:0;border-bottom:0}
.year-h:first-child{margin-top:0}
.feature{background:var(--white);border:1px solid var(--line);border-top:3px solid var(--c);padding:var(--s6);display:flex;flex-direction:column;gap:var(--s3)}
.feature-title{margin:0;font-size:clamp(25px,5.2vw,32px);line-height:1.1}
.group-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--s3)}
.group-cards a{background:var(--white);border:1px solid var(--line);border-top:3px solid var(--c);padding:var(--s4) var(--s5) var(--s5);text-decoration:none;color:var(--ink);display:flex;flex-direction:column;gap:var(--s1);transition:border-color .15s var(--ease),background-color .15s var(--ease)}
.group-cards a:hover{background:#fff;border-color:var(--line-strong);border-top-color:var(--c-dark)}
.group-cards a:hover b{color:var(--c-dark)}
.group-cards a b{font-family:var(--display);font-weight:var(--display-weight);font-size:21px;line-height:1.15}
.group-cards a span{font-size:15px;color:var(--muted)}
.band{background:var(--c);color:var(--on-c);padding:36px 32px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px}
.band h2{margin:0;font-family:var(--display);font-weight:var(--display-weight);font-size:34px;line-height:1}
.band p{margin:6px 0 0}

/* now-playing bar */
.player{position:fixed;left:0;right:0;bottom:0;z-index:50;background:var(--night);color:#fff;transform:translateY(110%);transition:transform .25s}
.player.on{transform:none}
.player .wrap{display:flex;align-items:center;gap:16px;padding-top:12px;padding-bottom:12px;flex-wrap:wrap}
.player .np{flex:1 1 220px;min-width:0}
.player .np b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.player .np span{display:block;font-size:14px;line-height:1.4;color:#C9D1D8}
.player audio{flex:2 1 320px;min-width:0;height:44px}
.player button{font:inherit;font-size:15px;font-weight:600;background:transparent;color:#fff;border:1px solid #5B6772;padding:10px 14px;cursor:pointer}
.player label{font-size:14px;color:#C9D1D8;display:flex;gap:6px;align-items:center}

/* trips & map */
#map{height:440px;background:#E6ECF0;border:1px solid var(--line)}
.trip-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--s5)}
.trip{background:var(--white);border:1px solid var(--line);text-decoration:none;color:var(--ink);display:flex;flex-direction:column;transition:border-color .15s var(--ease)}
.trip:hover{border-color:var(--line-strong)}
.trip:hover b{color:var(--c-dark)}
.trip img{width:100%;height:220px;object-fit:cover;display:block}
.trip div{padding:20px 22px 24px;display:flex;flex-direction:column;gap:8px}
.trip b{font-family:var(--cond);font-weight:800;font-size:27px;text-transform:uppercase;line-height:1}
.trip .yr{align-self:flex-start;background:#F2B705;color:#14324F;font-family:var(--cond);font-weight:700;font-size:14px;letter-spacing:.06em;padding:4px 10px}
.trip span{font-size:16px;color:var(--ink-2)}

/* selah archive */
.selah-list{display:flex;flex-direction:column;gap:2px}
.selah-item{background:var(--white);padding:var(--s5) var(--s6);display:flex;flex-direction:column;gap:var(--s2)}
.selah-item .q{font-family:"Cormorant Garamond",Georgia,serif;font-style:italic;font-weight:500;font-size:21px;line-height:1.35}
.selah-item .who{color:var(--muted);font-size:16px}
.selah-big blockquote{margin:0;font-family:"Cormorant Garamond",Georgia,serif;font-style:italic;font-weight:500;font-size:clamp(25px,3.4vw,37px);line-height:1.25}

/* singalong */
.video-stage{background:#000;aspect-ratio:16/9;position:relative}
.video-stage video{position:absolute;inset:0;width:100%;height:100%}
.song-list{columns:3 260px;column-gap:24px;margin:0;padding:0;list-style:none}
.song-list li{break-inside:avoid}
.song-list button{font:inherit;background:none;border:0;padding:8px 0;text-align:left;color:var(--c-dark);cursor:pointer;font-weight:600}
.song-list button:hover,.song-list button[aria-current]{color:var(--c);text-decoration:underline}

/* lightbox */
.lb{position:fixed;inset:0;z-index:100;background:rgba(10,12,16,.92);display:none;align-items:center;justify-content:center;flex-direction:column;gap:12px;padding:24px}
.lb.on{display:flex}
.lb img{max-width:100%;max-height:82vh;object-fit:contain}
.lb p{color:#eee;margin:0;max-width:800px;text-align:center}
.lb button{position:absolute;top:16px;right:16px;font:inherit;font-size:16px;background:#fff;border:0;padding:10px 16px;cursor:pointer}
.lb .prev,.lb .next{top:50%;transform:translateY(-50%)}
.lb .prev{left:16px;right:auto}

/* footer */
.site-footer{background:var(--night);color:#C3CAD1;padding:var(--s7) 0 var(--s8);font-size:15px}
.site-footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:var(--s5) var(--s7)}
.site-footer a{color:#fff;text-decoration:none}
.site-footer a:hover{text-decoration:underline}
.foot-name{display:flex;flex-direction:column;gap:var(--s1)}
.foot-name b{font-family:var(--cond);font-weight:700;font-size:20px;letter-spacing:.02em;text-transform:uppercase;color:#fff}
.foot-links{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5)}
.foot-links a{font-weight:500;padding:4px 0}
.beta-ribbon{background:#FBF0CC;color:#5C4600;text-align:center;font-size:14px;font-weight:500;padding:6px 12px;border-bottom:1px solid #EFDC9E}
.prose{max-width:760px;font-family:var(--serif);font-size:18px;line-height:1.7}
.prose figure{margin:24px 0}.prose figcaption{font-family:var(--sans);font-size:15px;color:var(--muted)}
.empty{color:var(--muted);font-style:italic}
.player:not(.on){visibility:hidden}

/* =====================================================================
   THEMED HEADERS — photo always unobstructed, framed by topic/section
   ===================================================================== */
@font-face{font-family:Caveat;src:url(fonts/caveat-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
.th{position:relative;overflow:hidden}
.th .wrap{position:relative;display:flex;flex-direction:column;align-items:center;gap:30px;padding-top:52px;padding-bottom:60px}
.th-title{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;max-width:860px}
.th-title .kicker{font-family:var(--cond);font-weight:700;font-size:15px;letter-spacing:.18em;text-transform:uppercase}
.th-title h1,.th-title .h1{margin:0;line-height:1.05}
.th-title .meta{font-size:16px}
.th-title .btn{margin-top:6px}
.th-title a.kicker{text-decoration:none}
.th img{display:block}
@media (max-width:760px){.th .wrap{padding-top:32px;padding-bottom:36px;gap:22px}.th-title .meta{font-size:14px}}

/* Family History — album page */
.th-album{background:#E9DCC0 url(paper.jpg);border-bottom:10px solid #A64B2A}
.th-album::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 42%,rgba(255,250,236,.5),rgba(255,250,236,0) 60%),radial-gradient(ellipse at 50% 50%,rgba(0,0,0,0) 55%,rgba(120,80,35,.3) 100%),linear-gradient(90deg,rgba(90,60,30,.22),rgba(90,60,30,0) 60px)}
.th-album .kicker{color:#7A4424}.th-album h1,.th-album .h1{font-family:var(--serif);font-weight:600;font-size:clamp(30px,4.3vw,54px);color:#2C1D12}.th-album .meta{color:#5A4330}
.album-stage{position:relative;display:flex;flex-direction:column;align-items:center;max-width:100%}
.print{position:relative;margin:0;transform:rotate(-1.6deg);max-width:100%}
.print>div{background:#F7F2E6;padding:11px;box-shadow:0 1px 2px rgba(60,40,20,.35),0 6px 14px rgba(60,40,20,.18)}
.print img{width:min(690px,82vw);max-height:520px;object-fit:cover;filter:sepia(.06)}
.print .corner{position:absolute;width:74px;height:74px;filter:drop-shadow(1px 2px 1.5px rgba(30,20,10,.45))}
.print .c1{left:-10px;top:-10px}.print .c2{right:-10px;top:-10px;transform:rotate(90deg)}.print .c3{right:-10px;bottom:-10px;transform:rotate(180deg)}.print .c4{left:-10px;bottom:-10px;transform:rotate(270deg)}
.ink{margin:18px 0 0;align-self:flex-end;font-family:Caveat,cursive;font-weight:600;font-size:34px;line-height:1;color:#2F3B5E;transform:rotate(-3.5deg);padding-right:10px}
@media (max-width:760px){.print .corner{width:44px;height:44px}.print .c1{left:-7px;top:-7px}.print .c2{right:-7px;top:-7px}.print .c3{right:-7px;bottom:-7px}.print .c4{left:-7px;bottom:-7px}.print>div{padding:7px}.ink{font-size:24px}}

/* Reflections & simple pages — framed print on a slate wall */
.th-frame{background:#2E3A46}
.th-frame .kicker{color:#EEC45E}.th-frame h1,.th-frame .h1{font-family:"Cormorant Garamond",Georgia,serif;font-style:italic;font-weight:500;font-size:clamp(39px,5.6vw,67px);line-height:1;color:#F4EFE4}
.th-frame .rule{width:60px;height:1px;background:#EEC45E}.th-frame .meta{color:#C5CCD3}
.framed{margin:0;padding:10px;background:linear-gradient(135deg,#F4DE9C,#C99A42 42%,#F0D283 68%,#B98A3C);box-shadow:0 18px 40px rgba(0,0,0,.45);max-width:100%}
.framed>div{background:#F4F0E6;padding:44px;box-shadow:inset 0 0 0 1px #D9D1BF}
.framed img{width:min(600px,70vw);max-height:480px;object-fit:cover;box-shadow:0 0 0 1px #BFB49A}
@media (max-width:760px){.framed{padding:6px}.framed>div{padding:20px}}

/* Travels — airmail postcard (front + back with map) */
.th-postcard{background:#14324F radial-gradient(rgba(255,255,255,.07) 1px,transparent 1.4px) 0 0/18px 18px;box-shadow:inset 0 -8px 0 #F2B705}
.th-postcard .kicker{color:#F2B705}.th-postcard h1,.th-postcard .h1{font-family:var(--cond);font-weight:800;font-size:clamp(34px,5.2vw,64px);line-height:.95;text-transform:uppercase;color:#fff}.th-postcard .meta{color:#C9D6E0}
.th-postcard .th-title{order:2}
.cards{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:36px}
.pc-front{margin:0;padding:12px;background:repeating-linear-gradient(135deg,#C0392B 0 14px,#FBF6EA 14px 26px,#1F4E8C 26px 40px,#FBF6EA 40px 52px);transform:rotate(-2deg);box-shadow:0 14px 30px rgba(0,0,0,.4);max-width:100%}
.pc-front>div{background:#FBF6EA;padding:12px}
.pc-front img{width:min(520px,76vw);aspect-ratio:4/3;object-fit:cover}
.pc-back{width:min(470px,86vw);min-height:300px;background:#FBF6EA;transform:rotate(1.5deg);box-shadow:0 14px 30px rgba(0,0,0,.4);padding:18px;display:flex;gap:16px;color:#14324F}
.pc-map{flex:1;min-height:260px;border:1px solid #CFCBB8;background:#E9EBDD}
.pc-side{width:150px;display:flex;flex-direction:column;gap:12px;border-left:1px solid #CFC6B0;padding-left:14px}
.stamp{align-self:flex-end;width:66px;height:80px;background:#F2B705;border:3px solid #F2B705;outline:3px dotted #FBF6EA;outline-offset:-3px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:var(--cond);font-weight:800;font-size:20px;line-height:1}
.stamp small{font-size:12px;font-weight:700}
.postmark{align-self:flex-end;width:88px;height:88px;border:2px solid rgba(20,50,79,.55);border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:var(--cond);font-weight:700;font-size:12px;line-height:1.1;text-align:center;color:rgba(20,50,79,.8);transform:rotate(-12deg)}
.postmark b{font-size:15px}
.pc-place{font-family:Caveat,cursive;font-size:20px;line-height:1.2;border-bottom:1px solid #CFC6B0;padding-bottom:4px}
.pc-side a{font-size:14px;color:#14324F}
@media (max-width:760px){.pc-back{min-height:0;flex-direction:column}.pc-map{min-height:160px}.pc-side{width:auto;border-left:0;padding-left:0;flex-direction:row;flex-wrap:wrap;align-items:center}.stamp,.postmark{display:none}}

/* Stories — instant photo on a corkboard */
.th-cork{background:linear-gradient(180deg,#9A6A3E,#6E4523 50%,#5A381C);padding:16px}
.th-cork .board{position:relative;overflow:hidden;background:#BE8C58 url(cork.jpg);box-shadow:inset 0 6px 14px rgba(40,20,5,.55),inset 0 -2px 6px rgba(40,20,5,.3)}
.th-cork .board::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 45% 35%,rgba(255,235,200,.25),rgba(0,0,0,0) 55%),radial-gradient(ellipse at 50% 50%,rgba(0,0,0,0) 60%,rgba(50,25,8,.35) 100%)}
.polaroid{position:relative;margin:0;transform:rotate(2deg)}
.polaroid>div{position:relative;background:linear-gradient(170deg,#FFFFFC,#F3F1EA);padding:18px 18px 70px;box-shadow:0 1px 1px rgba(0,0,0,.15),0 8px 14px rgba(40,18,4,.35),0 22px 30px -12px rgba(40,18,4,.45)}
.polaroid img{width:min(440px,70vw);aspect-ratio:1/1;object-fit:cover}
.polaroid figcaption{position:absolute;left:18px;right:18px;bottom:16px;font-family:Caveat,cursive;font-size:25px;color:#2B3A67;text-align:center}
.polaroid .pin{position:absolute;left:50%;top:-22px;margin-left:-30px;width:60px;height:60px;z-index:2}
.index-card{position:relative;transform:rotate(-.8deg)}
.index-card::before{content:"";position:absolute;left:50%;top:-14px;margin-left:-60px;width:120px;height:30px;background:rgba(250,245,225,.7);box-shadow:0 1px 2px rgba(0,0,0,.12);transform:rotate(-3deg);z-index:2}
.index-card .th-title{background:#FDFCF8 repeating-linear-gradient(180deg,transparent 0 31px,rgba(64,110,170,.2) 31px 32px);border-top:3px solid rgba(200,60,60,.4);padding:26px 40px;box-shadow:0 2px 3px rgba(40,18,4,.25),0 12px 22px rgba(40,18,4,.35)}
.th-cork .kicker{color:#A64B2A}.th-cork h1,.th-cork .h1{font-family:var(--serif);font-weight:600;font-size:clamp(27px,4vw,49px);color:#2A1A0E}.th-cork .meta{color:#5A4330}
@media (max-width:760px){.th-cork{padding:8px}.polaroid>div{padding:12px 12px 50px}.polaroid figcaption{font-size:20px;bottom:10px}.polaroid .pin{width:44px;height:44px;margin-left:-22px;top:-16px}.index-card .th-title{padding:16px 18px}}

/* Section headers: text beside the art on desktop, stacked on phones */
.th-sec .wrap{flex-direction:row;justify-content:space-between;gap:48px}
.th-sec .th-title{align-items:flex-start;text-align:left;max-width:600px}
.th-sec .th-title p{margin:0;font-size:18px;line-height:1.45}
.th-sec .art{flex-shrink:0}
@media (max-width:860px){.th-sec .wrap{flex-direction:column;justify-content:flex-start;min-height:0}.th-sec .th-title{align-items:center;text-align:center}.th-sec .th-title p{font-size:16px}}
.th-sec h1{font-family:var(--display);font-weight:var(--display-weight);font-style:var(--display-style);font-size:clamp(42px,6vw,68px);line-height:.95;margin:0}
.th-sec{background:var(--c);color:var(--on-c)}
.th-sec .kicker{color:var(--c2)}
.s-travels .th-sec{box-shadow:inset 0 -8px 0 #F2B705}
.s-travels .th-sec h1{text-transform:uppercase}
.s-photos .th-sec{box-shadow:inset 0 -12px 0 #D9A43A}
.arch{padding:10px;border:2px solid #D8B77A;border-radius:200px 200px 6px 6px}
.arch img{width:330px;height:390px;max-width:68vw;max-height:80vw;object-fit:cover;border-radius:190px 190px 2px 2px}
.record{position:relative;width:520px;height:380px;max-width:86vw}
.record .disc{position:absolute;right:0;top:14px;width:352px;height:352px;border-radius:50%;background:radial-gradient(circle,#C9A24A 0 46px,#111 47px 52px,#1a1a1a 53px),repeating-radial-gradient(circle,#151515 0 2px,#222 2px 4px);box-shadow:0 10px 24px rgba(0,0,0,.4)}
.record .sleeve{position:absolute;left:0;top:0;width:380px;height:380px;background:#F2E9D0;padding:16px;box-shadow:0 14px 28px rgba(0,0,0,.45)}
.record .sleeve img{width:348px;height:300px;object-fit:cover}
.record .sleeve span{display:block;padding-top:8px;font-family:"DM Serif Display",Georgia,serif;font-size:16px;color:#1F4D3A;text-align:center}
@media (max-width:760px){.record{width:300px;height:250px}.record .disc{width:228px;height:228px;top:10px}.record .sleeve{width:250px;height:250px;padding:10px}.record .sleeve img{width:230px;height:230px}.record .sleeve span{display:none}}
.snaps{position:relative;width:600px;height:380px;max-width:90vw}
.snaps img{position:absolute;object-fit:cover;border:12px solid #fff;border-bottom-width:36px;box-shadow:0 12px 24px rgba(0,0,0,.35)}
.snaps .s1{left:0;top:40px;width:230px;height:260px;transform:rotate(-7deg)}
.snaps .s2{right:10px;top:30px;width:230px;height:260px;transform:rotate(7deg)}
.snaps .s3{left:calc(50% - 140px);top:0;width:280px;height:300px;transform:rotate(-1deg)}
@media (max-width:760px){.snaps{width:320px;height:240px}.snaps img{border-width:8px;border-bottom-width:22px}.snaps .s1{width:140px;height:160px;top:30px}.snaps .s2{width:140px;height:160px;top:24px;right:0}.snaps .s3{width:170px;height:190px;left:75px}}
.cameo{padding:8px;border:2px solid #F3C6A5;border-radius:50%}.cameo>div{padding:6px;border:1px solid rgba(243,198,165,.5);border-radius:50%}
.cameo img{width:300px;height:370px;max-width:56vw;max-height:69vw;object-fit:cover;border-radius:50%}
.th-sec blockquote{margin:0;font-family:"Cormorant Garamond",Georgia,serif;font-style:italic;font-weight:500;font-size:clamp(20px,2.2vw,25px);line-height:1.3}

/* End-of-story map */
.story-map{max-width:900px;margin:0 auto;width:100%;display:flex;flex-direction:column;gap:var(--s3);border-top:1px solid var(--line);padding-top:var(--s6)}
.story-map .head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:8px}
.story-map h2{margin:0;font-family:var(--cond);font-weight:700;font-size:21px;letter-spacing:.06em;text-transform:uppercase;color:var(--c-dark)}
.story-map .place{font-size:16px;color:var(--ink-2)}
.story-map #map{height:360px}
.nearby{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.nearby a{background:var(--white);border:1px solid var(--line);padding:var(--s3) var(--s4);text-decoration:none;color:var(--ink);display:flex;flex-direction:column;gap:var(--s1);transition:border-color .15s var(--ease)}
.nearby a:hover{border-color:var(--line-strong)}
.nearby a span{font-size:14px;font-weight:500;color:var(--muted)}
.nearby a b{font-family:var(--serif);font-weight:600;font-size:16px;line-height:1.2}
.nearby a:hover b{color:var(--c-dark);text-decoration:underline}

/* Tiles: photo above, label below (no overlay) */
.tile{height:auto;display:flex;flex-direction:column;background:var(--c)}
.tile::after{display:none}
.tile img{height:170px}
.tile .lab{position:static;padding:14px 18px 16px}
.th-title .ex{margin:0;max-width:620px;font-family:var(--serif);font-size:17px;line-height:1.5}
.th-album .ex,.th-cork .ex{color:#3B2A1A}.th-frame .ex{color:#D8DDE2}.th-postcard .ex{color:#DCE5EC}

/* =====================================================================
   JOURNAL LISTS — each entry gets a small themed swatch
   ===================================================================== */
.page-title{margin:0;font-family:var(--serif);font-weight:600;font-size:clamp(30px,3.4vw,40px);line-height:1.1}
.sec-head>span{color:var(--muted);font-size:15px}
.entry{display:flex;flex-wrap:wrap;gap:var(--s5);padding:var(--s5) 0;border-bottom:1px solid var(--line);align-items:flex-start}
.entry .sw{flex:0 0 250px;height:196px;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;text-decoration:none}
.entry .txt{flex:999 1 300px;min-width:0;display:flex;flex-direction:column;gap:6px}
.entry .meta{font-size:14px;font-weight:500;color:var(--muted)}
.entry .tp{font-family:var(--cond);font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:14px}
.e-album .tp{color:#7A4424}.e-frame .tp{color:#4A5868}.e-postcard .tp{color:#14324F}.e-cork .tp{color:#A64B2A}
.entry .sw img{display:block}
/* album swatch */
.e-album .sw{background:#E9DCC0 url(paper.jpg);flex-direction:column;gap:2px}
.m-print{position:relative;display:block;background:#F7F2E6;padding:5px;transform:rotate(-2deg);box-shadow:0 1px 2px rgba(60,40,20,.35),0 4px 8px rgba(60,40,20,.2)}
.m-print>img:first-child{width:170px;height:122px;object-fit:cover}
.m-print .mc{position:absolute;width:30px;height:30px;filter:drop-shadow(1px 1px 1px rgba(30,20,10,.4))}
.m-print .c1{left:-5px;top:-5px}.m-print .c2{right:-5px;top:-5px;transform:rotate(90deg)}.m-print .c3{right:-5px;bottom:-5px;transform:rotate(180deg)}.m-print .c4{left:-5px;bottom:-5px;transform:rotate(270deg)}
.m-ink{font-family:Caveat,cursive;font-size:18px;color:#2F3B5E;transform:rotate(-3deg);align-self:flex-end;margin-right:18px;line-height:1.1}
.e-album .sw .m-ink:only-child{align-self:center;margin:0;font-size:25px}
/* framed swatch */
.e-frame .sw{background:#2E3A46}
.m-frame{display:block;padding:4px;background:linear-gradient(135deg,#F4DE9C,#C99A42 42%,#F0D283 68%,#B98A3C);box-shadow:0 6px 14px rgba(0,0,0,.4)}
.m-frame>span{display:block;background:#F4F0E6;padding:12px}
.m-frame img{width:130px;height:104px;object-fit:cover}
.m-word{font-family:"Cormorant Garamond",Georgia,serif;font-style:italic;font-size:23px;line-height:1.1;color:#F4EFE4;text-align:center;padding:16px;border:1px solid rgba(201,174,114,.6);margin:18px}
/* postcard swatch */
.e-postcard .sw{background:#14324F radial-gradient(rgba(255,255,255,.08) 1px,transparent 1.4px) 0 0/12px 12px;box-shadow:inset 0 -5px 0 #F2B705}
.m-pc{position:relative;display:block;padding:6px;background:repeating-linear-gradient(135deg,#C0392B 0 7px,#FBF6EA 7px 13px,#1F4E8C 13px 20px,#FBF6EA 20px 26px);transform:rotate(-3deg);box-shadow:0 6px 14px rgba(0,0,0,.4)}
.m-pc>img,.m-pc-blank{display:block;width:176px;height:124px;object-fit:cover;border:5px solid #FBF6EA;box-sizing:content-box}
.m-pc-blank{background:#FBF6EA;font-family:Caveat,cursive;font-size:20px;color:#14324F;display:flex;align-items:center;justify-content:center;text-align:center;border:0;padding:5px}
.m-stamp{position:absolute;right:-8px;top:-10px;width:34px;height:40px;background:#F2B705;outline:2px dotted #FBF6EA;outline-offset:-2px;color:#14324F;font-family:var(--cond);font-weight:800;font-size:11px;display:flex;align-items:flex-end;justify-content:center;padding-bottom:4px;box-sizing:border-box;transform:rotate(8deg)}
/* corkboard swatch */
.e-cork .sw{background:#BE8C58 url(cork.jpg);box-shadow:inset 0 0 0 6px #6E4523,inset 0 6px 12px rgba(40,20,5,.5)}
.m-pol{position:relative;display:block;background:linear-gradient(170deg,#FFFFFC,#F3F1EA);padding:7px 7px 26px;transform:rotate(3deg);box-shadow:0 6px 12px rgba(40,18,4,.4)}
.m-pol>img:first-child,.m-pol-blank{display:block;width:128px;height:128px;object-fit:cover}
.m-pol-blank{background:#E9E4D8}
.m-cap{position:absolute;left:4px;right:4px;bottom:3px;font-family:Caveat,cursive;font-size:15px;color:#2B3A67;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m-pol .pin{position:absolute;left:50%;top:-12px;margin-left:-15px;width:30px;height:30px}
/* big (newest entry on the home page) */
.entry.e-big{gap:32px;padding:8px 0 30px;border-bottom:2px solid #D9CFC4;margin-bottom:6px}
.e-big .sw{flex:1 1 420px;height:380px}
.e-big .txt{flex:1 1 320px;gap:10px;align-self:center}
.e-big h3{font-size:clamp(27px,2.9vw,37px);line-height:1.08}
.e-big p{font-size:17px}
.e-big .more{margin-top:6px}
.latest{font-family:var(--cond);font-weight:700;font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:#fff;background:var(--c);align-self:flex-start;padding:4px 10px}
.e-big .m-print>img:first-child{width:min(400px,72vw);height:280px}
.e-big .m-print{padding:9px}.e-big .m-print .mc{width:50px;height:50px}.e-big .m-print .c1{left:-8px;top:-8px}.e-big .m-print .c2{right:-8px;top:-8px}.e-big .m-print .c3{right:-8px;bottom:-8px}.e-big .m-print .c4{left:-8px;bottom:-8px}
.e-big .m-ink{font-size:25px;margin-top:10px}
.e-big .m-frame{padding:7px}.e-big .m-frame>span{padding:26px}.e-big .m-frame img{width:min(320px,60vw);height:240px}
.e-big .m-word{font-size:34px}
.e-big .m-pc{padding:10px}.e-big .m-pc>img,.e-big .m-pc-blank{width:min(380px,66vw);height:270px;border-width:9px}
.e-big .m-stamp{width:52px;height:62px;font-size:14px;right:-12px;top:-14px}
.e-big .m-pol{padding:12px 12px 44px}.e-big .m-pol>img:first-child,.e-big .m-pol-blank{width:260px;height:260px}
.e-big .m-cap{font-size:21px;bottom:8px}.e-big .m-pol .pin{width:46px;height:46px;margin-left:-23px;top:-18px}
@media (max-width:700px){.entry .sw{flex-basis:100%;height:210px}.e-big .sw{height:330px}}

/* ---- List thumbnails: frame on the photo itself, sitting on the page ---- */
.entry .sw{background:none!important;box-shadow:none!important;overflow:visible}
.e-frame .m-word{color:var(--ink);border-color:#C9AE72;background:#fff}
.m-pc{box-shadow:0 4px 10px rgba(20,30,40,.25)}
.m-frame{box-shadow:0 4px 10px rgba(0,0,0,.25)}
.m-pol{box-shadow:0 4px 10px rgba(40,18,4,.25)}

/* ---- Header photos keep their own shape (portrait photos are no longer cropped) ---- */
.print img,.framed img{width:auto;height:auto;max-width:min(690px,82vw);max-height:560px;object-fit:contain}
.framed img{max-width:min(600px,70vw);max-height:500px}
.pc-front img{width:auto;height:auto;max-width:min(520px,76vw);max-height:460px;aspect-ratio:auto}

/* ---- Home: Art & Bonnie's hello, a light strip above the hero ---- */
.hello-strip{background:#F3EBDB;border-bottom:1px solid #E2D6C0}
.hello-strip .wrap{display:flex;align-items:center;gap:var(--s5);padding-top:var(--s5);padding-bottom:var(--s5)}
.hs-photo{flex:0 0 auto;margin:0 var(--s1);background:#FFFDF6;padding:6px;box-shadow:0 6px 14px rgba(60,40,20,.25);transform:rotate(-2.5deg)}
.hs-photo img{display:block;width:auto;height:auto;max-width:150px;max-height:110px}
.hs-text{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s1);min-width:0}
.hs-hello{margin:0;font-family:Caveat,cursive;font-weight:600;font-size:28px;line-height:1.1;color:#9A4122}
.hs-words{margin:0;max-width:92ch;font-family:var(--serif);font-size:16px;line-height:1.55;color:var(--ink-2)}
.hs-about{margin-top:var(--s1);font-weight:600;font-size:15px;color:#7E3519}
@media (max-width:640px){
  /* Phones: photo and hello side by side, their words full width below, trimmed to three lines */
  .hello-strip .wrap{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:var(--s3) var(--s4)}
  .hs-text{display:contents}
  .hs-photo img{max-width:92px;max-height:80px}
  .hs-hello{font-size:24px}
  .hs-words,.hs-more,.hs-about{grid-column:1 / -1}
  .hello-strip .wrap{row-gap:var(--s2)}
  .hs-about{margin-top:0}
  .hs-words.is-clamped{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
}
.hs-more{justify-self:start;margin:0;padding:6px 0;border:0;background:none;font:inherit;font-size:15px;font-weight:600;color:#7E3519;text-decoration:underline;text-underline-offset:4px;cursor:pointer}

/* ---- Home hero: the latest story, led by its photo.
   The band takes its colors from that story's topic. ---- */
.home-feature{--hf-bg:#2E3A46;--hf-acc:#EEC45E;position:relative;background:var(--hf-bg);color:#fff}
.home-feature::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;background:var(--hf-acc)}
.hf-album{--hf-bg:#2F3B2D;--hf-acc:#EFD08A;background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.018) 0 2px,transparent 2px 6px)}
.hf-frame{--hf-bg:#2E3A46;--hf-acc:#EEC45E}
.hf-postcard{--hf-bg:#14324F;--hf-acc:#F2B705;background-image:radial-gradient(rgba(255,255,255,.07) 1px,transparent 1.4px);background-size:18px 18px}
.hf-cork{--hf-bg:#5E321D;--hf-acc:#F5BC8E}
.hf-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:var(--s7);align-items:center;padding-top:var(--s7);padding-bottom:var(--s7)}
.hf-entry{display:flex;flex-direction:column;gap:var(--s3)}
.hf-label{font-family:var(--cond);font-weight:700;font-size:14px;letter-spacing:.16em;text-transform:uppercase;color:var(--hf-acc)}
.hf-entry h1{margin:0;font-family:var(--serif);font-weight:600;font-size:clamp(30px,3.4vw,44px);line-height:1.08;letter-spacing:-.005em}
.hf-entry h1 a{color:#fff;text-decoration:none}.hf-entry h1 a:hover{color:var(--hf-acc)}
.hf-meta{font-size:14px;font-weight:500;color:rgba(255,255,255,.75)}
.hf-ex{margin:var(--s1) 0 0;font-family:var(--serif);font-size:17px;line-height:1.6;color:rgba(255,255,255,.88);display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.hf-go{margin:var(--s3) 0 0}
.hf-go .btn.solid{background:#fff;color:var(--hf-bg)}
.hf-go .btn.solid:hover{background:var(--hf-acc);color:var(--hf-bg)}
/* The story's keepsake is the main thing */
.hf-entry-art{display:flex;flex-direction:column;align-items:center;justify-content:center;text-decoration:none;padding:var(--s4)}
.hf-entry-art .m-print,.hf-entry-art .m-frame,.hf-entry-art .m-pc,.hf-entry-art .m-pol{box-shadow:0 18px 40px rgba(0,0,0,.5)}
.hf-entry-art .m-print{padding:10px}.hf-entry-art .m-print>img:first-child{width:min(600px,80vw);height:400px}
.hf-entry-art .m-print .mc{width:56px;height:56px}
.hf-entry-art .m-print .c1{left:-9px;top:-9px}.hf-entry-art .m-print .c2{right:-9px;top:-9px}.hf-entry-art .m-print .c3{right:-9px;bottom:-9px}.hf-entry-art .m-print .c4{left:-9px;bottom:-9px}
.hf-entry-art .m-ink{font-size:30px;margin-top:12px;color:var(--hf-acc)}
.hf-entry-art .m-frame{padding:9px}.hf-entry-art .m-frame>span{padding:28px}.hf-entry-art .m-frame img{width:min(520px,72vw);height:350px}
.hf-entry-art .m-word{font-size:40px;max-width:440px;background:transparent;color:#fff;border-color:var(--hf-acc)}
.hf-entry-art .m-pc{padding:12px}.hf-entry-art .m-pc>img,.hf-entry-art .m-pc-blank{width:min(560px,76vw);height:380px;border-width:10px}
.hf-entry-art .m-stamp{width:60px;height:72px;font-size:16px;right:-14px;top:-16px}
.hf-entry-art .m-pol{padding:14px 14px 52px}.hf-entry-art .m-pol>img:first-child,.hf-entry-art .m-pol-blank{width:380px;height:380px}
.hf-entry-art .m-cap{font-size:26px;bottom:10px}.hf-entry-art .m-pol .pin{width:52px;height:52px;margin-left:-26px;top:-20px}

@media (max-width:960px){
  .hf-grid{grid-template-columns:1fr;gap:var(--s5);padding-top:var(--s6);padding-bottom:var(--s7)}
  .hf-entry-art{order:-1;padding:var(--s3) 0 0}
  .hf-entry-art .m-print>img:first-child,.hf-entry-art .m-pc>img,.hf-entry-art .m-pc-blank{height:clamp(200px,52vw,380px)}
  .hf-entry-art .m-frame img{height:clamp(180px,46vw,330px)}
  .hf-entry-art .m-frame>span{padding:clamp(12px,3vw,26px)}
  .hf-entry-art .m-pol>img:first-child,.hf-entry-art .m-pol-blank{width:min(320px,70vw);height:min(320px,70vw)}
}

/* =====================================================================
   JOURNAL — banner, browse by year, story sign-off
   ===================================================================== */
.th-sec .print img{max-width:min(440px,76vw);max-height:330px}
.th-sec .album-stage{padding:10px}
.years{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 18px;margin:6px 0 14px}
.years span{font-family:var(--cond);font-weight:700;font-size:14px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-right:2px}
.years a{font-weight:600;font-size:16px;color:var(--c-dark);text-decoration:none;padding:8px 0;text-underline-offset:5px}
.years a:hover{color:var(--c);text-decoration:underline}
.years a[aria-current]{color:var(--ink);text-decoration:underline;text-decoration-thickness:3px;text-decoration-color:var(--c)}
.signoff{max-width:760px;margin:28px auto 0;display:flex;flex-direction:column;gap:14px}
.signoff .sig{margin:0;font-family:Caveat,cursive;font-weight:600;font-size:32px;line-height:1;color:var(--c-dark);transform:rotate(-2deg);transform-origin:left}
.signoff .reply{margin:0;font-weight:600;font-size:16px}
.signoff .reply a{text-underline-offset:4px}

/* Journal list on phones: a small keepsake beside the title, the excerpt below */
@media (max-width:700px){
  .entry:not(.e-big){display:grid;grid-template-columns:116px 1fr;gap:6px 16px;align-items:start}
  .entry:not(.e-big) .txt{display:contents}
  .entry:not(.e-big) .sw{grid-row:1 / span 2;width:116px;height:auto;padding:10px 0 6px}
  .entry:not(.e-big) .sw>*{zoom:.58}
  .entry:not(.e-big) .meta{grid-column:2;font-size:14px}
  .entry:not(.e-big) h3{grid-column:2;font-size:20px}
  .entry:not(.e-big) p{font-size:16px}
  .entry:not(.e-big) p{grid-column:1 / -1;margin-top:6px}
}
.s-journal .th-sec .kicker{color:var(--on-c)}

/* =====================================================================
   REFRESH — shared details
   ===================================================================== */
/* Kickers sit in the light accent on dark grounds, and in the section's deep shade on paper and cards */
.card .kicker,.feature .kicker,.selah-item .kicker,.selah-big .kicker,.page .kicker{color:var(--c-dark)}
.selah-card .kicker{color:#F3C6A5}
.band .kicker{color:var(--c2)}
.card-title{margin:0;font-size:25px;line-height:1.1}
.card-text{margin:0;font-size:16px;color:var(--ink-2)}
.card-link,.card a.card-link{font-weight:600;font-size:16px}
.list-more{margin:var(--s5) 0 0}
.hp{display:none}
.trip .n{font-weight:600;font-size:15px;color:var(--c-dark)}
.trip-van{background:var(--c);border-color:var(--c);color:#fff;justify-content:flex-end;min-height:260px}
.trip-van span{color:#D5DEE6}
.trip-van:hover{border-color:var(--c-dark)}
.trip-van:hover b{color:#fff}
.btn.solid:hover{background:var(--c-dark);color:#fff}
.th-sec .wrap{min-height:400px;padding-top:var(--s7);padding-bottom:var(--s7)}
@media (max-width:860px){.th-sec .wrap{min-height:0}}
.site-header{position:relative;z-index:2}
@media (max-width:700px){
  .site-header .wrap{padding-top:var(--s2);padding-bottom:var(--s1)}
  .brand-name{font-size:18px}.shield{width:38px;height:42px;font-size:16px}
  .nav{gap:0 var(--s4)}.nav a{padding:10px 0}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}.tile:hover img{transform:none}}
/* Four section tiles: one row on wide screens, two-by-two below that — never a lone orphan */
.tiles{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:900px){.tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:420px){.tiles{grid-template-columns:1fr}}
/* Newest first / Oldest first switch above a list */
.order{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 18px;margin:calc(var(--s2) * -1) 0 var(--s2)}
.order span{font-family:var(--cond);font-weight:700;font-size:14px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.order a{font-weight:600;font-size:16px;color:var(--c-dark);text-decoration:none;padding:8px 0;text-underline-offset:5px}
.order a:hover{text-decoration:underline}
.order a[aria-current]{color:var(--ink);text-decoration:underline;text-decoration-thickness:3px;text-decoration-color:var(--c)}

/* ---- Site contents ---- */
.toc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:var(--s7) var(--s6);align-items:start}
.toc{display:flex;flex-direction:column;gap:var(--s2);padding-top:var(--s4);border-top:3px solid var(--c)}
.toc h2{margin:0;font-family:var(--display);font-weight:var(--display-weight);font-style:var(--display-style);font-size:25px;line-height:1.1}
.s-travels.toc h2{text-transform:uppercase}
.toc h2 a{color:var(--ink);text-decoration:none}
.toc h2 a:hover{color:var(--c-dark);text-decoration:underline}
.toc>p{margin:0;color:var(--ink-2);font-size:16px}
.toc h3{margin:var(--s3) 0 0;font-family:var(--cond);font-weight:700;font-size:14px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.toc ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.toc li{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s3);border-bottom:1px solid var(--line)}
.toc li a{display:block;padding:9px 0;font-weight:500;color:var(--c-dark);text-decoration:none}
.toc li a:hover{text-decoration:underline}
.toc li span{font-size:14px;color:var(--muted);font-variant-numeric:tabular-nums}
.toc-suggest{max-width:760px}
.toc-suggest h2{margin:0;font-family:var(--serif);font-weight:600;font-size:23px}
.toc-suggest p{margin:0}

/* ---- Logo: the two-leaf mark (maple = Bonnie, elm = Art), Lora wordmark, handwritten byline ---- */
.site-header{background:#FCFBF7}
.brand{gap:14px}
.brand-mark{display:block;flex:0 0 auto;width:76px;height:76px}
.brand-text{display:flex;flex-direction:column;gap:2px}
.brand .brand-name{font-family:Lora,Georgia,serif;font-weight:500;font-size:34px;line-height:1.05;color:#2F3A48;text-transform:none;letter-spacing:0}
.brand-by{font-family:Caveat,cursive;font-weight:700;font-size:20px;line-height:1;color:#A9532F}
@media (max-width:640px){
  .brand-mark{width:52px;height:52px}
  .brand .brand-name{font-size:26px}
  .brand-by{font-size:17px}
}

/* ---- Hello strip: centered as a group on wide screens ---- */
@media (min-width:641px){
  .hello-strip .wrap{justify-content:center}
  .hs-text{max-width:820px}
}

/* =====================================================================
   JOURNAL LIST BANNER — tabs live in the banner; each topic wears its keepsake
   ===================================================================== */
.th-list .wrap{flex-direction:row;align-items:center;justify-content:space-between;gap:var(--s7);min-height:0;padding-top:var(--s7);padding-bottom:var(--s7)}
.th-list .th-title{align-items:flex-start;text-align:left;max-width:640px;gap:var(--s3)}
.th-list .th-title .h1,.th-list .th-title h1{font-size:clamp(36px,4.6vw,58px);line-height:1.02}
.th-list .art{flex:0 1 auto;display:flex;justify-content:center}
.th-list .print img,.th-list .framed img,.th-list .pc-front img{max-width:min(420px,40vw);max-height:300px}
.th-list .framed>div{padding:28px}
.th-list .polaroid>div>img{width:min(280px,30vw)}
.th-list.th-cork .board .wrap{align-items:center}
.th-list .index-card{flex:1 1 auto;max-width:680px}
.th-list .index-card .th-title{max-width:none}
.th-list.th-postcard .th-title{order:0}
.th-list.is-slim .wrap{padding-top:var(--s6);padding-bottom:var(--s6)}
.th-list.is-slim .th-title{max-width:none}
.th-list.is-slim .th-title .h1,.th-list.is-slim .th-title h1{font-size:clamp(30px,3.4vw,40px)}

/* Tabs: light on dark grounds (cover, Reflections, Travels), dark on paper and index card (Family History, Stories) */
.th-list{--tab-fg:#fff;--tab-line:rgba(255,255,255,.45);--tab-on-bg:#fff;--tab-on-fg:var(--c-dark);--tab-dim:rgba(255,255,255,.92)}
.jb-frame{--tab-fg:#F4EFE4;--tab-on-bg:#EEC45E;--tab-on-fg:#2E3A46}
.jb-postcard{--tab-fg:#fff;--tab-on-bg:#F2B705;--tab-on-fg:#14324F}
.jb-album,.jb-cork{--tab-fg:#2C1D12;--tab-line:rgba(44,29,18,.35);--tab-on-bg:#A64B2A;--tab-on-fg:#fff;--tab-dim:#5A4330}
.jtabs{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s3)}
.jtabs a,.jtabs .off{padding:8px 14px;border:1px solid var(--tab-line);color:var(--tab-fg);text-decoration:none;font-weight:500;font-size:15px;line-height:1.3;transition:background-color .15s var(--ease),border-color .15s var(--ease)}
.jtabs a:hover{border-color:var(--tab-fg)}
.jtabs a[aria-current]{background:var(--tab-on-bg);border-color:var(--tab-on-bg);color:var(--tab-on-fg);font-weight:600}
.jtabs .off{opacity:.4;cursor:default}
.th-list :focus-visible{outline-color:var(--tab-fg)}

.th-list .polaroid{margin-top:var(--s5)}

/* Journal banner: the same height for every topic, photo always on the right; phones keep only the words and tabs */
.th-list:not(.is-slim) .wrap{min-height:380px;padding-top:var(--s6);padding-bottom:var(--s6)}
.th-list.th-cork:not(.is-slim) .board .wrap{min-height:348px}
.th-list .th-title{flex:1 1 auto}
.th-list .art{flex:0 1 46%;justify-content:flex-end}
.th-list .print img,.th-list .framed img,.th-list .pc-front img{max-width:100%;max-height:250px}
.th-list .framed>div{padding:22px}
.th-list .polaroid>div>img{width:min(220px,24vw)}
.th-list .polaroid{margin-top:var(--s4)}
@media (max-width:640px){
  .th-list .art{display:none}
  .th-list:not(.is-slim) .wrap{min-height:0;padding-top:var(--s5);padding-bottom:var(--s5)}
  .th-list.th-cork:not(.is-slim) .board .wrap{min-height:0}
}

/* Year bar: its own strip under the banner. The year is the link; the count is spelled out beneath it. */
.jyear-bar{background:var(--white);border-bottom:1px solid var(--line)}
.jyear-bar .wrap{display:flex;align-items:center;gap:var(--s3) var(--s5);padding-top:var(--s3);padding-bottom:var(--s3)}
.jyear-bar .lbl{flex:0 0 auto;font-family:var(--cond);font-weight:700;font-size:14px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.jy-list{display:flex;flex-wrap:wrap;gap:var(--s1)}
.jy{display:flex;flex-direction:column;align-items:center;min-width:76px;padding:6px 10px;border:1px solid transparent;text-decoration:none;line-height:1.2;transition:border-color .15s var(--ease),background-color .15s var(--ease)}
.jy b{font-size:16px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.jy span{font-size:14px;color:var(--muted);white-space:nowrap}
.jy:hover{border-color:var(--line-strong)}
.jy[aria-current]{background:var(--c);border-color:var(--c)}
.jy[aria-current] b,.jy[aria-current] span{color:var(--on-c)}
.jy.all b{color:var(--c-dark)}
@media (max-width:760px){
  .jyear-bar .wrap{flex-direction:column;align-items:flex-start;gap:var(--s2)}
  .jy-list{width:100%}
}
.th-list .polaroid>div>img{width:min(190px,22vw)}
.th-list .polaroid>div{padding:12px 12px 44px}
@media (min-width:641px){.th-list.th-album:not(.is-slim) .wrap{min-height:370px}}
.th-list .polaroid .pin{width:40px;height:40px;margin-left:-20px;top:-16px}

/* ---- Phone menu: a Menu button opens the main navigation as a list under the header ---- */
.nav-toggle{display:none}
@media (max-width:760px){
  .site-header .wrap{flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0 var(--s3);padding-top:var(--s2);padding-bottom:var(--s2)}
  .nav-toggle{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border:1px solid var(--line-strong);background:transparent;color:var(--ink);font:inherit;font-size:16px;font-weight:600;cursor:pointer;min-height:44px}
  .nav-toggle svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
  .nav-toggle .i-x{display:none}
  .nav-open .nav-toggle .i-x{display:inline}.nav-open .nav-toggle .i-bars{display:none}
  .js .site-header .nav{display:none}
  .site-header .nav{flex:1 0 100%;flex-direction:column;gap:0;margin-top:var(--s2);border-top:1px solid var(--line)}
  .js .site-header.nav-open .nav{display:flex}
  .site-header .nav a{padding:13px var(--s1);border-bottom:1px solid var(--line);font-size:17px;box-shadow:none}
  .site-header .nav a[aria-current]{box-shadow:none;background:rgba(var(--c-rgb),.07);color:var(--c-dark)}
}
@media (max-width:760px){.site-header .wrap{flex-wrap:wrap}.brand{min-width:0}.nav-toggle{flex:0 0 auto}}
@media (max-width:400px){
  .brand{gap:10px}.brand-mark{width:46px;height:46px}
  .brand .brand-name{font-size:23px}.brand-by{font-size:16px}
  .nav-toggle{padding:8px 10px;font-size:15px;gap:6px}
}
/* Photo corners sized to the smaller banner print */
.th-list .print .corner{width:42px;height:42px}
.th-list .print .c1{left:-6px;top:-6px}.th-list .print .c2{right:-6px;top:-6px}.th-list .print .c3{right:-6px;bottom:-6px}.th-list .print .c4{left:-6px;bottom:-6px}
.th-list .print>div{padding:8px}

/* Year bar: one fixed-height row that scrolls sideways (swipe on phones, scroll or drag on desktop).
   A soft fade at the edge shows there are more years. */
.jy-list{flex:1 1 auto;min-width:0;flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent;padding-bottom:6px}
.jy-list::-webkit-scrollbar{height:6px}.jy-list::-webkit-scrollbar-thumb{background:var(--line-strong)}
.jy{flex:0 0 auto;scroll-snap-align:start}
.jy-list.more-right{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 56px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 56px),transparent)}
.jy-list.more-left.more-right{-webkit-mask-image:linear-gradient(90deg,transparent,#000 56px,#000 calc(100% - 56px),transparent);mask-image:linear-gradient(90deg,transparent,#000 56px,#000 calc(100% - 56px),transparent)}
.jy-list.more-left:not(.more-right){-webkit-mask-image:linear-gradient(90deg,transparent,#000 56px);mask-image:linear-gradient(90deg,transparent,#000 56px)}
/* Phones: trim the corkboard's extra framing so Stories matches the other topics */
@media (max-width:640px){
  .th-list.th-cork{padding:0}
  .th-list.th-cork .board .wrap{padding-top:var(--s3);padding-bottom:var(--s3)}
  .th-list .index-card .th-title{padding:14px 16px}
  .th-list .index-card::before{display:none}
  .th-list.th-album:not(.is-slim) .wrap{padding-bottom:calc(var(--s5) - 10px)}
}
/* Phones: one minimum height for every topic's banner, content centered */
@media (max-width:640px){
  .th-list:not(.is-slim){box-sizing:border-box;min-height:228px;display:flex;flex-direction:column;justify-content:center}
  .th-list:not(.is-slim)>.wrap,.th-list.th-cork:not(.is-slim)>.board{width:100%}
  .th-list.th-cork:not(.is-slim)>.board{flex:1;display:flex;align-items:center}
}
@media (max-width:480px){.th-list:not(.is-slim){min-height:272px}}

/* ---- Editor bar: only for signed-in editors, across the very top of every page ---- */
.editor-bar{background:#1E2630;color:#fff;font-size:15px}
.editor-bar .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;padding-top:8px;padding-bottom:8px}
.editor-bar .eb-who{color:#C3CAD1}
.editor-bar a{color:#fff;font-weight:600;text-decoration:none;padding:6px 0}
.editor-bar a:hover{text-decoration:underline}
.editor-bar .eb-edit{background:#EEC45E;color:#1E2630;padding:6px 12px}
.editor-bar .eb-edit:hover{background:#F4D47E;text-decoration:none}
.editor-bar :focus-visible{outline-color:#fff}
@media (max-width:640px){.editor-bar .eb-who{display:none}.editor-bar .wrap{gap:4px 14px}}

/* ---- Ministries: three doors, each in its own section's colors ---- */
.doors{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s5);align-items:stretch}
.door{display:flex;flex-direction:column;gap:var(--s3);background:var(--white);border:1px solid var(--line);border-top:3px solid var(--c);padding:var(--s6) var(--s5)}
.door h2{margin:0;font-family:var(--display);font-weight:var(--display-weight);font-style:var(--display-style);font-size:clamp(28px,2.6vw,34px);line-height:1.1}
.door h2 a{color:var(--ink);text-decoration:none}
.door h2 a:hover{color:var(--c-dark)}
.door p{margin:0;color:var(--ink-2)}
.door .door-note{font-size:15px;color:var(--muted)}
.door blockquote{margin:var(--s2) 0 0;font-family:"Cormorant Garamond",Georgia,serif;font-style:italic;font-weight:500;font-size:21px;line-height:1.35;color:var(--ink);display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
.door .who{font-size:15px;color:var(--muted)}
.door .door-go{margin-top:auto;padding-top:var(--s3)}
@media (max-width:900px){.doors{grid-template-columns:1fr}}
/* The editor bar stays at the top of the window while scrolling */
.editor-bar{position:sticky;top:0;z-index:60;box-shadow:0 2px 8px rgba(0,0,0,.18)}
html.has-editor-bar{scroll-padding-top:56px}