/* ------------------------------------------------------------------
   coc.css - the code of conduct page.

   Two people arrive here. One is deciding whether to buy a pass and
   wants to know what kind of room this is. The other has just had
   something happen and needs a name and an address, now. The page is
   ordered for the second person and still reads straight through for
   the first: help first, the whole thing in four words, then the rules,
   then how to report, then what we do about it.

   Deliberately few visual patterns. Contrast cards for the floor, one
   card grid for everything else, a red list for the hard lines, a
   numbered ladder for reporting and one timeline for the process.
   ------------------------------------------------------------------ */

.coc-hero .inner { max-width: 58ch; }
.coc-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px; }

/* ================= 1. help, at the top ================= */
.help-strip {
  position: relative; padding: 54px 0 58px;
  background:
    radial-gradient(70% 100% at 20% 0%, rgba(225,29,72,.14), transparent 70%),
    linear-gradient(180deg, var(--navy-2), var(--navy));
  border-bottom: 1px solid var(--hair);
}
.hs-k {
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--crimson-2);
  display: flex; align-items: center; gap: 12px; margin-bottom: 20px;
}
.hs-k::before { content: ""; width: 24px; height: 2px; background: linear-gradient(90deg, var(--crimson-2), var(--blue-2)); }
.hs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.hs {
  display: grid; align-content: start; gap: 9px;
  border: 1px solid var(--silver-18); border-radius: 18px; padding: 24px 24px 22px;
  background: linear-gradient(180deg, rgba(26,33,96,.5), rgba(13,18,64,.5));
  transition: transform .35s var(--ease), border-color .35s, background .35s;
}
a.hs:hover { transform: translateY(-4px); border-color: var(--blue-2); background: linear-gradient(180deg, rgba(46,75,224,.22), rgba(13,18,64,.5)); }
.hs-i { width: 34px; height: 34px; color: var(--blue-2); }
.hs-i svg { width: 100%; height: 100%; }
.hs-em .hs-i { color: var(--crimson-2); }
.hs-t { font-family: var(--serif); font-size: 21px; color: var(--silver); }
.hs-d { color: var(--silver-70); font-size: 14.3px; line-height: 1.6; }
.hs-go {
  margin-top: 4px; font-size: 13px; font-weight: 600; color: var(--blue-2);
  display: inline-flex; align-items: center; gap: 8px; word-break: break-word;
}
.hs-go::after { content: "\2192"; transition: transform .3s var(--ease); }
a.hs:hover .hs-go::after { transform: translateX(4px); }
.hs-nums { display: flex; gap: 10px; margin: 2px 0 2px; }
.hs-nums b {
  font-family: var(--serif); font-size: 27px; font-weight: 500; color: var(--silver);
  line-height: 1; padding: 8px 13px; border: 1px solid var(--hair); border-radius: 11px;
  background: rgba(6,9,32,.4);
}
.hs-note {
  margin-top: 22px; color: var(--silver-45); font-size: 14.5px; line-height: 1.7; max-width: 78ch;
}

/* ================= 2. the four words ================= */
.four-sec { padding: 66px 0 10px; }
.four { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.fw { border-top: 2px solid var(--hair); padding-top: 18px; transition: border-color .4s var(--ease); }
.fw:hover { border-top-color: var(--crimson-2); }
.fw-n { display: block; font-family: var(--serif); font-size: 12.5px; letter-spacing: .1em; color: var(--blue-2); margin-bottom: 10px; }
.fw h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(24px, 3vw, 32px); color: var(--silver); margin-bottom: 8px; letter-spacing: -.01em; }
.fw p { color: var(--silver-70); font-size: 14.5px; line-height: 1.6; }
.four-note { margin-top: 26px; color: var(--silver-45); font-size: 14px; font-style: italic; }

