/* ==========================================================================
   AV Acoustics — inner pages
   A calm template for the 87 pages under the home page: a readable measure
   for technical writing, a breadcrumb that mirrors the URL, and siblings
   listed at the foot so every branch is reachable. Loaded after site.css,
   which supplies the shell (header, overlay menu, footer, type, palette).
   ========================================================================== */

.page{position:relative;z-index:2;background:var(--paper);
  /* the reading column, and the width media may use */
  --reading:68ch; --wide:1180px;}

/* --------------------------------- head --------------------------------- */
.page-head{
  padding:calc(var(--head-h) + clamp(30px,7vh,80px)) var(--pad) clamp(30px,5vh,60px);
  border-bottom:1px solid var(--rule);
}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:clamp(20px,4vh,40px);}
.crumbs a,.crumbs span{font-family:var(--sans);font-weight:400;font-size:clamp(13px,calc(.8*var(--fu)),20px);color:var(--grey);}
.crumbs a:hover{color:var(--red);}
.crumbs i{font-style:normal;color:var(--steel);}
.crumbs [aria-current]{color:var(--steel);}

.page-eyebrow{
  display:block;margin-bottom:clamp(14px,2vh,22px);
  font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:clamp(18px,calc(1.4*var(--fu)),36px);color:var(--grey);
}
.page-eyebrow em{font-style:italic;color:var(--red);}
/* the title runs the width of the page, as the reference sets its headings */
.page-title{
  font-family:var(--sans);font-weight:300;letter-spacing:0;text-wrap:balance;
  font-size:clamp(38px,calc(6.4*var(--fu)),164px);line-height:1.04;
}
.page-lede{
  margin-top:clamp(18px,3vh,32px);max-width:52ch;
  font-weight:400;font-size:clamp(18px,calc(1.5*var(--fu)),38px);line-height:1.5;color:var(--grey);text-wrap:pretty;
}

/* -------------------------------- body ---------------------------------- */
/* one column of prose at a readable measure, with room for wider figures */
/* Each section is a heading on the left and its text on the right, so the
   page is filled across its width rather than run down one side. Photographs
   and tables span both columns. Everything starts at the page gutter — the
   same edge as the logo above and the footer below. */
.page-body{padding:clamp(40px,7vh,90px) var(--pad) clamp(40px,7vh,80px);}
/* minmax(0,1fr), not the default auto: a slider's track is a horizontal
   scroller whose contents are far wider than the screen, and an auto column
   sizes itself to that full width — which is what made the whole page scroll
   sideways on a phone. */
.blk{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(14px,2.4vh,22px);padding-block:clamp(16px,3vh,34px);}
.blk:first-child{padding-top:0;}
.blk + .blk{border-top:1px solid var(--rule);}
.blk-body > * + *{margin-top:clamp(14px,2vh,20px);}
.blk-wide{margin-top:clamp(28px,4.5vh,52px);}

@media(min-width:1000px){
  .blk{
    grid-template-columns:minmax(0,27%) minmax(0,1fr);
    column-gap:clamp(32px,5vw,128px);row-gap:0;
  }
  .blk-head{grid-column:1;position:sticky;top:calc(var(--head-h) + 24px);align-self:start;padding-bottom:clamp(16px,2.5vh,28px);}
  /* A slider, gallery or table spans both columns, so a heading still stuck
     to the top of the screen would sit on top of it. In those sections the
     heading stays with its text instead. */
  .blk:has(> .blk-wide) .blk-head{position:static;}
  .blk-body{grid-column:2;}
  .blk-wide{grid-column:1 / -1;}
  /* a section with no heading keeps its text in the same column as the rest */
  .blk-head:empty + .blk-body{grid-column:2;}
}
.blk-body > p,.blk-body > ul,.blk-body > ol,
.blk-body > .page-note,.blk-body > .glossary{max-width:var(--reading);}
.page-body h2{
  font-family:var(--sans);font-weight:300;font-size:clamp(26px,calc(2.4*var(--fu)),61px);line-height:1.2;
  text-wrap:balance;
}
.blk-head h2::before{
  content:"";display:block;width:clamp(34px,calc(2.6*var(--fu)),66px);height:2px;background:var(--red);
  margin-bottom:clamp(12px,1.6vh,18px);
}
.page-body h3{
  font-family:var(--sans);font-weight:500;font-size:clamp(19px,calc(1.5*var(--fu)),38px);line-height:1.3;
  margin-top:clamp(10px,2vh,20px);
}
.page-body p{font-weight:400;font-size:clamp(16.5px,calc(1.05*var(--fu)),27px);line-height:1.7;color:var(--grey);text-wrap:pretty;}
/* highlighted words carry the logo's red; it is the one accent on the page */
.page-body strong{font-weight:500;color:var(--red);}
.page-body a{color:var(--red);text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:color-mix(in srgb,var(--red) 40%,transparent);}
.page-body a:hover{text-decoration-color:var(--red);}

