@font-face{font-family:"Inter Tight";src:url(/fonts/inter-tight-400-latin.woff2) format("woff2");font-weight:400;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter Tight";src:url(/fonts/inter-tight-400-latin-ext.woff2) format("woff2");font-weight:400;font-display:swap;unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Inter Tight";src:url(/fonts/inter-tight-500-latin.woff2) format("woff2");font-weight:500;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122,U+2212}
@font-face{font-family:"Inter Tight";src:url(/fonts/inter-tight-600-latin.woff2) format("woff2");font-weight:600;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122,U+2212}
@font-face{font-family:"Inter Tight";src:url(/fonts/inter-tight-600-latin-ext.woff2) format("woff2");font-weight:600;font-display:swap;unicode-range:U+0100-024F,U+1E00-1EFF,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Inter Tight";src:url(/fonts/inter-tight-700-latin.woff2) format("woff2");font-weight:700;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122,U+2212}
@font-face{font-family:"Inter Tight";src:url(/fonts/inter-tight-700-latin-ext.woff2) format("woff2");font-weight:700;font-display:swap;unicode-range:U+0100-024F,U+1E00-1EFF,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Inter Tight";src:url(/fonts/inter-tight-800-latin.woff2) format("woff2");font-weight:800;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122,U+2212}
@font-face{font-family:"JetBrains Mono";src:url(/fonts/jetbrains-mono-400-latin.woff2) format("woff2");font-weight:400;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122,U+2212}
@font-face{font-family:"JetBrains Mono";src:url(/fonts/jetbrains-mono-500-latin.woff2) format("woff2");font-weight:500;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122,U+2212}

/* ── The file room ────────────────────────────────────────────
   Palette extends tevro-web-app/DESIGN.md. Parchment and ink are
   inherited verbatim; the four divider colours are the range the
   pinned world already implies but the app never needed. */
:root{
  --parchment:#fbf8f1;
  --bg:#f5f1e8;
  --surface:#fbf8f1;   /* DESIGN.md: cards are parchment, not sterile white */
  --ink:#1a1612;
  --ink-2:#3d362e;
  --ink-muted:#6b6053;
  --border:#e6dfd1;
  --border-strong:#d4cdc0;
  --rule:#ede6d6;

  --manila:#c99a3f;
  --manila-deep:#7d5a17;
  --carbon:#2f4f7a;
  --stamp:#b03a2e;
  --ledger:#2f6b45;

  --green:#86efac;
  --green-deep:#6ee094;
  --green-ink:#0c4022;
  --green-soft:#dff5e3;

  /* DESIGN.md: "flat by default ... shadows reserved for floating overlays".
     Sheets lie ON the desk, so they get a contact shadow, not elevation. */
  --lift-1:0 1px 1px rgba(26,22,18,.04);
  --lift-2:0 1px 2px rgba(26,22,18,.05);

  --gap:clamp(1rem,3vw,2rem);
  --page:min(1120px,100% - clamp(1.5rem,6vw,5rem));
  --ease:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
/* clip, not hidden: hidden on the body creates a scroll container and breaks
   position:sticky further down the page. */
body{overflow-x:clip}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:"Inter Tight",system-ui,sans-serif;
  font-size:clamp(1rem,.96rem + .2vw,1.0625rem);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  /* Faint laid-paper tooth. Two hairline gradients, no image request. */
  background-image:
    repeating-linear-gradient(90deg,rgba(26,22,18,.014) 0 1px,transparent 1px 3px),
    repeating-linear-gradient(0deg,rgba(26,22,18,.010) 0 1px,transparent 1px 4px);
}
h1,h2,h3,h4{margin:0;letter-spacing:-.025em;line-height:1.12;text-wrap:balance}
p{margin:0}
a{color:inherit}
img,svg{max-width:100%}
::selection{background:var(--green);color:var(--green-ink)}

.skip{position:absolute;left:-9999px;top:0;z-index:99;background:var(--ink);color:var(--parchment);padding:.7rem 1.1rem;border-radius:0 0 .4rem 0}
.skip:focus{left:0}
:focus-visible{outline:2.5px solid var(--carbon);outline-offset:3px;border-radius:2px}

/* ── Masthead ─────────────────────────────────────────────── */
.masthead{
  width:var(--page);margin-inline:auto;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding-block:clamp(1.1rem,2.5vw,1.6rem);
}
.mark{display:inline-flex;align-items:center;gap:.55rem;text-decoration:none}
.mark__glyph{width:30px;height:30px;flex:none}
.mark__folder{fill:var(--ink)}
.mark__tab{fill:var(--green-deep)}
.mark__t{stroke:var(--parchment);stroke-width:2.1;stroke-linecap:round;fill:none}
.mark__word{font-weight:700;font-size:1.24rem;letter-spacing:-.035em}
.masthead__right{display:flex;align-items:center;gap:clamp(.7rem,2vw,1.25rem)}
.masthead__link{font-weight:500;text-decoration:none;border-bottom:1.5px solid var(--border-strong);padding-bottom:1px;transition:border-color .18s}
.masthead__link:hover{border-color:var(--ink)}

/* Language stamp — rotated, oxidised ink, like a rubber mark on a file. */
.stamp{
  font-family:"JetBrains Mono",ui-monospace,monospace;font-size:.7rem;font-weight:500;
  letter-spacing:.06em;
  display:inline-flex;gap:.18rem;align-items:center;
  padding:.34rem .55rem;
  color:var(--stamp);
  background:transparent;
  border:1.5px solid color-mix(in oklab,var(--stamp) 45%,transparent);
  border-radius:3px;
  rotate:-2.4deg;
  cursor:pointer;
  transition:rotate .22s var(--ease),background-color .22s;
}
.stamp:hover{rotate:0deg;background:color-mix(in oklab,var(--stamp) 8%,transparent)}
.stamp__off{opacity:.4}
.stamp__sep{opacity:.35}
html[data-lang="it"] .stamp__on{opacity:.4}
html[data-lang="it"] .stamp__off{opacity:1}

/* ── Cover ────────────────────────────────────────────────── */
.cover{
  width:var(--page);margin-inline:auto;
  position:relative;overflow:visible;
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(1.5rem,4vw,3.5rem);
  align-items:start;
  padding-block:clamp(2.5rem,9vw,6.5rem) clamp(3rem,8vw,5.5rem);
}
.cover__title{
  font-size:clamp(2.6rem,1.4rem + 5.6vw,5.6rem);
  font-weight:800;letter-spacing:-.04em;line-height:1.02;
  max-width:15ch;
}
.cover__lede{
  margin-top:clamp(1.1rem,2.4vw,1.6rem);
  font-size:clamp(1.06rem,1rem + .45vw,1.32rem);
  color:var(--ink-2);max-width:52ch;line-height:1.55;
}
.cover__actions{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:clamp(1.6rem,3.4vw,2.4rem)}
.cover__meta{margin-top:1.15rem;font-size:.875rem;color:var(--ink-muted)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:.78rem 1.4rem;border-radius:.5rem;
  font-weight:600;font-size:1rem;letter-spacing:-.01em;text-decoration:none;
  border:1.5px solid transparent;
  transition:transform .18s var(--ease),box-shadow .18s var(--ease),background-color .18s,border-color .18s;
}
.btn--primary{background:var(--ink);color:var(--parchment);box-shadow:var(--lift-1)}
.btn--primary:hover{transform:translateY(-2px);box-shadow:var(--lift-2)}
.btn--ghost{border-color:var(--border-strong);color:var(--ink)}
.btn--ghost:hover{border-color:var(--ink);transform:translateY(-2px)}

/* Divider tabs — the drawer's spine, standing at the right edge. */
/* Divider tabs. The colour fills the tab because on a real divider the colour
   IS the tab — carried as a stripe down the edge of a white card it stops being
   a file and becomes the accent-border tell. Four filled tabs also give the
   page its one committed field of colour against the parchment. */
/* The strip runs off the right edge so the folder reads as continuing past the
   frame. Held inside the gutter it floated as four detached buttons. */
.tabs{
  display:flex;flex-direction:column;gap:.4rem;padding-top:.6rem;
  /* No negative margin. Two attempts at bleeding to the viewport edge both
     overflowed the document (100vw counts the scrollbar; 100% inside a
     page-width container is zero). The squared, border-less right edge on
     .tab already reads as running off the page, without the risk. */
}
.tab{
  --tab:var(--manila-deep);
  position:relative;
  display:block;
  padding:.68rem 1.1rem;
  min-width:clamp(8.5rem,13vw,11.5rem);
  background:var(--tab);
  border:1px solid color-mix(in oklab,var(--tab) 78%,black);
  border-radius:.3rem 0 0 .3rem;border-right:0;
  padding-right:1.6rem;
  font-weight:600;font-size:.925rem;letter-spacing:-.012em;
  text-decoration:none;color:var(--parchment);
  box-shadow:var(--lift-1);
  transition:transform .24s var(--ease),box-shadow .24s var(--ease),filter .18s;
}
.tab:hover,.tab:focus-visible{transform:translateX(-10px);box-shadow:var(--lift-2);filter:brightness(1.08)}
.tab--manila{--tab:var(--manila-deep)}
.tab--blue{--tab:var(--carbon)}
.tab--red{--tab:var(--stamp)}
.tab--green{--tab:var(--ledger)}


/* Body size, not a mono footnote. It has to be read before the named person
   with the Active pill is believed. */
.synthetic{
  width:var(--page);margin-inline:auto;
  font-size:1rem;line-height:1.55;color:var(--ink-2);
  padding:clamp(2rem,4vw,2.8rem) 0 0;
}
/* Left-aligned to the page edge like everything else. Raising it to body size
   had also centred it, leaving it floating in an empty band. The measure is
   held by the inner span, not by centring the block. */
.synthetic{max-width:var(--page);text-align:left}
.synthetic span{display:inline-block;max-width:62ch}

/* ── Sheets ───────────────────────────────────────────────── */
.sheet{
  width:var(--page);margin-inline:auto;
  padding-block:clamp(3.2rem,8vw,6rem);
  display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(1.8rem,4vw,3rem);
}
@media (min-width:900px){
  .sheet{grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);align-items:start;gap:clamp(2.5rem,5vw,4.5rem)}
  /* Four different shapes, so the eye reads pages in a folder rather than a
     column of equal cards. */
  .sheet--wide{grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr)}
  .sheet--flip{grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr)}
  .sheet--flip .sheet__head{order:2}
  .sheet--flip .card{order:1}
  .sheet--narrow{grid-template-columns:minmax(0,1fr) minmax(0,.62fr)}
  .sheet--full{grid-template-columns:minmax(0,1fr)}
  .sheet--full .sheet__head--lead{max-width:62ch}
  .sheet--full .sheet__head--lead h2{max-width:24ch}
}
.sheet__head h2{font-size:clamp(1.7rem,1.15rem + 2.3vw,2.85rem);font-weight:700;max-width:19ch}
.sheet__head p{margin-top:1rem;color:var(--ink-2);max-width:56ch;line-height:1.62}

