/* ============================================================
   ISELA RAMIREZ — Portfolio v4
   Aesthetic reference: fromluke.com (massive condensed display,
   monospace utility, asterisk-footnote system, colored project
   blocks). Palette adapted to Isela's warm-cream + gold.
   ============================================================ */

/*
  Type stack — Sofia Sans everywhere (free Google Fonts substitute for Sofia Pro).
  Display = Sofia Sans 900 uppercase. Body = Sofia Sans 400–600. Mono utility = JetBrains Mono.
  To upgrade to real Sofia Pro from Adobe Fonts: see README.
*/
@import url('https://fonts.googleapis.com/css2?family=Sofia+Sans:ital,wght@0,300..900;1,300..900&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* palette */
  --bg:        #EFEAE0;   /* warm cream */
  --bg-deep:   #1A1815;   /* near-black, footer + text */
  --ink:       #1A1815;
  --ink-soft:  #4A453E;
  --rule:      #1A1815;
  --gold:      #C9A961;
  --gold-deep: #A88840;

  /* project block colors */
  --block-gold:   #C9A961;
  --block-wine:   #6B2D3F;
  --block-teal:   #2D6F6A;
  --block-navy:   #2A2D52;
  --block-rose:   #B07E7A;
  --block-ink:    #1A1815;

  /* type */
  --display: 'Sofia Sans', 'Sofia Pro', system-ui, sans-serif;
  --body:    'Sofia Sans', 'Sofia Pro', system-ui, sans-serif;
  --mono:    'JetBrains Mono', ui-monospace, monospace;

  /* metrics */
  --max:  1640px;
  --pad:  clamp(16px, 2.4vw, 36px);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { 
  scroll-behavior: smooth; 
  /* Puffer für den fixierten Header (81px Header + ca. 40px Luft zum Atmen) */
  scroll-padding-top: 90px; 
}

/* ============================================================
   CUSTOM CURSOR — typographic asterisk, gold, sitewide
   Six-armed asterisk (matches the * in *WORK nav glyph).
   Falls back to default if SVG cursors aren't supported.
   ============================================================ */
*, *::before, *::after {
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'><g transform='translate(14 14)' stroke='%23A88840' stroke-width='3' stroke-linecap='round'><line x1='0' y1='-9' x2='0' y2='9'/><line x1='-7.8' y1='-4.5' x2='7.8' y2='4.5'/><line x1='-7.8' y1='4.5' x2='7.8' y2='-4.5'/></g></svg>") 14 14, auto;
}
a, a *, button, button *, [role='button'], input[type='submit'], .project, .project *, .cs-tile, .cs-tile * {
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='34' height='34' viewBox='0 0 34 34'><g transform='translate(17 17)' stroke='%23C9A961' stroke-width='3.6' stroke-linecap='round'><line x1='0' y1='-11' x2='0' y2='11'/><line x1='-9.5' y1='-5.5' x2='9.5' y2='5.5'/><line x1='-9.5' y1='5.5' x2='9.5' y2='-5.5'/></g></svg>") 17 17, pointer;
}
input[type='text'], input[type='email'], textarea {
  cursor: text;
}

body {
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

a { color: inherit; text-decoration: none; }

em { font-style: italic; }

/* ============================================================
   HEADER — minimal, fixed, monospace nav
   ============================================================ */
header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 22px var(--pad);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--bg-deep);
  transition: padding .25s ease, border-color .25s ease;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
header.scrolled {
  background: var(--bg-deep);
  padding: 14px var(--pad);
}

header .name {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--bg);
  display: inline-flex;
  align-items: center;
}
header .name .logo-img {
  height: 36px; /* Von 72px auf die Hälfte reduziert */
  width: auto;
  display: block;
  transition: height .25s ease;
}
header.scrolled .name .logo-img { 
  height: 28px; /* Von 56px auf die Hälfte reduziert */
}

