/* Tensa Outdoor docs: shared stylesheet. Linked by every doc under /docs/. */
@font-face{font-family:'Alegreya Sans';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/alegreya-sans-latin-400-normal.woff2') format('woff2');}
@font-face{font-family:'Alegreya Sans';font-style:italic;font-weight:400;font-display:swap;src:url('fonts/alegreya-sans-latin-400-italic.woff2') format('woff2');}
@font-face{font-family:'Alegreya Sans';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/alegreya-sans-latin-500-normal.woff2') format('woff2');}
@font-face{font-family:'Alegreya Sans';font-style:italic;font-weight:500;font-display:swap;src:url('fonts/alegreya-sans-latin-500-italic.woff2') format('woff2');}
@font-face{font-family:'Alegreya Sans';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/alegreya-sans-latin-700-normal.woff2') format('woff2');}
@font-face{font-family:'Alegreya Sans';font-style:italic;font-weight:700;font-display:swap;src:url('fonts/alegreya-sans-latin-700-italic.woff2') format('woff2');}
:root{
    box-sizing:border-box;
    --ink:#1f1e1c;
    --soft:#6b6862;
    --faint:#98948c;
    --rule:#e4e0d8;
    --paper:#faf8f4;
    --warn-bg:#fdf3a8;
    --warn-edge:#8a6d00;
    --note-bg:#eef2f4;
    --note-edge:#7d94a0;
    --diagram-bg:#f0ede6;
    --photo-bg:#eae6dd;
    --accent:#b8531f;
    padding-top:env(safe-area-inset-top,0px);
    padding-bottom:env(safe-area-inset-bottom,0px);
  }
  *{box-sizing:inherit}
  html{-webkit-text-size-adjust:100%}
  body{
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:"Alegreya Sans",system-ui,sans-serif;
    font-size:18px;
    line-height:1.62;
    letter-spacing:.002em;
  }
  .wrap{max-width:44rem;margin:0 auto;padding:4rem 1.6rem 6rem;
    /* Vertical rhythm. Every block gap is a multiple of --air, which grows with
       the width of ONE column: narrow measures tolerate tighter spacing, wide
       ones need more air. --cols/--gap describe the column layout; print sets 2. */
    --cols:1; --gap:0px; --air-min:.45rem;
    --air:.8rem; /* fallback where container units are unsupported */
  }
  @supports (width:1cqi){
    .wrap{
      container-type:inline-size;
      --col:calc((100cqi - (var(--cols) - 1) * var(--gap)) / var(--cols));
      --air:clamp(var(--air-min), calc(.045 * var(--col) - .9rem), 1.05rem);
    }
  }
  h1,h2,h3{
    font-family:"Alegreya Sans",system-ui,sans-serif;
    line-height:1.15;
    letter-spacing:-.01em;
    color:var(--ink);
  }
  h1{font-size:2.5rem;font-weight:700;margin:0 0 calc(.6 * var(--air))}
  .sub{font-family:"Alegreya Sans",system-ui,sans-serif;color:var(--soft);font-size:1.05rem;font-weight:400;margin:0 0 3rem;line-height:1.4}
  h2{font-size:1.55rem;font-weight:700;margin:calc(2.6 * var(--air)) 0 calc(.45 * var(--air))}
  h3{font-size:1.13rem;font-weight:700;margin:calc(2.1 * var(--air)) 0 calc(.2 * var(--air));color:#3a3833}
  p{margin:var(--air) 0}
  em{font-style:italic}
  strong{font-weight:700}
  .lede{color:var(--soft);font-style:italic}
  a{color:var(--accent)}

  table{width:100%;border-collapse:collapse;margin:1.6rem 0;font-size:.96rem;
    font-family:"Alegreya Sans",system-ui,sans-serif}
  th,td{text-align:left;padding:.7rem .8rem;vertical-align:top;border-bottom:1px solid var(--rule)}
  th{font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;color:var(--soft);font-weight:600}
  td strong{color:var(--ink)}

  .warn{
    background:var(--warn-bg);
    border:1px solid #d9bf3a;
    padding:.9rem 1.1rem;margin:calc(1.5 * var(--air)) 0;border-radius:4px;
  }
  /* checkbox list inside a caution: only where there's a real list of do's */
  .warn ul.checks{list-style:none;padding-left:0;margin:.5em 0 0}
  .warn ul.checks li{position:relative;padding-left:1.5em;margin:.35em 0}
  .warn ul.checks li::before{content:"\2611";position:absolute;left:0;top:-.02em;color:var(--warn-edge);font-size:1.05em}
  .warn .lbl{font-family:"Alegreya Sans",system-ui,sans-serif;font-weight:700;
    text-transform:uppercase;letter-spacing:.05em;font-size:.72rem;color:var(--warn-edge);
    display:block;margin-bottom:.3em}
  .warn p{margin:.3em 0}

  /* Wide screens only: float short callouts right so body text wraps beside them.
     Narrow screens (phones) and print keep normal full-width flow. */
  @media screen and (min-width: 40rem) {
    .warn, .note {
      float: right;
      width: 46%;
      margin: .4rem 0 1rem 1.4rem;
      clear: right;
    }
  }

  ul,ol{margin:var(--air) 0;padding-left:1.3rem}
  li{margin:calc(.5 * var(--air)) 0}

  .illus{
    margin:calc(1.5 * var(--air)) 0;padding:1.1rem 1.2rem;border-radius:3px;
    font-family:"Alegreya Sans",system-ui,sans-serif;font-size:.85rem;line-height:1.45;
  }
  .illus .tag{display:inline-block;font-weight:700;font-size:.66rem;text-transform:uppercase;
    letter-spacing:.07em;padding:.15em .5em;border-radius:2px;margin-bottom:.45em}
  .diagram{background:var(--diagram-bg);color:#555049}
  .diagram .tag{background:#5f7d5a;color:#fff}
  .diagram.built .tag::after{content:" · built";opacity:.85}
  .diagram.locked .tag::after{content:" · LOCKED";opacity:.85}
  .photo{background:var(--photo-bg);color:#6a5f4d}
  .photo .tag{background:#a8752e;color:#fff}

  /* square-format recognition triptych */
  .triptych{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(1.4 * var(--air)) 1rem;margin:calc(1.5 * var(--air)) 0}
  .triptych figure{margin:0}
  .triptych .sq{
    aspect-ratio:1/1;background:var(--photo-bg);border-radius:3px;
    display:flex;align-items:flex-start;justify-content:flex-start;padding:.7rem;
    position:relative;overflow:hidden;
  }
  .triptych .sq img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:3px}
  .triptych .sq .tag{display:inline-block;font-family:"Alegreya Sans",system-ui,sans-serif;
    font-weight:700;font-size:.6rem;text-transform:uppercase;letter-spacing:.06em;
    background:#a8752e;color:#fff;padding:.15em .5em;border-radius:2px}
  .triptych figcaption{font-family:"Alegreya Sans",system-ui,sans-serif;
    font-size:.82rem;line-height:1.4;color:#5a554c;margin-top:calc(.6 * var(--air))}
  .triptych figcaption b{color:var(--ink)}
  @media (max-width:40rem){ .triptych{grid-template-columns:1fr;gap:calc(1.8 * var(--air)) 1rem} }
  /* two-up variant, same tile styling */
  .diptych{display:grid;grid-template-columns:repeat(2,1fr);gap:calc(1.4 * var(--air)) 1rem;margin:calc(1.5 * var(--air)) 0}
  .diptych figure{margin:0}
  @media (max-width:40rem){ .diptych{grid-template-columns:1fr;gap:calc(1.8 * var(--air)) 1rem} }
  @media print{ .diptych{grid-template-columns:repeat(2,1fr);column-gap:.2in;break-inside:avoid} .diptych figcaption{font-size:7.6pt;line-height:1.0} }
  @media print{
    .triptych{grid-template-columns:repeat(3,1fr);column-gap:.2in;break-inside:avoid}
    .triptych .sq{border:1px dashed #b7ad98;background:#f4f1ea}
    .triptych figcaption{font-size:7.6pt;line-height:1.0}
  }

  .ednote{
    background:var(--note-bg);border-left:3px solid var(--note-edge);
    padding:.75rem 1rem;margin:1.3rem 0;border-radius:2px;
    font-family:"Alegreya Sans",system-ui,sans-serif;font-size:.82rem;line-height:1.5;color:#4d5a61;
  }
  .ednote .lbl{font-weight:700;text-transform:uppercase;letter-spacing:.05em;font-size:.68rem;color:var(--note-edge);margin-right:.4em}

  .qr{
    margin:calc(1.5 * var(--air)) 0;padding:.7rem 1rem;border-radius:3px;
    background:#1f2b22;color:#dfe9e0;
    font-family:"Alegreya Sans",system-ui,sans-serif;font-size:.82rem;line-height:1.45;
    display:flex;gap:.7rem;align-items:flex-start;
  }
  .qr .ico{flex:0 0 auto;font-size:1.1rem;line-height:1.2}
  .qr .tag{display:block;font-weight:700;font-size:.66rem;text-transform:uppercase;letter-spacing:.07em;color:#8fbf9a;margin-bottom:.15em}
  .qr .watch{color:#fff;font-weight:600}
  .qr .vid{color:#9fb8a6;font-style:italic}
  a.qr{text-decoration:none}
  /* embedded video on screen; QR strip replaces it in print */
  .video{margin:calc(1.5 * var(--air)) 0}
  .video .poster,.video iframe{position:relative;display:block;width:min(100%,18rem);aspect-ratio:3/4;height:auto;border:0;border-radius:6px;overflow:hidden;background:#000}
  .video .poster img{display:block;width:100%;height:100%;object-fit:cover}
  .video .play{position:absolute;inset:0;margin:auto;width:3.2rem;height:3.2rem;border-radius:50%;background:rgba(0,0,0,.62);color:#fff;font-size:1.3rem;line-height:3.2rem;text-align:center;padding-left:.2rem;box-sizing:border-box}
  .video .poster:hover .play{background:#d85a30}
  .video figcaption{font-size:.82rem;margin-top:calc(.5 * var(--air))}
  .print-only{display:none}
  .mast a.qrbox{border:0;background:#fff;padding:0}
  .mast .qrbox svg{display:block;width:100%;height:100%}
  /* page/column wrappers only matter in print; on screen they vanish from layout */
  .pg,.col{display:contents}
  .pg:first-of-type ol:last-child{margin-bottom:0}
  .pg + .pg ol:first-child{margin-top:0}
  .tracefig{margin:calc(1.5 * var(--air)) 0}
  .tracefig svg.trace{display:block;width:100%;height:auto;border-radius:4px}
  .tracefig.narrow svg.trace{width:min(100%,26rem)}
  .tracefig figcaption{font-size:.82rem;margin-top:calc(.5 * var(--air))}
  .video.wide iframe{width:100%;aspect-ratio:16/9}
  .video.wide .poster{width:100%;aspect-ratio:16/9;padding:0;border:0;cursor:pointer}
  .qr.player-on{display:none}
  .qr .qrcode{flex:0 0 auto;width:3.4rem;height:3.4rem;margin-left:auto;border-radius:2px;display:block}
  .stub{color:var(--faint);font-style:italic}
  .draftbar{font-family:"Alegreya Sans",system-ui,sans-serif;font-size:.8rem;
    background:#33302b;color:#e9e4da;padding:.9rem 1.6rem;line-height:1.5}
  .draftbar b{color:#fff}
  .maint{margin-top:4rem;padding-top:1.5rem;border-top:2px solid var(--rule)}
  .maint h2{border-top:none;padding-top:0;color:var(--soft);font-size:1.15rem}
  .maint li{font-family:"Alegreya Sans",system-ui,sans-serif;font-size:.85rem;color:var(--soft)}

  /* masthead: logo left, version + QR right */
  .mast{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin:0 0 calc(2.4 * var(--air))}
  .mast .logo{height:2.8rem;width:auto;display:block}
  .mast .meta{display:flex;align-items:center;gap:.7rem;font-size:.82rem;line-height:1.35;color:var(--soft);text-align:right}
  .mast .qrbox{flex:0 0 auto;width:3.8rem;height:3.8rem;border:1px dashed #b7ad98;background:var(--photo-bg);border-radius:2px;
    display:flex;align-items:center;justify-content:center;text-align:center;font-size:.55rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#8a8069}


  /* Leading steps with the column: tighter on narrow measures. Screen only:
     in print the container is the full page, not a column. */
  @media screen{
    @container (max-width: 26rem){ p, li{ line-height:1.45 } }
    @container (min-width: 26rem) and (max-width: 36rem){ p, li{ line-height:1.52 } }
  }

  /* ============ PRINT: two-column double-sided letter insert ============ */
  @media print {
    @page { size: letter; margin: 0.5in; }
    html, body { background: #fff; font-size: 9.4pt; line-height: 1.32; }
    .wrap { max-width: none; margin: 0; padding: 0; }

    .wrap { --cols: 2; --gap: 0.34in; --air-min: .32rem; }
    /* explicit columns per page (Safari collapses CSS multicol to one column when printing) */
    .pg { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--gap); align-items: start; }
    .pg + .pg { break-before: page; }
    .col { display: block; min-width: 0; }
    .col > :first-child { margin-top: 0; }

    /* sizes only: vertical spacing comes from --air, scaled to the narrower print column */
    h1 { font-size: 19pt; }
    .sub { font-size: 10pt; }
    h2 { font-size: 11.5pt; break-after: avoid; }
    h3 { font-size: 9.8pt; break-after: avoid; }
    ul, ol { padding-left: 1.1em; }

    /* keep headings/boxes from splitting awkwardly across columns/pages */
    .warn, .note, .illus, .qr, table { break-inside: avoid; }
    h1, h2, h3 { break-inside: avoid; }

    /* h1 + subtitle span both columns as a masthead */
    h1, .sub { column-span: all; }
    .mast { column-span: all; }
    .mast .logo { height: .42in; }
    .mast .meta { font-size: 8pt; }
    .mast .qrbox { width: .62in; height: .62in; font-size: 5.5pt; }
    .qr .qrcode { width: .62in; height: .62in; }
    .video { display: none; }
    .print-only { display: flex; }
    .tracefig { break-inside: avoid; }
    .tracefig.narrow svg.trace { width: 100%; }
    .qr.player-on { display: flex; }

    /* caution/note boxes: tighter */
    .warn, .note { padding: .5em .7em; border-left-width: 3px; float: none; width: auto; }

    /* ---- graphics placeholders: reserve real footprint ---- */
    .illus {
      padding: 0; border: 1px dashed #b7ad98;
      background: #f4f1ea; color: #8a8069;
      display: flex; align-items: center; justify-content: center; text-align: center;
      min-height: 1.4in;                 /* single-column diagram/photo footprint */
    }
    .illus .tag { position: absolute; }  /* label floats; box shows reserved space */
    .illus.photo { min-height: 1.1in; }

    /* diagrams: keep within a column at a modest reserved height */
    .illus.diagram { min-height: 1.1in; }
    .illus.diagram.locked { min-height: 1.1in; }

    /* table: compact */
    th, td { padding: .28em .4em; font-size: 8.6pt; }

    a { color: #000; text-decoration: none; }
  }

  /* ============ PRINT RHYTHM (after Tschichold) ============
     One unit, L = the body line (9.4pt x 1.32 = 12.4pt). Every vertical gap is a
     simple fraction or multiple of L, so space carries meaning: paragraphs are
     marked by a 1em indent, not gaps; headings take space above, almost none below,
     binding them to what they head. Margins progress top < sides < bottom, setting
     the text block high on the page, in close to the page's own proportion. */
  @media print {
    @page { size: letter; margin: 0.5in 0.5in 0.65in; }
    .wrap { --L: 12.4pt; --gap: 2em; }
    .pg { column-gap: calc(2 * var(--L)); }

    p { margin: 0; }
    p + p { text-indent: 1em; }
    ul, ol { margin: calc(.5 * var(--L)) 0; }
    li { margin: 0 0 calc(.2 * var(--L)); }
    li:last-child { margin-bottom: 0; }
    ol + p, ul + p { margin-top: calc(.5 * var(--L)); }

    h1 { margin: 0 0 calc(.5 * var(--L)); }
    h2 { margin: calc(1.25 * var(--L)) 0 calc(.25 * var(--L)); }
    h3 { margin: calc(1 * var(--L)) 0 0; font-size: 9.4pt; }
    h2 + h3 { margin-top: calc(.25 * var(--L)); }
    .mast { margin-bottom: calc(1 * var(--L)); }

    .triptych, .diptych, .tracefig { margin: calc(.5 * var(--L)) 0; }
    .triptych .sq { aspect-ratio: 5 / 4; }
    .triptych figcaption, .diptych figcaption { line-height: 1.0; margin-top: calc(.25 * var(--L)); }
    .tracefig figcaption { line-height: 1.12; margin-top: calc(.25 * var(--L)); font-size: 7.6pt; }

    /* video strips: no dark panel. QR set flush left, text beside it, a hairline above */
    .qr, .qr.print-only, .qr.player-on {
      background: none; color: var(--ink); border-radius: 0;
      padding: calc(.4 * var(--L)) 0 0; border-top: .5pt solid #000;
      margin: calc(.5 * var(--L)) 0; gap: 1em; align-items: flex-start;
    }
    .qr .ico { display: none; }
    .qr .qrcode { order: -1; margin-left: 0; width: .58in; height: .58in; }
    .qr .tag { color: var(--soft); }
    .qr .watch { color: var(--ink); }
  }

  /* ============ SCREEN RHYTHM (same principles as print) ============
     L is the body line, which steps down with the measure as the leading does.
     Paragraphs indent; headings carry space above and bind to their text; the
     measure is held near 70 characters. On phones, photo rows become thumbnail
     beside caption, so each image keeps its caption in view. */
  @media screen {
    .wrap { max-width: 36.5rem; --L: calc(18px * 1.62); }
    @container (max-width: 26rem) { .wrap > *, .pg > *, .col > * { --L: calc(18px * 1.45); } }
    @container (min-width: 26rem) and (max-width: 36rem) { .wrap > *, .pg > *, .col > * { --L: calc(18px * 1.52); } }

    p { margin: 0; }
    p + p { text-indent: 1em; }
    ul, ol { margin: calc(.5 * var(--L)) 0; }
    li { margin: 0 0 calc(.25 * var(--L)); }
    li:last-child { margin-bottom: 0; }
    ol + p, ul + p { margin-top: calc(.5 * var(--L)); }

    h1 { margin: 0 0 calc(.5 * var(--L)); }
    h2 { margin: calc(1.75 * var(--L)) 0 calc(.25 * var(--L)); }
    h3 { margin: calc(1.1 * var(--L)) 0 0; }
    .mast { margin-bottom: calc(1.75 * var(--L)); }

    .triptych, .diptych, .tracefig, .video, .qr { margin: calc(.75 * var(--L)) 0; }
    .triptych figcaption, .diptych figcaption, .tracefig figcaption, .video figcaption {
      line-height: 1.32; margin-top: calc(.3 * var(--L)); }
    .triptych { gap: calc(.75 * var(--L)) 1rem; }
  }
  @media screen and (max-width: 40rem) {
    .triptych, .diptych { grid-template-columns: 1fr; gap: calc(.6 * var(--L)); }
    .triptych figure { display: grid; grid-template-columns: 38% 1fr; gap: .9rem; align-items: start; }
    .triptych figcaption { margin-top: 0; }
  }
  .mast a.home{display:block;line-height:0}