/* ============================================================
   SAMBUNO — single screen
   Type: Bricolage Grotesque (display) · IBM Plex Mono (detail)
   Palette: ink #101013 · paper #fff · red #DD3333
   ============================================================ */

/* ---------- fonts (self-hosted, latin subsets) ---------- */
@font-face{
  font-family:'Bricolage Grotesque';
  font-style:normal;
  font-display:swap;
  font-weight:200 800;
  font-stretch:75% 100%;
  src:url('../fonts/bricolage-grotesque-var.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'IBM Plex Mono';
  font-style:normal;
  font-display:swap;
  font-weight:400;
  src:url('../fonts/ibm-plex-mono-400.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'IBM Plex Mono';
  font-style:normal;
  font-display:swap;
  font-weight:600;
  src:url('../fonts/ibm-plex-mono-600.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ---------- tokens ---------- */
/* Light is the default; the dark set below follows the visitor's system setting. */
:root{
  color-scheme:light dark;
  --ink:#101013;                 /* text */
  --paper:#FFFFFF;               /* background */
  --line:#E7E7E3;                /* hairlines */
  --mut-2:#6F6F79;               /* © line — 4.9:1 on paper */
  --red:#DD3333;                 /* graphic red: mark, triangle, icon, underline */
  --red-text:#C22929;            /* red used as small text: eyebrow, indices */
  --red-hover:#B32424;           /* link hover */
  --grid:rgba(16,16,19,.06);     /* dot grid */
  --glow:rgba(221,51,51,.065);   /* centred glow */
  --disp:'Bricolage Grotesque',Georgia,serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --ease:cubic-bezier(.22,.61,.2,1);
  --h1:clamp(2.75rem,7vw,6rem);     /* headline size; the band is derived from it */
  --pad-x:28px;
  --frame:clamp(24px,4vh,40px);   /* top / bottom breathing room */
  --gap-1:clamp(24px,5vh,52px);   /* headline -> domains */
  --gap-2:clamp(28px,6vh,60px);   /* domains -> contact */
}
@media(prefers-color-scheme:dark){
  :root{
    --ink:#F4F4F6;
    --paper:#101013;
    --line:#2B2B31;
    --mut-2:#8E8E96;
    --red-text:#E24B4B;          /* 4.8:1 on ink — passes AA for small text */
    --red-hover:#F08D8D;
    --grid:rgba(255,255,255,.07);
    --glow:rgba(221,51,51,.15);
  }
}

/* ---------- reset / base ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  min-height:100vh;
  min-height:100svh;
  display:flex;flex-direction:column;
  font-family:var(--disp);
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  position:relative;
  overflow-x:clip;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul{list-style:none}
::selection{background:var(--red);color:#fff}
:focus-visible{outline:2px solid var(--red);outline-offset:4px;border-radius:2px}

/* ---------- backdrop: centered dot grid + soft red glow ---------- */
body::before{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:radial-gradient(var(--grid) 1px,transparent 1.6px);
  background-size:22px 22px;
  mask-image:radial-gradient(60% 55% at 50% 48%,#000 0%,transparent 72%);
  -webkit-mask-image:radial-gradient(60% 55% at 50% 48%,#000 0%,transparent 72%);
}
body::after{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(min(420px,56vw) min(420px,56vw) at 50% 38%,var(--glow),transparent 72%);
}

/* ---------- frame: header + footer ---------- */
.top,.bottom{
  position:relative;z-index:1;
  display:flex;justify-content:center;align-items:center;
  padding:var(--frame) var(--pad-x);
}
.logo{display:inline-flex;align-items:center;gap:11px}
.logo img{width:27px;height:27px}
.logo b{
  font-family:var(--disp);font-weight:800;font-stretch:88%;
  font-size:1.32rem;letter-spacing:.14em;color:var(--ink);
}
.bottom p{
  font-family:var(--mono);font-size:.7rem;font-weight:400;
  letter-spacing:.14em;text-transform:uppercase;color:var(--mut-2);
}

/* ---------- the screen ---------- */
main{
  position:relative;z-index:1;
  flex:1;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;
  padding:clamp(12px,3vh,40px) var(--pad-x);
}

.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--mono);font-weight:600;
  font-size:.76rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--red-text);
  margin-bottom:clamp(14px,2.4vh,22px);
}
.eyebrow::before{
  content:'';width:9px;height:9px;background:var(--red);
  clip-path:polygon(0 0,100% 0,100% 100%);
}

h1{
  font-family:var(--disp);font-weight:800;font-stretch:88%;
  font-size:var(--h1);
  line-height:1.02;letter-spacing:-.015em;
  color:var(--ink);
  text-wrap:balance;
}
.mark{position:relative;white-space:nowrap}
.mark>span{position:relative;z-index:1}
.mark::after{
  content:'';position:absolute;left:-.06em;right:-.06em;bottom:.04em;
  height:.3em;background:var(--red);z-index:0;
  transform:skewX(-8deg);border-radius:2px;
}

/* three domains, one band — sized from the headline so it always fits beneath it */
.domains{
  width:min(100%,806px,calc(var(--h1) * 8.4)); /* = headline width (8.4 × its font size) */
  margin-top:var(--gap-1);
  display:grid;grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.domains li{
  display:flex;flex-direction:column;align-items:center;gap:9px;
  padding:clamp(18px,3vh,28px) 10px;
}
.domains li+li{border-left:1px solid var(--line)}
.domains .idx{
  font-family:var(--mono);font-weight:600;font-size:.7rem;
  letter-spacing:.2em;color:var(--red-text);
}
.domains .lab{
  font-family:var(--disp);font-weight:600;font-stretch:92%;
  font-size:calc(var(--h1) * .24);line-height:1.1;letter-spacing:-.01em; /* scales with the headline */
  color:var(--ink);
  white-space:nowrap;
}

/* contact */
.contact{
  margin-top:var(--gap-2);
  display:flex;flex-direction:column;align-items:center;gap:16px;
}
.phone{
  display:inline-flex;align-items:center;gap:.32em;
  font-family:var(--disp);font-weight:800;font-stretch:85%;
  font-size:clamp(2rem,5vw,3.4rem);letter-spacing:-.01em;line-height:1;
  font-variant-numeric:tabular-nums;
  color:var(--ink);
  transition:color .2s;
}
.phone:hover{color:var(--red-hover)}
.phone .ico{width:.6em;height:.6em;color:var(--red);flex:none}
.mail{
  font-family:var(--mono);font-size:.86rem;letter-spacing:.03em;
  color:var(--ink);
  border-bottom:1.5px solid var(--red);padding-bottom:2px;
  transition:color .2s;
}
.mail:hover{color:var(--red-hover)}

/* ---------- entrance ---------- */
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.r{animation:rise .8s var(--ease) both;animation-delay:var(--d,0s)}

/* ---------- responsive ---------- */
@media(max-width:1000px){
  .domains{width:100%;grid-template-columns:1fr}
  .domains li+li{border-left:0;border-top:1px solid var(--line)}
  .domains li{padding:14px 12px;gap:7px}
  .domains .lab{font-size:1.25rem}
}
@media(max-width:480px){
  :root{--pad-x:20px}
}
/* short phone screens: index beside label so the page still holds on one screen */
@media(max-width:1000px) and (max-height:700px){
  .domains{width:auto;grid-template-columns:max-content;justify-content:center} /* block = widest row, centred */
  .domains li{flex-direction:row;justify-content:flex-start;align-items:baseline;gap:14px;padding:11px 6px}
  .domains .idx{width:2ch;text-align:right}   /* indices line up in a column */
  .domains .lab{font-size:1.15rem}
}

/* ---------- reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  .r{animation:none}
}