/* The module vocabulary.
   ------------------------------------------------------------------------------------
   Measured against the reference site (guiacirugiacardiaca.com) on 2 Sep 2026: its
   articles run 462 to 1,497 words and no single prose block exceeds 133. Ours run 2,184
   to 3,909 with blocks up to 224. But the median block is close on both sites, so length
   is only half of it. The other half is that their pages never look the same twice: a
   1,062-word article is twelve modules of seven named kinds, and ours is fifty-one runs
   of one kind. This file is the seven kinds.

   Their variation is bought with illustration. `.article` there is a two-column grid,
   half text and half drawing, and `.article.invert` flips the sides. As of 3 Sep 2026 we
   take that format outright (ADR-001, amended): `.m-article` below is the same 50/50 grid
   at the same 80px gap, and drawings are authored here in SVG rather than commissioned.
   The second column holds a drawing where one exists and the thesis line where one does
   not, so the structure never depends on the drawing set being finished.

   We do not copy their flip mechanism. Theirs is `direction:rtl` on the container, which
   reverses selection and reading order along with the layout. Ours keeps the thesis
   first in the source on every module and swaps `grid-column` at desktop only, so what a
   screen reader announces is the same in both directions.

   Parcours: fill only, structure is ink, one accent per view, three text colours. */

/* --- rhythm ---------------------------------------------------------------------
   Gaps carry the rhythm, so they vary. The reference stacks named separators between
   modules (space_xs, space_s, space_m) rather than spacing everything alike; these are
   the same four sizes as a class on the module that follows. */
.m + .m{margin-top:var(--sep)}
.m + .m.tight{margin-top:var(--sep-xs)}
.m + .m.close{margin-top:var(--sep-s)}
.m + .m.loose{margin-top:var(--sep-l)}

/* Their --maxw, and their `width:calc(100% - 60px)` gutter. */
.mods{max-width:1460px; width:calc(100% - 60px); margin:0 auto; padding:0 0 40px}

/* --- m-open: the page opener ------------------------------------------------------ */
.m-open .eyebrow{
  font:500 13px/1.5 var(--font-mono); letter-spacing:var(--track-label);
  text-transform:uppercase; color:var(--muted); margin:0 0 18px;
}
.m-open h1{
  font:400 clamp(38px,6.4vw,72px)/1.02 var(--font-display);
  letter-spacing:var(--track-display); text-wrap:balance; margin:0 0 22px; max-width:17ch;
  color:var(--ink);
}
/* Deliberately short of the body measure. The opener is read, not scanned. */
.m-open .lead{
  font:400 clamp(18px,2vw,22px)/1.5 var(--font-display); color:var(--muted);
  margin:0; max-width:var(--measure);
}
.m-open .lead b{color:var(--ink); font-weight:500}

/* --- m-say: the prose module ------------------------------------------------------
   Thesis one side, argument the other, alternating with .flip. The argument column is
   56ch rather than the site's usual 68, which is most of why this reads shorter than
   the same words set as a full-width run. */
.m-say{
  display:grid; grid-template-columns:minmax(0,4fr) minmax(0,7fr); gap:0 64px;
  align-items:start; max-width:1000px;
}
.m-say .thesis{
  font:400 clamp(24px,2.4vw,32px)/1.24 var(--font-display); color:var(--ink);
  margin:0; padding-left:18px; border-left:3px solid var(--ink-line); max-width:var(--measure-lead);
}
.m-say .argument{max-width:var(--measure)}
.m-say .argument > :first-child{margin-top:0}
.m-say .argument > :last-child{margin-bottom:0}
.m-say .argument p{margin:0 0 16px}
.m-say .argument p b{font-weight:700; color:var(--ink)}
.m-say .argument .not{color:var(--muted)}
/* Source order is thesis then argument on every module, in both directions. The widths
   flip with the sides, so the argument keeps the wide column; flipping the sides alone put
   it in the narrow one, at about thirty characters a line. */
.m-say.flip{grid-template-columns:minmax(0,7fr) minmax(0,4fr)}
.m-say.flip .thesis{grid-column:2; border-left:0; border-right:3px solid var(--ink-line);
  padding-left:0; padding-right:18px; text-align:right; justify-self:end}
.m-say.flip .argument{grid-column:1; grid-row:1}

