/* ============================================
   EMMA ROUK — EXPEDIENTE PERSONAL (v2)
   Design concept: personal "dossier" — folder
   tabs for navigation, rubber-stamp badges,
   now tuned to Emma's real brand guide:
   EMMA / ROUK boxed logo, black+white base,
   teal / berry / gold / red accent family,
   Poppins + Anton typography, a torn-paper
   accent nodding to Gusto Magazine.
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Anton&family=Poppins:ital,wght@0,400;0,500;0,600;0,700;0,800;1,500&family=Caveat:wght@600;700&display=swap');

:root{
  /* Color tokens — pulled from Emma Rouk's brand guide */
  --ink:        #000000;   /* primary — brand black */
  --ink-soft:   #3a3a3a;   /* softened black for secondary text */
  --paper:      #F2F1EF;   /* near her secondary grey #e1e0e3 — page canvas */
  --paper-2:    #E7E5E1;   /* deeper panel tone, still from her grey family */
  --line:       #C7C5C6;   /* her secondary grey — hairlines, dividers */

  --stamp-red:  #EB0000;   /* her secondary red — stamp ink, primary accent */
  --teal-deep:  #086C88;   /* her secondary teal — links, structure */
  --teal:       #19A2B0;   /* lighter teal — hover/secondary */
  --berry:      #BF5188;   /* her secondary berry/pink — highlight accent */
  --gold:       #E6AB0B;   /* her secondary gold — tags, stamps */
  --olive:      #7B9A5E;   /* her secondary olive — "aprobado" stamp */
  --purple:     #8E28BD;   /* her secondary purple */
  --orange:     #FF914D;   /* her secondary orange */
  --blue:       #02A6E7;   /* her secondary blue */
  --pink-hot:   #F6275D;   /* her secondary hot pink */

  --radius-tab: 10px 10px 0 0;
  --radius-card: 4px;
  --max-w: 1120px;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }

body{
  margin:0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Poppins', sans-serif;
  font-size: 16.5px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1,h2,h3,h4{
  font-family: 'Anton', sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .01em;
  line-height: 1.05;
  margin: 0 0 .4em;
  color: var(--ink);
}

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

.mono{
  font-family: 'Poppins', sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 600;
}

.eyebrow{
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--stamp-red);
  display: inline-flex;
  align-items: center;
  gap: .6em;
  margin-bottom: .9em;
}
.eyebrow::before{
  content: "";
  width: 22px; height: 1px;
  background: var(--stamp-red);
  display:inline-block;
}

.wrap{
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 28px;
}

/* ---------- SKIP LINK / FOCUS ---------- */
.skip-link{
  position:absolute; left:-999px; top:0;
  background: var(--ink); color: var(--paper);
  padding: 10px 16px; z-index: 999;
  font-family:'Poppins',sans-serif; font-size:13px;
}
.skip-link:focus{ left: 12px; top: 12px; }

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

/* ============================================
   LOGO MARK — "EMMA / ROUK" boxed lockup,
   taken directly from Emma's brand guide
   ============================================ */
.logo-mark{
  display:inline-flex;
  align-items:center;
  gap: 12px;
  border: 1.4px solid var(--ink);
  padding: 7px 16px;
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: .22em;
  text-transform: uppercase;
}
.logo-mark .divider{
  width: 1px;
  height: 16px;
  background: var(--ink);
  transform: rotate(14deg);
  display:inline-block;
}

/* ============================================
   HEADER / FOLDER-TAB NAVIGATION
   ============================================ */
.site-header{
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--paper);
  padding-top: 18px;
}

.header-row{
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 28px 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}

.brand{
  padding-bottom: 14px;
  white-space: nowrap;
}

nav.tabs{
  display:flex;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  flex: 1;
  justify-content: flex-end;
}
nav.tabs::-webkit-scrollbar{ display:none; }

