/* PROCESS PAGE ONLY. Loads after style.css and reuses its colors and fonts. */

.proc{padding:6.5rem var(--pad) 4rem}

/* Top bar: title on the left, "Choose a project" on the right */
.proc-bar{display:flex;justify-content:space-between;align-items:baseline;gap:1rem 2rem;padding-bottom:1rem;border-bottom:1px solid var(--line)}
.proc-pick{font-weight:500;font-size:.95rem}

/* The hidden list of projects (opens under the bar) */
.proc-drawer{display:flex;flex-wrap:wrap;gap:.6rem 1.8rem;padding:1.4rem 0 .4rem;font:400 clamp(1.3rem,2.6vw,2rem)/1.2 var(--serif)}
.proc-drawer button.ul{font-weight:400}
.proc-drawer button[aria-pressed="true"]{color:var(--coral-d)}

/* Project title */
.proc-head{margin:2.2rem 0 1.4rem}
.proc-head h3{font:400 clamp(1.6rem,3.4vw,2.6rem)/1.1 var(--serif);letter-spacing:-.01em}
.proc-meta{margin-top:.4rem;font-size:.9rem;color:var(--grey)}

/* THE SLIDING STRIP. Change the 58svh / 560px on .pic to make pictures bigger or smaller. */
.strip{display:flex;gap:clamp(1.2rem,3vw,2.6rem);align-items:flex-start;overflow-x:auto;overflow-y:hidden;
  margin:0 calc(var(--pad) * -1);padding:.6rem var(--pad) 1rem;
  cursor:grab;scrollbar-width:none;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
.strip::-webkit-scrollbar{display:none}
.strip.drag{cursor:grabbing;user-select:none}
.strip:focus-visible{outline-offset:-2px}
.frame{flex:none;display:flex;flex-direction:column;gap:.8rem;margin:0}
.frame[data-k]{cursor:zoom-in}
.strip.drag .frame{cursor:grabbing}
.frame .pic{height:clamp(260px,58svh,560px);transition:transform .55s cubic-bezier(.2,.8,.2,1),box-shadow .55s cubic-bezier(.2,.8,.2,1)}
.frame .pic img{height:100%;width:auto;max-width:none}
.frame[data-k]:hover .pic{transform:translateY(-6px);box-shadow:7px 7px 0 var(--coral)}

/* Striped placeholder (shows when a slide has no img yet) */
.frame .pic.ph{aspect-ratio:var(--r,4/5);background:repeating-linear-gradient(135deg,transparent 0 9px,var(--hatch) 9px 10px),var(--fill);
  display:grid;place-items:center;text-align:center;font:italic 400 1rem/1.4 var(--serif);color:var(--grey)}

/* Caption under each slide */
.frame figcaption{display:flex;align-items:baseline;gap:.8rem}
.frame .st{font:italic 400 1.1rem var(--serif);color:var(--coral-d)}
.frame .tt{font:400 1.2rem/1.2 var(--serif)}

/* Progress line and counter */
.proc-foot{display:flex;align-items:center;gap:1.2rem;margin-top:.4rem}
.proc-line{flex:1;height:2px;background:var(--line);overflow:hidden}
.proc-line i{display:block;height:100%;background:var(--coral);transform-origin:left;transform:scaleX(0)}
.proc-hint{font-size:.9rem;color:var(--grey);white-space:nowrap}

/* STATIC CONTENT under the strip */
.proc-static{display:grid;grid-template-columns:1fr 1.3fr;gap:var(--pad);margin-top:4rem;padding-top:3rem;border-top:1px solid var(--line)}
.ps-intro{max-width:60ch;font:400 1.2rem/1.65 var(--serif)}
.ps-intro p+p{margin-top:1rem}
.ps-notes{margin-top:0;align-content:start}
.ps-gallery{grid-column:1/-1;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:clamp(1rem,2vw,2rem);margin-top:1rem}
.ps-gallery figure{margin:0}
.ps-gallery figcaption{margin-top:.6rem;font:400 1.1rem/1.2 var(--serif)}

/* Header link for this page */
.menu a[aria-current="page"]{background-size:100% 2px}


/* ---------- EXPLODED LAYERS ---------- */

/* Wrapper. Tilted 3D shapes don't take up normal space,
   so min-height reserves room. perspective = depth strength (lower = more dramatic). */
.ps-explode{
  grid-column:1/-1;
  position:relative;                /* lets the hint sit in the top-left corner */
  display:grid;place-items:center;
  min-height:760px;
  perspective:2400px;
}

/* The stage holds every layer and gets tilted.
   The shape comes from "ratio" in process-data.js. */
.xstage{
  --gap:60px;                       /* process.js changes this as you scroll */
  position:relative;
  width:min(62vw,560px);
  transform-style:preserve-3d;      /* REQUIRED: without it the layers flatten */
  transform:rotateX(58deg) rotateZ(-42deg);   /* the tilt. Try 50-65 and -30 to -50 */
}

/* Every layer shares these rules */
.xlayer{
  position:absolute;inset:0;
  transform:translateZ(calc(var(--i) * var(--gap)));   /* layer number x gap = height */
  transition:transform .25s linear;                    /* smooths the scroll movement */
  border:1px solid rgba(90,40,50,.45);                 /* thin outline so see-through layers still show */
}

/* The colored shape. clip-path (set in process-data.js) cuts it into the curve. */
.xfill{position:absolute;inset:0}

/* Pictures inside a layer. Default = fill the layer. imgcss can override this. */
.xlayer img{width:100%;height:100%;object-fit:contain}

/* Contact text. White, because it sits on the red panel. */
.xtext{
  position:absolute;inset:0;
  display:flex;flex-direction:column;justify-content:center;align-items:flex-end;
  padding-right:6%;
  color:#ffffff;
  font-size:clamp(.55rem,1.5vw,.95rem);    /* text scales with the card */
}
.xtext p{margin:.35em 0}
.xtext .xn{font:400 1.7em var(--serif)}                     /* "Anthony Lucy" */
.xtext .xr{font:400 1.2em var(--serif);margin-bottom:2em}   /* role, then a gap */

/* The label beside each layer. right:100% puts it just outside the layer's left edge. */
.xlayer::before{
  content:attr(data-label);
  position:absolute;right:100%;top:.4rem;
  margin-right:1.2rem;
  font:600 1.15rem var(--sans, sans-serif);
  color:var(--coral-d);
  white-space:nowrap;
}

/* ---------- SCROLL HINT above the stack ---------- */
.xhint{
  position:absolute;top:0;left:0;z-index:5;   /* z-index keeps it above the tilted layers */
  display:flex;align-items:center;gap:.8rem;
  font:italic 400 1.1rem var(--serif);
  color:var(--coral-d);
}

/* The arrow bounces, and fades out as --t goes from 0 to 1 */
.xhint-arrow{
  display:inline-block;
  animation:xbounce 1.4s ease-in-out infinite;
  opacity:calc(1 - var(--t, 0) * 1.5);
}
@keyframes xbounce{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}

/* The little bar. ::after is the colored fill, and --t sets how full it is */
.xhint-bar{display:block;position:relative;width:90px;height:2px;background:var(--line);overflow:hidden}
.xhint-bar::after{
  content:"";position:absolute;inset:0;
  background:var(--coral);
  transform-origin:left;
  transform:scaleX(var(--t, 0));
}


/* ---------- STORY: cards + type scroll with their text over a growing pastel wash ---------- */
.ps-story{--a:0;grid-column:1/-1;position:relative;margin:-3rem calc(var(--pad) * -1) 0}

/* pinned background: wash + big moon. The content below is pulled up over it. */
.sback{position:sticky;top:0;height:100svh;overflow:hidden;z-index:0;pointer-events:none}
.sbg{position:absolute;inset:0;background:var(--pastel);opacity:var(--a)}
.smoon{position:absolute;left:-4vw;top:50%;height:125svh;aspect-ratio:350/545;
  background:var(--bigmoon);
  -webkit-mask:url(assets/moon.png) center/contain no-repeat;mask:url(assets/moon.png) center/contain no-repeat;
  transform-origin:left center;
  transform:translateY(-50%) scale(calc(.15 + var(--a) * .85));
  opacity:calc(var(--a) * 1.3)}

/* normal scrolling content: left = swatches, then type. right = their text. */
.scontent{position:relative;z-index:1;margin-top:-100svh;
  padding:clamp(2rem,6svh,4rem) var(--pad) clamp(4rem,12svh,8rem);
  display:grid;grid-template-columns:min(34vw,440px) 1fr;column-gap:var(--pad);
  row-gap:clamp(3rem,8svh,5rem);align-items:start} 

/* fade-in: process.js sets --p (0 to 1) on each .sr from its own position on screen */
.sr{--p:0}
.sr>*{opacity:var(--p);transform:translateY(calc((1 - var(--p)) * 24px))}

/* swatch cards, one column of four */
.sgrid{display:grid;grid-template-columns:1fr;gap:.5rem}
.scard{position:relative;margin:0;aspect-ratio:7/2;overflow:hidden;background:var(--bg);
  box-shadow:0 14px 30px -18px rgba(64,53,61,.45)}
.scard svg{position:absolute;left:8%;top:12%;height:76%;width:auto;aspect-ratio:350/545;fill:var(--moon)}
.scard figcaption{position:absolute;left:30%;right:6%;top:50%;transform:translateY(-50%);
  color:#fff;text-align:right;font:400 clamp(.85rem,1.1vw,1rem)/1.25 var(--serif)}

/* type card under the swatches */
.stype{margin:0;padding:1.4rem 1.6rem 1.6rem;background:rgba(255,255,255,.55);color:var(--tfg);
  box-shadow:0 14px 30px -18px rgba(64,53,61,.45)}
.stype .slabel{display:block;font:italic 400 .95rem var(--serif);color:var(--grey)}
.ssample{font:400 clamp(4.5rem,9vw,7rem)/1 var(--serif);margin:.3em 0 .25em}
.stype p{font-size:1.35rem;margin-top:.7rem;overflow-wrap:anywhere}
.stype p small{display:block;font:italic 400 .9rem var(--serif);color:var(--grey)}

/* text on the right, beside its swatches / type */
.sside{justify-self:end;width:min(100%,800px);text-align:right}
.stxt h4{font:600 clamp(1.5rem,2.2vw,2.2rem)/1.1 var(--serif);font-style:normal;color:var(--coral-d)}
.stxt p{margin-top:1.1rem;font:400 1.45rem/1.65 var(--serif)}
@media(min-width:1200px){.stxt h4{white-space:nowrap}}


/* ---------- Mobile + reduced motion (for the sections ABOVE) ---------- */
@media(max-width:800px){
  .proc{padding-top:8rem}
  .proc-static{grid-template-columns:1fr}
  .frame .pic{height:clamp(220px,48svh,420px)}
  .ps-explode{min-height:520px}
  .xstage{width:min(72vw,420px)}
  .xlayer::before{display:none}     /* labels get crowded on phones */
  .scontent{grid-template-columns:1fr;row-gap:2rem}
  .sgrid{width:min(100%,420px)}
  .stype{max-width:420px}
  .sside{justify-self:start;width:100%}
  .scard figcaption{font-size:.95rem}
  .ssample{font-size:4.5rem}
}
@media(prefers-reduced-motion:reduce){
  .strip{scroll-behavior:auto}
  .xlayer{transition:none}
  .xhint-arrow{animation:none}
}


/* ======================================================================
   FOX LOGO SECTION
   ====================================================================== */
.logo-sec{margin-bottom:4rem}
.logo-sec figure{margin:0}
.logo-sec img{display:block;max-width:100%;height:auto}
.zoomset img{cursor:zoom-in}

/* fade-in pieces */
.rv{opacity:0;transform:translateY(24px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.8,.2,1)}
.rv.in{opacity:1;transform:none}

/* ---------- BANDS: full-width strips whose background fades in on scroll ---------- */
.band{--bandbg:#dcebea;position:relative;isolation:isolate;overflow:hidden;
  margin:0 calc(var(--pad) * -1);padding:clamp(3rem,8vw,6rem) var(--pad)}
.band::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--bandbg);opacity:0;transition:opacity 1.1s ease}
/* big faded logo behind each band */
.band::after{content:"";position:absolute;top:50%;height:150%;aspect-ratio:1;transform:translateY(-50%);z-index:-1;
  background:var(--bandmark,rgba(150,70,70,.07));
  -webkit-mask:url(assets/mark.png) center/contain no-repeat;mask:url(assets/mark.png) center/contain no-repeat;
  pointer-events:none;opacity:0;transition:opacity 1.6s ease}
