/* ==========================================================================
   Unseen Roots page template: a twisted vine down a linen ground with photo
   and writing "leaves" hanging from it, newest first. Ported from the
   standalone Unseen Roots site. Everything is scoped under .ur / .ur-* so it
   cannot disturb the rest of the theme.
   ========================================================================== */
.ur {
  --linen: #e6e3db;
  --ink: #2b2018;
  --vine: #5a3a21;
  --muted: #6e5d4b;
  --paper: #f7f3ea;
  --ur-font: "Newsreader", Georgia, "Times New Roman", serif;
  --ur-mono: "Spline Sans Mono", ui-monospace, Menlo, Consolas, monospace;
  color: var(--ink);
  font-family: var(--ur-font);
  line-height: 1.4;
  padding: 0 max(16px, env(safe-area-inset-right, 0px)) 6rem max(16px, env(safe-area-inset-left, 0px));
}
.ur *, .ur *::before, .ur *::after { box-sizing: border-box; }
:where(.ur button) { font: inherit; color: inherit; }
/* header sits on a light page here, so give it a solid dark ground */
.fh-unseen-roots .fh-header { background: var(--midnight); }
/* the theme's page grain would muddy the linen */
.fh-unseen-roots body::before, body.fh-unseen-roots::before { display: none; }

/* Layout: a twisted brown vine runs down the middle of a linen ground; photo and writing leaves hang from it on curved stems, alternating sides, newest first. Phones move the vine to the left edge. */

/* Linen ground: crossed fine threads plus slubby noise, fixed behind everything */
.ur-backdrop {
  position: fixed; inset: 0; z-index: -1; background-color: var(--linen);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='360'%3E%3Cfilter id='w' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9 0.022' numOctaves='2' seed='4' stitchTiles='stitch' result='a'/%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.022 0.9' numOctaves='2' seed='11' stitchTiles='stitch' result='b'/%3E%3CfeBlend in='a' in2='b' mode='multiply'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.36 0 0 0 0 0.31 0 0 0 0 0.25 -2.2 -2.2 0 0 1.55'/%3E%3C/filter%3E%3Crect width='360' height='360' filter='url(%23w)' opacity='.55'/%3E%3C/svg%3E"),
    repeating-linear-gradient(0deg, rgba(90,70,45,.05) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.22) 0 1px, transparent 1px 3px),
    radial-gradient(120% 90% at 50% 20%, rgba(255,255,255,.35), transparent 70%);
}