/* Each sheet wears its own divider tab, so the strip on the cover and the page
   it names read as the same object rather than as a nav and four cards. */
.card{
  position:relative;
  margin-top:1.85rem;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:0 .55rem .55rem .55rem;
  box-shadow:var(--lift-1);
}

.card__tab{
  position:absolute;left:-1px;bottom:100%;
  padding:.34rem .95rem;
  background:var(--sheet-tab,var(--manila-deep));
  color:var(--parchment);
  font-size:.775rem;font-weight:600;letter-spacing:-.005em;
  border-radius:.4rem .4rem 0 0;
}
[data-tab=manila]{--sheet-tab:var(--manila-deep)}
[data-tab=blue]{--sheet-tab:var(--carbon)}
[data-tab=red]{--sheet-tab:var(--stamp)}
[data-tab=green]{--sheet-tab:var(--ledger)}

/* The world already owns rubber stamps and was using exactly one. */
.mark-stamp{
  /* Straddles the top edge on the right, clear of the Active pill it was
     landing on top of, and where a stamp goes on a real page. */
  position:absolute;top:-.85rem;right:1.3rem;
  background:var(--bg);
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:.7rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:var(--stamp);
  border:2px solid color-mix(in oklab,var(--stamp) 55%,transparent);
  border-radius:3px;padding:.2rem .5rem;
  rotate:-7deg;opacity:.75;pointer-events:none;
}

