/* =========================================================================
   SECOND CHAPTER — shared design system
   Tech's story, told from Europe.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,400;1,6..72,500&family=Hanken+Grotesk:wght@400;500;600;700&display=swap');

/* ---- tokens ---- */
:root{
  --paper:#EAE0D1;          /* base ivory / sand */
  --paper-soft:#F2EBDF;     /* lighter surface (cards) */
  --paper-deep:#E2D6C2;     /* deeper sand (alt sections) */
  --ink:#1B2430;            /* deep navy-charcoal */
  --ink-2:#27313F;
  --muted:#6E6555;          /* warm grey-brown secondary text */
  --muted-2:#8C8270;
  --gold:#BC8B4A;           /* bronze gold accent */
  --gold-deep:#9C6E34;
  --gold-soft:#D8BE92;
  --line:rgba(27,36,48,.16);
  --line-soft:rgba(27,36,48,.09);
  --paper-line:rgba(234,224,209,.18);

  --font-display:"Cormorant Garamond", Georgia, serif;
  --font-serif:"Newsreader", Georgia, serif;
  --font-sans:"Hanken Grotesk", system-ui, sans-serif;

  --maxw:1240px;
  --gutter:40px;
  --radius:4px;
}

*{box-sizing:border-box;}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;scroll-behavior:smooth;}
html,body{overflow-x:hidden;max-width:100%;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-serif);
  font-size:18px;
  line-height:1.7;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
::selection{background:var(--gold);color:var(--paper-soft);}

/* ---- layout ---- */
.container{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter);}
.container-wide{max-width:1440px;margin:0 auto;padding:0 var(--gutter);}
.section{padding:96px 0;}
.section-sm{padding:64px 0;}
.divider{height:1px;background:var(--line-soft);border:0;margin:0;}

/* ---- type helpers ---- */
.eyebrow{
  font-family:var(--font-sans);
  font-size:12px;
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--gold-deep);
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.eyebrow::before{content:"";width:22px;height:1px;background:var(--gold);display:inline-block;}
.eyebrow.no-rule::before{display:none;}
.display{font-family:var(--font-display);font-weight:600;line-height:1.02;letter-spacing:-.01em;}
.serif{font-family:var(--font-serif);}
.kicker{font-family:var(--font-sans);font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;line-height:1.05;margin:0;letter-spacing:-.01em;}
.h-xl{font-size:calc(clamp(52px,6.5vw,92px) * var(--hero-scale,1));}
.h-lg{font-size:clamp(40px,4.4vw,60px);}
.h-md{font-size:clamp(30px,3vw,40px);}
.lead{font-size:21px;line-height:1.6;color:var(--ink);}
.muted{color:var(--muted);}
.text-gold{color:var(--gold-deep);}

