/* =========================================================
   Muskan Mandot — Portfolio
   base.css · tokens, typography, doodle primitives, chrome
   ========================================================= */

/* ---------- reset ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html,
body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd, ul, ol { margin: 0; padding: 0; }

ul[class], ol[class] { list-style: none; }

img, svg, video { display: block; max-width: 100%; }
/* width/height attributes reserve space, but must not beat CSS sizing */
img { height: auto; }

button, input, textarea, select { font: inherit; color: inherit; }

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

/* ---------- tokens ---------- */
:root {
  /* palette — lifted from the portfolio deck */
  --navy:        #12295D;
  --navy-deep:   #0B1B40;
  --navy-soft:   #1D3A75;
  --navy-tint:   #E7ECF6;

  --paper:       #FCFAF5;
  --paper-warm:  #F4EEE2;
  --paper-edge:  #E6DED0;

  --blue:        #3F6F97;   /* doodle ink on paper */
  --blue-soft:   #7B9CB6;
  --sky:         #D6F1FF;   /* doodle ink on navy */
  --sky-mid:     #9AC3DF;

  /* the single accent — teal, the complement of the red this palette
     used to lean on. --accent is tuned to stay legible on paper;
     --accent-lt is its counterpart for anything sitting on navy. */
  --accent:      #0E938A;
  --accent-deep: #0A6F69;
  --accent-lt:   #63D5CB;

  --ink:         var(--navy);
  --bg:          var(--paper);

  /* type — serif for display moments, Inter for the actual reading,
     Caveat kept strictly for hand-written annotations */
  --f-display: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --f-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-hand:    "Caveat", "Bradley Hand", cursive;

  /* rhythm */
  --gut:  clamp(20px, 4vw, 56px);
  /* rails sit inside containers that already carry --gut padding */
  --rail: min(1180px, 100%);
  --rail-narrow: min(680px, 100%);

  /* motion */
  --e-out:  cubic-bezier(.22, .8, .28, 1);
  --e-soft: cubic-bezier(.4, 0, .2, 1);
  --e-back: cubic-bezier(.34, 1.56, .64, 1);
}

/* ---------- page ---------- */
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* clip, not hidden — hidden would turn the root into a scroll container
     and break the sticky stage on the home page */
  overflow-x: clip;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f-body);
  font-weight: 400;
  font-size: clamp(15px, .48vw + 13.6px, 17px);
  line-height: 1.62;
  letter-spacing: .002em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

body.is-navy { background: var(--navy); color: var(--paper); }

::selection { background: var(--accent); color: #fff; }

/* ---------- type scale ----------
   Only .display reaches for the serif. Plain headings stay in Inter so
   card titles and UI labels read as interface, not as decoration. */
.display {
  font-family: var(--f-display);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -.021em;
  text-wrap: balance;
}

h1, h2, h3, h4 {
  font-family: var(--f-body);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -.017em;
  text-wrap: balance;
}

.d-xxl { font-size: clamp(3.6rem, 12.5vw, 11.5rem); }
.d-xl  { font-size: clamp(2.9rem, 7.4vw, 6.8rem); }
.d-lg  { font-size: clamp(2.3rem, 5vw, 4.3rem); }
.d-md  { font-size: clamp(1.8rem, 3.1vw, 2.8rem); }
.d-sm  { font-size: clamp(1.35rem, 1.9vw, 1.8rem); }

/* an italic-ish emphasis inside display lines, without a second font file */
.display em { font-style: italic; }

.hand {
  font-family: var(--f-hand);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: .01em;
}
.hand-lg { font-size: clamp(1.5rem, 2.6vw, 2.35rem); }
.hand-md { font-size: clamp(1.15rem, 1.5vw, 1.5rem); }
.hand-sm { font-size: clamp(1rem, 1.1vw, 1.2rem); }

/* the quiet, professional section label */
.eyebrow {
  font-family: var(--f-body);
  font-weight: 600;
  font-size: .76rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--blue);
}
.is-navy .eyebrow,
.on-navy .eyebrow { color: var(--sky-mid); }

