/* trajanus-usa.com (ORD-612, 12 Nov 2026). The pages carry CP's approved layout in their own style attributes; this sheet holds what is shared:
   the ground, links, pictures at half the column at most that open full size on a click, the phone layout (390 px), and focus rings. */
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: #0A0A0F; }
a { color: #7FB2FF; text-decoration: none; }
a:hover { color: #FFFFFF; }
a:focus-visible, summary:focus-visible { outline: 2px solid #7FB2FF; outline-offset: 3px; border-radius: 2px; }
img, video, svg { max-width: 100%; }
/* ORD-612 section 4: no picture wider than half the content column on a desktop (560 px); a click opens it full size */
figure { max-width: 560px; }
figure img, figure video { width: 100%; height: auto; display: block; }
a.zoom { display: block; cursor: zoom-in; }
a.zoom:hover img { border-color: #3D8BFF !important; }
/* the sections this build adds (ORD-612 section 3): the same card, label and caption styles the draft uses */
.steps { display: flex; flex-direction: column; gap: 24px; }
.step { display: flex; flex-wrap: wrap; gap: 24px 40px; align-items: flex-start; background: #12151D; border: 1px solid #1F2533; border-radius: 6px; padding: 32px; }
.step .words { flex: 1 1 380px; display: flex; flex-direction: column; gap: 12px; }
.step .words p { margin: 0; }
.step .num { font-family: 'JetBrains Mono', monospace; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: #7FB2FF; }
.step h3 { margin: 0; font-family: Rajdhani, sans-serif; font-weight: 700; font-size: 28px; line-height: 1.15; color: #F2F4F8; }
.step .io b { color: #E6E8EE; font-weight: 500; }
.step figure, .produces figure { margin: 0; flex: 1 1 320px; display: flex; flex-direction: column; gap: 10px; }
.shot { position: relative; }
.shot img, .shot video { border: 1px solid #1F2533; border-radius: 6px; }
.tag { position: absolute; top: 10px; left: 10px; padding: 4px 10px; background: rgba(7,8,12,0.85); border: 1px solid #3D8BFF; border-radius: 4px; font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: #E6E8EE; pointer-events: none; }
.tag.model { top: auto; bottom: 10px; border-color: #8B95A5; }
figcaption { font-family: 'JetBrains Mono', monospace; font-size: 13px; color: #8B95A5; }
.planned { border-style: dashed; }
.noshot { flex: 1 1 320px; max-width: 560px; background: #12151D; border: 1px solid #1F2533; border-radius: 6px; padding: 24px; }
.noshot p { margin: 0; }
.noshot b { color: #E6E8EE; font-weight: 500; }
.produces { display: flex; flex-wrap: wrap; gap: 32px; }
/* the Field Program's four-step diagram: four small drawings, each with its words as text, side by side on a desktop and stacked on a phone
   (Codex's check of 3063a5c: one wide drawing was over the half-column rule and its labels were too small on a phone) */
.panels { display: flex; flex-wrap: wrap; gap: 20px; }
.panel { flex: 1 1 220px; max-width: 270px; background: #12151D; border: 1px solid #1F2533; border-radius: 6px; padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.panel h3 { margin: 0; font-family: Rajdhani, sans-serif; font-weight: 700; font-size: 22px; letter-spacing: 0.04em; text-transform: uppercase; color: #F2F4F8; }
.panel svg { width: 100%; height: auto; display: block; }
.panel p { margin: 0; font-size: 15px; }
.panel p b { color: #E6E8EE; font-weight: 500; }
/* Bill, 12 Nov 2026, on his first look at the built pages: "too much blank space. content is good, but it's too spread out. scrolling shouldnt
   be so much black space". The draft gave every block 88 to 120 px of empty ground above and below and 40 to 56 px between its parts; these
   bring that down by about half on every page. The words, the pictures and their order are untouched */
[style*="padding: 120px 32px 96px"], [style*="padding: 112px 32px 96px"] { padding: 52px 32px 44px !important; }
[style*="padding: 96px 32px"], [style*="padding: 88px 32px"] { padding: 44px 32px !important; }
[style*="padding: 48px 32px"] { padding: 30px 32px !important; }
[style*="gap: 56px"], [style*="gap: 48px"] { gap: 28px !important; }
[style*="gap: 40px"] { gap: 22px !important; }
[style*="gap: 28px"] { gap: 18px !important; }
[style*="padding: 36px"] { padding: 26px !important; }
[style*="margin: 24px 0 0"] { margin-top: 8px !important; }
.steps { gap: 16px; }
.step { padding: 24px; gap: 18px 32px; }
.produces { gap: 22px; }
/* the phone (390 px): less padding round every block, the header's name and menu stack, pictures take the column */
@media (max-width: 640px) {
  [style*="padding: 120px 32px"], [style*="padding: 112px 32px"], [style*="padding: 96px 32px"], [style*="padding: 88px 32px"] { padding: 34px 20px !important; }
  [style*="padding: 48px 32px"], [style*="padding: 20px 32px"] { padding-left: 20px !important; padding-right: 20px !important; }
  [style*="padding: 36px"], [style*="padding: 32px"] { padding: 22px !important; }
  [style*="font-size: 40px"] { font-size: 30px !important; }
  [style*="font-size: 30px"] { font-size: 22px !important; }
  [style*="font-size: 28px"] { font-size: 22px !important; }
  [style*="flex: 1 1 420px"], [style*="flex: 1 1 480px"], [style*="flex: 2 1 560px"], [style*="flex: 2 1 520px"], [style*="flex: 1 1 360px"], [style*="flex: 1 1 340px"] { flex-basis: 100% !important; }
  header nav { gap: 6px 18px !important; font-size: 15px !important; }
  header img { width: 48px !important; height: 48px !important; }
  figure { max-width: 100%; }
  .step { padding: 22px; }
  .panel { max-width: 100%; }
}
@media (prefers-reduced-motion: reduce) { video { animation: none; } }