/* Make the 2008 fixed-width layout fluid.

   The page is a table of sliced JPEGs at hard-coded pixel sizes. Rather than
   scale the whole thing (which softens the text along with everything else),
   the slices that are only flat colour are replaced with the colour itself, so
   the chrome stretches and the text stays sharp at any width. The palette is
   taken from the slices: gold #EDBD3D, teal #5B7778, grey #444444. */

html, body { margin: 0; padding: 0; background: #ffffff; }

/* release the fixed-width shell */
body > div { width: 100% !important; max-width: none !important; }
body > div > table { width: 100% !important; }
#Table_01 { width: 100% !important; table-layout: auto; }

/* ---- header ---------------------------------------------------------- */
/* rows 1-2 are the gold band: the corner slices only exist to fake rounded
   corners against the old grey page, so the band becomes flat colour */
#Table_01 > tbody > tr:nth-child(1) > td,
#Table_01 > tbody > tr:nth-child(2) > td {
  background-color: #EDBD3D !important;
  background-image: none !important;
}
img[src$="index_02.jpg"], img[src$="index_03.jpg"], img[src$="index_06.jpg"],
img[src$="introduction_02.jpg"], img[src$="introduction_03.jpg"],
img[src$="introduction_04.jpg"], img[src$="introduction_05.jpg"],
img[src$="introduction_06.jpg"],
img[src$="introduction_01.jpg"], img[src$="introduction_09.jpg"],
img[src$="introduction_16.jpg"] { display: none !important; }

/* the logo and the Home | Contact Us block stay as artwork */
img[src$="index_07.jpg"], img[src$="introduction_07.jpg"] { display: block; }
img[src$="index_08.jpg"] { display: block; margin-left: auto; }

/* ---- banner ---------------------------------------------------------- */
/* the one genuinely photographic element; cover-fit so it spans any width */
img[src$="banner.jpg"], img[src$="introduction_10.jpg"] {
  width: 100% !important;
  height: clamp(150px, 13vw, 260px) !important;
  object-fit: cover;
  object-position: center right;
  display: block;
}

/* ---- horizontal rules ------------------------------------------------ */
img[src$="index_11.jpg"], img[src$="introduction_11.jpg"] {
  width: 100% !important; height: 12px !important; display: block;
}
/* index_28 (gold rule) and index_32 (copyright bar + caption tabs) keep their
   natural size and left edge: that is what keeps the tabs under their photos.
   The band behind them is painted with the colour instead of stretched pixels. */
img[src$="index_28.jpg"], img[src$="index_32.jpg"], img[src$="introduction_28.jpg"] {
  display: block;
}
#Table_01 td:has(> img[src$="index_32.jpg"]),
#Table_01 td:has(> img[src$="introduction_28.jpg"]) {
  background-color: #5B7778 !important;
}
.ahsan-photostrip { font-size: 0; line-height: 0; white-space: nowrap; }
.ahsan-photostrip img { display: inline-block; vertical-align: top; }

/* ---- body columns ---------------------------------------------------- */
/* pure-white filler that was pinning the content column to 671px */
img[src$="index_14.jpg"] { display: none !important; }

/* gold rules either side of the content well */
#Table_01 td[background$="index_13.jpg"], td[background$="introduction_13.jpg"] {
  width: 13px !important; background-image: none !important; background-color: #EDBD3D !important;
}
#Table_01 td[background$="index_15.jpg"], td[background$="introduction_15.jpg"] {
  width: 18px !important; background-image: none !important; background-color: #EDBD3D !important;
}

/* One column has to absorb the slack, otherwise the browser shares the extra
   width across every column and the 232px sidebar and the footer photo strip
   both stretch out of shape. The main content cell takes all of it. */
/* :not([background]) matters — the thin gold rules beside the content well
   also carry rowspan="12" bgcolor="#FFFFFF", and without it they grab the
   slack instead and the page fills with gold. */
#Table_01 td[rowspan="12"][bgcolor="#FFFFFF"]:not([background]),
#Table_01 td[colspan="5"][bgcolor="#FFFFFF"]:not([background]) { width: 100%; }
#Table_01 td[bgcolor="#5B7778"] { width: 232px; }
#Table_01 td[bgcolor="#FFFFFF"] { background-color: #ffffff; }

/* The outer shell table is height="100%", so it vertically centres the layout
   and leaves a white band above the header on a tall window. */
body > div > table { border-collapse: collapse; border-spacing: 0; height: auto !important; }
body > div > table > tbody > tr > th,
body > div > table > tbody > tr > td { padding: 0; vertical-align: top; }

/* The three footer photos originally tiled the 702px content width exactly.
   Once the table is fluid their cells are far wider than the artwork, so the
   photos are centred in each third rather than stretched — upscaling them 3x
   would undo the sharpness this whole approach is for. */


/* the old menu graphics are 232px wide; keep that column honest */
img[src$="index_12.jpg"], img[src$="index_19.jpg"], img[src$="index_26.jpg"],
img[src$="index_27.jpg"], img[src$="introduction_12.jpg"],
img[src$="introduction_17.jpg"], img[src$="introduction_18.jpg"],
img[src$="introduction_21.jpg"], img[src$="introduction_22.jpg"],
img[src$="introduction_23.jpg"], img[src$="introduction_24.jpg"],
img[src$="introduction_26.jpg"], img[src$="introduction_27.jpg"] { display: block; }

/* content should breathe once the column is wide */
div.text, div[style*="text-align:justify"] { max-width: 100ch; }

/* ---- footer photo strip --------------------------------------------- */
img[src$="index_29.jpg"], img[src$="index_30.jpg"], img[src$="index_31.jpg"] {
  max-width: 100%; height: auto;
}