/* ============================================================
   MARÍA RAILENZ — Portfolio · shared design system
   Illustration = teal #8ad2d4 · Graphic Design = blue #3a67f0
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;700;800&family=Manrope:wght@400;500;600&family=Space+Mono:ital,wght@0,400;0,700;1,400&display=swap');

:root{
  --cream:#ffffff;
  --paper:#f5f5f5;
  --ink:#17150f;
  --ink-70:rgba(23,21,15,.62);
  --ink-40:rgba(23,21,15,.40);
  --line:rgba(23,21,15,.16);

  --teal:#8ad2d4;
  --teal-deep:#3f8d90;
  --blue:#3a67f0;
  --coral:#ef6a43;
  --yellow:#f3d34a;

  /* mode accent — overridden per page / per hover */
  --accent:#17150f;
  --accent-soft:#efe7d8;

  --serif:"Sora", sans-serif;
  --read:"Manrope", sans-serif;
  --mono:"Space Mono", ui-monospace, monospace;

  --maxw:1560px;
  --pad:clamp(20px,4.5vw,80px);
  --ease:cubic-bezier(.22,1,.36,1);
  --bg:#f5f4ef;
  /* set by site.js via ResizeObserver — fallback until JS runs */
  --nav-h:70px;
}

*{box-sizing:border-box;margin:0;padding:0;}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--read);
  font-size:clamp(16px,1.08vw,19px);
  line-height:1.55;
  overflow-x:hidden;
  cursor:none;
}
@media (hover:none){ body{cursor:auto;} }

img{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
::selection{background:var(--accent);color:var(--cream);}

/* ---------- type ---------- */
.mono{font-family:var(--mono);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;}
.serif-italic{font-weight:400;font-style:normal;}
h1,h2,h3{font-family:var(--serif);font-weight:800;line-height:1.05;letter-spacing:-.02em;}
h1 em,h2 em,h3 em{font-style:normal;}
.display{
  font-family:var(--serif);
  font-size:clamp(3.4rem,13vw,12rem);
  line-height:.86;
  letter-spacing:-.02em;
}

/* ---------- layout helpers ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad);}
.full{padding-inline:var(--pad);}
.hr{height:1px;background:var(--line);border:0;}

/* ============================================================
   CUSTOM CURSOR
   ============================================================ */
.cursor{
  position:fixed;top:0;left:0;z-index:9999;pointer-events:none;
  width:14px;height:14px;border-radius:50%;
  background:var(--accent);
  mix-blend-mode:difference;
  transform:translate(-50%,-50%);
  transition:width .3s var(--ease),height .3s var(--ease),background .3s var(--ease);
}
.cursor-ring{
  position:fixed;top:0;left:0;z-index:9998;pointer-events:none;
  width:46px;height:46px;border-radius:50%;
  border:1px solid var(--accent);
  transform:translate(-50%,-50%);
  transition:width .35s var(--ease),height .35s var(--ease),opacity .3s,border-color .3s;
}
.cursor-label{
  position:fixed;top:0;left:0;z-index:9999;pointer-events:none;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--cream);background:var(--accent);
  padding:.5em .8em;border-radius:100px;white-space:nowrap;
  transform:translate(-50%,-50%) scale(.4);opacity:0;
  transition:transform .3s var(--ease),opacity .25s,background .3s;
}
body.cur-hover .cursor{width:8px;height:8px;}
body.cur-hover .cursor-ring{width:64px;height:64px;border-color:var(--accent);}
body.cur-view .cursor{opacity:0;}
body.cur-view .cursor-ring{width:0;height:0;opacity:0;}
body.cur-view .cursor-label{transform:translate(-50%,-50%) scale(1);opacity:1;}

/* ============================================================
   PAGE TRANSITION OVERLAY
   ============================================================ */
