/* ============================================================
   Polytechnic Friends — "Blueprint"
   Design language borrowed from engineering drawing sheets:
   cyanotype navy, graph-paper grid, drafting-annotation mono,
   numbered plates. Committed single-world palette — every
   colour painted explicitly, no inherited ground.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@600;700;800&family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans:wght@400;500;600&display=swap');

:root {
  /* ground + paper */
  --ground:    #0B1420;   /* drafting navy — dark sheets */
  --ground-2:  #12202F;   /* raised panel on navy */
  --paper:     #E9EEF4;   /* cool blueprint paper — neutral biased to accent */
  --card:      #FFFFFF;

  /* ink */
  --ink:       #0B1420;   /* on paper — 14.8:1 */
  --graphite:  #56687D;   /* secondary on paper — 4.9:1 */
  --chalk:     #DCE7F2;   /* on navy — 14.8:1 */
  --chalk-dim: #8FA4BC;   /* secondary on navy — 6.4:1 */

  /* line + signal */
  --rule:      #1B5893;   /* primary blue — 6.2:1 on paper */
  --rule-deep: #12406C;
  --cyan:      #3FC8DC;   /* the one bold note — 9.3:1 on navy */
  --border:    #CBD8E6;
  --grid:      rgba(27,88,147,.10);
  --grid-dark: rgba(63,200,220,.09);

  --s1: .5rem; --s2: 1rem; --s3: 1.75rem; --s4: 2.75rem; --s5: 4.5rem; --s6: 7rem;

  --sheet: 3px;           /* drawing sheets have corners, not pills */
  --ease: cubic-bezier(.22,.61,.36,1);

  --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --disp: 'Archivo', 'Arial Narrow', system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

h1, h2, h3 {
  font-family: var(--disp);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -.03em;
  text-wrap: balance;
  margin: 0;
}

:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; }

.wrap { width: min(1200px, 100% - 2.5rem); margin-inline: auto; }

.skip { position: absolute; left: -999px; top: 0; z-index: 100; background: var(--ground); color: var(--chalk); padding: .8rem 1.3rem; }
.skip:focus { left: 0; }

/* ---- drafting annotation label ---- */
.mono {
  font-family: var(--mono);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .17em;
  text-transform: uppercase;
}

/* ---- title block: the structural device ----
   A drawing sheet carries a title block naming the sheet and its
   subject. Each section gets one, so the label does real work. */
.tblock {
  display: flex; align-items: center; gap: var(--s2);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: .6rem 0;
  margin-bottom: var(--s4);
  color: var(--graphite);
}
.tblock__id { color: var(--rule); font-weight: 500; }
.tblock__sep { flex: 1; height: 1px; background: repeating-linear-gradient(90deg, var(--border) 0 6px, transparent 6px 12px); }
.tblock--dark { border-color: rgba(255,255,255,.16); color: var(--chalk-dim); }
.tblock--dark .tblock__id { color: var(--cyan); }
.tblock--dark .tblock__sep { background: repeating-linear-gradient(90deg, rgba(255,255,255,.22) 0 6px, transparent 6px 12px); }

