/* Colonial Maneuvers: /collaboratory/colonialmaneuvers/index.htm
   Art direction: a restrained field-file / transmission aesthetic, deliberately
   distinct from the Playable FX main site while retaining image-led scroll blocks. */
:root {
  --black: #080b0e;
  --slate: #141a1f;
  --fog: #d8ddd9;
  --muted: #9aa6a7;
  --signal: #c9ae69;
  --line: rgb(216 221 217 / .35);
  --content: min(74rem, calc(100vw - 2.5rem));
  --display: "Archivo", Arial, sans-serif;
  --mono: "DM Mono", monospace;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--black); }
body { margin: 0; background: var(--black); color: var(--fog); font-family: var(--display); font-size: 16px; line-height: 1.65; }
a { color: inherit; }
.skip-link { position: fixed; z-index: 99; top: .75rem; left: .75rem; padding: .7rem 1rem; background: var(--fog); color: var(--black); transform: translateY(-180%); }
.skip-link:focus { transform: translateY(0); }

.project-header { position: fixed; z-index: 20; top: 0; left: 0; display: flex; justify-content: space-between; align-items: center; width: 100%; min-height: 4.5rem; padding: .8rem clamp(1rem, 3vw, 2.5rem); border-bottom: 1px solid rgb(216 221 217 / .18); background: rgb(8 11 14 / .76); backdrop-filter: blur(12px); }
.back-link { color: var(--fog); font-family: var(--mono); font-size: .7rem; letter-spacing: .06em; text-decoration: none; text-transform: uppercase; }
.back-link:hover, .back-link:focus-visible { color: var(--signal); }
.header-status { margin: 0; color: var(--muted); font-family: var(--mono); font-size: .65rem; letter-spacing: .06em; }
.header-status b { margin-left: .45rem; color: var(--signal); font-weight: 500; }

.scene { position: relative; display: grid; min-height: max(38rem, 82vh); isolation: isolate; overflow: clip; background-color: var(--slate); background-position: center; background-repeat: no-repeat; background-size: cover; }
.scene__veil { position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, rgb(3 5 7 / .88) 0%, rgb(3 5 7 / .61) 50%, rgb(3 5 7 / .25) 100%); }
.scene__content { align-self: center; width: var(--content); margin: 0 auto; padding: 7rem 0 4rem; }
.scene__content--wide { max-width: 74rem; }
.kicker { margin: 0 0 1rem; color: var(--signal); font-family: var(--mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; }
h1, h2 { margin: 0; color: #f6f7f4; font-family: var(--display); line-height: .94; text-wrap: balance; }
h1 { max-width: 10ch; font-size: clamp(3.7rem, 10vw, 9rem); font-weight: 800; letter-spacing: -.055em; text-transform: uppercase; }
h2 { max-width: 16ch; font-size: clamp(2.25rem, 5vw, 5.2rem); font-weight: 700; letter-spacing: -.035em; }
.hero-copy { max-width: 42rem; margin: 1.55rem 0 0; color: rgb(246 247 244 / .92); font-size: clamp(1.05rem, 2vw, 1.45rem); line-height: 1.45; }
.signal-line { display: flex; gap: .75rem; align-items: center; margin-top: 2.25rem; color: var(--muted); font-family: var(--mono); font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; }
.signal-line span { display: block; width: 4.5rem; height: 1px; background: var(--signal); }
.signal-line p { margin: 0; }
.down-link, .text-link { display: inline-flex; gap: .6rem; align-items: center; margin-top: 2.1rem; color: var(--fog); font-family: var(--mono); font-size: .72rem; letter-spacing: .08em; text-decoration: none; text-transform: uppercase; }
.down-link:hover, .down-link:focus-visible, .text-link:hover, .text-link:focus-visible { color: var(--signal); }

.scene--hero { min-height: 100svh; background-image: url("../images/colonial-maneuvers_bg1.jpg"); }
.scene--hero .scene__veil { background: linear-gradient(180deg, rgb(3 5 7 / .26) 0%, rgb(3 5 7 / .84) 89%); }
.scene--premise { background-image: url("../images/cg-dropship-cm_bg1.jpg"); }
.scene--process { background-image: url("../images/davinci-cm_bg1.jpg"); }
.scene--study { background-image: url("../images/lv426sky_bg.jpg"); }
.scene--collaborate { min-height: 35rem; background-image: url("../images/colonial-maneuvers_bg1.jpg"); }

.two-column-copy { display: grid; gap: 1.5rem 4rem; max-width: 68rem; margin-top: 2rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.two-column-copy p, .body-copy { max-width: 43rem; margin: 0; color: rgb(246 247 244 / .89); }
.process-list { display: grid; gap: .7rem 1.5rem; max-width: 56rem; margin: 2rem 0 0; padding: 0; font-family: var(--mono); font-size: .75rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.process-list li { padding: .85rem 0; border-top: 1px solid var(--line); }
.process-list li::before { content: "// "; color: var(--signal); }
.button { display: inline-flex; gap: .7rem; align-items: center; margin-top: 2rem; padding: .92rem 1.1rem; border: 1px solid var(--signal); background: rgb(4 6 7 / .25); color: var(--fog); font-family: var(--mono); font-size: .72rem; letter-spacing: .07em; text-decoration: none; text-transform: uppercase; transition: background-color .18s ease, color .18s ease, transform .18s ease; }
.button:hover, .button:focus-visible { background: var(--signal); color: var(--black); transform: translateY(-2px); }

.project-footer { padding: 2.5rem max(1.25rem, calc((100vw - 74rem) / 2)); border-top: 1px solid rgb(216 221 217 / .12); background: #07090b; color: var(--muted); font-family: var(--mono); font-size: .7rem; line-height: 1.65; }
.project-footer p { max-width: 94ch; margin: 0; }
.project-footer p + p { margin-top: .9rem; }
.project-footer strong { color: var(--fog); }
.project-footer a { color: var(--signal); }

@media (min-width: 48rem) and (hover: hover) { .scene { background-attachment: fixed; } }
@media (max-width: 47.99rem) {
  .project-header { min-height: 4rem; }
  .header-status { display: none; }
  .scene { min-height: 38rem; background-attachment: scroll; }
  .scene__veil { background: linear-gradient(180deg, rgb(3 5 7 / .5), rgb(3 5 7 / .9) 73%); }
  .scene__content { padding-top: 6.3rem; padding-bottom: 3.25rem; }
  h1 { font-size: clamp(3.25rem, 17vw, 5.5rem); }
  .two-column-copy, .process-list { grid-template-columns: 1fr; }
  .process-list { gap: 0; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: .01ms !important; } }