:root{color-scheme:light;
  --ink:#191919;
  --muted:#65635e;
  --line:#d6d3cb;
  --bg:#f6f4ee;
  --amber:#e85624}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;
  background:var(--bg);
  color:var(--ink);
  font:16px/1.6 'Inter',Arial,sans-serif}
a{color:inherit;
  text-decoration:none}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid #bc3c16;
  outline-offset:5px}

.wrap{width:min(1280px,calc(100% - 64px));
  margin-inline:auto}
.skip{position:absolute;
  top:-100px;
  background:white;
  padding:12px;
  z-index:10}
.skip:focus{top:0}
.masthead .wrap{display:flex;
  justify-content:space-between;
  align-items:center;
  min-height:104px;
  border-bottom:1px solid var(--line);
  gap:20px}
.brand{display:inline-flex;
  align-items:center;
  gap:12px;
  font-weight:800;
  font-size:20px;
  letter-spacing:-.04em}
.brand img{width:49px;
  height:49px;
  border-radius:50%}
nav{display:flex;
  align-items:center;
  gap:32px;
  font-size:14px;
  font-weight:600}
nav a{padding:12px 0}

.hero{position:relative;
  padding:64px 0 46px}
.hero .wrap{display:grid;
  grid-template-columns:1.1fr 1fr;
  align-items:center;
  gap:48px}