/* the playful one — same slot in the layout, hand-written instead */
.eyebrow--hand {
  font-family: var(--f-hand);
  font-weight: 700;
  font-size: clamp(1.05rem, 1.3vw, 1.35rem);
  letter-spacing: .02em;
  text-transform: none;
}

.label {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--blue);
}
.is-navy .label,
.on-navy .label { color: var(--sky-mid); }

.lede {
  font-size: clamp(1.05rem, 1.15vw, 1.28rem);
  line-height: 1.66;
}

.prose p + p { margin-top: 1.05em; }
.prose { max-width: 66ch; }

.muted { opacity: .72; }

/* ---------- doodle primitives ---------- */

/* wobbly hand-drawn boxes — four rotations so repeats never look stamped */
.dd-box {
  border: 2px solid currentColor;
  border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
}
.dd-box--2 { border-radius: 15px 225px 15px 255px / 225px 15px 255px 15px; }
.dd-box--3 { border-radius: 225px 15px 255px 15px / 15px 255px 15px 225px; }
.dd-box--4 { border-radius: 15px 255px 15px 225px / 255px 15px 225px 15px; }

/* squiggly underline drawn with an inline svg */
.dd-underline { position: relative; display: inline-block; }
.dd-underline::after {
  content: "";
  position: absolute;
  left: -2%;
  right: -2%;
  bottom: -.08em;
  height: .3em;
  background: no-repeat center / 100% 100%
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M2 9c22-6 43 2 66-1s38-7 62-3 44 7 68 2' fill='none' stroke='%230E938A' stroke-width='3.4' stroke-linecap='round'/%3E%3C/svg%3E");
  pointer-events: none;
}
.dd-underline--blue::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M2 9c22-6 43 2 66-1s38-7 62-3 44 7 68 2' fill='none' stroke='%233F6F97' stroke-width='3.4' stroke-linecap='round'/%3E%3C/svg%3E");
}
.dd-underline--sky::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M2 9c22-6 43 2 66-1s38-7 62-3 44 7 68 2' fill='none' stroke='%23D6F1FF' stroke-width='3.4' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* circled word, like a pen ring round it */
.dd-circle { position: relative; display: inline-block; padding: 0 .28em; }
.dd-circle::after {
  content: "";
  position: absolute;
  inset: -28% -12%;
  background: no-repeat center / 100% 100%
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 80' preserveAspectRatio='none'%3E%3Cpath d='M112 6C64 3 16 16 9 38c-6 20 34 34 96 36 55 2 108-11 111-32C219 22 179 9 122 6' fill='none' stroke='%230E938A' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
  pointer-events: none;
}

/* hand-drawn horizontal rule */
.dd-rule {
  height: 12px;
  border: 0;
  background: no-repeat center / 100% 100%
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 12' preserveAspectRatio='none'%3E%3Cpath d='M3 7c50-5 96 3 145-1s96-6 145-1 70 5 107 2' fill='none' stroke='%233F6F97' stroke-width='2.2' stroke-linecap='round' opacity='.55'/%3E%3C/svg%3E");
}
.on-navy .dd-rule, .is-navy .dd-rule {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 12' preserveAspectRatio='none'%3E%3Cpath d='M3 7c50-5 96 3 145-1s96-6 145-1 70 5 107 2' fill='none' stroke='%23D6F1FF' stroke-width='2.2' stroke-linecap='round' opacity='.45'/%3E%3C/svg%3E");
}

/* paper texture — faint speckle so flat colour reads like a sketchbook */
.paper-grain { position: relative; }
.paper-grain::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .5;
  background-image:
    radial-gradient(circle at 12% 22%, rgba(63,111,151,.05) 0 1px, transparent 1px),
    radial-gradient(circle at 68% 74%, rgba(63,111,151,.045) 0 1px, transparent 1px),
    radial-gradient(circle at 88% 12%, rgba(63,111,151,.04) 0 1px, transparent 1px);
  background-size: 140px 140px, 190px 190px, 240px 240px;
}

