@font-face {
  font-family:Barlow Condensed;
  src:url('/assets/fonts/barlow-condensed-bold.ttf') format('truetype');
  font-weight:700;
  font-style:normal;
  font-display:swap
}

@font-face {
  font-family:Manrope;
  src:url('/assets/fonts/manrope-semibold.ttf') format('truetype');
  font-weight:500 700;
  font-style:normal;
  font-display:swap
}

@font-face {
  font-family:Barlow Condensed;
  src:url('/assets/fonts/barlow-condensed.ttf') format('truetype');
  font-weight:600;
  font-style:normal;
  font-display:swap
}

@font-face {
  font-family:Manrope;
  src:url('/assets/fonts/manrope.ttf') format('truetype');
  font-weight:400;
  font-style:normal;
  font-display:swap
}

:root {
  --ink:#191918;
  --paper:#eeede7;
  --muted:#b5b4ad;
  --accent:#e7816d;
  --rule:#42423e;
  --display:'Barlow Condensed','Arial Narrow',Impact,sans-serif;
  --body:Manrope,Arial,sans-serif
}

* {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:28px
}

body {
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:var(--body);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased
}

::selection {
  background:var(--accent);
  color:var(--ink)
}

a {
  color:inherit;
  text-decoration:none
}

button,input {
  font:inherit
}

button,a,input {
  -webkit-tap-highlight-color:transparent
}

a,button {
  touch-action:manipulation
}

button {
  cursor:pointer
}

button:disabled {
  cursor:wait;
  opacity:.65
}

a:focus-visible,button:focus-visible,input:focus-visible {
  outline:3px solid var(--accent);
  outline-offset:5px
}

img {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover
}

figure,p,h1,h2,dl,dd {
  margin:0
}

h1,h2 {
  font-weight:600
}

p {
  max-width:65ch
}

.wrap {
  width:min(1440px,100%);
  padding-inline:clamp(24px,5vw,80px);
  margin-inline:auto
}

.fine {
  font-size:.75rem;
  font-weight:500;
  letter-spacing:.075em;
  line-height:1.5
}

.eyebrow {
  font-size:.75rem;
  font-weight:600;
  letter-spacing:.12em;
  line-height:1.6;
  display:flex;
  align-items:center;
  gap:12px
}

.accent {
  color:var(--accent)
}

.status-dot {
  width:6px;
  height:6px;
  flex:none;
  border-radius:50%;
  background:var(--accent)
}

.wordmark {
  font-family:var(--display);
  font-weight:700;
  font-size:2rem;
  letter-spacing:-.035em;
  line-height:1;
  white-space:nowrap
}

.brand-cross {
  display:inline-block;
  font-family:Arial,sans-serif;
  font-weight:400;
  color:var(--accent);
  font-size:.9em;
  margin-left:.1em
}

.header {
  height:108px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px
}

.header nav {
  display:flex;
  align-items:center;
  gap:36px;
  font-size:.875rem
}

.header nav a {
  padding-block:12px
}

.header nav a:hover,.footer a:hover {
  color:var(--accent)
}

.nav-join {
  border-bottom:1px solid #797971
}

.nav-join span {
  margin-left:25px
}

.hero {
  display:grid;
  grid-template-columns:1fr 1fr;
  padding-top:14px;
  padding-bottom:48px;
  gap:40px
}

.hero-copy {
  padding-top:20px;
  display:flex;
  flex-direction:column;
  align-items:flex-start
}

.hero h1 {
  font-family:var(--display);
  font-size:clamp(6rem,9.8vw,9.6rem);
  line-height:.85;
  letter-spacing:-.022em;
  margin:35px 0 28px
}

.hero h1 .within {
  display:inline-block
}

.hero-description {
  color:#c4c3bc;
  font-size:1rem;
  line-height:1.7
}

.button {
  min-height:54px;
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:40px;
  padding:15px 24px;
  border:1px solid transparent;
  font-size:.875rem;
  font-weight:600;
  transition:background .18s,color .18s
}

.button-light {
  background:var(--paper);
  color:var(--ink)
}

.button-light:hover {
  background:var(--accent)
}

.hero .button {
  margin-top:28px
}

.button span {
  font-size:1.3rem;
  line-height:1
}

.hero-footnote {
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:auto;
  padding-top:38px;
  color:var(--muted)
}