.band.in::before,.band.in::after{opacity:1}
.band-light::after{right:-14%}
.band-light.flip::after{right:auto;left:-14%}
.band-dark{--bandbg:#231f20;color:#f4ece4}
.band-dark::after{left:-10%;--bandmark:rgba(255,255,255,.05)}

/* ---------- SHARED CARD + TEXT STYLES ---------- */
.logo-pair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,4vw,4rem);align-items:stretch}
.lcol{display:flex;flex-direction:column;gap:1.4rem}
.lcol:nth-child(2){transition-delay:.15s}
.lcard{flex:1;display:grid;place-items:center;background:#ffffff;padding:clamp(1rem,2.4vw,2rem);   /* background = card color */
  box-shadow:0 22px 40px -24px rgba(64,53,61,.5);
  transition:transform .55s cubic-bezier(.2,.8,.2,1),box-shadow .55s cubic-bezier(.2,.8,.2,1)}
.lcard img{width:100%}   /* image size: e.g. width:100%;max-width:600px;margin:0 auto */
.lcol:hover .lcard{transform:translateY(-6px);box-shadow:7px 7px 0 var(--coral)}

/* text styles shared by every band */
.lnum{display:block;font:italic 400 1.1rem var(--serif);color:var(--coral-d);margin-bottom:.3rem}
.logo-sec h4{font:600 clamp(1.5rem,2.2vw,2.2rem)/1.1 var(--serif);color:var(--coral-d)}
.lcol p{margin-top:.8rem;font:400 1.25rem/1.65 var(--serif);max-width:52ch}


