/* ===========================================================
   RACHEL RIEMERSMA — PORTFOLIO
   Design language derived from "The Archive" (MA CDFM, Vogue
   College of Fashion): greige paper, cut-out ransom lettering,
   heavy geometric headers, ephemera, figure captions.
   =========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Archivo:wght@400;500;600;700&family=Abril+Fatface&family=Alfa+Slab+One&family=Bevan&family=Playfair+Display:wght@700;900&family=Caveat:wght@500;700&display=swap');

:root{
  /* Paper — sampled directly from the dissertation pages */
  --paper:    #DCD8CC;
  --paper-lt: #E9E5DA;
  --card:     #F2EAD8;
  --ink:      #262421;
  --ink-70:   rgba(38,36,33,.72);
  --ink-45:   rgba(38,36,33,.45);

  /* Cut-out letter palette — sampled from the ransom lettering */
  --red:    #C4342B;
  --blue:   #3B5EA8;
  --orange: #E07A2F;
  --green:  #4A8B5C;
  --purple: #7B5EA7;
  --pink:   #E88AA8;
  --gold:   #E8B93F;
  --cream:  #F2EAD8;

  --display: 'Archivo Black', Impact, sans-serif;
  --sans:    'Archivo', -apple-system, sans-serif;
  --marker:  'Caveat', cursive;

  --rule-soft: 1px solid rgba(38,36,33,.2);
  --rule-dashed: 1px dashed rgba(38,36,33,.35);

  --gutter: clamp(1.25rem, 4vw, 3rem);
  --max: 1280px;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }

body{
  background-color:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

.wrap{ max-width:var(--max); margin:0 auto; padding-left:var(--gutter); padding-right:var(--gutter); position:relative; }

/* ---------- RANSOM LETTERING — the signature device ----------
   Each letter is a separately "cut" scrap: own colour, own face,
   own rotation, own paper. Mirrors the ARCHIVE wordmark.         */
.ransom{ display:inline-flex; flex-wrap:wrap; align-items:center; gap:.06em; line-height:1; }
.ransom span{
  display:inline-block;
  padding:.06em .13em .1em;
  font-size:1em;
  box-shadow:1px 2px 0 rgba(38,36,33,.16);
}
.ransom span:nth-child(8n+1){ background:var(--red);    color:var(--cream);  font-family:var(--display); transform:rotate(-4deg); }
.ransom span:nth-child(8n+2){ background:var(--cream);  color:var(--blue);   font-family:'Abril Fatface',serif; transform:rotate(3deg); }
.ransom span:nth-child(8n+3){ background:var(--blue);   color:var(--cream);  font-family:'Bevan',serif; transform:rotate(-2deg); }
.ransom span:nth-child(8n+4){ background:var(--orange); color:var(--ink);    font-family:'Alfa Slab One',serif; transform:rotate(4deg); }
.ransom span:nth-child(8n+5){ background:var(--cream);  color:var(--purple); font-family:var(--display); transform:rotate(-3deg); }
.ransom span:nth-child(8n+6){ background:var(--green);  color:var(--cream);  font-family:'Playfair Display',serif; font-weight:900; transform:rotate(2deg); }
.ransom span:nth-child(8n+7){ background:var(--pink);   color:var(--ink);    font-family:'Abril Fatface',serif; transform:rotate(-5deg); }
.ransom span:nth-child(8n+8){ background:var(--gold);   color:var(--ink);    font-family:'Bevan',serif; transform:rotate(3deg); }
.ransom .sp{ background:none !important; box-shadow:none; width:.3em; }

/* ---------- Heavy geometric header (the "ABOUT THE" / "FROM" voice) ---------- */
.slab{
  font-family:var(--display);
  letter-spacing:.02em;
  line-height:.95;
  text-transform:uppercase;
}

/* ---------- Figure caption — lifted straight from the document ---------- */
.fig{
  font-family:var(--sans); font-size:.58rem; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase; color:var(--ink-45);
}

/* ---------- Cards: scalloped + airmail borders from the deck ---------- */
.scallop{
  background:#fff; padding:clamp(1.4rem,3vw,2.4rem);
  border:3px solid var(--red);
  outline:3px solid #fff; outline-offset:-9px;
  -webkit-mask-image:radial-gradient(circle at 8px 8px, #000 99%, transparent 100%);
  position:relative;
}
.scallop::before{
  content:''; position:absolute; inset:-3px;
  border:3px dashed var(--red); opacity:.55; pointer-events:none;
}

.airmail{
  background:var(--card); padding:clamp(1.4rem,3vw,2.2rem);
  border:10px solid transparent;
  border-image:repeating-linear-gradient(45deg, var(--red) 0 10px, #fff 10px 20px, var(--blue) 20px 30px, #fff 30px 40px) 10;
}

/* ---------- Tape / polaroid / tag ---------- */
.tape{ position:relative; }
.tape::before{
  content:''; position:absolute; top:-12px; left:50%;
  width:66px; height:22px; transform:translateX(-50%) rotate(-3deg);
  background:rgba(255,255,255,.55); border:1px solid rgba(38,36,33,.08);
  box-shadow:0 1px 3px rgba(38,36,33,.16); z-index:4;
}
.tape--corner::before{ top:-9px; left:-16px; transform:rotate(-10deg); }
.tape--right::before{ left:auto; right:-16px; transform:rotate(10deg); }

.polaroid{ background:#fff; padding:.6rem .6rem 2.2rem; box-shadow:0 18px 28px -12px rgba(38,36,33,.4), 0 2px 5px rgba(38,36,33,.16); }
.polaroid-cap{ font-family:var(--marker); font-size:1.2rem; color:var(--ink-70); text-align:center; padding-top:.45rem; }

.tag{
  display:inline-flex; align-items:center; gap:.5em;
  background:var(--cream); border:1px solid var(--ink); padding:.32em .85em;
  font-family:var(--marker); font-size:1.2rem; line-height:1; color:var(--red);
  box-shadow:2px 3px 0 rgba(38,36,33,.16);
}

.tilt-1{ transform:rotate(-3.2deg); } .tilt-2{ transform:rotate(2.4deg); }
.tilt-3{ transform:rotate(-1.6deg); } .tilt-4{ transform:rotate(3.4deg); }
.tilt-5{ transform:rotate(-2.2deg); } .tilt-6{ transform:rotate(1.4deg); }

.swatch{ box-shadow:2px 3px 0 rgba(38,36,33,.18); border:1px solid rgba(38,36,33,.12); }
.swatch--red{ background:var(--red); } .swatch--blue{ background:var(--blue); }
.swatch--orange{ background:var(--orange); } .swatch--green{ background:var(--green); }
.swatch--purple{ background:var(--purple); } .swatch--gold{ background:var(--gold); }

/* ---------- Masthead ---------- */
.masthead{ border-bottom:2px solid var(--ink); padding:.95rem 0; position:sticky; top:0; z-index:60; background:var(--paper); }
.masthead .wrap{ display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.masthead__name{ font-family:var(--display); font-size:1rem; letter-spacing:.06em; text-transform:uppercase; text-decoration:none; }
.masthead__meta{ font-family:var(--sans); font-weight:600; font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-70); display:flex; gap:1.5rem; align-items:center; }
.masthead__meta a{ text-decoration:none; }
.masthead__meta a:hover{ color:var(--red); }
.masthead__toggle{ display:none; font-family:var(--sans); font-weight:600; font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; background:none; border:1.5px solid var(--ink); padding:.42rem .75rem; cursor:pointer; }

@media (max-width: 760px){
  .masthead__meta{ position:absolute; top:100%; left:0; right:0; background:var(--paper); border-bottom:2px solid var(--ink); flex-direction:column; align-items:flex-start; gap:0; padding:0 var(--gutter); max-height:0; overflow:hidden; }
  .masthead__meta.is-open{ max-height:22rem; padding:.6rem var(--gutter) 1.1rem; }
  .masthead__meta a{ padding:.55rem 0; width:100%; border-bottom:var(--rule-soft); }
  .masthead__toggle{ display:inline-block; }
}

/* ---------- Cover ---------- */
.cover{ padding:clamp(2.5rem,5vw,4rem) 0 clamp(3rem,6vw,5rem); position:relative; overflow:hidden; }
.cover__grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,5vw,4rem); align-items:center; }
.cover__pre{ font-family:var(--display); font-size:clamp(1.6rem,4vw,3rem); text-transform:uppercase; line-height:.95; }
.cover__ransom{ font-size:clamp(2.2rem,6.4vw,5rem); margin:.35rem 0 .1rem; }
.cover__sub{ font-family:var(--sans); font-weight:600; font-size:.7rem; letter-spacing:.24em; text-transform:uppercase; color:var(--ink-70); margin-top:1.4rem; line-height:2; }
.cover__dek{ font-size:1rem; color:var(--ink-70); max-width:38ch; margin-top:1.2rem; line-height:1.7; }
.cover__opening{ opacity:0; transform:translateY(14px); animation:reveal .8s cubic-bezier(.2,.7,.2,1) .1s forwards; }
@keyframes reveal{ to{ opacity:1; transform:none; } }
.cover__plate img{ width:100%; }

/* Two overlapping polaroids from different projects, so the cover reads as
   range rather than as one body of work. */
.cover__stack{ position:relative; padding-bottom:2.5rem; }
.cover__stack .polaroid--main{ width:76%; }
.cover__stack .polaroid--tuck{ position:absolute; right:0; bottom:0; width:44%; z-index:3; }
@media (max-width:900px){
  .cover__stack{ display:flex; gap:1.1rem; align-items:flex-start; padding-bottom:0; }
  .cover__stack .polaroid--main,
  .cover__stack .polaroid--tuck{ position:static; width:50%; }
}

/* ---------- Contents ---------- */
.contents{ border-top:2px solid var(--ink); border-bottom:2px solid var(--ink); padding:1.6rem 0; }
.contents__label{ font-family:var(--sans); font-weight:700; font-size:.66rem; letter-spacing:.24em; text-transform:uppercase; color:var(--ink-45); margin-bottom:.9rem; }
.contents__list{ list-style:none; }
.contents__list li{ border-top:var(--rule-dashed); }
.contents__list li:first-child{ border-top:none; }
.contents__list a{ display:flex; align-items:baseline; gap:1rem; text-decoration:none; padding:.8rem 0; }
.contents__num{ font-family:var(--display); font-size:.9rem; color:var(--red); width:2.6rem; }
.contents__title{ flex:1; font-family:var(--display); font-size:clamp(1.05rem,2.2vw,1.5rem); text-transform:uppercase; }
.contents__list a:hover .contents__title{ color:var(--red); }
.contents__tag{ font-family:var(--sans); font-weight:600; font-size:.64rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-45); }

/* ---------- Sections ---------- */
.section{ padding:clamp(3.5rem,7vw,6rem) 0; position:relative; }
.section--rule{ border-top:2px solid var(--ink); }
.section__head{ display:flex; justify-content:space-between; align-items:flex-end; gap:1rem; margin-bottom:2.6rem; flex-wrap:wrap; }
.section__title{ font-family:var(--display); font-size:clamp(1.8rem,4vw,2.8rem); text-transform:uppercase; line-height:.95; }
.section__count{ font-family:var(--sans); font-weight:600; font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-45); }

