/* samudraguenegou.com, v4: immersive landing (inspired by mac-scott.com) then an editorial page.
   The landing is always dark, over the latest video. Below it the page follows light/dark.
   Palette: #F9F9F9 paper, #161616 charcoal, #B51700 red, #5C0000 maroon. Square corners, no pills. */
:root {
  color-scheme: light;
  --paper: #F9F9F9;
  --bg: #F9F9F9;
  --ink: #161616;
  --ink-2: #383838;
  --muted: #6E6E6E;
  --rule: rgba(22, 22, 22, 0.14);
  --accent: #B51700;
  --deep: #5C0000;
  --surface: #EDEDED;
  --title: "Helvetica Neue", Helvetica, "Inter Tight", Arial, sans-serif;  /* real Helvetica Neue on Apple devices, Inter Tight elsewhere */
  --sans: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  /* type scale: 5 steps, nothing in between
     display  title   landing stack, project titles, Home.
     heading  title   section titles (About me, invitations)
     body     sans    paragraphs, notes, links
     small    sans    captions, facts, the Behance line
     label    sans    uppercase markers (Selected work, sports, footer) */
  --t-display: clamp(1.75rem, 3.4vw, 3.25rem);
  --t-heading: clamp(1.375rem, 2.2vw, 2rem);
  --t-body: .9375rem;
  --t-small: .8125rem;
  --t-label: .6875rem;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --gutter: clamp(1.25rem, 3vw, 2.5rem);
  box-sizing: border-box;
}
*, *::before, *::after { box-sizing: inherit; margin: 0; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  background: var(--bg); color: var(--ink);
  font-family: var(--sans); font-size: var(--t-body); line-height: 1.55; letter-spacing: -.003em;
  text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
a:focus-visible, button:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }
.label, .foot, .p-brand, .p-idx, .facts dt, .scroll-cue, .video-note {
  font-size: var(--t-label); font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
}
.arr { display: inline-block; margin-left: .35em; transition: transform .2s var(--ease-out); }
a:hover .arr { transform: translate(2px, -2px); }

/* ---------- landing: minimal, Mac Scott style. Full-bleed visuals, one right-aligned stack ---------- */
.landing {
  position: relative; height: 100vh; height: 100svh; min-height: 28rem; overflow: hidden;
  background: #0B0B0B; color: #F9F9F9; padding: var(--gutter);
}
.slides { position: absolute; inset: 0; overflow: hidden; z-index: 0; background: #0B0B0B; }
.slide {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1) brightness(.78) contrast(1.08);
  opacity: 0; transform: scale(1.08);
  transition: opacity 1.8s ease, transform 9s cubic-bezier(.2, .6, .3, 1);
}
.slide.is-on { opacity: 1; transform: scale(1); }
/* the On CloudTouch film, cropped to fill the screen like a background video; the still shows until it loads */
.bg-video {
  position: absolute; top: 50%; left: 50%; border: 0; pointer-events: none;
  width: max(100vw, 177.78vh); height: max(100vh, 56.25vw);
  transform: translate(-50%, -50%);
  filter: grayscale(1) brightness(.78) contrast(1.08);
  opacity: 0; transition: opacity 1.2s ease 1s;
}
.bg-video.is-ready { opacity: 1; }
.scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to left, rgba(0,0,0,.35), rgba(0,0,0,0) 60%), rgba(0,0,0,.12); }
.grain {
  position: absolute; inset: -50%; z-index: 1; pointer-events: none; opacity: .3;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain .9s steps(5) infinite;
}
@keyframes grain {
  0% { transform: translate(0, 0); } 20% { transform: translate(-3%, 2%); } 40% { transform: translate(2%, -3%); }
  60% { transform: translate(-2%, -1%); } 80% { transform: translate(3%, 3%); } 100% { transform: translate(0, 0); }
}

