/*
Theme Name:   YET — Be Great Now
Theme URI:    https://www.weareyet.com/
Description:  Child theme of Astra carrying the YET brand system: ink black ground, bone white, greatness gold at 10%, and the sheared-corner motif taken from the logo's cut terminals. Artwork is the only source of chroma.
Author:       YET
Template:     astra
Version:      1.0.6
Text Domain:  yet-child
*/

/* ---------------------------------------------------------------
   1. TOKENS
   --------------------------------------------------------------- */
:root {
  --yet-ink:        #0A0A0B;
  --yet-ink-raised: #0E0E10;
  --yet-card:       #131315;
  --yet-line:       #1E1E20;
  --yet-line-warm:  #222225;
  --yet-rule:       #3A3A3D;
  --yet-bone:       #F4F2ED;
  --yet-white:      #FFFFFF;
  --yet-body:       #C9C6C0;
  --yet-muted:      #A5A5AB;
  --yet-faint:      #85858B;
  --yet-gold:       #D4AF37;
  --yet-gold-lit:   #F0CF63;
  --yet-gold-deep:  #7A5F0C;

  --yet-display: 'Archivo Black', system-ui, sans-serif;
  --yet-sans:    'Barlow', system-ui, sans-serif;

  --yet-gutter: 80px;
  --yet-cut:    14px;
  --yet-cut-lg: 26px;
}

/* The one shape: a bite out of the bottom-right corner, at the angle
   the logo already cuts into every letter. */
.yet-cut {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--yet-cut)), calc(100% - var(--yet-cut)) 100%, 0 100%);
}
.yet-cut-lg {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--yet-cut-lg)), calc(100% - var(--yet-cut-lg)) 100%, 0 100%);
}

/* ---------------------------------------------------------------
   2. GROUND
   --------------------------------------------------------------- */
body.yet-home {
  margin: 0;
  background: var(--yet-ink);
  color: var(--yet-white);
  font-family: var(--yet-sans);
  -webkit-font-smoothing: antialiased;
}
.yet-home * { box-sizing: border-box; }
.yet-home img { max-width: 100%; height: auto; }
.yet-home a { color: var(--yet-gold); text-decoration: none; }
.yet-home a:hover,
.yet-home a:focus-visible { color: var(--yet-gold-lit); }
.yet-home :focus-visible { outline: 2px solid var(--yet-gold); outline-offset: 3px; }
.yet-wrap { width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 var(--yet-gutter); }

.yet-skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--yet-gold); color: var(--yet-ink);
  padding: 14px 22px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}
.yet-skip:focus { left: 0; }

/* ---------------------------------------------------------------
   3. TYPE
   --------------------------------------------------------------- */
.yet-home h1, .yet-home h2, .yet-home h3, .yet-quote {
  font-family: var(--yet-display);
  text-transform: uppercase;
  letter-spacing: -.02em;
  margin: 0;
}
.yet-eyebrow {
  margin: 0 0 18px;
  font-size: 13px; font-weight: 700;
  letter-spacing: .34em; text-transform: uppercase;
  color: var(--yet-gold);
}
.yet-eyebrow--quiet { color: var(--yet-faint); }
.yet-eyebrow--dark  { color: var(--yet-gold-deep); }
.yet-lede { font-size: 21px; line-height: 1.6; color: var(--yet-body); margin: 0 0 44px; }

/* ---------------------------------------------------------------
   4. BUTTONS
   --------------------------------------------------------------- */