.transition{
  position:fixed;inset:0;z-index:10000;pointer-events:none;
  background:var(--accent);
  transform:scaleY(0);transform-origin:bottom;
}
.transition.cover{transform:scaleY(1);transform-origin:bottom;transition:transform .55s var(--ease);}
.transition.reveal{transform:scaleY(0);transform-origin:top;transition:transform .6s var(--ease);}
.transition .t-word{
  position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--serif);font-style:italic;color:var(--cream);
  font-size:clamp(2rem,7vw,5rem);opacity:0;transition:opacity .3s;
}
.transition.cover .t-word{opacity:1;}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed;top:0;left:0;width:100%;z-index:200;
  display:flex;align-items:center;justify-content:space-between;
  padding:clamp(18px,2.4vw,30px) var(--pad);
  background:rgba(245,244,239,.85);
  backdrop-filter:blur(18px) saturate(1.4);
  -webkit-backdrop-filter:blur(18px) saturate(1.4);
  border-bottom:1px solid var(--line);
  color:var(--ink);
}
.nav a{color:var(--ink);}
.nav .brand{font-family:var(--serif);font-size:1.5rem;letter-spacing:.01em;font-weight:400;}
.nav .brand b{font-style:normal;font-weight:700;}
.nav .links{display:flex;gap:clamp(16px,2vw,40px);align-items:center;}
.nav .links a{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  position:relative;padding-block:4px;
}
.nav .links a::after{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--ink);
  transform:scaleX(0);transform-origin:right;transition:transform .4s var(--ease);
}
.nav .links a:hover::after,.nav .links a[aria-current="page"]::after{transform:scaleX(1);transform-origin:left;}
.nav .links a[aria-current="page"]{opacity:1;}

/* ============================================================
   FOOTER
   ============================================================ */
.foot{
  background:var(--ink);color:var(--cream);
  padding:clamp(50px,8vw,120px) var(--pad) clamp(30px,4vw,48px);
  position:relative;
}
.foot .big{
  font-family:var(--serif);font-size:clamp(2.2rem,7vw,6rem);line-height:1;font-weight:700;
  display:flex;flex-wrap:wrap;gap:0 .3em;align-items:baseline;
}
.foot .big a{transition:color .3s;}
.foot .big a:hover{color:var(--teal);}
.foot .row{
  display:flex;flex-wrap:wrap;gap:24px;justify-content:space-between;
  margin-top:clamp(40px,6vw,90px);
  font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.6);
}
.foot .row a:hover{color:var(--teal);}

/* ============================================================
   REVEAL ANIMATIONS
   ============================================================ */
.reveal{opacity:0;transform:translateY(34px);transition:opacity .9s var(--ease),transform .9s var(--ease);}
.reveal.in{opacity:1;transform:none;}
.reveal-d1{transition-delay:.08s;}
.reveal-d2{transition-delay:.16s;}
.reveal-d3{transition-delay:.24s;}

.clip{clip-path:inset(0 0 100% 0);transition:clip-path 1s var(--ease);}
.clip.in{clip-path:inset(0 0 0 0);}

.line-mask{display:block;overflow:hidden;}
.line-mask>span{display:block;transform:translateY(110%);transition:transform .9s var(--ease);}
.line-mask.in>span{transform:none;}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.7em;
  font-family:var(--mono);font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;
  border:1px solid var(--ink);border-radius:100px;
  padding:1.05em 1.7em;background:transparent;color:var(--ink);
  position:relative;overflow:hidden;isolation:isolate;
}
.btn span{position:relative;z-index:2;transition:color .4s var(--ease);}
.btn::before{
  content:"";position:absolute;inset:0;z-index:1;background:var(--accent);
  transform:translateY(101%);transition:transform .45s var(--ease);
}
.btn:hover::before{transform:translateY(0);}
.btn:hover span{color:var(--cream);}

/* marquee */
.marquee{display:flex;overflow:hidden;white-space:nowrap;user-select:none;}
.marquee__inner{display:flex;flex-shrink:0;animation:marq 80s linear infinite;}
.marquee:hover .marquee__inner{animation-play-state:paused;}
.marquee span{font-family:var(--serif);font-size:clamp(1.8rem,5vw,4rem);padding-inline:.35em;font-weight:700;}
.marquee .dot{align-self:center;}
@keyframes marq{to{transform:translateX(-50%);}}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001s!important;transition-duration:.001s!important;}
  .reveal,.clip{opacity:1!important;transform:none!important;clip-path:none!important;}
  .line-mask>span{transform:none!important;}
}

/* ============================================================
   MOBILE / TOUCH
   ============================================================ */
@media (hover:none){
  body{cursor:auto;}
  .btn,.chip,.pill,.card,.work,.disc,.ov__close,.ov__next{cursor:pointer!important;}
}

@media(max-width:540px){
  .nav .brand{font-size:1.2rem;}
  .nav .links{gap:clamp(8px,2.8vw,14px);}
  .nav .links a{font-size:.6rem;letter-spacing:.08em;}
}

@media(max-width:480px){
  .foot .big{font-size:clamp(1.8rem,7.5vw,3.4rem);}
  .marquee span{font-size:clamp(1.4rem,5vw,3rem);}
  .btn{font-size:.68rem;padding:.9em 1.4em;}
}