/* ============================================================
   DCC — Shared responsive / mobile layer
   Loaded AFTER each page's inline <style> so it gets the last word.
   ============================================================ */

body{overflow-x:hidden;}

/* ---------- Logo: never distort ---------- */
.site-header .brand{flex-shrink:0;}
.site-header .brand img{width:auto;height:46px;}

/* ---------- Hamburger (hidden on desktop) ---------- */
.m-burger{display:none;}

/* ============================================================
   CALM SYSTEM (all viewports)
   Structure through space + grouping, not stacked hairlines.
   Loaded last so it supersedes each page's base rules.
   ============================================================ */

/* Rides: quiet grouped blocks instead of divider-separated rows */
.ride-list{gap:12px;}
.ride{background:var(--dcc-bone);padding:26px 30px;border-bottom:0 !important;}
.ride:hover{background:#efe9e2;}

/* Section heads: one calm hairline, never the heavy 2px bar */
.s-head,.jersey .head,.etiquette .head,.duties .head,.exchange .head,
.becoming .head,.grid-section .head,.feedback .head,.beyond .s-head,
.members .s-head{
  border-bottom:1px solid var(--border-1) !important;
}

/* Label lists: drop per-row rules, separate with breathing room */
.governance .item,.becoming .step,.how .step{
  border-top:0 !important;padding-top:16px !important;padding-bottom:16px !important;
}
.governance .item:last-child,.becoming .step:last-child,
.how .steps .step:last-child{border-bottom:0 !important;}
.duties li{border-top:0 !important;padding-top:14px !important;padding-bottom:14px !important;}
.duties li:nth-child(-n+2){border-top:0 !important;}

/* FAQ + contacts + feedback: keep a faint divider but give it room */
.faq .q,.contacts .row,.feedback .emails a{
  border-color:var(--border-1) !important;
  padding-top:26px !important;padding-bottom:26px !important;
}

/* ============================================================
   MOBILE NAV  (≤1100px — matches where .nav was hidden)
   ============================================================ */
@media (max-width:1100px){
  .site-header .nav{display:none !important;}
  .site-header .util{display:none !important;}
  .site-header .bar{gap:16px;}

  .m-burger{
    display:flex;flex-direction:column;justify-content:center;gap:5px;
    width:46px;height:46px;padding:0 10px;margin-left:auto;
    background:transparent;border:0;cursor:pointer;flex-shrink:0;
  }
  .m-burger span{
    display:block;height:2px;width:100%;border-radius:2px;
    background:var(--dcc-nightride);transition:transform .25s ease,opacity .2s ease;
  }
  .m-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
  .m-burger[aria-expanded="true"] span:nth-child(2){opacity:0;}
  .m-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
}

/* ---------- Drawer ---------- */
.m-drawer{position:fixed;inset:0;z-index:200;display:none;background:rgba(26,26,31,.55);}
.m-drawer.open{display:block;}
.m-drawer-panel{
  position:absolute;top:0;right:0;height:100%;width:min(86vw,370px);
  background:var(--dcc-nightride);color:var(--dcc-paper);
  padding:78px 30px 40px;display:flex;flex-direction:column;
  box-shadow:-24px 0 70px rgba(0,0,0,.4);
  transform:translateX(100%);transition:transform .3s cubic-bezier(.4,0,.2,1);
  overflow-y:auto;-webkit-overflow-scrolling:touch;
}
.m-drawer.open .m-drawer-panel{transform:translateX(0);}
.m-drawer-close{
  position:absolute;top:18px;right:22px;width:42px;height:42px;
  background:transparent;border:0;color:var(--dcc-paper);
  font-size:32px;line-height:1;cursor:pointer;font-family:var(--font-body);opacity:.85;
}
.m-drawer-close:hover{opacity:1;}
.m-drawer-nav{display:flex;flex-direction:column;}
.m-drawer-nav a{
  font-family:var(--font-display);font-weight:700;font-size:24px;letter-spacing:-.01em;
  padding:14px 0;border-bottom:1px solid var(--border-on-dark);color:var(--dcc-paper);
  transition:color .2s ease;
}
.m-drawer-nav a:hover,.m-drawer-nav a.on{color:var(--dcc-breakaway-punch);}
.m-drawer-cta{display:flex;flex-direction:column;gap:12px;margin-top:30px;}
.m-drawer-cta a{
  width:100%;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:16px 18px;font-weight:600;font-size:13px;letter-spacing:.1em;text-transform:uppercase;
  font-family:var(--font-body);text-align:center;
}
.m-drawer-cta a.login{border:1px solid rgba(255,255,255,.32);color:var(--dcc-paper);letter-spacing:.14em;}
.m-drawer-cta a.login:hover{border-color:var(--dcc-paper);}
.m-drawer-cta a.btn.ghost,.m-drawer-cta a.btn.ghost-light{border-color:var(--dcc-paper);color:var(--dcc-paper);background:transparent;}
.m-drawer-cta a.btn.primary{background:var(--dcc-breakaway-punch);color:var(--dcc-paper);border-color:var(--dcc-breakaway-punch);}
.m-drawer-status{
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--dcc-cadence-blush);
  font-weight:600;margin-top:28px;display:flex;align-items:center;gap:8px;
}