.landing .logo-btn { position: absolute; z-index: 2; top: var(--gutter); left: var(--gutter); }
.logo-btn { display: block; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 50%; -webkit-tap-highlight-color: transparent; }
.logo-btn .logo { pointer-events: none; user-select: none; width: 2.5rem; height: 2.5rem; }
.logo-btn:active { scale: .94; }
.logo-btn.wobble .logo { animation: wobble .6s ease; }
.hi { position: fixed; z-index: 20; pointer-events: none; font-size: var(--t-body); font-weight: 600; color: #B51700; animation: hi-float .9s var(--ease-out) forwards; }
@keyframes wobble { 0% { rotate: 0deg; } 20% { rotate: -12deg; } 40% { rotate: 9deg; } 60% { rotate: -5deg; } 80% { rotate: 2deg; } 100% { rotate: 0deg; } }
@keyframes hi-float { 0% { opacity: 0; transform: translate(-50%, -6px); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, 14px); } }

.stack {
  position: absolute; z-index: 2; right: var(--gutter); top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; align-items: flex-end; text-align: right;
  font-family: var(--title);
  font-size: var(--t-display); line-height: 1.1; letter-spacing: -.02em;
}
.stack a, .stack h1 { color: #F9F9F9; text-decoration: none; font-weight: 400; font-size: inherit; font-family: inherit; }
.stack strong { font-weight: 600; }
.s-name strong { text-decoration: underline; text-decoration-thickness: .06em; text-underline-offset: .12em; }
.enter { margin-top: 1.12em; }
.enter strong { text-decoration: underline; text-decoration-thickness: .06em; text-underline-offset: .12em; }
.stack a:hover { opacity: .7; }
.l-foot {
  position: absolute; z-index: 2; left: var(--gutter); right: var(--gutter); bottom: var(--gutter);
  display: flex; justify-content: space-between; gap: 1rem; color: rgba(249,249,249,.7);
  font-size: var(--t-label); font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
}
.l-foot a { color: rgba(249,249,249,.7); text-decoration: none; }
.l-foot a:hover { color: #F9F9F9; }
.now { display: inline-flex; gap: .6rem; }
.now-idx { color: rgba(249,249,249,.45); font-variant-numeric: tabular-nums; }
.now-name { transition: opacity .6s ease; }
.now-name.out { opacity: 0; }

/* ---------- work page: right-aligned titles, visual on the left ---------- */
.top { position: sticky; top: 0; z-index: 10; background: color-mix(in srgb, var(--bg) 85%, transparent); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
/* same gutter as the landing, so the face sits in exactly the same spot on both pages */
.top-in { padding: var(--gutter) var(--gutter) .75rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.home { display: block; line-height: 0; }
.home .logo { width: 2.5rem; height: 2.5rem; }
.top .socials { display: flex; align-items: center; gap: 1.5rem; font-size: var(--t-small); }
.top .socials a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink-2); text-decoration: none; transition: color .15s ease; }
.top .socials a:hover { color: var(--accent); }
.is-work .work {
  --pt: clamp(4rem, 14vh, 9rem);
  --pw: min(calc((100vw - 2 * var(--gutter)) * .38), 32rem);
  position: relative; padding-top: var(--pt);
  min-height: calc(var(--pt) + var(--pw) + 8rem);
  padding-bottom: clamp(2.5rem, 6vh, 4rem); border-bottom: 1px solid var(--rule);
  display: flex; flex-direction: column; align-items: flex-start; text-align: left;
}
.is-work .work h1 { font-size: var(--t-label); font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); margin-bottom: 1rem; }
.grid { display: flex; flex-direction: column; align-items: flex-start; max-width: calc(100% - var(--pw) - 3rem); }
.w { margin: 0; }
.w-link {
  display: inline-flex; align-items: baseline; gap: .6em; text-decoration: none; color: var(--ink);
  font-family: var(--title); font-size: var(--t-display); font-weight: 700; line-height: 1.08; letter-spacing: -.025em;
  transition: color .2s ease;
}
.p-brand { font-family: var(--sans); font-size: var(--t-label); font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); opacity: 0; transition: opacity .2s ease; }
.w:hover .p-brand, .w-link:focus-visible .p-brand { opacity: 1; }
.grid:hover .w-link { color: color-mix(in srgb, var(--ink) 35%, transparent); }
.grid .w:hover .w-link, .w-link:focus-visible { color: var(--ink); }
.w-prev, .w figcaption {
  position: absolute; right: 0; width: var(--pw); pointer-events: none; text-align: left;
  opacity: 0; transform: translateY(6px); transition: opacity .35s ease, transform .5s var(--ease-out);
}
.w-prev { top: var(--pt); }
.w-prev .frame { aspect-ratio: 1 / 1; overflow: hidden; background: var(--surface); }
.w-prev img { width: 100%; height: 100%; object-fit: cover; }
.w figcaption { top: calc(var(--pt) + var(--pw) + 1rem); }
.p-line { display: block; color: var(--ink-2); font-size: var(--t-small); line-height: 1.5; text-wrap: pretty; }
/* scope tags and credits under each description, echoing the portfolio's [brackets] */
.p-scope { display: flex; flex-wrap: wrap; gap: .25rem .6rem; margin-top: .75rem; font-size: var(--t-label); font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); }
.p-when { color: var(--muted); }
.p-credit { display: block; margin-top: .5rem; font-size: var(--t-small); color: var(--muted); line-height: 1.5; }
.w:hover .w-prev, .w:hover figcaption, .w:focus-within .w-prev, .w:focus-within figcaption { opacity: 1; transform: none; }
.home-link {
  margin-top: 1.5rem; color: var(--ink); font-family: var(--title); font-size: var(--t-display); font-weight: 700; line-height: 1.08; letter-spacing: -.02em;
  text-decoration: underline; text-decoration-thickness: .06em; text-underline-offset: .12em;
}
.home-link:hover { color: var(--accent); }
.elsewhere { margin-top: 1.25rem; max-width: 30rem; font-size: var(--t-small); line-height: 1.5; color: var(--muted); }
.elsewhere a { color: var(--ink-2); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; text-decoration-color: color-mix(in srgb, var(--ink) 35%, transparent); }
.elsewhere a:hover { color: var(--accent); text-decoration-color: var(--accent); }

