/* ============================================================
   MOUNT CARMEL — Heritage
   The school draws itself, then one line runs down through 46 years.
   ============================================================ */

/* ============================================================
   OUR STORY  (About page only — this file is not loaded elsewhere)
   The staff photograph is a wide group shot of the whole faculty. It used to
   sit in a tall 4:5 box, which cropped roughly half the width away and cut
   people out of their own photo. It is now shown WHOLE, at its true shape,
   with the story underneath.
   ============================================================ */
.story{padding:34px 0 0;background:var(--paper)}
/* the headline is 41 characters — at 3.7rem it needed ~1214px and wrapped in an
   840px column. Full container width and a slightly smaller display size keep
   it on ONE line down to ~700px; below that, balance the two lines evenly. */
.story__head{max-width:none;margin-bottom:38px}
.story__title{font-size:clamp(2rem,4vw,3.2rem);line-height:1.08;color:var(--ink);
  text-wrap:balance;white-space:normal}

/* Full-bleed: breaks out of the container to the window edges, so the faces are
   as big as the screen allows. The photo is width-limited, so this is the only
   thing that actually enlarges them. */
.story__media{position:relative;margin:0 calc(50% - 50vw);width:100vw;max-width:100vw;
  overflow:hidden;background:var(--tint)}
/* height:auto — the band is already cropped to the people; never squash it */
.story__media img{width:100%;height:auto;display:block}

/* the photo is full-bleed, so line the badge up with the text column, not the
   window edge */
.story__badge{position:absolute;left:max(22px,calc(50% - 590px));bottom:22px;background:var(--green);color:#fff;
  border-radius:var(--radius-sm);padding:16px 22px;text-align:center;line-height:1.15;
  box-shadow:0 20px 40px -16px rgba(27,28,25,.55)}
.story__badge strong{display:block;font-family:var(--serif);font-size:36px;color:var(--gold);line-height:1}
.story__badge span{font-size:12px;line-height:1.3;opacity:.9}

.story__text{max-width:840px;margin-top:52px}
.story__text p{color:var(--text);font-size:1.05rem;line-height:1.78;margin-bottom:20px}
.story__text p:last-child{margin-bottom:0}

@media(max-width:860px){
  .story{padding:72px 0 0}
  .story__head{margin-bottom:26px}
  .story__badge{left:14px;bottom:14px;padding:12px 16px}
  .story__badge strong{font-size:28px}
  .story__badge span{font-size:10.5px}
  .story__text{margin-top:30px}
  .story__text p{font-size:1rem}
}

.heritage{padding:120px 0 130px;background:var(--paper);overflow:hidden}

/* ---------- opening ---------- */
.heritage__head{text-align:center;max-width:760px;margin:0 auto 64px}
.heritage__range{display:flex;align-items:center;justify-content:center;gap:26px;margin:14px 0 22px}
.heritage__range span{font-family:var(--serif);font-weight:500;font-size:clamp(2.6rem,6vw,4.6rem);
  line-height:1;color:var(--ink);letter-spacing:-.02em}
.heritage__range i{flex:1;max-width:220px;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:left center}
.heritage__range.is-in i{transform:scaleX(1);transition:transform 1.4s cubic-bezier(.6,0,.2,1) .15s}
.heritage__lede{color:var(--text);font-size:1.05rem;line-height:1.7}

/* ---------- the drawing ---------- */
.draw{position:relative;aspect-ratio:16/9;border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--line);background:var(--paper)}
.draw__photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0}
.draw__ink{position:absolute;inset:0}
.draw__ink svg{width:100%;height:100%;display:block}
.mc-ln{fill:none;stroke:var(--ink);stroke-width:1;vector-effect:non-scaling-stroke;
  stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;opacity:.85}

/* the lettering, drawn last */
.draw__board{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(74%,760px);overflow:visible}
.draw__board text{fill:none;stroke:var(--ink);font-family:var(--serif);letter-spacing:.06em;
  stroke-dasharray:1200;stroke-dashoffset:1200;paint-order:stroke}