/* Record — ruled index-card stock. */
.card--record{padding:clamp(1.2rem,3vw,1.8rem)}
.record__top{display:flex;align-items:center;gap:.9rem;padding-bottom:1.1rem;border-bottom:1px solid var(--rule)}
.record__avatar{
  width:44px;height:44px;flex:none;border-radius:50%;
  display:grid;place-items:center;
  background:var(--green-soft);color:var(--green-ink);
  font-weight:700;font-size:.9rem;letter-spacing:.01em;
}
.record__name{font-size:1.2rem;font-weight:700}
.record__since{font-size:.83rem;color:var(--ink-muted);font-family:"JetBrains Mono",ui-monospace,monospace}
.pill{
  margin-left:auto;flex:none;
  font-size:.72rem;font-weight:600;letter-spacing:.02em;
  padding:.28rem .6rem;border-radius:100px;
}
.pill--live{background:var(--green-soft);color:var(--green-ink)}
.pill--draft{background:color-mix(in oklab,var(--carbon) 10%,white);color:var(--carbon)}
/* Fixed two-up, not auto-fit: four fields across this card width wrapped 3+1
   and left a dead cell sitting next to Adherence. */
.record__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;margin:0;background:var(--rule)}
.record__grid>div{background:var(--surface);padding:1rem .2rem 1rem 0}
.record__grid dt{font-size:.74rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-muted)}
.record__grid dd{margin:.3rem 0 0;font-weight:600;font-size:1.02rem}
.record__foot{display:flex;flex-wrap:wrap;gap:.45rem;padding-top:1.1rem;border-top:1px solid var(--rule)}
.chip{
  font-family:"JetBrains Mono",ui-monospace,monospace;font-size:.75rem;
  padding:.3rem .6rem;border:1px solid var(--border);border-radius:.3rem;color:var(--ink-2);
}