.yet-btn {
  display: inline-block;
  font-family: var(--yet-sans);
  font-size: 15px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  padding: 20px 38px; border: none; cursor: pointer;
  text-align: center;
}
.yet-btn--gold  { background: var(--yet-gold); color: var(--yet-ink); }
.yet-btn--gold:hover, .yet-btn--gold:focus-visible { background: var(--yet-gold-lit); color: var(--yet-ink); }
.yet-btn--ghost { background: none; border: 1px solid var(--yet-rule); color: var(--yet-white); }
.yet-btn--ghost:hover, .yet-btn--ghost:focus-visible { border-color: var(--yet-white); color: var(--yet-white); }
.yet-btn--ink   { background: var(--yet-ink); color: var(--yet-white); }
.yet-btn--ink:hover, .yet-btn--ink:focus-visible { background: #22222A; color: var(--yet-white); }
.yet-btn--outline-dark { background: none; border: 1px solid #A8A498; color: var(--yet-ink); }

.yet-link {
  font-size: 13px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
}

/* ---------------------------------------------------------------
   5. HEADER
   --------------------------------------------------------------- */
.yet-header {
  border-bottom: 1px solid var(--yet-line);
}
.yet-header__inner {
  height: 92px; display: flex; align-items: center; gap: 48px;
}
.yet-header__logo img { height: 40px; width: auto; display: block; }
.yet-nav { display: flex; align-items: center; gap: 34px; flex-grow: 1; }
.yet-nav a {
  font-size: 14px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--yet-body);
}
.yet-nav a:hover, .yet-nav a:focus-visible { color: var(--yet-white); }
.yet-header .yet-btn { padding: 14px 26px; font-size: 13px; letter-spacing: .12em; }

.yet-burger {
  display: none; background: none; border: none; cursor: pointer;
  width: 46px; height: 46px; padding: 0;
  flex-direction: column; justify-content: center; gap: 6px; align-items: flex-end;
}
.yet-burger span { display: block; height: 2px; background: var(--yet-white); }
.yet-burger span:nth-child(1), .yet-burger span:nth-child(2) { width: 26px; }
.yet-burger span:nth-child(3) { width: 16px; background: var(--yet-gold); }

/* ---------------------------------------------------------------
   6. HERO
   --------------------------------------------------------------- */
.yet-hero { padding: 96px 0 104px; }
.yet-hero__inner { display: flex; gap: 64px; align-items: flex-start; }
.yet-hero__copy { flex: 1 1 60%; max-width: 760px; }
.yet-hero__art  { flex: 1 1 40%; position: relative; }
.yet-hero h1 { font-size: clamp(48px, 6.6vw, 96px); line-height: .93; margin-bottom: 32px; }
.yet-hero h1 .yet-gold { color: var(--yet-gold); }
.yet-hero .yet-lede { max-width: 560px; }
.yet-actions { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }

.yet-rule-skew {
  display: inline-block; width: 56px; height: 2px;
  background: var(--yet-gold); transform: skewX(-40deg);
  margin-right: 16px; vertical-align: middle;
}
.yet-kicker { display: flex; align-items: center; margin-bottom: 36px; }
.yet-kicker .yet-eyebrow { margin: 0; }

.yet-artframe { width: 100%; aspect-ratio: 44 / 62; overflow: hidden; background: var(--yet-card); }
.yet-artframe img { width: 100%; height: 100%; object-fit: cover; display: block; }
.yet-artframe--empty { display: flex; align-items: center; justify-content: center; border: 1px solid var(--yet-line-warm); }

/* ---------------------------------------------------------------
   7. DECLARATION
   --------------------------------------------------------------- */
.yet-declaration {
  background: var(--yet-ink-raised);
  border-top: 1px solid var(--yet-line);
  border-bottom: 1px solid var(--yet-line);
  padding: 92px 0;
}
.yet-quote {
  font-size: clamp(28px, 3.7vw, 52px); line-height: 1.16;
  max-width: 1180px; margin: 0;
}
.yet-quote .yet-gold { color: var(--yet-gold); }

/* ---------------------------------------------------------------
   8. PATHWAYS
   --------------------------------------------------------------- */
.yet-section { padding: 100px 0; }
.yet-section__head { display: flex; align-items: flex-end; gap: 40px; margin-bottom: 56px; }
.yet-section__head h2 { font-size: clamp(32px, 4.1vw, 58px); line-height: 1.02; flex-grow: 1; }
.yet-section__head .yet-link { padding-bottom: 8px; border-bottom: 2px solid var(--yet-rule); white-space: nowrap; }

.yet-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.yet-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; margin-top: 28px; }