/* The intro sentence above the teal hero */
.fx-intro{
  margin:2.5rem 0 3rem;     /* top = space below the line under "Process" (raise it to move the text lower).
                               bottom = space before the teal hero band */
  max-width:none;           /* no width limit, so it runs all the way across. If it feels too long to read,
                               try max-width:90ch instead */
  font:400 1.2rem/1.6 var(--serif);   /* size/line-height. Change 1.2rem to resize */
}

/* ---------- HERO (top of the logo section) ---------- */
/* Every class here starts with "fx-" so style.css can't accidentally change it.
   Change --logo-size to make the logo bigger or smaller inside its white card. */
.fx-hero{
  --logo-size:80%;                  /* logo width inside the card. Try 70%, 90% or 100% */
  padding-top:clamp(3rem,7vw,5.5rem);
  padding-bottom:clamp(3rem,7vw,5.5rem);
}

/* Two columns: text on the left, logo card on the right.
   .7fr / 1.3fr = the right side gets almost twice the room. Raise 1.3 for a bigger card. */
.fx-hero-grid{
  display:grid;
  grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);
  column-gap:clamp(2rem,5vw,5rem);   /* space between text and logo */
  row-gap:clamp(1rem,2.5vw,2rem);    /* space between title and the row below it */
  align-items:start;
  width:100%;                       /* these two undo any width limit from style.css */
  max-width:none;
  margin:0;
}