/* ================= section bar ================= */
.coc-nav {
  position: sticky; top: 76px; z-index: 30; margin-top: 46px;
  background: rgba(10, 14, 51, .86);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair);
}
/* The bar was five labels of five different shapes - a noun, a concept, a
   metaphor, a task - with nothing to say which belonged together. Now it
   carries the section numbers the headings carry, and the two halves of
   the document are named above their own entries. */
.coc-nav-in { display: flex; align-items: center; gap: 4px; overflow-x: auto; scrollbar-width: none; padding-top: 11px; padding-bottom: 11px; white-space: nowrap; }
.coc-nav-in::-webkit-scrollbar { display: none; }
.cn-g {
  flex: none; font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--silver-18); padding: 0 9px 0 2px; align-self: center;
}
.cn-sep { flex: none; width: 1px; height: 22px; background: var(--hair); margin: 0 10px; }
.coc-nav a {
  display: inline-flex; align-items: baseline; gap: 7px; flex: none;
  font-size: 13px; letter-spacing: .01em; color: var(--silver-45);
  padding: 7px 11px; border-radius: 9px;
  transition: color .25s, background .25s;
}
.coc-nav a i {
  font-style: normal; font-family: var(--serif); font-size: 11px;
  color: var(--silver-18); transition: color .25s;
}
.coc-nav a:hover { color: var(--silver); background: rgba(234,240,255,.05); }
.coc-nav a:hover i { color: var(--silver-45); }
.coc-nav a.on { color: var(--silver); background: rgba(234,240,255,.07); }
.coc-nav a.on i { color: var(--crimson-2); }

/* the part label that sits above the first heading of each half */
.coc-part {
  font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--crimson-2);
  display: flex; align-items: center; gap: 12px; margin-bottom: 16px;
}
.coc-part::before { content: ""; width: 22px; height: 2px; background: linear-gradient(90deg, var(--crimson-2), var(--blue-2)); }
/* the number in front of each heading */
.coc-block h2 i, .esc-head h2 i {
  font-style: normal; font-family: var(--serif); font-size: .5em;
  color: var(--silver-18); margin-right: .5em; vertical-align: .18em;
}
.esc-sub { margin-top: 12px; color: var(--silver-70); font-size: 16px; line-height: 1.6; }

/* ================= 3. the rules ================= */
.coc-sec { padding: 70px 0 40px; }
.coc-wrap { max-width: 940px; }
.coc-block { margin-bottom: 74px; }
.coc-block:last-child { margin-bottom: 0; }
.coc-block h2 { font-family: var(--serif); font-weight: 400; letter-spacing: -.02em; font-size: clamp(27px, 3.8vw, 42px); margin-bottom: 14px; }
.coc-block h3 { font-family: var(--serif); font-size: 18px; font-weight: 500; color: var(--silver); margin-bottom: 7px; }
.coc-lead { color: var(--silver-70); font-size: 16.5px; line-height: 1.65; max-width: 68ch; }
.coc-note {
  margin-top: 24px; color: var(--silver-45); font-size: 14.5px; line-height: 1.7;
  border-left: 2px solid var(--silver-18); padding-left: 18px; max-width: 72ch;
}
.coc-note a { color: var(--blue-2); }
.coc-sign { margin-top: 40px; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--silver-45); }

.coc-scope { border: 1px solid var(--hair); border-radius: 18px; padding: 24px 26px; background: rgba(234,240,255,.03); margin-bottom: 64px; }
.cs-k { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--blue-2); display: flex; align-items: center; gap: 11px; margin-bottom: 12px; }
.cs-k::before { content: ""; width: 22px; height: 2px; background: linear-gradient(90deg, var(--blue-2), var(--crimson-2)); }
.coc-scope p { color: var(--silver-70); font-size: 15px; line-height: 1.7; }

