/* AMAI Marine · #/models, #/models/850, #/models/:id, #/404 */

/* ---------- the range page ---------- */
.models { padding-top: 72px; }
.models-head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px 64px; align-items: end; margin-bottom: 40px; }
.models-head .eyebrow { grid-column: 1 / -1; margin-bottom: 0; }
.models-head h1 { font-size: var(--fs-h1); }
.rule-groups { position: absolute; left: 0; right: 0; bottom: 0; height: 40px; }
.rg { position: absolute; left: var(--x1); width: calc(var(--x2) - var(--x1)); top: 0; height: 10px; border: 1px solid var(--seam); border-top: 0; }
.rg span { position: absolute; top: 18px; left: 50%; translate: -50% 0; white-space: nowrap; font-size: var(--fs-scale); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.models-foot { margin-top: 40px; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px 64px; align-items: end; }
.models-foot .seam { grid-column: 1 / -1; margin-bottom: 16px; }
.models-foot p { color: var(--ink-2); }
.models-links { display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: baseline; justify-self: end; }
@media (max-width: 1100px) {
  .rule-groups { display: none; }
}
@media (max-width: 900px) {
  .models { padding-top: 40px; }
  .models-head, .models-foot { grid-template-columns: minmax(0, 1fr); }
  .models-links { justify-self: start; }
  .models-foot { margin-top: 48px; }
}

/* ---------- model page head (850 and the others) ---------- */
.m-head, .mo-head { padding-top: 72px; }
.m-head-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px 64px; align-items: end; }
.m-title { font-size: var(--fs-display); line-height: .86; letter-spacing: var(--track-display); margin-left: -.04em; text-wrap: nowrap; }
.m-head-side { padding-bottom: 8px; }
.m-type { font-size: var(--fs-ui); font-weight: 600; color: var(--ink); margin-bottom: 12px; }
.m-head-side .lede { max-width: 40ch; font-size: 19px; }
.m-price { margin: 20px 0 24px; font-size: var(--fs-ui); color: var(--ink-2); max-width: none; }
.m-price .num { color: var(--ink); font-weight: 500; }
.m-profile { margin-top: 64px; }
.m-sec-head { margin-bottom: 40px; max-width: 900px; }
.m-part-grid { display: grid; gap: 40px; }
@media (max-width: 900px) {
  .m-head, .mo-head { padding-top: 40px; }
  .m-head-grid { grid-template-columns: minmax(0, 1fr); }
  .m-title { font-size: clamp(64px, 20vw, 120px); }
  .m-profile { margin-top: 32px; }
}

/* standard equipment: a typeset list, not cards */
.m-std-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px 64px; align-items: start; }
.m-std-note { margin-top: 20px; }
@media (max-width: 900px) { .m-std-grid { grid-template-columns: minmax(0, 1fr); } }

/* gallery: our renders, asymmetric, captioned */
.gal { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 40px 24px; align-items: end; }
.gal-item { margin: 0; }
.gal-item img { width: 100%; object-fit: cover; background: var(--surface); }
.gal-item figcaption { margin-top: 12px; font-size: var(--fs-meta); color: var(--muted); max-width: 52ch; }
.g-a { grid-column: 1 / span 8; } .g-a img { aspect-ratio: 16 / 10; }
.g-b { grid-column: 9 / span 4; } .g-b img { aspect-ratio: 4 / 5; object-position: 45% 50%; }
.g-c { grid-column: 1 / span 5; } .g-c img { aspect-ratio: 4 / 3; object-position: 40% 50%; }
.g-d { grid-column: 6 / span 7; } .g-d img { aspect-ratio: 16 / 9; }
.m-gal .fine { margin-top: 32px; }
@media (max-width: 900px) {
  .gal { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .g-a, .g-b, .g-c, .g-d { grid-column: auto; }
  .gal-item img { aspect-ratio: 16 / 10 !important; }
}

/* configure entry */
.m-cfg .seam { margin-bottom: 48px; }
.m-cfg-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 24px 64px; align-items: end; justify-content: space-between; }
.m-cfg-side p { color: var(--ink-2); }
.m-cfg-side .m-price { margin: 16px 0 24px; }
.m-cfg-links { display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: center; margin-top: 24px; }
@media (max-width: 900px) { .m-cfg-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- other models: her plan outline on the range rule, the 850 ghosted ---------- */
.rd { position: relative; margin: 56px 0 0; }
.rd-art { position: relative; }
.rd svg { display: block; width: 100%; height: auto; overflow: visible; }
.rd path { fill: none; vector-effect: non-scaling-stroke; stroke-width: 1; }
.rd .rd-ghost { stroke: var(--hairline); }
.rd .rd-me { stroke: var(--ink); stroke-width: 1.5; fill: var(--surface); fill-rule: evenodd; }
.rd .rd-centre { stroke: var(--seam); stroke-dasharray: 14 5 2 5; }
.rd .rd-ext { stroke: var(--seam); }
.rd .rd-ext-ghost { stroke: var(--hairline); stroke-dasharray: 3 4; }
.rd .rd-rule { stroke: var(--ink); stroke-opacity: .85; }
.rd .rd-lap { stroke: var(--seam); }
.rd .rd-tick { stroke: var(--seam); }
.rd .rd-len { stroke: var(--ink); stroke-width: 3; }
.rd-scale, .rd-m { position: absolute; translate: -50% 0; font-size: var(--fs-scale); color: var(--muted); letter-spacing: .04em; }
.rd-label { position: absolute; translate: -50% -130%; padding: 0 10px; background: var(--page); }
.rd-label b { font-size: var(--fs-fig); font-weight: 600; letter-spacing: -.01em; }
.rd-ghostlabel { position: absolute; translate: 0 -50%; font-size: var(--fs-meta); color: var(--muted); white-space: nowrap; }
.rd figcaption { margin-top: 36px; max-width: 72ch; }
@media (max-width: 720px) {
  .rd { margin-top: 32px; }
  .rd-label b { font-size: 17px; }
  .rd-ghostlabel { font-size: 10px; }
  .rd-scale, .rd-m { font-size: 9px; }
  .rd figcaption { margin-top: 28px; }
}

/* ---------- the builder's plate (ISO 14945): stamped metal, hairline rows ---------- */
.plate {
  position: relative; padding: 28px 32px 22px; border: 1px solid var(--ink-2); border-radius: 3px;
  background: var(--page); max-width: 560px;
  outline: 1px solid var(--hairline); outline-offset: -6px;
}
.plate-rivet { position: absolute; width: 7px; height: 7px; border-radius: 50%; border: 1px solid var(--muted); }
.plate-rivet:nth-child(1) { left: 12px; top: 12px; } .plate-rivet:nth-child(2) { right: 12px; top: 12px; }
.plate-rivet:nth-child(3) { left: 12px; bottom: 12px; } .plate-rivet:nth-child(4) { right: 12px; bottom: 12px; }
.plate-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 0 8px 14px; border-bottom: 1px solid var(--ink-2); }
.plate-maker { font-size: 17px; font-weight: 600; letter-spacing: .01em; max-width: none; }
.plate-maker span { display: block; font-size: var(--fs-scale); font-weight: 500; letter-spacing: .12em; color: var(--muted); margin-top: 3px; }
.plate-ce { font-size: 30px; font-weight: 600; letter-spacing: -.04em; line-height: 1; max-width: none; }
.plate-rows { margin: 0; }
.plate-rows > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 20px; align-items: baseline; padding: 12px 8px; border-bottom: 1px solid var(--hairline); }
.plate-rows dt { font-size: var(--fs-meta); color: var(--muted); letter-spacing: .02em; }
.plate-rows dd { text-align: right; font-size: var(--fs-ui); color: var(--ink); }
.plate-rows dd b { font-size: var(--fs-fig); font-weight: 600; letter-spacing: -.015em; line-height: 1.1; }
.plate-note { display: block; margin-top: 2px; font-size: 12px; color: var(--muted); text-align: right; }
.plate-blank { color: var(--muted); font-weight: 400; letter-spacing: .02em; }
.plate-cin { white-space: nowrap; }
.plate-cin .plate-blank { font-size: .6em; letter-spacing: .12em; }
.plate-ask { color: var(--muted); font-size: var(--fs-ui); }
.plate-foot { padding: 14px 8px 0; font-size: 17px; color: var(--ink-2); max-width: none; }
@media (max-width: 420px) {
  .plate { padding: 24px 18px 18px; }
  .plate-rows > div { grid-template-columns: minmax(0, 1fr); }
  .plate-rows dd, .plate-note { text-align: left; }
}

