/* haydamax.org — public and charitable projects
   Inherits the Haydamax public system (warm paper, Geologica display, hairline cards);
   the accent is claret instead of the corporate blue used on haydamax.com. */

@font-face{font-family:Geologica;font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/geologica/geologica-cyrillic-ext.woff2) format("woff2");unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}
@font-face{font-family:Geologica;font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/geologica/geologica-cyrillic.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Geologica;font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/geologica/geologica-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Geologica;font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/geologica/geologica-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Source Sans 3";font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/source-sans-3/source-sans-3-cyrillic-ext.woff2) format("woff2");unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}
@font-face{font-family:"Source Sans 3";font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/source-sans-3/source-sans-3-cyrillic.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Source Sans 3";font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/source-sans-3/source-sans-3-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Source Sans 3";font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/source-sans-3/source-sans-3-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --page:#F6F3ED;
  --surface:#FFFFFF;
  --line:#D8D5CF;
  --line-strong:#B9B4AB;
  --ink:#17181A;
  --muted:#686C73;
  --accent:#8C2231;
  --accent-deep:#65141F;
  --accent-ink:#5E121C;
  --font-display:Geologica,Arial,sans-serif;
  --font-body:"Source Sans 3",Arial,sans-serif;
  --e-display:cubic-bezier(.16,1,.3,1);
  --e-body:cubic-bezier(.25,.46,.45,.94);
  --e-ui:cubic-bezier(.4,0,.2,1);
  --gutter:50px;
  --measure:1260px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--page);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.6;
  font-weight:400;
  overflow-x:hidden;
}
/* height:auto or the width/height attributes win and the mark stretches */
img,svg{max-width:100%;height:auto}
a{color:inherit}
button{font:inherit}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;margin:0}
h1,h2{letter-spacing:-.035em}
h3,h4{letter-spacing:-.018em}
p{margin:0}
.tnum{font-variant-numeric:tabular-nums}

/* paper grain — keeps the flat background from reading as a generated gradient */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  opacity:.42;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}
body>*{position:relative;z-index:1}

/* ---------- header ---------- */
.site-header{
  position:sticky;
  top:0;
  z-index:90;
  isolation:isolate;
  background:transparent;
}
.site-header::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;
  height:1px;
  pointer-events:none;
  background:var(--line);
  opacity:0;
  transition:opacity .3s var(--e-body);
}
.site-header.is-scrolled::after{opacity:1}
.header-inner{
  min-height:190px;
  padding:50px var(--gutter);
  display:flex;
  align-items:flex-start;
  gap:32px;
  transition:min-height .35s var(--e-body),padding .35s var(--e-body),background-color .35s var(--e-body);
}
.site-header.is-scrolled .header-inner{
  min-height:95px;
  padding:25px var(--gutter);
  background:var(--page);
}
.brand{display:block;width:90px;height:90px;flex:0 0 90px;transition:width .35s var(--e-body),height .35s var(--e-body),flex-basis .35s var(--e-body)}
.brand img{display:block;width:100%;height:100%}
.site-header.is-scrolled .brand{width:45px;height:45px;flex-basis:45px}
.site-nav{margin-left:auto;margin-top:24px;display:flex;align-items:center;gap:28px;transition:margin-top .35s var(--e-body)}
.site-header.is-scrolled .site-nav{margin-top:6px}
.site-nav a{
  position:relative;
  display:inline-block;
  font-family:var(--font-display);
  font-size:16px;
  font-weight:300;
  color:#34373C;
  text-decoration:none;
  transition:color .22s var(--e-ui);
}
.site-nav a::after{
  content:"";
  position:absolute;left:0;right:0;bottom:-6px;
  height:1px;background:var(--accent);
  transform:scaleX(0);transform-origin:left center;
  transition:transform .28s var(--e-display);
}
.site-nav a:hover,.site-nav a:focus-visible{color:var(--ink)}
.site-nav a:hover::after,.site-nav a:focus-visible::after{transform:scaleX(1)}
.menu-toggle{display:none;width:48px;height:48px;border:0;background:transparent;position:relative;margin-left:auto;margin-top:18px;cursor:pointer}
.menu-toggle span{position:absolute;left:11px;right:11px;height:1px;background:var(--ink);transition:transform .3s var(--e-display),opacity .2s var(--e-ui)}
.menu-toggle span:first-child{top:20px}
.menu-toggle span:last-child{top:29px}
.menu-toggle[aria-expanded="true"] span:first-child{transform:translateY(4.5px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] span:last-child{transform:translateY(-4.5px) rotate(-45deg)}
.mobile-menu{display:none;flex-direction:column;padding:6px var(--gutter) 22px}
.mobile-menu.is-open{display:flex}
.mobile-menu a{padding:14px 0;min-height:48px;display:flex;align-items:center;font-family:var(--font-display);font-size:18px;text-decoration:none;border-bottom:1px solid var(--line)}

/* ---------- hero ---------- */
.hero{
  position:relative;
  padding:26px var(--gutter) 96px;
  display:grid;
  grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  gap:56px;
  align-items:end;
  overflow:hidden;
}
.hero-copy{max-width:900px}
.eyebrow{
  display:block;
  font-family:var(--font-display);
  font-size:12px;
  font-weight:500;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--accent);
}
.hero h1{
  margin:26px 0 0;
  font-size:clamp(46px,6.1vw,88px);
  line-height:.9;
  letter-spacing:-.032em;
}
.hero-lead{
  max-width:560px;
  margin-top:30px;
  color:#41454B;
  font-size:19px;
  line-height:1.62;
}
.hero-cta{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-top:34px;
  min-height:48px;
  padding:13px 24px;
  background:var(--accent);
  color:#fff;
  font-family:var(--font-display);
  font-size:15px;
  font-weight:500;
  text-decoration:none;
  transition:background-color .28s var(--e-ui),transform .28s var(--e-display);
}
.hero-cta .arrow{transition:transform .34s var(--e-display)}
.hero-cta:hover{background:var(--accent-deep)}
.hero-cta:hover .arrow{transform:translateX(6px)}