/* ============================================================
   RIDES — stack cleanly on mobile
   ============================================================ */
@media (max-width:1100px){
  .ride{grid-template-columns:1fr !important;gap:18px !important;}
  .ride .name{font-size:26px !important;}
  .ride .stats{
    display:grid !important;
    grid-template-columns:auto auto !important;
    justify-content:start !important;
    column-gap:56px !important;row-gap:16px !important;
  }
  .ride .right{
    flex-direction:row !important;align-items:center !important;
    justify-content:flex-start !important;min-width:0 !important;
    flex-wrap:wrap;gap:14px !important;
  }
}

/* ============================================================
   FOOTER — brand spans full width, links flow 2-up
   ============================================================ */
@media (max-width:1100px){
  .site-footer .top{grid-template-columns:1fr 1fr !important;gap:38px 28px !important;}
  .site-footer .brand-blk{grid-column:1 / -1;}
}

/* ============================================================
   LEAD PARTNERS BAND — keep logos side-by-side & equal on mobile
   (don't let the 96px gap wrap them into a stack)
   ============================================================ */
@media (max-width:600px){
  .lead-partners .logos{
    flex-wrap:nowrap !important;
    gap:24px !important;
    justify-content:center !important;
    align-items:center !important;
  }
  .lead-partners .logos a{flex:1 1 0 !important;min-width:0 !important;}
  .lead-partners .logos img{max-width:100% !important;}
  .lead-partners .logos .lp-spec img{height:62px !important;}
  .lead-partners .logos .lp-laba img{height:38px !important;}
}
@media (max-width:600px){
  .site-footer{padding:56px 0 28px;}
  .site-footer .bottom{flex-direction:column;gap:12px;align-items:flex-start;text-align:left;}
}

/* ============================================================
   GENERAL PAGE GUARDS — comfortable gutters + stacked heads
   ============================================================ */
@media (max-width:760px){
  .wrap{padding-left:22px !important;padding-right:22px !important;}
  .site-header .bar{padding-left:22px !important;padding-right:22px !important;}
  section.s{padding:64px 0;}
  .s-head{flex-direction:column;align-items:flex-start;gap:16px;}
  .hero .content{padding-left:22px !important;padding-right:22px !important;}
}
@media (max-width:600px){
  .site-header .brand img{height:46px !important;}
  .hero .corner-meta{top:16px !important;right:22px !important;left:22px !important;justify-content:flex-end;font-size:10px !important;gap:0 !important;}
}

/* ============================================================
   PHONE: collapse every multi-column section to a single column
   (loaded last, so it overrides each page's own breakpoints)
   ============================================================ */