.draw__t1{font-size:44px;font-weight:600;stroke-width:1.1}
.draw__t2{font-size:19px;font-weight:500;letter-spacing:.22em;stroke-width:.9}

/* once the photo is in, the lettering sits on top in gold */
.draw.is-lit .draw__board text{fill:var(--gold);stroke:var(--gold);
  transition:fill .9s ease .1s,stroke .9s ease .1s}
.draw.is-lit{border-color:transparent}

/* ---------- the timeline ---------- */
.tl{position:relative;margin-top:76px;padding-left:0}
.tl__rail{position:absolute;left:50%;top:0;bottom:0;width:1px;background:var(--line);transform:translateX(-.5px)}
.tl__ink{position:absolute;left:0;top:0;width:100%;height:0;background:var(--gold);
  box-shadow:0 0 10px -2px var(--gold)}

.tl__yearbox{position:sticky;top:96px;z-index:2;height:0;text-align:center;pointer-events:none}
.tl__yearbox span{display:inline-block;font-family:var(--serif);font-weight:500;
  font-size:clamp(3.4rem,9vw,7rem);line-height:1;color:var(--ink);opacity:.07;letter-spacing:-.03em;
  transform:translateY(-14px)}

.tl__list{list-style:none;margin:0;padding:0;position:relative;z-index:1}
/* These men are not "pending content" — they gave the school decades. They sit
   at full colour from the start; the arrival is a gentle lift, not a fade-in
   from nothing. (Was opacity .32, which made every portrait look dead.) */
.tl__i{position:relative;width:calc(50% - 44px);margin:0 0 54px auto;opacity:.9;
  transform:translateY(10px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.3,1)}
.tl__i:nth-child(odd){margin:0 auto 54px 0}
.tl__i.is-on{opacity:1;transform:none}

.tl__node{position:absolute;top:26px;width:11px;height:11px;border-radius:50%;
  background:var(--paper);border:1px solid var(--line);left:-49px;transition:.45s}
.tl__i:nth-child(odd) .tl__node{left:auto;right:-49px}
.tl__i.is-on .tl__node{background:var(--gold);border-color:var(--gold);transform:scale(1.35)}

/* Each card is a portrait hung beside its story. These men are not avatars —
   their photographs hang framed on the school's walls, so they are framed here:
   an upright portrait, a cream mat, a hairline of gold, a soft shadow. */
.tl__card{background:var(--white);border:1px solid var(--line);border-radius:14px;padding:26px 28px}
.tl__card::after{content:"";display:block;clear:both}
.tl__who{display:contents}
.tl__id{min-width:0}

/* The portrait FLOATS — the text sets itself beside it and carries on beneath,
   the way a picture sits in a page. (An earlier version made the portrait span
   every grid row, which stretched the rows and blew the text apart.) */
.tl__face{float:left;width:150px;margin:2px 24px 10px 0;
  padding:8px;background:var(--paper);border-radius:3px;
  border:1px solid rgba(184,137,74,.45);
  box-shadow:0 16px 34px -14px rgba(27,28,25,.4)}
.tl__face img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;
  display:block;border-radius:1px}
/* if a photograph is ever missing: initials on an empty mat */
.tl__face--none{display:grid;place-items:center;aspect-ratio:4/5;
  font-family:var(--serif);font-weight:600;font-size:30px;color:var(--gold-d);
  letter-spacing:.06em;background:var(--tint)}

.tl__yrs{display:block;font-size:12.5px;font-weight:600;letter-spacing:.14em;color:var(--gold);margin-bottom:5px}
.tl__card h3{font-family:var(--serif);font-weight:600;font-size:1.3rem;color:var(--ink);margin:0 0 12px}
.tl__card h3 em{font-style:normal;font-weight:400;font-size:.8em;color:var(--muted)}
.tl__card p{color:var(--text);font-size:.95rem;line-height:1.66;margin:0}
.tl__vision{font-family:var(--serif);font-style:italic;font-size:1.08rem!important;color:var(--green)!important;
  margin-bottom:12px!important;line-height:1.5!important}

