/** Shopify CDN: Minification failed

Line 64:0 Unexpected "@media"

**/
/* ===========================================================
   ProGym Saint-Eustache — base tokens & reset
   1970s iron/print/texture. Cream base, oxblood + charcoal
   ink, mustard accent. All values driven by CSS custom props
   so the theme editor can retune the whole look.
   =========================================================== */

:root{
  /* ---- Ink (overridable via settings_schema) ---- */
  --paper:        #F0E3C8;
  --paper-aged:   #E4D3AE;
  --oxblood:      #6B2118;
  --oxblood-ink:  #57160F;
  --charcoal:     #241E1A;
  --mustard:      #D99A2B;
  --mustard-deep: #B87C1C;

  /* Derived */
  --line:        rgba(36,30,26,.20);
  --line-strong: rgba(36,30,26,.42);
  --frame:       var(--charcoal);
  --overlay-warm: rgba(87,22,15,.34);   /* hero multiply */

  /* ---- Type ---- */
  --font-display: "Anton", "Oswald", Impact, sans-serif;
  --font-cover:   "Alfa Slab One", "Anton", Georgia, serif;
  --font-body:    "Zilla Slab", Georgia, "Times New Roman", serif;
  --font-cond:    "Oswald", "Arial Narrow", sans-serif;

  --fs-hero:  clamp(3.2rem, 10vw, 7.5rem);
  --fs-h1:    clamp(2.4rem, 6vw, 4.5rem);
  --fs-h2:    clamp(1.8rem, 4vw, 3rem);
  --fs-h3:    clamp(1.3rem, 2.6vw, 1.9rem);
  --fs-kicker:clamp(.72rem, 1.4vw, .9rem);
  --fs-body:  1.075rem;
  --fs-small: .86rem;
  --lh-body:  1.72;
  --measure:  68ch;

  /* ---- Space / shape ---- */
  --space-1:.5rem;  --space-2:1rem;  --space-3:1.5rem;
  --space-4:2.5rem; --space-5:4rem;  --space-6:6rem;
  --wrap: 1200px;
  --wrap-narrow: 820px;
  --radius: 0px;              /* print = hard corners */
  --frame-w: 6px;            /* matted card border */
  --rule-w: 3px;             /* mustard ink rule */

  /* ---- Motion ---- */
  --dur: 360ms;
  --dur-fast: 250ms;
  --ease-stamp: cubic-bezier(.2,.7,.2,1);
  --grain-opacity: .06;
  --grain-flicker: 1;        /* toggled to 0 by reduce-motion */
}

/* Merchant "reduce motion" master toggle sets data-reduce-motion="true" */
:root[data-reduce-motion="true"],
@media (prefers-reduced-motion: reduce){ :root{ --grain-flicker:0; } }

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--paper);
  color:var(--charcoal);
  font-family:var(--font-body);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  font-feature-settings:"liga" 1,"kern" 1;
  -webkit-font-smoothing:antialiased;
  position:relative;
  min-height:100vh;
}

img,video{ max-width:100%; height:auto; display:block; }
a{ color:var(--oxblood); text-decoration:none; }
a:hover{ color:var(--oxblood-ink); }

h1,h2,h3,h4{ margin:0 0 var(--space-2); line-height:1.02; font-weight:400; }

/* ---- Typographic helpers ---- */
.kicker{
  font-family:var(--font-cond);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.28em;
  font-size:var(--fs-kicker);
  color:var(--oxblood);
}
.display{ font-family:var(--font-display); text-transform:uppercase; letter-spacing:.01em; }
.cover-type{ font-family:var(--font-cover); }
.eyebrow-num{ font-family:var(--font-cond); font-weight:600; color:var(--mustard-deep); }

/* ---- Mustard ink rule ---- */
.rule{ border:0; height:var(--rule-w); background:var(--mustard); margin:var(--space-2) 0; }
.rule--thin{ height:1px; background:var(--line-strong); }

/* ---- Layout ---- */
.wrap{ width:min(100% - 2rem, var(--wrap)); margin-inline:auto; }
.wrap--narrow{ width:min(100% - 2rem, var(--wrap-narrow)); margin-inline:auto; }
.section{ padding-block:var(--space-5); }
.section--tight{ padding-block:var(--space-4); }

