@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:500 600;font-display:optional;src:url(/assets/fonts/cormorant.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:500;font-display:optional;src:url(/assets/fonts/cormorant-italic.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Jost";font-style:normal;font-weight:300 500;font-display:optional;src:url(/assets/fonts/jost.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --night:#0b0705;
  --paper:#EFE5DA;
  --cu-1:#8a4526;
  --cu-2:#c98250;
  --cu-3:#f0cfa6;
  --line:rgba(201,130,76,.28);
  --card:rgba(239,229,218,.045);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
html,body{height:100%;overflow-x:hidden}
body{
  font-family:"Jost",system-ui,sans-serif;
  font-weight:300;
  color:var(--paper);
  background:
    radial-gradient(60% 50% at 50% -5%, rgba(201,130,76,.16), transparent 60%),
    var(--night);
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--cu-3);outline-offset:3px}
img,video{display:block;max-width:100%}

.page{
  position:relative;
  width:100%;
  max-width:540px;
  margin:0 auto;
  min-height:100svh;
  background:var(--night);
  overflow:hidden;
}
.stack{display:flex;flex-direction:column}
.photo-side{display:none}

.topbar{
  background:var(--night);
  display:flex;align-items:center;justify-content:center;
  padding:max(14px, env(safe-area-inset-top)) 18px 8px;
}
.brand{display:flex;align-items:center;gap:12px}
.brand img{width:42px;height:auto;aspect-ratio:82/138}
.brand .name b{
  display:block;
  font-family:"Cormorant Garamond",Georgia,serif;
  font-weight:600;font-size:26px;letter-spacing:.03em;line-height:1;
  background:linear-gradient(180deg,#fff,var(--cu-3));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.brand .name small{
  display:block;margin-top:5px;
  font-size:10px;letter-spacing:.38em;text-transform:uppercase;
  color:rgba(239,229,218,.62);
}

.hero{
  position:relative;
  height:auto;
  background:transparent;
}
.hero-photo{
  position:relative;
  width:100%;
  height:clamp(168px, 26vh, 210px);
  object-fit:cover;
  object-position:center 42%;
}
.hero-fade{
  position:absolute;left:0;right:0;top:0;
  height:clamp(168px, 26vh, 210px);
  background:linear-gradient(180deg, rgba(11,7,5,0) 52%, rgba(11,7,5,.45) 82%, #0b0705 100%);
  pointer-events:none;
}
.hero-copy{
  position:relative;z-index:1;
  height:auto;
  display:block;
  padding:2px 18px 2px;
}
.hero-copy h1{
  font-family:"Cormorant Garamond",Georgia,serif;
  font-weight:500;font-size:32px;line-height:1.05;
  text-shadow:none;
}
.hero-copy h1 em{font-style:italic;color:var(--cu-3)}
.hero-copy p{
  margin-top:8px;max-width:420px;
  font-size:14.5px;line-height:1.45;color:rgba(239,229,218,.86);
  text-shadow:none;
}

.content{
  position:relative;
  background:var(--night);
  padding:10px 16px calc(28px + env(safe-area-inset-bottom));
  margin-top:0;
}
.links{display:flex;flex-direction:column;gap:12px}

.lnk{
  position:relative;
  display:flex;align-items:center;gap:14px;
  padding:13px 14px;min-height:64px;border-radius:16px;
  color:var(--paper);
  background:var(--card);
  border:1px solid var(--line);
  box-shadow:0 12px 28px rgba(0,0,0,.4);
  overflow:hidden;
  transition:transform .22s ease,border-color .22s ease,background .22s ease;
}
.lnk:hover{transform:translateY(-3px);border-color:rgba(240,207,166,.62);background:rgba(201,130,76,.1)}
.lnk:active{transform:translateY(-1px)}
.ic{
  flex:0 0 48px;width:48px;height:48px;
  display:grid;place-items:center;border-radius:12px;
  color:var(--cu-3);
  background:linear-gradient(180deg,rgba(240,207,166,.16),rgba(138,69,38,.08));
  border:1px solid rgba(201,130,76,.28);
}
.ic svg{width:22px;height:22px;fill:currentColor}
.tx{flex:1;min-width:0}
.tx .t{font-size:15.5px;font-weight:500;letter-spacing:.01em;line-height:1.25}
.tx .s{display:block;margin-top:3px;font-size:12.5px;font-weight:400;line-height:1.35;color:rgba(239,229,218,.72)}
.arrow{flex:0 0 auto;width:14px;height:14px;fill:rgba(240,207,166,.75)}

.lnk.feature{
  background:linear-gradient(110deg,rgba(201,130,76,.22),rgba(138,69,38,.08));
  border-color:rgba(240,207,166,.62);
  box-shadow:0 16px 36px rgba(138,69,38,.28),0 12px 28px rgba(0,0,0,.45);
}
.lnk.feature .ic{
  color:#1c0d05;
  background:linear-gradient(180deg,var(--cu-3),var(--cu-2));
  border-color:transparent;
}
.lnk.feature .tx .t{font-size:16.5px;font-weight:500}
.lnk.feature::after{
  content:"";position:absolute;top:-50%;left:-60%;width:45%;height:200%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.16),transparent);
  transform:skewX(-18deg);pointer-events:none;
}
html.motion .lnk.feature::after{animation:shine 4.4s linear infinite}
@keyframes shine{0%{left:-60%}100%{left:130%}}
@media (prefers-reduced-motion:reduce){
  .lnk,.lnk.feature::after{transition:none;animation:none}
}

.lnk.wa .ic{color:#25D366;background:rgba(37,211,102,.12);border-color:rgba(37,211,102,.28)}
.lnk.ig .ic{color:#f0cfa6}
.lnk.yt .ic{color:#ff4e45;background:rgba(255,0,51,.1);border-color:rgba(255,78,69,.32)}

.video{
  margin-top:18px;border-radius:16px;overflow:hidden;
  border:1px solid var(--line);background:#000;
}
.video video{width:100%;aspect-ratio:9/16;max-height:460px;object-fit:cover;object-position:center 18%}

.site-link{
  display:flex;align-items:center;justify-content:center;gap:10px;
  margin-top:16px;padding:12px 16px;border-radius:999px;
  border:1px solid rgba(201,130,76,.38);
  color:var(--cu-3);
  font-size:12.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  background:transparent;
  transition:transform .22s ease,border-color .22s ease,background .22s ease;
}
.site-link:hover{transform:translateY(-2px);border-color:rgba(240,207,166,.7);background:rgba(201,130,76,.08)}
.site-link svg{width:11px;height:11px;fill:currentColor}

.footrow{display:flex;justify-content:center;margin-top:22px}
.dev-by{
  display:inline-flex;align-items:center;gap:10px;
  padding:8px 16px 8px 10px;border-radius:999px;
  background:linear-gradient(180deg, rgba(201,130,76,.1), rgba(239,229,218,.03));
  border:1px solid rgba(201,130,76,.32);
  transition:transform .25s ease,border-color .25s ease,background .25s ease;
}
.dev-by:hover{transform:translateY(-2px);border-color:rgba(240,207,166,.62);background:rgba(201,130,76,.14)}
.dev-by svg{width:26px;height:26px}
.dev-txt{display:flex;flex-direction:column;line-height:1.05;text-align:left}
.dev-txt small{font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:rgba(240,207,166,.78)}
.dev-txt b{font-size:14.5px;font-weight:500;letter-spacing:.01em;color:#F7F1EA}
.dev-txt i{font-style:normal;font-weight:400;font-size:12px;letter-spacing:.04em;color:rgba(239,229,218,.82)}

.story{
  width:min(920px,100%);
  margin:0 auto;
  padding:22px 20px 64px;
}
.back{
  display:inline-flex;align-items:center;gap:8px;
  letter-spacing:.16em;text-transform:uppercase;
  font-size:.72rem;color:var(--cu-3);margin-bottom:22px;
}
.story-grid{display:grid;grid-template-columns:minmax(220px,320px) 1fr;gap:36px;align-items:start}
.story img.portrait{width:100%;height:auto;border-radius:16px;border:1px solid var(--line)}
.story h1{
  font-family:"Cormorant Garamond",Georgia,serif;
  font-weight:500;font-size:clamp(2.3rem,5vw,3.5rem);line-height:1.05;
  margin:8px 0 16px;
}
.story h1 em{font-style:italic;color:var(--cu-3)}
.eyebrow{letter-spacing:.28em;text-transform:uppercase;font-size:.68rem;color:var(--cu-3)}
.story p{margin-bottom:16px;font-size:1.05rem;line-height:1.65}
.story strong{font-weight:500}
.sign{margin-top:8px;font-family:"Cormorant Garamond",Georgia,serif;font-size:1.45rem;font-style:italic}
.sign small{display:block;margin-top:8px;font-family:"Jost",sans-serif;font-style:normal;letter-spacing:.16em;text-transform:uppercase;font-size:.68rem;color:rgba(239,229,218,.62)}

@media(max-width:760px){
  .story{padding:16px 16px calc(40px + env(safe-area-inset-bottom))}
  .story-grid{grid-template-columns:1fr;gap:18px}
  .story img.portrait{height:220px;object-fit:cover;object-position:center 12%}
  .back{margin-bottom:14px}
}

@media(min-width:900px){
  body{
    display:flex;justify-content:center;
    background:
      radial-gradient(48% 60% at 84% 28%, rgba(201,130,76,.18), transparent 62%),
      radial-gradient(42% 55% at 4% 12%, rgba(138,69,38,.16), transparent 60%),
      var(--night);
  }
  .page{
    max-width:1180px;min-height:100svh;
    display:grid;grid-template-columns:minmax(0,1fr) min(46vw,560px);
    background:transparent;overflow:visible;
  }
  .stack{display:block;min-height:100svh;padding:48px 48px 40px}
  .topbar{background:transparent;justify-content:flex-start;padding:0 0 8px}
  .hero{height:auto;background:none;margin-top:28px}
  .hero-photo,.hero-fade{display:none}
  .hero-copy{height:auto;padding:0;display:block}
  .hero-copy h1{font-size:clamp(42px,3.4vw,56px);text-shadow:none}
  .hero-copy p{text-shadow:none;color:rgba(239,229,218,.78);font-size:16px;margin-top:12px}
  .content{max-width:560px;margin-top:28px;padding:0;background:transparent}
  .video video{max-height:420px}
  .footrow{justify-content:flex-start;margin-top:32px}
  .photo-side{display:block;position:relative;overflow:hidden;align-self:stretch}
  .photo-side img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 14%}
  .photo-side::before{
    content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
    background:
      linear-gradient(90deg,#0b0705 0%, rgba(11,7,5,.55) 16%, transparent 42%),
      linear-gradient(180deg,#0b0705 0%, transparent 18%),
      radial-gradient(70% 40% at 40% 16%, rgba(201,130,76,.16), transparent 62%);
  }
}

.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}