/* The column that holds the card.
   justify-self: end = hug the right edge, center = middle, start = left. */
.fx-hero .lcol{
  width:100%;
  max-width:1100px;                 /* biggest the card is allowed to get */
  justify-self:end;
}

/* The white card. aspect-ratio is its shape (width/height). Try 4/3 for taller. */
.fx-hero .lcard{
  width:100%;
  aspect-ratio:3/2;
  padding:clamp(.5rem,2vw,1.6rem);  /* less padding = bigger logo */
}
.fx-hero .lcard img{width:var(--logo-size)}

.fx-hero-title{
  grid-column:1/-1;   /* "span from the first grid line to the last" = full width, above both columns */
  font:400 clamp(3rem,7.5vw,7rem)/.95 var(--serif);
  letter-spacing:-.02em;
}
.fx-hero-lead{
  margin-top: -0.3em;        /* the title is no longer above it in this column */
  font:400 1.1rem/1.6 var(--serif);   /* was 1.4rem. Try 1rem for even smaller */
  max-width:46ch;      /* a little wider since the text is smaller */
}

.fx-hero-text{
  align-self:stretch;              /* this column fills the full row height instead of shrinking to its text */
  display:flex;                    /* flex lets us control spacing between the children */
  flex-direction:column;           /* stack them vertically: paragraph, then facts */
  justify-content:space-between;   /* first child at the top, last child at the bottom */
}

