/* Tapirapé's handmade journal. Public templates share these components.
   Dates, text and photographs remain content; decoration never carries lettering. */
/* WOFF2 subsets of the .ttf files beside them: Latin, Latin Extended, punctuation and arrows,
   every layout feature kept. Kalam ships Devanagari too, which was most of its 450 KB.
   pyftsubset X.ttf --unicodes="U+0000-00FF,U+0100-024F,U+0259,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
     U+0300-036F,U+1E00-1EFF,U+2000-206F,U+20A0-20CF,U+2100-214F,U+2190-21FF,U+2212,U+2215,U+FEFF,U+FFFD"
     --layout-features='*' --flavor=woff2 */
@font-face { font-family: JournalPaint; src: url('decor/journal-lettering.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: HeaderPaint; src: url('decor/header-lettering.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: HeaderMenu; src: url('decor/header-menu.woff2') format('woff2'); font-display: swap; }
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/caveat-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/caveat-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/caveat-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/caveat-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
  color-scheme: light;
  --bg: #efdfb9; --fg: #412b1b; --dim: #6e5139; --rule: #c9ac7b;
  --accent: #963c22; --person: #355b32; --event: #75411c;
  --max: 74rem; --gutter: clamp(1.25rem, 4.5vw, 3.5rem);
  /* Match the centered content edge, allowing half a rem for a scrollbar. */
  --content-inset: max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter) - .5rem));
  --paper: url('decor/tex-parchment.webp'); --wood: url('decor/carved-wood.webp');
  --binding: url('decor/liana-repeat.svg');
  --paint: JournalPaint, 'Marker Felt', 'Chalkboard SE', cursive;
  --hand: Caveat, Georgia, serif;
  --paper-edge: polygon(.8% 2%, 4% 1%, 9% 1.5%, 14% .5%, 20% 1.1%, 27% .4%, 33% 1.2%, 39% .2%, 46% .8%, 54% .3%, 61% 1.2%, 68% .4%, 75% .8%, 83% .2%, 90% 1%, 98% .6%, 99.2% 4%, 98.7% 12%, 99.5% 20%, 99% 29%, 99.6% 38%, 99% 48%, 99.5% 59%, 99% 70%, 99.4% 81%, 98.9% 90%, 99.3% 98%, 94% 99%, 87% 98.5%, 80% 99.5%, 72% 98.8%, 63% 99.6%, 54% 98.8%, 46% 99.5%, 38% 98.8%, 30% 99.5%, 21% 98.7%, 13% 99.3%, 5% 98.5%, 1% 99%, .4% 94%, 1% 86%, .3% 77%, .8% 68%, .2% 58%, .9% 48%, .4% 39%, 1% 29%, .3% 20%, .9% 11%);
  --torn-edge: polygon(1% 5%, 14% 1%, 29% 3%, 45% 0, 61% 3%, 79% 1%, 98% 4%, 97% 26%, 100% 52%, 98% 73%, 99% 96%, 78% 99%, 61% 96%, 43% 100%, 25% 97%, 1% 99%, 2% 73%, 0 48%, 2% 25%);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100dvh; color: var(--fg); font: 500 1.35rem/1.6 var(--hand);
  background: radial-gradient(ellipse at 1% 8%, #a6753820, transparent 45%), linear-gradient(#fff9e850, #fff9e850), var(--paper);
  /* A column whose main part takes the spare height, so a short page such as
     the archive still ends with the footer at the bottom of the window. */
  display: flex; flex-direction: column;
}
body > main { flex: 1 0 auto; align-content: start; }
img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
a:hover { color: var(--accent); }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px dashed var(--accent); outline-offset: 5px; }
[hidden] { display: none !important; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 1rem; top: 1rem; padding: .6rem 1rem; background: #f2e2bf; color: var(--fg); z-index: 110; }
h1, h2, h3, .page-title { font-family: var(--paint); font-weight: normal; line-height: 1.15; text-wrap: balance; }
h1, h2 { text-transform: uppercase; overflow-wrap: anywhere; }
p, .post .body, .footer-inner > div { overflow-wrap: anywhere; min-width: 0; }
h1 a, h2 a { text-decoration: none; }
main { display: grid; grid-template-columns: [full-start] minmax(var(--gutter), 1fr) [content-start] minmax(0, calc(var(--max) - 2 * var(--gutter))) [content-end] minmax(var(--gutter), 1fr) [full-end]; }
main > * { grid-column: content; min-width: 0; }
.page-title { min-width: 0; overflow-wrap: anywhere; font-size: clamp(2rem, 3.6vw, 2.8rem); margin: 2rem 0 1.5rem; }
.page-title .count { font: 1.15rem var(--hand); color: var(--dim); margin-left: .5rem; text-transform: none; }

/* Wooden masthead and quiet corner foliage. */
header.site {
  --corner-size: 4.5rem;
  display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(9rem, 12rem); align-items: center;
  gap: .75rem clamp(1rem, 2vw, 2rem); padding: 1rem max(calc(var(--corner-size) + 1.25rem), calc((100% - 67rem) / 2));
  min-height: 5rem; position: relative; isolation: isolate; z-index: 3;
  background: linear-gradient(#24170d40, #24170d40), var(--wood) center / cover no-repeat, #382415;
  color: #f1dbac; border-bottom: 3px solid #291e12;
}
.brand { position: relative; z-index: 2; min-width: 0; display: inline-flex; align-items: center; gap: .5rem; flex: 0 0 auto; font: clamp(2rem, 3.5vw, 2.8rem)/1 HeaderPaint, var(--paint); text-transform: uppercase; text-decoration: none; }
.brand-name { overflow-wrap: anywhere; }
.brand-sun { width: 38px; height: 38px; }
header.site nav { position: relative; z-index: 2; display: flex; justify-content: center; min-width: 0; align-items: center; gap: clamp(.6rem, 1.6vw, 2rem); font: 1.4rem/1.4 HeaderMenu, var(--hand); }
header.site nav a { position: relative; display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; color: #f6e5bf; white-space: nowrap; }
header.site nav a:hover::after, header.site nav a[aria-current]::after {
  content: ''; position: absolute; left: -3%; bottom: -3px; width: 106%; height: 8px;
  background: url('decor/paint-stroke.svg') center / 100% 100% no-repeat;
  filter: brightness(1.65); transform: rotate(-2deg); pointer-events: none;
}
/* Search is a native GET form: Enter and the magnifier both submit it. */
.header-search { position: relative; z-index: 2; display: flex; align-items: center; min-width: 0; width: 100%; margin: 0; background: #31231a; border: 1.5px solid #b38c58; border-radius: 3px 5px 2px 4px; box-shadow: inset 0 0 0 1px #160e0b80; transform: rotate(-.4deg); }
.header-search input { appearance: none; min-width: 0; width: 100%; border: 0; outline: 0; margin: 0; padding: .5rem .6rem .5rem 0; background: transparent; color: #fff0d1; font: 1rem/1.4 HeaderMenu, var(--hand); }
.header-search input::placeholder { color: #d9c2a2; opacity: 1; }
.header-search button { display: grid; place-items: center; flex: 0 0 40px; align-self: stretch; min-height: 40px; padding: 0; border: 0; background: transparent; color: #e7c795; cursor: pointer; }
.header-search button:hover { color: #fff8e6; }
.header-search:focus-within { outline: 2px dashed #e7c795; outline-offset: 4px; }
.search-summary { margin: -.5rem 0 1.5rem; color: var(--dim); }
.search-result { padding: 1.5rem 0; border-bottom: 1px solid var(--rule); }
.search-result h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin: .3rem 0 .6rem; }
.search-result p { max-width: 65ch; margin: 0; }
.search-result .entry-read { margin-top: .65rem; }
.search-kind { color: var(--dim); font-size: 1.05rem; }
@media (max-width: 64rem) {
  header.site { grid-template-columns: auto minmax(0, 1fr); }
  header.site .brand { grid-column: 1; grid-row: 1; }
  .header-search { grid-column: 2; grid-row: 1; max-width: 14rem; justify-self: end; }
  header.site nav { grid-column: 1 / -1; grid-row: 2; }
}
/* Keep corner art the same size on desktop/tablet; shrink only on phones.
   The header reserves matching side space so the leaves stay clear of links. */
header.site::before, header.site::after {
  content: ''; position: absolute; top: -.25rem; width: var(--corner-size); aspect-ratio: 350 / 370;
  background-position: center; background-size: contain; background-repeat: no-repeat;
  pointer-events: none; z-index: 1;
}
header.site::before { left: 0; background-image: url('decor/masthead-leaf-left-v2.svg'); }
header.site::after { right: 0; background-image: url('decor/masthead-leaf-right-v2.svg'); }

/* The latest photograph fills the opening spread; the paper stays readable. */
.journal-hero { grid-column: full; position: relative; isolation: isolate; background: #26301d; }
.hero-inner { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.18fr); align-items: center; width: 100%; max-width: var(--max); min-height: clamp(32rem, 43vw, 42rem); margin-inline: auto; padding: 3rem var(--gutter) 3.5rem; }
.journal-hero::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -13px; height: 28px;
  background: var(--binding) left center / auto 28px repeat-x; pointer-events: none; z-index: 3;
}
.hero-note {
  min-width: 0; overflow-wrap: anywhere;
  position: relative; z-index: 2; padding: 1.7rem 2rem 1.8rem 1.8rem;
  margin: 0; transform: rotate(-.5deg);
  isolation: isolate;
  filter: drop-shadow(1px 3px 2px #100c073d) drop-shadow(2px 8px 7px #100c074d);
}
/* Clip the material, leaving its outer element free to cast a real shadow. */
.hero-note::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(152deg, transparent 48.7%, #b5945b10 49%, #fff3 49.2%, transparent 49.5%), var(--paper) repeat;
  clip-path: var(--paper-edge);
}
.note-label { display: inline-block; position: relative; isolation: isolate; padding: .2rem .7rem; margin: -.3rem 0 .2rem -.3rem; font: .9rem var(--paint); text-transform: uppercase; letter-spacing: .04em; transform: rotate(-3deg); color: #f8e8c6; filter: drop-shadow(1px 3px 2px #301c1359); }
.note-label::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--wood) center / cover; clip-path: var(--torn-edge); }
.hero-note h1 { font-size: clamp(1.85rem, 3vw, 2.65rem); line-height: 1.1; margin: .45rem 0 .6rem; }
.hero-note p { font-size: 1.4rem; line-height: 1.6; margin: .7rem 0 1rem; max-width: 38ch; }
.wood-button, .pager a {
  display: inline-block; padding: .4rem 1.15rem; font: 1rem var(--paint); text-transform: uppercase;
  color: #f9e8c5; background: var(--wood) center / cover no-repeat; text-decoration: none;
  clip-path: var(--torn-edge); transform: rotate(-1.5deg);
}
.wood-button:hover, .pager a:hover { color: #fff9e9; filter: brightness(1.12); }
.wood-button span { margin-left: .55rem; }
.hero-photos { position: absolute; inset: 0; z-index: 0; margin: 0; padding: 0; }
.hero-photos::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, #1720126b, transparent 55%), linear-gradient(0deg, #26301d88, transparent 35%); pointer-events: none; }
.journal-hero .hero-photos .photo-mount { position: absolute; inset: 0; padding: 0; transform: none; border-radius: 0; box-shadow: none; filter: none; }
.journal-hero .hero-photos .photo-mount img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; object-position: center 50%; }
.journal-hero .hero-photos .photo-mount::before, .journal-hero .hero-photos .photo-mount::after, .hero-photos .mount-paper { display: none; }
.journal-hero .hero-photos .photo-count { right: max(var(--gutter), calc((100% - 67rem) / 2)); bottom: 2rem; z-index: 2; font-size: 1rem; padding: .3rem .65rem; }

/* List pages (Stories, Events) use their own cover while sharing the journal's materials. */
.list-hero .hero-inner { min-height: clamp(23rem, 32vw, 31rem); padding-block: 2.5rem 3rem; }
.list-hero .hero-note h1 { margin-top: 0; }
.list-hero .hero-note p { margin-bottom: .25rem; }
.list-hero .photo-count { display: none; }
.journal-hero.list-hero .hero-photos .photo-mount img { object-position: center 60%; }
/* Every entry sits in the middle of the page, its mark beside it; a long title wraps beside the mark. */
/* .post sets padding-block later in this file; two classes so this wins. */
.post.list-body { padding-top: 3.75rem; }
.list-body .body { text-align: center; }
.list-body a[data-list-icon] { display: inline-grid; max-width: 100%; grid-template-columns: 3rem minmax(0, auto); align-items: center; gap: .9rem; min-height: 3rem; text-align: left; text-decoration: none; }
.list-body .list-symbol { width: 3rem; height: 3rem; object-fit: contain; filter: drop-shadow(0 2px 1px #43251326); }
.list-body .list-link-text { min-width: 0; text-decoration: underline; text-underline-offset: .16em; text-decoration-thickness: 1px; }
/* Events carry their month in <em>; it reads as a quieter note after the name. */
.list-events .list-link-text em { font-style: normal; color: var(--dim); }

/* Live headings and years painted into the journal. */
.journal-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .7rem 1rem; position: relative; margin-top: 1.8rem; padding-bottom: 1rem; }
.journal-heading .page-title { margin: 0; }
.sun-mark { display: inline-block; width: 36px; height: 36px; margin-left: .4rem; background: url('decor/painted-spiral-v2.svg') center / contain no-repeat; font-size: 0; vertical-align: middle; transform: rotate(-9deg); }
.journal-heading::after, .journal-entry::after, .tags::before {
  content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 13px;
  background: url('decor/paint-stroke.svg') center / 100% 100% no-repeat; pointer-events: none;
}
.year-tabs { display: flex; flex-wrap: wrap; gap: .5rem; }
.year-tabs a { display: inline-block; padding: .25rem .8rem; background: url('decor/tex-parchment-deep.webp'); font: 1rem var(--paint); text-decoration: none; clip-path: var(--torn-edge); transform: rotate(-2deg); }
.year-tabs a:nth-child(even) { transform: rotate(2deg); }
.year-tabs a:first-child { background: var(--wood) center / cover; color: #f9e8c5; }

/* The archive is a collection of journal volumes, one for each year. */
.archive .page-title { margin-bottom: .5rem; }
.archive-intro { margin: 0 0 1.7rem; color: var(--dim); }
.archive-volumes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); gap: 2rem 1.5rem; list-style: none; margin: 0 0 1rem; padding: 0; }
.archive-volumes li { min-width: 0; }
.archive-volumes a { display: flex; flex-direction: column; align-items: center; gap: .25rem; padding: .5rem .25rem; text-decoration: none; }
.archive-volume { width: min(100%, 9rem); height: auto; filter: drop-shadow(1px 4px 3px #43251330); }
.archive-volumes li:nth-child(even) .archive-volume { transform: rotate(3deg); }
.archive-volumes li:nth-child(3n) .archive-volume { transform: rotate(-2deg); }
.archive-year { position: relative; min-width: 6.5rem; margin-top: -.35rem; padding: .15rem .85rem; background: url('decor/tex-parchment-deep.webp'); clip-path: var(--torn-edge); font: 1.8rem/1.2 var(--paint); text-align: center; transform: rotate(-2deg); }
.archive-volumes li:nth-child(even) .archive-year { transform: rotate(1deg); }
.archive-count { color: var(--dim); font-size: 1.2rem; }
.cards { display: block; }

/* Dates hang beside the text like bullets. Use the outer margin first,
   adding space inside the date column only to keep feathers clear of the screen. */
.journal-entry { --date-inset: max(0px, calc(5.75rem - var(--content-inset))); display: grid; grid-template-columns: calc(76px + var(--date-inset)) minmax(0, 1fr) minmax(0, 1.17fr); gap: 1.5rem; align-items: start; position: relative; padding: 2.3rem 0 2.7rem; }
.journal-entry::after { height: 6px; opacity: .16; transform: rotate(-.15deg); }
.entry-layout-1::after { transform: rotate(.2deg) scaleX(-1); opacity: .13; }
.entry-text { min-width: 0; overflow-wrap: anywhere; }
.entry-text h2 { font-size: clamp(1.5rem, 2.3vw, 1.95rem); margin: 0 0 .7rem; }
.entry-text p { font-size: 1.4rem; line-height: 1.65; margin: 0 0 .9rem; }
.entry-read { display: inline-block; margin-top: .9rem; font-size: 1.15rem; color: #873f26; text-underline-offset: 4px; }
.entry-tags, .tagrow { display: flex; flex-wrap: wrap; gap: .4rem; align-items: baseline; }
.tag { max-width: 100%; overflow-wrap: anywhere; display: inline-block; padding: .12rem .55rem; font: 1.1rem/1.5 var(--hand); text-decoration: none; background: #b5bd927d; color: #354020; border-radius: 3px; }


.tag:hover { background: #a7b17fa3; color: #27371e; }
.tag-person { color: var(--person); }
.tag-event { color: var(--event); }
.entry-stamp::before { display: none; content: ''; position: absolute; top: 15.4rem; left: -.2rem; width: 55px; height: 66px; background: url('decor/handprint.svg') center / contain no-repeat; opacity: .6; transform: rotate(-13deg); pointer-events: none; }

/* Real date lettering over transparent painted wood and feathers. */
.date-plaque { --date-art: url('decor/date-brown-v2.webp'); --date-letter-x: 0px; --date-letter-y: -.5rem; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; isolation: isolate; width: 76px; margin-inline-start: var(--date-inset, 0px); min-height: 112px; padding: .65rem .2rem; color: #fff0ce; font-family: var(--paint); line-height: 1.1; transform: rotate(-3deg); text-shadow: 0 1px 1px #382319; }
.plaque-teal { --date-art: url('decor/date-teal-v2.webp'); --date-letter-x: .35rem; --date-letter-y: 0px; transform: rotate(2deg); }
.plaque-rust { --date-art: url('decor/date-rust-v2.webp'); --date-letter-x: .5rem; --date-letter-y: 0px; transform: rotate(-4deg); }
.date-plaque::before { content: ''; position: absolute; z-index: -1; left: -60px; top: -28px; width: 144px; height: 216px; background: var(--date-art) center / contain no-repeat; filter: saturate(.82) drop-shadow(1px 2px 2px #3e231a33); pointer-events: none; }
.date-day, .date-month, .date-year { position: relative; left: var(--date-letter-x); top: var(--date-letter-y); }
.date-day { font-size: 2.5rem; }
.date-month { font-size: 1.15rem; text-transform: uppercase; margin: .15rem 0; transform: rotate(2deg); }
.date-year { font-size: 1rem; letter-spacing: .1em; }

/* Three photo compositions use pale paper, slight overlap and irregular tape. */
.photo-stack { display: grid; grid-template-columns: 1fr 1fr; gap: .65rem; align-items: start; padding: .25rem .35rem; min-width: 0; }
.photo-mount { display: block; min-width: 0; position: relative; isolation: isolate; padding: .45rem .5rem .75rem; filter: drop-shadow(1px 2px 2px #4325133d) drop-shadow(2px 8px 7px #4325134d); border-radius: 1% 2% 1% 2%; transform: rotate(2deg); text-decoration: none; }
.mount-paper { position: absolute; inset: 0; z-index: -1; background: var(--paper); clip-path: var(--paper-edge); pointer-events: none; }
.photo-mount img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; object-position: center 45%; }
.photo-mount:first-child { grid-column: 1 / -1; transform: rotate(-1.5deg); z-index: 1; }
.photo-mount:nth-child(2) { transform: rotate(3deg); margin-top: -.3rem; }
.photo-mount:nth-child(3) { transform: rotate(-2.5deg); margin-left: -.65rem; margin-top: -.2rem; }
.photo-mount::before, .photo-mount::after, .post figure.image > a::before { content: ''; position: absolute; z-index: 2; top: -.4rem; width: 42px; height: 18px; background: #bd945883; clip-path: var(--torn-edge); transform: rotate(-24deg); pointer-events: none; }
.photo-mount::before { left: -.45rem; }
.photo-mount::after { right: -.45rem; transform: rotate(31deg); }
.photo-count { max-width: calc(100% - 1rem); overflow-wrap: anywhere; position: absolute; right: .75rem; bottom: .9rem; padding: .17rem .55rem; background: url('decor/tex-parchment-deep.webp'); color: #452711; font: .88rem var(--paint); transform: rotate(-4deg); clip-path: var(--torn-edge); }
.stack-layout-1[data-preview-count="3"] { grid-template-columns: 1.45fr .85fr; gap: .7rem .45rem; }
.stack-layout-1[data-preview-count="3"] .photo-mount:first-child { grid-column: 1; grid-row: 1 / 3; transform: rotate(2deg); align-self: center; }
.stack-layout-1[data-preview-count="3"] .photo-mount:first-child img { aspect-ratio: 4 / 3; }
.stack-layout-1[data-preview-count="3"] .photo-mount:nth-child(2) { grid-column: 2; transform: rotate(-3deg); margin-left: -.6rem; }
.stack-layout-1[data-preview-count="3"] .photo-mount:nth-child(3) { grid-column: 2; transform: rotate(3deg); margin-left: -.8rem; }
.stack-layout-1 .photo-mount:nth-child(2)::after { display: none; }
.stack-layout-2 .photo-mount:first-child { transform: rotate(1.7deg); }
.stack-layout-2 .photo-mount:first-child::before { left: 43%; transform: rotate(5deg); }
.stack-layout-2 .photo-mount:first-child::after { display: none; }
.stack-layout-2 .photo-mount:nth-child(2) { transform: rotate(-3.5deg); margin-top: -.5rem; }
.stack-layout-2 .photo-mount:nth-child(3) { transform: rotate(2.7deg); margin-top: -.8rem; }
.photo-stack[data-preview-count="1"] { grid-template-columns: 1fr; }
.photo-stack[data-preview-count="2"] .photo-mount:first-child { grid-column: auto; }
.photo-stack[data-preview-count="2"] .photo-mount img { aspect-ratio: 3 / 2; }
.hero-photos { display: block; }

/* Long-form pages retain their existing block renderer. */
.post { width: 100%; max-width: 55rem; margin-inline: auto; padding-block: 1rem; }
.post h1 { font-size: clamp(2rem, 4.6vw, 3.2rem); margin: 1.5rem 0 .5rem; }
.post .meta { color: var(--dim); font-size: 1.15rem; margin: 0 0 2rem; }
.post .body { font: 500 1.4rem/1.7 var(--hand); }
.post .body > :first-child { margin-top: 0; }
.post .body p { margin: 0 0 1.1rem; }
.post blockquote { margin: 1.5rem 0; padding: .4rem 0 .4rem 1.1rem; border-left: 3px solid #ad7552; color: var(--dim); font-style: italic; }
.post blockquote cite { display: block; margin-top: .5rem; font-size: 1.05rem; font-style: normal; }
.post figure { margin: 1.75rem 0; }
.post figure.image > a, ul.gallery a { display: block; position: relative; padding: .5rem .5rem .9rem; background: var(--paper); box-shadow: 1px 2px 3px #43251330, 2px 8px 12px #43251345; border-radius: 1% 2% 1% 2%; transform: rotate(-.8deg); }
.post figure.image:nth-of-type(even) > a, ul.gallery li:nth-child(even) a { transform: rotate(1.2deg); }
.post figure.image > a::before { left: 44%; width: 60px; transform: rotate(-6deg); }
.post figure img { width: 100%; }
.post figcaption { font: 1.1rem/1.5 var(--hand); color: var(--dim); margin-top: .5rem; }
.post hr { border: 0; height: 8px; margin: 2.5rem 0; background: url('decor/paint-stroke.svg') center / 100% 100% no-repeat; opacity: .5; }
details.expander { margin: 1.25rem 0; }
details.expander summary { cursor: pointer; color: var(--accent); }
details.expander[open] summary { margin-bottom: .75rem; }
ul.gallery { list-style: none; margin: 1.75rem 0; padding: .4rem; display: grid; gap: 1rem .65rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr)); }
ul.gallery li { margin: 0; }
ul.gallery figure { margin: 0; }
ul.gallery figcaption { margin-top: .4rem; font-size: 1rem; line-height: 1.35; }
ul.gallery img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
ul.gallery[data-count="1"] { grid-template-columns: 1fr; }
ul.gallery[data-count="1"] img { aspect-ratio: auto; }
.tags { position: relative; margin-top: 2.5rem; padding-top: 1.25rem; }
.tags::before { top: 0; height: 6px; opacity: .25; }
.tagrow { margin: .5rem 0; }
.taglabel { font-size: 1rem; text-transform: uppercase; letter-spacing: .06em; color: var(--dim); min-width: 4rem; }
/* The tag page is a cloud: six sizes on a log scale, the largest in the painted lettering. */
.cloud-intro { margin: -.5rem 0 1.5rem; color: var(--dim); }
.tagcloud { list-style: none; margin: 0 0 2rem; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: .2rem 1.1rem; line-height: 1.3; }
.tagcloud li { min-width: 0; max-width: 100%; }
.cloud-tag { display: inline-block; max-width: 100%; overflow-wrap: anywhere; font-family: var(--hand); color: var(--dim); text-decoration: none; }
.cloud-tag:hover { color: var(--accent); text-decoration: underline; text-underline-offset: .15em; }
.cloud-w1 { font-size: 1.05rem; }
.cloud-w2 { font-size: 1.3rem; }
.cloud-w3 { font-size: 1.6rem; color: var(--fg); }
.cloud-w4 { font-size: 2rem; color: var(--fg); }
.cloud-w5 { font-size: 2.4rem; font-family: var(--paint); color: var(--fg); }
.cloud-w6 { font-size: 3rem; font-family: var(--paint); color: var(--accent); }
.tagcloud li:nth-child(3n) .cloud-tag { transform: rotate(-2deg); }
.tagcloud li:nth-child(5n) .cloud-tag { transform: rotate(1.5deg); }
/* Kind colours win over size colours once tags have kinds. */
.tagcloud .tag-person, .cloud-intro .tag-person { color: var(--person); }
.tagcloud .tag-event, .cloud-intro .tag-event { color: var(--event); }
.tagcloud .tag-place, .cloud-intro .tag-place { color: #2f5d6b; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.pager { display: flex; flex-wrap: wrap; gap: 1.2rem; align-items: center; justify-content: center; margin: 2.5rem 0; color: var(--dim); }
.back { margin-top: 2.5rem; color: var(--dim); }

/* The tribe's own emblem anchors the closing page. */
footer.site { position: relative; max-width: none; margin-top: 3rem; padding: 3.6rem max(5%, calc((100% - 67rem) / 2)) 2rem; background: url('decor/tex-parchment-deep.webp'); color: var(--dim); }
footer.site::before { content: ''; position: absolute; top: .3rem; left: 0; right: 0; height: 34px; background: url('decor/painted-triangles-v5.svg') left center / auto 34px repeat-x; pointer-events: none; }
.footer-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 1.6rem; }
.tribe-emblem { width: 85px; height: auto; flex: 0 0 auto; transform: rotate(-3deg); }
footer.site p { margin: .3rem 0; font-size: 1.15rem; }
footer.site .footer-title { font: 1.15rem var(--paint); color: var(--fg); }

/* Viewer remains plain so the photographs are easy to see. */
.lb { position: fixed; inset: 0; z-index: 100; display: none; background: #100d09f2; align-items: center; justify-content: center; }
.lb[open], .lb.on { display: flex; }
/* The count and the full-size link sit right under the picture, as wide as it is. */
.lb-frame { display: grid; grid-template-columns: min-content; margin: 0; }
.lb img { max-width: 94vw; max-height: calc(85dvh - 3rem); width: auto; height: auto; }
.lb-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .25rem 1rem; padding-top: .4rem; color: #fff; }
.lb button { position: absolute; background: #1e130dcc; color: white; border: 0; font-size: 2.5rem; line-height: 1; cursor: pointer; padding: .5rem 1rem; min-width: 44px; min-height: 44px; }
.lb .lb-close { top: .3rem; right: .5rem; font-size: 2rem; }
.lb .lb-prev { left: 0; top: 50%; transform: translateY(-50%); }
.lb .lb-next { right: 0; top: 50%; transform: translateY(-50%); }
.lb .lb-count { font-size: 1rem; }
.lb .lb-caption { flex: 1 1 12rem; font-size: 1.05rem; text-align: center; }
.lb .lb-full { display: inline-flex; align-items: center; min-height: 44px; margin-left: auto; padding: .3rem .9rem; background: #1e130dcc; color: #fff; font-size: 1rem; text-decoration: none; }
.lb .lb-full:hover { color: #f3dcae; }
/* Switch compositions before their text and images become cramped. */
@media (max-width: 60rem) {
  .journal-entry { --date-inset: max(0px, calc(4.125rem - var(--content-inset))); grid-template-columns: calc(64px + var(--date-inset)) minmax(0, 1fr); gap: 1rem 1.5rem; }
  .journal-entry > .photo-stack { grid-column: 2; width: 100%; margin-top: .5rem; }
  .entry-text { max-width: 65ch; }
  .date-plaque { width: 64px; --date-letter-x: .45rem; --date-letter-y: -.1rem; }
  .plaque-teal { --date-letter-x: .7rem; --date-letter-y: 0px; }
  .plaque-rust { --date-letter-x: .8rem; --date-letter-y: 0px; }
  /* Match the lettering to the smaller wooden plaque. */
  .date-day { font-size: 1.9rem; }
  .date-month { font-size: .875rem; margin-block: .1rem; }
  .date-year { font-size: .8rem; }
  .date-plaque::before { left: -35px; width: 110px; height: 190px; top: -16px; }
  .hero-note { padding: 1.5rem 2rem 1.5rem 1.5rem; }
}
@media (max-width: 52rem) {
  header.site { gap: .5rem 1.5rem; padding-block: .8rem .6rem; }
  header.site nav { justify-content: center; width: 100%; gap: clamp(.8rem, 5vw, 2.5rem); }
  .hero-inner { grid-template-columns: minmax(0, 1fr); min-height: 0; padding-top: clamp(13.5rem, calc(55vw - 2.5rem), 23.5rem); padding-bottom: 2rem; }
  .journal-hero .hero-photos .photo-count { top: 1rem; bottom: auto; }
  .journal-hero .hero-photos .photo-mount img { object-position: 65% center; }
  .hero-note { margin: 0; padding: 1.5rem 1.75rem; transform: none; }
  .hero-note h1 { font-size: clamp(1.8rem, 5vw, 2.6rem); }
  .hero-note p { max-width: 60ch; }
  .hero-photos { margin: 0; }
  .hero-photos::after { background: linear-gradient(0deg, #17201266, transparent 65%); }
  .hero-photos .photo-mount { transform: none; }
  .list-hero .hero-inner { min-height: 26rem; align-items: start; padding-top: 1.5rem; padding-bottom: 12rem; }
  .journal-heading { gap: .75rem; }
  .journal-heading .page-title { font-size: 2rem; }
}
@media (max-width: 36rem) {
  header.site { --corner-size: 2.5rem; grid-template-columns: minmax(0, 1fr); padding-inline: var(--gutter); }
  header.site .brand { grid-column: 1; grid-row: 1; justify-self: center; }
  header.site nav { grid-column: 1; grid-row: 2; }
  .header-search { grid-column: 1; grid-row: 3; max-width: none; }
  .header-search button { min-height: 44px; flex-basis: 44px; }
  :root { --gutter: 1.25rem; }
  /* Six entries fill a 375px row; on narrower phones they wrap to two rows rather than run off. */
  header.site nav { font-size: 1.1rem; gap: 0 .5rem; flex-wrap: wrap; justify-content: space-evenly; }
  .brand { font-size: 2rem; }
  .brand-sun { width: 30px; height: 30px; }
  .hero-note { padding: 1.3rem 1.25rem 1.5rem; }
  .hero-note h1 { font-size: 1.8rem; }
  .journal-entry { --date-inset: 0px; grid-template-columns: minmax(0, 1fr); gap: .8rem; padding-block: 1.75rem 2rem; }
  .journal-entry > .photo-stack { grid-column: 1; }
  .date-plaque { --date-letter-x: 0px; --date-letter-y: 0px; flex-direction: row; justify-content: flex-start; gap: .4rem; width: auto; min-height: 0; padding: 0; transform: none; text-shadow: none; color: var(--dim); font: 1.15rem/1.5 var(--hand); }
  .date-plaque::before { display: none; }
  .date-day, .date-month, .date-year { font: inherit; letter-spacing: .04em; margin: 0; transform: none; }
  .entry-text h2 { font-size: 1.65rem; }
  .photo-stack { gap: .6rem; }
  .stack-layout-1[data-preview-count="3"] { grid-template-columns: 1fr 1fr; }
  .stack-layout-1[data-preview-count="3"] .photo-mount:first-child { grid-column: 1 / -1; grid-row: auto; }
  .stack-layout-1[data-preview-count="3"] .photo-mount:first-child img { aspect-ratio: 3 / 2; }
  .stack-layout-1[data-preview-count="3"] .photo-mount:nth-child(2), .stack-layout-1[data-preview-count="3"] .photo-mount:nth-child(3) { grid-column: auto; margin: 0; }
  .photo-count { right: .6rem; bottom: .9rem; }
  .year-tabs { gap: .35rem; }
  .year-tabs a { min-height: 44px; display: inline-flex; align-items: center; }
  .post h1 { font-size: 2rem; }
  .post .body { font-size: 1.3rem; line-height: 1.7; }
  .archive-volumes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 1rem; }
  .archive-volume { max-width: 7rem; }
  .archive-year { min-width: 5.5rem; font-size: 1.55rem; }
  .post.list-body { padding-top: 2.75rem; }
  .list-body a[data-list-icon] { grid-template-columns: 2.5rem minmax(0, 1fr); gap: .6rem; }
  .list-body .list-symbol { width: 2.5rem; height: 2.5rem; }
  .tagcloud { gap: .1rem .8rem; }
  .cloud-w5 { font-size: 2rem; }
  .cloud-w6 { font-size: 2.4rem; }
  ul.gallery { grid-template-columns: repeat(auto-fill, minmax(min(100%, 8rem), 1fr)); }
  .tribe-emblem { width: 56px; }
  .footer-inner { gap: 1rem; }
}