.page-body ul,.page-body ol{margin:0;padding:0;list-style:none;display:grid;gap:10px;}
.page-body li{
  position:relative;padding-left:26px;font-weight:400;font-size:clamp(16px,calc(1*var(--fu)),26px);line-height:1.6;color:var(--grey);
}
.page-body li::before{
  content:"";position:absolute;left:4px;top:.62em;width:8px;height:1px;background:var(--red);
}
.page-body ol{counter-reset:step;}
.page-body ol li::before{
  content:counter(step,decimal-leading-zero);counter-increment:step;
  left:0;top:0;width:auto;height:auto;background:none;
  font-family:var(--mono,var(--sans));font-size:clamp(12px,calc(.8*var(--fu)),19px);color:var(--red);
}

/* a plain specification table — the one place figures line up */
.spec{width:100%;border-collapse:collapse;font-size:clamp(15px,calc(.95*var(--fu)),24px);}
.spec th,.spec td{text-align:left;padding:clamp(11px,calc(.8*var(--fu)),18px) clamp(14px,calc(1*var(--fu)),24px) clamp(11px,calc(.8*var(--fu)),18px) 0;border-bottom:1px solid var(--rule);vertical-align:top;}
.spec th{font-weight:500;width:40%;}
.spec td{color:var(--grey);font-variant-numeric:tabular-nums;}
.tablewrap{overflow-x:auto;max-width:100%;}

/* figures may run wider than the text column */
.page-figure{margin:clamp(10px,2vh,20px) 0;max-width:min(100%,max(560px,calc(62*var(--fu))));width:100%;}
.page-figure img{width:100%;height:auto;display:block;}
.page-figure figcaption{margin-top:12px;font-size:clamp(13px,calc(.8*var(--fu)),20px);color:var(--steel);}
/* Columns rather than a grid, so every photograph keeps its own shape
   instead of being cropped to one ratio. */
.page-gallery{columns:3;column-gap:clamp(10px,calc(1*var(--fu)),24px);width:100%;margin:clamp(10px,2vh,20px) 0;}
@media(min-width:1700px){.page-gallery{columns:4;}}
.page-gallery img{display:block;width:100%;height:auto;margin:0 0 clamp(10px,calc(1*var(--fu)),24px);break-inside:avoid;}
@media(max-width:1000px){.page-gallery{columns:2;}}
@media(max-width:480px){.page-gallery{columns:2;column-gap:10px;}.page-gallery img{margin-bottom:10px;}}

/* pull quote for a claim worth slowing down on */
.page-note{
  border-left:3px solid var(--red);padding:4px 0 4px 20px;
  font-family:var(--serif);font-style:italic;font-size:clamp(19px,calc(1.6*var(--fu)),41px);line-height:1.45;
}

/* ------------------------------- siblings -------------------------------- */
/* Section navigation, directly under the page head: what else is in this part
   of the site, before the reader starts on the page itself. */
.page-more{padding:clamp(26px,4vh,46px) var(--pad);border-bottom:1px solid var(--rule);}
.page-more h2{
  font-weight:400;font-size:clamp(13px,calc(.8*var(--fu)),20px);letter-spacing:.06em;text-transform:uppercase;
  color:var(--steel);margin-bottom:clamp(14px,2vh,20px);
}
/* auto-fit, so a row of three or four fills the width instead of leaving an
   empty cell at the end */
.more-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,clamp(230px,calc(17*var(--fu)),400px)),1fr));gap:1px;background:var(--rule);
  border:1px solid var(--rule);}
