/* =========================================================
   INFINITE SELF — DESIGN TOKENS
   A warm, editorial "modern vintage" cosmetics identity.
   Signature motif: a single clipped corner (echoes the angular
   cut of the wordmark) used sparingly on cards, buttons, images.
   ========================================================= */

:root{
  /* -- palette (from brand board) -- */
  --c-cream:        #FBF8F4;   /* page background */
  --c-cream-deep:    #F3EDE6;   /* alternate section background */
  --c-blush:         #F9DCCF;   /* soft accent / tags */
  --c-gold:          #EFB768;   /* primary accent — CTAs, highlights */
  --c-gold-deep:     #D99C46;   /* gold hover state */
  --c-terracotta:    #E79D71;   /* secondary accent */
  --c-denim:         #5F84A6;   /* brand accent — links, icons */
  --c-denim-deep:    #48657F;   /* denim hover / pressed */
  --c-ink:           #16213A;   /* primary text */
  --c-ink-soft:      #52596B;   /* secondary text */
  --c-line:          #E4DACE;   /* hairline borders */
  --c-white:         #FFFFFF;

  /* -- type -- */
  --f-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --f-body:    "Manrope", "Helvetica Neue", Arial, sans-serif;

  /* -- geometry -- */
  --cut: 22px;                 /* signature clipped-corner size */
  --radius-sm: 3px;
  --shadow-card: 0 1px 2px rgba(22,33,58,.04), 0 10px 24px -12px rgba(22,33,58,.14);
  --container: 1240px;
}

/* -------- reset -------- */
*, *::before, *::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--c-cream);
  color:var(--c-ink);
  font-family:var(--f-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; height:auto; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; cursor:pointer; }
input, textarea, select{ font-family:inherit; font-size:1rem; }

:focus-visible{
  outline:2px solid var(--c-denim);
  outline-offset:3px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

/* -------- type scale -------- */
h1,h2,h3,h4{
  font-family:var(--f-display);
  color:var(--c-ink);
  line-height:1.08;
  margin:0 0 .5em;
  font-weight:600;
  letter-spacing:-.01em;
}
h1{ font-size:clamp(2.4rem, 3.2vw + 1.2rem, 4.4rem); }
h2{ font-size:clamp(1.9rem, 2vw + 1rem, 3rem); }
h3{ font-size:clamp(1.3rem, 1vw + 1rem, 1.7rem); }
h4{ font-size:1.15rem; }
p{ margin:0 0 1em; color:var(--c-ink-soft); }

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.6em;
  font-family:var(--f-body);
  font-weight:700;
  font-size:.72rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--c-denim-deep);
  margin-bottom:.9em;
}
.eyebrow::before{
  content:"";
  width:22px; height:1px;
  background:var(--c-gold-deep);
}

.container{
  max-width:var(--container);
  margin:0 auto;
  padding:0 28px;
}
.section{ padding:88px 0; }
.section--tight{ padding:56px 0; }
.section--cream-deep{ background:var(--c-cream-deep); }
.section--ink{ background:var(--c-ink); color:var(--c-cream); }
.section--ink h2, .section--ink h3, .section--ink p{ color:var(--c-cream); }

.section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
  margin-bottom:44px;
  flex-wrap:wrap;
}
.section-head p{ max-width:46ch; margin:0; }

/* -------- signature clipped-corner shape -------- */
.clip-tl{ clip-path: polygon(var(--cut) 0, 100% 0, 100% 100%, 0 100%, 0 var(--cut)); }
.clip-br{ clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%); }

/* -------- buttons -------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:.6em;
  padding:15px 30px;
  background:var(--c-ink);
  color:var(--c-cream);
  font-weight:700;
  font-size:.85rem;
  letter-spacing:.05em;
  text-transform:uppercase;
  border:none;
  clip-path: polygon(var(--cut) 0, 100% 0, 100% 100%, 0 100%, 0 var(--cut));
  transition:transform .25s ease, background .25s ease;
}
.btn:hover{ background:var(--c-denim-deep); transform:translateY(-2px); }
.btn-gold{ background:var(--c-gold); color:var(--c-ink); }
.btn-gold:hover{ background:var(--c-gold-deep); color:var(--c-ink); }
.btn-outline{
  background:transparent;
  color:var(--c-ink);
  box-shadow:inset 0 0 0 1.5px var(--c-ink);
  clip-path: polygon(var(--cut) 0, 100% 0, 100% 100%, 0 100%, 0 var(--cut));
}
.btn-outline:hover{ background:var(--c-ink); color:var(--c-cream); }
.section--ink .btn-outline{ box-shadow:inset 0 0 0 1.5px var(--c-cream); color:var(--c-cream); }
.section--ink .btn-outline:hover{ background:var(--c-cream); color:var(--c-ink); }

/* -------- cards -------- */
.card{
  background:var(--c-white);
  box-shadow:var(--shadow-card);
  clip-path: polygon(0 0, 100% 0, 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
}

/* -------- forms -------- */
.field{ margin-bottom:20px; }
.field label{
  display:block;
  font-weight:700;
  font-size:.78rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  margin-bottom:8px;
  color:var(--c-ink);
}
.field input, .field textarea, .field select{
  width:100%;
  padding:14px 16px;
  border:1.5px solid var(--c-line);
  background:var(--c-white);
  border-radius:var(--radius-sm);
  color:var(--c-ink);
}
.field input:focus, .field textarea:focus, .field select:focus{
  border-color:var(--c-denim);
  outline:none;
}

/* -------- utility -------- */
.visually-hidden{
  position:absolute !important;
  width:1px; height:1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
}
.skip-link{
  position:absolute; top:-100px; left:16px;
  background:var(--c-ink); color:var(--c-cream);
  padding:12px 20px; z-index:10000;
  transition:top .2s ease;
}
.skip-link:focus{ top:16px; }