header nav ul {
  list-style: none;
  display: flex;
  gap: 36px;
}
header nav a {
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(239, 234, 224, 0.78);
  padding: 4px 0;
  position: relative;
  transition: color .2s ease;
}
header nav a:hover { color: var(--bg); }
header nav a::before {
  content: '*';
  color: transparent;
  margin-right: 2px;
  transition: color .2s ease;
}
header nav a:hover::before,
header nav a.active::before { color: var(--gold); }
header nav a.active { font-weight: 600; color: var(--bg); }

/* ============================================================
   HEADER - NEXT PROJECT ARROW
   ============================================================ */
.header-nav-wrap {
  display: flex;
  align-items: center;
  gap: 40px;
}

.next-project-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 18px;
  font-weight: 700;
  text-decoration: none;
  transition: transform .3s ease, background-color .3s ease;
}

.next-project-arrow:hover {
  transform: translateX(4px); /* Slides right on hover */
  background: var(--gold-deep);
}

/* Responsive adjustment for smaller screens */
@media (max-width: 520px) {
  .header-nav-wrap { gap: 16px; }
  .next-project-arrow { width: 30px; height: 30px; font-size: 14px; }
}

/* ============================================================
   HERO — massive display, asterisk footnote
   ============================================================ */
.hero {
  padding: 180px var(--pad) 80px;
  max-width: var(--max);
  margin: 0 auto;
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 40px;
  align-items: start;
}