nav.tabs a{
  font-family:'Poppins', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 10px 16px 9px;
  background: var(--paper-2);
  border-radius: var(--radius-tab);
  color: var(--ink-soft);
  white-space: nowrap;
  border: 1px solid var(--line);
  border-bottom: none;
  position: relative;
  top: 1px;
  transition: background .18s ease, color .18s ease, transform .18s ease;
}
nav.tabs a:hover{ background:#DCD8D2; transform: translateY(-2px); }

nav.tabs a.active{
  background: var(--paper);
  color: var(--stamp-red);
  font-weight: 700;
  border-bottom: 1px solid var(--paper);
}

.header-rule{
  border-bottom: 1.4px solid var(--ink);
  max-width: var(--max-w);
  margin: 0 auto;
}

.mobile-toggle{
  display:none;
  font-family:'Poppins',sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  background: var(--ink);
  color: var(--paper);
  border: none;
  padding: 9px 14px;
  border-radius: var(--radius-card);
  cursor:pointer;
}

/* ============================================
   STAMP COMPONENT — signature element
   ============================================ */
.stamp{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  border: 2px solid var(--stamp-red);
  color: var(--stamp-red);
  padding: 9px 16px;
  border-radius: 999px;
  transform: rotate(-6deg);
  white-space: nowrap;
  position: relative;
}
.stamp::after{
  content:"";
  position:absolute; inset: 3px;
  border: 1px dashed var(--stamp-red);
  border-radius: 999px;
  opacity: .55;
}
.stamp.green{ color: var(--teal-deep); border-color: var(--teal-deep); }
.stamp.gold{ color: var(--gold); border-color: var(--gold); }
.stamp.purple{ color: var(--purple); border-color: var(--purple); }
.stamp.blue{ color: var(--blue); border-color: var(--blue); }
.stamp.tilt-r{ transform: rotate(5deg); }

/* fade/pop-in for stamps + reveal blocks */
[data-reveal]{
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .55s ease, transform .55s ease;
}
[data-reveal].is-visible{
  opacity: 1;
  transform: translateY(0);
}

/* ============================================
   TORN PAPER DIVIDER — nod to Gusto Magazine
   ============================================ */
.torn-edge{
  height: 22px;
  width: 100%;
  background: var(--ink);
  clip-path: polygon(
    0% 100%, 3% 40%, 7% 90%, 11% 30%, 15% 75%, 19% 15%, 23% 60%,
    27% 10%, 31% 55%, 35% 5%, 39% 45%, 43% 0%, 47% 40%, 51% 8%,
    55% 50%, 59% 12%, 63% 62%, 67% 18%, 71% 58%, 75% 22%, 79% 65%,
    83% 20%, 87% 70%, 91% 25%, 95% 60%, 100% 30%, 100% 100%
  );
}
.torn-edge + section{ padding-top: 40px; }

/* ============================================
   HERO / DOSSIER COVER
   ============================================ */
.hero{
  padding: 64px 0 56px;
  position: relative;
}
.hero-grid{
  display:grid;
  grid-template-columns: 1.5fr .9fr;
  gap: 40px;
  align-items: start;
}
.hero h1{
  font-size: clamp(46px, 7.5vw, 88px);
}
.hero .lede{
  font-family: 'Poppins', sans-serif;
  font-size: 18px;
  color: var(--ink-soft);
  max-width: 46ch;
  margin-top: 14px;
}
.hero-stamp-col{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap: 18px;
  padding-top: 8px;
}
.file-tag{
  font-family:'Poppins',sans-serif;
  font-size: 12px;
  color: var(--ink-soft);
  border: 1px solid var(--line);
  background: var(--paper-2);
  padding: 10px 14px;
  max-width: 220px;
  text-align: right;
  line-height: 1.7;
}

.cta-row{ display:flex; gap:14px; margin-top: 28px; flex-wrap: wrap; }

.btn{
  font-family:'Poppins', sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 13px 22px;
  border-radius: var(--radius-card);
  display:inline-block;
  border: 1.4px solid var(--ink);
  transition: transform .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
}
.btn-solid{ background: var(--ink); color: var(--paper); }
.btn-solid:hover{ background: var(--stamp-red); border-color: var(--stamp-red); transform: translateY(-2px); }
.btn-line:hover{ background: var(--ink); color: var(--paper); transform: translateY(-2px); }

/* ============================================
   SECTIONS / CARDS
   ============================================ */
section{ padding: 56px 0; }
section.divider-top{ border-top: 1px solid var(--line); }

.section-head{
  display:flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  margin-bottom: 34px;
  flex-wrap: wrap;
}
.section-head h2{ font-size: clamp(26px,4vw,40px); }

.grid{
  display:grid;
  gap: 22px;
}
.grid.cols-4{ grid-template-columns: repeat(4,1fr); }
.grid.cols-3{ grid-template-columns: repeat(3,1fr); }
.grid.cols-2{ grid-template-columns: repeat(2,1fr); }

.card{
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 26px 22px;
  position: relative;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card:hover{ transform: translateY(-4px); box-shadow: 0 10px 24px rgba(0,0,0,0.08); border-color: var(--stamp-red); }
.card h3{ font-family:'Anton', sans-serif; font-size: 19px; margin-bottom: 8px; text-transform: uppercase; }
.card p{ color: var(--ink-soft); font-size: 15px; margin: 0; }
.card .tag{
  font-family:'Poppins',sans-serif;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--stamp-red);
  margin-bottom: 10px;
  display:block;
}
.card a.card-link{ position:absolute; inset:0; border-radius: var(--radius-card); }

/* ---- Color cycling: each card/row/entry in a sequence picks up
   a different hue from Emma's secondary palette, so the whole
   site reads as colorful and eclectic like her mood board ---- */
.grid .card{ border-left: 4px solid var(--line); }
.grid .card:nth-child(1){ border-left-color: var(--teal-deep); }
.grid .card:nth-child(1) .tag{ color: var(--teal-deep); }
.grid .card:nth-child(2){ border-left-color: var(--berry); }
.grid .card:nth-child(2) .tag{ color: var(--berry); }
.grid .card:nth-child(3){ border-left-color: var(--gold); }
.grid .card:nth-child(3) .tag{ color: var(--gold); }
.grid .card:nth-child(4){ border-left-color: var(--purple); }
.grid .card:nth-child(4) .tag{ color: var(--purple); }
.grid .card:nth-child(5){ border-left-color: var(--orange); }
.grid .card:nth-child(5) .tag{ color: var(--orange); }
.grid .card:nth-child(6){ border-left-color: var(--blue); }
.grid .card:nth-child(6) .tag{ color: var(--blue); }

.row:nth-child(1) .when{ color: var(--teal-deep); }
.row:nth-child(2) .when{ color: var(--berry); }
.row:nth-child(3) .when{ color: var(--gold); }
.row:nth-child(4) .when{ color: var(--purple); }
.row:nth-child(5) .when{ color: var(--orange); }

.entry:nth-child(1) .meta{ color: var(--teal-deep); }
.entry:nth-child(2) .meta{ color: var(--berry); }
.entry:nth-child(3) .meta{ color: var(--gold); }

/* ---- Rainbow color strip — a nod to the umbrella/spectrum
   mood board image in Emma's brand guide ---- */
.color-strip{
  display:flex;
  height: 6px;
  width: 100%;
}
.color-strip span{ flex:1; }
.color-strip span:nth-child(1){ background: var(--stamp-red); }
.color-strip span:nth-child(2){ background: var(--orange); }
.color-strip span:nth-child(3){ background: var(--gold); }
.color-strip span:nth-child(4){ background: var(--olive); }
.color-strip span:nth-child(5){ background: var(--teal); }
.color-strip span:nth-child(6){ background: var(--teal-deep); }
.color-strip span:nth-child(7){ background: var(--blue); }
.color-strip span:nth-child(8){ background: var(--purple); }
.color-strip span:nth-child(9){ background: var(--berry); }
.color-strip span:nth-child(10){ background: var(--pink-hot); }

/* ---- Dot grid — nods to the dotted index page in Emma's
   brand guide, used as a small decorative flourish ---- */
.dot-grid{
  display:grid;
  grid-template-columns: repeat(6, 8px);
  grid-template-rows: repeat(3, 8px);
  gap: 6px;
}
.dot-grid span{ width:6px; height:6px; border-radius:50%; }
.dot-grid span:nth-child(6n+1){ background: var(--stamp-red); }
.dot-grid span:nth-child(6n+2){ background: var(--gold); }
.dot-grid span:nth-child(6n+3){ background: var(--teal-deep); }
.dot-grid span:nth-child(6n+4){ background: var(--berry); }
.dot-grid span:nth-child(6n+5){ background: var(--purple); }
.dot-grid span:nth-child(6n){ background: var(--orange); }

.folio-num{
  font-family:'Poppins',sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--ink-soft);
  opacity: .7;
}

