/* seidrtechnology.com
   Plain CSS, no scripts anywhere on the site. Fonts are self-hosted, so the
   pages make no third-party requests. */

@font-face{
  font-family:"Fraunces"; font-style:normal; font-weight:100 900; font-display:swap;
  src:url("/assets/fonts/fraunces-latin-opsz-normal.woff2") format("woff2");
}
@font-face{
  font-family:"Fraunces"; font-style:italic; font-weight:100 900; font-display:swap;
  src:url("/assets/fonts/fraunces-latin-opsz-italic.woff2") format("woff2");
}
@font-face{
  font-family:"IBM Plex Sans"; font-style:normal; font-weight:400; font-display:swap;
  src:url("/assets/fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2");
}
@font-face{
  font-family:"IBM Plex Sans"; font-style:normal; font-weight:500; font-display:swap;
  src:url("/assets/fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2");
}

:root{
  /* The mark is gold on black, so the site is too. Warm blacks, not blue ones. */
  --night:     #0E0C0A;
  --hearth:    #17130F;
  --rule:      #2E271F;
  --parchment: #EDE6D8;
  --ash:       #A39B8C;
  --gold:      #C9A227;

  --display: "Fraunces", Georgia, serif;
  --body:    "IBM Plex Sans", system-ui, sans-serif;

  --gutter: clamp(20px, 5vw, 72px);
  --maxw: 1120px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--night); color:var(--parchment);
  font-family:var(--body); font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{ color:inherit; }
img{ max-width:100%; height:auto; display:block; }
h1, h2, h3, p, ul, dl, dd, figure, blockquote{ margin:0; padding:0; }
ul{ list-style:none; }

.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter); }
.wrap.narrow{ max-width:820px; }

.skip{
  position:absolute; left:-9999px; top:10px; z-index:200;
  background:var(--gold); color:var(--night); padding:10px 16px; font-size:14px;
}
.skip:focus{ left:10px; }
:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }

/* ---- small uppercase labels ---- */
.btn, .tagline, .epigraph figcaption, .sig span, .legal, .foot-links{
  font-family:var(--body); font-weight:500; font-size:12px;
  letter-spacing:.16em; text-transform:uppercase;
}

/* ---- buttons ---- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:46px; padding:12px 22px; text-decoration:none; text-align:center;
  border:1px solid var(--gold); color:var(--gold);
  transition:background .2s ease, color .2s ease;
}
.btn.solid{ background:var(--gold); color:var(--night); }
.btn.solid:hover{ background:var(--parchment); border-color:var(--parchment); }
.btn.ghost:hover{ background:var(--gold); color:var(--night); }
.cta{ display:flex; flex-wrap:wrap; gap:12px; }

/* ---- header ---- */
.top{ border-bottom:1px solid var(--rule); }
.bar{ display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:124px; }
.brand{
  font-family:var(--display); font-weight:600; font-size:22px; letter-spacing:-.01em;
  text-decoration:none; display:inline-flex; align-items:center; min-height:46px;
}
.brand img{ height:92px; width:auto; }
/* The registered mark is real text beside the logo, so it stays sharp at any
   size. It sits level with the top of the lettering. */
.logo{ position:relative; display:inline-block; line-height:0; }
.logo sup{
  position:absolute; left:100%; top:31%; margin-left:3px; transform:translateY(-15%);
  font-family:var(--body); font-weight:400; font-size:20px; line-height:1;
  font-variant-emoji:text;
}
.top .btn{ min-height:42px; padding:10px 18px; font-size:11px; }

/* ---- hero ---- */
.hero{ position:relative; overflow:hidden; border-bottom:1px solid var(--rule); }
.hero .wrap{
  position:relative; z-index:1;
  padding-top:clamp(56px,8vw,104px); padding-bottom:clamp(64px,9vw,120px);
}
/* The letter that makes the name: ð, drawn in outline behind the hero. */
.eth{
  position:absolute; z-index:0; right:4vw; top:50%; transform:translateY(-54%);
  font-family:var(--display); font-weight:300; font-size:clamp(300px,46vw,640px);
  line-height:1; color:transparent; -webkit-text-stroke:1px rgba(201,162,39,.34);
  user-select:none; pointer-events:none;
}
.epigraph{ max-width:34ch; margin-bottom:clamp(36px,5vw,60px); }
.epigraph blockquote{
  font-family:var(--display); font-style:italic; font-weight:300;
  font-size:clamp(18px,1.9vw,23px); line-height:1.35; color:var(--ash);
}
.epigraph figcaption{ margin-top:12px; color:var(--gold); font-size:11px; }
h1{
  font-family:var(--display); font-weight:600;
  font-size:clamp(56px,10.5vw,136px); line-height:.92; letter-spacing:-.03em;
  margin-bottom:28px;
}
h1 em{ display:block; font-style:italic; font-weight:400; color:var(--gold); }
.tagline{ color:var(--gold); margin-bottom:18px; }
.lede{ font-size:clamp(17px,1.6vw,20px); color:var(--ash); max-width:54ch; margin-bottom:36px; }