.hero h1 {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(64px, 13vw, 220px);
  line-height: 0.88;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--ink);
  max-width: 12ch;
}
.hero h1 .star {
  color: var(--gold-deep);
  font-weight: 800;
}
.hero h1 em {
  font-style: italic;
  font-weight: 800;
  background: linear-gradient(135deg, #B8902F 0%, #E6C97A 35%, #8B6B1F 70%, #D4AF6A 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-foot {
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.6;
  color: var(--ink);
  max-width: 240px;
  align-self: end;
  padding-bottom: 18px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.hero-foot::before {
  content: '*';
  color: var(--gold-deep);
  margin-right: 4px;
}

/* ============================================================
   MARQUEE — capabilities scroller
   ============================================================ */
.marquee {
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 18px 0;
  overflow: hidden;
  position: relative;
  /* Von 130px auf 95px reduziert, damit es perfekt zum neuen Header passt */
  margin-top: 81px; 
}

.marquee-track {
  display: flex;
  gap: 56px;
  white-space: nowrap;
  animation: marquee 38s linear infinite;
  width: max-content;
}
.marquee-track span {
  font-family: var(--display);
  font-weight: 800;
  font-size: 28px;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
}
.marquee-track span::before {
  content: '✦';
  color: var(--gold-deep);
  font-size: 14px;
  margin-right: 56px;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ============================================================
   SECTION LABEL — broadsheet-style annotation row
   ============================================================ */
.section-label {
  max-width: var(--max);
  margin: 0 auto;
  /* Das Padding links und rechts auf 6px setzen, passend zum 6px Spacing der Kacheln */
  padding: 80px 6px 24px 6px; 
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink);
  scroll-margin-top: 95px;
}

.section-label .left::before {
  content: '*';
  color: var(--gold-deep);
  margin-right: 4px;
}

/* Compensates for the section-label's own padding-top so the anchor click
   lands the visible "Case Studies" label below the fixed header with
   a bit of breathing room above it. */
#case-studies {
  scroll-margin-top: -30px;
}

/* ============================================================
   WORK GRID — colored project blocks
   ============================================================ */
.work-grid {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  /* Rand links und rechts von 10px auf 8px reduziert */
  padding: 0 4px 100px 4px; 
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

@media (max-width: 880px) {
  .work-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .work-grid { grid-template-columns: 1fr; }
}

.project {
  display: block;
  position: relative;
}

.project-tile-link {
  display: block;
  transition: transform .35s ease;
}
.project-tile-link:hover {
  transform: translateY(-4px);
}

.project-block {
  width: 100%;
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(24px, 3vw, 44px);
  position: relative;
  overflow: hidden;
  transition: box-shadow .35s ease;
}
.project-tile-link:hover .project-block {
  box-shadow: 0 22px 48px rgba(26, 24, 21, 0.24);
}
.project-block.gold { background: var(--block-gold); }
.project-block.wine { background: var(--block-wine); }
.project-block.teal { background: var(--block-teal); }
.project-block.navy { background: var(--block-navy); }
.project-block.rose { background: var(--block-rose); }
.project-block.ink  { background: var(--block-ink); }
.project-block.sand { background: #C9B89A; }
.project-block.olive { background: #6B7A4E; }
.project-block.plum { background: #4A2D4A; }
.project-block.cream { background: #DDD3C0; }

/* decorative giant asterisk drifting in the background of each tile */
.project-block::after {
  content: '*';
  position: absolute;
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(180px, 24vw, 380px);
  line-height: 0.7;
  color: rgba(255, 255, 255, 0.07);
  pointer-events: none;
  user-select: none;
}
.project-block.gold::after,
.project-block.sand::after,
.project-block.cream::after { color: rgba(26, 24, 21, 0.08); }

/* vary the position of the decorative asterisk per tile so they don't feel uniform */
.project:nth-child(1) .project-block::after { top: -8%;  right: -6%; }
.project:nth-child(2) .project-block::after { bottom: -22%; left: -8%; transform: rotate(15deg); }
.project:nth-child(3) .project-block::after { top: -16%; left: -6%; transform: rotate(-12deg); }
.project:nth-child(4) .project-block::after { bottom: -16%; right: -10%; }
.project:nth-child(5) .project-block::after { top: -10%; left: 38%; }
.project:nth-child(6) .project-block::after { bottom: -18%; right: -4%; transform: rotate(20deg); }
.project:nth-child(7) .project-block::after { top: -12%; left: -6%; }
.project:nth-child(8) .project-block::after { bottom: -16%; right: -8%; transform: rotate(-8deg); }
.project:nth-child(9) .project-block::after { top: -8%; right: -4%; }

/* small project index numeral, top-left */
.project-block .index {
  position: absolute;
  top: clamp(12px, 1.8vw, 20px);
  left: clamp(14px, 2vw, 22px);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  z-index: 2;
}
.project-block.gold .index,
.project-block.sand .index,
.project-block.cream .index { color: rgba(26, 24, 21, 0.55); }

.project-block .placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* simplified — just the project name centered in the block */
.project-block .device {
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0;
  background: none;
  border: none;
  aspect-ratio: auto;
  z-index: 1;
}
.project-block.gold .device,
.project-block.sand .device,
.project-block.cream .device {
  background: none;
  border: none;
}

.project-block .device .status {
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.project-block.gold .device .status,
.project-block.sand .device .status,
.project-block.cream .device .status { color: rgba(26, 24, 21, 0.7); }

.project-block .device .status .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  animation: pulse 2.2s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.25); }
}

.project-block .device h3 {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(28px, 3.2vw, 44px);
  line-height: 0.92;
  text-transform: uppercase;
  letter-spacing: -0.015em;
  color: rgba(255, 255, 255, 0.97);
}
.project-block.gold .device h3,
.project-block.sand .device h3,
.project-block.cream .device h3 { color: var(--ink); }

/* italic gold accent variant on the project name for visual variety */
.project-block .device h3 em {
  font-style: italic;
  font-weight: 900;
  background: linear-gradient(135deg, #B8902F 0%, #E6C97A 40%, #8B6B1F 75%, #D4AF6A 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.project-arrow {
  position: absolute;
  top: clamp(14px, 2vw, 22px);
  right: clamp(14px, 2vw, 22px);
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--gold);
  display: flex; align-items: center; justify-content: center;
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
  z-index: 3;
}
.project-block.gold .project-arrow,
.project-block.sand .project-arrow,
.project-block.cream .project-arrow { background: var(--ink); color: var(--gold); }

/* hide the old meta strip per Isela's reference layout */
.project-meta { display: none; }

/* ============================================================
   PROJECT TILE — full-bleed background video
   ============================================================ */
.project-tile-link {
  display: block;
  height: 100%;
}

/* Video fills the entire colored block */
.tile-bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
}

/* Semi-transparent colour overlay keeps brand colour + text legible */
.tile-video-overlay {
  position: absolute;
  inset: 0;
  background: rgba(26, 24, 21, 0.65);
  z-index: 1;
}

/* Lift device content and labels above the overlay */
.tile-bg-video ~ .tile-video-overlay ~ .device { z-index: 2; position: relative; }
.project-block .index    { z-index: 3; }
.project-block .project-arrow { z-index: 4; }

/* forthcoming placeholder tiles */
.project-block.forthcoming .device h3 {
  font-size: clamp(10px, 1vw, 12px);
  font-family: var(--mono);
  font-weight: 500;
  letter-spacing: 0.18em;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
}
.project-block.forthcoming.sand .device h3,
.project-block.forthcoming.cream .device h3 {
  color: rgba(26, 24, 21, 0.45);
}
.project-block.forthcoming .device h3::before {
  content: '*  ';
  color: var(--gold-deep);
}
.project-block.forthcoming .project-arrow,
.project-block.forthcoming .device .status { display: none; }

/* ============================================================
   CASE STUDIES — 2x2 grid of iframe previews, click to fullscreen
   ============================================================ */
.case-studies {
  max-width: var(--max);
  margin: 0 auto;
  /* Rand links und rechts ebenfalls auf 8px reduziert */
  padding: 0 6px 120px 6px; 
}
.cs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.cs-tile {
  display: block;
  background: transparent;
  border: 0;
  transition: transform .35s ease;
  cursor: pointer;
}
.cs-tile:hover {
  transform: translateY(-4px);
}

.cs-tile .cs-tile-media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--bg-deep);
  border: 1px solid rgba(26, 24, 21, 0.18);
  transition: box-shadow .35s ease;
}
.cs-tile:hover .cs-tile-media {
  box-shadow: 0 18px 40px rgba(26, 24, 21, 0.18);
}
.cs-tile video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
}