/* Header */
.ur .ur-top { max-width: 70rem; margin: 0 auto; padding-block: 3.5rem 2.5rem; text-align: center; }
.ur .ur-top h1 { font-size: clamp(2.2rem, 6vw, 3.8rem); font-weight: 400; font-style: italic; letter-spacing: .01em; margin: 0; text-wrap: balance; color: var(--vine); }
.ur .ur-top p { font-family: var(--ur-mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: .9rem 0 0; }

/* The vine (drawn by script into this svg) */
.ur-tree { position: relative; max-width: 70rem; margin: 0 auto; padding-block: 1rem 3rem; }
.ur-vine { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; }

.ur-row { display: grid; grid-template-columns: 1fr 1fr; margin-top: var(--drop, 0); position: relative; }
.ur-row + .ur-row { margin-top: calc(var(--drop, 0px) - 4.5rem); }
.ur-row.mark + .ur-row { margin-top: 1rem; }
.ur-row.mark { margin-top: 2.5rem; margin-bottom: .5rem; }
.ur-year { grid-column: 1 / -1; justify-self: center; font-family: var(--ur-mono); font-size: .8rem; letter-spacing: .18em; color: var(--vine); background: var(--linen); border: 1px solid var(--vine); border-radius: 999px; padding: .35rem .9rem; position: relative; z-index: 1; }

/* Leaves */
.ur-leaf { position: relative; z-index: 1; display: block; width: calc(var(--w, 290px) * var(--s, 1)); max-width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; transform-origin: var(--origin); animation: sway var(--dur, 7s) ease-in-out var(--delay, 0s) infinite alternate; }
.ur-leaf:focus-visible { outline: 2px solid var(--vine); outline-offset: 6px; }
.ur-row.l .ur-leaf { grid-column: 1; justify-self: end; margin-right: 64px; --origin: 100% 0; --tilt: calc(var(--t, 3) * 1deg); border-radius: 60% 0 60% 0; }
.ur-row.r .ur-leaf { grid-column: 2; justify-self: start; margin-left: 64px; --origin: 0 0; --tilt: calc(var(--t, 3) * -1deg); border-radius: 0 60% 0 60%; }

.ur-leaf .ur-shape { display: block; overflow: hidden; border-radius: inherit; box-shadow: 0 14px 22px -12px #3a2a1a88, 0 2px 4px #3a2a1a33; transition: transform .35s ease, box-shadow .35s ease; }
.ur-leaf:hover .ur-shape { transform: translateY(3px) scale(1.02); box-shadow: 0 20px 28px -12px #3a2a1aaa, 0 2px 4px #3a2a1a44; }
.ur-leaf img { display: block; width: 100%; aspect-ratio: var(--ar, 1.5); object-fit: cover; background: #cfc9bc; }
.ur-leaf .ur-when { display: block; font-family: var(--ur-mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-top: .8rem; }
.ur-row.l .ur-when { text-align: right; }

.ur-row.l .ur-leaf.note { border-radius: 34% 0 34% 0; }
.ur-row.r .ur-leaf.note { border-radius: 0 34% 0 34%; }
.ur-leaf.note .ur-shape { background: var(--paper); color: var(--ink); padding: 2.6rem 2.6rem 2.8rem; border: 1px solid #d6cdb8; }
.ur .ur-leaf.note h3 { font-size: 1.35rem; font-weight: 500; line-height: 1.2; margin: 0 0 .6rem; text-wrap: balance; }
.ur .ur-leaf.note p { margin: 0; font-size: 1rem; line-height: 1.45; font-style: italic; color: #52483a; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.ur-leaf.note .ur-kind { font-family: var(--ur-mono); font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); display: block; margin-bottom: .8rem; }

@keyframes sway { from { transform: rotate(calc(var(--tilt) - 1.1deg)); } to { transform: rotate(calc(var(--tilt) + 1.1deg)); } }
/* A leaf stays folded at its stem until the growing vine reaches it, then unfurls from that stem with a small overshoot. */
.ur-leaf { opacity: 0; scale: .35; transition: opacity .7s ease-out, scale 1.2s cubic-bezier(.34, 1.45, .5, 1); }
.ur-leaf.is-in { opacity: 1; scale: 1; }

.ur-end { text-align: center; font-family: var(--ur-mono); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); padding-top: 2rem; min-height: 4rem; }
.ur-end span { background: var(--linen); padding: .4rem .9rem; position: relative; border: 1px solid var(--vine); border-radius: 999px; color: var(--vine); }

/* Reader */
.ur-reader { position: fixed; inset: 0; z-index: 9500; display: none; align-items: center; justify-content: center; background: #1a130cdd; backdrop-filter: blur(6px); padding: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); }
.ur-reader.open { display: flex; }
.ur-sheet { max-width: 44rem; width: 100%; max-height: 100%; overflow: auto; position: relative; }
.ur .ur-sheet.is-photo img { display: block; max-width: 100%; max-height: 78vh; margin: 0 auto; border-radius: 4px; }
.ur-sheet.is-note { background: var(--paper); color: var(--ink); padding: 3rem clamp(1.4rem, 5vw, 3.2rem); border-radius: 4px; }
.ur .ur-sheet h2 { font-size: clamp(1.5rem, 4vw, 2.1rem); font-weight: 500; margin: 0 0 .4rem; text-wrap: balance; }
.ur-sheet .ur-when { font-family: var(--ur-mono); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; opacity: .7; display: block; margin-bottom: 1.4rem; }
.ur .ur-sheet.is-photo h2, .ur .ur-sheet.is-photo .ur-when { text-align: center; color: #efe8d8; margin-top: 1rem; margin-bottom: 0; }
.ur .ur-sheet p { font-size: 1.15rem; line-height: 1.6; margin: 0 0 1rem; max-width: 65ch; }
.ur-close { position: fixed; top: calc(env(safe-area-inset-top, 0px) + 12px); right: max(16px, env(safe-area-inset-right, 0px)); z-index: 9501; background: none; border: 1px solid #efe8d8; color: #efe8d8; font-family: var(--ur-mono); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; padding: .55rem .9rem; cursor: pointer; }
.ur-close:focus-visible { outline: 2px solid #efe8d8; outline-offset: 3px; }

/* Phone: vine moves to the left edge */
@media (max-width: 640px) {
  .ur-row { grid-template-columns: minmax(0, 1fr); }
  .ur-row + .ur-row { margin-top: 2.2rem; }
  .ur-row.l .ur-leaf, .ur-row.r .ur-leaf { grid-column: 1; justify-self: start; margin-left: 52px; margin-right: 0; --origin: 0 0; --tilt: calc(var(--t, 3) * -.6deg); border-radius: 0 60% 0 60%; }
  .ur-row.l .ur-leaf { --w: 230px; }
  .ur-row .ur-leaf { max-width: calc(100% - 52px); }
  .ur-row.l .ur-leaf.note, .ur-row.r .ur-leaf.note { border-radius: 0 34% 0 34%; }
  .ur-row.l .ur-when { text-align: left; }
  .ur-year { justify-self: start; margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) { .ur-leaf { animation: none; transform: rotate(var(--tilt)); opacity: 1; scale: 1; transition: none; } html { scroll-behavior: auto; } }