/* ============================================================
   CR Solutions — shared styles
   Fonts: Oswald (display), Public Sans (body), IBM Plex Mono (utility)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Public+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root{
  --ink:#15191c;
  --graphite:#262b2f;
  --slate:#435159;
  --slate-light:#7f8d93;
  --stone:#eeece6;
  --stone-2:#e2ddd0;
  --stone-3:#d9d2c2;
  --amber:#c8751f;
  --amber-light:#e7a94d;
  --cream:#f6f4ee;
}

html{scroll-behavior:smooth;}

body{
  font-family:'Public Sans', ui-sans-serif, system-ui, sans-serif;
  background-color:var(--stone);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
}

.font-display{font-family:'Oswald', ui-sans-serif, sans-serif;}
.font-mono{font-family:'IBM Plex Mono', ui-monospace, monospace;}

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

/* Visible keyboard focus */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline:2px solid var(--amber);
  outline-offset:3px;
  border-radius:2px;
}

/* ---------- Reveal-on-scroll ---------- */
.reveal{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .7s ease, transform .7s ease;
}
.reveal.is-visible{
  opacity:1;
  transform:translateY(0);
}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1; transform:none; transition:none;}
}

/* ---------- Site chrome ---------- */
.site-header{
  background:rgba(21,25,28,0.97);
  backdrop-filter:saturate(140%) blur(6px);
}

.nav-link{
  position:relative;
  color:var(--stone);
  opacity:.78;
}
.nav-link:hover{opacity:1;}
.nav-link.is-active{opacity:1;}
.nav-link.is-active::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-8px;
  height:2px;
  background:var(--amber);
}

/* Mobile menu */
#mobile-menu{
  transform:translateX(100%);
  transition:transform .35s ease;
}
#mobile-menu.is-open{transform:translateX(0);}

/* ---------- Manifest strip (signature element) ---------- */
.manifest{
  border:1px solid rgba(21,25,28,0.14);
  background:var(--cream);
}
.manifest-row + .manifest-row{
  border-top:1px dashed rgba(21,25,28,0.18);
}
.manifest-code{
  font-family:'IBM Plex Mono', monospace;
  letter-spacing:.04em;
}
.manifest-stamp{
  border:1.5px solid var(--amber);
  color:var(--amber);
  transform:rotate(-3deg);
}

/* Perforated ticket edge for the manifest card */
.ticket-edge::before{
  content:"";
  position:absolute;
  top:-9px; left:24px; right:24px;
  height:18px;
  background-image:radial-gradient(circle, var(--stone) 6px, transparent 6.5px);
  background-size:22px 18px;
  background-repeat:repeat-x;
  background-position:center top;
}

/* ---------- Buttons ---------- */
.btn-amber{
  background:var(--amber);
  color:var(--ink);
  font-weight:600;
}
.btn-amber:hover{background:var(--amber-light);}

.btn-outline{
  border:1.5px solid currentColor;
}

/* ---------- Photo frame utility ---------- */
.photo-frame{
  position:relative;
  overflow:hidden;
}
.photo-frame img{
  transition:transform .6s ease;
}
.photo-frame:hover img{
  transform:scale(1.045);
}

/* Grain / texture overlay for hero */
.grain::after{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}

/* Divider notch (used between sections) */
.notch-top{
  clip-path:polygon(0 0,100% 0,100% 100%,0 100%);
}

/* Marker line numbering (used only for genuine phased sequences) */
.step-num{
  font-family:'IBM Plex Mono', monospace;
  color:var(--amber);
}

/* Simple fade-in for hero copy on load */
@keyframes riseIn{
  from{opacity:0; transform:translateY(14px);}
  to{opacity:1; transform:translateY(0);}
}
.rise-in{animation:riseIn .8s ease both;}
.rise-in-1{animation-delay:.05s;}
.rise-in-2{animation-delay:.18s;}
.rise-in-3{animation-delay:.3s;}
.rise-in-4{animation-delay:.42s;}

/* Form elements */
.field-input{
  background:var(--cream);
  border:1.5px solid var(--stone-3);
  color:var(--ink);
}
.field-input:focus{
  border-color:var(--amber);
}

/* Scrollbar accent (progressive enhancement, harmless if unsupported) */
::selection{ background:var(--amber); color:var(--ink); }