/* Tatwert — Urkunde / Siegel look.
   Fonts are self-hosted (SIL OFL, see fonts/OFL-*.txt): no third-party requests. */
@font-face{font-family:"Grenze Gotisch";src:url("fonts/grenze-gotisch.woff2") format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"EB Garamond";src:url("fonts/eb-garamond.woff2") format("woff2");font-weight:400 800;font-display:swap}

:root{
  --ink:#121110;        /* near-black */
  --ink-2:#1c1a18;
  --paper:#ece8df;      /* aged paper */
  --paper-2:#e2ddd1;
  --text:#1b1917;
  --muted:#5a554c;
  --seal:#9b2226;       /* wax red */
  --seal-hi:#c4363a;
  --gold:#c9a45c;
  --line:#cfc8b8;
  --display:"Grenze Gotisch","UnifrakturCook",Georgia,serif;
  --body:"EB Garamond",Garamond,Georgia,serif;
  --tear:url("tear.svg");
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font:21px/1.55 var(--body);color:var(--text);background:var(--paper);
  background-image:url("grain.svg");-webkit-font-smoothing:antialiased}
a{color:var(--seal)}
.wrap{max-width:62rem;margin:0 auto;padding:0 1.5rem}
h1,h2,h3{text-wrap:balance;font-family:var(--display);font-weight:700;line-height:1.05;margin:0}

/* skip link */
.skip{position:absolute;left:-999px;top:0;background:var(--paper);color:var(--ink);padding:.6rem 1rem;z-index:10}
.skip:focus{left:1rem;top:1rem}

/* header */
.top{position:absolute;inset:0 0 auto 0;z-index:5}
.top .wrap{display:flex;justify-content:space-between;align-items:center;padding-block:1.4rem}
.logo{font-family:var(--display);font-size:2rem;font-weight:800;color:#f3efe6;text-decoration:none;letter-spacing:.01em}
.logo i{color:var(--seal-hi);font-style:normal}
nav a{color:#d9d3c5;text-decoration:none;margin-left:1.6rem;font-size:1.05rem}
nav a:hover,nav a:focus-visible{color:#fff;text-decoration:underline;text-underline-offset:.3em}

/* hero */
.hero{position:relative;color:#f3efe6;padding:9rem 0 8rem;overflow:hidden;isolation:isolate}
.hero{background:url("grain-light.svg"),radial-gradient(60% 70% at 78% 40%,rgba(155,34,38,.38),transparent 70%),radial-gradient(50% 60% at 12% 95%,rgba(201,164,92,.12),transparent 70%),var(--ink)}
.hero .wrap{display:grid;gap:3rem;grid-template-columns:1.25fr .75fr;align-items:center}
.eyebrow{letter-spacing:.28em;text-transform:uppercase;font-size:.85rem;color:var(--gold);margin:0 0 1.2rem}
.hero h1{font-size:clamp(2.8rem,6.2vw,4.9rem);color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.5)}
.hero h1 em{font-style:normal;color:var(--seal-hi)}
.hero p.lead{font-size:1.3rem;max-width:34rem;color:#ddd7c9;margin:1.6rem 0 2.2rem}
.seal{width:100%;max-width:21rem;justify-self:center;filter:drop-shadow(0 18px 30px rgba(0,0,0,.55));transform:rotate(-6deg)}

.btn{display:inline-block;font-family:var(--display);font-size:1.35rem;font-weight:700;background:var(--seal);color:#fff;
  padding:.7rem 1.9rem;text-decoration:none;border:2px solid var(--seal-hi);border-radius:.15rem;
  box-shadow:4px 4px 0 rgba(0,0,0,.45);transition:transform .15s,box-shadow .15s}
.btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 rgba(0,0,0,.45)}
.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 rgba(0,0,0,.45)}
.btn.ghost{background:transparent;color:#f3efe6;border-color:#8c8574;margin-left:.8rem}

/* torn edge */
.torn{position:relative}
.torn::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:46px;background:var(--paper);
  -webkit-mask:var(--tear) bottom/100% 100% no-repeat;mask:var(--tear) bottom/100% 100% no-repeat;z-index:1}
.torn-top{position:relative}
.torn-top::before{content:"";position:absolute;left:0;right:0;top:-45px;height:46px;background:var(--ink);
  -webkit-mask:var(--tear) top/100% 100% no-repeat;mask:var(--tear) top/100% 100% no-repeat;z-index:1}

/* sections */
section{padding:5rem 0}
section h2{font-size:clamp(2.2rem,5vw,3.4rem);margin-bottom:1.4rem}
section h2::after{content:"";display:block;width:4.5rem;height:3px;background:var(--seal);margin-top:.8rem}
.intro{max-width:40rem;color:var(--muted);font-size:1.2rem}

.grid{display:grid;gap:1.6rem;grid-template-columns:repeat(auto-fit,minmax(15.5rem,1fr));margin-top:2rem}
.card{background:var(--paper-2);border:1px solid var(--line);padding:1.5rem 1.4rem;position:relative;
  box-shadow:0 1px 0 #fff8 inset,0 10px 24px -14px rgba(0,0,0,.45)}
.card h3{font-size:1.6rem;margin:.3rem 0 .5rem}
.card p{margin:0;color:var(--muted)}
.card::before{content:"";position:absolute;top:-1px;left:-1px;width:1.1rem;height:1.1rem;border-top:3px solid var(--seal);border-left:3px solid var(--seal)}

.steps{counter-reset:s;list-style:none;padding:0;display:grid;gap:1.6rem;grid-template-columns:repeat(auto-fit,minmax(11.5rem,1fr));margin-top:2rem}
.steps li{counter-increment:s;position:relative;padding-top:4.2rem}
.steps li::before{content:counter(s);position:absolute;top:0;left:0;width:3.2rem;height:3.2rem;border-radius:50%;
  display:grid;place-items:center;font:700 1.9rem/1 var(--display);color:#fff;
  background:radial-gradient(circle at 35% 30%,var(--seal-hi),var(--seal) 60%,#6e1418);box-shadow:0 3px 0 rgba(0,0,0,.35)}
.steps h3{font-size:1.55rem;margin-bottom:.4rem}
.steps p{margin:0;color:var(--muted)}

/* dark band */
.dark{background:var(--ink);color:#e6e0d2;position:relative}
.dark h2{color:#fff}
.dark .intro,.dark p{color:#cfc8b8}
.two{display:grid;gap:3rem;grid-template-columns:1fr 1fr}
.two h3{font-size:2rem;color:#fff;margin-bottom:.6rem}

/* contact */
.contact{text-align:center}
.contact h2::after{margin-inline:auto}
.contact .intro{margin-inline:auto}

footer{background:var(--ink);color:#a79f8d;padding:2.2rem 0;font-size:.95rem;text-align:center}

:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
@media (max-width:760px){
  body{font-size:19px}
  .hero{padding:7.5rem 0 6rem}
  .hero .wrap,.two{grid-template-columns:1fr}
  .seal{max-width:13rem;order:-1;justify-self:start}
  nav a{margin-left:1rem}
  nav a.hide-sm{display:none}
  .btn.ghost{margin:.8rem 0 0}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.btn{transition:none}}