/* ---- Accessibility ---- */
.visually-hidden{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.skip-link{
  position:absolute;left:.5rem;top:-3rem;z-index:1000;
  background:var(--charcoal);color:var(--paper);
  padding:.6rem 1rem;font-family:var(--font-cond);letter-spacing:.15em;text-transform:uppercase;
  transition:top var(--dur-fast) var(--ease-stamp);
}
.skip-link:focus{ top:.5rem; color:var(--paper); }

:where(a,button,input,textarea,select,summary):focus-visible{
  outline:3px solid var(--oxblood);
  outline-offset:2px;
}

/* ---- Buttons (stamp) ---- */
.btn{
  --btn-bg:var(--oxblood); --btn-fg:var(--paper);
  display:inline-flex;align-items:center;gap:.6ch;
  font-family:var(--font-cond);font-weight:600;text-transform:uppercase;letter-spacing:.16em;
  font-size:.82rem;line-height:1;
  padding:.95rem 1.6rem;
  background:var(--btn-bg);color:var(--btn-fg);
  border:2px solid var(--charcoal);
  cursor:pointer;
  box-shadow:4px 4px 0 var(--charcoal);
  transition:transform var(--dur-fast) var(--ease-stamp),
             box-shadow var(--dur-fast) var(--ease-stamp),
             background var(--dur-fast) var(--ease-stamp);
}
.btn:hover{ color:var(--btn-fg); transform:translate(2px,2px); box-shadow:2px 2px 0 var(--charcoal); }
.btn:active{ transform:translate(4px,4px); box-shadow:0 0 0 var(--charcoal); }
.btn--ghost{ --btn-bg:transparent; --btn-fg:var(--charcoal); }
.btn--mustard{ --btn-bg:var(--mustard); --btn-fg:var(--charcoal); }
@media (prefers-reduced-motion: reduce){ .btn{ transition:none; } }

/* ---- Stamped label / category pill ---- */
.stamp-label{
  display:inline-block;
  font-family:var(--font-cond);font-weight:600;text-transform:uppercase;letter-spacing:.18em;
  font-size:.68rem;
  padding:.35rem .7rem;
  color:var(--oxblood);
  border:1.5px solid var(--oxblood);
  background:transparent;
  transform:rotate(-1.2deg);
}

/* ---- Framed / matted print card ---- */
.framed{
  background:var(--paper);
  border:var(--frame-w) solid var(--charcoal);
  outline:1px solid var(--mustard);
  outline-offset:-10px;
  padding:0;
}

/* ---- Prose (68ch article body) ---- */
.prose{ max-width:var(--measure); margin-inline:auto; }
.prose > *{ margin-block:0 var(--space-2); }
.prose p{ font-size:var(--fs-body); line-height:var(--lh-body); }
.prose h2{ font-family:var(--font-cover); font-size:var(--fs-h2); margin-top:var(--space-4); }
.prose h3{ font-family:var(--font-display); text-transform:uppercase; font-size:var(--fs-h3); margin-top:var(--space-3); letter-spacing:.02em; }
.prose a{ text-decoration:underline; text-decoration-color:var(--mustard); text-underline-offset:3px; text-decoration-thickness:2px; }
.prose img{ border:var(--frame-w) solid var(--charcoal); margin-block:var(--space-3); }
.prose ul,.prose ol{ padding-left:1.4em; }
.prose li{ margin-block:.4em; }
.prose blockquote{
  margin:var(--space-4) 0;padding:var(--space-3) 0;
  border-top:var(--rule-w) solid var(--mustard);
  border-bottom:var(--rule-w) solid var(--mustard);
  font-family:var(--font-cover);font-size:clamp(1.3rem,3vw,2rem);line-height:1.2;
  text-align:center;color:var(--oxblood);
}
/* Drop cap on first paragraph */
.prose--dropcap > p:first-of-type::first-letter{
  font-family:var(--font-cover);
  float:left;line-height:.72;
  font-size:5.2em;padding:.05em .12em 0 0;
  color:var(--oxblood);
}

/* ---- Grain overlay ---- */
.grain{
  position:fixed;inset:0;z-index:60;pointer-events:none;
  background-image:url("grain.svg");
  background-size:180px 180px;
  opacity:var(--grain-opacity);
  mix-blend-mode:multiply;
}
.grain[hidden]{ display:none; }

/* ---- Duotone / sepia media that resolves to colour on hover ---- */
.duotone{ filter:sepia(.55) saturate(.75) contrast(1.02); transition:filter var(--dur) var(--ease-stamp); }
.duotone-parent:hover .duotone,
.duotone:hover{ filter:sepia(0) saturate(1) contrast(1); }
@media (prefers-reduced-motion: reduce){ .duotone{ transition:none; } }

/* ---- Perforated ticket edge ---- */
.perf{ position:relative; }
.perf::before,.perf::after{
  content:"";position:absolute;left:0;right:0;height:14px;
  background:radial-gradient(circle at 8px 50%, var(--paper) 6px, transparent 7px) repeat-x;
  background-size:20px 14px;
}
.perf::before{ top:-7px; } .perf::after{ bottom:-7px; }

/* ---- Reading progress (thin ink rule) ---- */
.progress-rule{
  position:fixed;top:0;left:0;height:4px;width:0;z-index:80;
  background:var(--oxblood);
  transition:width 90ms linear;
}
@media (prefers-reduced-motion: reduce){ .progress-rule{ transition:none; } }

/* ---- Grid ---- */
.print-grid{
  display:grid;gap:var(--space-3);
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
}

/* ===========================================================
   Motion states (driven by motion.js data-attributes)
   =========================================================== */

/* Paper slide-in reveal */
[data-reveal]{
  opacity:0; transform:translateY(22px);
  transition:opacity var(--dur) var(--ease-stamp),
             transform var(--dur) var(--ease-stamp);
  will-change:opacity,transform;
}
[data-reveal="stamp"]{ transform:scale(1.06) rotate(.5deg); }
[data-reveal="badge"]{ transform:scale(.7) rotate(-6deg); }
[data-reveal][data-revealed="true"]{ opacity:1; transform:none; }

/* Ken Burns hero (slow warm drift) */
@keyframes pg-kenburns{
  from{ transform:scale(1.06) translate3d(0,0,0); }
  to  { transform:scale(1.14) translate3d(-1.5%,-1.5%,0); }
}
.pg-kenburns{ animation:pg-kenburns 22s ease-in-out alternate infinite; }

/* Underline-grow ink rule */
.ink-underline{ position:relative; }
.ink-underline::after{
  content:"";position:absolute;left:0;bottom:-3px;height:2px;width:0;background:var(--mustard);
  transition:width var(--dur) var(--ease-stamp);
}
.ink-underline:hover::after{ width:100%; }

@media (prefers-reduced-motion: reduce){
  [data-reveal]{ opacity:1!important; transform:none!important; transition:none!important; }
  .pg-kenburns{ animation:none!important; }
  .ink-underline::after{ transition:none; }
}
:root[data-reduce-motion="true"] [data-reveal]{ opacity:1!important; transform:none!important; transition:none!important; }
:root[data-reduce-motion="true"] .pg-kenburns{ animation:none!important; }