.more-list a{
  display:flex;flex-direction:column;gap:5px;background:var(--paper);padding:clamp(16px,calc(1.2*var(--fu)),28px) clamp(18px,calc(1.35*var(--fu)),32px);
  transition:background .3s ease,color .3s ease;
}
.more-list a:hover{background:var(--surface-2,rgba(138,141,143,.10));}
.more-list b{font-weight:400;font-size:clamp(16px,calc(1*var(--fu)),26px);line-height:1.3;}
.more-list span{font-size:clamp(13px,calc(.8*var(--fu)),20px);color:var(--steel);line-height:1.4;}

/* -------------------------------- enquiry -------------------------------- */
.page-cta{
  padding:clamp(46px,8vh,100px) var(--pad);border-top:2px solid var(--black);
  display:flex;justify-content:space-between;align-items:flex-end;gap:clamp(24px,5vw,128px);flex-wrap:wrap;
}

.page-cta h2{font-family:var(--sans);font-weight:300;font-size:clamp(26px,calc(3.2*var(--fu)),82px);line-height:1.1;max-width:16ch;}
.page-cta p{margin-top:14px;max-width:42ch;font-size:clamp(16px,calc(1.05*var(--fu)),27px);line-height:1.55;color:var(--grey);}

@media(max-width:760px){
  .page-body{grid-template-columns:minmax(0,1fr);}
  .page-title{max-width:none;}
}

/* ------------------------- menu for the whole site ------------------------ *
   The home page's overlay lists five anchors; a site of 88 pages needs every
   section in it, so this variant lays them in two columns and sets the type a
   step smaller — the rows still share the height between header and contacts.
   ------------------------------------------------------------------------- */
.overlay--full .ov-nav{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  align-content:center;column-gap:clamp(24px,5vw,128px);border-top:0;
}
.overlay--full .ov-nav a{flex:none;border-top:1px solid var(--rule-dk);border-bottom:0;}
.overlay--full .ov-nav span{font-size:clamp(20px,min(3.2vh,4.4vw),46px);}
.overlay--full .ov-nav i{font-size:13px;}
@media(max-width:720px){
  .overlay--full .ov-nav{grid-template-columns:1fr;}
  .overlay--full .ov-nav span{font-size:clamp(18px,2.4vh,24px);}
}

/* --------------------------- glossary and logos -------------------------- */
.glossary{display:grid;gap:0;margin:0;}
.dl-row{display:grid;grid-template-columns:minmax(0,1fr);gap:4px;padding:14px 0;border-bottom:1px solid var(--rule);}
.glossary dt{font-weight:500;font-size:clamp(16px,calc(1*var(--fu)),26px);}
.glossary dd{margin:0;font-weight:400;font-size:clamp(15.5px,calc(.95*var(--fu)),24px);line-height:1.6;color:var(--grey);}
@media(min-width:720px){.dl-row{grid-template-columns:minmax(0,24ch) minmax(0,68ch);gap:clamp(24px,4vw,102px);}}

/* The rules are drawn on the cells themselves, not as a coloured background
   showing through 1px gaps: on a wide screen the last row is rarely full, and
   a background left the unused end of it as a grey slab. */
.logo-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,clamp(150px,calc(11*var(--fu)),230px)),1fr));
  gap:0;border-top:1px solid var(--rule);border-left:1px solid var(--rule);width:100%;
}
.logo-grid img{
  background:#fff;padding:clamp(18px,calc(1.3*var(--fu)),30px);width:100%;
  height:clamp(110px,calc(7.6*var(--fu)),170px);object-fit:contain;
  border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);
}