/* the mass of the first screen: a printed claret plate, cropped by the edge */
.hero-plate{
  position:relative;
  align-self:stretch;
  min-height:400px;
  margin-right:calc(var(--gutter) * -1);
  margin-bottom:-96px;
}
.plate-body{
  position:absolute;
  inset:0 -12% -14% 0;
  background:linear-gradient(147deg,#9A2837 0%,var(--accent) 34%,#6E1926 100%);
  overflow:hidden;
  will-change:transform;
}
.plate-body::after{
  content:"";
  position:absolute;
  inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23p)' opacity='.62'/%3E%3C/svg%3E");
  opacity:.16;
  mix-blend-mode:overlay;
}
.plate-mark{
  /* Anchored to the plate's LEFT edge: the right edge runs off screen by design,
     and anchoring there dragged the mark out of view on wide monitors.
     Sized by HEIGHT, because the plate's bottom also runs under the figures
     strip — sizing by width let the last row of the monogram fall off it. */
  position:absolute;
  left:15%;
  top:50%;
  transform:translateY(-56%);
  height:56%;
  width:auto;
  max-width:46%;
  opacity:.95;
}
.plate-caption{
  position:absolute;
  left:38px;
  top:38px;
  max-width:290px;
  color:rgba(255,255,255,.82);
  font-family:var(--font-display);
  font-size:15px;
  font-weight:300;
  line-height:1.5;
  letter-spacing:.01em;
}

/* ---------- figures ---------- */
.figures{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px;
  margin:0 var(--gutter);
  padding:0;
  background:var(--line);
  border:1px solid var(--line);
}
.figure{background:var(--page);padding:30px 32px}
.figure b{
  display:block;
  font-family:var(--font-display);
  font-size:clamp(36px,4.2vw,52px);
  font-weight:600;
  line-height:1;
  letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;
}
.figure span{display:block;margin-top:12px;color:var(--muted);font-size:14px;line-height:1.45}