/* ---------- page ---------- */
.page { padding: 0 var(--gutter); }
.about { padding-top: clamp(2.5rem, 6vh, 4rem); }
.about h2 {
  font-family: var(--title); font-weight: 500;
  font-size: var(--t-heading); line-height: 1.15; letter-spacing: -.02em;
  max-width: 26ch; text-wrap: balance;
}
.intro { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 1.5rem; row-gap: 2.5rem; margin-top: clamp(2.5rem, 7vh, 4.5rem); align-items: start; }
.bio { grid-column: 1 / 7; }
.bio p { color: var(--ink-2); max-width: 34rem; text-wrap: pretty; }
.bio p + p { margin-top: 1rem; }
.bio strong { font-weight: 500; color: var(--ink); }
.bio a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em; text-decoration-color: color-mix(in srgb, var(--ink) 35%, transparent); transition: color .15s ease; }
.bio a:hover { color: var(--accent); text-decoration-color: var(--accent); }
.facts { grid-column: 8 / 13; display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 1.5rem 3rem; }
.facts dt { color: var(--muted); margin-bottom: .4rem; }
.facts dd { margin: 0; color: var(--ink-2); font-size: var(--t-small); line-height: 1.6; }

.ctas { margin-top: clamp(3.5rem, 9vh, 6rem); padding-top: 2rem; border-top: 1px solid var(--rule); display: grid; grid-template-columns: repeat(2, 1fr); gap: 3rem clamp(1.5rem, 3vw, 3rem); align-items: start; }
.contact h2, .pro h2 { font-family: var(--title); font-weight: 500; font-size: var(--t-heading); line-height: 1.15; letter-spacing: -.02em; max-width: 22ch; margin-bottom: 1.5rem; }
.cta-note { text-wrap: pretty; color: var(--ink-2); margin: -.75rem 0 1.25rem; max-width: 32rem; }
.pro-actions { display: flex; flex-wrap: wrap; gap: .5rem 2rem; }
.cta-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .3em; text-decoration-color: color-mix(in srgb, var(--ink) 35%, transparent); transition: color .15s ease, text-decoration-color .15s ease; }
.cta-link:hover { color: var(--accent); text-decoration-color: var(--accent); }