@media (max-width:760px){
  /* --- one-column stack for content grids across all pages --- */
  .p-hero .hero-grid,
  .lead-grid,
  .core-grid,
  .how .intro-row,
  .future .grid,
  .moment .grid,
  .es-recap,
  .es-recap .ab,
  .es-partner .grid,
  .c-intro .lede,
  .c-intro .body,
  .pillars .grid,
  .jersey .head,
  .jersey .feature,
  .etiquette .head,
  .ecompact,
  .voice,
  .ab,
  .conduct .cols,
  .price-bar .row,
  .incl,
  .how .grid,
  .how .step,
  .faq .grid,
  .meta-bar .row,
  .governance .grid,
  .governance .item,
  .quick .grid,
  .touch,
  .card-block,
  .ins .poster,
  .kit .body,
  .partners-sec .lead-grid,
  .partner-lead .redeem,
  .partner-core .body .row,
  .mechs .shops-grid,
  .cal-hero .wrap,
  .sync .row,
  .rl-intro .grid,
  .duties .head,
  .duties .list,
  .exchange .head,
  .exchange .cols,
  .commit .head,
  .commit .body,
  .becoming .head,
  .becoming .body,
  .grid-section .head,
  .feedback .head,
  .feedback .body{
    grid-template-columns:1fr !important;
    gap:28px !important;
    align-items:start !important;
  }

  /* members.html uses .s-head as a grid */
  .s-head{grid-template-columns:1fr !important;}

  /* image mosaics: keep two-up so they still read as a grid */
  .jersey .strip{grid-template-columns:1fr 1fr !important;}

  /* drop column dividers that become stray vertical lines when stacked */
  .incl .col,
  .touch .col,
  .exchange .col,
  .exchange .col + .col,
  .tiers .tier,
  .tier{border-right:0 !important;}
  .incl .col,
  .touch .col{border-bottom:1px solid var(--border-1);}
  .incl .col{min-height:0 !important;padding:30px 0 !important;}
  .how .lhs{padding:0 0 8px !important;}

  /* roomy section rhythm + readable display headings on phones */
  section.s,.future,.how,.member,.who,.pillars,.ig,.jersey,.etiquette,
  .es-season,.es-how,.es-partner,.duties,.exchange,.commit,.becoming,
  .grid-section,.feedback,.quick,.mechs,.contacts,.sync,.current{padding-top:56px;padding-bottom:56px;}
}

@media (max-width:520px){
  .tiers{grid-template-columns:1fr !important;}
  .tier{border-bottom:1px solid var(--border-1);}
}

/* ============================================================
   CALM MOBILE — trade stacked hairlines for space + grouping
   so single-column pages don't read as a ladder of rules
   ============================================================ */
@media (max-width:760px){
  /* Rides become quiet grouped blocks, cleanly stacked (no awkward wrap) */
  .ride-list{display:flex;flex-direction:column;gap:12px;}
  .ride{
    background:var(--dcc-bone) !important;
    padding:24px 22px !important;
    border-bottom:0 !important;
    flex-direction:column !important;
    align-items:stretch !important;
    column-gap:0 !important;
    row-gap:18px !important;
  }
  .ride:hover{background:var(--dcc-bone) !important;}
  .ride .day{flex:none !important;display:flex !important;align-items:baseline;gap:10px;}
  .ride .name{flex:none !important;width:100% !important;min-width:0 !important;font-size:28px !important;margin:-4px 0 2px !important;}
  .ride .stats{flex:none !important;width:100% !important;grid-template-columns:1fr 1fr !important;gap:18px 20px !important;}
  .ride .right{margin-left:0 !important;justify-content:flex-start !important;gap:12px !important;}

  /* Section underlines: a single hairline, never the heavy 2px bar */
  .s-head,.jersey .head,.etiquette .head,.duties .head,.exchange .head,
  .commit .head,.becoming .head,.grid-section .head,.feedback .head,
  .members .s-head,.beyond .s-head{
    border-bottom-width:1px !important;
    padding-bottom:18px !important;
  }

  /* Stacked label-lists: now that dividers are gone, group tightly so
     content feels warm and cohesive — not floating in cold voids */
  .governance .item,.faq .q,.how .step,.becoming .step,
  .duties li,.contacts .row,.feedback .emails a{
    padding-top:8px !important;
    padding-bottom:8px !important;
  }
  .ecompact,.voice,.ab,.rl-intro .grid{padding-top:16px !important;}
}

/* ============================================================
   MOBILE LINE RESET (definitive) — collapse the editorial
   hairline system to: ONE thin line under each section header,
   nothing else. Everything below is grouped by space instead.
   ============================================================ */