/* pull quote */
blockquote{
  font-family:'Caveat', cursive;
  font-size: clamp(26px,3.4vw,36px);
  font-weight: 700;
  border-left: 3px solid var(--stamp-red);
  padding-left: 26px;
  margin: 26px 0;
  color: var(--ink);
}

/* timeline / list rows used across pages */
.rows{ display:flex; flex-direction:column; }
.row{
  display:grid;
  grid-template-columns: 130px 1fr;
  gap: 22px;
  padding: 22px 0;
  border-top: 1px solid var(--line);
}
.row:first-child{ border-top: 1px solid var(--line); }
.row .when{ font-family:'Poppins',sans-serif; font-size: 12px; font-weight: 700; letter-spacing:.08em; text-transform:uppercase; color: var(--stamp-red); }
.row h4{ font-family:'Anton', sans-serif; text-transform:uppercase; font-size: 18px; margin-bottom: 4px; }
.row p{ color: var(--ink-soft); margin: 0; font-size: 15px; }

/* journal entries */
.entry{ padding: 30px 0; border-top: 1px solid var(--line); }
.entry:first-child{ border-top: none; }
.entry .meta{
  display:flex; gap: 14px; align-items:center;
  font-family:'Poppins',sans-serif; font-size: 11px; font-weight: 600; color: var(--ink-soft);
  margin-bottom: 10px; text-transform:uppercase; letter-spacing:.08em;
}
.entry h3{ font-family:'Anton', sans-serif; text-transform: uppercase; font-size: 24px; margin-bottom: 8px; }
.entry p{ color: var(--ink-soft); max-width: 68ch; }