.yet-card {
  background: var(--yet-card); border: 1px solid var(--yet-line-warm);
  padding: 40px 36px; display: flex; flex-direction: column;
}
.yet-card__num {
  font-family: var(--yet-display); font-size: 15px; color: var(--yet-gold);
  letter-spacing: .08em; margin-bottom: 26px; display: block;
  transform: skewX(-10deg); transform-origin: left;
}
.yet-card h3 { font-size: 27px; line-height: 1.12; margin-bottom: 16px; }
.yet-card p  { font-size: 16px; line-height: 1.62; color: var(--yet-body); margin: 0 0 26px; flex-grow: 1; }
.yet-card__meta { font-size: 13px; line-height: 1.5; color: var(--yet-muted); margin: 0 0 22px; flex-grow: 0; }

.yet-row {
  border: 1px solid var(--yet-line-warm); padding: 30px 34px;
  display: flex; align-items: center; gap: 24px;
}
.yet-row h3 { font-size: 20px; margin-bottom: 7px; }
.yet-row p  { font-size: 15px; line-height: 1.5; color: var(--yet-body); margin: 0; }
.yet-row__body { flex-grow: 1; }

/* ---------------------------------------------------------------
   9. ART OF RECOVERY
   --------------------------------------------------------------- */
.yet-art { background: var(--yet-bone); color: var(--yet-ink); display: flex; align-items: stretch; }
.yet-art__copy { flex: 0 0 620px; padding: 88px 72px; display: flex; flex-direction: column; justify-content: center; }
.yet-art__copy h2 { font-size: clamp(32px, 3.6vw, 50px); line-height: 1.04; margin-bottom: 26px; }
.yet-art__copy p  { font-size: 18px; line-height: 1.64; color: #3A3A3D; margin: 0 0 22px; }
.yet-art__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 16px; }
.yet-art__actions .yet-btn { font-size: 14px; padding: 18px 32px; }
.yet-art__tiles { flex-grow: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.yet-art__tile { background: var(--yet-ink); overflow: hidden; min-height: 560px; }
.yet-art__tile:nth-child(2) { background: var(--yet-card); }
.yet-art__tile img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------------------------------------------------------------
   10. THE CODE
   --------------------------------------------------------------- */
.yet-code__head h2 { font-size: clamp(32px, 4.1vw, 58px); line-height: 1.02; max-width: 900px; margin-bottom: 54px; }
.yet-code__grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px; background: var(--yet-line-warm); border: 1px solid var(--yet-line-warm);
}
.yet-code__cell { background: var(--yet-ink); padding: 34px 28px; }
.yet-code__cell span {
  font-family: var(--yet-display); font-size: 13px; color: var(--yet-gold);
  display: block; margin-bottom: 14px;
}
.yet-code__cell h3 { font-family: var(--yet-sans); font-size: 19px; font-weight: 700; line-height: 1.22; text-transform: none; letter-spacing: 0; margin-bottom: 9px; }
.yet-code__cell p  { font-size: 14px; line-height: 1.55; color: var(--yet-muted); margin: 0; }

/* ---------------------------------------------------------------
   11. JOIN
   --------------------------------------------------------------- */