@media (max-width:760px){
  /* a) Every section header → a single 1px hairline (never 2px) */
  .s-head,.head,.board .s-head,.beyond .s-head,.etiquette .head,.gear .head,
  .duties .head,.exchange .head,.becoming .head,.grid-section .head,.feedback .head,
  .conduct .head,.commit .head,.guests .grid,.cal-embed .frame-meta,.p-lead .head,
  .es-head{
    border-top-width:1px !important;
    border-bottom-width:1px !important;
  }

  /* b) Heavy grid FRAMES + content-block TOP rules that double under a
        header or bracket a module → gone (padding stays as spacing) */
  .pillars .grid,.tiers,.es-how .ab-cards,.conduct .membership-callout,
  .ecompact,.gear .list,.voice,.ab,.ab .pair,.ab .footnote,.onride,
  .core-grid,.card-block,.card-block .tbd,.kit .body,.partner-lead .redeem,
  .partner-core .body,.ins .poster .rhs .who,.mechs .recommend,.quick .grid,
  .guests .grid,.duties .list,.exchange .cols{
    border-top:0 !important;
    border-bottom:0 !important;
  }

  /* c) Per-item ladder dividers inside lists → space, not rules */
  .onride .item,.governance .item,.faq .q,.faq .item,.contacts .row,
  .contacts .stack,.partner-lead .benefit li,.touch .col,.mechs .shop .row,
  .duties li,.pillars .pillar,.quick .card,.exchange .col,.feedback .emails a{
    border-top:0 !important;
    border-bottom:0 !important;
  }

  /* d) Dark stat bands (leadership meta-bar, join price-bar): 2-up, no
        cell dividers, lead value full-width — compact, not a cold stack */
  .meta-bar .row{grid-template-columns:1fr 1fr !important;}
  .meta-bar .cell{border-right:0 !important;border-bottom:0 !important;padding:18px 0 !important;}
  .meta-bar .cell.lead{grid-column:1 / -1;}

  /* e) Kill EVERY vertical cell/column divider — a right-edge border is
        always a stray line once things are single-column */
  .meta-bar .cell,.price-bar .cell,.incl .col,.touch .col,.exchange .col,
  .tier,.pillar,.pillars .pillar,.quick .card,.es-how .card,.es-season .card,
  .es-recap .grp,.cell{
    border-right:0 !important;
  }

  /* f) Container TOP frames + endurance bands (stay dark, just de-laddered) */
  .touch,.exchange .cols,.es-recap .ab,.es-how .ab-cards,.es-recap .grp,
  .es-recap,.es-season .season-table,.es-season .season-row{
    border-top:0 !important;
    border-bottom:0 !important;
  }

  /* g) WARMTH: tighten module padding + header gap so de-lined content
        groups closely instead of floating in cold voids */
  .s-head,.head,.board .s-head,.beyond .s-head,.etiquette .head,.gear .head,
  .duties .head,.exchange .head,.becoming .head,.grid-section .head,
  .feedback .head,.conduct .head,.commit .head{
    margin-bottom:26px !important;
  }
  .pillar,.pillars .pillar{padding:14px 0 !important;}
  .tier{padding:14px 0 !important;min-height:0 !important;}
  .incl .col{padding:18px 0 !important;min-height:0 !important;}
  .quick .card,.es-how .card,.touch .col,.exchange .col{padding:16px 0 !important;}
  .es-recap .grp{padding:8px 0 !important;}
}

/* ============================================================
   MOBILE: structure from SPACE, not rules.
   On phones the editorial hairlines collapse into a vertical
   ladder — strip the secondary/doubled ones, keep link
   underlines + section background rhythm doing the work.
   ============================================================ */
@media (max-width:760px){
  /* Kill the SECOND rule that doubles up under a section header
     (header keeps its single hairline; the content block drops its top border) */
  .card-block,
  .kit .body,
  .core-grid,
  .partner-lead .redeem,
  .partner-core .body,
  .ins .poster .rhs .who,
  .card-block .tbd,
  .mechs .recommend{
    border-top:0 !important;
    padding-top:0 !important;
  }

  /* Heavy 2px GRID FRAMES (pillars, tiers, quick cards) read far too
     heavy stacked + double under the header — drop the frame, let the
     numbered labels + space separate items */
  .pillars .grid,
  .quick .grid,
  .tiers{
    border-top:0 !important;
    border-bottom:0 !important;
  }
  .pillars .pillar,
  .quick .card{border-bottom:0 !important;}

  /* Inter-item dividers in label lists → grouped by space instead */
  .contacts .stack{border-top:0 !important;}
  .contacts .row{border-bottom:0 !important;padding:14px 0 !important;}
  .partner-lead .benefit li{border-top:0 !important;padding:5px 0 !important;}
  .touch .col{border-bottom:0 !important;}
  .mechs .shop .row{border-top:0 !important;}

  /* Member card visual: it renders far too large stacked — cap it */
  .memcard{max-width:230px !important;}

  /* Price bar: drop the cell rules (stray vertical line when stacked),
     and stack to a clean 2-up with breathing room */
  .price-bar .row{grid-template-columns:1fr 1fr !important;gap:0 !important;}
  .price-bar .cell{border-right:0 !important;padding:22px 0 !important;}
  .price-bar .cell.lead{grid-column:1 / -1;}
  .price-bar .cell.lead .v{font-size:56px !important;}
}