/* ---------------------------------------------------------------
   Inter — self-hosted variable (wght 400..900). No network, no fallback.
   --------------------------------------------------------------- */
@font-face{
  font-family:'Inter';
  src:url('/fonts/inter-latin.woff2') format('woff2');
  font-weight:400 900;
  font-style:normal;
  font-display:block;
  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+2074,U+20AC,U+2122,U+2191,
                U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Inter';
  src:url('/fonts/inter-latin-ext.woff2') format('woff2');
  font-weight:400 900;
  font-style:normal;
  font-display:block;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,
                U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,
                U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root{
  --paper:#FFFFFF;
  --ink-1:#121212;
  --ink-2:#575757;
  --ink-3:#8E8E8E;
  --ink-4:#ADADAD;

  --line:#DCDCDC;       /* hairline rules */
  --line-2:#C9C9C9;     /* frame edge */
  --dot:#9A9A9A;        /* intersection points */
  --dot-r:2.2px;        /* half the point's box; see .rules */

  --m:clamp(16px,3.2vmin,40px);   /* page margin = the ruled field inset */
  --cols:8;
  --rows:5;

  --t-micro:clamp(9.5px,1.02vmin,11px);
  --t-small:clamp(10.5px,1.12vmin,12px);
  --t-input:clamp(12.5px,1.4vmin,14.5px);
  --t-lede:clamp(15px,2.05vmin,22px);
  --t-mark:clamp(46px,8.6vmin,96px);

  --track:0.01em;
  --ease:cubic-bezier(0.16, 1, 0.3, 1);
}

*{margin:0;padding:0;box-sizing:border-box;}

html,body{height:100%;overflow:hidden;}

body{
  position:fixed;
  inset:0;
  padding:var(--m);
  background:var(--paper);
  color:var(--ink-1);
  font-family:'Inter',system-ui,sans-serif;
  font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-feature-settings:"cv11","ss01";
}

/* ---------- ruled field ----------
   Three stacked layers sharing one cell size: column rules, row rules,
   and a point tiled so it lands exactly where the lines cross.       */
.rules{
  position:fixed;
  inset:var(--m);
  z-index:0;
  pointer-events:none;
  border:1px solid var(--line-2);
  background-image:
    radial-gradient(circle at var(--dot-r) var(--dot-r), var(--dot) 0 var(--dot-r), transparent calc(var(--dot-r) + 0.4px)),
    linear-gradient(to right, var(--line) 0 1px, transparent 1px),
    linear-gradient(to bottom, var(--line) 0 1px, transparent 1px);
  background-size:
    calc(100% / var(--cols)) calc(100% / var(--rows)),
    calc(100% / var(--cols)) 100%,
    100% calc(100% / var(--rows));
  /* the point layer is pulled back by its own radius so each full circle
     centres exactly on a line crossing instead of being quartered */
  background-position:calc(-1 * var(--dot-r)) calc(-1 * var(--dot-r)), 0 0, 0 0;
  background-repeat:repeat, repeat-x, repeat-y;
  /* measure the background across the border box so the rules land on exactly
     the same cell boundaries the canvas draws to */
  background-origin:border-box;
  background-clip:border-box;
}

#etch{
  position:fixed;
  top:var(--m);
  left:var(--m);
  /* a canvas is a replaced element: insets alone leave it at its intrinsic
     300x150, so the box has to be sized explicitly */
  width:calc(100% - 2 * var(--m));
  height:calc(100% - 2 * var(--m));
  z-index:0;
  display:block;
  pointer-events:none;
}
.rules{z-index:1;}

/* ---------- frame ---------- */
.frame{
  position:relative;
  z-index:2;
  height:100%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
}

/* The copy sits on its own plate: the engraving runs behind it, never
   through it, and the double rule reads as a drawing pasted to the field. */
.stack{
  min-height:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  width:min(620px, 100%);
  padding:clamp(26px,4.4vmin,54px) clamp(22px,4vmin,52px) clamp(28px,4.6vmin,56px);
  background:var(--paper);
  border:1px solid var(--line-2);
  outline:1px solid var(--line);
  outline-offset:7px;
}

/* ---------- lockup ---------- */
.lockup{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(10px,1.7vmin,20px);
}
.logo{
  display:block;
  width:auto;
  height:0.82em;
  font-size:var(--t-mark);
  filter:invert(1);            /* source art is white; the page is paper now */
  opacity:0.9;
  flex:none;
}