.yet-join {
  background: var(--yet-ink-raised);
  border-top: 1px solid var(--yet-line);
  border-bottom: 1px solid var(--yet-line);
  padding: 92px 0;
}
.yet-join__inner { display: flex; align-items: center; gap: 96px; }
.yet-join__copy { flex: 0 0 640px; }
.yet-join__copy h2 { font-size: clamp(30px, 3.4vw, 46px); line-height: 1.06; margin-bottom: 20px; }
.yet-join__copy p  { font-size: 18px; line-height: 1.6; color: var(--yet-body); margin: 0; }
.yet-form { flex-grow: 1; display: flex; flex-direction: column; gap: 18px; }
.yet-field { display: flex; flex-direction: column; gap: 9px; }
.yet-field label {
  font-size: 13px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--yet-body);
}
.yet-field input {
  background: var(--yet-ink); border: 1px solid var(--yet-rule); color: var(--yet-white);
  font-family: var(--yet-sans); font-size: 17px; padding: 19px 20px; width: 100%;
}
.yet-field input::placeholder { color: var(--yet-faint); }
.yet-form .yet-fine { font-size: 13px; line-height: 1.5; color: var(--yet-muted); margin: 0; }
.yet-note { font-size: 15px; line-height: 1.5; color: var(--yet-gold); margin: 0; }

/* ---------------------------------------------------------------
   12. DROP
   --------------------------------------------------------------- */
