/* Colón Chandlers home page. Tokens are in skin.css. */

body.cc-home { margin: 0; background: var(--paper); color: var(--ink); font: 1.0625rem/1.6 var(--font); }
.cc-home a { color: inherit; }
.cc-home :focus-visible { outline: 3px solid var(--signal); outline-offset: 3px; }

.cc-skip { position: absolute; left: 1rem; top: -4rem; background: var(--ink); color: var(--paper); padding: .5rem 1rem; z-index: 5; }
.cc-skip:focus { top: 1rem; }

/* Header */
.cc-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; max-width: 72rem; margin: 0 auto; padding: 1.25rem 1.25rem; }
.cc-mark { display: inline-flex; align-items: baseline; gap: .6rem; text-decoration: none; line-height: 1; }
.cc-mark-top { font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; }
.cc-mark-bottom { font-size: .6875rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--signal); }
.cc-nav { display: flex; flex-wrap: wrap; gap: .5rem 1.75rem; align-items: center; }
.cc-nav a { text-decoration: none; padding: .25rem 0; border-bottom: 2px solid transparent; }
.cc-nav a:hover { border-bottom-color: var(--signal); }
.cc-nav-ask { font-weight: 600; color: var(--signal); }
.cc-line { height: 1px; background: var(--line); }

/* Hero */
.cc-hero { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 3rem 4.5rem; align-items: center; max-width: 72rem; margin: 0 auto; padding: 4.5rem 1.25rem 5rem; }
.cc-hero h1 { font: 700 clamp(2.125rem, 5.2vw, 3.75rem)/1.08 var(--font); letter-spacing: -.03em; margin: 0 0 1.5rem; text-wrap: balance; }
.cc-lede { font-size: 1.25rem; max-width: 36rem; margin: 0 0 2rem; color: var(--ink-soft); }
.cc-actions { display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; margin: 0; }

.cc-button { display: inline-block; font: 600 1rem var(--font); text-decoration: none; cursor: pointer; background: var(--signal); color: var(--pc-accent-ink); border: 2px solid var(--signal); padding: .75rem 1.5rem; border-radius: 2px; transition: background .15s, border-color .15s; }
.cc-button:hover { background: var(--signal-dark); border-color: var(--signal-dark); }
.cc-home a.cc-button { color: var(--pc-accent-ink); }
.cc-textlink { font-weight: 600; text-underline-offset: .25em; text-decoration-thickness: 2px; text-decoration-color: var(--signal); }

/* A sample order: the three papers and where each stands */
.cc-order { margin: 0; padding: 1.5rem; background: var(--white); border: 1px solid var(--ink); border-radius: 2px; }
.cc-order figcaption { margin: 0 0 1rem; font-size: .75rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.cc-order table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.cc-order th, .cc-order td { text-align: left; vertical-align: top; padding: .75rem .75rem .75rem 0; border-top: 1px solid var(--line); }
.cc-order thead th { border-top: 0; padding-top: 0; font-size: .6875rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.cc-order tbody th { font-weight: 600; }
.cc-order tbody tr.cc-held th { color: var(--signal); }
.cc-order-note { margin: 1rem 0 0; font-size: .8125rem; color: var(--ink-soft); }

/* Sections */
.cc-section { max-width: 72rem; margin: 0 auto; padding: 4rem 1.25rem; border-top: 1px solid var(--line); }
.cc-section h2 { font: 700 clamp(1.625rem, 3.2vw, 2.25rem)/1.15 var(--font); letter-spacing: -.02em; margin: 0 0 1.75rem; }
.cc-section h3 { font: 600 1.125rem/1.3 var(--font); margin: 0 0 .75rem; }
.cc-section p { margin: 0 0 1rem; max-width: 40rem; }

.cc-stages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
.cc-stages article { padding-top: 1rem; border-top: 3px solid var(--ink); }

.cc-papers { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 2rem 4rem; align-items: center; }
.cc-papers-link { display: grid; gap: .75rem; justify-items: start; }
.cc-papers-link span { color: var(--ink-soft); font-size: .9375rem; }

/* Request form: the core lays the fields out, the skin dresses them */
.cc-request { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 2rem 4rem; }
.cc-form .pc-intake { gap: 1.25rem; }
.cc-form .pc-field { font-weight: 600; font-size: .9375rem; }
.cc-form .pc-control { font: 400 1rem var(--font); color: var(--ink); background: var(--white); border: 1px solid var(--ink); border-radius: 2px; padding: .625rem .75rem; }
.cc-form .pc-intake-foot p { font-weight: 600; }
.cc-form [data-state="ok"] { color: #11603f; }
.cc-form [data-state="bad"] { color: var(--signal); }

.cc-foot { background: var(--ink); color: var(--paper); padding: 2rem 1.25rem 3rem; text-align: center; }
.cc-foot p { margin: .25rem 0; color: #b4c0c9; }
.cc-foot .cc-foot-mark { font-size: 1.125rem; font-weight: 700; letter-spacing: -.01em; color: var(--paper); }

/* Not-found page: the hero in one column */
.cc-lost { grid-template-columns: minmax(0, 1fr); }

@media (max-width: 52rem) {
  .cc-hero, .cc-papers, .cc-request { grid-template-columns: 1fr; }
  .cc-hero { padding-top: 3rem; padding-bottom: 3.5rem; }
  .cc-stages { grid-template-columns: 1fr; gap: 1.5rem; }
}
@media (prefers-reduced-motion: reduce) { .cc-button { transition: none; } }