/* =========================================================================
   AUDREY SAINT-PALAIS — Portfolio
   Shared design system : warm, crafted, branding-studio sensibility
   ========================================================================= */

/* ---- Design tokens ---- */
:root{
  /* Monochrome neutrals (grayscale) */
  --paper:      #EDEDEC;   /* light neutral ground */
  --paper-2:    #E3E3E1;   /* deeper panel gray */
  --paper-3:    #D7D7D4;   /* card / inset */
  --ink:        #161616;   /* near-black */
  --ink-soft:   #4A4A4A;   /* mid-grey body text */
  --ink-faint:  #8C8C8A;   /* muted captions */

  /* The ONE accent — yellow #DF9B24 (R223 G155 B36) */
  --honey:      #DF9B24;   /* bright accent — fills, marks, large display */
  --amber:      #DF9B24;   /* same single hue */
  --honey-deep: #B5810F;   /* darker shade for small text legibility on light */

  --line:       #C4C4C0;   /* hairline */
  --line-soft:  rgba(20,20,20,.14);

  /* Type — modern grotesque display + grotesque body + mono labels */
  --serif: "Bricolage Grotesque", system-ui, sans-serif; /* display face (kept var name for compat) */
  --sans:  "Hanken Grotesk", system-ui, sans-serif;
  --mono:  "Space Mono", ui-monospace, monospace;

  /* Motion */
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

*{ box-sizing:border-box; }
html{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.55;
  letter-spacing:.005em;
  overflow-x:hidden;
}

/* Paper grain overlay (subtle, applied to body::before by pages) */
.grain::before{
  content:""; position:fixed; inset:0; z-index:9000; pointer-events:none;
  opacity:.05; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- Type helpers ---- */
.serif{ font-family:var(--serif); font-weight:400; }
.mono{ font-family:var(--mono); }
.tag{
  font-family:var(--mono); font-size:11px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink-faint);
}
.tag-ink{ color:var(--ink); }

h1,h2,h3{ font-weight:400; margin:0; }
a{ color:inherit; text-decoration:none; }

/* ---- Custom cursor dot (expressive) ---- */
.cursor-dot{
  position:fixed; top:0; left:0; width:10px; height:10px; border-radius:50%;
  background:var(--ink); z-index:9500; pointer-events:none;
  transform:translate(-50%,-50%); transition:width .25s var(--ease), height .25s var(--ease), background .25s;
  mix-blend-mode:multiply;
}
.cursor-dot.grow{ width:54px; height:54px; background:var(--honey); }
.cursor-dot.grow-ink{ width:54px; height:54px; background:var(--ink); }
@media (hover:none){ .cursor-dot{ display:none; } }

/* ---- Shared persistent header (interior pages) ---- */
.topbar{
  position:fixed; top:0; left:0; right:0; z-index:200;
  display:flex; align-items:center; justify-content:space-between;
  padding:22px 40px; mix-blend-mode:normal;
}
.topbar .brand{
  display:flex; align-items:baseline; gap:14px;
}
.topbar .brand .mono-mark{
  font-family:var(--mono); font-size:13px; letter-spacing:.1em;
  border:1px solid var(--line); border-radius:50%; width:38px; height:38px;
  display:grid; place-items:center; flex:none;
}
.topbar .brand .name{ font-family:var(--serif); font-size:24px; line-height:1; }

.disc-switch{ display:flex; align-items:center; gap:4px; font-family:var(--mono);
  font-size:12px; letter-spacing:.12em; text-transform:uppercase; }
.disc-switch a{
  padding:8px 14px; border-radius:999px; color:var(--ink-faint); white-space:nowrap;
  transition:color .3s, background .3s;
}
.disc-switch a.active{ color:var(--ink); background:var(--paper-3); }
.disc-switch a:hover{ color:var(--ink); }

/* ---- Footer ---- */
.site-foot{
  border-top:1px solid var(--line-soft);
  padding:54px 40px 46px;
  display:flex; flex-wrap:wrap; gap:30px; justify-content:space-between; align-items:flex-end;
}
.site-foot .big{
  font-family:var(--serif); font-size:clamp(40px,7vw,96px); line-height:.95; max-width:14ch;
}
.site-foot .big em{ color:var(--honey); }
.site-foot .meta{ font-family:var(--mono); font-size:12px; letter-spacing:.06em;
  color:var(--ink-soft); line-height:2; text-align:right; }
.site-foot .meta a:hover{ color:var(--honey-deep); }

/* ---- Buttons / link affordances ---- */
.link-arrow{
  font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  display:inline-flex; align-items:center; gap:10px;
}
.link-arrow .ar{ transition:transform .4s var(--ease); }
.link-arrow:hover .ar{ transform:translateX(8px); }

/* ---- image-slot baseline look ---- */
image-slot{
  --is-bg:var(--paper-3);
  background:var(--paper-3);
  display:block;
}

/* reveal on scroll */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .9s var(--ease-out), transform .9s var(--ease-out); }
.reveal.in{ opacity:1; transform:none; }

/* utility */
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }

/* ---- Mobile ---- */
@media (max-width:760px){
  body{ overflow-x:hidden; }

  .topbar{ padding:14px 18px; flex-wrap:wrap; gap:10px 12px;
    background:color-mix(in srgb, var(--paper) 92%, transparent);
    backdrop-filter:blur(10px); }
  .topbar .brand{ gap:10px; }
  .topbar .brand .mono-mark{ width:32px; height:32px; font-size:11px; }
  .topbar .brand .name{ font-size:16px; }
  .disc-switch{ font-size:10.5px; gap:2px; margin-left:auto; }
  .disc-switch a{ padding:6px 9px; }

  .site-foot{ padding:44px 24px 40px; gap:24px; flex-direction:column; align-items:flex-start; }
  .site-foot .big{ font-size:clamp(30px,10vw,46px); max-width:100%; }
  .site-foot .meta{ text-align:left; font-size:11.5px; line-height:1.9; }
  .site-foot .meta a{ overflow-wrap:anywhere; }
}