/* Year / Discipline / Tools / Role grid */
.fx-meta{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem 2.4rem;margin:3rem 0 0;padding-top:1.6rem;border-top:1px solid rgba(64,53,61,.2)}
.fx-meta dt{font:italic 400 1rem var(--serif);color:var(--accent)}
.fx-meta dd{margin:.2rem 0 0;font:600 1.25rem/1.3 var(--serif)}

/* ---------- BAND 1: text on the left, image on the right ---------- */
/* This sits OUTSIDE any @media block, so it applies on desktop.
   1fr 1.4fr = the image column is 40% wider than the text column.
   Make the second number smaller (1.1 or 1) for a smaller image. */
.fx-split{
  display:grid;                                /* this is what makes two columns */
  grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);
  gap:clamp(1.5rem,4vw,4rem);                  /* space between text and image */
  align-items:start;                          /* text sits at the image's middle. "start" = top */
}
.fx-split .lcol{justify-self:end;max-width:900px}   /* image hugs the right; max-width caps its size */

/* ---------- BAND 2: dark story + goal ---------- */
.goal{display:grid;grid-template-columns:1fr 1.2fr;gap:clamp(2rem,6vw,6rem);align-items:start}
.goal p{margin-top:1rem;font:400 1.3rem/1.65 var(--serif);max-width:52ch}
.goal h4,.band-dark .lnum{color:#e58a93}
.goal-right{border-left:1px solid rgba(255,255,255,.18);padding-left:clamp(1.5rem,4vw,4rem)}
.goal .goal-big{font:400 clamp(1.8rem,3.2vw,3rem)/1.2 var(--serif)}
.goal .goal-tools{margin-top:1.6rem;font:italic 400 1rem var(--serif);color:#b8aaa0}

/* ---------- BAND 3: other ideas ---------- */
.band-title{margin-bottom:2rem}

/* A grid instead of columns: every card gets the same width and the tops line up.
   repeat(3,1fr) = 3 cards per row. Change 3 to 2 for bigger cards, or 4 for smaller ones. */
.collage{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));   /* minmax(0,...) stops wide images from stretching a column */
  gap:clamp(1rem,2vw,1.8rem);                      /* space between cards */
  align-items:stretch;                             /* all cards in a row end up the same height */
}

/* Each card: image on top, caption pinned to the bottom */
.collage figure{
  display:flex;flex-direction:column;
  margin:0;
  background:#fff;                                 /* card color */
  padding:clamp(.6rem,1.2vw,1rem);
  box-shadow:0 22px 40px -24px rgba(64,53,61,.5);
  transition:transform .55s cubic-bezier(.2,.8,.2,1),box-shadow .55s cubic-bezier(.2,.8,.2,1)}