/* generic doodle stroke defaults */
.doodle { overflow: visible; }
.doodle path,
.doodle line,
.doodle circle,
.doodle ellipse,
.doodle polyline { vector-effect: non-scaling-stroke; }
.stroke {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.stroke-thin { stroke-width: 1.7; }
.stroke-thick { stroke-width: 3.4; }

/* ---------- buttons & links ---------- */
.btn {
  --btn-fg: var(--navy);
  display: inline-flex;
  align-items: center;
  gap: .6em;
  padding: .82em 1.55em;
  font-family: var(--f-body);
  font-weight: 600;
  font-size: .95rem;
  letter-spacing: -.005em;
  color: var(--btn-fg);
  background: transparent;
  border: 2.2px solid currentColor;
  border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
  cursor: pointer;
  transition: transform .28s var(--e-back), background-color .28s var(--e-soft),
              color .28s var(--e-soft), box-shadow .28s var(--e-out);
}
.btn:hover,
.btn:focus-visible {
  transform: translate(-2px, -3px) rotate(-1.2deg);
  box-shadow: 4px 5px 0 currentColor;
}
.btn--fill { background: var(--navy); color: var(--paper); border-color: var(--navy); }
.btn--fill:hover, .btn--fill:focus-visible { box-shadow: 4px 5px 0 var(--accent); }
.on-navy .btn, .is-navy .btn { --btn-fg: var(--sky); }

.link-doodle {
  position: relative;
  display: inline-block;
  font-weight: 700;
  padding-bottom: 2px;
}
.link-doodle::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: currentColor;
  transform-origin: right;
  transform: scaleX(0);
  transition: transform .38s var(--e-out);
}
.link-doodle:hover::after,
.link-doodle:focus-visible::after { transform-origin: left; transform: scaleX(1); }

/* ---------- focus ---------- */
:focus-visible {
  outline: 3px dashed var(--accent);
  outline-offset: 4px;
  border-radius: 4px;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 8px;
  z-index: 999;
  padding: .6em 1.1em;
  background: var(--navy);
  color: var(--paper);
  border-radius: 8px;
}
.skip:focus { left: 8px; }

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- site nav ---------- */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px var(--gut);
  pointer-events: none;
  mix-blend-mode: normal;
}
.nav > * { pointer-events: auto; }

/* a quiet backdrop once you're past the top, so the nav never fights the copy */
.nav::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--paper);
  box-shadow: 0 1px 0 rgba(18, 41, 93, .1);
  opacity: 0;
  transition: opacity .3s var(--e-soft), background-color .35s var(--e-soft);
}
.nav.is-stuck::before { opacity: .95; }
body.on-dark-left .nav::before,
body.is-navy .nav::before { background: var(--navy); box-shadow: 0 1px 0 rgba(214, 241, 255, .12); }

/* wordmark only — no logo, just her name and a full stop */
.nav__mark {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  font-family: var(--f-body);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: -.014em;
}
.nav__mark i { font-style: normal; color: var(--accent); }

.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.2vw, 32px);
  font-family: var(--f-body);
  font-weight: 500;
  font-size: .95rem;
  letter-spacing: -.008em;
}
.nav__links a { position: relative; padding: 2px 2px 4px; }
.nav__links a::after {
  content: "";
  position: absolute;
  left: -3px; right: -3px; bottom: -2px;
  height: 8px;
  background: no-repeat center / 100% 100%
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpath d='M2 6c14-4 27 2 44-1s33-4 52 1' fill='none' stroke='%230E938A' stroke-width='3.2' stroke-linecap='round'/%3E%3C/svg%3E");
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .34s var(--e-out);
}
.nav__links a:hover::after,
.nav__links a[aria-current="page"]::after { transform: scaleX(1); }

.nav--float .nav__mark,
.nav--float .nav__links { background: transparent; }

