/* ==========================================================
   Guided Experience Platform — app.css (mobile-first, always)
   - Mobile UI is the only UI
   - Desktop centers the same mobile UI (max-width viewport)
   ========================================================== */

@import url("https://p.typekit.net/p.css?s=1&k=xhl0onh&ht=tk&f=46025.46031&a=84438254&app=typekit&e=css");

@font-face {
  font-family:"etna";
  src:url("https://use.typekit.net/af/525627/00000000000000007735e082/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff2"),
      url("https://use.typekit.net/af/525627/00000000000000007735e082/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff"),
      url("https://use.typekit.net/af/525627/00000000000000007735e082/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("opentype");
  font-style: normal;
  font-weight: 400;
  font-display: auto;
}

@font-face {
  font-family:"etna";
  src:url("https://use.typekit.net/af/0bc45e/00000000000000007735e089/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i4&v=3") format("woff2"),
      url("https://use.typekit.net/af/0bc45e/00000000000000007735e089/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i4&v=3") format("woff"),
      url("https://use.typekit.net/af/0bc45e/00000000000000007735e089/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i4&v=3") format("opentype");
  font-style: italic;
  font-weight: 400;
  font-display: auto;
}

@font-face {
  font-family:"AmalteaWP";
  src:url("../fonts/AmalteaWP.woff2") format("woff2"),
      url("../fonts/AmalteaWP.woff") format("woff");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

.tk-etna { font-family: "etna", sans-serif; }

:root{
  /* Brand Skin vars (overridden via inline CSS from CPT) */
  --gep-primary:#ae883d;
  --gep-secondary:#121212;
  --gep-bg:#0b0b0b;
  --gep-font: "Etna", "Playfair Display", "Georgia", "Times New Roman", serif;
  --gep-title-font: "AmalteaWP", "Etna", "Playfair Display", "Palatino", "Book Antiqua", Georgia, serif;
  --font-etna: "etna", serif;

  --gep-radius: 10px;
  --gep-safe: 16px;

  --gep-indicator-active: var(--gep-primary);
  --gep-indicator-inactive: rgba(255,255,255,.35);

  /* Optional button vars; may be set by Brand Skin */
  --gep-btn-transform: none;

  /* Accent used in the Figma skin (maroon line + active next) */
  --gep-accent: #7b1f27;
  --gep-video-bar-left: var(--gep-primary);
  --gep-video-bar-right: var(--gep-secondary);

  /* Peek amount below hero media (to hint scroll) */
  --gep-peek: clamp(72px, 12vh, 120px);
  --gep-nav-strip-height: 84px;

  /* Paper background in Figma */
  --gep-paper: #f6f0e6;
  --gep-ink: #111;
  --gep-gold: #D2A85A;
}

*,
*::before,
*::after{ box-sizing:border-box; }

h1,h2,h3,h4,h5,h6,
p,figure{
  margin:0;
}

ol,ul{
  margin:0;
  padding:0;
}

html{
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  height:100%;
}

body{
  margin:0;
  min-height:100%;
  background:var(--gep-bg);
  color:#eee;
  font-family:var(--gep-font, system-ui, -apple-system, Segoe UI, Roboto, sans-serif);
  line-height:1.5;
  scroll-behavior: smooth;
}

button,
input,
select,
textarea{
  font-family:var(--gep-font, system-ui, -apple-system, Segoe UI, Roboto, sans-serif);
}

/* ==========================================================
   Mobile-first app wrapper
   ========================================================== */

.gep-app{
  min-height:100vh;
 /* padding:
    calc(var(--gep-safe) + env(safe-area-inset-top))
    var(--gep-safe)
    calc(var(--gep-safe) + env(safe-area-inset-bottom))
    var(--gep-safe);*/
  display:flex;
  justify-content:center;
  align-items:flex-start;
}

/* This is the “mobile viewport” container.
   On desktop we still render this mobile UI, centered. */
.gep-viewport{
  width:100%;
  max-width:460px;
  margin:0 auto;
}

/* Optional “device frame” feel on larger screens */
@media (min-width: 768px){
  body{
    background: radial-gradient(1200px 800px at 50% 10%, #1a1a1a, var(--gep-bg));
  }
  .gep-app{
    padding: 32px;
    align-items:center;
  }
  .gep-viewport{
    border-radius: 20px;
    overflow:hidden;
    box-shadow: 0 18px 70px rgba(0,0,0,.45);
  }
}

/* ==========================================================
   Screens / routing
   ========================================================== */

.gep-screen{ display:none; }
.gep-screen.is-active{ display:block; }

.gep-card,
.gep-step,
.gep-completion{
  background:var(--gep-paper);
  color:var(--gep-ink);
  box-shadow: 0 8px 26px rgba(0,0,0,.22);
}

/* ==========================================================
   Core cards / surfaces (matches the cream paper look)
   ========================================================== */

.gep-card,
.gep-step{
  width:100%;
  overflow:hidden;
}

.gep-card--narrow{
  padding-bottom: 18px;
}

/* ==========================================================
   Home screen
   ========================================================== */

.gep-hero{
  background: #000;
}

.gep-hero img{
  width:100%;
  display:block;
  object-fit: cover;
}

.gep-home-body{
  padding:24px 22px 18px;
}

.gep-title{
  font-family: var(--gep-title-font);
  font-size:36px;
  line-height:1.32;
  margin: 14px 0 20px;
  font-weight: 500;
  font-style: italic;
  color:var(--gep-gold);
  letter-spacing:.06em;
  text-align:left;
}

/* Primary button (“Start now”) */
.gep-btn{
  width:100%;
  padding:16px 14px;
  border:none;
  border-radius:0;           /* matches the design */
  cursor:pointer;
  font-size:18px;
  text-transform: var(--gep-btn-transform, none);
  letter-spacing: .02em;
}

.gep-start{
  background:var(--gep-accent);
  color:#fff;
  margin-bottom:22px;
  font-weight:500;
}

.gep-section{
  margin-top: 24px;
}

.gep-section-title{
  color:var(--gep-gold);
  text-transform:uppercase;
  letter-spacing: .18em;
  font-size:18px;
  font-family: var(--gep-font, system-ui, -apple-system, Segoe UI, Roboto, sans-serif);
  margin-bottom:12px;
}

.gep-steps-meta{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:6px;
  font-size:14px;
  margin-bottom:12px;
  color: #1a1a1a;
}

.gep-steps-label{
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:12px;
  color:var(--gep-gold);
  font-weight:600;
}

.gep-steps-value{
  display:flex;
  align-items:baseline;
  gap:6px;
}

.gep-steps-count,
.gep-steps-word{
  font-size:17px;
}

.gep-steps-count{
  font-weight:400;
}

.gep-steps-time{
  font-size:13px;
}

.gep-steps-list{
  list-style:none;
  margin:0;
  padding:0;
}

.gep-step-row{
  display:grid;
  grid-template-columns: 16px 22px 1fr auto;
  gap:12px;
  align-items:center;
  padding:10px 0;
  border-bottom: 1px solid rgba(0,0,0,.08);
  cursor:pointer;
  font-size:17px;
}

.gep-step-row:last-child{ border-bottom:none; }

.gep-step-caret{
  display:flex;
  align-items:center;
  justify-content:center;
}

.gep-step-caret-icon{
  width:10px;
  height:13px;
  background: #000;
  mask: url('../icons/steps-caret.svg') center / contain no-repeat;
  -webkit-mask: url('../icons/steps-caret.svg') center / contain no-repeat;
  display:block;
}

.gep-step-num{ opacity:.85; font-size:17px; }
.gep-step-name{
  font-size:17px;
  font-weight:500;
  color:#1b1b1b;
  line-height:1.35;
}
.gep-step-dur{
  font-variant-numeric: tabular-nums;
  opacity:.85;
  justify-self:end;
  text-align:right;
  font-size:15px;
}

.gep-copy{
  font-size: 17px;
  line-height: 1.55;
  color: #000;
}

/* Host section */
.gep-host{
  display:flex;
  gap:14px;
  align-items:flex-start;
}

.gep-host-img{
  flex: 0 0 60px;
}

.gep-host-img img{
  width:60px;
  height:60px;
  border-radius:50%;
  object-fit:cover;
}

.gep-host-name{
  font-weight:700;
  margin-bottom:6px;
  font-size: 17px;
  line-height:1.2;
}

.gep-host-bio{
  font-size: 16px;
  line-height:1.6;
  color:#000;
  margin-top: 10px;
}

.gep-host-bio p{
  margin: 0 0 10px;
}

.gep-host-bio p:last-child{
  margin-bottom:0;
}

.gep-host-body{
  flex:1;
  padding-top:16px;
  display:flex;
  flex-direction:column;
}

/* ==========================================================
   Step screen
   ========================================================== */

.gep-step{ margin-bottom:18px; }

/* Media area is simply the video poster/full-bleed media */
.gep-step-hero{
  position:relative;
  background:#000;
  height: calc(100svh - var(--gep-peek) - var(--gep-nav-strip-height));
  max-height: calc(100vh - var(--gep-peek));
  min-height: 340px;
}

@supports not (height: 100svh){
  .gep-step-hero{
    height: calc(100vh - var(--gep-peek) - var(--gep-nav-strip-height));
  }
}

.gep-step-media{
  width:100%;
  height:100%;
  display:block;
  object-fit: cover;
}

.gep-step-hero,
.gep-step-hero *{
  -webkit-tap-highlight-color: transparent;
}

.gep-step-media,
.gep-video{
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  outline: none;
  box-shadow: none;
  appearance: none;
}

.gep-step-media:focus,
.gep-step-media:focus-visible,
.gep-step-media:active,
.gep-video:focus,
.gep-video:focus-visible,
.gep-video:active{
  outline: none;
  box-shadow: none;
}

.gep-video{
  cursor:pointer;
}

/* Hide native controls (we want poster-first, tap-to-play feel) */
.gep-video::-webkit-media-controls{ display:none !important; }
.gep-video::-webkit-media-controls-enclosure{ display:none !important; }

.gep-steps{
  background:var(--gep-paper);
}

[data-step]{
  display:none;
}
[data-step].is-active{
  display:block;
}

/* --- Figma-style nav strip (sits UNDER the poster/video) --- */
.gep-nav-strip{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 20px 25px;
  background: var(--gep-paper);
  /*border-top: 2px solid var(--gep-accent);*/
}

.gep-nav-left{
  display:flex;
  gap:10px;
  align-items:center;
}

.gep-nav-strip .gep-step-progress{ display:none; } /* not shown in current Figma */
.gep-step-progress{
  display:flex;
  align-items:center;
  gap:6px;
  flex:1;
}
.gep-dot{
  width:7px;
  height:7px;
  border-radius:50%;
  background: var(--gep-indicator-inactive);
}
.gep-dot.is-active{
  background: var(--gep-indicator-active);
}

.gep-icon-btn{
  width:44px;
  height:44px;
  border:none;
  background:transparent;
  cursor:pointer;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
}

.gep-icon-btn[disabled]{
  opacity:.35;
  cursor:default;
}

.gep-icon-btn[data-action="home"] .gep-svg {
    width: 37px;
}

.gep-icon-btn[data-action="toggle-play"] .gep-svg,
.gep-icon-btn[data-action="restart"] .gep-svg {
    width: 47px;
}

.gep-icon-btn .gep-svg{
  width:36px;
  height:auto;
  display:block;
}

.gep-nav-pair{
  display:flex;
  gap:12px;
}

/* Step title area */
.gep-step-header{
  display:flex;
  align-items:baseline;
  gap:10px;
  padding: 18px 18px 12px;
}


.gep-step-kicker{
  color:var(--gep-gold);
  font-family: var(--gep-font, system-ui, -apple-system, Segoe UI, Roboto, sans-serif);
  font-size:19px;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:none;
  line-height:1.1;
}

.gep-step-title{
  flex:1;
  margin:0;
  font-family: var(--gep-font, system-ui, -apple-system, Segoe UI, Roboto, sans-serif);
  font-size:19px;
  font-weight:400;
  color:var(--gep-gold);
  text-transform:uppercase;
  letter-spacing:.08em;
  line-height:1.15;
}

.gep-step-body{
  padding: 10px 18px 18px;
}

/* Blocks (text / image) */
.gep-blocks{
  display:flex;
  flex-direction:column;
  gap:16px;
}

.gep-block-text{
  font-size:17px;
  line-height:1.6;
  color:#000;
}

.gep-block-image{
  margin:0;
}

.gep-block-image img{
  width:100%;
  display:block;
  border:1px solid rgba(0,0,0,.08);
}

.gep-block-image figcaption{
  font-size:11px;
  color:#b38942;
  text-align:center;
  margin-top:6px;
  font-style:italic;
}

/* ==========================================================
   Completion screen
   ========================================================== */

.gep-completion .gep-nav-strip{
  margin-bottom: 6px;
}

.gep-completion-title{
  font-family: var(--gep-title-font);
  font-size:28px;
  color:var(--gep-gold);
  font-style:italic;
  font-weight:600;
  padding: 4px 18px;
  margin: 8px 0 12px;
}

.gep-video-loading-bar{
  height:4px;
  width:100%;
  background: var(--gep-video-bar-right);
}

.gep-video-loading-fill{
  display:block;
  height:100%;
  width:0%;
  background: var(--gep-video-bar-left);
  transition: width 0.2s ease;
}

.gep-next-step{
  padding: 0 18px 12px;
}

.gep-next-step-title{
  margin: 6px 0 10px;
  font-size:14px;
  font-weight:600;
  color:#000;
}

/* Social links at bottom (replace with icons if desired) */
.gep-socials{
  display:flex;
  gap:16px;
  padding: 14px 18px 10px;
  align-items:center;
  justify-content:flex-start;
}

.gep-social{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  text-decoration:none;
  color:#7b1f27;
}

.gep-social-icon{
  width:30px;
  height:auto;
  display:block;
}

.gep-social--text{
  width:auto;
  font-size:12px;
  border-bottom:1px solid rgba(123,31,39,.35);
  padding-bottom:2px;
}

/* ==========================================================
   Scroll hint chevron (bottom)
   ========================================================== */

.gep-scroll-hint{
  text-align:center;
  padding: 14px 0 40px;
  user-select:none;
  font-size:0;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}

.gep-scroll-hint .gep-svg{
  width: 56px;
  height:auto;
  display:block;
}

/* ==========================================================
   Small quality-of-life polish
   ========================================================== */

/* Subtle hover only where it makes sense (desktop/trackpad) */
@media (hover:hover){
  .gep-step-row:hover{
    background: rgba(0,0,0,.03);
  }
  .gep-icon-btn:hover{
    opacity:.9;
  }
}

/* Remove blue tap highlight on mobile */
.gep-btn,
.gep-step-row,
.gep-icon-btn,
.gep-social{
  -webkit-tap-highlight-color: transparent;
}

/* Make WYSIWYG output look consistent */
.gep-copy p,
.gep-block-text p{
  margin: 0 0 10px;
}
.gep-copy p:last-child,
.gep-block-text p:last-child{
  margin-bottom:0;
}
.gep-copy a,
.gep-block-text a{
  color:#7b1f27;
  text-decoration:underline;
}