/* ============================================================================
   MICROLINK POD DOSSIER
   The site around the sheet. It is a frame and nothing more: AE 321 renders
   inside DESIGN PLANS untouched, with its own layers, measure tool, thirds,
   zoom, notes panel and A1 print path intact.

   Thin rules, square corners, no shadows, a faint grid ground. Heavy tight
   Archivo for headings, uppercase letterspaced IBM Plex Mono for labels.
============================================================================ */

:root{
  --paper:#EDE7DA;
  --panel:#F4EFE3;
  --ink:#1A1A18;
  --rust:#B0552F;
  --teal:#4E8A9B;
  --rule:rgba(26,26,24,.22);
  --rule-strong:rgba(26,26,24,.55);
  --grey:rgba(26,26,24,.58);
  --nav:54px;
  --pad:26px;
}

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

html,body{height:100%}

body{
  background-color:var(--paper);
  /* faint grid ground behind everything */
  background-image:
    linear-gradient(to right,  rgba(26,26,24,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(26,26,24,.05) 1px, transparent 1px);
  background-size:32px 32px;
  background-position:0 0;
  color:var(--ink);
  font-family:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:15px;
  line-height:1.45;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}

/* HOME is exactly one viewport. Nothing scrolls. */
body.fixed{overflow:hidden}

a{color:inherit;text-decoration:none}

/* ---------------------------------------------------------------- labels */
.lbl{
  font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:10px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--grey);
  line-height:1.4;
}
.lbl.ink{color:var(--ink)}
.lbl.rust{color:var(--rust)}

/* ------------------------------------------------------------------- nav */
.nav{
  height:var(--nav);
  display:flex;align-items:stretch;
  border-bottom:1px solid var(--rule-strong);
  background:var(--paper);
  position:relative;z-index:5;
}
.mark{
  display:flex;align-items:center;
  padding:0 var(--pad);
  border-right:1px solid var(--rule-strong);
  font-weight:800;
  font-size:16px;
  letter-spacing:.13em;
  line-height:1;
  white-space:nowrap;
}
.mark:hover{color:var(--rust)}
.tabs{display:flex;align-items:stretch;min-width:0;overflow:hidden}
.tab{
  display:flex;align-items:center;
  padding:0 22px;
  border-right:1px solid var(--rule);
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:10.5px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--grey);
  white-space:nowrap;
  border-bottom:2px solid transparent;
}
.tab:hover{color:var(--ink);background:var(--panel)}
.tab[aria-current="page"]{
  color:var(--ink);
  border-bottom-color:var(--rust);
  background:var(--panel);
}
.navend{
  margin-left:auto;display:flex;align-items:center;
  padding:0 var(--pad);
  border-left:1px solid var(--rule);
  white-space:nowrap;
}
.navend a:hover{color:var(--rust)}

/* ============================================================== HOME ==== */
.home{
  height:calc(100dvh - var(--nav));
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-rows:auto minmax(0,1fr) auto;
  column-gap:var(--pad);
  padding:22px var(--pad) var(--pad);
  min-height:0;
}

.head{grid-column:1;grid-row:1;min-width:0;padding-bottom:16px}
.head h1{
  font-weight:800;
  font-size:clamp(30px,3.5vw,52px);
  letter-spacing:-.025em;
  line-height:.94;
  text-transform:uppercase;
}
.head .sub{margin-top:10px}

/* the plan drawing, in a bordered panel occupying the left half */
.planpanel{
  grid-column:1;grid-row:2;
  min-height:0;min-width:0;
  border:1px solid var(--ink);
  background:var(--panel);
  display:flex;flex-direction:column;
  position:relative;
}
/* The sheet renders whole inside the frame and the panel shows the drawing
   part of it. The title block falls below the crop, because a second title
   block at thumbnail size is unreadable and the page already carries the
   sheet number, the revision and the scale in the heading above. The drawing
   window is 488 of the 594 unit sheet, so 594/488 is the height that puts the
   band rule exactly on the bottom edge of the panel. */
.planpanel .view{
  flex:1 1 auto;min-height:0;
  position:relative;overflow:hidden;
}
.planpanel iframe{
  position:absolute;left:0;top:0;
  width:100%;height:121.7%;
  border:0;display:block;
  pointer-events:none;      /* a preview. DESIGN PLANS is where it is driven */
}
.planpanel .cap{
  flex:none;
  display:flex;justify-content:space-between;gap:16px;
  padding:7px 12px;
  border-top:1px solid var(--rule-strong);
  background:var(--panel);
}
.planpanel:hover{border-color:var(--rust)}
.planpanel:hover .cap .go{color:var(--rust)}