/* title metadata under each tile — her display + gold italic style */
.cs-tile .cs-tile-meta {
  padding: 18px 2px 0;
  color: var(--ink);
}
.cs-tile .cs-tile-meta h3 {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(11px, 1.1vw, 18px);
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cs-tile .cs-tile-meta h3 em {
  font-style: italic;
  background: linear-gradient(135deg, #B8902F 0%, #E6C97A 40%, #8B6B1F 75%, #D4AF6A 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.cs-tile .cs-tile-meta .cs-scope {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-soft);
}
.cs-tile .cs-tile-meta .cs-scope::before {
  content: '*  ';
  color: var(--gold-deep);
}

.cs-tile .cs-expand {
  position: absolute;
  top: 18px; right: 18px;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
  z-index: 2;
  transition: transform .3s ease;
}
.cs-tile:hover .cs-expand { transform: rotate(-12deg) scale(1.08); }

@media (max-width: 720px) {
  .cs-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   CASE STUDY MODAL — fullscreen popup with iframe
   ============================================================ */
.cs-modal {
  position: fixed;
  inset: 0;
  background: rgba(26, 24, 21, 0.96);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 60px clamp(20px, 4vw, 60px) 40px;
}
.cs-modal.open { display: flex; }
.cs-modal-frame,
.cs-modal-video {
  max-width: 100%;
  max-height: 100%;
  width: 100%;
  height: 100%;
  background: var(--bg-deep);
  border: 0;
  display: block;
  object-fit: contain;
}
.cs-modal-close {
  position: absolute;
  top: 20px; right: 20px;
  width: 52px; height: 52px;
  border: 0;
  border-radius: 50%;
  background: var(--gold);
  color: var(--ink);
  font-size: 24px;
  font-weight: 700;
  z-index: 1001;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .25s ease, background .25s ease;
}
.cs-modal-close:hover {
  transform: rotate(90deg) scale(1.08);
  background: var(--gold-deep);
}
.cs-modal-label {
  position: absolute;
  top: 28px; left: clamp(20px, 4vw, 60px);
  font-family: var(--mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(239, 234, 224, 0.65);
  z-index: 1001;
}
.cs-modal-label::before {
  content: '*';
  color: var(--gold);
  margin-right: 6px;
}

/* ============================================================
   ABOUT PAGE — portrait left, greeting + bio right
   ============================================================ */
.about-page-hero {
  max-width: var(--max);
  margin: 0 auto;
  padding: 200px var(--pad) 80px;
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(40px, 5vw, 80px);
  align-items: center;
}
.about-portrait {
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--bg);
}
.about-portrait img {
  width: 100%; height: 100%;
  object-fit: cover;
}

/* the greeting "HI, I'M ISELA*" inside the bio column */
.about-page-hero .about-greeting {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(40px, 5.6vw, 88px);
  line-height: 0.95;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 24px 0;
}
.about-page-hero .about-greeting em {
  font-style: italic;
  font-weight: 900;
  background: linear-gradient(135deg, #B8902F 0%, #E6C97A 40%, #8B6B1F 75%, #D4AF6A 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.about-page-hero .about-greeting .hi-star {
  color: var(--gold-deep);
  font-weight: 800;
  font-size: 0.42em;
  display: inline-block;
  vertical-align: 0.85em;
  margin-left: 0.04em;
  line-height: 1;
  background: none;
  -webkit-text-fill-color: var(--gold-deep);
}

.about-bio p {
  font-family: var(--body);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.65;
  color: var(--ink);
  max-width: 56ch;
  margin-bottom: 16px;
}
.about-bio p:last-of-type { margin-bottom: 28px; }

.contact-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 130px; height: 130px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--gold);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-top: 36px;
  transition: transform .3s ease, background .3s ease;
  gap: 6px;
}
.contact-circle:hover {
  transform: rotate(-6deg) scale(1.04);
  background: var(--gold-deep);
  color: var(--bg);
}

/* about detail rows */
.about-detail {
  max-width: var(--max);
  margin: 0 auto;
  padding: 40px var(--pad);
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 40px;
  border-top: 1px solid rgba(26, 24, 21, 0.15);
}
.about-detail h2 {
  font-family: var(--mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 500;
  color: var(--ink-soft);
  padding-top: 6px;
}
.about-detail h2::before {
  content: '*';
  color: var(--gold-deep);
  margin-right: 4px;
}

.about-detail ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.detail-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 20px;
  align-items: baseline;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(26, 24, 21, 0.08);
}
.detail-row:last-child { border-bottom: 0; padding-bottom: 0; }
.detail-row .role {
  font-family: var(--display);
  font-weight: 800;
  font-size: 22px;
  text-transform: uppercase;
  letter-spacing: -0.005em;
  color: var(--ink);
}
.detail-row .sub {
  font-size: 14px;
  color: var(--ink-soft);
  margin-top: 2px;
}
.detail-row .when {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-soft);
  letter-spacing: 0.04em;
}

.cap-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px !important;
}
.cap-grid li {
  font-family: var(--mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink);
  border: 1px solid var(--ink);
  padding: 12px 14px;
}
.cap-grid li::before {
  content: '*';
  color: var(--gold-deep);
  margin-right: 6px;
}