.hero-footnote>a {
  display:grid;
  place-items:center;
  border:1px solid #5a5a53;
  border-radius:50%;
  width:40px;
  height:40px;
  color:var(--paper);
  font-size:1.3rem
}

.hero-visual {
  position:relative;
  min-height:660px;
  overflow:hidden;
  background:#292a27
}

.hero-visual picture {
  display:block;
  height:100%;
  position:absolute;
  inset:0
}

.hero-visual img {
  object-position:50% 45%
}

.image-topline {
  position:absolute;
  top:25px;
  left:26px;
  right:26px;
  display:flex;
  justify-content:space-between;
  text-shadow:0 1px 8px #000
}

.image-topline span:first-child {
  font-size:1rem;
  font-weight:700
}

.image-caption {
  position:absolute;
  inset:auto 0 0;
  padding:70px 26px 26px;
  background:linear-gradient(transparent,rgba(0,0,0,.78));
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:24px
}

.image-caption>span:first-child {
  font-family:var(--display);
  font-size:1.8rem;
  font-weight:600;
  line-height:1.05
}

.image-caption>.fine {
  text-align:right;
  max-width:130px;
  font-size:.75rem
}

.chapter-bar {
  display:flex;
  justify-content:space-between;
  gap:20px;
  padding-block:22px;
  border-top:1px solid var(--rule);
  color:var(--muted)
}

.light-surface {
  background:var(--paper);
  color:var(--ink)
}

.light-surface .accent {
  color:#9f4535
}

.section-space {
  padding-block:100px
}

.story {
  display:grid;
  grid-template-columns:1fr 3fr;
  gap:40px
}

.section-label {
  align-self:start;
  padding-top:12px
}

.story h2 {
  font-size:clamp(2rem,4.1vw,3.8rem);
  line-height:1.15;
  letter-spacing:-.055em;
  font-weight:500
}

.story em {
  font-family:Georgia,serif;
  font-weight:400;
  letter-spacing:-.05em
}

.story-body {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:35px;
  margin-top:34px;
  color:#53534c
}

.story-signature {
  font-size:.75rem;
  letter-spacing:.1em;
  font-weight:700;
  margin-top:35px;
  display:flex;
  align-items:center;
  gap:22px
}

.story-signature span {
  font-size:1.6rem;
  line-height:1
}

.drop {
  padding-bottom:100px
}

.section-heading {
  border-top:1px solid #c6c6bf;
  display:flex;
  justify-content:space-between;
  gap:20px;
  padding-block:27px
}

.section-heading>.fine {
  color:#5d5d55
}

.drop-grid {
  display:grid;
  grid-template-columns:1.15fr 1fr;
  gap:clamp(35px,7vw,105px);
  align-items:center
}

.product-visual {
  position:relative;
  background:#ddded8;
  aspect-ratio:4/4.6;
  overflow:hidden
}

.product-visual picture {
  display:block;
  height:100%
}

.product-visual img {
  object-position:center
}

.concept-label {
  position:absolute;
  z-index:1;
  top:22px;
  left:24px;
  right:24px;
  font-size:.75rem;
  color:#33332e
}

.product-visual figcaption {
  position:absolute;
  bottom:22px;
  left:24px;
  right:24px;
  display:flex;
  justify-content:space-between;
  color:#33332e
}

.drop-copy {
  padding-block:30px
}

.drop-copy h2,.priorities h2,.waitlist h2 {
  font-family:var(--display);
  font-size:clamp(4rem,6.4vw,6.2rem);
  line-height:.94;
  letter-spacing:-.018em
}

.drop-copy h2 {
  margin:26px 0
}

.product-name {
  font-size:.95rem;
  font-weight:700;
  margin-bottom:20px
}

.drop-copy>p:not(.eyebrow):not(.product-name) {
  font-size:1rem;
  color:#53534c
}

.drop-copy .development-note {
  padding-top:22px;
  font-size:.875rem!important;
  line-height:1.75
}

.text-link {
  display:inline-flex;
  justify-content:space-between;
  gap:40px;
  align-items:center;
  min-height:44px;
  border-bottom:1px solid currentColor;
  font-size:.875rem;
  font-weight:600
}

.text-link:hover {
  color:#aa4e3c
}

.drop-copy .text-link {
  margin-top:26px
}

.priorities {
  display:grid;
  grid-template-columns:1fr 1.1fr;
  gap:80px
}

