/* ALICE GIELEN — HUGO PORTFOLIO
   Fonts: DM Sans (display) · Montserrat (body) · DM Mono (mono) */

:root {
  --red:    rgba(227,38,0,.88);
  --ink-1:  rgba(0,0,0,.85); --ink-2: rgba(0,0,0,.75);
  --ink-3:  rgba(0,0,0,.6);  --ink-4: rgba(0,0,0,.4);
  --rule:   rgba(127,127,127,.4);
  --acc2:   rgba(227,38,0,.55);
  --f-display: "DM Sans",sans-serif;
  --f-body:    "Montserrat",sans-serif;
  --f-mono:    "DM Mono",monospace;
  --pad: 4rem; --gap: 2rem;
}

/* BASE */
*,*::before,*::after { box-sizing: border-box; }
html { font-size: 11.28px; -webkit-text-size-adjust: none; background: #e8e8e8; scrollbar-gutter: stable; }
body {
  margin: 0; padding: 0; background: #dbd9d9; font-family: var(--f-body);
  color: var(--ink-2); -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  animation: page-in .4s ease both;
}
@keyframes page-in  { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes page-out { to   { opacity: 0; transform: translateY(-8px); } }
a { color: inherit; }
a:active { opacity: .7; }
img { display: block; max-width: 100%; }
h1 { font-family: var(--f-display); font-weight: 400; font-size: 5rem; line-height: .9; color: var(--ink-1); margin: 0; }
h2 { font-family: var(--f-body); font-weight: 400; font-size: 1.8rem; line-height: 1.2; color: var(--ink-2); margin: 0; }
h2 a { color: var(--ink-2); text-decoration: none; }
hr { border: 0; height: 1px; background: var(--rule); margin: 0; }
p  { font-size: 1.5rem; color: var(--ink-2); line-height: 1.4; margin: 0; }
ul { margin: 0; padding: 0 0 0 2em; }
ol { margin: 0; padding: 0 0 0 2.5em; list-style-type: decimal-leading-zero; }
li { margin-bottom: .3em; }

/* WAVY UNDERLINE — global on hover + specificity overrides */
a:hover,
.nav-panel h2 a:hover,
.content-body a:hover,
.project-text a:hover,
.cv-contact a:hover,
.wk-text a:hover,
.link-item:hover,
.project-link:hover .project-name {
  text-decoration: underline var(--red) wavy 2px;
  text-underline-offset: .4em;
}
.btn-submit:hover { color: var(--ink-1); text-decoration: underline var(--red) wavy 2px; text-underline-offset: .4em; }

/* TEXT CLASSES */
.title        { font-family: var(--f-body); font-size: 6.5rem; font-weight: 700; color: #fff; line-height: 1.2; display: inline; background: var(--red); }
.title--small { font-size: 2.6rem; text-decoration: none; }
.description  { font-family: var(--f-display); font-size: 2.55rem; font-weight: 500; color: var(--ink-2); line-height: 1.2; display: block; }
.caption      { font-family: var(--f-mono); font-size: 1rem; font-weight: 400; color: var(--ink-3); line-height: 1.2; display: block; }
.wavy         { text-decoration: underline var(--red) wavy 2px; text-underline-offset: .4em; }
.title-name   { text-decoration: underline red wavy 2px; text-underline-offset: .4em; }

/* Page-level red heading — shared by portfolio pages and generic pages */
.page-heading,
.content-single h1 { font-family: Montserrat; font-size: 5.85rem; font-weight: 600; color: var(--red); line-height: 1; display: block; }
.page-heading      { margin-bottom: 2rem; }
.content-single h1 { margin-bottom: 2rem; }

/* Body text — shared across project pages and generic pages */
.content-body,
.project-text { font-family: var(--f-body); font-size: 1.5rem; color: var(--ink-2); line-height: 1.4; }
.content-body a,
.project-text a { color: var(--ink-2); text-decoration: underline; }
.project-text .description { margin: 2rem 0 0; }

/* LAYOUT */
.wrap         { max-width: calc(1200px ); margin-left: auto; margin-right: auto; padding-left: var(--pad); padding-right: var(--pad); width: 100%; }
.page-content { padding-top: var(--pad); padding-bottom: var(--pad); }
.content-single { max-width: 100%; }
.site-footer  { padding-top: 2rem; padding-bottom: 2rem; border-top: 1px solid var(--rule); }
.header-right { display: flex; align-items: center; gap: 2rem; }
.header-nav   { display: flex; align-items: center; gap: 2rem; }
.footer-link  { font-family: var(--f-mono); font-size: 1.3rem; color: var(--ink-2); text-decoration: none; letter-spacing: .04em; }
@media (max-width: 600px) { .header-nav { display: none; } }

/* NAV */
.nav-toggle { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.site-header { width: 100%; background: transparent; z-index: 150; }
.site-header--sticky { position: sticky; top: 0; transition: background .2s, border-color .2s; }
.site-header--sticky.is-scrolled { background: #fff; border-bottom: 1px solid var(--rule); }
.site-header__inner {
  padding-top: 2rem; padding-bottom: 2rem;
  display: flex; justify-content: space-between; align-items: center;
}
.menu-icon-btn { cursor: pointer; color: var(--ink-2); display: flex; align-items: center; line-height: 1; z-index: 300; }
.menu-icon-btn svg { width: 2.6rem; height: 2.6rem; }
.nav-overlay {
  position: fixed; inset: 0; z-index: 200; background: rgba(0,0,0,.25);
  display: flex; justify-content: flex-end; pointer-events: none; opacity: 0; transition: opacity .2s;
}
.nav-toggle:checked ~ .nav-overlay { opacity: 1; pointer-events: auto; }
.nav-backdrop { flex: 1; cursor: pointer; }
.nav-panel {
  background: #fff; width: 30%; min-width: 260px; padding: 2rem;
  display: flex; flex-direction: column; overflow-y: auto;
  transform: translateX(100%); transition: transform .2s;
}
.nav-toggle:checked ~ .nav-overlay .nav-panel { transform: translateX(0); }
.nav-panel-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; }
.nav-close { cursor: pointer; font-family: var(--f-display); font-size: 1.8rem; color: var(--ink-2); line-height: 1; user-select: none; }
.nav-panel hr { margin: 0.5rem 0; }
.nav-panel h2 { line-height: 1.6; }
.nav-panel h2 a { color: var(--ink-2); text-decoration: none; }

/* HOME HEADER */
.home .site-header { position: absolute; width: 100%; background: transparent; z-index: 10; }
.home .site-header__inner { align-items: flex-start; padding-top: var(--pad); }

/* PROJECT PAGE */
.project-layout { display: grid; grid-template-columns: 2fr 1fr; gap: 4rem; align-items: start; margin-top: 2rem; }
.project-images { align-self: start; }
.project-hero   { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; margin-bottom: 2rem; }
.project-recognition { list-style: none; padding: 0; margin: 0.5rem 0 2rem; display: flex; flex-direction: column; gap: 0.5rem; }
.project-recog-item  { font-family: var(--f-mono); font-size: 1.8rem; color: var(--red); line-height: 1; }
.project-recog-item a { color: var(--red); text-decoration: none; }
.project-text h1 { margin-top: 4rem; }
.project-text p  { margin-top: 0.5rem; }
.project-tag-list--page { margin-top: 4rem; padding-top: 2rem; padding-bottom: 2rem; border-top: 1px solid var(--rule); }

/* IMAGE GRID */
.image-grid { display: grid; gap: 2rem; }
.image-grid--2col { grid-template-columns: repeat(2,1fr); }
.image-grid--3col { grid-template-columns: repeat(3,1fr); }
.image-grid__item { margin: 0; }
.image-grid__item img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }

/* PROJECT COMPONENTS (shortcodes) */
.flow, .compare, .outcomes { display: grid; gap: 0.5rem; margin: 2rem 0 2rem; }
.flow, .compare { grid-template-columns: 1fr 1fr; }
.outcomes       { grid-template-columns: repeat(3,1fr); }
.step, .outcome, .card { border-top: 1px solid var(--rule); }
.step    { padding: 2rem; }
.outcome { padding: 2rem; }
.card    { padding: 2rem; }
.step:nth-child(1), .step:nth-child(2), .card--new { border-top-color: var(--red); }
.step-num  { font-family: var(--f-mono); font-size: 2.1rem; color: var(--red); line-height: 1; margin-bottom: 0.5rem; }
.step-sub  { font-family: var(--f-mono); font-size: 1.1rem; color: var(--ink-3); }
.quote     { margin: 2rem 0 2rem; padding: 0.5rem 2rem; border-left: 3px solid var(--red); font-family: var(--f-display); font-style: italic; font-weight: 300; font-size: 1.65rem; color: var(--ink-2); line-height: 1.5; }
.card-badge    { font-family: var(--f-mono); font-size: 1.1rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 0.5rem; }
.card--new .card-badge { color: var(--red); }
.card-title    { font-family: var(--f-display); font-weight: 600; font-size: 1.75rem; color: var(--ink-1); margin-bottom: 0.5rem; line-height: 1.2; }
.card-body     { font-family: var(--f-body); font-size: 1.5rem; color: var(--ink-2); line-height: 1.55; }
.tags          { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 2rem 0; }
.tag           { font-family: var(--f-mono); font-size: 1.3rem; color: var(--ink-2); border: 1px solid var(--rule); padding: 0.5rem; letter-spacing: .03em; }
.meanings      { display: flex; gap: 2rem; margin: 2rem 0 2rem; }
.meaning       { flex: 1; padding: 2rem 0.5rem 2rem; border-top: 1px solid var(--rule); text-align: center; }
.meaning-symbol{ font-size: 3rem; line-height: 1; margin-bottom: 0.5rem; color: var(--ink-1); }
.meaning-title { font-family: var(--f-display); font-weight: 600; font-size: 1.5rem; color: var(--ink-1); margin-bottom: 0.5rem; }
.meaning-sub   { font-family: var(--f-mono); font-size: 1rem; color: var(--ink-3); letter-spacing: .05em; text-transform: uppercase; }

/* LINKS SHORTCODE */
.links    { display: flex; flex-direction: column; gap: 0.5rem; margin: 2rem 0 2rem; }
.link-item{ display: inline-block; font-family: var(--f-mono); font-size: 1.1rem; color: var(--red); text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: .1em; width: fit-content; }

/* PROCESS GRID */
.process-grid { padding-bottom: 6rem; }
.proc-step   { padding: 1rem 0; border-bottom: 1px solid var(--rule); }
.proc-header { display: flex; align-items: baseline; gap: 2rem; margin-bottom: 0.5rem; }
.proc-header .step-num { flex-shrink: 0; }

/* SCROLL REVEAL */
.reveal-section > * {
  opacity: 0; transform: translateY(18px);
  transition: opacity .55s ease, transform .55s ease;
}
.reveal-section > *.is-visible { opacity: 1; transform: translateY(0); }
.page-content > .reveal-section { padding-top: 4rem; padding-bottom: 2rem; border-top: 1px solid var(--rule); }

/* RESPONSIVE (shared) */
@media (max-width: 900px) { .project-layout { grid-template-columns: 1fr; } }
@media (max-width: 600px) {
  html { font-size: 9px; }
  .nav-panel { width: 85%; }
  .image-grid--2col, .image-grid--3col { grid-template-columns: 1fr; }
  .flow, .compare { grid-template-columns: 1fr; }
  .outcomes { grid-template-columns: repeat(2,1fr); }
  .meanings { flex-direction: column; }
}

/* ABOUT / CV */
.cv-wrap {
  display: grid; grid-template-columns: 280px 1fr;
  color: var(--ink-1); font-family: var(--f-display); font-weight: 400; line-height: 1.6;
}
.cv-left {
  position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column; padding: 2rem 2rem 2rem 0;
  border-right: 1px solid var(--rule);
}
.cv-photo { width: 100%; aspect-ratio: 3/4; object-fit: cover; object-position: top center; display: block; margin-bottom: 2rem; }
.cv-photo-placeholder {
  width: 100%; aspect-ratio: 3/4; background: var(--rule); margin-bottom: 2rem;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--f-mono); font-size: 1rem; color: var(--ink-4); letter-spacing: .1em; text-transform: uppercase;
}
.cv-subtitle  { font-family: var(--f-mono); font-size: 1rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 2rem; }
.cv-contact   { font-family: var(--f-mono); font-size: 1.1rem; color: var(--ink-3); line-height: 2.1; }
.cv-contact a { color: var(--red); text-decoration: none; }
.cv-langs     { margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--rule); }
.cv-meta-label{ font-family: var(--f-mono); font-size: 1rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-4); margin-bottom: 0.5rem; }
.lang-row     { display: flex; justify-content: space-between; font-family: var(--f-mono); font-size: 1.1rem; color: var(--ink-3); padding: 0.5rem 0; }
.cv-right     { padding: 2rem 0 6rem 4rem; }
.cv-intro     { font-family: var(--f-display); font-size: 1.5rem; font-weight: 300; line-height: 1.45; padding-bottom: 2rem; margin-bottom: 2rem; border-bottom: 1px solid var(--rule); }
.cv-section   { margin-bottom: 2rem; padding-bottom: 2rem; border-bottom: 1px solid var(--rule); }
.cv-section:last-child { border-bottom: none; }
.cv-wrap .card-badge { font-family: var(--f-mono); font-size: 1rem; letter-spacing: .22em; color: var(--red); margin-bottom: 2rem; }