/* ============================================================
   CONTACT PAGE
   ============================================================ */
.contact-page {
  max-width: var(--max);
  margin: 0 auto;
  padding: 180px var(--pad) 100px;
}
.contact-page h1 {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(72px, 14vw, 220px);
  line-height: 0.88;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 40px;
  max-width: 12ch;
}
.contact-page h1 em {
  font-style: italic;
  background: linear-gradient(135deg, #B8902F 0%, #E6C97A 40%, #8B6B1F 75%, #D4AF6A 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.contact-intro {
  font-size: 18px;
  max-width: 100%; /* Erlaubt dem Text, sich an den Container anzupassen */
  margin-bottom: 60px;
  color: var(--ink);
  display: block; /* Stellt sicher, dass es als Block behandelt wird */
}
.contact-intro a {
  border-bottom: 1px solid var(--gold-deep);
  color: var(--ink);
}

.contact-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  max-width: 760px;
}
.contact-form label {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-soft);
  display: block;
  margin-bottom: 8px;
}
.contact-form label::before {
  content: '*';
  color: var(--gold-deep);
  margin-right: 4px;
}
.contact-form .field { display: flex; flex-direction: column; }
.contact-form .field.full { grid-column: 1 / -1; }

.contact-form input,
.contact-form textarea {
  font-family: var(--body);
  font-size: 15px;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--ink);
  padding: 10px 0;
  outline: none;
  transition: border-color .2s ease;
}
.contact-form textarea {
  min-height: 140px;
  resize: vertical;
}
.contact-form input:focus,
.contact-form textarea:focus {
  border-color: var(--gold-deep);
}