/* Program — the working document. */
.card--program{padding:clamp(1.2rem,3vw,1.8rem)}
.program__top{display:flex;flex-wrap:wrap;align-items:center;gap:.7rem;padding-bottom:1rem;border-bottom:1px solid var(--rule)}
.program__top h3{font-size:1.16rem;font-weight:700}
.program__routine h4{margin-top:1.2rem;display:flex;align-items:center;gap:.6rem;font-size:.95rem;font-weight:600;color:var(--ink-2)}
.program__day{
  font-family:"JetBrains Mono",ui-monospace,monospace;font-size:.72rem;font-weight:500;
  background:var(--carbon);color:#fff;padding:.22rem .45rem;border-radius:.25rem;letter-spacing:.02em;
}
.exercises{width:100%;border-collapse:collapse;margin-top:.9rem;font-size:.94rem}
.exercises th{
  text-align:left;font-size:.72rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink-muted);padding:.4rem .5rem .4rem 0;border-bottom:1px solid var(--border-strong);
}
.exercises th:not(:first-child),.exercises td:not(:first-child){text-align:right;font-family:"JetBrains Mono",ui-monospace,monospace;font-size:.87rem}
.exercises td{padding:.62rem .5rem .62rem 0;border-bottom:1px solid var(--rule)}
.exercises tbody tr:last-child td{border-bottom:0}
/* A coach's marginal note, set in the margin. It was a tinted callout with a
   3px red bar down its left edge — the same side-stripe the tabs were rebuilt
   to escape, hidden from the detector inside a span. */
