:root{
  color-scheme:light;
  --kunyit:#d9a441;
  --f:"Montserrat",system-ui,-apple-system,"Segoe UI",sans-serif;
  padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;font-family:var(--f);font-size:14px;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;overflow-x:hidden}
a,button{touch-action:manipulation}
img{max-width:100%}
[hidden]{display:none!important}

.ob-bg{position:fixed;inset:0;z-index:0;background-size:cover;background-position:center;background-repeat:no-repeat}
.ob-scrim{position:fixed;inset:0;z-index:0;background:#000;pointer-events:none}
.ob-frame .ob-bg,.ob-frame .ob-scrim{position:absolute}
.ob-frame .ob-wrap{min-height:100%}
.ob-wrap{position:relative;z-index:1;max-width:460px;margin:0 auto;min-height:100vh;min-height:100svh;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:28px 40px;
  display:flex;flex-direction:column;gap:28px;color:var(--ink)}
.tone-light{--ink:#fff8ee;--muted:rgba(255,248,238,.74);--line:rgba(255,248,238,.24);--btn:#f6ead3;--btn-fg:#22160d;--btn2:rgba(255,248,238,.12);--btn2-fg:#fff8ee;--ph:rgba(255,248,238,.08)}
.tone-dark{--ink:#22160d;--muted:rgba(34,22,13,.72);--line:rgba(34,22,13,.2);--btn:#22160d;--btn-fg:#f6ead3;--btn2:rgba(34,22,13,.08);--btn2-fg:#22160d;--ph:rgba(34,22,13,.06)}

.ob-brand{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;padding-top:8px}
.ob-logo{max-height:104px;max-width:78%;width:auto;object-fit:contain;display:block}
.ob-name{font-weight:700;font-size:clamp(26px,7.5vw,34px);line-height:1.1;margin:0;text-wrap:balance}
.ob-tag{margin:0;color:var(--muted);font-size:14.5px;line-height:1.55;max-width:34ch;text-wrap:pretty}
.ob-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.ob-actions{display:flex;flex-direction:column;gap:12px}
.ob-btn{display:flex;align-items:center;gap:14px;min-height:62px;padding:12px 18px;border-radius:16px;text-decoration:none;
  font-weight:600;font-size:15.5px;line-height:1.25;transition:transform .15s ease}
.ob-btn:active{transform:scale(.985)}
.ob-btn:focus-visible{outline:2px solid var(--kunyit);outline-offset:3px}
.ob-btn svg{flex:0 0 24px;width:24px;height:24px}
.ob-btn .t{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.ob-btn small{font-weight:500;font-size:12.5px;opacity:.72}
.ob-btn .arr{flex:0 0 16px;width:16px;height:16px;opacity:.6}
.ob-btn.primary{background:var(--btn);color:var(--btn-fg)}
.ob-btn.ghost{background:var(--btn2);color:var(--btn2-fg);box-shadow:inset 0 0 0 1px var(--line)}
.ob-btn.unset{opacity:.55}

.ob-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:12px}
.ob-head h2{margin:0;font-weight:700;font-size:19px}
.ob-count{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-variant-numeric:tabular-nums}
.ob-car{position:relative}
.ob-track{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none;border-radius:18px;outline:none}
.ob-track::-webkit-scrollbar{display:none}
.ob-track:focus-visible{box-shadow:0 0 0 2px var(--kunyit)}
.ob-slide{flex:0 0 100%;scroll-snap-align:center;margin:0;position:relative;aspect-ratio:4/5;max-width:100%;border-radius:18px;overflow:hidden;background:var(--ph)}
.ob-slide img{width:100%;height:100%;object-fit:cover;display:block}
.ob-slide figcaption{position:absolute;left:0;right:0;bottom:0;padding:44px 16px 15px;color:#fff8ee;
  background:linear-gradient(to top,rgba(20,12,6,.82),rgba(20,12,6,0));display:flex;flex-direction:column;gap:3px}
.ob-slide figcaption b{font-weight:600;font-size:18px;line-height:1.2}
.ob-slide figcaption span{font-size:13px;opacity:.85;line-height:1.4}
.ob-slide.ph{display:grid;place-items:center;text-align:center;padding:24px}
.ob-slide.ph b{font-weight:600;font-size:18px;display:block}
.ob-slide.ph span{font-size:13px;color:var(--muted)}
.ob-arr{position:absolute;top:50%;z-index:2;width:42px;height:42px;margin-top:-21px;border:0;border-radius:50%;padding:0;cursor:pointer;
  display:grid;place-items:center;background:rgba(255,248,238,.9);color:#22160d;box-shadow:0 4px 14px rgba(20,12,6,.28);transition:transform .15s ease}
.ob-arr svg{width:18px;height:18px}
.ob-arr.prev{left:10px}.ob-arr.next{right:10px}
.ob-arr:active{transform:scale(.92)}
.ob-arr:focus-visible{outline:2px solid var(--kunyit);outline-offset:2px}
.ob-dots{display:flex;justify-content:center;gap:2px;margin-top:4px;min-height:8px}
/* 24px tap area around each small dot */
.ob-dots button{position:relative;width:19px;height:24px;padding:0;border:0;background:none;cursor:pointer;transition:width .25s}
.ob-dots button::before{content:"";position:absolute;left:6px;right:6px;top:50%;height:7px;margin-top:-3.5px;border-radius:99px;background:var(--line);transition:background .25s}
.ob-dots button[aria-current="true"]{width:34px}
.ob-dots button[aria-current="true"]::before{background:var(--ink)}
.ob-foot{margin-top:auto;text-align:center;font-size:12px;color:var(--muted);letter-spacing:.04em}
.ob-toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:60;
  background:#22160d;color:#f6ead3;padding:11px 16px;border-radius:12px;font-size:13.5px;max-width:calc(100% - 32px);box-shadow:0 8px 24px rgba(0,0,0,.25)}
@media (hover:hover){.ob-btn:hover{transform:translateY(-1px)}.ob-arr:hover{transform:scale(1.06)}}
/* small phones */
@media (max-width:360px){
  .ob-wrap{gap:22px;padding-block:20px 32px}
  .ob-logo{max-height:84px}
  .ob-btn{gap:12px;min-height:58px;padding:11px 14px;font-size:14.5px}
  .ob-btn small{font-size:12px}
  .ob-arr{width:36px;height:36px;margin-top:-18px}
  .ob-arr.prev{left:6px}.ob-arr.next{right:6px}
}
/* phones held sideways: keep a slide within the screen height */
@media (orientation:landscape) and (max-height:520px){
  .ob-slide{aspect-ratio:auto;height:78vh;height:78svh}
  .ob-frame .ob-slide{aspect-ratio:4/5;height:auto}
}
@media (prefers-reduced-motion: reduce){*{transition:none!important;scroll-behavior:auto!important}}