/* contrast cards */
.coc-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 28px; }
.cc { border: 1px solid var(--hair); border-radius: 18px; padding: 26px 26px 22px; position: relative; overflow: hidden; }
.cc::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; }
.cc-yes { background: linear-gradient(180deg, rgba(46,75,224,.10), transparent 60%); }
.cc-yes::before { background: linear-gradient(90deg, var(--blue-2), transparent); }
.cc-no { background: linear-gradient(180deg, rgba(225,29,72,.10), transparent 60%); }
.cc-no::before { background: linear-gradient(90deg, var(--crimson-2), transparent); }
.cc-h { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; color: var(--silver); }
.cc-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.cc-yes .cc-dot { background: var(--blue-2); box-shadow: 0 0 0 4px rgba(76,107,255,.18); }
.cc-no .cc-dot { background: var(--crimson-2); box-shadow: 0 0 0 4px rgba(244,63,107,.18); }
.cc ul { list-style: none; display: grid; gap: 12px; }
.cc li { color: var(--silver-70); font-size: 14.6px; line-height: 1.55; padding-left: 19px; position: relative; }
.cc li::before { content: ""; position: absolute; left: 0; top: 9px; width: 8px; height: 1.5px; background: var(--silver-45); }
.cc li b { color: var(--silver); font-weight: 600; }

.coc-quote { margin-top: 26px; padding: 22px 26px; border-radius: 16px; background: rgba(234,240,255,.04); border: 1px solid var(--hair); }
.coc-quote p { font-family: var(--serif); font-size: clamp(18px, 2.4vw, 23px); line-height: 1.4; color: var(--silver); }

/* the one card grid used everywhere else */
.coc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 28px; }
.coc-grid.two { grid-template-columns: repeat(2, 1fr); }
.cg { border: 1px solid var(--hair); border-radius: 16px; padding: 22px 22px 20px; transition: border-color .3s var(--ease), transform .3s var(--ease), background .3s var(--ease); }
.cg:hover { border-color: var(--silver-18); background: rgba(234,240,255,.03); transform: translateY(-3px); }
.cg p { color: var(--silver-70); font-size: 14.4px; line-height: 1.6; }

/* the hard lines */
.coc-hard { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 11px; margin-top: 26px; }
.coc-hard li {
  position: relative; padding: 16px 18px 16px 48px;
  border: 1px solid rgba(244,63,107,.28); border-radius: 13px;
  background: rgba(225,29,72,.07); color: var(--silver); font-size: 14.8px; line-height: 1.5;
}
.coc-hard li::before {
  content: ""; position: absolute; left: 19px; top: 50%; margin-top: -6px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--crimson); box-shadow: 0 0 0 4px rgba(225,29,72,.16);
}

/* ================= 4. the ladder ================= */
.coc-esc {
  padding: 84px 0 92px; position: relative;
  background:
    radial-gradient(80% 60% at 50% 0%, rgba(46,75,224,.16), transparent 70%),
    linear-gradient(180deg, var(--navy-2), var(--navy) 78%);
  border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair);
}
.esc-head { max-width: 62ch; margin-bottom: 36px; }
.esc-head .k { font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--crimson-2); display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.esc-head .k::before { content: ""; width: 24px; height: 2px; background: linear-gradient(90deg, var(--crimson-2), var(--blue-2)); }
.esc-head h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(27px, 4vw, 44px); letter-spacing: -.02em; }
.esc-head p { margin-top: 16px; color: var(--silver-70); font-size: 16px; line-height: 1.65; }