.foot { display: flex; justify-content: space-between; gap: 1rem; margin-top: clamp(4rem, 10vh, 7rem); padding: 1.25rem 0 2rem; border-top: 1px solid var(--rule); color: var(--muted); }
.foot a { color: var(--muted); text-decoration: none; }
.foot a:hover { color: var(--accent); }

/* ---------- touch screens and small widths: each project shows its visual and description in the list ---------- */
@media (hover: none), (max-width: 860px) {
  .is-work .work { min-height: 0; align-items: stretch; text-align: left; }
  .grid { align-items: stretch; max-width: none; }
  .w { display: grid; padding-bottom: 1.5rem; }
  .w-prev, .w figcaption { position: static; width: auto; opacity: 1; transform: none; }
  .w-prev { order: -1; margin-bottom: .75rem; }

  .p-brand { opacity: 1; }
  .w figcaption { margin-top: .4rem; }
  .grid:hover .w-link { color: var(--ink); }
  .home-link { align-self: flex-start; }
}
@media (max-width: 640px) {
  .stack { top: auto; bottom: calc(var(--gutter) + 3.5rem); transform: none; }
}
@media (max-width: 860px) {
  .bio, .facts { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .ctas { grid-template-columns: 1fr; }
  .facts { grid-template-columns: 1fr 1fr; }
  .socials { gap: 1rem; }
  .video-note { flex-direction: column; gap: .3rem; }
}
@media (prefers-reduced-motion: reduce) {
  .slide { transition: opacity .6s ease; transform: none !important; }
  .grain { animation: none; }
  .w-prev, .arr,   a:hover .arr { transform: none; }
}
@media (prefers-contrast: more) {
  :root { --muted: #4A4A4A; --ink-2: var(--ink); --rule: var(--ink); }
  .scrim { background: rgba(0,0,0,.6); }
}

/* small social icons, top right on both pages; on the landing they sit at the face's height */
.l-icons { position: absolute; z-index: 2; top: var(--gutter); right: var(--gutter); height: 2.5rem; display: flex; align-items: center; }
.l-icons .socials.icons { display: flex; margin-right: -9px; }
.l-icons .socials.icons a { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 40px; color: #F9F9F9; }
.l-icons .socials.icons a:hover { opacity: .7; }
.l-icons .socials.icons svg { width: 15px; height: 15px; }
.top .socials.icons { gap: 0; margin-right: -9px; }
.top .socials.icons a { width: 32px; height: 40px; min-height: 0; justify-content: center; color: var(--ink); }
.top .socials.icons a:hover { color: var(--accent); }
.top .socials.icons svg { width: 15px; height: 15px; }

/* about: portrait next to the bio */
.portrait { grid-column: 1 / 5; margin: 0; }
.portrait img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.about .intro .bio { grid-column: 5 / 11; }
/* focus, experience and projects: their own band between About me and the invitations */
.cv { margin-top: clamp(3.5rem, 9vh, 6rem); padding-top: 2rem; border-top: 1px solid var(--rule); }
.cv .facts { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2.5rem 2rem; }
.cv .facts dt { margin-bottom: 1rem; color: var(--accent); font-size: .75rem; font-weight: 600; }
.cv .facts dd { display: flex; flex-direction: column; gap: .65rem; }
.cv .it { display: flex; flex-direction: column; gap: .1rem; }
/* entries stay below their red label: same caps, smaller, regular weight, softer ink */
.cv .k { font-size: var(--t-label); font-weight: 400; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-2); line-height: 1.4; }
.cv .d { font-size: var(--t-label); color: var(--muted); line-height: 1.4; }
@media (max-width: 1100px) {
  .about .intro .bio { grid-column: 5 / 13; }
  .cv .facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .portrait, .about .intro .bio { grid-column: 1 / -1; }
  .cv .facts { grid-template-columns: 1fr 1fr; }
}