.tl__seal{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--green);background:var(--tint);border:1px solid var(--line);border-radius:100px;
  padding:5px 12px;margin-bottom:12px}
.tl__seal--back{color:var(--muted)}
.tl__seal--now{color:#6b4d05;background:rgba(190,150,40,.16);border-color:rgba(190,150,40,.45)}

/* founder — larger, gold-edged */
.tl__i--founder .tl__card{border-color:rgba(190,150,40,.4);padding:34px 34px}
.tl__i--founder .tl__card h3{font-size:1.55rem}
/* he built the place — he gets the biggest frame. His photograph is a picture
   OF a picture, so it stays a touch smaller than it could be, to hide nothing. */
.tl__i--founder .tl__face{width:176px;border-color:rgba(184,137,74,.7)}

/* the first three dates — how the school actually began */
.tl__firsts{list-style:none;margin:18px 0 0;padding:16px 0 0;border-top:1px solid var(--line)}
.tl__firsts li{position:relative;padding-left:16px;margin-bottom:11px;font-size:.9rem;line-height:1.6;color:var(--text)}
.tl__firsts li:last-child{margin-bottom:0}
.tl__firsts li::before{content:"";position:absolute;left:0;top:.62em;width:5px;height:5px;border-radius:50%;background:var(--gold)}
.tl__firsts b{color:var(--ink);font-weight:600}

/* today — the line stops here, still glowing */
.tl__i--now .tl__card{border-color:rgba(190,150,40,.4)}
.tl__i--now.is-on .tl__node{animation:tlPulse 2.6s ease-out infinite}
@keyframes tlPulse{0%{box-shadow:0 0 0 0 rgba(190,150,40,.5)}70%{box-shadow:0 0 0 13px rgba(190,150,40,0)}100%{box-shadow:0 0 0 0 rgba(190,150,40,0)}}

/* ---------- closing ---------- */
.heritage__close{display:flex;justify-content:center;align-items:baseline;gap:56px;margin-top:26px;
  padding-top:44px;border-top:1px solid var(--line);flex-wrap:wrap;text-align:center}
.heritage__stat strong{display:block;font-family:var(--serif);font-weight:500;font-size:2.6rem;color:var(--ink);line-height:1}
.heritage__stat span{font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.heritage__stat--motto strong{font-size:1.5rem;font-style:italic;color:var(--gold)}

/* ---------- dark ---------- */
[data-theme="dark"] .mc-ln{stroke:#d8dade;opacity:.9}
[data-theme="dark"] .tl__ink{box-shadow:0 0 14px -1px var(--gold)}
[data-theme="dark"] .tl__yearbox span{opacity:.11}
[data-theme="dark"] .tl__seal--now{color:#f0d17a;background:rgba(190,150,40,.2)}

/* ---------- phone ---------- */
@media(max-width:860px){
  .heritage{padding:80px 0 88px}
  .tl__rail{left:9px}
  .tl__yearbox{top:78px;text-align:left;padding-left:34px}
  .tl__yearbox span{font-size:3.4rem}
  .tl__i,.tl__i:nth-child(odd){width:auto;margin:0 0 34px 40px}
  .tl__node,.tl__i:nth-child(odd) .tl__node{left:-36px;right:auto}
  /* the float still works on a phone — a smaller portrait with the text beside
     the head and running on under it */
  .tl__card{padding:22px 20px}
  .tl__face{width:104px;margin:2px 16px 8px 0}
  .tl__i--founder .tl__card{padding:26px 22px}
  .tl__i--founder .tl__face{width:118px}
  .tl__face--none{font-size:24px}
  .heritage__close{gap:34px}
  .draw__t1{font-size:52px}
  .draw__t2{font-size:22px}
}

/* ---------- reduced motion: show everything, drawn ---------- */
@media(prefers-reduced-motion:reduce){
  .mc-ln{stroke-dashoffset:0}
  .draw__photo{opacity:1}
  .draw__ink{opacity:0}
  .draw__board text{stroke-dashoffset:0;fill:var(--gold);stroke:var(--gold)}
  .tl__i{opacity:1;transform:none}
  .tl__ink{height:100%}
}