:root{
  --paper: #F7F5F0;
  --ink: #141414;
  --stamp: #A3271C;
  --kraft: #DCD5C4;
  --kraft-line: #C7BCA0;
  --mono: 'IBM Plex Mono', monospace;
  --display: 'Anton', sans-serif;
}

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

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--mono);
  position:relative;
  min-height:100vh;
}

.paper-noise{
  position:fixed; inset:0; width:100%; height:100%;
  pointer-events:none; z-index:0; mix-blend-mode:multiply; opacity:.5;
}

/* ---------- topbar ---------- */
.topbar{
  position:relative; z-index:2;
  display:flex; justify-content:space-between; align-items:flex-end;
  padding:28px 32px 18px;
  border-bottom:2px solid var(--ink);
}
.brand{ text-decoration:none; color:var(--ink); display:flex; flex-direction:column; gap:2px; }
.brand-mark{ font-family:var(--display); font-size:clamp(28px,4vw,40px); letter-spacing:.5px; }
.brand-sub{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:#5b5648; }
.topbar-meta{ font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:#5b5648; display:flex; gap:8px; }
.dot-sep{ opacity:.5; }

main{ position:relative; z-index:1; }

.footer{
  position:relative; z-index:1;
  border-top:2px solid var(--ink);
  padding:18px 32px 32px;
  font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:#5b5648;
}
.footer-fade{ opacity:.55; }

/* ---------- home: intro ---------- */
.registre-intro{
  padding:56px 32px 24px;
  max-width:920px;
}
.registre-eyebrow{
  font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--stamp);
  display:flex; align-items:center; gap:8px; margin-bottom:14px;
}
.registre-eyebrow::before{ content:""; width:22px; height:2px; background:var(--stamp); display:inline-block; }
.registre-intro h1{
  font-family:var(--display); font-weight:400;
  font-size:clamp(34px,6vw,64px); line-height:1.02; margin:0 0 18px;
  letter-spacing:.2px;
}
.registre-intro p{
  font-size:14px; line-height:1.7; color:#3a3730; max-width:56ch; margin:0;
}

/* ---------- grid of cards ---------- */
.registre-grid{
  display:grid; gap:1px;
  background:var(--ink);
  border-top:2px solid var(--ink);
  border-bottom:2px solid var(--ink);
  margin:36px 0 0;
  grid-template-columns:repeat(auto-fit, minmax(280px,1fr));
}

.card{
  position:relative;
  background:var(--paper);
  padding:26px 24px 22px;
  text-decoration:none;
  color:var(--ink);
  min-height:230px;
  display:flex; flex-direction:column; justify-content:space-between;
  overflow:hidden;
  transition:background .25s ease;
}
.card:hover{ background:var(--kraft); }
.card:hover .card-halftone{ opacity:.16; transform:scale(1.06) rotate(-2deg); }
.card:focus-visible{ outline:3px solid var(--stamp); outline-offset:-3px; }

.card-top{ display:flex; justify-content:space-between; align-items:flex-start; font-size:11px; letter-spacing:.08em; position:relative; z-index:2;}
.card-num{ color:var(--stamp); font-weight:600; }
.card-tag{
  border:1px solid var(--ink); padding:3px 8px; text-transform:uppercase; font-size:10px;
}
.card-punch{
  font-family:var(--display); font-weight:400;
  font-size:clamp(20px,2.6vw,26px); line-height:1.12; margin:20px 0;
  position:relative; z-index:2;
}
.card-bottom{ display:flex; justify-content:space-between; align-items:center; font-size:11px; text-transform:uppercase; letter-spacing:.1em; position:relative; z-index:2; }
.card-arrow{ font-size:16px; }
.card-halftone{
  position:absolute; right:-20px; bottom:-30px; width:150px; height:130px;
  opacity:.09; transition:all .4s ease; z-index:1; pointer-events:none;
}
.card-halftone svg{ width:100%; height:100%; }

/* ---------- dossier detail ---------- */
.dossier{
  position:relative;
  max-width:760px;
  margin:0 auto;
  padding:56px 32px 90px;
}
.back{
  display:inline-block; font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink); text-decoration:none; margin-bottom:34px; border-bottom:1px solid var(--ink); padding-bottom:2px;
}
.dossier-head{
  display:flex; justify-content:space-between; align-items:center;
  font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  padding-bottom:14px; border-bottom:1px solid var(--kraft-line);
}
.dossier-num{ color:var(--stamp); font-weight:600; }
.dossier-punch{
  font-family:var(--display); font-weight:400;
  font-size:clamp(32px,6.4vw,58px); line-height:1.04; margin:26px 0 8px;
}
.dossier-visual{ width:100%; max-width:340px; margin:18px 0 8px; opacity:.85; }
.dossier-visual svg{ width:100%; height:auto; }

