/* OUTSOCIAL main site: one stylesheet for / (welcome/index.html),
   /activities and /about. The shop at /shop draws the same header and
   footer in outsocial-clothing/components/layout.

   The look is the user's mockup of 2026-10-01: a white page, Inter
   everywhere, headings in heavy uppercase with tight tracking, full bleed
   photographs, and one orange: the pill buttons. Light only, by design. */

:root{
  --ink:#111111; --text:#1C1C1E; --muted:#6B6B70; --faint:#A1A1A6;
  --rule:#E7E7EA; --paper:#FFFFFF; --stone:#F4F4F5; --night:#0A0A09;
  --orange:#F05A28; --orange-hover:#D9481A;
  --gutter:48px; --max:1200px;
  --ui:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{margin:0}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{background:var(--paper); color:var(--text); font-family:var(--ui); font-weight:400; line-height:1.5; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden}
h1,h2,h3,p,ul,ol,figure{margin:0}
ul,ol{padding:0; list-style:none}
a{color:inherit; text-decoration:none}
img{display:block; max-width:100%}
svg{flex:none}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--orange); outline-offset:3px}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}
.skip{position:absolute; left:16px; top:-48px; z-index:100; background:var(--ink); color:#fff; padding:10px 14px; font-size:13px; font-weight:700}
.skip:focus{top:12px}

/* Content is 1200 wide at most; backgrounds run full bleed. */
.wrap{padding-inline:max(var(--gutter), calc((100% - var(--max)) / 2))}

/* Heavy uppercase, the mockup's headline voice. */
.heavy{font-weight:900; text-transform:uppercase; letter-spacing:-.025em; line-height:.98}
.lede{color:var(--muted); font-size:18px; line-height:1.45}
.overline{font-size:12px; font-weight:600; letter-spacing:.16em; text-transform:uppercase}

/* Buttons: the orange pill, and a white one for dark photos. */
.pill{display:inline-flex; align-items:center; justify-content:center; gap:10px; height:48px; padding:0 28px; border-radius:999px; background:var(--orange); color:#fff; font-size:16px; font-weight:500; white-space:nowrap; transition:background-color .15s}
.pill:hover{background:var(--orange-hover)}
.pill.is-white{background:#fff; color:var(--ink)}
.pill.is-white:hover{background:var(--stone)}
.pill.is-small{height:40px; padding:0 20px; font-size:14px}
.ico{width:20px; height:20px; display:inline-block; vertical-align:middle}

/* Header */
.site-header{position:sticky; top:0; z-index:50; background:var(--paper); border-bottom:1px solid var(--rule)}
.header-inner{height:72px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:16px}
.brand{justify-self:start; font-size:22px; font-weight:900; letter-spacing:-.03em; color:var(--ink); white-space:nowrap}
.primary-nav{display:flex; align-items:center; gap:40px}
.primary-nav a{position:relative; font-size:14px; color:var(--muted); white-space:nowrap; transition:color .15s}
.primary-nav a:hover{color:var(--ink)}
.primary-nav a[aria-current="page"]{color:var(--ink); font-weight:500}
.primary-nav a[aria-current="page"]::after{content:""; position:absolute; left:50%; bottom:-10px; width:24px; height:2px; margin-left:-12px; background:var(--orange)}
.header-actions{justify-self:end; display:flex; align-items:center; gap:16px}
.icon-btn{width:40px; height:40px; display:grid; place-items:center; color:var(--ink)}
.icon-btn .ico{width:22px; height:22px}

/* Phones: the links fold into a menu. A <details> works with no JS. */
.menu{display:none; position:relative}
.menu summary{list-style:none; cursor:pointer}
.menu summary::-webkit-details-marker{display:none}
.menu-panel{position:absolute; right:0; top:52px; width:min(280px, calc(100vw - 48px)); background:var(--paper); border:1px solid var(--rule); box-shadow:0 12px 32px rgba(0,0,0,.08); padding:8px 0}
.menu-panel a{display:block; padding:14px 20px; font-size:16px; color:var(--ink)}
.menu-panel a[aria-current="page"]{font-weight:600}
.menu-panel a:hover{background:var(--stone)}
.menu .when-open{display:none}
.menu[open] .when-open{display:block}
.menu[open] .when-closed{display:none}

/* Hero: one photograph, text on the left over a scrim. */
.hero{position:relative; min-height:420px; display:flex; align-items:center; color:#fff; background:var(--night); overflow:hidden}
.hero > img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:70% 50%}
.hero::after{content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(0,0,0,.66) 0%, rgba(0,0,0,.42) 42%, rgba(0,0,0,0) 72%)}
.hero-inner{position:relative; z-index:1; width:100%; padding-block:56px; display:flex; flex-direction:column; align-items:flex-start; gap:20px}
.hero h1{font-size:clamp(38px, 6vw, 64px); max-width:12ch}
.hero p{font-size:20px; line-height:1.4; max-width:31ch; color:rgba(255,255,255,.94)}
.hero .pill{margin-top:8px}

/* Sections */
.section{padding-block:72px}
.section-head{display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:28px}
.section-head h2{font-size:clamp(28px, 3.4vw, 36px)}
.section-head .lede{margin-top:10px}
.arrow-link{display:inline-flex; align-items:center; gap:12px; font-size:14px; font-weight:500; color:var(--ink); white-space:nowrap}
.arrow-link span{transition:transform .15s}
.arrow-link:hover span{transform:translateX(3px)}

/* Activity cards, as the app draws them. */
.cards{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:24px}
.card{display:flex; flex-direction:column; gap:12px; min-width:0}
.card-img{aspect-ratio:1/1; border-radius:2px; overflow:hidden; background:var(--stone)}
.card-img img{width:100%; height:100%; object-fit:cover; transition:transform .5s ease}
.card:hover .card-img img{transform:scale(1.03)}
.kind{display:flex; align-items:center; gap:7px; flex-wrap:wrap; font-size:11px; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--text); padding-inline:12px}
.kind svg{width:15px; height:15px}
.kind .done{color:var(--faint)}
.card h3{font-size:18px; font-weight:400; line-height:1.3; color:var(--ink); padding-inline:12px}
.card:hover h3{text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:1px}
.when{font-size:13px; color:var(--text); padding-inline:12px}
.where{font-size:12px; color:var(--muted); padding-inline:12px; margin-top:-8px}

/* Banner: a second photograph with a statement. */
.banner{position:relative; min-height:320px; display:flex; align-items:center; color:#fff; background:var(--night); overflow:hidden}
.banner > img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:65% 50%}
.banner::after{content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(0,0,0,.6) 0%, rgba(0,0,0,.38) 45%, rgba(0,0,0,0) 75%)}
.banner-inner{position:relative; z-index:1; width:100%; padding-block:48px; display:flex; flex-direction:column; gap:18px}
.banner h2{font-size:clamp(30px, 3.8vw, 40px); line-height:1.02}
.banner p{font-size:17px; line-height:1.4; max-width:32ch; color:rgba(255,255,255,.94)}