.hero-copy{padding-block:20px}
.label{text-transform:uppercase;
  letter-spacing:.14em;
  font-size:11px;
  font-weight:700;
  margin:0 0 24px;
  color:#6b5143}
.hero .label{display:flex;
  align-items:center;
  gap:10px}
.hero .label:before{content:"";
  width:7px;
  height:7px;
  background:var(--amber);
  border-radius:50%}
h1,h2,p{margin:0}
h1{font-size:clamp(48px,5.7vw,81px);
  line-height:1.01;
  letter-spacing:-.065em;
  font-weight:750}
h1 em{font:inherit;
  color:#bf431e}
.lede{font-size:17px;
  max-width:34ch;
  color:var(--muted);
  margin-top:25px;
  line-height:1.65}
.button{display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
  background:#20201e;
  color:white;
  padding:14px 22px;
  min-height:50px;
  border-radius:30px;
  font-weight:600;
  font-size:14px}

.hero .button{margin-top:28px}
.art-panel{position:relative;
  height:520px;
  overflow:hidden;
  border-radius:180px 180px 16px 16px;
  background:#070504}
.hero-art{width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 52%}
.art-panel:after{content:"";
  position:absolute;
  inset:50% 0 0;
  background:linear-gradient(transparent,#000a)}
.art-caption{position:absolute;
  bottom:25px;
  left:27px;
  right:27px;
  color:#f3e6d7;
  z-index:1;
  font-size:12px;
  letter-spacing:.04em;
  display:flex;
  justify-content:space-between}
.channel{padding:30px 0 58px}
.section-heading{display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:20px;
  margin-bottom:21px}
.section-heading h2{font-size:27px;
  letter-spacing:-.045em;
  line-height:1.15}
.section-heading p{font-size:13px;
  color:var(--muted)}
.channel-list{display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  list-style:none;
  margin:0;
  padding:0}
.channel-list a{display:flex;
  flex-direction:column;
  min-height:157px;
  background:#fffdfa;
  border:1px solid var(--line);
  border-radius:12px;
  padding:21px;
  position:relative;
  transition:transform .18s,background .18s}

.platform-mark{display:flex;
  align-items:center;
  justify-content:center;
  font-size:19px;
  font-weight:800;
  background:#efede7;
  border-radius:50%;
  width:36px;
  height:36px;
  margin-bottom:15px}
.channel-list strong{font-size:16px;
  line-height:1.4}
.channel-list small{font-size:12px;
  color:var(--muted)}
.arrow{position:absolute;
  right:20px;
  top:22px;
  font-size:23px}
.about{border-top:1px solid var(--line);
  padding-block:52px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:70px}
.about h2{font-size:44px;
  line-height:1.06;
  letter-spacing:-.055em}
.about .label{margin-bottom:15px}
.about>p{align-self:center;
  color:var(--muted);
  font-size:17px;
  max-width:46ch}
.contact{padding:65px 0;
  background:#eae6dc}
.contact .wrap{display:grid;
  grid-template-columns:1fr 1fr;
  gap:70px}
.contact h2{font-size:clamp(42px,4.5vw,64px);
  letter-spacing:-.06em;
  line-height:1.05;
  max-width:10ch}
.contact .label{margin-bottom:19px}
.contact p:not(.label){max-width:38ch;
  color:var(--muted);
  margin-top:21px}
.email{display:inline-flex;
  padding-block:12px;
  margin-top:19px;
  border-bottom:1px solid #89847b;
  font-size:16px;
  font-weight:600;
  overflow-wrap:anywhere}
form{display:grid;
  gap:17px;
  min-width:0}
form label{display:grid;
  gap:7px;
  font-size:12px;
  font-weight:650}
form input,form textarea{width:100%;
  border:1px solid #bcb7ac;
  background:#f9f7f1;
  border-radius:5px;
  padding:12px;
  font:inherit;
  font-size:16px;
  color:var(--ink)}
form input{min-height:46px}
form textarea{resize:vertical}
form .button{justify-self:start;
  border:0;
  font:inherit;
  font-size:14px}
form button:disabled{background:#625e57;
  color:#fff}
form p#form-status{font-size:12px;
  margin:0}
.footer{padding:25px 0}
.footer .wrap{display:flex;
  justify-content:space-between;
  gap:20px;
  align-items:center}
.footer .brand{font-size:16px}
.footer .brand img{width:32px;
  height:32px}
.footer>a,.footer .wrap>a:last-child{font-size:13px;
  padding:12px}

@media(max-width:800px){.wrap{width:calc(100% - 40px)}
.masthead .wrap{min-height:80px}
.brand{font-size:17px}
.brand img{width:39px;
  height:39px}
nav{gap:16px}
.hero{padding:26px 0 18px}
.hero .wrap{grid-template-columns:1fr;
  gap:28px}
.hero-copy{padding-block:15px 0}
h1{font-size:clamp(43px,8vw,64px);
  max-width:14ch}
.hero .label{margin-bottom:17px}
.lede{font-size:16px;
  margin-top:20px;
  max-width:38ch}
.art-panel{height:220px;
  border-radius:100px 100px 12px 12px}
.hero-art{object-position:center 45%}
.art-caption{font-size:10px;
  bottom:17px;
  left:20px;
  right:20px}
.channel{padding:20px 0 36px}
.channel-list{grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px}
.channel-list a{min-height:137px;
  padding:16px}
.platform-mark{margin-bottom:10px;
  width:29px;
  height:29px;
  font-size:16px}
.section-heading{margin-bottom:15px}
.section-heading h2{font-size:24px}
.section-heading p{display:none}
.about{grid-template-columns:1fr;
  gap:22px;
  padding-block:35px}
.about h2{font-size:38px}
.contact{padding-block:39px}
.contact .wrap{grid-template-columns:1fr;
  gap:34px}
.contact h2{font-size:44px;
  max-width:14ch}
.contact p:not(.label){margin-top:17px}
.email{font-size:15px;
  margin-top:10px}
.footer .brand{font-size:13px}
.footer .wrap{gap:8px}
.arrow{right:16px;
  top:15px}
}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}
*{transition:none!important}
}


nav a { min-height:44px; display:inline-flex; align-items:center; }
form [hidden] { display:none; }
#form-status { min-height:1.6em; }
.privacy { font-size:13px; max-width:60ch; }
@media(max-width:360px) { .wrap { width:calc(100% - 32px); } h1 { font-size:39px; } nav { gap:12px; } .brand { gap:7px; font-size:15px; } }

/* Preserve the planet and rings in the stacked layout. */
@media (max-width: 800px) {
  .art-panel {
    height: auto;
    aspect-ratio: 4 / 3;
    border-radius: 80px 80px 12px 12px;
  }
  .hero-art {
    position: absolute;
    inset: 0;
    object-position: center 40%;
  }
}

#external-link-note { font-size:12px; color:#65635e; margin-top:12px; }

/* Persistent, high-contrast delivery confirmation. */
#form-status {
  font-size: 15px;
  line-height: 1.5;
  scroll-margin-block: 24px;
}
#form-status[data-state="success"],
#form-status[data-state="error"] {
  padding: 20px;
  border-radius: 10px;
  border: 1px solid;
}
#form-status[data-state="success"] {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: #e6f2e8;
  border-color: #91b39a;
  color: #194a2b;
}
#form-status strong {
  display: block;
  font-size: 20px;
  line-height: 1.3;
  margin-bottom: 6px;
}
#form-status .status-detail { display: block; }
#form-status .status-icon {
  display: grid;
  place-items: center;
  flex: 0 0 32px;
  height: 32px;
  border-radius: 50%;
  background: #215c37;
  color: #fff;
  font-size: 21px;
  font-weight: 700;
}
#form-status[data-state="error"] {
  background: #fff0e7;
  border-color: #c58b6e;
  color: #753519;
}

/* Vector icons stay sharp and consistent across mobile browsers. */
.action-icon {
  display: block;
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
}
.channel-list .arrow {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  color: #5b544c;
}
.external-icon { display: block; width: 21px; height: 21px; }


/* Accessible description without a visible caption. */
#external-link-note {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

@media (hover: hover) and (pointer: fine) {
a:hover{color:#a33213}
nav a:hover{text-decoration:underline;
  text-underline-offset:6px}
.button:hover{background:#bf431e;
  color:white}
.channel-list a:hover{transform:translateY(-4px);
  background:#fce9dc;
  color:var(--ink)}
.channel-list a:hover .arrow { color: #a33213; }
}

/* Intrinsic SVG sizes protect against delayed or cached stylesheets. */
.hero .button .action-icon {
  width: 22px;
  height: 22px;
  min-width: 22px;
  flex-shrink: 0;
  color: #fff;
  stroke: #fff;
  overflow: visible;
}
.platform-mark .youtube-icon {
  display: block;
  width: 26px;
  height: 20px;
}
@media (max-width: 800px) {
  .platform-mark .youtube-icon { width: 23px; height: 18px; }
}