/* --- m-grid: short cells ---------------------------------------------------------- */
.m-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:40px 44px}
.m-grid :is(h2,h3){
  font:500 13px/1.4 var(--font-mono); letter-spacing:var(--track-label);
  text-transform:uppercase; color:var(--muted); margin:0 0 10px;
}
.m-grid .cell p{margin:0 0 10px}
.m-grid .cell p:last-child{margin-bottom:0}
.m-grid .cell .top{font:400 26px/1.4 var(--font-display); color:var(--ink)}
.m-grid .cell .rest{color:var(--muted); font-size:23px}

/* --- m-loud: display statement ----------------------------------------------------
   Once per page. It is a module, not a pull quote inside one, because the reference's
   equivalent (big_text_module) is what breaks a run of prose into two shorter runs. */
.m-loud :is(h2,p){
  font:400 clamp(28px,4.2vw,52px)/1.1 var(--font-display); letter-spacing:var(--track-display);
  color:var(--ink); margin:0; max-width:20ch; text-wrap:balance;
}
.m-loud .after{
  font:400 23px/var(--leading-prose) var(--font-body); color:var(--muted); margin:22px 0 0;
  max-width:var(--measure); letter-spacing:normal;
}

/* --- m-index: numbered rows ------------------------------------------------------- */
.m-index .intro{margin:0 0 30px; color:var(--muted); font-size:23px; max-width:var(--measure)}
.m-index .grouplabel{
  font:500 13px/1.4 var(--font-mono); letter-spacing:var(--track-label);
  text-transform:uppercase; color:var(--ink-line); margin:52px 0 2px;
}
.m-index .grouplabel:first-child{margin-top:0}
.m-index .row{
  display:grid; grid-template-columns:52px 1fr; gap:0 18px;
  border-top:1px solid var(--rule); padding:20px 16px 22px;
  text-decoration:none; color:inherit;
  transition:background var(--t-micro) var(--ease-quick);
}
a.m-index .row:hover, .m-index a.row:hover{background:var(--raised)}
.m-index .row .n{
  font:500 13px/1 var(--font-mono); letter-spacing:var(--track-label); color:var(--muted); padding-top:9px;
}
.m-index a.row:hover .n{color:var(--ink-line)}
.m-index .row .nm{
  display:block; font:500 32px/1.28 var(--font-display); color:var(--ink); margin:0 0 8px;
}
.m-index .row p{margin:0; font-size:23px; color:var(--muted); max-width:var(--measure)}

/* --- m-band: the one accent -------------------------------------------------------
   Coral is the field and ink is the structure, and it means one thing on any page it
   appears on: a window is closing. */
.m-band{
  display:block; background:var(--closing); color:var(--ink); text-decoration:none;
  border:1px solid var(--ink-line); border-left-width:8px; border-radius:var(--radius);
  padding:18px 24px; max-width:1000px;
  transition:border-left-width var(--t-micro) var(--ease-quick), padding-left var(--t-micro) var(--ease-quick);
}
.m-band:hover{border-left-width:16px; padding-left:16px}
.m-band b{font:500 23px/1.4 var(--font-body)}
.m-band:hover b{text-decoration-line:underline; text-underline-offset:4px}

/* --- m-arc: the seven stages, as one object ---------------------------------------
   The spine is the whole ramp in seven hard bands, which is the arc compressed to 13px.
   Nothing else on the site may use more than one stop at a time, and nothing else is
   seven things in order. */
.m-arc{
  position:relative; display:block; overflow:hidden; max-width:1000px;
  border:1px solid var(--ink-line); border-radius:var(--radius);
  padding:22px 26px 22px 44px; text-decoration:none; color:inherit;
  transition:background var(--t-micro) var(--ease-quick);
}
.m-arc::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:13px;
  background:linear-gradient(180deg,
    var(--r1) 0 14.2857%, var(--r2) 0 28.5714%, var(--r3) 0 42.8571%,
    var(--r4) 0 57.1428%, var(--r5) 0 71.4285%, var(--r6) 0 85.7142%, var(--r7) 0 100%);
}
.m-arc:hover{background:var(--raised)}
.m-arc .k{
  font:500 13px/1.4 var(--font-mono); letter-spacing:var(--track-label);
  text-transform:uppercase; color:var(--muted);
}
.m-arc h2{
  font:400 clamp(23px,2.4vw,30px)/1.18 var(--font-display); letter-spacing:var(--track-display);
  margin:8px 0 9px; color:var(--ink);
}
.m-arc > p{margin:0 0 14px; color:var(--muted); font-size:23px; max-width:var(--measure)}
.m-arc ul{
  list-style:none; margin:0; padding:12px 0 0; border-top:1px solid var(--rule);
  display:flex; flex-wrap:wrap; gap:5px 16px;
  font:500 13px/1.5 var(--font-mono); color:var(--muted);
}
.m-arc ul b{color:var(--ink-line); font-weight:500}