/* Store badges, black like the official ones. */
.badges{display:flex; flex-wrap:wrap; align-items:flex-start; gap:16px; margin-top:24px}
.badge-col{display:flex; flex-direction:column; gap:6px}
.store-badge{display:inline-flex; align-items:center; gap:10px; height:52px; min-width:156px; padding:0 16px 0 12px; border-radius:8px; background:#000; color:#fff; border:1px solid #000}
a.store-badge:hover{background:#222}
.store-badge svg{width:28px; height:28px}
.badge-text{display:flex; flex-direction:column; line-height:1.05; text-align:left}
.badge-text small{font-size:10px; font-weight:500; letter-spacing:.02em}
.badge-text strong{font-size:20px; font-weight:600; letter-spacing:-.01em}
.store-badge.is-soon{cursor:default; opacity:.92}
.soon{font-size:12px; color:var(--muted); padding-left:2px}

/* Grey bands: How it works and the closing call to action. */
.band-grey{background:var(--stone)}
.label{font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--ink); margin-bottom:14px}
.split{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr); gap:48px 72px; align-items:start}
.split-head h2{font-size:clamp(30px, 3.6vw, 44px)}
.split-head .lede{margin-top:14px; max-width:40ch}
.split-head .arrow-link{margin-top:24px}

/* How it works: three steps */
.steps{display:flex; flex-direction:column; gap:3px}
.step{display:flex; align-items:flex-start; gap:20px; background:var(--paper); padding:24px 28px}
.step-icon{width:44px; height:44px; flex:none; display:grid; place-items:center; border-radius:999px; background:var(--ink); color:#fff}
.step-icon .ico{width:20px; height:20px}
.step h3{font-size:18px; font-weight:800; text-transform:uppercase; letter-spacing:-.01em; color:var(--ink)}
.step p{font-size:15px; color:var(--muted); margin-top:4px}

/* Trust: four points */
.points{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:32px 32px}
.points li{border-top:1px solid var(--rule); padding-top:20px}
.points .ico{width:22px; height:22px; color:var(--ink)}
.points h3{font-size:16px; font-weight:700; color:var(--ink); margin-top:14px}
.points p{font-size:14px; color:var(--muted); margin-top:4px}

/* Closing call to action: a big line and a white card */
.cta{display:grid; grid-template-columns:minmax(0,1fr) 380px; gap:48px; align-items:center; padding-block:104px}
.cta-title{font-size:clamp(48px, 8vw, 104px)}
.cta-title.is-mid{font-size:clamp(36px, 5vw, 64px)}
.cta .lede{margin-top:18px; max-width:38ch}
.cta-card{background:var(--paper); padding:28px}
.cta-card .label{margin-bottom:0}
.cta-card .badges{margin-top:18px}
.cta-shop{margin-top:20px; font-size:13px; color:var(--muted)}
.cta-shop a{color:var(--ink); font-weight:600; text-decoration:underline; text-decoration-color:var(--orange); text-decoration-thickness:2px; text-underline-offset:4px}
.cta-shop a:hover{color:var(--orange)}

/* Simple pages: /activities and /about */
.page-head{padding-top:64px; padding-bottom:8px}
.page-head h1{font-size:clamp(36px, 5vw, 56px)}
.page-head .lede{margin-top:14px; max-width:46ch}
.type-grid{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:32px 24px}
.type-grid .card-img{aspect-ratio:4/3}
.type-grid p.blurb{font-size:14px; color:var(--muted); padding-inline:12px; margin-top:-4px}
.type-grid .go{font-size:13px; font-weight:500; color:var(--ink); padding-inline:12px}
.cta-band{border-top:1px solid var(--rule)}
.prose{max-width:680px}
.prose h2{font-size:clamp(24px, 3vw, 30px); margin-top:56px; margin-bottom:14px}
.prose h2:first-child{margin-top:0}
.prose p{font-size:17px; line-height:1.6; color:var(--text)}
.prose p + p{margin-top:14px}
.prose a{color:var(--ink); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px}
.prose a:hover{color:var(--orange)}
.social-row{display:flex; gap:12px; margin-top:16px}
.social-row a{width:44px; height:44px; display:grid; place-items:center; border:1px solid var(--rule); border-radius:999px; color:var(--ink)}
.social-row a:hover{border-color:var(--ink)}

/* Footer: a solid black block that ends every page. */
.site-footer{background:var(--night); color:#fff}
.footer-top{display:flex; justify-content:space-between; align-items:flex-start; gap:48px; padding-top:80px; padding-bottom:72px}
.footer-mark{font-size:clamp(56px, 9vw, 128px); font-weight:900; letter-spacing:-.04em; line-height:.9; color:#fff}
.footer-cols{display:flex; gap:56px; padding-top:8px}
.footer-head{font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--orange); margin-bottom:14px}
.footer-cols ul{display:flex; flex-direction:column; gap:10px}
.footer-cols a{font-size:14px; color:#fff}
.footer-cols nav a:hover{text-decoration:underline; text-underline-offset:3px}
.footer-social{display:flex; align-items:flex-start; gap:12px}
.footer-social a{display:grid; place-items:center; width:36px; height:36px; border:1px solid rgba(255,255,255,.28); border-radius:999px; color:#fff}
.footer-social a:hover{border-color:#fff}
.footer-social .ico{width:17px; height:17px}
.footer-legal{display:flex; justify-content:space-between; gap:12px 24px; flex-wrap:wrap; border-top:1px solid rgba(255,255,255,.18); padding-block:22px 28px; font-size:12px; color:rgba(255,255,255,.6)}
.footer-legal nav{display:flex; gap:20px}
.footer-legal a:hover{color:#fff}

/* Reflow */
@media (max-width:1100px){
  .primary-nav{gap:28px}
  .footer-top{flex-direction:column}
  .split{grid-template-columns:1fr}
  .cta{grid-template-columns:1fr}
}
@media (max-width:900px){
  :root{--gutter:32px}
  .cards{grid-template-columns:repeat(2, minmax(0,1fr)); gap:32px 16px}
  .type-grid{grid-template-columns:repeat(2, minmax(0,1fr)); gap:32px 16px}
}
@media (max-width:820px){
  .header-inner{grid-template-columns:auto 1fr; height:64px}
  .site-header .primary-nav{display:none}
  .menu{display:block}
  .header-actions{gap:4px}
  .header-actions .pill{margin-left:6px}
}
@media (max-width:640px){
  :root{--gutter:24px}
  .brand{font-size:19px}
  .header-actions .pill{height:36px; padding:0 14px; font-size:13px}
  .icon-btn{width:36px; height:36px}
  .hero{min-height:520px; align-items:flex-end}
  .hero > img{object-position:72% 50%}
  .hero::after{background:linear-gradient(0deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.45) 55%, rgba(0,0,0,.15) 100%)}
  .hero-inner{padding-block:40px}
  .hero p{font-size:17px}
  .section{padding-block:56px}
  .section-head{flex-direction:column; align-items:flex-start; gap:14px}
  .lede{font-size:16px}
  .kind,.card h3,.when,.where,.type-grid p.blurb,.type-grid .go{padding-inline:0}
  .card h3{font-size:16px}
  .where{font-size:11px}
  .banner{min-height:360px; align-items:flex-end}
  .banner > img{object-position:58% 50%}
  .banner::after{background:linear-gradient(0deg, rgba(0,0,0,.7) 0%, rgba(0,0,0,.4) 60%, rgba(0,0,0,.1) 100%)}
  .banner p{font-size:16px}
  .badges{gap:12px}
  .store-badge{min-width:0; height:48px; padding:0 12px 0 10px; gap:8px}
  .store-badge svg{width:24px; height:24px}
  .badge-text strong{font-size:17px}
  .step{padding:20px}
  .points{gap:24px 16px}
  .cta{padding-block:72px}
  .cta-card{padding:22px}
  .footer-top{padding-top:56px; padding-bottom:48px; gap:40px}
  .footer-cols{flex-wrap:wrap; gap:32px 48px}
  .footer-social{width:100%}
  .footer-legal{flex-direction:column}
  .page-head{padding-top:48px}
}
@media (max-width:360px){
  .brand{font-size:17px}
  .header-actions .pill{padding:0 12px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .card-img img,.arrow-link span{transition:none}
}