/* ---- buttons: square-cornered, like drawing callouts ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: 48px; padding: .75rem 1.5rem;
  border: 1.5px solid transparent; border-radius: var(--sheet);
  font-family: var(--sans); font-weight: 600; font-size: .96rem;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.btn svg { width: 18px; height: 18px; flex: none; }
.btn--solid  { background: var(--rule); color: #fff; }
.btn--solid:hover  { background: var(--rule-deep); transform: translateY(-2px); }
.btn--cyan   { background: var(--cyan); color: var(--ground); }
.btn--cyan:hover   { background: #64D6E6; transform: translateY(-2px); }
.btn--wire   { border-color: var(--border); color: var(--ink); background: transparent; }
.btn--wire:hover   { border-color: var(--rule); color: var(--rule); transform: translateY(-2px); }
.btn--wire-dark { border-color: rgba(255,255,255,.28); color: var(--chalk); background: transparent; }
.btn--wire-dark:hover { border-color: var(--cyan); color: var(--cyan); transform: translateY(-2px); }
.btn--lg { min-height: 56px; padding: .95rem 2rem; font-size: 1.03rem; }

/* ---- header ---- */
.hdr {
  position: sticky; top: 0; z-index: 50;
  background: rgba(11,20,32,.90);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.hdr__in { display: flex; align-items: center; gap: var(--s3); padding: .8rem 0; }
.logo { display: flex; align-items: center; gap: .65rem; text-decoration: none; color: var(--chalk); font-family: var(--disp); font-weight: 800; letter-spacing: -.035em; font-size: 1.06rem; }
.logo__mark { width: 32px; height: 32px; flex: none; border: 1.5px solid var(--cyan); display: grid; place-items: center; color: var(--cyan); border-radius: var(--sheet); }
.logo__mark svg { width: 17px; height: 17px; }
.nav { margin-left: auto; display: flex; align-items: center; gap: var(--s3); }
.nav a.mono { color: var(--chalk-dim); text-decoration: none; transition: color .2s var(--ease); }
.nav a.mono:hover { color: var(--cyan); }
@media (max-width: 860px) { .nav__links { display: none !important; } }

/* ---- hero: the sheet ---- */
.hero {
  position: relative;
  background: var(--ground);
  color: var(--chalk);
  padding: var(--s6) 0 var(--s5);
  overflow: hidden;
}
.hero::before {           /* engineering graph paper */
  content: ''; position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--grid-dark) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-dark) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: radial-gradient(120% 80% at 50% 0%, #000 30%, transparent 78%);
}
.hero::after {            /* cyanotype wash */
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(46rem 30rem at 88% 4%, rgba(63,200,220,.16), transparent 64%);
}
.hero__in { position: relative; z-index: 1; }
.hero__grid { display: grid; grid-template-columns: 1.02fr .98fr; gap: var(--s5); align-items: center; }
@media (max-width: 980px) { .hero__grid { grid-template-columns: 1fr; gap: var(--s4); } }

.tag { display: inline-flex; align-items: center; gap: .55rem; color: var(--cyan); border: 1px solid rgba(63,200,220,.34); padding: .38rem .85rem; border-radius: var(--sheet); margin-bottom: var(--s2); }
.tag svg { width: 14px; height: 14px; }

.hero h1 { font-size: clamp(2.6rem, 6.6vw, 4.7rem); margin-bottom: var(--s2); }
.hero h1 .u { color: var(--cyan); position: relative; white-space: nowrap; }
.hero h1 .u::after { content: ''; position: absolute; left: 0; right: 0; bottom: -.09em; height: 2px; background: var(--cyan); opacity: .5; }
.hero__lead { color: var(--chalk-dim); font-size: clamp(1.05rem, 1.9vw, 1.2rem); max-width: 36rem; margin: 0 0 var(--s3); }
.hero__cta { display: flex; flex-wrap: wrap; gap: .7rem; }
.hero__meta { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s4); padding-top: var(--s2); border-top: 1px solid rgba(255,255,255,.14); color: var(--chalk-dim); }

/* ---- plate collage ---- */
.plates { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(5, 60px); gap: 12px; }
@media (max-width: 980px) { .plates { grid-template-rows: repeat(5, 48px); } }
.plate { margin: 0; position: relative; overflow: hidden; border: 1px solid rgba(255,255,255,.18); border-radius: var(--sheet); background: var(--ground-2); }
.plate img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease), filter .5s var(--ease); }
.plate:hover img { transform: scale(1.05); }
.plate figcaption {
  position: absolute; left: 0; bottom: 0; z-index: 2;
  background: var(--cyan); color: var(--ground);
  font-family: var(--mono); font-size: .62rem; font-weight: 500; letter-spacing: .1em;
  padding: .2rem .5rem;
}
.plates .plate:nth-child(1) { grid-row: 1 / 4; }
.plates .plate:nth-child(2) { grid-row: 1 / 3; }
.plates .plate:nth-child(3) { grid-row: 3 / 6; }
.plates .plate:nth-child(4) { grid-row: 4 / 6; }