.esc { list-style: none; position: relative; max-width: 940px; }
.esc::before { content: ""; position: absolute; left: 32px; top: 34px; bottom: 34px; width: 2px; background: linear-gradient(180deg, var(--blue-2), #B03BA8 55%, var(--crimson-2)); opacity: .35; }
.esc-step { position: relative; }
.esc-btn {
  width: 100%; display: grid; grid-template-columns: 54px 1fr auto 22px;
  align-items: center; gap: 18px; text-align: left; cursor: pointer;
  background: none; border: 0; border-bottom: 1px solid var(--hair);
  padding: 21px 6px; color: inherit; font-family: inherit; transition: background .3s var(--ease);
}
.esc-btn:hover { background: rgba(234,240,255,.03); }
/* the circle IS the element: as a ::before it painted over its own digit */
.esc-num {
  position: relative; z-index: 2; justify-self: center;
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--navy); border: 1.5px solid var(--silver-18);
  font-family: var(--serif); font-size: 16px; color: var(--silver-70);
  transition: border-color .3s, background .3s, box-shadow .3s, color .3s;
}
.esc-btn:hover .esc-num, .esc-step.open .esc-num {
  border-color: transparent; color: #fff;
  background: linear-gradient(100deg, var(--blue), var(--crimson));
  box-shadow: 0 0 0 5px rgba(46,75,224,.16);
}
.esc-t { display: grid; gap: 3px; min-width: 0; }
.esc-title { font-family: var(--serif); font-size: clamp(18px, 2.2vw, 21px); color: var(--silver); }
.esc-who { font-size: 13px; color: var(--silver-45); }
.esc-when { font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--silver-45); border: 1px solid var(--hair); border-radius: 100px; padding: 5px 12px; white-space: nowrap; }
.esc-step.open .esc-when { color: var(--silver); border-color: var(--silver-18); }
.esc-chev { width: 11px; height: 11px; border-right: 1.6px solid var(--silver-45); border-bottom: 1.6px solid var(--silver-45); transform: rotate(45deg); transition: transform .35s var(--ease); }
.esc-step.open .esc-chev { transform: rotate(-135deg); }
/* A 0fr row still cannot shrink past its item's padding, which left every
   closed step 30px tall with a line of text showing through. The wrapper
   carries no padding; the spacing sits one level further in. */
.esc-body { display: grid; grid-template-rows: 0fr; overflow: hidden; transition: grid-template-rows .45s var(--ease); }
.esc-body > * { min-height: 0; }
.esc-inner { min-height: 0; padding: 0; overflow: hidden; }
.esc-pad { padding: 4px 6px 26px 90px; }
.esc-body p { color: var(--silver-70); font-size: 15px; line-height: 1.7; max-width: 66ch; }
.esc-body p + p { margin-top: 12px; }
.esc-body b { color: var(--silver); }
.esc-body a { color: var(--blue-2); border-bottom: 1px solid rgba(76,107,255,.35); }
.esc-ext .esc-num { border-style: dashed; }