/* nav on navy pages, and on navy panels of the horizontal stage */
body.is-navy .nav,
body.on-dark-left .nav { color: var(--paper); }
.nav { transition: color .35s var(--e-soft); }
body.on-dark-left .nav__links a::after,
body.is-navy .nav__links a::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpath d='M2 6c14-4 27 2 44-1s33-4 52 1' fill='none' stroke='%2363D5CB' stroke-width='3.2' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* ---------- footer ---------- */
.foot {
  position: relative;
  padding: clamp(70px, 9vw, 130px) var(--gut) clamp(36px, 4vw, 56px);
  background: var(--navy);
  color: var(--paper);
  overflow: hidden;
}
.foot__inner {
  width: var(--rail);
  margin: 0 auto;
  position: relative;
  z-index: 2;
}
.foot__big {
  font-size: clamp(2.4rem, 7vw, 6rem);
  line-height: 1;
  margin-bottom: .3em;
}
.foot__row {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 34px;
  align-items: center;
  margin-top: 34px;
}
.foot__mail {
  font-family: var(--f-display);
  font-size: clamp(1.4rem, 2.6vw, 2.2rem);
  font-weight: 400;
  letter-spacing: -.015em;
  color: var(--sky);
}
.foot__meta {
  margin-top: clamp(40px, 6vw, 74px);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  font-size: .82rem;
  opacity: .6;
}
.foot__doodle {
  position: absolute;
  right: -34px;
  bottom: -62px;
  width: clamp(130px, 18vw, 250px);
  color: var(--sky);
  opacity: .32;
  z-index: 1;
  pointer-events: none;
}

/* ---------- cursor companion ---------- */
.cursor-dot {
  position: fixed;
  top: 0; left: 0;
  width: 26px; height: 26px;
  margin: -13px 0 0 -13px;
  border-radius: 50%;
  border: 2px dashed var(--accent);
  pointer-events: none;
  z-index: 200;
  opacity: 0;
  transition: opacity .3s, width .25s var(--e-back), height .25s var(--e-back),
              margin .25s var(--e-back), background-color .25s;
  will-change: transform;
}
.cursor-dot.is-on { opacity: .9; }
.cursor-dot.is-big {
  width: 58px; height: 58px;
  margin: -29px 0 0 -29px;
  background: rgba(255, 59, 42, .1);
}

/* ---------- reveal ---------- */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .8s var(--e-out), transform .8s var(--e-out);
}
.reveal.is-in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: .09s; }
.reveal[data-delay="2"] { transition-delay: .18s; }
.reveal[data-delay="3"] { transition-delay: .27s; }
.reveal[data-delay="4"] { transition-delay: .36s; }
.reveal[data-delay="5"] { transition-delay: .45s; }

/* draws an svg path on when it scrolls into view */
.draw path,
.draw line,
.draw polyline,
.draw circle,
.draw ellipse {
  stroke-dasharray: var(--len, 1200);
  stroke-dashoffset: var(--len, 1200);
  transition: stroke-dashoffset 1.5s var(--e-out);
}
.draw.is-in path,
.draw.is-in line,
.draw.is-in polyline,
.draw.is-in circle,
.draw.is-in ellipse { stroke-dashoffset: 0; }

/* ---------- shared keyframes ---------- */
@keyframes wobble {
  0%, 100% { transform: rotate(0deg); }
  25%      { transform: rotate(-9deg); }
  60%      { transform: rotate(7deg); }
}
@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}
@keyframes sway {
  0%, 100% { transform: rotate(-2.5deg); }
  50%      { transform: rotate(2.5deg); }
}
@keyframes drift {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  33%      { transform: translate(6px, -9px) rotate(4deg); }
  66%      { transform: translate(-5px, 5px) rotate(-3deg); }
}
@keyframes blink {
  0%, 92%, 100% { transform: scaleY(1); }
  95%           { transform: scaleY(.08); }
}
@keyframes dash-run { to { stroke-dashoffset: -160; } }
@keyframes pop-in {
  from { opacity: 0; transform: scale(.6) rotate(-14deg); }
  to   { opacity: 1; transform: scale(1) rotate(0deg); }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .draw path, .draw line, .draw polyline, .draw circle, .draw ellipse {
    stroke-dashoffset: 0;
  }
  .cursor-dot { display: none; }
}