.priorities h2 {
  font-size:clamp(3.6rem,5.6vw,5.4rem);
  margin-top:30px
}

.priorities-intro>p:last-child {
  margin-top:24px;
  font-size:.875rem;
  color:var(--muted)
}

.priority-list {
  padding-top:4px
}

.priority-list>div {
  padding:27px 0;
  border-top:1px solid var(--rule)
}

.priority-list>div:last-child {
  border-bottom:1px solid var(--rule)
}

.priority-list dt {
  font-size:1.2rem;
  font-weight:500;
  display:flex;
  align-items:center;
  gap:24px
}

.priority-list dt span {
  color:var(--accent)
}

.priority-list dd {
  color:var(--muted);
  margin:12px 0 0 42px;
  font-size:.9375rem;
  max-width:43ch
}

.waitlist {
  padding-block:80px 90px;
  position:relative;
  display:grid;
  grid-template-columns:1fr 1.1fr;
  gap:80px
}

.waitlist:before {
  content:'';
  position:absolute;
  top:0;
  left:clamp(24px,5vw,80px);
  right:clamp(24px,5vw,80px);
  height:1px;
  background:var(--rule)
}

.waitlist h2 {
  margin:30px 0 24px
}

.waitlist-intro>p:last-child {
  color:var(--muted);
  font-size:.9375rem
}

.signup-panel {
  align-self:center;
  padding-top:30px
}

label {
  display:block;
  font-size:.875rem;
  font-weight:600;
  margin-bottom:12px
}

.input-row {
  display:flex;
  gap:10px;
  flex-wrap:wrap
}

.input-row input {
  width:100%;
  min-width:0;
  flex:1 1 190px;
  border:1px solid #797970;
  border-radius:0;
  background:transparent;
  color:var(--paper);
  padding:15px 16px;
  min-height:54px;
  appearance:none;
  font-size:1rem
}

.input-row input::placeholder {
  color:#a7a79d
}

.input-row input[aria-invalid=true] {
  border-color:var(--accent)
}

.input-row .button {
  flex:1 1 190px;
  white-space:nowrap
}

.signup-purpose {
  color:var(--muted);
  letter-spacing:0;
  line-height:1.7;
  margin-top:16px
}

.availability {
  font-size:.875rem;
  color:#c5c5ba;
  padding-top:20px;
  line-height:1.65
}

.form-status {
  font-size:.875rem;
  color:var(--accent);
  margin-top:10px
}

.form-status:empty {
  display:none
}

.form-status.success {
  color:#c7dec5
}

.contact-note {
  border-top:1px solid var(--rule);
  margin-top:24px;
  padding-top:22px;
  font-size:.8125rem;
  color:var(--muted)
}

.contact-note a {
  color:var(--paper);
  text-decoration:underline;
  text-underline-offset:4px
}

.contact-note span {
  display:block;
  font-size:.75rem;
  margin-top:6px
}

.partners {
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
  padding-block:30px;
  display:flex;
  align-items:center;
  gap:30px
}

.partners>span {
  font-weight:600;
  font-size:.9375rem
}

.partners>p {
  color:var(--muted);
  font-size:.8125rem;
  flex:1
}

.partners .text-link {
  white-space:nowrap
}

.footer {
  padding-block:45px 24px
}

.footer-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px
}

.footer-top>a:last-child {
  font-size:.875rem
}

.footer-bottom {
  display:flex;
  gap:24px;
  justify-content:space-between;
  color:var(--muted);
  padding-top:40px;
  font-size:.75rem
}

.footer-bottom a {
  min-height:32px
}

.skip-link {
  position:fixed;
  top:12px;
  left:12px;
  z-index:10;
  background:var(--paper);
  color:var(--ink);
  padding:12px 18px;
  transform:translateY(-200%)
}

.skip-link:focus {
  transform:translateY(0)
}

[hidden] {
  display:none!important
}

@media(min-width:1440px) {
  .hero-visual {
    min-height:735px
  }

  .hero-copy {
    padding-top:32px
  }

}