.yet-drop__inner { display: flex; gap: 56px; }
.yet-drop__copy { flex: 0 0 420px; }
.yet-drop__copy h2 { font-size: clamp(28px, 2.9vw, 40px); line-height: 1.06; margin-bottom: 20px; }
.yet-drop__copy p  { font-size: 17px; line-height: 1.6; color: var(--yet-body); margin: 0 0 30px; }
.yet-drop__grid { flex-grow: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.yet-product__shot {
  aspect-ratio: 1 / 1; background: var(--yet-card); border: 1px solid var(--yet-line-warm);
  display: flex; align-items: center; justify-content: center;
}
.yet-product__name { display: block; margin-top: 14px; font-size: 15px; font-weight: 700; color: var(--yet-white); }
.yet-product__price { display: block; margin-top: 3px; font-size: 14px; color: var(--yet-muted); }

/* ---------------------------------------------------------------
   13. FOOTER
   --------------------------------------------------------------- */
.yet-footer { border-top: 1px solid var(--yet-line); padding: 56px 0 0; }
.yet-footer__cols { display: flex; gap: 80px; padding-bottom: 48px; }
.yet-footer__brand { flex: 0 0 420px; }
.yet-footer__brand img { height: 46px; width: auto; display: block; margin-bottom: 22px; }
.yet-footer__brand p { font-size: 15px; line-height: 1.6; color: var(--yet-muted); margin: 0; }
.yet-footer__col { display: flex; flex-direction: column; gap: 13px; }
.yet-footer__col strong {
  font-size: 12px; font-weight: 700; letter-spacing: .2em;
  text-transform: uppercase; color: var(--yet-faint); margin-bottom: 5px;
}
.yet-footer__col a { font-size: 15px; color: var(--yet-body); }
.yet-footer__col a:hover, .yet-footer__col a:focus-visible { color: var(--yet-white); }
.yet-footer__base {
  border-top: 1px solid var(--yet-line); padding: 22px 0;
  display: flex; align-items: center; gap: 28px;
}
.yet-footer__base span { font-size: 13px; color: var(--yet-faint); flex-grow: 1; }
.yet-footer__base a { font-size: 13px; color: var(--yet-faint); }

/* ---------------------------------------------------------------
   14. RESPONSIVE
   --------------------------------------------------------------- */
@media (max-width: 1100px) {
  :root { --yet-gutter: 40px; }
  .yet-grid-3, .yet-code__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .yet-art { flex-direction: column; }
  .yet-art__copy { flex: 1 1 auto; padding: 64px 40px; }
  .yet-art__tile { min-height: 300px; }
  .yet-join__inner { flex-direction: column; align-items: stretch; gap: 44px; }
  .yet-join__copy { flex: 1 1 auto; }
  .yet-drop__inner { flex-direction: column; }
  .yet-drop__copy { flex: 1 1 auto; }
  .yet-footer__cols { flex-wrap: wrap; gap: 40px; }
  .yet-footer__brand { flex: 1 1 100%; }
}

@media (max-width: 782px) {
  :root { --yet-gutter: 20px; }
  .yet-nav { display: none; }
  .yet-header .yet-btn { display: none; }
  .yet-burger { display: flex; margin-left: auto; }
  .yet-header__inner { height: 68px; gap: 16px; }
  .yet-header__logo img { height: 32px; }

  .yet-hero { padding: 44px 0 56px; }
  .yet-hero__inner { flex-direction: column; gap: 32px; }
  .yet-hero .yet-lede { font-size: 17px; margin-bottom: 28px; }
  .yet-actions { flex-direction: column; align-items: stretch; }
  .yet-actions .yet-btn { width: 100%; }
  .yet-artframe { aspect-ratio: 35 / 23; }

  .yet-declaration, .yet-join { padding: 56px 0; }
  .yet-section { padding: 56px 0; }
  .yet-section__head { flex-direction: column; align-items: flex-start; gap: 20px; margin-bottom: 32px; }
  .yet-grid-3, .yet-grid-2, .yet-drop__grid { grid-template-columns: 1fr; gap: 16px; }
  .yet-code__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .yet-code__cell { padding: 20px 16px; }
  .yet-code__cell h3 { font-size: 15px; }
  .yet-code__cell p { display: none; }
  .yet-card { padding: 28px 24px; }
  .yet-card h3 { font-size: 21px; }
  .yet-row { flex-direction: column; align-items: flex-start; gap: 14px; }
  .yet-art__tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .yet-art__tile { min-height: 200px; }
  .yet-art__copy { padding: 40px 20px; }
  .yet-art__actions .yet-btn { width: 100%; }
  .yet-footer__cols { flex-direction: column; gap: 32px; }
}


/* ---------------------------------------------------------------
   15. ASTRA OVERRIDES
   Astra sets explicit heading colours, which beat inheritance from
   body. And .yet-home a (0,2,0) outranks .yet-btn--gold (0,1,0),
   which painted gold text onto gold buttons. Both fixed by raising
   specificity rather than reaching for !important.
   --------------------------------------------------------------- */
.yet-home h1,
.yet-home h2,
.yet-home h3,
.yet-home .yet-quote { color: var(--yet-white); }

.yet-home .yet-gold { color: var(--yet-gold); }

.yet-home .yet-art__copy h2 { color: var(--yet-ink); }

.yet-home a.yet-btn--gold,
.yet-home a.yet-btn--gold:hover,
.yet-home a.yet-btn--gold:focus-visible,
.yet-home button.yet-btn--gold { color: var(--yet-ink); }

.yet-home a.yet-btn--ghost,
.yet-home a.yet-btn--ghost:hover,
.yet-home a.yet-btn--ghost:focus-visible { color: var(--yet-white); }

.yet-home a.yet-btn--ink,
.yet-home a.yet-btn--ink:hover,
.yet-home a.yet-btn--ink:focus-visible { color: var(--yet-white); }

.yet-home a.yet-btn--outline-dark,
.yet-home a.yet-btn--outline-dark:hover,
.yet-home a.yet-btn--outline-dark:focus-visible { color: var(--yet-ink); }


/* ---------------------------------------------------------------
   16. MOBILE NAV + FORM STATES
   Note the .yet-home prefixes: .yet-home a (0,2,0) outranks a bare
   .yet-mobile-nav a (0,1,1), which would paint these links gold.
   --------------------------------------------------------------- */
.yet-mobile-nav {
  position: fixed; inset: 0; z-index: 90;
  background: var(--yet-ink);
  display: none; flex-direction: column;
  justify-content: center; gap: 10px;
  padding: 0 var(--yet-gutter);
}
.yet-mobile-nav.is-open { display: flex; }
.admin-bar .yet-mobile-nav { top: 46px; }

.yet-home .yet-mobile-nav a {
  font-family: var(--yet-display); font-size: 32px; line-height: 1.45;
  text-transform: uppercase; letter-spacing: -.02em; color: var(--yet-white);
}
.yet-home .yet-mobile-nav a:hover,
.yet-home .yet-mobile-nav a:focus-visible { color: var(--yet-gold); }
.yet-home .yet-mobile-nav .yet-mobile-nav__cta {
  color: var(--yet-gold); font-size: 19px; margin-top: 22px;
}

.yet-mobile-nav__close {
  position: absolute; top: 10px; right: calc(var(--yet-gutter) - 12px);
  width: 52px; height: 52px; background: none; border: none;
  color: var(--yet-white); font-size: 40px; line-height: 1; cursor: pointer;
}

/* Honeypot: off-screen rather than display:none, which some bots skip. */
.yet-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.yet-msg { margin: 4px 0 0; font-size: 15px; line-height: 1.5; font-weight: 600; }
.yet-msg--ok  { color: var(--yet-gold); }
.yet-msg--bad { color: #FF9A9A; }


/* ---------------------------------------------------------------
   17. ARTWORK FRAMING
   The pieces are photographed at whatever proportions the canvas has,
   so a fixed frame plus object-fit: cover crops into the painting -
   it clipped both ends off the word "Champion". A filled frame now
   takes the image's own shape; only an empty one holds a set ratio.
   --------------------------------------------------------------- */
.yet-artframe { aspect-ratio: auto; background: transparent; }
.yet-artframe img { width: 100%; height: auto; object-fit: contain; display: block; }
.yet-artframe--empty { aspect-ratio: 44 / 62; background: var(--yet-card); }
.yet-art__tile.yet-artframe--empty { aspect-ratio: auto; }


/* ---------------------------------------------------------------
   18. PRODUCT SHOTS
   Square tiles crop to fill; an empty slot stays a plain dark panel.
   --------------------------------------------------------------- */
.yet-product__shot img { width: 100%; height: 100%; object-fit: cover; display: block; }


/* ---------------------------------------------------------------
   19. STORY
   --------------------------------------------------------------- */
.yet-story { padding: 100px 0; border-top: 1px solid var(--yet-line); }
.yet-story__inner { display: flex; gap: 72px; align-items: center; }
.yet-story__art { flex: 1 1 54%; min-width: 0; }
.yet-story__copy { flex: 1 1 46%; min-width: 0; }

.yet-storyframe img { width: 100%; height: auto; display: block; }
.yet-storyframe.yet-artframe--empty { aspect-ratio: 3 / 2; background: var(--yet-card); }

.yet-story__copy h2 { font-size: clamp(30px, 3.4vw, 46px); line-height: 1.06; margin-bottom: 26px; }
.yet-story__copy p { font-size: 17px; line-height: 1.64; color: var(--yet-body); margin: 0 0 18px; }
.yet-story__copy p.yet-story__attrib {
  font-size: 13px; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--yet-gold); margin: 26px 0 30px;
}

/* ---------------------------------------------------------------
   20. DROP GRID, SIZED TO WHAT EXISTS
   Only slots with a photo render, so the row never shows a real
   product beside two empty squares.
   --------------------------------------------------------------- */
.yet-drop__grid--0 { display: none; }
.yet-drop__grid--1 { grid-template-columns: minmax(0, 320px); }
.yet-drop__grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 660px; }
.yet-drop__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 1100px) {
  .yet-story { padding: 64px 0; }
  .yet-story__inner { flex-direction: column; gap: 40px; align-items: stretch; }
}

@media (max-width: 782px) {
  .yet-story { padding: 56px 0; }
  .yet-story__copy .yet-btn { width: 100%; }
  .yet-drop__grid--1,
  .yet-drop__grid--2,
  .yet-drop__grid--3 { grid-template-columns: 1fr; max-width: none; }
}