.m-plate-row { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 32px 64px; align-items: center; margin-top: 24px; }
.m-plate-side p { color: var(--ink-2); }
.m-plate-side .meta { margin-top: 16px; color: var(--muted); }
@media (max-width: 900px) { .m-plate-row { grid-template-columns: minmax(0, 1fr); } }

/* ---------- sheet 00 of the build sheet (same rows as the configurator summary) ---------- */
.sheet00 { width: 100%; border-collapse: collapse; font-size: var(--fs-ui); }
.sheet00 thead th { text-align: left; font-size: 12px; font-weight: 600; letter-spacing: .02em; color: var(--muted); padding: 0 12px 10px 0; border-bottom: 1px solid var(--ink); }
.sheet00 td, .sheet00 tbody th, .sheet00 tfoot th { text-align: left; padding: 13px 12px 13px 0; border-bottom: 1px solid var(--hairline); vertical-align: baseline; font-weight: 400; color: var(--ink); }
.sheet00 .s00-code { width: 64px; color: var(--muted); font-size: 13px; font-weight: 500; }
.sheet00 .s00-r { text-align: right; padding-right: 0; white-space: nowrap; }
.sheet00 .s00-in { color: var(--muted); font-size: 13px; }
.sheet00 tfoot th, .sheet00 tfoot td { border-bottom: 0; border-top: 1px solid var(--ink); font-weight: 500; }

.mo-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 40px 64px; align-items: start; }
.mo-price { font-size: var(--fs-ui); color: var(--ink-2); max-width: none; }
.mo-price .money { font-size: var(--fs-fig); margin: 0 6px; }
.mo-tubes { margin: 12px 0 40px; font-size: var(--fs-ui); max-width: none; }
.mo-tubes .meta { display: block; margin-bottom: 2px; }
.mo-h3 { font-size: var(--fs-ui); font-weight: 600; letter-spacing: 0; line-height: 1.4; margin-bottom: 14px; }
.mo-next .seam { margin-bottom: 48px; }
.mo-step { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 8px; font-size: var(--fs-ui); }
@media (max-width: 900px) { .mo-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- 404 ---------- */
.nf { padding-top: 96px; padding-bottom: 32px; }
.nf-code { font-size: var(--fs-meta); letter-spacing: .1em; color: var(--muted); margin-bottom: 16px; }
.nf-seam { position: relative; height: 5px; width: min(480px, 100%); margin-bottom: 40px; }
.nf-seam::before, .nf-seam::after { content: ''; position: absolute; height: 1px; transform-origin: 0 50%; }
.nf-seam::before { left: 0; width: 62%; top: 4px; background: var(--ink); }
.nf-seam::after { left: 70%; right: 0; top: 0; background: var(--seam); }
.nf h1 { max-width: 14ch; }
.nf .lede { margin-top: 24px; }
.nf-links { display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: baseline; margin-top: 40px; }