/* /editing (SPEC §10; site/tools/pages/editing.mjs): the page's own layout on top of styles.css + css/pages.css; «the cut» itself is
   css/cut.css. Paper language: hairlines, mono labels, square chips; nothing rounded, no shadows. */

/* ---- the first screen: the service line on the left, the monitor of «the cut» with its bar on the right, the timeline and its
   controls under both, across the page (the H1 beside the picture, as on /led-content). .cut is display: contents there, so its
   parts are cells of this grid (no cell spans rows: a spanning column beside the aspect-ratio monitor inflated the empty row in
   Chrome); below 900 px everything is one column in reading order: the line, then the piece. */
.ed-top{padding-top:40px;padding-bottom:64px}
.ed-intro .label{margin-bottom:20px}
.ed-intro h1{max-width:16ch;font-size:clamp(32px,4.4vw,62px)}
.ed-intro .sec-lead{margin-top:22px;max-width:36ch}
.ed-intro .ctas{margin-top:28px}
@media (min-width:900px){
  .ed-top{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:48px;align-items:start}
  .ed-top>.cut{display:contents}
  .ed-intro{grid-column:1;grid-row:1;align-self:stretch;display:flex;flex-direction:column;min-width:0}
  .ed-intro .ctas{margin-top:auto;padding-top:28px}
  .ed-top .cut-view{grid-column:2;grid-row:1}
  .ed-top .cut-tl,.ed-top .cut>.cut-row{grid-column:1/-1;grid-row:2}
  .ed-top .cut-ctl{grid-column:1/-1;grid-row:3}
}
@media (max-width:899px){
  .ed-top{padding-top:32px;padding-bottom:48px}
  .ed-top>.cut{display:block;margin-top:32px}
}
@media (max-width:720px){.ed-top{padding-top:28px;padding-bottom:40px}.ed-top>.cut{margin-top:28px}}

/* ---- selected work: three across; a count that would leave a hole in the last row puts its first pieces two across instead
   (3n + 2: the first two; 3n + 1: the first four), so every row is full. Two across below 1024 px (an odd count: the first one
   alone on its row), one below 640 px */
.sw-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:40px var(--gut,24px)}
.sw-grid .sw{grid-column:span 6}
.sw-grid .sw img{aspect-ratio:16/9;object-fit:cover}
@media (min-width:641px){
  .sw-grid .sw{grid-column:span 3}
  .sw-grid .sw:first-child:nth-last-child(odd){grid-column:span 6}
}
@media (min-width:1024px){
  .sw-grid .sw,.sw-grid .sw:first-child:nth-last-child(odd){grid-column:span 2}
  .sw-grid .sw:first-child:nth-last-child(3n+2),.sw-grid .sw:first-child:nth-last-child(3n+2)+.sw,
  .sw-grid .sw:first-child:nth-last-child(3n+1),.sw-grid .sw:first-child:nth-last-child(3n+1)+.sw,.sw-grid .sw:first-child:nth-last-child(3n+1)+.sw+.sw,.sw-grid .sw:first-child:nth-last-child(3n+1)+.sw+.sw+.sw{grid-column:span 3}
}
@media (max-width:640px){.sw-grid{gap:28px}}

/* ---- what the service covers: the head in a left rail, the crafts as rows under hairlines (a detail only where the site has one) */
.ed-cover{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:32px 48px;align-items:start}
.ed-cover .sec-head{margin:0}
.ed-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.ed-list li{display:grid;grid-template-columns:44px minmax(0,1fr) minmax(0,1.3fr);gap:4px 16px;align-items:baseline;padding:18px 0 19px;border-bottom:var(--hair)}
.ed-list b{font-size:clamp(22px,2.1vw,30px);line-height:1.08;letter-spacing:-.02em;font-weight:700}
.ed-list p{margin:0;font-size:16px;line-height:1.45;color:var(--body-ink);max-width:40ch}
@media (max-width:899px){.ed-cover{grid-template-columns:minmax(0,1fr)}}
@media (max-width:560px){.ed-list li{grid-template-columns:36px minmax(0,1fr)}.ed-list p{grid-column:2}}
/* the line the headline used to be, kept under the service's plain name (SEO plan: the H1 names the service) */
.ed-intro .hero-sub{font:600 clamp(18px,1.7vw,24px)/1.15 "Instrument Sans","Onest",system-ui,sans-serif;letter-spacing:-.02em;color:var(--mid);margin:14px 0 0}