/* ============================================================
   GÜLSÜN ERDAŞ STUDIO — Tokens, base, motion states
   Warm black ground, ivory ink, champagne-bronze accent. Warm
   anthracite appears only where the page settles into the footer.
   ============================================================ */

/* Layout props are consumed by the element that sets them only —
   non-inheriting, so a grid nested inside a placed item never picks
   up its parent's placement. */
@property --col { syntax: '*'; inherits: false; }
@property --col-m { syntax: '*'; inherits: false; }
@property --row { syntax: '*'; inherits: false; }
@property --align { syntax: '*'; inherits: false; }
@property --drop { syntax: '*'; inherits: false; }
@property --drop-m { syntax: '*'; inherits: false; }
@property --ratio { syntax: '*'; inherits: false; }
@property --ratio-m { syntax: '*'; inherits: false; }

:root {
  /* --- color --- */
  --ground: #0e0d0c;
  --anthracite: #1a1816;
  --ivory: #f4eee4;
  --ink: #ebe4d8;
  --ink-soft: rgba(235, 228, 216, 0.72);
  --ink-mute: rgba(235, 228, 216, 0.55);
  --ink-faint: rgba(235, 228, 216, 0.3);
  --accent: #c9a683;
  --bronze: #8c6a4c;
  --bronze-ghost: rgba(140, 106, 76, 0.15);
  --bronze-mark: rgba(140, 106, 76, 0.28);

  /* --- type --- */
  --font-display: 'Cormorant Garamond', 'Times New Roman', serif;
  --font-text: 'Plus Jakarta Sans', 'Helvetica Neue', Arial, sans-serif;

  --t-colossal: clamp(84px, 15.6vw, 300px);
  --t-display: clamp(52px, 9.2vw, 176px);
  --t-headline: clamp(36px, 5.4vw, 100px);
  --t-title: clamp(30px, 3.4vw, 58px);
  --t-lede: clamp(21px, 2.2vw, 36px);
  --t-body: clamp(14px, 1.02vw, 16px);
  --t-micro: clamp(10px, 0.74vw, 11.5px);
  --t-watermark: clamp(200px, 36vw, 660px);

  /* --- space --- */
  --gutter: clamp(20px, 4.2vw, 72px);
  --gap: clamp(12px, 1.8vw, 30px);
  --space-xl: clamp(120px, 17vw, 300px);
  --space-l: clamp(88px, 11vw, 190px);
  --space-m: clamp(44px, 5.4vw, 96px);
  --space-s: clamp(18px, 1.9vw, 30px);
  --max: 1720px;
  --header-h: clamp(72px, 7vw, 104px);

  /* --- photography ---
     The client rejected a desaturated grade as "bitik"; depth comes
     from contrast, and hover deepens it rather than draining color. */
  --grade: contrast(1.07) saturate(1.05) brightness(0.96);
  --grade-deep: contrast(1.18) saturate(1.12) brightness(0.9);

  /* --- motion --- */
  --ease-silk: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-slow: cubic-bezier(0.16, 1, 0.3, 1);

  --arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 10'%3E%3Cpath d='M0 5h28.5M24.5 1l4 4-4 4' fill='none' stroke='%23000' stroke-width='1'/%3E%3C/svg%3E");
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.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 0.6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* Phones get their own scale rather than the desktop clamps' floors:
   display lines are sized in vw so the longest headings stay on one
   line from 360px to 600px, and vertical rhythm tightens. */
@media (max-width: 600px) {
  :root {
    --t-colossal: clamp(64px, 21vw, 120px);
    --t-display: clamp(34px, 9.4vw, 60px);
    --t-headline: clamp(28px, 8.2vw, 44px);
    --t-title: clamp(28px, 7.8vw, 40px);
    --t-lede: clamp(20px, 5.4vw, 24px);
    --t-body: 15px;
    --t-micro: 10.5px;
    --t-watermark: clamp(150px, 46vw, 260px);
    --gutter: clamp(20px, 5.6vw, 28px);
    --gap: 12px;
    --space-xl: 104px;
    --space-l: 76px;
    --space-m: 44px;
    --space-s: 20px;
    --header-h: 72px;
  }
}

/* ============================================================
   Base
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--ground); color-scheme: dark; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--t-body);
  font-weight: 300;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body::after {
  content: '';
  position: fixed; inset: 0; z-index: 200;
  pointer-events: none;
  background-image: var(--grain);
  opacity: 0.055;
}
/* The grain is a full-viewport fixed layer composited over everything on
   every frame. At 5.5% it is imperceptible on a phone screen but still
   costs fill rate on the weakest GPUs, so phones skip it. */
@media (max-width: 900px) { body::after { display: none; } }
h1, h2, h3, p, figure, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }
img, video, iframe { display: block; max-width: 100%; }
picture { display: contents; }
a { color: inherit; text-decoration: none; }
a, button { -webkit-tap-highlight-color: transparent; }
em { font-style: italic; }
button { font: inherit; color: inherit; }
::selection { background: var(--accent); color: var(--ground); }
:focus-visible { outline: 1px solid var(--accent); outline-offset: 6px; }

/* ============================================================
   Motion states — JS only toggles data-ge-shown
   ============================================================ */

@keyframes ge-rise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes ge-line { from { transform: translateY(108%); } to { transform: none; } }
@keyframes ge-unveil { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes ge-settle { from { transform: scale(1.16); } to { transform: none; } }
@keyframes ge-cue {
  0% { transform: scaleY(0); transform-origin: top; }
  45% { transform: scaleY(1); transform-origin: top; }
  55% { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

html.ge-js [data-ge-reveal] { opacity: 0; }
html.ge-js [data-ge-reveal][data-ge-shown] { animation: ge-rise 1.3s var(--ease-slow) var(--delay, 0ms) both; }

html.ge-js [data-ge-lines] .ge-line__in { transform: translateY(108%); }
html.ge-js [data-ge-lines][data-ge-shown] .ge-line__in { animation: ge-line 1.5s var(--ease-slow) both; }
html.ge-js [data-ge-lines][data-ge-shown] .ge-line:nth-child(2) .ge-line__in { animation-delay: 120ms; }
html.ge-js [data-ge-lines][data-ge-shown] .ge-line:nth-child(3) .ge-line__in { animation-delay: 240ms; }

/* Curtain on the frame, slow settle on the image. The settle only
   fills backwards so, once done, hover transitions own the transform. */
html.ge-js [data-ge-unveil] { clip-path: inset(100% 0 0 0); }
html.ge-js [data-ge-unveil][data-ge-shown] { animation: ge-unveil 1.7s var(--ease-slow) var(--delay, 0ms) both; }
html.ge-js [data-ge-unveil][data-ge-shown] .ge-img { animation: ge-settle 2.4s var(--ease-slow) var(--delay, 0ms) backwards; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: 0.01ms !important; }
  html.ge-js [data-ge-reveal] { opacity: 1; }
  html.ge-js [data-ge-unveil] { clip-path: none; }
  html.ge-js [data-ge-lines] .ge-line__in { transform: none; }
}