.contact-form button {
  grid-column: 1 / -1;
  justify-self: start;
  font-family: var(--mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 500;
  color: var(--bg);
  background: var(--ink);
  border: 0;
  padding: 18px 36px;
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}
.contact-form button:hover {
  background: var(--gold-deep);
  transform: translateY(-1px);
}
.contact-form button::before {
  content: '*';
  color: var(--gold);
  margin-right: 6px;
}

/* ============================================================
   FOOTER — dark, monospace columns
   ============================================================ */
footer {
  background: var(--bg-deep);
  color: var(--bg);
  padding: 100px var(--pad) 40px;
  margin-top: 80px;
}

.footer-display {
  max-width: var(--max);
  margin: 0 auto 80px;
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(48px, 8vw, 120px);
  line-height: 0.9;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  color: var(--bg);
}
.footer-display em {
  font-style: italic;
  background: linear-gradient(135deg, #B8902F 0%, #E6C97A 40%, #8B6B1F 75%, #D4AF6A 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.footer-cols {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  padding-bottom: 60px;
  border-bottom: 1px solid rgba(239, 234, 224, 0.18);
}

.footer-col h3 {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(239, 234, 224, 0.5);
  margin-bottom: 20px;
}
.footer-col h3::before {
  content: '*';
  color: var(--gold);
  margin-right: 4px;
}
.footer-col ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.footer-col a {
  font-family: var(--display);
  font-size: 32px;
  font-weight: 700;
  color: var(--bg);
  transition: color .2s ease, transform .2s ease;
  letter-spacing: -0.01em;
  display: inline-block;
  text-transform: uppercase;
}
.footer-col a:hover {
  color: var(--gold);
  transform: translateX(8px);
}

.footer-base {
  max-width: var(--max);
  margin: 30px auto 0;
  padding-top: 30px;
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(239, 234, 224, 0.55);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 880px) {
  .hero {
    grid-template-columns: 1fr;
    padding-top: 140px;
  }
  .hero-foot {
    max-width: 100%;
    padding-bottom: 0;
    padding-top: 24px;
    border-top: 1px solid rgba(26, 24, 21, 0.15);
  }

  .about-page-hero {
    grid-template-columns: 1fr;
    padding-top: 140px;
  }
  .about-portrait { aspect-ratio: 1 / 1; max-width: 360px; }

  .about-detail {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .contact-form { grid-template-columns: 1fr; }

  .marquee-track span { font-size: 22px; }
  .marquee-track span::before { margin-right: 32px; }
}

@media (max-width: 520px) {
  header nav ul { gap: 16px; }
  header nav a { font-size: 11px; }
  .footer-base { flex-direction: column; gap: 8px; }
  .detail-row { grid-template-columns: 1fr; gap: 6px; }
  .detail-row .when { font-size: 11px; }
  .footer-col a { font-size: 26px; }
}

/* respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
  .project-block .device .status .dot { animation: none; }
  * { transition-duration: 0.01ms !important; }
}

/* ============================================================
   HOVER REVEAL - VIDEO TILE (BOHOL BEACH)
   ============================================================ */

/* All tiles now behave like the Alkmy tile: video always playing in the
   background, overlay + labels + index + arrow always visible, no hover reveal. */
.hover-reveal .device,
.hover-reveal .index,
.hover-reveal .project-arrow,
.hover-reveal .tile-video-overlay {
  opacity: 1;
}
/* ============================================================
   ACCESSIBILITY — visible keyboard focus (WCAG 2.4.7 AA)
   Only shows for keyboard users (:focus-visible); mouse/touch
   interaction is unaffected, so the resting design is unchanged.
   ============================================================ */
a:focus-visible,
button:focus-visible,
[role='button']:focus-visible,
input:focus-visible,
textarea:focus-visible,
.cs-video-btn:focus-visible,
.cs-lightbox-close:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}