.dossier-body{
  display:grid; grid-template-columns:1fr auto; gap:40px; align-items:start;
  margin-top:30px; padding-top:26px; border-top:1px solid var(--kraft-line);
}
.dossier-meta{ margin:0; font-size:13px; }
.dossier-meta > div{ display:flex; gap:16px; padding:9px 0; border-bottom:1px dashed var(--kraft-line); }
.dossier-meta dt{ width:90px; flex:none; color:#5b5648; text-transform:uppercase; font-size:10.5px; letter-spacing:.08em; margin:0; }
.dossier-meta dd{ margin:0; }

.qr-block{ text-align:center; }
.qr-frame{
  background:#fff; padding:10px; border:1px solid var(--ink);
}
.qr-frame img, .qr-frame canvas{ display:block; }
.qr-caption{
  font-size:10px; text-transform:uppercase; letter-spacing:.1em; margin:8px 0 0; color:#5b5648; max-width:120px;
}

/* stamp */
.stamp-layer{
  position:fixed; inset:0; z-index:50; display:flex; align-items:center; justify-content:center;
  pointer-events:none;
}
.stamp{
  width:220px; height:220px; color:var(--stamp);
  transform:scale(2.4) rotate(-16deg); opacity:0;
  filter:url(#inkBleed);
  animation:stampSlam .55s cubic-bezier(.2,.9,.25,1) forwards;
  animation-delay:.15s;
}
@keyframes stampSlam{
  0%{ transform:scale(2.6) rotate(-16deg); opacity:0; }
  55%{ transform:scale(0.94) rotate(-9deg); opacity:.95; }
  70%{ transform:scale(1.05) rotate(-10deg); opacity:.9; }
  100%{ transform:scale(1) rotate(-9deg); opacity:0; animation-timing-function:ease-out; }
}
.stamp-svg{ width:100%; height:100%; }
.stamp-ring{ fill:none; stroke:currentColor; stroke-width:3; }
.stamp-ring-inner{ stroke-width:2; }
.stamp-text-top{ font-family:var(--mono); font-size:12px; font-weight:700; letter-spacing:2px; fill:currentColor; text-transform:uppercase; }
.stamp-center{ font-family:var(--display); font-size:32px; fill:currentColor; text-anchor:middle; letter-spacing:1px; }

/* 404 */
.not-found{ max-width:600px; margin:100px auto; padding:0 32px; text-align:left; }
.not-found-code{ color:var(--stamp); font-size:11px; letter-spacing:.14em; text-transform:uppercase; margin:0 0 12px;}
.not-found h1{ font-family:var(--display); font-weight:400; font-size:clamp(24px,4vw,34px); margin:0 0 24px; line-height:1.2;}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  .stamp{ animation:none; opacity:.92; transform:scale(1) rotate(-9deg); }
  .card-halftone, html{ transition:none !important; scroll-behavior:auto; }
}

/* mobile */
@media (max-width:640px){
  .topbar{ flex-direction:column; align-items:flex-start; gap:10px; }
  .dossier-body{ grid-template-columns:1fr; }
  .qr-block{ text-align:left; }
  .qr-frame{ display:inline-block; }
}