/* kolindin.com main site (rebuild, pilot 2026-10-31).
   Tokens from mirror/kolindin/static-css.css. Layout measured live 2026-10-31
   @1414x807: content padding 8rem, cards 18rem tall (17.88rem arch at exact
   ratio), cards centered in the RIGHT half (two equal columns, zero gap),
   caption pinned bottom-center, wallpaper full-viewport fill at opacity 0.9. */
:root{
  --swatch-1:rgba(0,0,0,.85);
  --swatch-2:rgba(0,0,0,.75);
  --swatch-3:rgba(0,0,0,.6);
  --swatch-4:rgba(0,0,0,.4);
  --swatch-5:rgba(0,0,0,.25);
  --red:#ff0000;
  --background-color:rgba(0,0,0,0.3);
}
*{box-sizing:border-box}
/* ROOT LAW (decisions #8/#25): root font follows window WIDTH only. */
html{font-size:clamp(10.02px,min(100vw*0.0081,31.104px),31.104px)}
body{margin:0;background:var(--background-color);color:var(--swatch-1);
  font-family:"Diatype Variable","Helvetica Neue",Arial,sans-serif;font-weight:333;
  -webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
.bodycopy{display:block;font-size:1.4rem;font-weight:300;color:var(--swatch-2);line-height:1.2em}
h1{font-family:"Monument Grotesk Variable","Diatype Variable",sans-serif;font-size:4.4rem;font-weight:750;line-height:1;color:var(--swatch-1);margin:0}
h2{font-size:4rem;font-weight:700;color:var(--swatch-2);line-height:1.2;margin:0}
.caption{font-size:1.1rem;font-weight:400;color:rgba(0,0,0,.5);line-height:1.2em}
small,.small{display:block;font-size:1.2rem;font-weight:333;color:var(--swatch-4);line-height:1.3em}
hr{border:0;height:1px;background:#000;margin:1rem 0}
.text-icon{width:1em;height:1em;display:inline-block;vertical-align:-.18em}

/* home wallpaper — fill, opacity .9, alignment measured live (x 49.87 y 45.1) */
.wallpaper{position:fixed;inset:0;z-index:-1;opacity:.9;
  background-image:url("img/WEB3000__DSF0338.jpg");
  background-size:cover;background-position:49.87% 45.1%}

.page{min-height:100vh}
.page-content{padding:8rem;width:100%;display:flex;flex-direction:column;align-items:flex-start}

.menu{display:block;font-size:2rem;font-weight:500;line-height:1.2em;margin:0}
.menu a{color:#000}
.menu a:hover{color:var(--red)}
/* live home menu link is white (rgb 255,255,255 inline in Cargo content) */
.home .menu a{color:#fff}

/* two equal columns, zero gap (measured), card centered in the right column.
   Vertical ladder (#44): first set follows the menu, sets separated 6rem. */
.column-set{display:grid;grid-template-columns:1fr 1fr;gap:0;width:100%;margin-top:1.7rem}
.column-set + .column-set{margin-top:6rem}
.card{display:block}
.card img{height:18rem;width:auto;display:block;margin:0 auto}

/* info — live-measured rhythm 2026-10-31: menu top 8rem, h2 +6.7rem, designer
   line +2.5rem, link rows +4.8/+1.5rem, mail line +3.2rem. Cargo's <hr> tags
   are INVISIBLE (height:1% on a 0-height element) — Kolin: "there are no
   rules at cargo" — so the rebuild emits none. */
.info .page-content{background:transparent;align-items:center}
.info .menu{width:100%;text-align:left}
bodycopy,.bodycopy{display:block;font-size:1.4rem;font-weight:300;color:var(--swatch-2);line-height:1.2em}
.info h2{font-size:4.8rem;margin-top:6.7rem;filter:drop-shadow(rgba(0,0,0,.25) .3rem .3rem 0)}
.info bodycopy{margin-top:2.5rem}
.info .link-row{display:block;width:100%;text-align:center;font-size:1.4rem;font-weight:400;margin-top:4.8rem}
.info .link-row + .link-row{margin-top:1.5rem}
.info .link-row a{color:#000}
.info .link-row a:hover{color:var(--red)}
.info small{display:block;width:100%;text-align:center;font-size:1.4rem;font-weight:300;color:var(--swatch-2);margin-top:3.2rem}
.info small a{color:inherit}
.info small a:hover{color:var(--red)}

/* pinned bottom caption (the old "2023" strip) — 1.4rem per family meta standard (#73/#68), not Cargo's 1.1rem */
.pin-bottom{position:fixed;left:0;right:0;bottom:0;padding:3rem;display:flex;justify-content:center;z-index:999}
.pin-bottom .caption{font-size:1.4rem}
.pin-bottom .caption a{color:rgba(0,0,0,.7);text-decoration:none}  /* Kolin 2026-10-31: no underline (Cargo's caption underline dropped) */
.pin-bottom .caption a:hover{color:var(--red)}

/* mobile (<770px): family mobile root ramp, cards stack in one column */
@media(max-width:769px){
  html{font-size:clamp(10.02px,calc(10.02px + (100vw - 320px) * 0.031476),13.801px)}
  .page-content{padding:4rem}
  .column-set{grid-template-columns:1fr}
  .column-set + .column-set{margin-top:4rem}
  .card img{max-width:100%}
}