/* ---- sections ---- */
.sec { padding: var(--s6) 0; }
.sec--dark { background: var(--ground); color: var(--chalk); position: relative; }
.sec--dark::before {
  content: ''; position: absolute; inset: 0;
  background-image: linear-gradient(var(--grid-dark) 1px, transparent 1px), linear-gradient(90deg, var(--grid-dark) 1px, transparent 1px);
  background-size: 28px 28px; opacity: .55;
}
.sec--dark > .wrap { position: relative; z-index: 1; }
.sec__head { max-width: 46rem; margin-bottom: var(--s4); }
.sec__head h2 { font-size: clamp(1.95rem, 4.2vw, 3rem); margin-bottom: var(--s1); }
.sec__head p { color: var(--graphite); font-size: 1.07rem; margin: 0; max-width: 42rem; }
.sec--dark .sec__head p { color: var(--chalk-dim); }

/* ---- spec cards ---- */
.specs { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--sheet); overflow: hidden; }
.spec { background: var(--card); padding: var(--s3); transition: background .25s var(--ease); }
.spec:hover { background: #F6F9FC; }
.spec__no { color: var(--rule); display: block; margin-bottom: var(--s2); }
.spec__ico { width: 40px; height: 40px; color: var(--rule); margin-bottom: var(--s2); }
.spec__ico svg { width: 100%; height: 100%; }
.spec h3 { font-size: 1.14rem; font-weight: 700; letter-spacing: -.02em; margin-bottom: .4rem; }
.spec p { color: var(--graphite); font-size: .95rem; margin: 0; }

/* ---- gallery: numbered plates ---- */
.gal { columns: 3; column-gap: 14px; }
@media (max-width: 920px) { .gal { columns: 2; } }
@media (max-width: 540px) { .gal { columns: 1; } }
.gal .plate { margin: 0 0 14px; break-inside: avoid; border-color: var(--border); background: #DCE4EE; }
.gal .plate img { height: auto; }
.gal .plate figcaption { display: flex; align-items: baseline; gap: .5rem; }

/* ---- story panel ---- */
.story { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid rgba(255,255,255,.16); border-radius: var(--sheet); overflow: hidden; }
@media (max-width: 900px) { .story { grid-template-columns: 1fr; } }
.story__txt { padding: clamp(1.9rem, 4.6vw, 3.4rem); align-self: center; background: var(--ground-2); }
.story__txt h2 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); margin-bottom: var(--s2); }
.story__txt p { color: var(--chalk-dim); margin: 0 0 var(--s2); }
.story__img { position: relative; min-height: 340px; background: var(--ground-2); }
.story__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--s2); margin-top: var(--s3); padding-top: var(--s3); border-top: 1px solid rgba(255,255,255,.16); }
.dl dt { color: var(--cyan); font-family: var(--mono); font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; margin-bottom: .3rem; }
.dl dd { margin: 0; font-weight: 600; font-size: .97rem; color: var(--chalk); }

/* ---- join ---- */
.join { text-align: center; max-width: 44rem; margin-inline: auto; }
.join h2 { font-size: clamp(2rem, 4.6vw, 3.1rem); margin-bottom: var(--s2); }
.join p { color: var(--graphite); margin: 0 auto var(--s3); max-width: 34rem; }
.join__cta { display: flex; flex-wrap: wrap; gap: .7rem; justify-content: center; }

/* ---- footer ---- */
.ftr { background: var(--ground); color: var(--chalk-dim); padding: var(--s4) 0 var(--s3); }
.ftr__in { display: flex; flex-wrap: wrap; gap: var(--s4); justify-content: space-between; align-items: flex-start; }
.ftr p { font-size: .88rem; margin: .8rem 0 0; max-width: 30rem; }
.ftr__links { display: flex; flex-wrap: wrap; gap: var(--s3); }
.ftr__links a { color: var(--chalk-dim); text-decoration: none; }
.ftr__links a:hover { color: var(--cyan); }
.ftr__base { margin-top: var(--s3); padding-top: var(--s2); border-top: 1px solid rgba(255,255,255,.13); font-size: .8rem; display: flex; flex-wrap: wrap; gap: var(--s2); justify-content: space-between; }

/* ---- reveal ---- */
.rise { opacity: 0; transform: translateY(20px); transition: opacity .65s var(--ease), transform .65s var(--ease); }
.rise.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .rise { opacity: 1; transform: none; }
}