/* ---- sections ---- */
.section{ padding:clamp(60px,8vw,104px) 0; border-bottom:1px solid var(--rule); }
h2{
  font-family:var(--display); font-weight:500;
  font-size:clamp(32px,4.4vw,54px); line-height:1.05; letter-spacing:-.02em;
  margin-bottom:clamp(30px,4vw,48px);
}

/* ---- founder ---- */
.founder{ background:var(--hearth); }
.founder-grid{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:clamp(28px,5vw,64px); align-items:center; }
.photo{ width:clamp(170px,20vw,240px); aspect-ratio:3/4; object-fit:cover; border:1px solid var(--rule); }
.founder-text{
  font-family:var(--display); font-weight:300; font-size:clamp(21px,2.5vw,30px);
  line-height:1.35; max-width:36ch;
}
.sig{ margin-top:26px; display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 14px; }
.sig b{ font-family:var(--display); font-weight:600; font-size:19px; }
.sig span{ color:var(--gold); font-size:11px; }

/* ---- why ---- */
.why{ display:grid; grid-template-columns:repeat(3,1fr); gap:0 clamp(24px,4vw,56px); }
.why li{ border-top:1px solid var(--rule); padding:22px 0 30px; }
.why h3{ font-family:var(--display); font-weight:500; font-size:22px; line-height:1.2; margin-bottom:8px; }
.why p{ color:var(--ash); font-size:16px; }

/* ---- services: a ledger, name on the left, what it means on the right ---- */
.ledger > div{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);
  gap:8px clamp(24px,5vw,72px); align-items:baseline;
  border-top:1px solid var(--rule); padding:24px 0;
}
.ledger > div:last-child{ border-bottom:1px solid var(--rule); }
.ledger dt{ font-family:var(--display); font-weight:500; font-size:clamp(22px,2.6vw,30px); line-height:1.15; }
.ledger dd{ color:var(--ash); max-width:52ch; }

/* ---- closing ---- */
.closing h2{ max-width:16ch; margin-bottom:16px; }
.closing .lede{ color:var(--gold); font-family:var(--display); font-style:italic; font-size:clamp(20px,2.2vw,26px); }

/* ---- contact and 404 ---- */
.contact{ border-bottom:1px solid var(--rule); }
.page-title{ font-size:clamp(44px,7vw,84px); line-height:.98; margin-bottom:26px; }
.contact .lede{ margin-bottom:18px; color:var(--parchment); }
.how{ color:var(--ash); max-width:54ch; margin-bottom:34px; }

/* ---- footer ---- */
.foot{ padding:clamp(44px,6vw,72px) 0 28px; color:var(--ash); font-size:15px; }
.foot-grid{ display:grid; grid-template-columns:1.5fr 1.3fr auto; gap:28px clamp(28px,5vw,72px); }
.foot-name{ font-family:var(--display); font-weight:600; font-size:20px; color:var(--parchment); margin-bottom:8px; }
.motto{ font-family:var(--display); font-style:italic; color:var(--gold); margin-top:6px; text-wrap:balance; }
.foot-about{ max-width:44ch; }
.foot-links{ font-size:11px; }
.foot-links li{ margin-bottom:4px; }
.foot-links a{ display:inline-flex; align-items:center; min-height:32px; text-decoration:none; overflow-wrap:anywhere; }
.foot-links a:hover{ color:var(--gold); }
.legal{ margin-top:clamp(32px,5vw,56px); padding-top:20px; border-top:1px solid var(--rule); font-size:10.5px; }

/* ---------- responsive ---------- */
@media (max-width:900px){
  .brand img{ height:72px; }
  .bar{ min-height:104px; }
  .why{ grid-template-columns:repeat(2,1fr); }
  .foot-grid{ grid-template-columns:1fr 1fr; }
  .foot-links{ grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:4px 28px; }
  .foot-links li{ margin:0; }
}
@media (max-width:640px){
  body{ font-size:16.5px; }
  .wide{ display:none; }
  .brand{ font-size:19px; }
  .brand img{ height:clamp(44px,14vw,58px); }
  .logo sup{ font-size:14px; }
  .bar{ min-height:84px; }
  .eth{ right:-.12em; top:0; transform:none; font-size:340px; -webkit-text-stroke-color:rgba(201,162,39,.22); }
  .founder-grid{ grid-template-columns:1fr; }
  .photo{ width:132px; }
  .why{ grid-template-columns:1fr; }
  .ledger > div{ grid-template-columns:1fr; padding:20px 0; }
  .foot-grid{ grid-template-columns:1fr; }
  .foot-links{ flex-direction:column; gap:0; }
  .foot-links a{ min-height:44px; }
  .cta .btn{ flex:1 1 100%; }
}
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .btn{ transition:none; }
}