/* the four headline figures, along the bottom left */
.figs{
  grid-column:1;grid-row:3;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  border-top:1px solid var(--rule-strong);
  margin-top:18px;
}
.fig{padding:12px 14px 2px 0;min-width:0;overflow:hidden}
.fig + .fig{border-left:1px solid var(--rule);padding-left:14px}
/* Value, then the imperial on its own line, then the label. Run inline and the
   longest of the four, 41 / 51 degC (106 / 124 degF), is wider than a quarter
   of the left half and walks straight into its neighbour. */
.fig .v{
  font-weight:700;
  font-size:clamp(15px,1.45vw,21px);
  letter-spacing:-.015em;
  line-height:1.1;
  white-space:nowrap;
}
.fig .u{color:var(--grey);font-weight:400;font-size:.68em;letter-spacing:0}
.fig .c{
  color:var(--grey);font-weight:400;
  font-size:11.5px;line-height:1.3;margin-top:2px;
  white-space:nowrap;
}
.fig .k{margin-top:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* right column: what the sheet is, and who is on it */
.aside{
  grid-column:2;grid-row:1 / 3;
  min-width:0;min-height:0;
  display:flex;flex-direction:column;
  padding-bottom:18px;
}
.aside .blurb{
  font-size:15.5px;line-height:1.5;max-width:52ch;
  margin-top:14px;
}
.aside .blurb + .blurb{margin-top:11px}
.aside .rule{border-top:1px solid var(--rule);margin-top:18px}

.collab{
  grid-column:2;grid-row:3;
  align-self:end;
  border:1px solid var(--ink);
  background:var(--panel);
  min-width:0;
  margin-top:18px;
}
.collab .ch{
  display:flex;justify-content:space-between;gap:14px;
  padding:8px 14px;
  border-bottom:1px solid var(--rule-strong);
}
.collab .cb{padding:4px 14px 12px}
.crow{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,1.25fr) minmax(0,1fr);
  gap:14px;align-items:baseline;
  padding:9px 0;
  border-bottom:1px solid var(--rule);
}
.crow:last-child{border-bottom:0}
.crow .n{font-weight:700;letter-spacing:-.01em;font-size:14.5px}
.crow .r,.crow .o{font-size:12.5px;color:var(--grey)}
.collab .open{
  padding:10px 14px 12px;
  border-top:1px solid var(--rule);
  color:var(--grey);font-size:12.5px;line-height:1.45;
}
.collab .open b{color:var(--rust);font-weight:600}

/* ======================================================= DESIGN PLANS === */
/* The sheet is the page. Edge to edge, top to bottom, nothing above it and
   nothing around it. */
body.bare{overflow:hidden;background:var(--paper)}
.fullsheet{
  position:fixed;
  left:0;top:0;right:0;bottom:0;
  width:100vw;height:100dvh;
  border:0;margin:0;padding:0;display:block;
}

/* ============================================================== STUBS === */
.stub{
  height:calc(100dvh - var(--nav));
  display:flex;align-items:center;justify-content:center;
  padding:var(--pad);
}
.stubcard{
  border:1px solid var(--ink);
  background:var(--panel);
  max-width:560px;width:100%;
}
.stubcard .sh{padding:10px 18px;border-bottom:1px solid var(--rule-strong)}
.stubcard .sb{padding:22px 18px}
.stubcard h2{
  font-weight:800;font-size:30px;letter-spacing:-.02em;line-height:1;
  text-transform:uppercase;
}
.stubcard p{margin-top:14px;font-size:14.5px;line-height:1.5;max-width:46ch}
.stubcard .tag{
  display:inline-block;margin-top:18px;
  border:1px solid var(--rust);color:var(--rust);
  padding:5px 10px;
}

/* ------------------------------------------------------------ narrow --- */
@media (max-width:900px){
  :root{--pad:16px}
  body.fixed{overflow:auto}
  .home{
    height:auto;
    grid-template-columns:1fr;
    grid-template-rows:auto;
  }
  .head,.planpanel,.figs,.aside,.collab{grid-column:1;grid-row:auto}
  .planpanel{height:56vh}
  .aside{padding-top:20px}
  .figs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fig:nth-child(3){border-left:0;padding-left:0}
  .fig:nth-child(n+3){border-top:1px solid var(--rule)}
  .tabs{overflow-x:auto}
  .navend{display:none}
}