/* Ikigai Traveler v2 — base: responsive paper-brand web app, iOS grammar */
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--font);
  color:var(--ink);
  background:#d8ddd6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overscroll-behavior:none;
}
.serif{font-family:var(--serif)}
button{font-family:inherit;color:inherit;cursor:pointer;background:none;border:none}
svg.ic,svg.ti,svg.chev{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
img{max-width:100%;display:block}

/* ---- Responsive app canvas: full viewport on mobile, centered column on desktop ---- */
.app{
  position:fixed;inset:0;margin:0 auto;
  width:100%;max-width:var(--app-max);height:100%;
  background:var(--canvas);
  overflow:hidden;
  box-shadow:0 0 60px rgba(6,61,44,.18);
}
@media (min-width:520px){
  body{background:radial-gradient(1100px 800px at 50% 0%, #e7ece7, #cfd6ce)}
  .app{border-left:1px solid var(--hairline);border-right:1px solid var(--hairline)}
}

/* ---- Screens ---- */
/* Higher-specificity position so a `.scene-*` class on a full-bleed screen
   (which sets position:relative for its ::after) can't collapse the layout. */
.app > .screen{position:absolute;inset:0}
.screen{
  display:flex;flex-direction:column;
  background:var(--canvas);
  opacity:0;visibility:hidden;pointer-events:none;
  transform:translateX(14px);
}
.screen.is-active{opacity:1;visibility:visible;pointer-events:auto;transform:none;z-index:2}
.screen.fullbleed.is-active{opacity:1;visibility:visible;pointer-events:auto;transform:none;z-index:3}

/* body scroll region */
.screen-body{
  flex:1;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;
  padding-bottom:calc(var(--tab-h) + var(--sab) + 30px);
}
.screen-body::-webkit-scrollbar{width:0}
.center-body{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding-left:20px;padding-right:20px;min-height:100%}

/* hide tab bar on immersive/modal/splash screens — set by router */
#app[data-chrome="hidden"] .tab-bar{transform:translateY(120%);pointer-events:none}

/* ---- iOS Nav bar (paper, translucent) ---- */
.nav-bar{
  position:relative;z-index:5;flex:none;
  height:calc(var(--nav-h) + var(--sat));
  padding-top:var(--sat);
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  padding-left:8px;padding-right:8px;
  background:rgba(243,244,240,.82);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:.5px solid var(--separator);
}
.nav-bar.transparent{background:transparent;border-bottom-color:transparent}
.nav-title{grid-column:2;text-align:center;font-size:var(--headline);font-weight:600;white-space:nowrap;color:var(--ink)}
.nav-title-inline{grid-column:2;text-align:center;font-size:var(--headline);font-weight:600}
.nav-side{display:block}
.nav-back{grid-column:1;justify-self:start;display:flex;align-items:center;gap:2px;color:var(--tint);font-size:var(--body);padding:6px 8px}
.nav-back .ic{width:22px;height:22px;stroke-width:2.2;margin-right:-2px}
.nav-btn-text{color:var(--tint);font-size:var(--body);padding:6px 10px;font-weight:500}
.nav-btn-text:first-child{grid-column:1;justify-self:start}
.nav-btn-text:last-child{grid-column:3;justify-self:end}
.nav-icon{grid-column:3;justify-self:end;color:var(--tint);padding:6px 8px}
.nav-icon .ic{width:24px;height:24px}
/* circular glass buttons placed directly in a nav bar (transparent hero nav) */
.nav-bar > .glass-btn{align-self:center}
.nav-bar > .glass-btn:first-child{grid-column:1;justify-self:start;margin-left:8px}
.nav-bar > .glass-btn:last-child{grid-column:3;justify-self:end;margin-right:8px}

/* ---- Type helpers ---- */
.large-title{font-size:var(--lt);font-weight:700;letter-spacing:-.02em;line-height:1.05}
.title1{font-size:var(--t1);font-weight:700;letter-spacing:-.01em}
.title2{font-size:var(--t2);font-weight:700;letter-spacing:-.01em}
.title3{font-size:var(--t3);font-weight:600}
p{font-size:var(--body);line-height:1.5;color:var(--ink)}
.label-2{color:var(--ink-mute)}
.label-3{color:var(--ink-faint)}
.footnote{font-size:var(--footnote)}
.center{text-align:center}
.gold,.brandgreen{color:var(--green-deep)}
.big{font-size:var(--t2);line-height:1.35;font-weight:500}
.eyebrow{font-size:var(--caption2);letter-spacing:.14em;color:var(--green);font-weight:700;text-transform:uppercase;line-height:1.4}

/* list section header (iOS grouped — regular weight, secondary label) */
.list-header{font-size:var(--footnote);color:var(--ink-mute);text-transform:uppercase;letter-spacing:.04em;
  padding:22px 32px 7px;font-weight:400}
.list-header.center{text-align:center}

/* inset helpers */
.inset-x{margin-left:16px;margin-right:16px}
.full-w{width:calc(100% - 32px)}

/* scrims over photos */
.scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,20,12,.08) 0%,rgba(0,20,12,.02) 38%,rgba(0,24,15,.78) 100%)}
.scrim-soft{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.4),rgba(0,0,0,.08) 32%,rgba(0,0,0,.6))}

/* safe-area utilities */
.safe-top{padding-top:calc(var(--sat) + 10px)}
.safe-bottom{padding-bottom:calc(var(--sab) + 12px)}
.safe-x{padding-left:24px;padding-right:24px}