/* Oliver Carter homepage v4.
   Bottom tile artwork fills an exact square. Labels overlay the art instead
   of consuming a strip of its height, preventing the old side letterboxing.
   The complete original image files remain unmodified. */
:root {
  color-scheme: light;
  --paper: #faf8f2;
  --ink: #252722;
  --muted: #716f64;
  --line: #dcd7ca;
  --card: #fffdf8;
  --mat: #eeeae1;
  --shadow: 0 3px 12px #4c473c0b;
  --gap: 30px;
  --serif: 'Baskerville', 'Palatino Linotype', 'Book Antiqua', Palatino, Georgia, serif;
}
:root[data-theme="dark"] { color-scheme: dark; --paper:#1d2421; --ink:#eeeae0; --muted:#bab8aa; --line:#424b43; --card:#252d28; --mat:#18211b; --shadow:none; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--serif); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, [tabindex]:focus-visible { outline: 2px solid #8e6a40; outline-offset: 5px; }
button svg, .theme-toggle svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.sr-only { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.js-only { display:none !important; }
.js-ready .js-only { display:flex !important; }
.skip-link { position:fixed; left:18px; top:-100px; z-index:100; padding:12px 20px; background:var(--card); border:1px solid var(--ink); }
.skip-link:focus { top:18px; }
.site { width: min(1280px, calc(100% - 112px)); margin:0 auto; padding:32px 0 0; }
.masthead { display:flex; align-items:center; justify-content:space-between; gap:28px; padding:0 0 29px; }
.wordmark { font-size:clamp(46px, 5.4vw, 76px); font-weight:400; letter-spacing:-3.5px; line-height:1.12; margin:0; }
.top-nav { display:flex; align-items:center; gap:30px; }
.top-nav a { font-family:Georgia,serif; font-size:12px; letter-spacing:2px; text-transform:uppercase; padding:10px 0; }
.top-nav a[aria-current="page"] { border-bottom:1px solid var(--ink); }
.top-nav a:hover { color:var(--muted); }
.theme-toggle { align-items:center; justify-content:center; background:transparent; border:1px solid var(--line); width:35px; height:35px; border-radius:50%; }
.theme-toggle svg { width:17px; height:17px; }
.theme-toggle .sun { display:none; }
[data-theme="dark"] .theme-toggle .moon { display:none; }
[data-theme="dark"] .theme-toggle .sun { display:block; }
.upper-grid { display:grid; grid-template-columns:218px minmax(0,1fr) 218px; grid-template-areas:'left hero right'; gap:var(--gap); align-items:stretch; }
.side-column { display:grid; grid-template-rows:1fr 1fr; gap:var(--gap); min-width:0; min-height:0; }
.left-column { grid-area:left; scroll-margin-top:24px; }
.right-column { grid-area:right; }
.right-lower-stack { display:grid; grid-template-rows:repeat(2,minmax(0,1fr)); gap:16px; min-width:0; min-height:0; }
.gallery { grid-area:hero; min-width:0; align-self:start; position:relative; }
.photo-frame { position:relative; aspect-ratio:4/3; background:var(--mat); border:1px solid var(--line); border-radius:3px; padding:7px; box-shadow:var(--shadow); touch-action:pan-y; }
.slide-stage { position:relative; width:100%; height:100%; overflow:hidden; }
.slide { position:absolute; inset:0; margin:0; opacity:0; visibility:hidden; transition:opacity 800ms ease, visibility 800ms ease; }
.slide.is-active { opacity:1; visibility:visible; }
.slide img { display:block; width:100%; height:100%; object-fit:contain; }
.gallery .slide { display:flex; align-items:center; justify-content:center; }
.gallery .slide img { max-width:var(--native-width,100%); }
.gallery-arrow { position:absolute; top:50%; transform:translateY(-50%); width:37px; height:37px; border:1px solid #ffffff73; border-radius:50%; color:white; background:#151a1961; align-items:center; justify-content:center; opacity:0.9; }
.gallery-arrow:hover { background:#151a199e; }
.gallery-arrow.previous { left:19px; }
.gallery-arrow.next { right:19px; }
.gallery-arrow svg { width:22px; height:22px; }
.gallery-controls { display:flex; align-items:center; justify-content:space-between; gap:12px; height:38px; padding:4px 2px 0; color:var(--muted); }
.photo-count { font:10px/1 Arial,sans-serif; letter-spacing:1.3px; font-variant-numeric:tabular-nums; width:64px; }
.count-divider { margin:0 8px; opacity:.5; }
.dots { display:flex; align-items:center; justify-content:center; gap:0; }
.dot { display:flex; align-items:center; justify-content:center; background:transparent; border:0; width:24px; height:30px; padding:0; }
.dot:after { content:''; width:5px; height:5px; border-radius:50%; background:currentColor; opacity:.27; transition:opacity 150ms ease; }
.dot[aria-current="true"]:after { opacity:1; }
.dot:hover:after { opacity:.8; }
.gallery-buttons { width:64px; justify-content:flex-end; }
.icon-button { background:transparent; border:0; width:32px; height:30px; display:flex; align-items:center; justify-content:center; padding:4px; }
.icon-button svg { width:17px; height:17px; }
.play-icon { display:none; }
.is-paused .pause-icon { display:none; }
.is-paused .play-icon { display:block; }
.load-message:empty { display:none; }
.load-message, .no-script { font:12px/1.5 Arial,sans-serif; color:var(--muted); margin:6px 0; }
.tile { position:relative; display:block; min-width:0; min-height:0; overflow:hidden; background:var(--card); border:1px solid var(--line); border-radius:3px; box-shadow:var(--shadow); }
a.tile { transition:box-shadow 180ms ease, border-color 180ms ease; }
a.tile:hover { border-color:#b8a788; box-shadow:0 5px 17px #3e352d18; }
.tile > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.tile-label { position:absolute; left:0; bottom:0; width:100%; padding:45px 17px 17px; color:#fffdf5; background:linear-gradient(transparent,#171b1582 45%,#171b15c7); font-size:27px; line-height:1.05; font-weight:400; text-shadow:0 1px 5px #0004; }
.label-rule { display:block; height:1px; width:30px; margin-top:11px; background:currentColor; opacity:.8; }
.tile-church > img { object-position:35% 50%; }
.tile-river > img { object-position:55% 50%; }
.tile-river .tile-label { font-size:22px; line-height:1.12; padding:28px 14px 12px; }
.tile-river .label-rule { margin-top:8px; }
.tile-youtube { display:flex; align-items:center; justify-content:center; gap:12px; padding:14px 12px; background:var(--card); }
.youtube-play { flex:0 0 42px; width:42px; height:32px; }
.youtube-copy { display:block; min-width:0; }
.youtube-title { display:block; font-size:24px; line-height:1.1; }
.youtube-handle { display:block; margin-top:7px; font:11px/1.2 Arial,sans-serif; letter-spacing:.25px; color:var(--muted); }
.tile-firm { background:var(--paper); border-color:transparent; box-shadow:none; }
.tile-firm > img { object-fit:contain; padding:4px 8px; }
.tile-firm:hover { background:var(--card); }
.tile-plaque { background:var(--mat); }
.plaque-link { position:absolute; inset:0; display:flex; flex-direction:column; }
.plaque-stage { display:block; position:relative; flex:1; min-height:0; margin:6px 6px 0; }
.plaque-stage .slide { display:block; }
.plaque-stage .slide img { object-fit:contain; }
.plaque-title { display:flex; justify-content:space-between; align-items:center; gap:7px; min-height:40px; padding:7px 11px 9px; background:var(--card); font-size:18px; line-height:1.15; }
.plaque-title > span { font-family:Arial,sans-serif; font-size:16px; color:var(--muted); }
.plaque-controls { position:absolute; right:9px; top:9px; display:flex; align-items:center; gap:2px; padding:0 3px; background:#101511bf; border:1px solid #ffffff5c; border-radius:20px; color:white; z-index:2; }
.plaque-controls .dot { width:20px; height:27px; }
.plaque-controls .icon-button { width:27px; height:27px; }
.plaque-controls .icon-button svg { width:13px; height:13px; }
.plaque-controls .dot:after { width:4px; height:4px; }
.plaque-controls .dot[aria-current="false"]:after { opacity:.5; }
.bottom-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--gap); margin-top:var(--gap); }
.bottom-grid { align-items:start; }
.bottom-grid > .tile { width:100%; height:auto; aspect-ratio:1 / 1; align-self:start; }
.music-tile { display:block; }
.album-media { display:block; position:absolute; inset:0; }
.album-media img { display:block; position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.bottom-title { position:absolute; left:0; right:0; bottom:0; display:flex; align-items:flex-end; justify-content:space-between; gap:8px; padding:40px 14px 13px; min-height:70px; color:#fffdf5; background:linear-gradient(transparent, #111713a6 42%, #111713eb); font-size:23px; line-height:1.08; text-shadow:0 1px 4px #0009; }
.bottom-title > span[aria-hidden="true"] { font-family:Arial,sans-serif; color:#fffdf5; font-size:14px; }
.image-credit { display:block; font:9px/1.3 Arial,sans-serif; color:#f0eee6; letter-spacing:.1px; margin-top:5px; }
.tile-panicle > img { object-position:60% 70%; }
.tile-panicle .tile-label { padding:40px 19px 17px; font-size:29px; }
.footer { display:flex; justify-content:space-between; gap:18px; padding:26px 0 28px; color:var(--muted); font-family:Arial,sans-serif; font-size:10px; letter-spacing:.8px; }
@media (min-width:1600px) { .site { padding-top:42px; } .masthead { padding-bottom:36px; } }
@media (max-width:1200px) and (min-width:1001px) {
  :root { --gap:22px; }
  .site { width:calc(100% - 72px); }
  .upper-grid { grid-template-columns:185px minmax(0,1fr) 185px; }
  .tile-label { font-size:24px; padding:30px 13px 14px; }
  .tile-river .tile-label { font-size:20px; }
  .plaque-title { font-size:16px; padding:7px 9px; }
  .bottom-title { font-size:20px; }
}
@media (max-width:1000px) {
  :root { --gap:20px; }
  .site { width:calc(100% - 48px); padding-top:25px; }
  .masthead { padding-bottom:24px; }
  .wordmark { font-size:56px; letter-spacing:-2.5px; }
  .top-nav { gap:19px; }
  .top-nav a { font-size:10px; letter-spacing:1.6px; }
  .upper-grid { grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-areas:'hero hero' 'left right'; }
  .gallery { width:100%; }
  .side-column { grid-template-rows:repeat(2,270px); }
  .tile-church > img { object-position:40% 50%; }
  .tile-river .tile-label { font-size:27px; }
  .tile-firm { border-color:var(--line); }
  .plaque-title { font-size:21px; }
  .bottom-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .bottom-title { font-size:25px; }
}
@media (max-width:560px) {
  :root { --gap:16px; }
  .site { width:calc(100% - 36px); padding-top:23px; }
  .masthead { gap:10px; padding-bottom:22px; }
  .wordmark { font-size:42px; letter-spacing:-2px; white-space:nowrap; }
  .top-nav { gap:0; }
  .top-nav a { display:none; }
  .theme-toggle { width:30px; height:30px; }
  .photo-frame { padding:4px; }
  .gallery-controls { height:36px; }
  .photo-count { font-size:9px; width:51px; }
  .gallery-buttons { width:51px; }
  .gallery-controls .dot { width:21px; }
  .gallery-arrow { width:30px; height:30px; }
  .gallery-arrow.previous { left:12px; }
  .gallery-arrow.next { right:12px; }
  .gallery-arrow svg { width:18px; height:18px; }
  .side-column { grid-template-rows:repeat(2,222px); }
  .tile-label { font-size:23px; padding:32px 11px 12px; }
  .tile-river .tile-label { font-size:19px; padding:24px 10px 10px; }
  .right-lower-stack { gap:12px; }
  .tile-youtube { gap:9px; padding:10px 8px; }
  .youtube-play { flex-basis:32px; width:32px; height:25px; }
  .youtube-title { font-size:21px; }
  .youtube-handle { font-size:10px; margin-top:5px; }
  .tile-firm > img { padding:7px; }
  .plaque-title { font-size:16px; min-height:45px; padding:6px 8px; }
  .plaque-controls { top:7px; right:7px; }
  .plaque-controls .dot { width:17px; }
  .bottom-title { font-size:19px; padding:30px 10px 10px; min-height:60px; }
  .bottom-title > span[aria-hidden="true"] { display:none; }
  .image-credit { font-size:8px; line-height:1.3; }
  .tile-panicle .tile-label { font-size:25px; padding:32px 12px 14px; }
  .footer { font-size:9px; padding-top:23px; letter-spacing:.3px; }
}
@media (max-width:359px) {
  .site { width:calc(100% - 28px); }
  .wordmark { font-size:37px; }
  .bottom-title { font-size:17px; }
  .tile-youtube { gap:7px; padding:8px 6px; }
  .youtube-play { flex-basis:27px; width:27px; height:23px; }
  .youtube-title { font-size:18px; }
  .youtube-handle { font-size:9px; }
  .tile-river .tile-label { font-size:18px; }
  .image-credit { font-size:7.5px; }
  .side-column { grid-template-rows:repeat(2,211px); }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *, *:before, *:after { transition:none !important; }
}
@media (forced-colors:active) {
  .tile, .photo-frame, .icon-button, .gallery-arrow, .theme-toggle { border:1px solid CanvasText; }
}