/* ots.css – Own The Space
   Core layout + reveal system
*/

:root{
  --ink:#033249;
  --paper:#F6F5F2;
  --accent:#FF8038;
  --ease:cubic-bezier(.2,.85,.25,1);

  /* Global pacing defaults (applies everywhere unless overridden on a page) */
  --settle: 1200ms;
  --blockGap: 1150ms;
  --wordStep: 340ms;

  /* Utilities */
  --muted: rgba(3,50,73,.62);
  --hair: rgba(3,50,73,.18);
}

*{box-sizing:border-box}
html,body{height:100%}

body{
  margin:0;
  font-family:"Noto Sans KR", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:var(--paper);
  color:var(--ink);
}

/* =========================
   Core layout (used by index/sector/state/cost/notice/etc)
   ========================= */

.wrapper{
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

.main{
  flex:1;
  display:flex;
  align-items:center;      /* centred, not top/left anchored */
  justify-content:center;
  padding:96px 20px 56px;
}

.card{
  width:min(980px, 100%);
  text-align:center;
  padding:44px 26px;
}

.topline{
  font-size:11px;
  letter-spacing:.45em;
  text-transform:uppercase;
  color:rgba(3,50,73,.42);
  margin-bottom:18px;
}

.logo{
  display:block;
  margin:0 auto 22px auto;
}

/* =========================
   Typography
   ========================= */

.h1{
  margin:0;
  font-weight:700;
  letter-spacing:-.02em;
  line-height:1.05;
  font-size:clamp(34px, 5vw, 64px);
}

.h2{
  margin:0;
  font-weight:700;
  letter-spacing:-.015em;
  line-height:1.15;
  font-size:clamp(22px, 3.2vw, 36px);
}

.p{
  margin:12px 0 0 0;
  color:rgba(3,50,73,.70);
  font-size:16px;
  line-height:1.7;
}

.small{
  font-size:13px;
  color:rgba(3,50,73,.55);
}

.stack{ margin-top:18px; }

/* =========================
   CTAs + lists
   ========================= */

.cta{
  display:inline-block;
  margin-top:22px;
  padding:10px 0 12px 0;
  text-decoration:none;
  color:rgba(3,50,73,.66);
  letter-spacing:.30em;
  text-transform:uppercase;
  font-size:11px;
  border-bottom:1px solid rgba(3,50,73,.18);
}

.cta:hover{
  color:rgba(3,50,73,.78);
  border-bottom-color:rgba(3,50,73,.26);
}

.list{
  list-style:none;
  padding:0;
  margin:20px 0 0 0;
}
.list li{ margin:10px 0; }
.list a{
  text-decoration:none;
  color:rgba(3,50,73,.72);
  border-bottom:1px solid rgba(3,50,73,.14);
  padding-bottom:6px;
}
.list a:hover{
  color:rgba(3,50,73,.86);
  border-bottom-color:rgba(3,50,73,.22);
}

/* =========================
   Footer
   ========================= */

.footer{
  margin-top:60px;
  padding:16px 16px 20px 16px;
  text-align:center;
  font-size:9px;
  line-height:1.45;
  letter-spacing:.01em;
  color:rgba(3,50,73,.30);
}

.footer a,
.footer a:visited{
  color:inherit;
  text-decoration:none;
  border-bottom:none;
}

.footer a:hover{
  opacity:.7;
}

.footer-tagline{
  white-space:nowrap;
  margin:6px auto 6px auto;
  font-size:10px;
  line-height:1.4;
  letter-spacing:.04em;
  color:rgba(3,50,73,.28);
  text-align:center;
}

/* Tablet / mobile */
@media (max-width: 1024px){

  .footer{
    margin-top:40px;
	font-size:9.5px;
    line-height:1.4;
    padding:14px 12px 18px 12px;
  }

  .footer-tagline{
    white-space:normal;
    max-width:320px;
    margin:6px auto 6px auto;
    font-size:9.5px;
    line-height:1.35;
    letter-spacing:0;
    color:rgba(3,50,73,.26);
  }

}

/* =========================
   Reveal system
   ========================= */

[data-ots]{
  opacity:0;
  transform:translateY(10px);
  transition:opacity var(--settle) var(--ease),
             transform var(--settle) var(--ease);
  will-change:opacity, transform;
}

[data-ots].show{
  opacity:1;
  transform:translateY(0);
}

/* IMPORTANT: do NOT change display here (it breaks layout) */
.otsToken{}

/* Token reveal (words / letters) */
.otsToken span{
  display:inline-block;
  opacity:0;
  transform:translateY(6px);
  transition:opacity .55s var(--ease), transform .55s var(--ease);
  will-change:opacity, transform;
}

[data-ots].show.otsToken span{
  opacity:1;
  transform:translateY(0);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  [data-ots]{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
  }
  .otsToken span{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
  }
}

/* =========================
   Doorway list – minimal, "Discover more" energy
   ========================= */

.doorwayList{
  margin-top: 2.6rem;
  display: flex;
  flex-direction: column;
  gap: 2.2rem;
}

.doorwayItem{ text-align: center; }

.doorwayKicker{
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  opacity: 0.7;
  margin-bottom: 0.65rem;
}

.doorwayQuestion{
  font-size: 1.15rem;
  line-height: 1.6;
  margin: 0 auto 1.05rem;
  max-width: 44rem;
}

.doorwayCta{
  display: inline-block;
  font-size: 0.78rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  text-decoration: none;
  padding-bottom: 0.65rem;
  border-bottom: 1px solid var(--hair);
  opacity: 0.85;
}

.doorwayCta:hover{ opacity: 1; }

.doorwayCta.subtle{ opacity: 0.6; }

.backLine{
  margin-top: 2.8rem;
  text-align: center;
}

/* =========================
   Journey page (ONLY) – spacing + calm clickable statements
   ========================= */

.subtleLink{
  text-decoration:none;
  color:inherit;
  display:block;
  transition:opacity 200ms ease;
}
.subtleLink:hover{ opacity:.65; }

.pageJourney a,
.pageJourney a:visited{
  color:inherit;
  text-decoration:none;
}

/* Keep footer at bottom on Journey pages that use wrap/stage */
body.pageJourney{
  min-height:100vh;
  display:flex;
  flex-direction:column;
}
body.pageJourney main{ flex:1; }

/* Journey typography balance (scoped) */
.pageJourney .h1{
  font-size: clamp(34px, 3.2vw, 44px);
  line-height: 1.08;
  margin: 0;
}

.pageJourney .subline{
  font-size: clamp(16px, 1.6vw, 20px);
  line-height: 1.2;
  opacity: .85;
  margin-top: 12px;
}

/* Journey spacing (scoped) */
.pageJourney .doorways{
  margin-top: 52px;                 /* more breathing space after header */
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: 84px;                        /* strong vertical separation between statements */
}

.pageJourney .doorwayCard{
  width: min(760px, 100%);
  text-align:center;
}

.pageJourney .doorwayQ{
  max-width: 62ch;
  margin: 0 auto;
  opacity: .72;
}

/* Back CTA spacing (scoped) */
.pageJourney .ctaRow{
  margin-top: 70px;
  text-align:center;
}