/* ============================================================
   EPAVLI PAPADOPOULOU — Design tokens & primitives
   Modern Luxe · high-contrast · sharp edges · straight lines
   ============================================================ */

:root{
  /* Palette — three colours only: white, mid grey, dark grey */
  --ink:        #383839;   /* dark grey (primary dark) */
  --ink-2:      #383839;   /* dark grey for cards on dark */
  --ink-soft:   #6c6d6f;   /* mid grey, secondary text on white */
  --paper:      #ffffff;   /* white page */
  --paper-2:    #ffffff;   /* white panel */
  --paper-3:    #ffffff;   /* white panel */
  --white:      #ffffff;   /* white panel */
  --line:       rgba(56,56,57,.16);  /* hairline on white */
  --line-ink:   rgba(255,255,255,.18); /* hairline on dark */
  --bronze:     #6c6d6f;   /* mid grey accent */
  --bronze-lt:  #6c6d6f;   /* mid grey accent on dark */

  /* Type */
  --serif: "Didot", "GFS Didot", "Bodoni Moda", "Times New Roman", serif;
  --sans:  "Hanken Grotesk", system-ui, sans-serif;
  --mono:  "JetBrains Mono", ui-monospace, monospace;

  /* Rhythm */
  --pad: clamp(20px, 5vw, 88px);     /* page side padding */
  --gap: clamp(16px, 2vw, 28px);

  /* fluid display sizes */
  --d1: clamp(48px, 11vw, 184px);
  --d2: clamp(38px, 7vw, 104px);
  --d3: clamp(28px, 4.4vw, 64px);
  --d4: clamp(22px, 2.6vw, 36px);
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.6;
  font-weight:400;
  letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; }

/* ---- selection ---- */
::selection{ background:var(--ink); color:var(--paper); }

/* ============================================================
   Typography primitives
   ============================================================ */
.serif{ font-family:var(--serif); }
.display{
  font-family:var(--serif);
  font-weight:500;
  line-height:.96;
  letter-spacing:-.012em;
  text-wrap:balance;
}
.display.italic{ font-style:italic; font-weight:400; }

.eyebrow{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.32em;
  text-transform:uppercase;
  font-weight:500;
  color:var(--ink-soft);
}
.lead{
  font-size:clamp(17px,1.5vw,21px);
  line-height:1.62;
  max-width:58ch;
}
.meta{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
}

/* ============================================================
   Buttons — sharp, hairline, high contrast
   ============================================================ */
.btn{
  --bg:var(--ink); --fg:var(--paper); --bd:var(--ink);
  display:inline-flex; align-items:center; gap:.85em;
  padding:16px 26px;
  background:var(--bg); color:var(--fg);
  border:1px solid var(--bd);
  font-family:var(--mono);
  font-size:12.5px; letter-spacing:.2em; text-transform:uppercase;
  cursor:pointer;
  transition:background .35s ease, color .35s ease, gap .35s ease;
}
.btn .arw{ transition:transform .35s ease; }
.btn:hover{ background:transparent; color:var(--ink); gap:1.3em; }
.btn:hover .arw{ transform:translateX(4px); }

.btn.ghost{ --bg:transparent; --fg:var(--ink); --bd:var(--ink); }
.btn.ghost:hover{ background:var(--ink); color:var(--paper); }

.btn.on-ink{ --bg:var(--paper); --fg:var(--ink); --bd:var(--paper); }
.btn.on-ink:hover{ background:transparent; color:var(--paper); }

.btn.lg{ padding:20px 34px; font-size:13px; }

/* text link with animated underline */
.tlink{
  font-family:var(--mono); font-size:12.5px; letter-spacing:.18em;
  text-transform:uppercase; position:relative; padding-bottom:3px;
  display:inline-block;
}
.tlink::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:currentColor; transform:scaleX(0); transform-origin:left;
  transition:transform .4s cubic-bezier(.2,.7,.2,1);
}
.tlink:hover::after{ transform:scaleX(1); }

/* ============================================================
   PLACEHOLDERS — clearly marked, sharp, hairline-striped
   ============================================================ */
.ph{
  position:relative;
  background:
    repeating-linear-gradient(135deg,
      transparent 0 13px,
      rgba(56,56,57,.07) 13px 14px);
  background-color:rgba(108,109,111,.09);
  border:1px solid var(--line);
  overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  min-height:120px;
  color:var(--ink-soft);
}
.ph::before{ /* corner ticks */
  content:""; position:absolute; inset:9px; pointer-events:none;
  background:
    linear-gradient(var(--line),var(--line)) left top/14px 1px no-repeat,
    linear-gradient(var(--line),var(--line)) left top/1px 14px no-repeat,
    linear-gradient(var(--line),var(--line)) right top/14px 1px no-repeat,
    linear-gradient(var(--line),var(--line)) right top/1px 14px no-repeat,
    linear-gradient(var(--line),var(--line)) left bottom/14px 1px no-repeat,
    linear-gradient(var(--line),var(--line)) left bottom/1px 14px no-repeat,
    linear-gradient(var(--line),var(--line)) right bottom/14px 1px no-repeat,
    linear-gradient(var(--line),var(--line)) right bottom/1px 14px no-repeat;
}
.ph__cap{
  position:relative; z-index:1;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.14em;
  text-transform:uppercase; text-align:center; line-height:1.7;
  padding:10px 16px; max-width:80%;
}
.ph__cap .k{ display:block; font-size:10px; color:var(--bronze); margin-bottom:6px; }
.ph__cap .lbl{ color:var(--ink); }
.ph__cap .sub{ display:block; color:var(--ink-soft); font-size:10.5px; margin-top:6px; opacity:.85; }

/* dark variant placeholder (sits on ink) */
.ph.on-ink{
  background:
    repeating-linear-gradient(135deg,
      transparent 0 13px,
      rgba(255,255,255,.05) 13px 14px);
  background-color:#303031;
  border-color:var(--line-ink);
  color:var(--paper);
}
.ph.on-ink::before{
  background:
    linear-gradient(var(--line-ink),var(--line-ink)) left top/14px 1px no-repeat,
    linear-gradient(var(--line-ink),var(--line-ink)) left top/1px 14px no-repeat,
    linear-gradient(var(--line-ink),var(--line-ink)) right top/14px 1px no-repeat,
    linear-gradient(var(--line-ink),var(--line-ink)) right top/1px 14px no-repeat,
    linear-gradient(var(--line-ink),var(--line-ink)) left bottom/14px 1px no-repeat,
    linear-gradient(var(--line-ink),var(--line-ink)) left bottom/1px 14px no-repeat,
    linear-gradient(var(--line-ink),var(--line-ink)) right bottom/14px 1px no-repeat,
    linear-gradient(var(--line-ink),var(--line-ink)) right bottom/1px 14px no-repeat;
}
.ph.on-ink .ph__cap .lbl{ color:var(--paper); }
.ph.on-ink .ph__cap .sub{ color:rgba(255,255,255,.6); }

/* video placeholder badge */
.ph__badge{
  position:absolute; top:0; left:0; z-index:2;
  font-family:var(--mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase;
  background:var(--ink); color:var(--paper);
  padding:6px 11px;
}
.ph.on-ink .ph__badge{ background:var(--paper); color:var(--ink); }

/* ============================================================
   Utility
   ============================================================ */
.wrap{ padding-inline:var(--pad); }
.rule{ height:1px; background:var(--line); border:0; margin:0; }
.rule.ink{ background:var(--line-ink); }
.hidden{ display:none !important; }

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