/* OC Design 949 — shared styling for the hosted pages.
   Palette and type match brand/positioning.md. */

:root{
  --navy:#14283C; --amber:#D98324; --paper:#F4F5F6; --ink:#14283C;
  --ink-2:#4E5F71; --ink-3:#788A9B; --rule:#C6CFD6; --card:#FFFFFF;
  --display:'Barlow Condensed',system-ui,sans-serif;
  --body:'Barlow',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#0E1B28; --card:#14283C; --ink:#F2F5F7; --ink-2:#B9C7D3;
    --ink-3:#8CA0B2; --rule:#2C4257;
  }
}
:root[data-theme="dark"]{
  --paper:#0E1B28; --card:#14283C; --ink:#F2F5F7; --ink-2:#B9C7D3;
  --ink-3:#8CA0B2; --rule:#2C4257;
}

*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);
     font-size:16.5px;line-height:1.62;-webkit-font-smoothing:antialiased}
/* The container takes ~70% of a wide screen so the gallery and the swimlane get
   room. Prose does NOT follow it: a 1200px line of body text is miserable to
   read, so paragraphs stay near 68 characters and only the wide blocks — the
   masonry, the swimlane — actually use the width. */
.wrap{max-width:1200px;margin:0 auto;padding:48px 22px 80px}
@media (min-width:1000px){ .wrap{width:70%;padding:56px 0 96px} }

header{display:flex;align-items:center;gap:16px;padding-bottom:22px;
       border-bottom:1px solid var(--rule);margin-bottom:34px}
header svg{width:52px;height:auto;flex:none}
.brand{font-family:var(--display);font-size:25px;font-weight:700;letter-spacing:.03em;
       text-transform:uppercase;line-height:1.05}
.brand span{display:block;font-family:var(--mono);font-size:10.5px;font-weight:500;
            letter-spacing:.16em;color:var(--ink-3);margin-top:5px}

h1{font-family:var(--display);font-size:42px;font-weight:700;letter-spacing:.01em;
   line-height:1.05;margin:0 0 10px;text-wrap:balance}
.updated{font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;
         text-transform:uppercase;color:var(--ink-3);margin:0 0 30px}
h2{font-family:var(--display);font-size:23px;font-weight:600;letter-spacing:.03em;
   text-transform:uppercase;margin:36px 0 10px}
p{margin:0 0 14px;color:var(--ink-2);max-width:68ch}
p strong,li strong{color:var(--ink);font-weight:600}
ul,ol{margin:0 0 14px;padding-left:20px;color:var(--ink-2)}
li{margin-bottom:7px}

.callout{background:var(--card);border:1px solid var(--rule);
         border-left:3px solid var(--amber);padding:16px 18px;margin:22px 0}
.callout p:last-child{margin-bottom:0}

a{color:var(--amber);text-underline-offset:2px}

footer{margin-top:46px;padding-top:20px;border-top:1px solid var(--rule);
       font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;
       text-transform:uppercase;color:var(--ink-3);
       display:flex;flex-wrap:wrap;gap:8px 18px}
footer a{color:var(--ink-3)}

/* index only */
.lede{font-size:19px;color:var(--ink-2);max-width:58ch}
.tag{font-family:var(--display);font-size:33px;font-weight:700;letter-spacing:.02em;
     text-transform:uppercase;margin:0 0 6px}
.tag em{font-style:normal;color:var(--amber)}
.steps{display:grid;gap:0;border:1px solid var(--rule);margin:26px 0}
.step{display:grid;grid-template-columns:54px 1fr;border-bottom:1px solid var(--rule)}
.step:last-child{border-bottom:0}
.step-n{font-family:var(--display);font-size:24px;font-weight:700;color:var(--amber);
        display:flex;align-items:center;justify-content:center;
        border-right:1px solid var(--rule);background:var(--card)}
.step-b{padding:13px 16px}
.step-b b{font-family:var(--display);font-size:19px;font-weight:600;letter-spacing:.03em;
          text-transform:uppercase;display:block}