/* ---------- sections ---------- */
.section{padding:104px var(--gutter) 0}
.section:last-of-type{padding-bottom:104px}
.section-head{max-width:760px;margin-bottom:40px}
.section-head h2{font-size:clamp(34px,4vw,52px);line-height:1.04}
.section-head p{margin-top:18px;color:var(--muted);font-size:17px;line-height:1.62;max-width:620px}
.section-count{
  display:inline-block;
  margin-left:14px;
  font-family:var(--font-display);
  font-size:14px;
  font-weight:400;
  color:var(--muted);
  letter-spacing:0;
  vertical-align:middle;
}

/* ---------- project cards ---------- */
.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.card{
  position:relative;
  display:flex;
  flex-direction:column;
  min-height:248px;
  padding:26px 28px 24px;
  background:var(--surface);
  border:1px solid var(--line);
  text-decoration:none;
  transition:border-color .3s var(--e-ui),transform .42s var(--e-display),box-shadow .42s var(--e-display);
}
.card::before{
  content:"";
  position:absolute;
  left:-1px;top:-1px;bottom:-1px;
  width:2px;
  background:var(--accent);
  transform:scaleY(0);
  transform-origin:top center;
  transition:transform .42s var(--e-display);
}
.card:hover,.card:focus-visible{
  border-color:var(--line-strong);
  transform:translateY(-3px);
  box-shadow:0 18px 40px -30px rgba(23,24,26,.5);
  outline:none;
}
.card:hover::before,.card:focus-visible::before{transform:scaleY(1)}
.card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:18px}
.mono{
  width:46px;height:46px;
  flex:0 0 46px;
  display:grid;place-items:center;
  background:var(--accent);
  color:#fff;
  font-family:var(--font-display);
  font-size:17px;
  font-weight:600;
  letter-spacing:-.02em;
  transition:background-color .3s var(--e-ui);
}
.card[data-state="preparation"] .mono,.card[data-state="down"] .mono{
  background:transparent;
  color:var(--line-strong);
  box-shadow:inset 0 0 0 1px var(--line);
}
.card:hover .mono{background:var(--accent-deep);color:#fff;box-shadow:none}

/* a project with a brand of its own shows it: the badge becomes the mark, and a
   hairline keeps the pale ones from dissolving into the white card */
.mono.is-image{position:relative;background:none;box-shadow:none;overflow:hidden}
.mono.is-image img{display:block;width:100%;height:100%;object-fit:contain}
.mono.is-image::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px rgba(23,24,26,.1)}
.card:hover .mono.is-image,.card[data-state="preparation"]:hover .mono.is-image{background:none;box-shadow:none}
.mono.is-image{transition:transform .38s var(--e-display)}
.card:hover .mono.is-image{transform:scale(1.05)}
.card[data-state="preparation"]:hover .mono,.card[data-state="down"]:hover .mono{background:transparent;color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.state{
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-family:var(--font-display);
  font-size:11px;
  font-weight:400;
  letter-spacing:.07em;
  text-transform:uppercase;
  color:var(--muted);
  white-space:nowrap;
}
.state::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.state[data-state="live"]{color:#1E7A4F}
.state[data-state="down"]{color:#B0492B}
.card h3{margin:26px 0 0;font-size:26px;line-height:1.14}
.card .native{margin-top:6px;color:var(--muted);font-size:14px;line-height:1.4}
.card .tagline{margin-top:13px;color:#3E4249;font-size:16px;line-height:1.5;max-width:46ch}
.card-foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-top:auto;
  padding-top:20px;
}
.card-figures{display:flex;gap:22px;flex-wrap:wrap}
.card-figures span{font-size:13px;color:var(--muted);line-height:1.3}
.card-figures b{
  display:block;
  font-family:var(--font-display);
  font-size:21px;
  font-weight:600;
  color:var(--ink);
  letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}
.card-go{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--font-display);
  font-size:13px;
  font-weight:500;
  color:var(--accent);
}
.card-go .arrow{transition:transform .36s var(--e-display)}
.card:hover .card-go .arrow{transform:translateX(6px)}

/* ---------- principles ---------- */
.principles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.principle{background:var(--page);padding:32px}
.principle h3{font-size:22px;line-height:1.2}
.principle p{margin-top:14px;color:#4A4E55;font-size:16px;line-height:1.62}

/* ---------- operator note ---------- */
.operator-note{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:48px;
  padding:36px;
  background:var(--surface);
  border:1px solid var(--line);
}
.operator-note h3{font-size:22px}
.operator-note p{margin-top:14px;color:#44484E;font-size:15.5px;line-height:1.66}
.operator-note a{color:var(--accent-ink);text-underline-offset:3px}

/* ---------- project page ---------- */
.project-hero{padding:26px var(--gutter) 0}
.back-link{
  display:inline-flex;align-items:center;gap:9px;
  min-height:44px;
  font-family:var(--font-display);font-size:14px;font-weight:400;
  color:var(--muted);text-decoration:none;
  transition:color .24s var(--e-ui);
}
.back-link:hover{color:var(--accent)}
.back-link .arrow{transition:transform .3s var(--e-display)}
.back-link:hover .arrow{transform:translateX(-5px)}
.project-hero h1{margin:22px 0 0;font-size:clamp(38px,5.4vw,76px);line-height:.94;letter-spacing:-.032em;max-width:16ch}
.project-native{margin-top:16px;color:var(--muted);font-size:18px}
.project-meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;
  margin-top:30px;padding-top:22px;
  border-top:1px solid var(--line);
}
.project-visit{
  display:inline-flex;align-items:center;gap:9px;
  min-height:48px;padding:12px 22px;
  background:var(--accent);color:#fff;
  font-family:var(--font-display);font-size:15px;font-weight:500;
  text-decoration:none;
  transition:background-color .28s var(--e-ui);
}
.project-visit:hover{background:var(--accent-deep)}
.project-visit .arrow{transition:transform .34s var(--e-display)}
.project-visit:hover .arrow{transform:translate(4px,-4px)}
.project-body{
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(270px,.65fr);
  gap:64px;
  padding:56px var(--gutter) 96px;
}
.prose p{margin-bottom:22px;font-size:18px;line-height:1.72;color:#33373D;max-width:64ch}
.prose p:last-child{margin-bottom:0}
.side-panel{align-self:start;background:var(--surface);border:1px solid var(--line)}
.side-panel h4{padding:20px 24px 0;font-size:13px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);font-weight:400}
.side-row{display:flex;justify-content:space-between;gap:20px;padding:16px 24px;border-bottom:1px solid var(--line);font-size:14.5px}
.side-row:first-of-type{margin-top:16px;border-top:1px solid var(--line)}
.side-row:last-child{border-bottom:0}
.side-row span{color:var(--muted)}
.side-row b{font-family:var(--font-display);font-weight:500;text-align:right;font-variant-numeric:tabular-nums}
.related{padding:0 var(--gutter) 96px}
.related h2{font-size:clamp(26px,3vw,36px);margin-bottom:28px}

/* ---------- footer ---------- */
.site-footer{
  margin-top:0;
  padding:56px var(--gutter) 30px;
  background:var(--surface);
  border-top:1px solid var(--line);
}
.footer-inner{display:grid;grid-template-columns:1.5fr .8fr .8fr;gap:48px}
.footer-lead img{width:186px}
.footer-lead p{margin-top:22px;max-width:460px;color:var(--muted);font-size:14.5px;line-height:1.7}
.site-footer strong{display:block;margin-bottom:14px;font-family:var(--font-display);font-size:12px;font-weight:500;letter-spacing:.07em;text-transform:uppercase;color:var(--accent)}
.site-footer a{display:block;margin:10px 0;min-height:24px;font-size:14.5px;text-decoration:none;color:#3B3F45;transition:color .22s var(--e-ui)}
.site-footer a:hover{color:var(--accent)}
.footer-bottom{margin-top:40px;padding-top:20px;border-top:1px solid var(--line);color:var(--muted);font-size:12.5px;line-height:1.7;max-width:900px}

/* ---------- motion layer ---------- */
/* hidden only when JS is present to bring it back — a reveal rule must never
   be able to outlive the code that undoes it */
.js [data-rise]{opacity:0;transform:translateY(18px)}
[data-rise].is-in,.is-ready .intro>.hero [data-rise],.is-ready .intro>.figures[data-rise],.is-ready .intro>.project-hero [data-rise],.is-ready .intro>.project-body [data-rise]{
  opacity:1;transform:none;
  transition:opacity .7s var(--e-body),transform .78s var(--e-display);
}
.line-mask{display:block;overflow:hidden}
.line-mask>span{display:block}
.js .line-mask>span{display:block;transform:translateY(105%);transition:transform .92s var(--e-display)}
.is-ready .line-mask>span{transform:none}
.intro [data-delay="1"]{transition-delay:.08s}
.intro [data-delay="2"]{transition-delay:.16s}
.intro [data-delay="3"]{transition-delay:.24s}
.intro [data-delay="4"]{transition-delay:.32s}
.intro [data-delay="5"]{transition-delay:.4s}
.js .plate-body{opacity:0;transform:translateY(26px) scale(.985);transition:opacity .9s var(--e-body) .1s,transform 1.05s var(--e-display) .1s}
.is-ready .plate-body{opacity:1;transform:none}

@media (max-width:1100px){
  :root{--gutter:36px}
  .hero{grid-template-columns:1fr;gap:40px;padding-bottom:72px}
  .hero-plate{margin-right:calc(var(--gutter) * -1);margin-bottom:-72px;min-height:300px}
  /* below 1100 the plate is wide and low: the caption sits top-left, so the mark
     goes right, and the plate stops at the screen edge instead of running past it */
  .plate-body{inset:0 0 -14% 0}
  .plate-mark{height:56%;width:auto;max-width:34%;left:auto;right:9%;top:50%;transform:translateY(-52%)}
  .project-body{grid-template-columns:1fr;gap:40px}
  .operator-note{grid-template-columns:1fr;gap:26px}
}
@media (max-width:900px){
  .header-inner{min-height:150px;padding:34px var(--gutter)}
  .site-header.is-scrolled .header-inner{min-height:84px;padding:20px var(--gutter)}
  .brand,.site-header.is-scrolled .brand{width:64px;height:64px;flex-basis:64px}
  .site-header.is-scrolled .brand{width:44px;height:44px;flex-basis:44px}
  .site-nav{display:none}
  .menu-toggle{display:block;margin-top:8px}
  .cards{grid-template-columns:1fr}
  .figures{grid-template-columns:1fr;margin:0 var(--gutter)}
  .principles{grid-template-columns:1fr}
}
@media (max-width:640px){
  :root{--gutter:20px}
  body{font-size:16px}
  .header-inner{min-height:118px;padding:24px var(--gutter)}
  .brand,.site-header.is-scrolled .brand{width:56px;height:56px;flex-basis:56px}
  .hero{padding:14px var(--gutter) 56px;gap:34px}
  .hero h1{font-size:clamp(38px,11.4vw,54px);line-height:.94}
  .hero-lead{font-size:17px;margin-top:24px}
  /* cropping the plate past the edge does not survive a narrow screen:
     keep it inside the block and show the mark whole */
  .hero-plate{margin:0;min-height:250px}
  .plate-body{inset:0}
  /* on a phone the caption and the mark share one narrow plate: stack them */
  .plate-mark{height:auto;width:38%;max-width:none;left:auto;right:9%;top:auto;bottom:10%;transform:none}
  .plate-caption{left:22px;top:22px;font-size:13px;max-width:165px}
  .figure{padding:22px 20px}
  .section{padding-top:68px}
  .section:last-of-type{padding-bottom:68px}
  .card{padding:22px 20px 20px;min-height:0}
  .card h3{margin-top:22px;font-size:21px}
  .card-foot{flex-direction:column;align-items:flex-start;gap:16px}
  .project-body{padding:36px var(--gutter) 64px}
  .prose p{font-size:17px}
  .footer-inner{grid-template-columns:1fr;gap:34px}
  .related{padding-bottom:64px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  [data-rise],.plate-body{opacity:1;transform:none}
  .line-mask>span{transform:none}
}