/* ---- careen (Careen — Wooden boatyard 34) — cold cast concrete, one marine blue ----
   THE STRUCTURAL MOVE: the work is a single full-bleed band of six mixed-span
   tiles (2x1, 1x2, 1x1, 1x1, 2x1, 1x1) packed flush at hairline gutters into
   exactly three full rows — and the tiles carry NO captions. The labelling is
   pulled out of the grid and set underneath as a numbered index in the narrow
   column, so the photographs stay silent and the text does the naming. Two
   left-aligned text slabs bracket that band. */
body.t-careen.ws-body { --bg: #e7e8ea; --fg: #4b5058; --heading: #16181c; --text: #4b5058; --muted: #858b94; }
body.t-careen .ws-container:not(.ws-narrow) { max-width: 1300px; }
body.t-careen .ws-nav { background: color-mix(in srgb, #e7e8ea 88%, transparent); border-bottom-color: #cbced4; }
body.t-careen .ws-brand, body.t-careen .ws-nav-links a, body.t-careen .ws-field label { text-transform: uppercase; letter-spacing: 0.24em; font-size: 11px; font-weight: 700; }
/* one uniform concrete ground — the zebra tint would put a second value on the page */
body.t-careen .ws-section:nth-child(even):not(.ws-cta):not(.ws-shoplink) { background: transparent; }
/* hero copy rides low and hard left ON the photograph, not floating in it */
body.t-careen .ws-hero { min-height: 100vh; align-items: flex-end; --hero-a: rgba(12,14,18,.10); --hero-b: rgba(12,14,18,.64); }
body.t-careen .ws-hero-inner { max-width: 1300px; padding: 0 22px 78px; }
body.t-careen .ws-hero h1 { font-size: clamp(32px, 5.4vw, 60px); font-weight: 700; letter-spacing: -0.035em; line-height: 1.02; max-width: 18ch; }
body.t-careen .ws-h2, body.t-careen .ws-col-h { text-align: left; text-transform: uppercase; letter-spacing: 0.2em; font-size: 11px; font-weight: 700; margin: 0 0 20px; }
body.t-careen .ws-title-h { font-weight: 400; font-size: clamp(21px, 2.8vw, 32px); letter-spacing: -0.01em; }
body.t-careen .ws-photogrid-grid { grid-auto-rows: 27vw; gap: 2px; }
body.t-careen .ws-photogrid-grid img { height: 100%; aspect-ratio: auto; }
body.t-careen .ws-photogrid-grid img:nth-child(1), body.t-careen .ws-photogrid-grid img:nth-child(5) { grid-column: span 2; }
body.t-careen .ws-photogrid-grid img:nth-child(2) { grid-row: span 2; }
/* the index: the captions the grid refuses to carry */
body.t-careen .ws-list-number { list-style: none; padding-left: 0; counter-reset: hull; }
body.t-careen .ws-list-number li { counter-increment: hull; display: grid; grid-template-columns: 46px 1fr; padding: 14px 0; margin: 0; border-top: 1px solid #cbced4; font-size: 15px; line-height: 1.6; }
body.t-careen .ws-list-number li::before { content: counter(hull, decimal-leading-zero); color: #1a5e8a; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; padding-top: 5px; }
body.t-careen .ws-team-grid { grid-template-columns: repeat(4, 1fr); gap: 28px; }
body.t-careen .ws-member { text-align: left; }
body.t-careen .ws-member-photo img { width: 100%; height: auto; aspect-ratio: 4 / 5; border-radius: 0; margin: 0 0 14px; }
/* the hire band: a hairline two-column close, address left, fields right */
body.t-careen .ws-contact .ws-container { max-width: 1300px; display: grid; grid-template-columns: 1fr 1fr; column-gap: 64px; border-top: 1px solid #cbced4; padding-top: 46px; }
body.t-careen .ws-contact .ws-form { grid-column: 2; grid-row: 1 / -1; max-width: none; border-left: 1px solid #cbced4; padding-left: 64px; }
body.t-careen .ws-contact .ws-sub { text-align: left; margin: 0; max-width: 32ch; }
body.t-careen .ws-field input, body.t-careen .ws-field textarea { border: 0; border-bottom: 1px solid #b7bbc2; border-radius: 0; background: transparent; padding: 10px 0; }
body.t-careen .btn.brand { background: #1a5e8a; color: #ffffff; border-radius: 0; text-transform: uppercase; letter-spacing: 0.2em; font-size: 11px; font-weight: 700; padding: 15px 30px; }
body.t-careen .btn.brand:hover { background: #144b6f; }

/* split nav — two links, the wordmark, two links. `display: contents` lifts the
   links into the bar's own flex row so the brand can sit between them; scoped
   above the 760px breakpoint so the mobile hamburger menu is untouched. */
@media (min-width: 761px) {
  body.t-careen .ws-nav-inner { gap: 40px; }
}

/* narrow: the spans would leave a hole in a two-column grid, so they are dropped */
@media (max-width: 720px) {
  body.t-careen .ws-photogrid-grid { grid-auto-rows: 44vw; }
  body.t-careen .ws-photogrid-grid img:nth-child(1), body.t-careen .ws-photogrid-grid img:nth-child(2), body.t-careen .ws-photogrid-grid img:nth-child(5) { grid-column: auto; grid-row: auto; }
  body.t-careen .ws-team-grid { grid-template-columns: repeat(2, 1fr); }
  body.t-careen .ws-contact .ws-container { grid-template-columns: 1fr; }
  body.t-careen .ws-contact .ws-form { grid-column: 1; grid-row: auto; border-left: 0; padding-left: 0; padding-top: 34px; }
}

/* careen — cast concrete by day, wet slipway at night */
html[data-theme="dark"] body.t-careen.ws-body { --bg: #14161a; --fg: #b0b6be; --heading: #e7e8ea; --text: #b0b6be; --muted: #7b818a; }
html[data-theme="dark"] body.t-careen { background: #14161a; }
html[data-theme="dark"] body.t-careen .ws-nav { background: color-mix(in srgb, #14161a 88%, transparent); border-bottom-color: #262a30; }
html[data-theme="dark"] body.t-careen .ws-list-number li,
html[data-theme="dark"] body.t-careen .ws-contact .ws-container,
html[data-theme="dark"] body.t-careen .ws-contact .ws-form { border-color: #262a30; }
html[data-theme="dark"] body.t-careen .ws-list-number li::before { color: #6aa9d4; }
html[data-theme="dark"] body.t-careen .ws-field input, html[data-theme="dark"] body.t-careen .ws-field textarea { border-bottom-color: #383e46; color: #e7e8ea; }
html[data-theme="dark"] body.t-careen .ws-member p, html[data-theme="dark"] body.t-careen .ws-sub { color: #9096a0; }
html[data-theme="dark"] body.t-careen .btn.brand { background: #6aa9d4; color: #14161a; }
html[data-theme="dark"] body.t-careen .btn.brand:hover { background: #83b9de; }