.step-b span{font-size:15px;color:var(--ink-2)}
.cta{display:inline-block;margin-top:8px;background:var(--navy);color:#FCFCFB;
     font-family:var(--mono);font-size:13px;letter-spacing:.12em;text-transform:uppercase;
     padding:13px 20px;text-decoration:none;border:1px solid var(--navy)}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .cta{background:var(--amber);border-color:var(--amber);color:#14283C}
}
:root[data-theme="dark"] .cta{background:var(--amber);border-color:var(--amber);color:#14283C}

/* ── nav ─────────────────────────────────────────────────────────── */
/* Sits under the header rule. Tap targets are 44px tall, which is the
   minimum that reliably works with a thumb. */
.nav{display:flex;flex-wrap:wrap;gap:2px 22px;margin:-18px 0 30px;
     font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase}
.nav a{color:var(--ink-3);text-decoration:none;padding:14px 0;display:inline-block}
.nav a:hover,.nav a:focus-visible{color:var(--ink)}
.nav a[aria-current="page"]{color:var(--amber)}

/* ── work gallery ────────────────────────────────────────────────── */
/* auto-fill + minmax means the column count follows the viewport instead of
   a breakpoint: three up on a laptop, one up on a phone, nothing to maintain. */
/* ── swimlane ────────────────────────────────────────────────────── */
/* Four phases across, four lanes down. Built column-major — each phase is one
   block containing its four lanes — because a row-major grid cannot be reflowed
   into phase order on a phone by CSS alone, and a swimlane that stacks into
   "all the planning cells, then all the people cells" is unreadable. */
.swim{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
      background:var(--rule);border:1px solid var(--rule);margin:22px 0}
@media (max-width:900px){ .swim{grid-template-columns:repeat(2,1fr)} }
@media (max-width:600px){ .swim{grid-template-columns:1fr} }

.phase{background:var(--card);display:flex;flex-direction:column}

/* Align the lanes across all four phases. Without this each column sizes its
   own rows and the payoff line lands at a different height in every one — which
   reads as four separate cards, not a swimlane. Subgrid makes the phases share
   the parent's rows. Only at the 4-column width; narrower, the columns stack and
   there is nothing to align against. Flex above remains the fallback. */
@media (min-width:901px){
  @supports (grid-template-rows: subgrid){
    .swim{grid-template-rows:auto repeat(4,auto)}
    .phase{display:grid;grid-template-rows:subgrid;grid-row:span 5}
  }
}
.phase-h{padding:13px 15px 12px;border-bottom:1px solid var(--rule);
         background:var(--paper)}
.phase-n{font-family:var(--mono);font-size:10px;letter-spacing:.16em;
         text-transform:uppercase;color:var(--amber);display:block;margin-bottom:4px}
.phase-h b{font-family:var(--display);font-size:19px;font-weight:600;
           letter-spacing:.03em;text-transform:uppercase;line-height:1.1;color:var(--ink)}

.lane{padding:12px 15px;border-bottom:1px solid var(--rule-soft);
      font-size:14.5px;color:var(--ink-2);flex:1}
.lane:last-child{border-bottom:0}
.lane em{display:block;font-style:normal;font-family:var(--mono);font-size:9.5px;
         letter-spacing:.15em;text-transform:uppercase;color:var(--ink-3);margin-bottom:5px}
/* The payoff lane is the row a sceptical homeowner is actually reading for. */
.lane.pay{background:var(--navy);color:#DCE6EF}
.lane.pay em{color:var(--amber)}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .lane.pay{background:#0A1420}
}
:root[data-theme="dark"] .lane.pay{background:#0A1420}

.edges{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
       gap:0;border:1px solid var(--rule);margin:22px 0}
.edge{padding:15px 17px;border-right:1px solid var(--rule)}
.edge:last-child{border-right:0}
.edge b{display:block;font-family:var(--display);font-size:18px;font-weight:600;
        letter-spacing:.03em;text-transform:uppercase;margin-bottom:5px}
.edge span{font-size:14.5px;color:var(--ink-2)}
@media (max-width:660px){ .edge{border-right:0;border-bottom:1px solid var(--rule)}
                          .edge:last-child{border-bottom:0} }

/* Masonry by CSS columns.
   Jobsite photos come in whatever orientation the phone was held, and the two
   obvious layouts both fail: an equal-height grid leaves ragged holes under the
   short tiles, and cropping everything to one ratio cuts the top and bottom off
   the portrait shots — which on this site is often the subject, since a stud
   bay or a full-height opening is a tall thing.
   Columns keep every photo's true proportions and still close the gaps. */
.gallery{column-count:2;column-gap:18px;margin:26px 0}
@media (min-width:1000px){ .gallery{column-count:3} }
@media (max-width:520px){ .gallery{column-count:1} }

.shot{break-inside:avoid;-webkit-column-break-inside:avoid;
      margin:0 0 18px;border:1px solid var(--rule);background:var(--card);
      display:inline-block;width:100%}
.shot img{display:block;width:100%;height:auto}

/* Before/after pairs are one object and must span the full width, which a
   column can't do — so they live in their own block above the masonry. */
.pairs{display:flex;flex-direction:column;gap:18px;margin:26px 0}
.shot figcaption{padding:10px 12px;font-size:14px;color:var(--ink-2)}
.shot figcaption b{display:block;font-family:var(--display);font-size:16px;font-weight:600;
                   letter-spacing:.03em;text-transform:uppercase;color:var(--ink)}

/* A before/after pair is one object, so it spans the full width and splits
   internally — never two unrelated tiles that happen to sit side by side. */
.pair{border:1px solid var(--rule);background:var(--card);margin:0}
.pair-imgs{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--rule)}
.pair-imgs figure{margin:0;position:relative;background:var(--card)}
.pair-imgs img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.pair-imgs figcaption{position:absolute;top:0;left:0;
      font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
      background:var(--navy);color:#FCFCFB;padding:5px 10px}
.pair > figcaption{padding:11px 13px;font-size:14.5px;color:var(--ink-2)}
.pair > figcaption b{font-family:var(--display);font-size:17px;font-weight:600;
                     letter-spacing:.03em;text-transform:uppercase;color:var(--ink)}
@media (max-width:460px){
  /* Below this a side-by-side pair is two thumbnails nobody can read. Stack them,
     and the BEFORE/AFTER labels carry the comparison instead of adjacency. */
  .pair-imgs{grid-template-columns:1fr}
}

.empty{border:1px dashed var(--rule);padding:26px 20px;text-align:center;
       color:var(--ink-3);font-size:15px;margin:26px 0}
.empty b{display:block;font-family:var(--display);font-size:19px;font-weight:600;
         letter-spacing:.03em;text-transform:uppercase;color:var(--ink-2);margin-bottom:5px}