/* home page: links out of the work section, and a five-column footer */
.work-more{margin-top:clamp(18px,3vh,30px);display:flex;gap:18px;flex-wrap:wrap;}
.work-more .ln{color:#fff;}
@media(min-width:900px){.foot-cols{grid-template-columns:repeat(5,1fr);}}

/* ------------------------------- site map -------------------------------- */
.map-cols{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,clamp(230px,calc(17*var(--fu)),340px)),1fr));gap:clamp(30px,calc(2.2*var(--fu)),52px) clamp(36px,calc(2.6*var(--fu)),62px);max-width:min(100%,calc(68*var(--fu)));width:100%;}
.map-cols h3{font-family:var(--sans);font-weight:500;font-size:clamp(16px,calc(1*var(--fu)),26px);margin:0 0 10px;padding-bottom:8px;border-bottom:1px solid var(--rule);}
.map-list{list-style:none;margin:0;padding:0;display:grid;gap:6px;}
.map-list li{padding:0;font-size:clamp(14.5px,calc(.9*var(--fu)),23px);line-height:1.45;}
.map-list li::before{display:none;}
.map-list a{color:var(--grey);text-decoration:none;}
.map-list a:hover{color:var(--red);}

/* ------------------------- touch targets on phones ------------------------ *
   Link lists (breadcrumbs, footers, the site map) are set tight for reading
   on a desktop. On a touch screen each one needs a finger-sized target, so
   they get vertical padding rather than a larger type size. Links inside
   running prose are left alone — they belong to the sentence.
   ------------------------------------------------------------------------- */
@media(max-width:760px){
  .crumbs a,.crumbs [aria-current]{display:inline-block;padding:5px 0;}
  .foot-cols p a,.ov-foot p a{display:inline-block;padding:7px 0;}
  .map-list li{padding:0;}
  .map-list a{display:block;padding:9px 0;}
  .page-body li{padding-top:2px;padding-bottom:2px;}
  .head-menu{padding:12px 0 12px 16px;}
}
@media(max-width:760px){
  .ln{display:inline-block;padding:8px 0 10px;}
  .caps-list b a{display:inline-block;padding:4px 0;}
}

/* --------------------------------- slider -------------------------------- *
   A filmstrip of project photographs. Every slide is the same height and its
   own natural width, so no picture is cropped to fit a frame. It scrolls with
   a swipe, the arrows, or the keyboard, and snaps to each slide.
   ------------------------------------------------------------------------- */
.slider{width:100%;min-width:0;max-width:100%;margin:clamp(10px,2vh,20px) 0;}
.slider-track{
  min-width:0;max-width:100%;display:flex;gap:clamp(10px,1.4vw,36px);
  overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
  scrollbar-width:none;padding-bottom:4px;
}
.slider-track::-webkit-scrollbar{display:none;}
.slide{flex:none;margin:0;scroll-snap-align:start;}
.slide img{display:block;height:clamp(230px,46vh,760px);width:auto;background:var(--rule);}

/* On a phone a fixed height would force wide photographs to crop, so slides
   are sized by width there and each keeps its own height. */
@media(max-width:700px){
  .slide{width:86vw;}
  .slide img{width:100%;height:auto;}
}
.slide figcaption{margin-top:12px;display:flex;flex-direction:column;gap:3px;}
.slide figcaption b{font-weight:400;font-size:clamp(15px,calc(1.1*var(--fu)),28px);}
.slide figcaption span{font-size:clamp(13.5px,calc(.85*var(--fu)),22px);color:var(--steel);}
.slider-bar{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  margin-top:clamp(14px,2vh,22px);padding-top:14px;border-top:1px solid var(--rule);
}
.slider-count{font-family:var(--serif);font-style:italic;font-size:clamp(16px,calc(1*var(--fu)),26px);color:var(--grey);}
.slider-count span{font-style:italic;}
.slider-btns{display:flex;gap:10px;}
.slider-btn{
  width:clamp(46px,calc(3.2*var(--fu)),72px);height:clamp(46px,calc(3.2*var(--fu)),72px);border:1px solid var(--steel);border-radius:999px;
  display:flex;align-items:center;justify-content:center;font-size:clamp(17px,calc(1.15*var(--fu)),26px);color:var(--black);
  transition:background .3s ease,color .3s ease,border-color .3s ease,opacity .3s ease;
}
.slider-btn:hover{background:var(--black);border-color:var(--black);color:#fff;}
.slider-btn[disabled]{opacity:.32;pointer-events:none;}
@media(prefers-reduced-motion:reduce){.slider-track{scroll-behavior:auto;}}
.slider-track{cursor:grab;}
.slider-track.is-dragging{cursor:grabbing;scroll-snap-type:none;user-select:none;}
.slider-track.is-dragging img{pointer-events:none;}