@media(max-width:1000px) {
  .header {
    height:92px
  }

  .hero {
    gap:24px
  }

  .hero h1 {
    font-size:clamp(5rem,10.6vw,7rem)
  }

  .hero-visual {
    min-height:590px
  }

  .hero .eyebrow {
    font-size:.75rem;
    letter-spacing:.06em
  }

  .hero-footnote .fine {
    font-size:.75rem;
    letter-spacing:.025em
  }

  .image-caption {
    flex-direction:column;
    align-items:flex-start;
    gap:14px
  }

  .image-caption>.fine {
    text-align:left;
    max-width:none
  }

  .story {
    grid-template-columns:1fr;
    gap:26px
  }

  .story-content {
    max-width:850px
  }

  .priorities,.waitlist {
    gap:40px;
    grid-template-columns:1fr 1.1fr
  }

  .drop-grid {
    gap:40px
  }

  .section-space {
    padding-block:76px
  }

  .drop {
    padding-bottom:76px
  }

  .partners {
    flex-wrap:wrap;
    gap:12px 30px
  }

  .partners>span {
    width:100%
  }

}

@media(max-width:700px) {
  .header {
    height:84px;
    gap:15px
  }

  .wordmark {
    font-size:1.6rem
  }

  .header nav {
    gap:0;
    font-size:.75rem
  }

  .nav-story,.nav-drop {
    display:none
  }

  .nav-join span {
    margin-left:10px
  }

  .hero {
    grid-template-columns:1fr;
    padding-top:16px;
    padding-bottom:28px;
    gap:32px
  }

  .hero-copy {
    padding-top:0
  }

  .hero .eyebrow {
    font-size:.75rem;
    letter-spacing:.08em
  }

  .hero h1 {
    font-size:clamp(5.9rem,20vw,8.5rem);
    margin-top:26px;
    margin-bottom:24px;
    line-height:.85
  }

  .hero-description {
    font-size:.9375rem
  }

  .hero .button {
    margin-top:24px;
    min-width:220px
  }

  .hero-footnote {
    display:none
  }

  .hero-visual {
    min-height:0;
    aspect-ratio:4/4.6
  }

  .image-caption {
    flex-direction:row;
    align-items:flex-end;
    padding:60px 20px 22px;
    gap:20px
  }

  .image-caption>span:first-child {
    font-size:1.6rem
  }

  .image-caption>.fine {
    font-size:.75rem;
    max-width:100px;
    text-align:right
  }

  .image-topline {
    top:20px;
    left:20px;
    right:20px;
    font-size:.75rem
  }

  .chapter-bar {
    padding-block:18px;
    font-size:.75rem;
    gap:10px
  }

  .chapter-bar>span:nth-child(2) {
    display:none
  }

  .section-space {
    padding-block:58px
  }

  .story {
    gap:25px
  }

  .story h2 {
    font-size:clamp(2rem,6.8vw,3rem)
  }

  .story-body {
    grid-template-columns:1fr;
    gap:18px;
    margin-top:26px;
    font-size:.9375rem
  }

  .story-signature {
    font-size:.75rem;
    margin-top:27px
  }

  .section-heading {
    align-items:flex-start;
    flex-direction:column;
    gap:9px;
    padding-block:23px
  }

  .section-heading>.fine {
    font-size:.75rem
  }

  .drop-grid {
    grid-template-columns:1fr;
    gap:8px
  }

  .drop {
    padding-bottom:56px
  }

  .drop-copy {
    padding-top:30px;
    padding-bottom:0
  }

  .drop-copy h2 {
    font-size:4.5rem;
    margin-block:20px
  }

  .drop-copy>p {
    max-width:48ch
  }

  .product-visual {
    aspect-ratio:4/4.4
  }

  .concept-label {
    font-size:.75rem;
    left:18px;
    top:18px;
    right:18px;
    letter-spacing:.03em
  }

  .product-visual figcaption {
    font-size:.75rem;
    left:18px;
    right:18px;
    bottom:18px
  }

  .priorities {
    grid-template-columns:1fr;
    gap:32px
  }

  .priorities h2 {
    font-size:4rem;
    margin-top:24px
  }

  .priority-list>div {
    padding:22px 0
  }

  .priority-list dt {
    font-size:1.05rem;
    gap:20px
  }

  .priority-list dd {
    margin-left:36px;
    font-size:.875rem
  }

  .waitlist {
    grid-template-columns:1fr;
    gap:30px;
    padding-block:58px
  }

  .waitlist h2 {
    font-size:4.5rem;
    margin-block:24px
  }

  .signup-panel {
    padding-top:0
  }

  .input-row {
    flex-direction:column
  }

  .input-row input,.input-row .button {
    flex:auto;
    width:100%
  }

  .availability {
    font-size:.8125rem
  }

  .partners {
    padding-block:28px;
    gap:12px
  }

  .partners>p {
    flex-basis:100%;
    font-size:.8125rem
  }

  .partners .text-link {
    margin-top:0
  }

  .footer {
    padding-top:34px
  }

  .footer-top {
    flex-direction:column;
    align-items:flex-start;
    gap:24px
  }

  .footer-bottom {
    flex-wrap:wrap;
    padding-top:30px;
    gap:15px;
    justify-content:space-between
  }

  .footer-bottom>* {
    flex-basis:calc(50% - 8px)
  }

  .footer-bottom>:nth-child(even) {
    text-align:right
  }

}