/* The picture sits in a fixed shape so different-sized images still make equal cards.
   aspect-ratio = width/height of the picture area. Try 1/1 (square) or 3/2 (wider).
   object-fit:contain shows the whole picture without cropping it. */
.collage img{width:100%;aspect-ratio:4/3;object-fit:contain}

.collage figure:hover{transform:translateY(-6px);box-shadow:7px 7px 0 var(--coral)}

/* margin-top:auto pushes the caption to the bottom of the card */
.collage figcaption{margin-top:auto;padding-top:.7rem;font:italic 400 1rem/1.2 var(--serif);color:var(--grey)}

/* ---------- PHONES: every two-column layout in the logo section becomes one column ---------- */
@media(max-width:800px){
  .logo-pair,.goal,.fx-split,.fx-hero-grid{grid-template-columns:1fr}
  .goal-right{border-left:0;padding-left:0}
  .collage{columns:2}
}

/* ---------- People who turned off animations ---------- */
@media(prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  .band::before,.band::after{opacity:1;transition:none}
}

/* ---------- HEADING COLOR ON THE TEAL SECTIONS ---------- */
/* --coral-d is the red the headings read from. Setting it again here only changes
   it INSIDE these sections, so the rest of the site stays red.
   .band-light = hero, "The process" and "Other ideas" bands (the teal ones)
   .ps-story   = the palette + fonts section
   The dark band isn't listed, so it keeps its own pink headings. */
.band-light,
.ps-story{
  --coral-d:#1f6b6e;   /* heading color. Darker teal: #1f4b4e. Keep a red? Use #8f2f3a */
}

/* ===== "CHOOSE A PROJECT" BOX (paste at the very bottom of process.css) ===== */

.proc-pick{
  position:relative;
  isolation:isolate;              /* keeps the dark outline (the ::after below) from escaping behind the page */
  padding:.55rem 1.3rem;          /* space between the text and the box. First number = top/bottom, second = left/right */
  border:2.4px solid var(--coral);  /* the thick coral line. Change 2.4px to make it bolder or thinner */
  /* Four slightly different corner sizes so it looks hand-drawn, not a perfect rounded box.
     Set them all to the same number (like 8px) if you want it neat instead. */
  border-radius:14px 6px 16px 8px / 8px 16px 6px 14px;
  transition:transform .4s cubic-bezier(.3,1.5,.5,1);   /* the springy movement on hover */
}

/* The thin dark outline behind it. ::after makes an extra invisible layer on the button,
   and we give it a 1px dark border and slide it 4px right and 3px down. */
.proc-pick::after{
  content:"";
  position:absolute;inset:-2.4px;   /* -2.4px matches the border width so it lines up exactly */
  border:1px solid var(--ink);
  border-radius:inherit;            /* copies the wobbly corners from the button */
  transform:translate(4px,3px);
  z-index:-1;                       /* puts it behind the coral line */
  pointer-events:none;              /* so clicks go to the button, not this layer */
}

/* The self-drawing underline from .ul would look odd inside a box, so turn it off here. */
.proc-pick.ul{background-image:none}

/* On hover the box lifts up and left a little. */
.proc-pick:hover{transform:translate(-2px,-2px)}

/* ===== BACKDROP SWOOPS: all on the LEFT edge, going off the side of the screen ===== */

/* Shared size and vertical centering for every band.
   height = size. Bigger number = bigger swoop. */
.band::after{
  top:50%;
  height:100%;
  transform:translate(-35%,-50%) scaleX(-1);
  /* translate(-35%) = pushes it 35% of its own width off the LEFT edge.
     scaleX(-1) = mirrored. Delete scaleX(-1) to un-flip it. */
}

.band-light::after,
.band-light.flip::after,
.band-dark::after{
  left:0;
  right:auto;
  transform:translate(-35%,-50%) scaleX(-1);
}