/* ============================================================
   CASA MAÑANA GUEST GUIDE — STYLES
   Roatán Insider design system: flat, restrained, pink + mint
   ============================================================ */

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

:root {
  --pink: #A8442F;
  --mint: #4A7B9D;
  --charcoal: #2D2D2D;
  --near-black: #1A1A1A;
  --white: #FFFFFF;
  --off-white: #F8F8F8;
  --medium-gray: #666666;
  --light-gray: #999999;
  --whatsapp: #25D366;
  --tab-height: 78px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-top: env(safe-area-inset-top, 0px);
}

html { -webkit-font-smoothing: antialiased; }

/* Display serif — same Fraunces as the website, headline moments only */
@font-face {
  font-family: 'DemoSerif';
  src: url('/fonts/lora-latin-600-normal.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

html, body { height: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--near-black);
  color: var(--charcoal);
  line-height: 1.5;
  letter-spacing: -0.01em;
  position: fixed;
  inset: 0;
  width: 100%;
  overflow: hidden;
}
#app {
  position: absolute;
  top: 0; left: 0; right: 0;
  bottom: calc(var(--tab-height) + var(--safe-bottom));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  background: var(--white);
}

a { color: var(--pink); text-decoration: none; }
img { max-width: 100%; display: block; }
button { font: inherit; border: none; background: none; cursor: pointer; color: inherit; }

svg.ic { width: 20px; height: 20px; stroke: currentColor; stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }

/* ===== SCREENS ===== */
.screen { display: none; animation: screenIn 0.25s ease; }
.screen.active { display: block; }
@keyframes screenIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .screen { animation: none; }
}

/* ===== HERO (Home) ===== */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--near-black);
  padding: calc(64px + var(--safe-top)) 20px 36px;
  text-align: center;
  color: var(--white);
}
.hero-bg { position: absolute; inset: 0; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; transform-origin: 62% 38%; animation: kenburns 20s ease-in-out infinite alternate; }
.hero-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(26,26,26,0.5), rgba(26,26,26,0.78)); }
.hero-in { position: relative; z-index: 1; }
@keyframes kenburns { from { transform: scale(1.02) translate3d(0, 0, 0); } to { transform: scale(1.22) translate3d(-2.5%, 2%, 0); } }
.hero img.logo { height: 92px; width: auto; margin: 0 auto 22px; }
.hero .greeting { font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mint); margin-bottom: 10px; }
.hero h1 { font-family: 'DemoSerif', Georgia, serif; font-size: 40px; font-weight: 600; letter-spacing: 0; line-height: 1.08; margin-bottom: 10px; }
.hero p { font-size: 16px; color: rgba(255,255,255,0.85); max-width: 320px; margin: 0 auto; }

/* ===== SECTIONS ===== */
.section { padding: 42px 20px 10px; }
.section.dark { background: var(--charcoal); color: var(--white); padding-bottom: 36px; margin-top: 28px; }
.section.black { background: var(--near-black); color: var(--white); padding-bottom: 36px; margin-top: 28px; }
.section:last-child { padding-bottom: 40px; }
.inner { max-width: 430px; margin: 0 auto; }

