:root{
  --ink:#1b1b1b; --muted:#5c5c5c; --page:#e8e9e8; --panel:#f1f1ee;
  --bar:#26261f;              /* dark warm bar for nav + footer */
  --bar-ink:#ffffff; --bar-sep:#54544a;
  --accent:#566e3f; --line:#d3d3cc;
  --script:"Monotype Corsiva","Palace Script MT","Apple Chancery",
           "URW Chancery L","Snell Roundhand","Segoe Script",cursive;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--page);color:var(--ink);
  font-family:Verdana,Segoe UI,Helvetica,Arial,sans-serif;font-size:15px;line-height:1.55}
a{color:var(--accent)}
img{max-width:100%;height:auto}

/* centred fixed-width "paper" column, as in the original WebPlus layout */
.wrap{max-width:858px;margin:24px auto;background:#fff;
  border:1px solid #c7c7bf;box-shadow:0 1px 7px rgba(0,0,0,.28)}

/* ---- banner: school photo as background, title restored ---- */
header.banner{position:relative;aspect-ratio:850/257;min-height:170px;overflow:hidden;
  background:#26261f url("../wpimages/wpcf0a1e4b_01_00.jpg") no-repeat center top;
  background-size:cover}
/* title block sat in a right-of-centre box in the original
   (left:279 / width:571 of an 850px canvas) */
header.banner .banner-block{position:absolute;left:32.8%;width:67.2%;top:0;
  padding-top:1%;text-decoration:none;color:#141414}
/* the original set the title in Comic Sans MS (black); browsers without it
   fall back to a chancery/cursive face, which is how it reads on most systems */
.banner-title{display:block;text-align:left;
  font-family:"Comic Sans MS","Comic Sans",var(--script);font-weight:400;line-height:1.06;
  font-size:clamp(19px,4vw,34px);letter-spacing:.01em;
  text-shadow:0 1px 2px rgba(255,255,255,.5)}
.banner-sub{display:block;text-align:center;
  font-family:"Comic Sans MS","Comic Sans",var(--script);
  font-size:clamp(10px,1.7vw,16px);margin-top:.3em;
  text-shadow:0 1px 2px rgba(255,255,255,.55)}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---- home page: the original four dark-panel boxes (were background JPEGs) ---- */
body.home-page main{background:var(--page)}
.home-grid{display:flex;gap:12px;margin:2px 0}
.home-grid .col{flex:1;min-width:0;display:flex;flex-direction:column;gap:12px}
.home-grid .box{background:#343434;border:1px solid #4a4a44;color:#fff;padding:15px 17px}
.home-grid .box p{margin:0 0 .85em}
.home-grid .box p:last-child{margin-bottom:0}
.home-grid .box a{color:#fff;text-decoration:underline}
.home-grid .box .box-h{font-family:"Trebuchet MS",Verdana,sans-serif;font-weight:700;
  font-size:1.35rem;margin-bottom:.5em}
.home-grid .box img{display:block;margin:.2em 0;border:0}
.home-grid .box .badges{display:flex;gap:5%;margin-top:1em}
.home-grid .box .badges img{width:47.5%;height:auto}
/* WebPlus text classes inside the panels: force light */
.home-grid .box [class*="Normal-C"],.home-grid .box .Strong-C,.home-grid .box .H2-C{color:#fff}

/* ---- navigation: flat dark bar with | separators ---- */
nav.mainnav{margin:0}
nav.mainnav > ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;
  justify-content:flex-start;background:var(--bar)}
nav.mainnav li{position:relative}
nav.mainnav > ul > li + li{border-left:1px solid var(--bar-sep)}
nav.mainnav a{display:block;color:var(--bar-ink);text-decoration:none;
  padding:9px 15px;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
nav.mainnav > ul > li > a:hover,nav.mainnav li.active > a{color:#b6b6ab}
nav.mainnav ul.sub{list-style:none;margin:0;padding:0;position:absolute;left:0;top:100%;
  min-width:220px;background:var(--bar);display:none;z-index:40;
  box-shadow:0 8px 22px rgba(0,0,0,.4)}
nav.mainnav ul.sub ul.sub{left:100%;top:0}
nav.mainnav li:hover > ul.sub{display:block}
nav.mainnav ul.sub a{text-transform:none;font-weight:400;font-size:12px;
  padding:9px 14px;border-top:1px solid rgba(255,255,255,.08)}
nav.mainnav ul.sub a:hover{background:#38382e;color:#fff}
nav.mainnav ul.sub li.has-sub > a::after{content:" \25b8";float:right;color:#9a9a8c}
.navtoggle{display:none}

/* ---- content ---- */
main{padding:22px 28px 34px}
main h1{font-size:20px;font-weight:700;line-height:1.25;
  margin:.1em 0 .8em;color:#2a2a22;border-bottom:2px solid var(--accent);padding-bottom:.3em}
main h2{font-size:1.1rem;margin:1.5em 0 .5em}
main h3{font-size:1.02rem;margin:1.3em 0 .4em}
main p{margin:0 0 1em}
main hr{border:0;border-top:1px solid var(--line);margin:1.6em 0}
main img{margin:6px 0}
.embed-link a{font-weight:700}

/* WebPlus class remnants -> readable defaults */
.Normal-P,.Wp-Normal-P,.Normal-P-P0,.Body-Text-P,.Wp-Body-P,.H3-P,.Wp-H3-P,.Wp-H2-P,.Heading-2-P{
  text-align:left !important;margin:0 0 .9em}
.Normal-C-C5,.H2-C,.H3-C,.H3-C-C0,.Heading-2-C,.Strong-C{font-weight:700}
.H2-C{font-size:1.12rem}.H3-C,.H3-C-C0,.Heading-2-C{font-size:1.02rem}
.Normal-C-C7{font-style:italic;font-weight:700}
.Normal-C-C0{font-size:1.25rem;font-weight:700}
.Normal-C-C1{font-size:1.02rem}

/* galleries */
ul.gallery{list-style:none;padding:0;margin:1em 0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px}
ul.gallery img{width:100%;display:block}
ul.newsletters,main ul{line-height:1.9}

/* photo / tour pages: tile the thumbnail links */
body.gallery-page main a:has(> img){display:inline-block;vertical-align:top;
  width:190px;margin:0 8px 8px 0}
body.gallery-page main a:has(> img) img{width:100%;height:142px;object-fit:cover;
  border:1px solid var(--line)}
body.gallery-page main > img{display:block;margin:14px 0}
body.gallery-page main p{max-width:62ch}

/* tables */
.table-wrap{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:.84rem;margin:1em 0}
table.members td,table.members th,table td,table th{border:1px solid var(--line);padding:5px 8px;text-align:left;vertical-align:top}
table.members thead th,table thead th{background:var(--panel)}
table.members tbody tr:nth-child(odd){background:#fafaf8}

/* ---- footer: dark bar, italic serif, matching the original ---- */
footer.site{background:var(--bar);color:#e6e6dd;padding:10px 16px 12px;text-align:center}
footer.site .copy{margin:0;font-family:Georgia,"Times New Roman",serif;font-style:italic;font-size:13px}
footer.site .copy a{color:#c9c9ba}
footer.site .hits{float:right;font-style:normal;font-size:12px;color:#9c9c8f;padding-left:12px}

@media (max-width:900px){
  .wrap{margin:0 auto;border-left:0;border-right:0}
}

/* ---- best-effort responsive layer (the site predates responsive design) ---- */
@media (max-width:768px){
  body{background:#fff}
  .wrap{max-width:none;margin:0;border:0;box-shadow:none}

  /* banner title spans the full width and centres over the photo */
  header.banner{min-height:150px}
  header.banner .banner-block{left:0;width:100%;padding:6px 10px 0}
  .banner-title,.banner-sub{text-align:center}

  /* navigation collapses to a toggle */
  .navtoggle{display:block;width:100%;background:var(--bar);color:#fff;border:0;
    padding:12px;font:inherit;font-weight:700;text-transform:uppercase;
    font-size:12px;letter-spacing:.04em;text-align:left}
  nav.mainnav > ul{display:none;flex-direction:column}
  nav.mainnav > ul.open{display:flex}
  nav.mainnav > ul > li + li{border-left:0;border-top:1px solid var(--bar-sep)}
  nav.mainnav a{padding:11px 12px}
  nav.mainnav ul.sub{position:static;display:block;box-shadow:none;min-width:0;background:#1e1e18}
  nav.mainnav ul.sub ul.sub{left:auto}
  nav.mainnav ul.sub a{padding-left:26px}
  nav.mainnav ul.sub ul.sub a{padding-left:40px}
  nav.mainnav ul.sub li.has-sub > a::after{content:""}

  /* single column, ~10px viewport gutters */
  main{padding:16px 10px 24px}
  footer.site{padding:12px 10px}
  main hr{margin:1.3em 0}

  body.home-page main{background:#fff}
  .home-grid{flex-direction:column;gap:10px}

  /* long content tables scroll rather than overflow the viewport */
  main table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}

  /* photo/tour thumbnails: two per row */
  body.gallery-page main a:has(> img){width:calc(50% - 6px);margin:0 3px 8px}
  body.gallery-page main a:has(> img) img{height:120px}
}