/* Shared: item title (CV timeline role + education degree) */
.tl-role, .edu-degree { font-family: var(--f-display); font-size: 1.5rem; font-weight: 600; line-height: 1.2; color: var(--ink-1); }
.edu-degree { margin-bottom: 0.5rem; }

/* Shared: secondary mono label — date, year, term */
.tl-date, .award-year, .edu-years { font-family: var(--f-mono); font-size: 1rem; color: var(--ink-4); }
.tl-date   { white-space: nowrap; }
.award-year{ margin-bottom: 0.5rem; }
.edu-years { margin-bottom: 0.5rem; }

/* Shared: tertiary mono label — org, uni, sub-project */
.tl-org, .edu-uni, .wk-project, .award-sub { font-family: var(--f-mono); font-size: 1.1rem; color: var(--ink-3); }
.tl-org    { margin-bottom: 0.5rem; }
.edu-uni   { margin-bottom: 0.5rem; }
.wk-project{ margin-top: 2px; }
.award-sub { line-height: 1.4; }

/* Shared: body description text — timeline desc + education body */
.tl-desc, .edu-body { font-size: 1.35rem; color: var(--ink-3); line-height: 1.5; }

/* timeline structure */
.tl-item { display: grid; grid-template-columns: 8px 1fr; gap: 0 2rem; margin-bottom: 2rem; }
.tl-item:last-child { margin-bottom: 0; }
.tl-line  { display: flex; flex-direction: column; align-items: center; padding-top: 0.5rem; }
.tl-dot   { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-4); flex-shrink: 0; }
.tl-dot.live { background: var(--red); }
.tl-thread   { width: 1px; flex: 1; background: var(--rule); margin-top: 4px; min-height: 1.5rem; }
.tl-item:last-child .tl-thread { display: none; }
.tl-body  { padding-bottom: 0.5rem; }
.tl-top   { display: flex; align-items: baseline; justify-content: space-between; gap: 2rem; margin-bottom: 0.5rem; }
.cv-wrap .tags { gap: 0.5rem; margin-top: 0.5rem; margin-bottom: 0; }
.cv-wrap .tag  { font-family: var(--f-mono); font-size: 1rem; letter-spacing: .07em; text-transform: uppercase; padding: 0.5rem; border-color: var(--rule); color: var(--ink-3); }
.cv-wrap .tag.solid { background: var(--ink-1); color: #fff; border-color: var(--ink-1); }
.cv-wrap .tag.acc   { border-color: var(--red); color: var(--red); }

/* education */
.edu-grid   { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.edu-card   { border: 1px solid var(--rule); padding: 2rem; position: relative; }
.edu-card::before { content: ''; position: absolute; top: 0; left: 0; width: 3px; height: 100%; background: var(--red); }

/* skills */
.skills-box { border: 1px solid var(--rule); display: grid; grid-template-columns: repeat(4,1fr); }
.skill-col  { padding: 2rem; border-right: 1px solid var(--rule); }
.skill-col:last-child { border-right: none; }
.skill-col h4 { font-family: var(--f-mono); font-size: 1.1rem; letter-spacing: .16em; text-transform: uppercase; color: var(--red); margin-bottom: 0.5rem; }
.skill-col ul { list-style: none; padding: 0; margin: 0; }
.skill-col ul li { font-size: 1.1rem; color: var(--ink-3); line-height: 1.8; }

/* awards */
.award-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 0.5rem; }
.award-card { border: 1px solid var(--rule); padding: 0.5rem; position: relative; }
.award-card.hi { border-color: var(--acc2); }
.award-card.hi::after { content: '✦'; position: absolute; top: .55rem; right: .7rem; font-size: 1.1rem; color: var(--acc2); }
.award-title { font-size: 1.5rem; font-weight: 500; line-height: 1.3; margin-bottom: 0.5rem; color: var(--ink-1); }

@media (max-width: 740px) {
  .cv-wrap { grid-template-columns: 1fr; }
  .cv-left { position: static; height: auto; border-right: none; border-bottom: 1px solid var(--rule); padding: 2rem 0; }
  .cv-right { padding: 2rem 0; }
  .edu-grid { grid-template-columns: 1fr; }
  .skills-box { grid-template-columns: 1fr 1fr; }
  .skill-col:nth-child(2) { border-right: none; }
  .skill-col:nth-child(3) { border-top: 1px solid var(--rule); border-right: 1px solid var(--rule); }
  .skill-col:nth-child(4) { border-top: 1px solid var(--rule); border-right: none; }
  .award-grid { grid-template-columns: 1fr 1fr; }
}

/* WORKSHOPS */
.wk-outer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6rem; align-items: start; margin-top: 2rem; }
.wk-outer-grid .description { margin-bottom: 2rem; }
.wk-timeline { position: relative; }
.wk-timeline::before { content: ''; position: absolute; left: calc(4rem + 1rem); top: 0; bottom: 0; width: .5px; background: var(--rule); }
.wk-year-group { margin-bottom: 2rem; }
.wk-entry { display: grid; grid-template-columns: 4rem 10rem 1fr; gap: 0 2rem; align-items: baseline; padding: 0.5rem 0; border-bottom: .5px solid transparent; transition: border-color .15s; }
.wk-entry:hover { border-bottom-color: var(--rule); }
.wk-year       { font-family: var(--f-mono); font-size: 1rem; color: var(--ink-3); white-space: nowrap; padding-top: 3px; }
.wk-year--hidden { visibility: hidden; }
.wk-type       { display: flex; align-items: flex-start; justify-content: flex-end; padding-top: 3px; }
.wk-tag        { font-family: var(--f-mono); font-size: .85rem; letter-spacing: .04em; text-transform: uppercase; padding: 0.5rem; border-radius: 3px; white-space: nowrap; }
.wk-tag--exhibition  { background: #fef3c7; color: #92400e; }
.wk-tag--award       { background: #1c1917; color: #fff; }
.wk-tag--publication { background: #dbeafe; color: #1d4ed8; }
.wk-tag--fashion     { background: #fce7f3; color: #be185d; }
.wk-title { font-family: var(--f-body); font-size: 1.35rem; color: var(--ink-1); line-height: 1.4; }
.wk-text  { font-family: var(--f-body); font-size: 1.5rem; color: var(--ink-2); line-height: 1.75; margin-bottom: 2rem; }
.wk-text p { margin-bottom: 2rem; }
.wk-text a { color: var(--ink-1); text-decoration: none; border-bottom: .5px solid var(--ink-1); padding-bottom: 1px; }
.wk-photos  { list-style: none; display: grid; grid-template-columns: 1fr 1fr 1fr; margin: 0; gap: 6px; }
.wk-photos figure { margin: 0; overflow: hidden; border-radius: 6px; aspect-ratio: 4/3; }
.wk-photos img    { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s; }
.wk-photos figure:hover img { transform: scale(1.03); }

@media (max-width: 900px) { .wk-outer-grid { grid-template-columns: 1fr; gap: 4rem; } .wk-timeline::before { display: none; } }
@media (max-width: 600px) { .wk-entry { grid-template-columns: 1fr; gap: 4px; padding: 0.5rem 0; } .wk-year--hidden { display: none; } }

/* CONTACT FORM */
.contact-form { display: flex; flex-direction: column; gap: 2rem; margin-top: 2rem; max-width: 560px; }
.form-field   { display: flex; flex-direction: column; gap: 0.5rem; }
.form-field input, .form-field textarea {
  font-family: var(--f-body); font-size: 1.5rem; color: var(--ink-1); background: #fff;
  border: 0; border-bottom: 1px solid var(--ink-4); padding: 0.5rem 0; width: 100%;
  outline: none; transition: border-color .15s; appearance: none; border-radius: 0;
}
.form-field input:focus, .form-field textarea:focus { border-bottom-color: var(--ink-1); }
.form-field input::placeholder, .form-field textarea::placeholder { color: var(--ink-4); }
.form-field textarea { resize: vertical; min-height: 9rem; line-height: 1.4; }
.btn-submit {
  font-family: var(--f-mono); font-size: 1.25rem; font-weight: 500; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-3); background: none; border: none;
  padding: 0; cursor: pointer; appearance: none; align-self: flex-start;
}

/* HOMEPAGE V2 */
.stage {
  display: grid; grid-template-columns: 1fr 2fr; align-items: center; gap: 6rem;
  padding: 6rem 0;
}
.stage-h1    { font-family: var(--f-body); font-weight: 300; font-size: clamp(4rem,7vw,7rem); line-height: .96; letter-spacing: -.01em; color: var(--ink-1); margin-bottom: 2rem; }
.stage-h1 em { font-style: italic; }
.hero-byline { border-top: 1px solid var(--rule); padding-top: 2rem; max-width: 220px; font-size: 1.8rem; line-height: 1.6; letter-spacing: .12em; text-transform: uppercase; }
.hero-scroll {
  display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 2rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3);
  text-decoration: underline var(--red) wavy 2px; text-underline-offset: .4em;
}
.hero-scroll:hover { color: var(--ink-1); }
.hero-scroll svg { width: 1.2rem; height: 1.2rem; flex-shrink: 0; animation: hs-bounce 2s 2s ease-in-out infinite; }
@keyframes hs-bounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(4px)} }

