/* ==========================================================================
   Outpost (umbrella) — homepage skin (ported from the "Three Skins" mockup).
   Warm editorial broadsheet: typographic hero, a family-worlds pair (Oops +
   Onward preview cards, each carrying its own skin), the "story moves as you
   do" spread, a manifesto, mail capture. Shared fonts; umbrella palette.
   ========================================================================== */
* { box-sizing:border-box; }
body { margin:0; background:var(--c-bg); color:var(--c-ink); overflow-x:hidden; }
.umb-page { width:min(1180px,100%); margin-inline:auto; }
a { color:inherit; }
.mark { flex:none; display:block; }

.umb-nav { display:flex; align-items:center; justify-content:space-between; padding:26px 64px; border-bottom:1px solid var(--c-line); }
.umb-wm { display:flex; align-items:center; gap:10px; text-decoration:none; }
.umb-wmt { font-family:var(--font-display); font-size:21px; font-weight:600; letter-spacing:.01em; color:var(--c-ink); }
.umb-nl { display:flex; gap:30px; font-family:var(--font-ui); font-size:12.5px; letter-spacing:.13em; text-transform:uppercase; }
.umb-nl a { text-decoration:none; color:var(--c-ink); opacity:.85; }

.umb-hero { position:relative; padding:84px 64px 70px; text-align:center; overflow:hidden; }
.umb-heroglow { position:absolute; inset:0; background:radial-gradient(60% 70% at 50% 0%,rgba(224,165,46,.16),transparent 70%),radial-gradient(50% 60% at 84% 30%,rgba(194,96,61,.12),transparent 70%); pointer-events:none; }
.umb-eye { position:relative; font-family:var(--font-ui); font-size:12.5px; letter-spacing:.22em; text-transform:uppercase; color:#B0622F; margin:0 0 28px; }
.umb-h1 { position:relative; font-family:var(--font-display); font-weight:400; font-size:78px; line-height:1.0; letter-spacing:-.025em; color:var(--c-ink); margin:0 auto; max-width:15ch; }
.umb-h1 em { font-style:italic; font-weight:500; color:var(--c-terra); }
.umb-sub { position:relative; font-family:var(--font-serif); font-size:21px; line-height:1.55; color:var(--c-ink-dim); margin:32px auto 0; max-width:56ch; }
.umb-dot { position:relative; display:inline-block; width:9px; height:9px; border-radius:50%; background:var(--c-terra); margin:38px auto 0; box-shadow:0 0 0 6px rgba(194,96,61,.16); }

.umb-idxhead { display:flex; align-items:baseline; justify-content:space-between; padding:30px 64px 8px; border-top:1px solid var(--c-line); }
.umb-kicker { font-family:var(--font-ui); font-size:12.5px; letter-spacing:.2em; text-transform:uppercase; color:#9A8F7E; }

/* family-worlds preview cards */
.umb-worlds { display:grid; grid-template-columns:1fr 1fr; gap:28px; padding:34px 64px 26px; }
.umb-world { border-radius:22px; overflow:hidden; text-decoration:none; display:flex; flex-direction:column; transition:transform .2s,box-shadow .2s; }
.umb-world:hover { transform:translateY(-4px); }
.umb-wstage { position:relative; height:204px; overflow:hidden; }
.umb-wbody { padding:24px 28px 28px; display:flex; flex-direction:column; gap:9px; flex:1; }
.umb-wtier { font-family:var(--font-ui); font-size:11.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; }
.umb-wname { font-family:var(--font-display); font-size:31px; font-weight:700; letter-spacing:-.01em; line-height:1; }
.umb-wdesc { font-family:var(--font-serif); font-size:16px; line-height:1.55; margin:2px 0 0; }
.umb-wcta { margin-top:auto; padding-top:14px; font-family:var(--font-ui); font-weight:700; font-size:15px; }
/* Oops preview */
.umb-world-oops { background:#FFF9EC; border:3px solid #20243A; box-shadow:8px 9px 0 rgba(207,107,71,.42); }
.umb-world-oops:hover { box-shadow:8px 14px 0 rgba(207,107,71,.5); }
.umb-ostage { background:linear-gradient(180deg,#BFE3F2,#DCEFDB 60%,#F7E7BE); border-bottom:3px solid #20243A; }
.umb-osun { position:absolute; width:72px; height:72px; border-radius:50%; background:#FFD24A; top:24px; left:30px; box-shadow:0 0 0 10px rgba(255,210,74,.26),0 0 0 22px rgba(255,210,74,.12); }
.umb-ohill { position:absolute; left:0; right:0; bottom:0; height:60px; background:#9ED39A; border-radius:50% 50% 0 0/40px 40px 0 0; }
.umb-oniv { position:absolute; bottom:-4px; left:50%; transform:translateX(-50%); height:188px; width:auto; }
.umb-ospk { position:absolute; border-radius:50%; }
.umb-world-oops .umb-wtier { color:#CF6B47; }
.umb-world-oops .umb-wcta { color:#20243A; }
.umb-oword { color:#CF6B47; position:relative; }
.umb-oword::after { content:""; position:absolute; left:-1px; right:-1px; bottom:.04em; height:8px; background:#FFD24A; border-radius:5px; z-index:-1; transform:rotate(-1.5deg); }
/* Onward preview */
.umb-world-onw { background:#14111E; border:3px solid #14111E; box-shadow:8px 9px 0 rgba(139,108,255,.4); }
.umb-world-onw:hover { box-shadow:8px 14px 0 rgba(139,108,255,.55); }
.umb-nstage { background:#1B1430; }
.umb-nglow { position:absolute; inset:0; background:radial-gradient(72% 92% at 82% 18%,rgba(255,93,162,.5),transparent 60%),radial-gradient(72% 92% at 16% 104%,rgba(139,108,255,.55),transparent 60%),radial-gradient(40% 50% at 50% 50%,rgba(242,180,58,.12),transparent 70%); }
.umb-nbig { position:absolute; right:20px; bottom:-22px; font-family:var(--font-display); font-style:italic; font-weight:500; font-size:92px; line-height:1; color:rgba(255,255,255,.07); }
.umb-nbeacon { position:absolute; left:30px; top:26px; filter:drop-shadow(0 0 16px rgba(255,93,162,.8)); }
.umb-world-onw .umb-wtier { color:#FF77B0; }
.umb-world-onw .umb-wname { color:#F6F1EA; }
.umb-world-onw .umb-wdesc { color:#CDC6DA; }
.umb-world-onw .umb-wcta { color:#FF77B0; }
.umb-nword { background:linear-gradient(90deg,#FF5DA2,#B57BFF); -webkit-background-clip:text; background-clip:text; color:transparent; }

.umb-spread { display:grid; grid-template-columns:1fr 1.25fr; gap:56px; padding:64px; border-top:1px solid var(--c-line); align-items:start; }
.umb-st { font-family:var(--font-display); font-weight:400; font-size:42px; line-height:1.04; letter-spacing:-.02em; margin:0; }
.umb-st em { font-style:italic; color:var(--c-terra); }
.umb-cols { column-count:2; column-gap:34px; font-family:var(--font-serif); font-size:16px; line-height:1.66; color:var(--c-ink-dim); }
.umb-cols p { margin:0 0 14px; }
.umb-pull { font-family:var(--font-display); font-style:italic; font-weight:400; font-size:31px; line-height:1.3; color:var(--c-ink); margin:0; padding:10px 0 0; border-top:2px solid var(--c-terra); display:inline-block; }

.umb-manifesto { background:#33261E; color:#F3E9DB; padding:84px 64px; text-align:center; position:relative; overflow:hidden; }
.umb-manifesto::before { content:""; position:absolute; inset:0; background:radial-gradient(50% 80% at 50% 0%,rgba(224,165,46,.2),transparent 70%); pointer-events:none; }
.umb-mq { position:relative; font-family:var(--font-display); font-style:italic; font-weight:400; font-size:44px; line-height:1.28; letter-spacing:-.01em; margin:0 auto; max-width:24ch; color:#F7EEE1; }
.umb-mq b { font-style:normal; font-weight:500; color:#F2B43A; }
.umb-foot3 { position:relative; display:grid; grid-template-columns:repeat(3,1fr); gap:40px; max-width:1052px; margin:56px auto 0; text-align:left; }
.umb-foot3 h4 { font-family:var(--font-display); font-size:18px; font-weight:600; color:#F7EEE1; margin:0 0 8px; }
.umb-foot3 h4 span { color:#F2B43A; }
.umb-foot3 p { font-family:var(--font-serif); font-size:15px; line-height:1.55; color:rgba(243,233,219,.66); margin:0; }

.umb-mail { padding:64px; display:flex; align-items:flex-end; justify-content:space-between; gap:40px; flex-wrap:wrap; }
.umb-mailh { font-family:var(--font-display); font-size:32px; font-weight:600; letter-spacing:-.01em; margin:0; }
.umb-mailh em { font-style:italic; color:var(--c-terra); }
.umb-mailp { font-family:var(--font-serif); font-size:16px; color:var(--c-ink-soft); margin:8px 0 0; }
.umb-mf { display:flex; align-items:baseline; gap:16px; border-bottom:2px solid var(--c-ink); padding-bottom:10px; min-width:380px; }
.umb-mi { flex:1; border:none; background:transparent; font-family:var(--font-serif); font-size:19px; color:var(--c-ink); outline:none; }
.umb-mb { background:none; border:none; cursor:pointer; font-family:var(--font-ui); font-size:13px; letter-spacing:.16em; text-transform:uppercase; color:#B0622F; font-weight:600; }

.umb-foot { border-top:1px solid var(--c-line); padding:30px 64px; display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; font-family:var(--font-ui); font-size:13px; color:#8A8071; }
.umb-foot a { text-decoration:none; color:#8A8071; margin-left:24px; }
.umb-foot b { color:#6E6356; font-weight:600; }

/* responsive */
@media (max-width: 880px) {
  .umb-nav, .umb-idxhead, .umb-worlds, .umb-mail, .umb-foot { padding-left:28px; padding-right:28px; }
  .umb-hero { padding:56px 28px 48px; }
  .umb-h1 { font-size:clamp(40px,8.5vw,60px); }
  .umb-worlds { grid-template-columns:1fr; }
  .umb-spread { grid-template-columns:1fr; gap:28px; padding:48px 28px; }
  .umb-manifesto { padding:60px 28px; }
  .umb-mq { font-size:32px; }
  .umb-foot3 { grid-template-columns:1fr; gap:24px; }
}
@media (max-width: 560px) {
  .umb-nl { display:none; }
  .umb-sub { font-size:18px; }
  .umb-st { font-size:32px; }
  .umb-cols { column-count:1; }
  .umb-mail { flex-direction:column; align-items:stretch; padding:48px 22px; }
  .umb-mf { min-width:0; }
  .umb-foot { flex-direction:column; align-items:flex-start; }
  .umb-foot a { margin-left:0; margin-right:18px; }
}