/* ---------- Work moodboard ---------- */
.spreads{ display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(1.6rem,3vw,2.4rem) clamp(1rem,2.4vw,1.6rem); position:relative; }
.spread{ text-decoration:none; color:var(--ink); transition:transform .25s ease; }
.spread--a{ grid-column:span 7; }
.spread--b{ grid-column:span 5; margin-top:3.2rem; margin-left:-1.2rem; }
.spread--c{ grid-column:span 5; }
.spread--d{ grid-column:span 7; margin-top:2rem; margin-right:-1rem; }
.spread__frame{ aspect-ratio:4/5; position:relative; overflow:hidden; background:var(--paper-lt); }
.spread__frame img{ width:100%; height:100%; object-fit:cover; }
.spread__frame--ph::after{
  content:'Ph. — add image'; position:absolute; left:.75rem; bottom:.65rem;
  font-family:var(--sans); font-weight:600; font-size:.58rem; letter-spacing:.18em; text-transform:uppercase; color:rgba(242,234,216,.7);
}
.tone-a .spread__frame{ background:linear-gradient(155deg,var(--red),#3d100c); }
.tone-b .spread__frame{ background:linear-gradient(155deg,var(--blue),#131f3a); }
.tone-c .spread__frame{ background:linear-gradient(155deg,var(--green),#12251a); }
.tone-d .spread__frame{ background:linear-gradient(155deg,var(--purple),#241a33); }
.spread__cap{ padding-top:.7rem; }
.spread__kicker{ font-family:var(--sans); font-weight:600; font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-45); margin-bottom:.25rem; }
.spread__title{ font-family:var(--display); font-size:1.05rem; text-transform:uppercase; }
.spread:hover{ transform:translateY(-5px) rotate(0deg) !important; }

.flourish{ position:absolute; z-index:5; display:flex; align-items:center; gap:.45rem; }
.flourish--1{ top:-2.4rem; left:54%; }
.flourish--1 .swatch{ width:34px; height:34px; }
.flourish--1 .swatch:nth-child(1){ transform:rotate(-8deg); }
.flourish--1 .swatch:nth-child(2){ transform:rotate(6deg) translateX(-8px); }
.flourish--1 .swatch:nth-child(3){ transform:rotate(-4deg) translateX(-16px); }
.flourish--2{ bottom:-1.8rem; left:5%; font-family:var(--marker); font-size:1.35rem; color:var(--red); transform:rotate(-4deg); }
@media (max-width:900px){ .flourish{ display:none; } }

@media (max-width:900px){
  .cover__grid{ grid-template-columns:1fr; }
  .spreads{ grid-template-columns:1fr 1fr; gap:1.4rem; }
  .spread{ grid-column:span 1 !important; margin:0 !important; transform:none !important; }
}
@media (max-width:560px){ .spreads{ grid-template-columns:1fr; } }

/* ---------- Feature band — The Archive ---------- */
.feature-band{ background:var(--ink); color:var(--card); padding:clamp(3.5rem,7vw,6rem) 0; position:relative; overflow:hidden; }
.feature{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(2.5rem,6vw,4.5rem); align-items:center; }
.feature-band .fig{ color:rgba(242,234,216,.5); }
.feature__pre{ font-family:var(--display); font-size:clamp(1.3rem,3vw,2.2rem); text-transform:uppercase; color:var(--card); }
.feature__ransom{ font-size:clamp(1.9rem,5vw,3.6rem); margin:.3rem 0 1.2rem; }
.feature__dek{ color:rgba(242,234,216,.75); max-width:48ch; margin-bottom:1.6rem; line-height:1.75; }
.feature-band .btn{ border-color:var(--card); color:var(--card); }
.feature-band .btn:hover{ border-color:var(--gold); color:var(--gold); }
.feature__plate img{ width:100%; }

/* ---------- Process strip ---------- */
.process{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1rem; }
.process__step{ background:var(--card); border:1px solid rgba(38,36,33,.2); padding:1.1rem 1rem; }
.process__step:nth-child(2n){ transform:rotate(-1deg); }
.process__step:nth-child(2n+1){ transform:rotate(.8deg); }
.process__n{ font-family:var(--display); font-size:.8rem; color:var(--red); }
.process__t{ font-family:var(--display); font-size:.92rem; text-transform:uppercase; margin:.3rem 0 .35rem; }
.process__d{ font-size:.82rem; color:var(--ink-70); line-height:1.5; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.6em;
  font-family:var(--sans); font-weight:700; font-size:.72rem; letter-spacing:.18em; text-transform:uppercase;
  text-decoration:none; border-bottom:2.5px solid var(--ink); padding-bottom:.3em;
}
.btn:hover{ border-color:var(--red); color:var(--red); }

/* ---------- About ---------- */
.letter{ display:grid; grid-template-columns:.75fr 1.25fr; gap:clamp(2.5rem,6vw,4.5rem); align-items:start; }
.letter__panel{ aspect-ratio:3/4; background:var(--paper-lt); position:relative; overflow:hidden; }
.letter__panel img{ width:100%; height:100%; object-fit:cover; }
.letter__body p{ font-size:1rem; line-height:1.85; max-width:58ch; margin-bottom:1rem; color:var(--ink-70); }

/* ---------- Colophon ---------- */
.colophon{ border-top:2px solid var(--ink); padding:clamp(3rem,6vw,4.5rem) 0 2.4rem; }
.colophon__cta{ font-family:var(--display); font-size:clamp(1.6rem,4.4vw,3rem); text-transform:uppercase; line-height:1; max-width:20ch; margin-bottom:2.6rem; }
.colophon__cta a{ color:var(--red); text-decoration:none; box-shadow:inset 0 -4px 0 rgba(196,52,43,.3); }
.colophon__cta a:hover{ box-shadow:inset 0 -1em 0 rgba(232,185,63,.45); }
.colophon__grid{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:2rem; }
.colophon h3{ font-family:var(--sans); font-weight:700; font-size:.64rem; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-45); margin-bottom:.65rem; }
.colophon a, .colophon p{ font-size:.98rem; display:block; margin-bottom:.3rem; text-decoration:none; }
.colophon a:hover{ color:var(--red); }
.colophon__folio{ margin-top:2.4rem; padding-top:1.2rem; border-top:var(--rule-dashed); display:flex; justify-content:space-between; align-items:center; gap:1rem; font-family:var(--sans); font-weight:600; font-size:.64rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-45); }
@media (max-width:760px){ .colophon__grid{ grid-template-columns:1fr; } .letter{ grid-template-columns:1fr; } }

/* ---------- Archive project page ---------- */
.proj-hero{ padding:clamp(2.5rem,5vw,4rem) 0 2.5rem; }
.proj-hero__pre{ font-family:var(--display); font-size:clamp(1.5rem,4vw,2.8rem); text-transform:uppercase; line-height:.95; }
.proj-hero__ransom{ font-size:clamp(2.2rem,6.4vw,5rem); margin:.3rem 0 1rem; }
.proj-meta{ display:flex; flex-wrap:wrap; gap:2rem; margin-top:1.6rem; padding-top:1.4rem; border-top:var(--rule-dashed); }
.proj-meta h4{ font-family:var(--sans); font-weight:700; font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-45); margin-bottom:.3rem; }
.proj-meta p{ font-size:.95rem; }

.plate{ margin:2.4rem 0; }
.plate img{ width:100%; }
.plate figcaption{ margin-top:.6rem; }

.narrative{ max-width:62ch; margin:0 auto; }
.narrative p{ font-size:1.02rem; line-height:1.9; margin-bottom:1.15rem; color:var(--ink-70); }
.narrative h2{ font-family:var(--display); font-size:clamp(1.3rem,3vw,1.9rem); text-transform:uppercase; margin:2.6rem 0 1rem; color:var(--ink); }
.narrative blockquote{
  font-family:var(--display); font-size:clamp(1.2rem,3vw,1.8rem); text-transform:uppercase; line-height:1.15;
  color:var(--red); margin:2.4rem 0; padding-left:1.2rem; border-left:5px solid var(--red);
}

.participants{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:1.6rem; }
.participant__n{ font-family:var(--display); font-size:2.4rem; color:var(--red); line-height:1; }
.participant__name{ font-family:var(--display); font-size:1.05rem; text-transform:uppercase; margin:.3rem 0 .4rem; }
.participant p{ font-size:.88rem; color:var(--ink-70); line-height:1.6; }

.note{ border:var(--rule-dashed); padding:1.3rem; margin:2rem 0; font-size:.85rem; color:var(--ink-45); line-height:1.65; }