@media(max-width:360px) {
  .wrap {
    padding-inline:20px
  }

  .wordmark {
    font-size:1.45rem
  }

  .header nav {
    font-size:.75rem
  }

  .nav-join span {
    margin-left:5px
  }

  .hero h1 {
    font-size:19vw
  }

  .eyebrow {
    font-size:.75rem
  }

  .image-caption>span:first-child {
    font-size:1.4rem
  }

  .image-caption>.fine {
    max-width:85px
  }

  .priority-list dt {
    font-size:1rem
  }

  .waitlist:before {
    left:20px;
    right:20px
  }

}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }

  *,*:before,*:after {
    animation:none!important;
    transition:none!important
  }

}

/* Let large default text sizes reflow columns instead of forcing overflow. */
.hero {
  grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr))
}

.drop-grid {
  grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr))
}

.priorities,.waitlist {
  grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr))
}

.header {
  height:auto;
  min-height:108px;
  flex-wrap:wrap;
  padding-block:26px
}

.header nav {
  flex-wrap:wrap
}

.hero-copy,.drop-copy,.signup-panel,.priorities-intro,.priority-list {
  min-width:0
}

.input-row .button {
  white-space:normal;
  gap:20px
}

.chapter-bar,.section-heading,.footer-top,.footer-bottom {
  flex-wrap:wrap
}

.fine,.eyebrow,.concept-label {
  overflow-wrap:anywhere
}

.image-caption>.fine {
  flex-shrink:0;
  max-width:35%
}

.drop-copy h2,.priorities h2,.waitlist h2 {
  overflow-wrap:anywhere
}

@media(max-width:700px) {
  .header {
    min-height:84px;
    padding-block:24px
  }

  .header nav {
    margin-left:auto
  }

  .hero {
    grid-template-columns:1fr
  }

  .drop-grid,.priorities,.waitlist {
    grid-template-columns:1fr
  }

  .image-caption>span:first-child {
    font-size:clamp(1.3rem,5.5vw,1.6rem)
  }

  .image-caption>.fine {
    max-width:40%
  }

  .hero h1 {
    font-size:20vw
  }

  .drop-copy h2,.priorities h2,.waitlist h2 {
    font-size:min(4.5rem,18vw)
  }

}

.story-content,.story-body>* {
  min-width:0
}

.story h2,.footer-top>a:last-child {
  overflow-wrap:anywhere
}

.story-signature {
  flex-wrap:wrap
}

@media(max-width:1000px) {
  .story {
    grid-template-columns:minmax(0,1fr)
  }

}

/* Frame the approved Symbol & Strength garment panels, without board headings. */
.product-visual.symbol-kurapika-concept { aspect-ratio:auto; background:#232423; }
.symbol-kurapika-concept picture { position:relative; height:auto; aspect-ratio:488 / 420; margin:64px 0 58px; overflow:hidden; }
.symbol-kurapika-concept img { position:absolute; max-width:none; width:209.836066%; height:auto; left:-106.557377%; top:-47.619048%; }
.symbol-kurapika-concept .concept-label,.symbol-kurapika-concept figcaption { color:#f1eee6; }

.hero-visual.symbol-killua-concept { display:flex; align-items:center; background:#232423; }
.symbol-killua-concept picture { position:relative; inset:auto; width:100%; height:auto; aspect-ratio:488 / 420; overflow:hidden; }
.symbol-killua-concept img { position:absolute; max-width:none; width:209.836066%; height:auto; left:-3.278689%; top:-47.619048%; }
.symbol-killua-concept .image-caption { padding-top:24px; background:#232423; }