.headline { font-family: 'DemoSerif', Georgia, serif; font-size: 30px; font-weight: 600; letter-spacing: 0; line-height: 1.12; margin-bottom: 6px; }
.sub { font-size: 15.5px; color: #666; line-height: 1.55; margin-bottom: 22px; }
.dark .sub, .black .sub { color: rgba(255,255,255,0.72); }
.eyebrow { font-size: 11px; font-weight: 700; color: #9A9A97; text-transform: uppercase; letter-spacing: 0.16em; margin: 30px 0 12px; }
.dark .eyebrow { color: var(--light-gray); }

/* ===== CARDS ===== */
.card { background: transparent; border: 0; border-top: 1px solid #E4E4E2; border-radius: 0; overflow: visible; margin-bottom: 26px; }
.dark .card, .black .card { background: transparent; border-top-color: rgba(255,255,255,0.16); }

.row { display: flex; align-items: flex-start; gap: 14px; padding: 16px 0; min-height: 52px; }
.row + .row { border-top: 1px solid #ECECEA; }
.dark .row + .row, .black .row + .row { border-top-color: rgba(255,255,255,0.14); }
.row .med {
  width: 24px; height: 24px; border-radius: 50%; color: #8A8A87;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  background: none;
  margin-top: 1px;
}
.row .med.pink, .row .med.green { width: 34px; height: 34px; color: var(--white); }
.row .med svg.ic { width: 20px; height: 20px; } .row .med.pink svg.ic, .row .med.green svg.ic { width: 18px; height: 18px; }
.med.mint { background: none; color: #8A8A87; }
.med.pink { background: var(--pink); }
.med.dark { background: none; color: #8A8A87; }
.dark .med.dark, .black .med.dark, .dark .med.mint, .black .med.mint { background: none; color: rgba(255,255,255,0.6); }
.med.green { background: var(--whatsapp); }
.row .grow { flex: 1; min-width: 0; }
.row .t { font-size: 16px; font-weight: 600; line-height: 1.3; }
.row .d { font-size: 14.5px; color: #666; margin-top: 2px; line-height: 1.5; }
.dark .row .d, .black .row .d { color: rgba(255,255,255,0.72); }
.row .v { font-size: 15px; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.row .v.mint { color: var(--charcoal); }
a.row { color: inherit; }

/* ===== WIFI CARD + COPY CHIP ===== */
.wifi { background: var(--near-black); border-radius: 16px; padding: 26px 20px; text-align: center; color: var(--white); margin-bottom: 14px; }
.wifi .wic { color: var(--mint); margin-bottom: 8px; }
.wifi .wic svg.ic { width: 34px; height: 34px; margin: 0 auto; }
.wifi .lab { font-size: 11px; text-transform: uppercase; letter-spacing: 1.4px; color: var(--light-gray); margin-bottom: 3px; }
.wifi .val { font-size: 24px; font-weight: 800; letter-spacing: -0.3px; margin-bottom: 14px; }
.copy-chip {
  display: inline-flex; align-items: center; gap: 8px;
  background: #fff; color: var(--charcoal);
  font-size: 20px; font-weight: 800; letter-spacing: 0.4px;
  padding: 10px 18px; border-radius: 12px; margin-bottom: 14px;
}
.copy-chip svg.ic { width: 17px; height: 17px; }
.copy-chip:active { transform: scale(0.97); }
.wifi .spd { font-size: 13px; color: var(--mint); font-weight: 500; }

/* ===== QUICK GRID ===== */
.qgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 26px; margin-bottom: 8px; }
.qitem { background: none; border: 0; border-top: 1px solid #E4E4E2; border-radius: 0; padding: 14px 0 12px; text-align: left; color: inherit; }
.qitem svg.ic { width: 18px; height: 18px; color: #8A8A87; margin: 0 0 8px; }
.qitem .ql { font-size: 10.5px; color: #9A9A97; text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 3px; }
.qitem .qv { font-family: 'DemoSerif', Georgia, serif; font-size: 21px; font-weight: 600; }
.qitem .qv.mint { color: var(--charcoal); font-size: 17px; }

/* ===== TIMELINE ===== */
.timeline { position: relative; padding-left: 30px; margin: 6px 0 10px; }
.timeline::before { content: ""; position: absolute; left: 9px; top: 10px; bottom: 14px; width: 2px; background: rgba(0,0,0,0.08); }
.dark .timeline::before, .black .timeline::before { background: rgba(255,255,255,0.12); }
.tl-item { position: relative; padding-bottom: 22px; }
.tl-item:last-child { padding-bottom: 4px; }
.tl-dot {
  position: absolute; left: -30px; top: 3px;
  width: 20px; height: 20px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.tl-dot.mint { background: var(--mint); }
.tl-dot.pink { background: var(--pink); }
.tl-dot.dark { background: var(--charcoal); }
.dark .tl-dot.dark { background: rgba(255,255,255,0.2); }
.tl-dot svg.ic { width: 11px; height: 11px; color: var(--white); stroke-width: 2.6; }
.tl-time { font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.9px; color: var(--light-gray); margin-bottom: 2px; }
.tl-title { font-size: 16.5px; font-weight: 700; margin-bottom: 2px; }
.tl-detail { font-size: 14px; color: var(--medium-gray); line-height: 1.45; }
.dark .tl-detail { color: rgba(255,255,255,0.72); }

/* ===== MEDALLION RULE CARDS ===== */
.big-rule { display: flex; gap: 15px; align-items: flex-start; background: transparent; padding: 19px 0; border-top: 1px solid rgba(255,255,255,0.14); }
.big-rule:first-of-type { border-top: 0; }
.big-rule .med { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: none; color: rgba(255,255,255,0.65); margin-top: 1px; }
.big-rule .med.pink { width: 38px; height: 38px; background: var(--pink); color: #fff; }
.big-rule .med svg.ic { width: 22px; height: 22px; } .big-rule .med.pink svg.ic { width: 19px; height: 19px; }
.big-rule .t { font-size: 17px; font-weight: 700; margin-bottom: 4px; }
.big-rule .d { font-size: 14.5px; color: var(--medium-gray); line-height: 1.52; }
.dark .big-rule .d { color: rgba(255,255,255,0.75); }

/* ===== INSIDER TIP (quiet editorial aside) ===== */
.tip { border-top: 1px solid rgba(0,0,0,0.08); padding: 14px 2px 2px; margin: 18px 0; font-size: 14.5px; line-height: 1.5; color: var(--medium-gray); }
.tip strong { color: var(--charcoal); font-weight: 700; }
.dark .tip, .black .tip { color: rgba(255,255,255,0.72); border-top-color: rgba(255,255,255,0.16); }
.dark .tip strong, .black .tip strong { color: var(--white); }

/* ===== PLACES (expandable) ===== */
.place { border-top: 1px solid rgba(0,0,0,0.05); }
.place:first-child { border-top: none; }
.dark .place { border-top-color: rgba(255,255,255,0.07); }
.place-head { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 15px; text-align: left; }
.place-head .grow { flex: 1; }
.place-name { font-size: 16px; font-weight: 700; }
.place-tag { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; color: var(--mint); white-space: nowrap; }
.place-head .chev { color: var(--light-gray); transition: transform 0.2s; }
.place.open .chev { transform: rotate(180deg); }
.place-body { display: none; padding: 0 15px 14px; font-size: 14px; color: var(--medium-gray); line-height: 1.5; }
.dark .place-body { color: rgba(255,255,255,0.72); }
.place.open .place-body { display: block; }

/* ===== APP SHOWCASE ===== */
.app-head { display: flex; align-items: center; gap: 13px; margin: 16px 0; }
.app-head img.app-ic { width: 62px; height: 62px; border-radius: 14px; }
.app-head .an { font-size: 19px; font-weight: 800; letter-spacing: -0.3px; }
.app-head .as { font-size: 13.5px; color: var(--light-gray); }
.app-head .ab { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--mint); margin-top: 3px; }
.shots { display: flex; gap: 12px; justify-content: center; margin: 18px 0 6px; }
.shot { width: 150px; aspect-ratio: 1284/2778; border-radius: 18px; border: 3px solid rgba(255,255,255,0.18); overflow: hidden; background: var(--near-black); }
.shot img { width: 100%; height: 100%; object-fit: cover; }

/* ===== CHECKLIST ===== */
.check-item { display: flex; align-items: flex-start; gap: 12px; width: 100%; padding: 13px 15px; text-align: left; }
.check-item + .check-item { border-top: 1px solid rgba(0,0,0,0.05); }
.check-box {
  width: 24px; height: 24px; border-radius: 8px; border: 2px solid var(--light-gray);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px;
  transition: all 0.15s;
}
.check-box svg.ic { width: 14px; height: 14px; color: var(--white); stroke-width: 3.2; opacity: 0; }
.check-item.done .check-box { background: var(--mint); border-color: var(--mint); }
.check-item.done .check-box svg.ic { opacity: 1; }
.check-item .ct { flex: 1; font-size: 15px; font-weight: 500; line-height: 1.4; transition: opacity 0.15s; }
.check-item.done .ct { opacity: 0.45; text-decoration: line-through; }
.check-progress { font-size: 13px; font-weight: 700; color: var(--mint); margin: 4px 2px 10px; }

/* ===== FAQ ===== */
.faq-item { border-top: 1px solid rgba(0,0,0,0.05); }
.faq-item:first-child { border-top: none; }
.faq-q { display: flex; align-items: center; gap: 10px; width: 100%; padding: 14px 15px; text-align: left; font-size: 15px; font-weight: 600; }
.faq-q .grow { flex: 1; }
.faq-q .chev { color: var(--light-gray); transition: transform 0.2s; }
.faq-item.open .chev { transform: rotate(180deg); }
.faq-a { display: none; padding: 0 15px 14px; font-size: 14px; color: var(--medium-gray); line-height: 1.5; }
.dark .faq-a, .black .faq-a { color: rgba(255,255,255,0.82); }
.dark .faq-item, .black .faq-item { border-top-color: rgba(255,255,255,0.09); }
.faq-item.open .faq-a { display: block; }

/* ===== CTA ===== */
.cta { display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; height: 50px; border-radius: 980px; font-size: 16px; font-weight: 700; margin: 14px 0 0; color: var(--white); }
.cta.wa { background: var(--whatsapp); }
.cta.outline { background: transparent; border: 1px solid var(--mint); color: var(--mint); }

/* ===== HOSTS NOTE (quiet editorial aside) ===== */
.hosts { border-top: 1px solid rgba(0,0,0,0.08); padding: 16px 2px 2px; margin: 22px 0 8px; }
.hosts .ht { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.9px; color: var(--charcoal); margin-bottom: 6px; }
.dark .hosts, .black .hosts { border-top-color: rgba(255,255,255,0.16); }
.dark .hosts .ht, .black .hosts .ht { color: var(--white); }
.hosts p { font-size: 14.5px; line-height: 1.55; color: var(--medium-gray); }
.black .hosts p, .dark .hosts p { color: var(--light-gray); }

.footer { text-align: center; font-size: 12.5px; color: var(--light-gray); padding: 26px 20px 10px; }
.footer a { color: var(--mint); }

/* ===== TAB BAR ===== */
.tabbar {
  position: absolute; bottom: 0; left: 0; right: 0; z-index: 999;
  height: calc(var(--tab-height) + var(--safe-bottom));
  background: var(--near-black);
  display: flex; justify-content: space-around; align-items: flex-start;
  padding: 9px 0 var(--safe-bottom);
}
.tab { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 62px; padding: 4px 0; color: var(--medium-gray); font-size: 10px; font-weight: 600; transition: color 0.15s; }
.tab svg.ic { width: 23px; height: 23px; }
.tab.active { color: var(--pink); }

/* ===== MORPHING BITS =====
   Three places where a shape changes into another rather than being
   swapped for it. Spring-ish easing (the overshoot in the bezier) is what
   sells it. All of it is off under prefers-reduced-motion. */

/* Tab icons wash in a fill behind their strokes and spring once, on the way
   in. fill-opacity animates; fill:none -> fill:currentColor would not. */
.tab svg.ic {
  fill: currentColor; fill-opacity: 0;
  transition: fill-opacity 0.26s ease;
}
.tab.active svg.ic {
  fill-opacity: 0.18;
  animation: tabpop 0.42s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes tabpop {
  0%   { transform: scale(1); }
  38%  { transform: scale(1.22); }
  100% { transform: scale(1); }
}

/* Copy chip: the two rectangles shrink away as the tick draws itself in. */
.cc-ic { position: relative; display: inline-block; width: 17px; height: 17px; vertical-align: -3px; }
.cc-ic svg.ic {
  position: absolute; inset: 0; width: 17px; height: 17px;
  transition: transform 0.26s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.18s ease;
}
.cc-check {
  opacity: 0; transform: scale(0.55);
  stroke-dasharray: 24; stroke-dashoffset: 24;
}
.copied .cc-copy { opacity: 0; transform: scale(0.55) rotate(-12deg); }
.copied .cc-check {
  opacity: 1; transform: scale(1);
  stroke-dashoffset: 0;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
              opacity 0.14s ease,
              stroke-dashoffset 0.32s ease 0.06s;
}

@media (prefers-reduced-motion: reduce) {
  .tab.active svg.ic { animation: none; }
  .cc-ic svg.ic, .copied .cc-check { transition: opacity 0.12s ease; }
  .cc-check { stroke-dashoffset: 0; }
  .copied .cc-copy { transform: none; }
  .copied .cc-check { transform: none; }
}

/* ===== TOAST ===== */
.toast {
  position: fixed; left: 50%; bottom: calc(var(--tab-height) + var(--safe-bottom) + 16px);
  transform: translateX(-50%) translateY(8px);
  background: var(--charcoal); color: var(--white);
  font-size: 14px; font-weight: 600; padding: 10px 18px; border-radius: 12px;
  opacity: 0; pointer-events: none; transition: all 0.22s ease; z-index: 1000;
  box-shadow: 0 6px 24px rgba(0,0,0,0.25);
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ===== DESKTOP CAP ===== */
@media (min-width: 500px) {
  #app, .tabbar { max-width: 430px; left: 50%; right: auto; width: 100%; transform: translateX(-50%); }
  .toast { bottom: calc(var(--tab-height) + 16px); }
}
@media (max-width: 370px) {
  .hero h1 { font-size: 29px; }
  .hero img.logo { height: 140px; }
  .wifi .val, .copy-chip { font-size: 18px; }
}

/* ============================================================
   V2.1 — WEATHER, MOTION, INSTALL HINT
   ============================================================ */

/* ===== WEATHER CARD ===== */
.wx { background: #fff; border: 1px solid #E4E4E2; border-radius: 16px; padding: 17px 16px 14px; margin-bottom: 12px; }
.wx-top { display: flex; align-items: center; gap: 13px; }
.wx-ic { color: var(--mint); }
.wx-ic svg.ic { width: 40px; height: 40px; stroke-width: 1.6; }
.wx-temp { font-size: 38px; font-weight: 800; letter-spacing: -1.5px; line-height: 1; }
.wx-cond { font-size: 13.5px; color: var(--medium-gray); margin-top: 3px; }
.wx-loc { margin-left: auto; text-align: right; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: var(--light-gray); line-height: 1.5; }
.wx-chips { display: flex; gap: 8px; margin-top: 14px; }
.wx-chip { flex: 1; background: var(--white); border-radius: 12px; padding: 9px 4px; text-align: center; }
.wx-chip .l { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; color: var(--light-gray); margin-bottom: 2px; }
.wx-chip .v { font-size: 14.5px; font-weight: 700; }
.wx-days { display: flex; margin-top: 13px; border-top: 1px solid rgba(0,0,0,0.06); padding-top: 11px; }
.wx-day { flex: 1; text-align: center; }
.wx-day .n { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; color: var(--light-gray); margin-bottom: 4px; }
.wx-day svg.ic { width: 17px; height: 17px; color: var(--mint); margin: 0 auto 3px; }
.wx-day .t { font-size: 13px; font-weight: 700; }

/* ===== INSTALL HINT ===== */
.hint { display: flex; gap: 12px; align-items: flex-start; background: #fff; border: 1px solid #E4E4E2; border-radius: 16px; padding: 14px 14px 14px 16px; margin-bottom: 11px; }
.hint svg.ic { color: var(--mint); margin-top: 1px; }
.hint .grow { flex: 1; font-size: 13.5px; line-height: 1.45; color: var(--charcoal); }
.hint .grow strong { font-weight: 700; }
.hint .x { padding: 2px; color: var(--light-gray); }
.hint .x svg.ic { width: 16px; height: 16px; }

/* ===== ENTRANCE MOTION ===== */
.a-up { opacity: 0; transform: translateY(14px); animation: aup 0.55s cubic-bezier(0.2, 0.7, 0.3, 1) forwards; animation-delay: var(--d, 0ms); }
@keyframes aup { to { opacity: 1; transform: none; } }

/* ===== PRESS STATES ===== */
button, a.qitem, a.row, a.cta {
  transition: transform 0.12s ease;
}
button:active, a.qitem:active, a.row:active, a.cta:active { transform: scale(0.98); }
.copy-chip:active { transform: scale(0.96); }

/* ===== CHECKLIST DONE FLOURISH ===== */
.check-item.done .check-box { animation: pop 0.25s ease; }
@keyframes pop { 50% { transform: scale(1.18); } }

/* ===== REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce) {
  .hero-bg img { animation: none; }
  .a-up { animation-duration: 0.01s; }
  button, a.qitem, a.row, a.cta { transition: none; }
}

/* ===== DAY PLAN PARTS ===== */
.plan-part { display: flex; gap: 10px; padding: 5px 0; align-items: baseline; }
.pp-when { flex-shrink: 0; width: 68px; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.7px; color: var(--mint); }
.place-head .med { display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.place-head .med svg.ic { width: 16px; height: 16px; }

/* ===== DEBUG LOG (?debug only) ===== */
#dbglog {
  position: fixed; top: calc(8px + var(--safe-top)); left: 8px; right: 8px; z-index: 10000;
  background: rgba(0,0,0,0.85); color: var(--mint);
  font: 11px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace;
  padding: 8px 10px; border-radius: 10px;
  max-height: 32vh; overflow-y: auto; pointer-events: none;
}

/* demo: no live weather for a fictional location */
.wx { display: none; }


/* ── Loon Lake: relaxed and warm. Comfortable reading size, easy leading,
      unhurried spacing. Porch pace. ── */
#app, .section { background: #F7FAFA; }
.section.dark { background: #152430; }
.section.black { background: #0D1A23; }
.headline { font-size: 29px; line-height: 1.16; letter-spacing: -0.1px; }
.sub { font-size: 15.5px; line-height: 1.62; margin-bottom: 22px; }
.eyebrow { font-size: 11px; letter-spacing: 0.16em; margin: 32px 0 12px; }
.row { padding: 17px 0; }
.row .t { font-size: 16px; font-weight: 600; }
.row .d { font-size: 14.8px; line-height: 1.58; }
.section { padding: 46px 21px 12px; }


/* ===== PHOTOGRAPHY ===== */
.ph { position: relative; overflow: hidden; background: #E6E4E0; border-radius: 14px; }
.dark .ph, .black .ph { background: rgba(255,255,255,0.08); }
.ph img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; transition: opacity 0.55s ease; }
.ph img.on { opacity: 1; }
.ph.r43 { aspect-ratio: 4/3; }
.ph.r169 { aspect-ratio: 16/9; }
.ph.r11 { aspect-ratio: 1/1; }
.ph::after { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, rgba(255,255,255,0) 30%, rgba(255,255,255,0.35) 50%, rgba(255,255,255,0) 70%); transform: translateX(-100%); animation: shim 1.5s infinite; }
.ph.done::after { display: none; }
@keyframes shim { to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .ph::after { animation: none; display: none; } .ph img { transition: none; } }

/* photo row: image above a titled caption */
.prow { margin: 0 0 14px; }
.prow .ph { border-radius: 14px; cursor: zoom-in; }
.prow .pcap { display: flex; gap: 11px; align-items: flex-start; padding: 11px 2px 0; }
.prow .pt { font-size: 16px; font-weight: 600; line-height: 1.3; }
.prow .pd { font-size: 14px; color: var(--medium-gray); line-height: 1.5; margin-top: 2px; }
.dark .prow .pd, .black .prow .pd { color: rgba(255,255,255,0.72); }

/* strip: horizontal scroller */
.pstrip { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding-bottom: 4px; margin-bottom: 14px; scrollbar-width: none; }
.pstrip::-webkit-scrollbar { display: none; }
.pstrip .ph { flex: 0 0 76%; scroll-snap-align: start; cursor: zoom-in; }

/* lightbox */
#lbx { position: fixed; inset: 0; z-index: 3000; background: rgba(10,10,10,0.96); display: none; align-items: center; justify-content: center; }
#lbx.open { display: flex; }
#lbx img { max-width: 100%; max-height: 78vh; object-fit: contain; }
#lbx .lbcap { position: absolute; left: 0; right: 0; bottom: calc(28px + var(--safe-bottom)); text-align: center; color: rgba(255,255,255,0.9); font-size: 14px; padding: 0 30px; line-height: 1.5; }
#lbx .lbx-x { position: absolute; top: calc(14px + var(--safe-top)); right: 14px; width: 42px; height: 42px; border-radius: 50%; background: rgba(255,255,255,0.14); color: #fff; display: grid; place-items: center; }
#lbx .lbnav { position: absolute; top: 50%; transform: translateY(-50%); width: 46px; height: 46px; border-radius: 50%; background: rgba(255,255,255,0.12); color: #fff; display: grid; place-items: center; }
#lbx .lbprev { left: 10px; } #lbx .lbnext { right: 10px; }
#lbx .lbcount { position: absolute; top: calc(22px + var(--safe-top)); left: 18px; color: rgba(255,255,255,0.6); font-size: 13px; letter-spacing: 0.08em; }

svg.ic.rot90 { transform: rotate(90deg); }
svg.ic.rotm90 { transform: rotate(-90deg); }

#offbar { position: fixed; left: 0; right: 0; bottom: calc(var(--tab-height) + var(--safe-bottom)); background: var(--charcoal); color: #fff; font-size: 13px; text-align: center; padding: 9px 16px; transform: translateY(110%); transition: transform 0.3s ease; z-index: 900; }
#offbar.show { transform: none; }