/* --- m-defs: seven things of the same shape ---------------------------------------
   A run of items that each need a name and two facts. Set as m-say modules it would be
   seven of one kind in a row, which is the failure this file exists to fix; set as a
   four-column table it would be unreadable on the phone most of these readers are
   holding. A real definition list is the honest markup and it stacks for free.

   The name column is fixed rather than fluid so the seven names align down the page and
   the eye can run the list without reading it. */
.m-defs{margin:0}
.m-defs > div{
  display:grid; grid-template-columns:minmax(0,15ch) minmax(0,1fr); gap:0 44px;
  border-top:1px solid var(--rule); padding:22px 0 24px;
}
.m-defs dt{
  font:400 32px/1.24 var(--font-display); color:var(--ink); margin:0;
}
.m-defs dd{margin:0; max-width:var(--measure)}
.m-defs dd p{margin:0 0 10px}
.m-defs dd p:last-child{margin-bottom:0}
.m-defs dd b{font-weight:700; color:var(--ink)}
/* The second fact is the one a reader came for, so it is ink and the gloss is muted. */
.m-defs dd .what{color:var(--muted)}

/* --- m-note: quiet apparatus ------------------------------------------------------ */
.m-note{
  border-top:1px solid var(--rule); padding-top:18px;
  font-size:17px; color:var(--muted); max-width:var(--measure);
}

@media (max-width:900px){
  .m-say, .m-say.flip{grid-template-columns:1fr; gap:22px 0}
  .m-say.flip .thesis{grid-column:1; border-right:0; border-left:3px solid var(--ink-line);
    padding-right:0; padding-left:18px; text-align:left; justify-self:start}
  .m-say.flip .argument{grid-column:1; grid-row:auto}
  .m-arc ul{display:none}
}
@media (max-width:820px){
  .mods{padding:0 0 32px}
  .m-index .row{grid-template-columns:38px 1fr; gap:0 12px; padding:18px 8px 20px}
  .m-index .grouplabel{margin-top:38px}
  .m-defs > div{grid-template-columns:1fr; gap:10px 0; padding:18px 0 20px}
}
@media (prefers-reduced-motion:reduce){
  .m-band, .m-arc, .m-index .row{transition:none}
}

/* --- m-article: the reference's own page format -------------------------------------
   `.article` there: a 50/50 grid at an 80px gap, vertically centred, one side words and
   one side a drawing, and `.article.invert` swaps which is which. Every measurement here
   is theirs.

   The one thing we do not copy is their flip mechanism. Theirs is `direction:rtl` on the
   container, which reverses selection and caret movement along with the layout. Ours puts
   the text first in the source every time and swaps `grid-column` at desktop only, so a
   screen reader announces the same order in both directions. */
.m-article{display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center}
.m-article .text{min-width:0}
.m-article .lead{max-width:var(--measure-lead); line-height:1.3; margin:0 0 70px}
.m-article .description{max-width:var(--measure); line-height:1.4; margin:0 0 40px}
.m-article .description:last-child{margin-bottom:0}
.m-article > .text{grid-column:1}
.m-article > .fig{grid-column:2}
.m-article.invert > .text{grid-column:2}
.m-article.invert > .fig{grid-column:1}

.m-article h2{
  font:500 clamp(45px,4.6vw,75px)/.95 var(--font-display);
  margin:0 0 50px; text-wrap:balance;
}


/* The drawing goes under the words and stops being a square well, because a square of
   white space is not a layout on a phone. 900 is ours, not theirs: their .article collapses
   at 768 (ref/style.css:4110, :4133) and their nearest breakpoint to 900 is 920. This sheet
   used to claim 900 was theirs, which came from misreading their @media(max-height:900px). */
@media (max-width:900px){
  .m-article{grid-template-columns:1fr; gap:40px}
  .m-article > .text,
  .m-article > .fig,
  .m-article.invert > .text,
  .m-article.invert > .fig{grid-column:1}
  .m-article .lead{margin-bottom:40px}
}