/* collage */
.collage { position: relative; height: min(680px,88svh); }
.collage .card {
  position: absolute; overflow: visible; cursor: pointer; opacity: 0; border-top: none; padding: 0;
  transition: transform .35s cubic-bezier(.23,1,.32,1); will-change: transform; text-decoration: none;
}
.collage .card-img { width: 100%; height: 100%; overflow: hidden; }
.collage .card:hover { z-index: 20 !important; transform: rotate(0deg) scale(1.04) !important; text-decoration: none; }
/* Shared: full-cover fill used by collage cards and hover thumbnails */
.collage .card img,
.project-thumb img { width: 100%; height: 100%; object-fit: cover; }
.collage .card img { transition: transform .5s cubic-bezier(.23,1,.32,1); }
.collage .card:hover img { transform: scale(1.04); }

/* Card label — full-height white strip to the LEFT of the card, text anchored at bottom */
.collage .card-label {
  position: absolute; right: 100%; top: 0; bottom: 0;
  width: 16rem; background: #fff; z-index: 2;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 1rem; gap: 0.5rem; overflow: hidden; pointer-events: none;
  opacity: 0; transition: opacity .25s;
}
.collage .card:hover .card-label           { opacity: 1; }
.collage .card-label .project-name         { font-size: 1.68rem; line-height: 1.2; }
.collage .card-label .project-recog-label  { font-size: 1.2rem; letter-spacing: .04em; white-space: normal; overflow-wrap: break-word; }
.collage .card-label .card-intro           { font-family: var(--f-body); font-size: 1.2rem; color: var(--ink-2); line-height: 1.4; }
.collage .card-label .card-tag-list        { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.collage .card-label .project-tag          { font-size: 1.1rem; padding: 0.25rem 0.4rem; }

.card-1 { width:60%; height:64%; top:0%;    right:0%;  transform:rotate(1.5deg);  z-index:5; animation:ci1 .7s .10s cubic-bezier(.23,1,.32,1) forwards; }
.card-2 { width:46%; height:52%; top:30%;   left:7%;   transform:rotate(-50deg); z-index:8; animation:ci2 .7s .25s cubic-bezier(.23,1,.32,1) forwards; }
.card-3 { width:40%; height:44%; top:0%;    left:6%;   transform:rotate(-.6deg);  z-index:3; animation:ci3 .7s .40s cubic-bezier(.23,1,.32,1) forwards; }
.card-4 { width:52%; height:46%; bottom:0%; right:1%;  transform:rotate(-1.8deg); z-index:4; animation:ci4 .7s .18s cubic-bezier(.23,1,.32,1) forwards; }
.card-5 { width:40%; height:42%; bottom:3%; left:24%;  transform:rotate(2.5deg);  z-index:6; animation:ci5 .7s .50s cubic-bezier(.23,1,.32,1) forwards; }
.card-6 { width:34%; height:37%; top:28%;   left:36%;  transform:rotate(1.0deg);  z-index:7; animation:ci6 .7s .35s cubic-bezier(.23,1,.32,1) forwards; }
@keyframes ci1{from{opacity:0;transform:rotate(1.5deg)  translateY(24px)}to{opacity:1;transform:rotate(1.5deg)  translateY(0)}}
@keyframes ci2{from{opacity:0;transform:rotate(-2.5deg) translateY(24px)}to{opacity:1;transform:rotate(-2.5deg) translateY(0)}}
@keyframes ci3{from{opacity:0;transform:rotate(-.6deg)  translateY(24px)}to{opacity:1;transform:rotate(-.6deg)  translateY(0)}}
@keyframes ci4{from{opacity:0;transform:rotate(-1.8deg) translateY(24px)}to{opacity:1;transform:rotate(-1.8deg) translateY(0)}}
@keyframes ci5{from{opacity:0;transform:rotate(2.5deg)  translateY(24px)}to{opacity:1;transform:rotate(2.5deg)  translateY(0)}}
@keyframes ci6{from{opacity:0;transform:rotate(1.0deg)  translateY(24px)}to{opacity:1;transform:rotate(1.0deg)  translateY(0)}}

/* project list */
.projects-section { padding: 0 0 6rem; }
.section-rule  { margin-bottom: 4rem; }
.section-label { margin-bottom: 2rem; letter-spacing: .14em; text-transform: uppercase; }
.project-list  { list-style: none; padding: 2rem 0; margin: 0; }
.project-item  { border-top: 1px solid var(--rule); position: relative; z-index: 0; }
.project-item:last-child { border-bottom: 1px solid var(--rule); }
.project-item:hover { z-index: 1; }
.project-link  {
  display: grid; grid-template-columns: 1fr; align-items: center;
  gap: 2rem; padding: 2rem 0; color: var(--ink-1); text-decoration: none; position: relative;
}
.project-link:hover { text-decoration: none; }
.project-link:hover .project-name { letter-spacing: .04em; }
.project-link:hover .project-thumb { opacity: 1; transform: translateY(-0%) scale(1); }
.project-info { display: flex; align-items: baseline; gap: 2rem; }
.project-name { font-family: var(--f-body); font-weight: 400; font-size: 2.4rem; line-height: 1; color: var(--ink-1); flex-shrink: 0; transition: letter-spacing .3s; }
.project-tag-list { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.project-recog-label { font-family: var(--f-mono); font-size: 1.8rem; color: var(--red); letter-spacing: .06em; white-space: nowrap; }
.project-tag  { font-family: var(--f-mono); font-size: 1.3rem; color: var(--ink-3); border: 1px solid var(--rule); padding: 0.5rem; border-radius: 2px; line-height: 1.4; letter-spacing: .04em; white-space: nowrap; text-decoration: none !important; }
.project-tag:hover,
a.project-tag:hover { text-decoration: none !important; opacity: .75; }
/* tag colour coding — uses root palette */
.project-tag[data-tag="tool-building"]         { background: var(--red);   color: #fff; border-color: var(--red); }
.project-tag[data-tag="craft + code"]           { background: var(--ink-1); color: #fff; border-color: var(--ink-1); }
.project-tag[data-tag="traditional process"]    { background: var(--ink-3); color: #fff; border-color: var(--ink-3); }
.project-tag[data-tag="material research"]      { color: var(--ink-1); border-color: var(--ink-1); }
.project-tag[data-tag="wearable"]               { color: var(--red); border-color: var(--acc2); }
.project-tag[data-tag="sustainable"]            { color: var(--red); border-color: var(--acc2); }
.project-thumb {
  position: absolute; right: 0; top: 0; transform: translateY(-90%) scale(.96);
  width: 340px; overflow: hidden; opacity: 0;
  transition: opacity .3s, transform .3s; z-index: 5; pointer-events: none;
}
.project-thumb img { height: 240px; }
.thumb-tags {
  background: #fff; padding: 0.5rem; border-top: 1px solid var(--rule);
  display: flex; flex-wrap: wrap; gap: 0.5rem;
}

@media (max-width: 860px) {
  .stage { grid-template-columns: 1fr; padding: 4rem 0; gap: 4rem; }
  .collage { height: 400px; }
  .project-thumb { width: 240px; }
  .project-thumb img { height: 160px; }
}
@media (max-width: 600px) {
  .project-thumb, .project-tag-list { display: none; }
  .collage { height: 280px; }
}