/* contact */
.contact-block{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 40px;
  align-items: start;
}
.big-link{
  font-family:'Anton', sans-serif;
  text-transform: uppercase;
  font-size: clamp(28px,4.6vw,46px);
  border-bottom: 3px solid var(--stamp-red);
  display:inline-block;
  padding-bottom: 4px;
}
.social-list{ list-style:none; padding:0; margin: 24px 0 0; }
.social-list li{ border-top: 1px solid var(--line); padding: 14px 0; }
.social-list li:first-child{ border-top:none; }
.social-list a{ font-family:'Poppins',sans-serif; font-size: 14px; font-weight: 600; display:flex; justify-content:space-between; }
.social-list a:hover{ color: var(--stamp-red); }

/* ============================================
   FOOTER
   ============================================ */
footer{
  background: var(--ink);
  color: var(--paper);
  padding: 40px 0 30px;
  margin-top: 40px;
}
footer .wrap{
  display:flex;
  justify-content: space-between;
  align-items:center;
  flex-wrap: wrap;
  gap: 16px;
}
footer .mono{ font-size: 11px; color: #C7C5C6; font-weight: 500; }
footer .foot-stamp{
  border-color: var(--paper);
  color: var(--paper);
}
footer .foot-stamp::after{ border-color: var(--paper); }

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 860px){
  .hero-grid{ grid-template-columns: 1fr; }
  .hero-stamp-col{ align-items:flex-start; flex-direction:row; }
  .grid.cols-4{ grid-template-columns: repeat(2,1fr); }
  .grid.cols-3{ grid-template-columns: repeat(2,1fr); }
  .contact-block{ grid-template-columns: 1fr; }
  .row{ grid-template-columns: 1fr; gap: 6px; }
}

@media (max-width: 620px){
  .mobile-toggle{ display:inline-block; }
  nav.tabs{
    display:none;
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    background: var(--paper);
    padding: 10px 16px 16px;
    border-bottom: 1.4px solid var(--ink);
  }
  nav.tabs.open{ display:flex; }
  nav.tabs a{ border-radius: var(--radius-card); top:0; }
  .header-row{ position: relative; flex-wrap: wrap; }
  .grid.cols-4, .grid.cols-3, .grid.cols-2{ grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  [data-reveal]{ transition: none; opacity:1; transform:none; }
  .card, nav.tabs a, .btn{ transition: none; }
}