/* ================= 5. the process timeline ================= */
.proc-sec { padding-top: 78px; }
.flow { list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; margin-top: 32px; position: relative; }
.flow::before { content: ""; position: absolute; left: 6px; right: 6px; top: 6px; height: 2px; background: linear-gradient(90deg, var(--blue-2), #B03BA8 55%, var(--crimson-2)); opacity: .3; }
.fl { position: relative; padding-top: 26px; }
.fl-d { position: absolute; top: 0; left: 0; width: 14px; height: 14px; border-radius: 50%; background: var(--navy); border: 2px solid var(--blue-2); transition: background .35s, border-color .35s, box-shadow .35s; }
.fl:hover .fl-d { background: linear-gradient(100deg, var(--blue), var(--crimson)); border-color: transparent; box-shadow: 0 0 0 5px rgba(46,75,224,.18); }
.fl-w { display: block; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--crimson-2); margin-bottom: 9px; }
.fl h3 { font-family: var(--serif); font-size: 18px; font-weight: 500; color: var(--silver); margin-bottom: 7px; }
.fl p { color: var(--silver-70); font-size: 13.8px; line-height: 1.58; }

.proc-out { margin-top: 46px; }
.po-k { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--silver-45); display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.po-k::after { content: ""; flex: 1; height: 1px; background: var(--hair); }
.coc-out { display: grid; grid-template-columns: repeat(5, 1fr); gap: 13px; }
.co { border: 1px solid var(--hair); border-radius: 15px; padding: 20px 17px; transition: transform .3s var(--ease), border-color .3s; }
.co:hover { transform: translateY(-4px); border-color: var(--silver-18); }
.co-b { display: block; height: 4px; border-radius: 100px; margin-bottom: 15px; }
.co-1 { background: #4C6BFF; width: 20%; }
.co-2 { background: #6E6FF0; width: 40%; }
.co-3 { background: #B03BA8; width: 60%; }
.co-4 { background: #E11D48; width: 80%; }
.co-5 { background: #F43F6B; width: 100%; }
.co h3 { font-size: 16px; }
.co p { color: var(--silver-70); font-size: 13.4px; line-height: 1.55; }

/* closing */
.coc-end {
  margin-top: 8px; display: flex; align-items: center; justify-content: space-between;
  gap: 26px; flex-wrap: wrap;
  border: 1px solid var(--silver-18); border-radius: 20px; padding: 26px 30px;
  background: linear-gradient(100deg, rgba(46,75,224,.16), rgba(225,29,72,.12));
}
.ce-k { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--silver-45); margin-bottom: 8px; }
.coc-end p { color: var(--silver); font-size: 15.5px; line-height: 1.6; max-width: 58ch; }
.coc-end a:not(.cta) { color: var(--blue-2); }

/* ================= tablet ================= */
@media (max-width: 1120px) {
  .cn-g, .cn-sep { display: none; }
}
@media (max-width: 980px) {
  .hs-grid { grid-template-columns: 1fr; }
  .four { grid-template-columns: repeat(2, 1fr); gap: 26px 22px; }
  .coc-grid { grid-template-columns: repeat(2, 1fr); }
  .flow { grid-template-columns: repeat(2, 1fr); gap: 26px 18px; }
  .flow::before { display: none; }
  .coc-out { grid-template-columns: repeat(3, 1fr); }
  .coc-nav { top: 66px; }
}

/* ================= phone ================= */
@media (max-width: 700px) {
  .help-strip { padding: 38px 0 42px; }
  .hs { padding: 20px 20px 18px; border-radius: 16px; }
  .hs-t { font-size: 19px; }
  .hs-nums b { font-size: 23px; padding: 7px 11px; }
  .hs-note { margin-top: 18px; font-size: 13.8px; }
  .four-sec { padding: 46px 0 6px; }
  .four { grid-template-columns: 1fr; gap: 20px; }
  .fw { padding-top: 14px; }
  .fw h3 { font-size: 24px; }
  .coc-nav { margin-top: 34px; }
  .coc-nav-in { gap: 22px; }
  .coc-sec { padding: 46px 0 24px; }
  .proc-sec { padding-top: 52px; }
  .coc-block { margin-bottom: 52px; }
  .coc-scope { padding: 20px 18px; border-radius: 15px; margin-bottom: 44px; }
  .coc-lead { font-size: 15.5px; }
  .coc-cards { grid-template-columns: 1fr; gap: 14px; margin-top: 22px; }
  .cc { padding: 22px 20px 18px; border-radius: 16px; }
  .coc-grid, .coc-grid.two, .coc-hard, .flow, .coc-out { grid-template-columns: 1fr; gap: 12px; }
  .flow { gap: 22px; }
  .coc-quote { padding: 18px 20px; }
  .coc-esc { padding: 54px 0 60px; }
  .esc-head { margin-bottom: 24px; }
  .esc-head p { font-size: 15.5px; }
  .esc::before { left: 21px; }
  .esc-btn { grid-template-columns: 40px 1fr 16px; gap: 12px; padding: 17px 2px; }
  .esc-num { width: 28px; height: 28px; font-size: 14px; }
  .esc-when { grid-column: 2; justify-self: start; margin-top: 6px; }
  .esc-pad { padding: 2px 2px 22px 52px; }
  .esc-body p { font-size: 14.3px; }
  .coc-end { padding: 22px 20px; border-radius: 16px; }
  .coc-end .cta { width: 100%; justify-content: center; }
  .coc-actions .cta, .coc-actions .ghost { flex: 1; justify-content: center; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .esc-body { transition: none; }
  .cg:hover, .co:hover, a.hs:hover { transform: none; }
}