.program__body{display:grid;gap:1.4rem}
@media (min-width:1000px){
  .program__body{grid-template-columns:minmax(0,1fr) minmax(0,15rem);gap:2rem;align-items:start}
}
.margin-note{
  padding-left:1.1rem;
  border-left:1px solid var(--border-strong);
  color:var(--ink-2);font-size:.9rem;line-height:1.55;
}
.margin-note p{position:relative}
.margin-note p::before{
  content:"";position:absolute;left:-1.1rem;top:.55em;
  width:5px;height:5px;border-radius:50%;background:var(--stamp);
}

/* Chart — hand-plotted on graph paper. */
.card--chart{padding:clamp(1.2rem,3vw,1.8rem)}
.chart__top{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-bottom:1.1rem}
.chart__top h3{font-size:1.08rem;font-weight:700}
.chart__delta{font-family:"JetBrains Mono",ui-monospace,monospace;font-weight:500;color:var(--ledger);font-size:1rem}
/* The ruling lives INSIDE the SVG as a pattern, so it scales with the viewBox
   and the plotted points sit on intersections at every width. A fixed-px CSS
   background could not register with a plot that scales to the card: 44 user
   units rendered ~37 CSS px against a 44 CSS px ruling. */
.chart__paper{
  border:1px solid var(--border);border-radius:.35rem;
  overflow:hidden;
}
.chart{width:100%;height:auto;display:block;color:var(--rule)}
.chart__grid{color:var(--rule)}
.chart__line{
  fill:none;stroke:var(--ledger);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round;
  stroke-dasharray:1400;stroke-dashoffset:1400;
}
.is-in .chart__line{transition:stroke-dashoffset 1.5s var(--ease) .15s;stroke-dashoffset:0}
.chart__dots circle{fill:var(--surface);stroke:var(--ledger);stroke-width:2.5}
.chart__axis{
  list-style:none;display:flex;justify-content:space-between;margin:.6rem 0 0;padding:0;
  font-family:"JetBrains Mono",ui-monospace,monospace;font-size:.74rem;color:var(--ink-muted);
}

/* Docket — the receipt. */
.card--docket{padding:clamp(1.2rem,3vw,1.8rem)}
.docket__top{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;padding-bottom:1rem;border-bottom:1px dashed var(--border-strong)}
.docket__top h3{font-size:1.12rem;font-weight:700}
.docket__ref{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:.8rem;color:var(--ink-muted)}
.docket__rows{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin:0;background:var(--rule)}
.docket__rows>div{background:var(--surface);padding:1.1rem .2rem}
.docket__rows dt{font-size:.72rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-muted)}
.docket__rows dd{margin:.3rem 0 0;font-family:"JetBrains Mono",ui-monospace,monospace;font-size:1.5rem;font-weight:500}
.docket__bar{height:8px;border-radius:100px;background:var(--rule);margin-top:1.2rem;overflow:hidden}
.docket__bar i{
  display:block;height:100%;width:100%;border-radius:100px;background:var(--ledger);
  transform:scaleX(0);transform-origin:left center;
}
/* scaleX, not width: animating width relayouts the bar every frame. */
.is-in .docket__bar i{transition:transform 1.1s var(--ease) .2s;transform:scaleX(var(--pct))}

/* ── Colophon — the archival block ────────────────────────── */
.colophon{
  width:var(--page);margin:0 auto;
  padding-block:clamp(3.2rem,8vw,5.5rem);
  border-bottom:1px solid var(--border);
}
.colophon h2{font-size:clamp(1.6rem,1.1rem + 2vw,2.4rem);font-weight:700;max-width:20ch}
.colophon__lede{margin-top:.9rem;color:var(--ink-2);max-width:60ch}
.colophon__grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
  gap:1px;margin:clamp(1.8rem,4vw,2.6rem) 0 0;background:var(--border);
  border:1px solid var(--border);border-radius:.5rem;overflow:hidden;
}
.colophon__grid>div{background:var(--parchment);padding:1.2rem 1.3rem}
.colophon__grid dt{
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-muted);
}
.colophon__grid dd{
  margin:.45rem 0 0;font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:.875rem;line-height:1.55;color:var(--ink);
}