.mark{
  font-size:var(--t-mark);
  font-weight:500;
  letter-spacing:-0.035em;
  line-height:1.0;
  color:var(--ink-1);
}

.lede{
  margin-top:clamp(12px,2.1vmin,24px);
  font-size:var(--t-lede);
  font-weight:400;
  letter-spacing:-0.016em;
  line-height:1.2;
  color:var(--ink-2);
}

/* ---------- inquiry box ---------- */
.ask{
  margin:clamp(16px,2.6vmin,30px) auto 0;
  width:100%;
  max-width:min(560px, 100%);
  display:flex;
  align-items:center;
  gap:8px;
  padding:4px 4px 4px clamp(14px,1.9vmin,20px);
  border:1px solid var(--line-2);
  border-radius:999px;
  background:var(--paper);
  transition:border-color 220ms var(--ease);
}
.ask:focus-within{border-color:var(--ink-1);}

.ask-input{
  flex:1 1 auto;
  min-width:0;
  appearance:none;
  background:none;
  border:0;
  outline:none;
  font:inherit;
  font-size:var(--t-input);
  font-weight:400;
  line-height:1.4;
  color:var(--ink-1);
  padding:9px 0;
}
.ask-input::placeholder{color:var(--ink-4);}

.ask-send{
  flex:none;
  width:clamp(30px,3.6vmin,36px);
  height:clamp(30px,3.6vmin,36px);
  display:grid;
  place-items:center;
  appearance:none;
  border:0;
  border-radius:999px;
  background:#EFEFEF;
  color:var(--ink-3);
  cursor:pointer;
  transition:background 200ms var(--ease), color 200ms var(--ease), opacity 200ms var(--ease);
}
.ask-send svg{width:56%;height:56%;display:block;}
.ask-send:disabled{opacity:0.7;cursor:default;}
.ask-send:not(:disabled){background:var(--ink-1);color:var(--paper);}
.ask-send:not(:disabled):hover{background:#000;}
.ask-send:focus-visible{outline:1px solid var(--ink-1);outline-offset:3px;}

/* ---------- verticals ---------- */
.verticals{
  list-style:none;
  max-width:780px;
  margin:clamp(18px,3vmin,34px) auto 0;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:clamp(10px,1.6vmin,22px);
}
.verticals li{position:relative;}

.v{
  appearance:none;
  background:none;
  border:0;
  padding:6px 2px;
  font:inherit;
  font-size:var(--t-small);
  font-weight:500;
  letter-spacing:var(--track);
  color:var(--ink-2);
  white-space:nowrap;
  cursor:pointer;
  transition:color 200ms var(--ease);
}
.v:hover,.v:focus-visible,.v[aria-expanded="true"]{color:var(--ink-1);}
.v:focus{outline:none;}
.v:focus-visible{outline:1px solid var(--line-2);outline-offset:4px;}

.verticals li + li::before{
  content:"";
  position:absolute;
  left:calc(clamp(10px,1.6vmin,22px) / -2);
  top:50%;
  width:1px;height:0.85em;
  background:var(--line-2);
  transform:translateY(-50%);
}

/* ---------- regions ---------- */
.regions{
  position:absolute;
  left:0;right:0;
  bottom:clamp(10px,2vmin,26px);
  left:50%;right:auto;
  width:max-content;
  max-width:calc(100% - 2 * var(--m));
  transform:translateX(-50%);
  background:var(--paper);
  border:1px solid var(--line-2);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:clamp(8px,1.4vmin,16px);
  padding:clamp(7px,1.1vmin,11px) clamp(12px,2vmin,20px);
}
.regions-label{
  font-size:var(--t-micro);
  font-weight:400;
  letter-spacing:var(--track);
  color:var(--ink-2);
}
.flags{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:clamp(7px,1.1vmin,13px);
}
.flags li{
  font-size:clamp(16px,2.1vmin,23px);
  line-height:1;
  opacity:0.92;
  font-family:'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji','Inter',sans-serif;
  letter-spacing:0.04em;
  transition:opacity 200ms var(--ease);
}
.flags li:hover{opacity:1;}

/* ---------- parts popover ---------- */
.pop{
  position:fixed;
  z-index:5;
  left:0;top:0;
  width:max-content;
  max-width:min(440px, calc(100vw - 32px));
  overflow-y:auto;
  overscroll-behavior:contain;
  padding:clamp(14px,2vmin,20px) clamp(16px,2.2vmin,24px);
  border:1px solid var(--line-2);
  border-radius:8px;
  background:var(--paper);
  box-shadow:0 2px 10px rgba(0,0,0,0.05);
  text-align:left;
  opacity:0;
  transform:translateY(6px);
  pointer-events:none;
  transition:opacity 180ms var(--ease), transform 180ms var(--ease);
}
.pop.open{opacity:1;transform:none;pointer-events:auto;}

.pop-title{
  font-size:var(--t-micro);
  font-weight:500;
  letter-spacing:var(--track);
  color:var(--ink-2);
  margin-bottom:clamp(9px,1.4vmin,13px);
  padding-bottom:clamp(8px,1.2vmin,11px);
  border-bottom:1px solid var(--line);
}
.pop-list{
  list-style:none;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:5px clamp(16px,2.4vmin,28px);
}
.pop-list li{
  font-size:var(--t-micro);
  font-weight:400;
  line-height:1.5;
  color:var(--ink-3);
  white-space:nowrap;
}

/* ---------- about ---------- */
.about-btn{
  position:fixed;
  z-index:6;
  top:calc(var(--m) + clamp(8px,1.2vmin,14px));
  right:calc(var(--m) + clamp(10px,1.4vmin,18px));
  appearance:none;
  background:none;
  border:0;
  padding:6px 4px;
  font:inherit;
  font-size:var(--t-small);
  font-weight:500;
  letter-spacing:var(--track);
  color:var(--ink-3);
  cursor:pointer;
  background:var(--paper);
  border:1px solid var(--line-2);
  padding:5px 11px;
  transition:color 200ms var(--ease);
}
.about-btn:hover,.about-btn[aria-expanded="true"]{color:var(--ink-1);}
.about-btn:focus{outline:none;}
.about-btn:focus-visible{outline:1px solid var(--line-2);outline-offset:4px;}

.about{
  position:fixed;
  z-index:6;
  top:calc(var(--m) + 40px);
  right:calc(var(--m) + clamp(10px,1.4vmin,18px));
  width:min(360px, calc(100vw - 2 * var(--m) - 20px));
  max-height:calc(100vh - var(--m) - 80px);
  overflow-y:auto;
  overscroll-behavior:contain;
  padding:clamp(16px,2.2vmin,22px);
  border:1px solid var(--line-2);
  border-radius:8px;
  background:var(--paper);
  box-shadow:0 2px 10px rgba(0,0,0,0.05);
  text-align:left;
  opacity:0;
  transform:translateY(6px);
  pointer-events:none;
  transition:opacity 180ms var(--ease), transform 180ms var(--ease);
}
.about.open{opacity:1;transform:none;pointer-events:auto;}
.about p{
  font-size:var(--t-micro);
  font-weight:400;
  line-height:1.65;
  color:var(--ink-2);
}
.about p + p{margin-top:0.9em;}

/* ---------- entrance ---------- */
.js .reveal{opacity:0;transform:translateY(12px);}
.js .revealed .reveal{
  opacity:1;
  transform:none;
  transition:opacity 600ms var(--ease), transform 600ms var(--ease);
  transition-delay:calc(var(--i, 0) * 80ms);
}

@media (prefers-reduced-motion:reduce){
  .js .reveal{opacity:1;transform:none;}
  .js .revealed .reveal{transition:none;}
  .pop,.about{transition:none;}
}

@media (max-width:640px){
  :root{--cols:4;--rows:8;}
  .mark{font-size:clamp(44px,15vw,80px);}
  .lede{font-size:clamp(15px,4.6vw,24px);}
  .ask{max-width:100%;}
  .verticals{gap:10px 16px;max-width:320px;}
  .regions{
    position:static;
    transform:none;
    margin-top:clamp(20px,3.4vmin,32px);
  }
  .verticals li + li::before{display:none;}
  .pop-list{grid-template-columns:1fr;}
  .pop{max-width:calc(100vw - 32px);}
  .pop-list li{white-space:normal;}
  .about{right:var(--m);left:var(--m);width:auto;}
}