/* ---- buttons ---- */
.btn{
  font-family:var(--font-sans);
  font-size:14px;
  font-weight:600;
  letter-spacing:.02em;
  padding:13px 26px;
  border-radius:2px;
  border:1px solid transparent;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:9px;
  transition:all .25s ease;
  white-space:nowrap;
  background:none;
}
.btn-ink{background:var(--ink);color:var(--paper);}
.btn-ink:hover{background:#0F1620;}
.btn-gold{background:var(--gold);color:#fff;}
.btn-gold:hover{background:var(--gold-deep);}
.btn-outline{border-color:var(--ink);color:var(--ink);}
.btn-outline:hover{background:var(--ink);color:var(--paper);}
.btn-ghost{color:var(--ink);padding-left:0;padding-right:0;}
.btn-ghost:hover{color:var(--gold-deep);}
.btn-on-ink{border-color:rgba(234,224,209,.4);color:var(--paper);}
.btn-on-ink:hover{background:var(--paper);color:var(--ink);border-color:var(--paper);}
.btn .arr{transition:transform .25s ease;}
.btn:hover .arr{transform:translateX(3px);}
.btn-lg{padding:16px 32px;font-size:15px;}

/* link with animated underline */
.ulink{position:relative;display:inline-block;font-family:var(--font-sans);font-size:14px;font-weight:600;letter-spacing:.02em;color:var(--ink);}
.ulink::after{content:"";position:absolute;left:0;bottom:-3px;height:1px;width:100%;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .3s ease;}
.ulink:hover::after{transform:scaleX(1);}
.ulink:hover{color:var(--gold-deep);}

/* ---- arch motif (brand mark) ---- */
.arch{display:block;}
.arch path{fill:none;stroke:var(--gold);stroke-width:2;vector-effect:non-scaling-stroke;stroke-linecap:round;}
.arch--logo path{stroke-width:1.4;}
.arch--thin path{stroke-width:1.1;}

/* ---- header / nav ---- */
.site-header{
  position:sticky;top:0;z-index:60;
  background:rgba(234,224,209,.86);
  backdrop-filter:saturate(140%) blur(12px);
  border-bottom:1px solid var(--line-soft);
}
.nav{display:flex;align-items:center;justify-content:space-between;height:74px;}
.brand{display:flex;align-items:center;gap:13px;}
.brand .arch{width:30px;height:auto;}
.brand-word{font-family:var(--font-display);font-weight:600;font-size:19px;letter-spacing:.05em;line-height:.95;text-transform:uppercase;}
.brand-word small{display:block;font-family:var(--font-sans);font-size:7.5px;font-weight:600;letter-spacing:.24em;color:var(--gold-deep);margin-top:3px;text-transform:uppercase;white-space:nowrap;}
.nav-links{display:flex;align-items:center;gap:28px;}
.nav-links a{font-family:var(--font-sans);font-size:14px;font-weight:500;letter-spacing:.01em;color:var(--ink);position:relative;}
.nav-links a:hover{color:var(--gold-deep);}
.nav-links a.active{color:var(--gold-deep);}
.nav-links a.active::after{content:"";position:absolute;left:0;right:0;bottom:-26px;height:2px;background:var(--gold);}
.nav-actions{display:flex;align-items:center;gap:16px;}
.nav-signin{font-family:var(--font-sans);font-size:14px;font-weight:500;color:var(--ink);white-space:nowrap;}
.nav-signin:hover{color:var(--gold-deep);}
.nav-toggle{display:none;background:none;border:0;cursor:pointer;}

/* mobile menu (shared) */
.mobile-menu{display:none;flex-direction:column;background:var(--paper-soft);border-bottom:1px solid var(--line-soft);}
.mobile-menu.open{display:flex;}
.mobile-menu a{font-family:var(--font-sans);font-size:16px;padding:15px var(--gutter);border-top:1px solid var(--line-soft);color:var(--ink);}
.mobile-menu .mm-actions{display:flex;flex-direction:column;gap:10px;padding:16px var(--gutter) 20px;border-top:1px solid var(--line-soft);}
.mobile-menu .mm-actions a{padding:0;border:0;}
.mobile-menu .mm-join{display:flex;align-items:center;justify-content:center;background:var(--ink);color:var(--paper);font-weight:600;padding:14px;border-radius:2px;}
.mobile-menu .mm-signin{font-weight:500;color:var(--muted);}

/* ---- cards ---- */
.card{background:var(--paper-soft);border:1px solid var(--line-soft);transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease;}
.card:hover{transform:translateY(-3px);box-shadow:0 18px 40px -28px rgba(27,36,48,.45);border-color:var(--line);}

/* image placeholder panels */
.ph{position:relative;overflow:hidden;background:linear-gradient(150deg,#E7DAC4,#DCCBAF);}
.ph--ink{background:linear-gradient(150deg,#222C39,#161E29);}
.ph--gold{background:linear-gradient(150deg,#C79A5C,#A2762F);}
.ph .ph-arch{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:.55;}
.ph .ph-arch img{width:52%;height:auto;}
.ph .ph-cover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.ph .ph-cap{position:absolute;left:16px;bottom:14px;font-family:var(--font-sans);font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:rgba(27,36,48,.5);}
.ph--ink .ph-cap,.ph--gold .ph-cap{color:rgba(255,255,255,.65);}
image-slot{display:block;}

/* ---- tags / meta ---- */
.tag{font-family:var(--font-sans);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep);}
.meta{font-family:var(--font-sans);font-size:13px;color:var(--muted);}
.dot{display:inline-block;width:3px;height:3px;border-radius:50%;background:var(--muted-2);vertical-align:middle;margin:0 8px;}

/* ---- article card ---- */
.acard-title{font-family:var(--font-display);font-weight:600;font-size:26px;line-height:1.12;letter-spacing:-.01em;margin:14px 0 10px;}
.acard:hover .acard-title{color:var(--gold-deep);}
.acard-dek{color:var(--muted);font-size:16px;line-height:1.55;}

/* ---- dark section ---- */
.on-ink{background:var(--ink);color:var(--paper);}
.on-ink .muted{color:rgba(234,224,209,.62);}
.on-ink .eyebrow{color:var(--gold-soft);}
.on-ink .eyebrow::before{background:var(--gold-soft);}
.on-ink h1,.on-ink h2,.on-ink h3{color:var(--paper);}
.on-ink .divider{background:var(--paper-line);}

/* ---- forms ---- */
.field{width:100%;font-family:var(--font-sans);font-size:15px;padding:14px 16px;background:var(--paper-soft);border:1px solid var(--line);border-radius:2px;color:var(--ink);}
.field:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(188,139,74,.16);}
.on-ink .field{background:rgba(255,255,255,.06);border-color:rgba(234,224,209,.22);color:var(--paper);}
.on-ink .field::placeholder{color:rgba(234,224,209,.5);}
textarea.field{resize:vertical;min-height:120px;line-height:1.5;}
label.flabel{font-family:var(--font-sans);font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:8px;}

/* email capture */
.capture{display:flex;gap:10px;max-width:480px;}
.capture .field{flex:1;}
.capture-note{font-family:var(--font-sans);font-size:12.5px;color:var(--muted);margin-top:12px;}

/* ---- footer ---- */
.site-footer{background:var(--ink);color:var(--paper);padding:72px 0 40px;}
.site-footer a{color:rgba(234,224,209,.72);font-family:var(--font-sans);font-size:14px;}
.site-footer a:hover{color:var(--gold-soft);}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px;}
.foot-col h5{font-family:var(--font-sans);font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-soft);margin:0 0 18px;}
.foot-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px;}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;margin-top:56px;padding-top:24px;border-top:1px solid var(--paper-line);font-family:var(--font-sans);font-size:12.5px;color:rgba(234,224,209,.55);}

/* ---- pill / badge ---- */
.pill{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-sans);font-size:12px;font-weight:600;letter-spacing:.04em;padding:6px 13px;border:1px solid var(--line);border-radius:100px;color:var(--ink);}
.pill .led{width:6px;height:6px;border-radius:50%;background:var(--gold);}
.on-ink .pill{border-color:rgba(234,224,209,.28);color:var(--paper);}

/* ---- utilities ---- */
.flex{display:flex;}
.items-center{align-items:center;}
.justify-between{justify-content:space-between;}
.gap-sm{gap:12px;}
.gap-md{gap:24px;}
.grid{display:grid;}
.mt-0{margin-top:0;}.mb-0{margin-bottom:0;}
.center{text-align:center;}
.maxw-prose{max-width:680px;}
.maxw-narrow{max-width:560px;}
.hairline{height:1px;background:var(--line);}
.toast{position:fixed;left:50%;bottom:34px;transform:translateX(-50%) translateY(20px);background:var(--ink);color:var(--paper);font-family:var(--font-sans);font-size:14px;padding:14px 22px;border-radius:3px;box-shadow:0 18px 50px -20px rgba(0,0,0,.5);opacity:0;pointer-events:none;transition:all .35s cubic-bezier(.2,.8,.2,1);z-index:200;display:flex;align-items:center;gap:10px;}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
.toast .led{width:7px;height:7px;border-radius:50%;background:var(--gold);}

/* entrance: kept as no-op for safety — content is always visible */
.reveal{opacity:1;transform:none;}
.reveal.in{opacity:1;transform:none;}

@media (max-width:980px){
  :root{--gutter:24px;}
  .nav-links{display:none;}
  .nav-toggle{display:block;}
  /* collapse header actions into the hamburger menu on mobile */
  .nav-actions .nav-signin,
  .nav-actions > .btn-ink{display:none;}
  .foot-grid{grid-template-columns:1fr 1fr;gap:32px;}
  .section{padding:64px 0;}
}
@media (max-width:560px){
  .foot-grid{grid-template-columns:1fr;gap:30px;}
}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;}
}