/* ── Close ────────────────────────────────────────────────── */
.close{
  width:var(--page);margin:0 auto;
  padding-block:clamp(3.5rem,9vw,6.5rem);
  text-align:center;
}
.close h2{font-size:clamp(2rem,1.3rem + 3.2vw,3.6rem);font-weight:800;letter-spacing:-.04em}
.close p{margin:1rem auto 0;max-width:50ch;color:var(--ink-2)}
.close__actions{display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center;margin-top:2rem}

/* ── Foot ─────────────────────────────────────────────────── */
.foot{
  width:var(--page);margin:0 auto;
  display:flex;flex-wrap:wrap;align-items:center;gap:.8rem clamp(1rem,4vw,2.5rem);
  padding-block:2rem 2.6rem;border-top:1px solid var(--border);
}
.foot__mark{font-weight:700;letter-spacing:-.035em;font-size:1.05rem}
.foot__nav{display:flex;flex-wrap:wrap;gap:clamp(.8rem,2.5vw,1.6rem)}
.foot__nav a{font-size:.9rem;color:var(--ink-2);text-decoration:none;border-bottom:1px solid transparent;transition:border-color .18s}
.foot__nav a:hover{border-color:var(--ink-2)}
.foot__legal{margin-left:auto;font-size:.82rem;color:var(--ink-muted)}

/* ── The one authored moment ──────────────────────────────────
   Sheets settle into the folder as they arrive: a short rise with
   the lift blooming underneath.
   Content is visible by default and the offset is opted into by the `js-reveal`
   class, which scripting adds. Hiding first and revealing with JS costs a
   no-script visitor the entire page, and it hid this one from its own
   screenshots. */
@media (prefers-reduced-motion:no-preference){
  .js-reveal .sheet,.js-reveal .colophon,.js-reveal .close{
    opacity:0;transform:translateY(18px);
    transition:opacity .7s var(--ease),transform .7s var(--ease);
  }
  .js-reveal .sheet.is-in,.js-reveal .colophon.is-in,.js-reveal .close.is-in{opacity:1;transform:none}
}

@media (max-width:760px){
  /* Touch targets. Text links measured 24-29px tall, under the 44px minimum;
     the padding grows the hit area without moving the type. */
  .masthead__link{display:inline-flex;align-items:center;min-height:44px}
  .foot__nav a{display:inline-flex;align-items:center;min-height:44px}
  .foot__nav{gap:.2rem 1.4rem}
  .stamp{min-height:40px;padding-inline:.7rem}

  .cover{grid-template-columns:minmax(0,1fr)}
  .tabs{flex-direction:row;flex-wrap:wrap;gap:.4rem;padding-top:0}
  .tabs{margin-right:0}
  .tab{min-width:0;flex:1 1 auto;padding:.6rem .7rem;font-size:.85rem;text-align:center;min-height:40px;
       display:flex;align-items:center;justify-content:center;
       border-radius:.3rem;border-right:1px solid color-mix(in oklab,var(--tab) 78%,black)}
  .tab:hover,.tab:focus-visible{transform:translateY(-3px)}
  .docket__rows{grid-template-columns:1fr}

  /* Italian column headings are longer than the English ones — RIPETIZIONI
     against REPS — and pushed the exercise table past a 320px viewport. The
     table sets its own type down rather than scrolling, so the whole routine
     stays readable at once, which is the point of showing it. */
  .exercises{font-size:.88rem}
  .exercises th{font-size:.63rem;letter-spacing:.025em;padding-right:.3rem}
  .exercises td{padding-right:.3rem}
  .exercises th:not(:first-child),.exercises td:not(:first-child){font-size:.78rem}
  .foot__legal{margin-left:0;flex-basis:100%}
}