/* SHARED STYLES: this one file controls all five pages; every nonblank code line explains itself. */
/* START HERE: change the colour and spacing variables below before editing individual components. */
:root { /* Define reusable settings that are available throughout the website. */
  --blue: #0689e4; /* Set the main bright blue requested for the site. */
  --green: #71ab23; /* Set the main fresh green requested for the site. */
  --deep-blue: #0032db; /* Set the secondary electric blue used in selected highlights. */
  --yellow: #fbb905; /* Set the small golden accent used in the site mark and focus outlines. */
  --orange: #d55e0f; /* Set the small orange accent used in the site mark. */
  --text: #ffffff; /* Keep headings, paragraphs, and links white. */
  --surface: #063450; /* Use a dark blue surface so white text stays readable. */
  --surface-deep: #03283e; /* Give inset areas a slightly deeper blue. */
  --surface-rgb: 6, 52, 80; /* Match the dark surface in RGB form for translucent panels. */
  --accent: var(--blue); /* Use blue as the default page accent. */
  --accent-rgb: 6, 137, 228; /* Match the default accent in RGB form for transparent highlights. */
  --page-width: 1160px; /* Change the maximum site width here; narrower screens still fit automatically. */
  --gap: 22px; /* Set the space between major panels and cards. */
  --panel-padding: clamp(20px, 3vw, 34px); /* Give panels padding that scales gently with screen width. */
  --radius: 14px; /* Set the outer window corner roundness. */
  --line: rgba(255, 255, 255, 0.28); /* Define the shared translucent white border colour. */
  --shadow: 0 16px 40px rgba(0, 23, 57, 0.32); /* Define the soft shadow beneath glass panels. */
  color-scheme: dark; /* Ask native browser controls to suit this dark, white-text design. */
} /* Finish the site-wide settings. */

/* BASIC PAGE RULES: these keep text, images, and keyboard navigation predictable. */
* { /* Select every element, including any cards you add later. */
  box-sizing: border-box; /* Include padding and borders inside an element's declared width. */
} /* Finish the universal sizing rule. */
html { /* Set the document-wide scrolling behaviour. */
  scroll-padding-top: 24px; /* Leave breathing room above a section reached by an anchor link. */
} /* Finish the document rule. */
body { /* Style the page background and the default text. */
  margin: 0; /* Remove the browser's default outer page margin. */
  min-width: 0; /* Allow the page to shrink on narrow screens. */
  min-height: 100vh; /* Fill at least the full browser height. */
  color: var(--text); /* Apply white text throughout the site. */
  font-family: "Segoe UI", Tahoma, Arial, sans-serif; /* Prefer the familiar Windows interface font. */
  font-size: 1rem; /* Use the visitor's normal browser text size, usually 16 pixels. */
  line-height: 1.65; /* Keep paragraphs comfortably spaced. */
  overflow-wrap: anywhere; /* Allow long titles or URLs to wrap instead of widening the page. */
  background-color: var(--blue); /* Supply a blue fallback if gradients are unavailable. */
  background-image: radial-gradient(ellipse at 10% 0%, rgba(255, 255, 255, 0.45), transparent 48%), radial-gradient(ellipse at 94% 80%, var(--green), transparent 55%), linear-gradient(135deg, var(--blue) 0%, #035aa3 50%, #063a6e 76%, #365e24 100%); /* Layer blue light and green glow into an abstract Aero wallpaper. */
  background-attachment: fixed; /* Keep the wallpaper in place while the content scrolls. */
} /* Finish the default page styling. */
body.theme-green { /* Add this class to the body of any page that should favour green. */
  --accent: var(--green); /* Use the requested green for that page's accents. */
  --accent-rgb: 113, 171, 35; /* Supply matching transparent green accents. */
  --surface: #153e31; /* Use a dark green surface behind white text. */
  --surface-deep: #0d3028; /* Darken inset sections on green pages. */
  --surface-rgb: 21, 62, 49; /* Supply the RGB version of the green panel surface. */
} /* Finish the green theme. */
body.theme-deep { /* Add this class to favour the secondary blue on the work page. */
  --accent: var(--deep-blue); /* Use electric blue for small highlights. */
  --accent-rgb: 0, 50, 219; /* Supply matching transparent electric blue. */
} /* Finish the deeper blue variation. */
a { /* Style links consistently across all pages. */
  color: var(--text); /* Keep link text white, including visited links. */
  text-underline-offset: 0.22em; /* Separate underlines from the bottoms of letters. */
  text-decoration-thickness: 1px; /* Keep ordinary link underlines neat. */
} /* Finish the default link styling. */
a:hover { /* Respond when a visitor points at a link. */
  text-decoration-thickness: 2px; /* Make the underline more visible. */
} /* Finish the link hover state. */
a:focus-visible, summary:focus-visible { /* Highlight interactive items reached with the keyboard. */
  outline: 3px solid var(--yellow); /* Draw a clear golden focus outline. */
  outline-offset: 5px; /* Keep the outline outside the item. */
} /* Finish keyboard focus styling. */
img { /* Give all current and future pictures safe defaults. */
  display: block; /* Remove the small baseline gap beneath pictures. */
  max-width: 100%; /* Prevent a picture from overflowing its container. */
  height: auto; /* Preserve its original proportions unless a component overrides them. */
} /* Finish the general image rule. */
h1, h2, h3, p, figure { /* Reset margins on the main content elements. */
  margin: 0; /* Let component spacing control the layout consistently. */
} /* Finish the margin reset. */
h1, h2, h3 { /* Set shared heading behaviour. */
  line-height: 1.2; /* Use tighter spacing for headings than for body text. */
  font-weight: 600; /* Use a readable Windows-like semibold weight. */
  text-wrap: balance; /* Balance heading lines in browsers that support it. */
} /* Finish shared heading styling. */
h1 { /* Style the page's single main heading. */
  font-size: clamp(2.15rem, 5vw, 3.6rem); /* Scale the page title between mobile and desktop sizes. */
  letter-spacing: -0.035em; /* Bring large heading letters slightly closer together. */
} /* Finish the main heading rule. */
h2 { /* Style section and large card headings. */
  font-size: clamp(1.35rem, 2.2vw, 1.8rem); /* Keep section titles visibly smaller than the page title. */
} /* Finish the second-level heading rule. */
h3 { /* Style smaller card and reply headings. */
  font-size: 1.1rem; /* Keep the smallest headings above body-text size. */
} /* Finish the third-level heading rule. */
::selection { /* Style text that a visitor selects. */
  color: var(--text); /* Keep selected text white. */
  background: #0032a0; /* Put a dark blue highlight behind selected text. */
} /* Finish the selection rule. */
.skip-link { /* Hide the keyboard shortcut until a visitor focuses it. */
  position: absolute; /* Keep it outside the normal header layout. */
  top: -100px; /* Move it above the visible page initially. */
  left: 20px; /* Align its visible position near the left page edge. */
  z-index: 20; /* Place the focused shortcut above the glass panels. */
  padding: 10px 18px; /* Make the shortcut easy to read and activate. */
  border-radius: 6px; /* Round its corners slightly. */
  background: #03283e; /* Keep its white text readable. */
} /* Finish the hidden shortcut style. */
.skip-link:focus { /* Reveal the shortcut when it receives keyboard focus. */
  top: 16px; /* Move it onto the visible page. */
} /* Finish the visible shortcut state. */

/* SHARED HEADER: the same HTML navigation is copied into each page for easy offline editing. */
.site-shell { /* Contain the complete website in one centred column. */
  width: min(var(--page-width), calc(100% - 48px)); /* Use the chosen width with space at both screen edges. */
  margin: 0 auto; /* Centre the column horizontally. */
  padding: 34px 0 24px; /* Give the site breathing room at the top and bottom. */
} /* Finish the outer site container. */
.masthead { /* Arrange the brand and the small header note. */
  display: flex; /* Place the header's two parts in a row. */
  align-items: center; /* Align their vertical centres. */
  justify-content: space-between; /* Put the note at the far end of the header. */
  gap: 20px; /* Keep the header parts from touching. */
  padding: 0 8px 26px; /* Separate the brand from the navigation underneath. */
} /* Finish the masthead layout. */
.brand { /* Make the site title a link back to the home page. */
  display: flex; /* Arrange the coloured mark and title side by side. */
  align-items: center; /* Centre the mark beside the text. */
  gap: 14px; /* Separate the mark from the site title. */
  min-width: 0; /* Let a long site name wrap on smaller screens. */
  text-decoration: none; /* Remove the underline from this navigation link. */
} /* Finish the brand link. */
.brand-mark { /* Frame the simple four-colour site mark. */
  display: grid; /* Arrange its four panes in a small grid. */
  grid-template-columns: repeat(2, 12px); /* Give the mark two equally sized columns. */
  gap: 3px; /* Leave a slim gap between the panes. */
  flex: 0 0 auto; /* Keep the mark from being squashed by a long title. */
  padding: 11px; /* Surround the panes with a glass-like frame. */
  border: 1px solid rgba(255, 255, 255, 0.65); /* Give the frame a bright rim. */
  border-radius: 13px; /* Soften the outer corners. */
  background: linear-gradient(rgba(255, 255, 255, 0.35), rgba(0, 47, 89, 0.75)); /* Add a glossy highlight over a dark base. */
  box-shadow: 0 5px 15px rgba(0, 30, 60, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.5); /* Add outer depth and an inner shine. */
} /* Finish the site mark frame. */
.brand-mark span { /* Style each of the four small colour panes. */
  height: 12px; /* Make each pane square. */
  border-radius: 2px; /* Slightly round each pane. */
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.75); /* Shine a small highlight across each pane. */
} /* Finish shared pane styling. */
.brand-mark span:nth-child(1) { background: var(--blue); } /* Colour the first pane blue. */
.brand-mark span:nth-child(2) { background: var(--green); } /* Colour the second pane green. */
.brand-mark span:nth-child(3) { background: var(--yellow); } /* Colour the third pane yellow. */
.brand-mark span:nth-child(4) { background: var(--orange); } /* Colour the fourth pane orange. */
.brand-copy { /* Stack the site name above its short description. */
  display: grid; /* Put each text item on its own row. */
  gap: 2px; /* Keep the two text rows close together. */
  padding: 7px 12px; /* Keep text away from its subtle dark backing. */
  border-radius: 8px; /* Round the text backing. */
  background: rgba(3, 40, 62, 0.8); /* Ensure white header text contrasts against the bright wallpaper. */
} /* Finish the stacked brand text. */
.brand-name { /* Style the editable site name. */
  font-size: 1.08rem; /* Make the title slightly larger than body text. */
  font-weight: 600; /* Emphasise the site name. */
  letter-spacing: 0.035em; /* Add restrained spacing to the uppercase placeholder. */
} /* Finish the brand name. */
.brand-description { /* Style the editable line beneath the site name. */
  font-size: 0.875rem; /* Use 14-pixel-equivalent secondary text. */
} /* Finish the brand description. */
.header-note { /* Style the small editable note on the right of the masthead. */
  max-width: 240px; /* Keep it from crowding the site title. */
  padding: 8px 12px; /* Give the note a compact glass backing. */
  border: 1px solid var(--line); /* Add a fine transparent border. */
  border-radius: 7px; /* Round its corners. */
  background: rgba(3, 40, 62, 0.85); /* Keep white text readable over the wallpaper. */
  font-size: 0.875rem; /* Keep this secondary note at a readable size. */
} /* Finish the header note. */
.primary-nav { /* Lay out the five links as glossy navigation tabs. */
  display: flex; /* Place page links in a row where space permits. */
  flex-wrap: wrap; /* Let the links wrap if you add more pages. */
  gap: 6px; /* Leave small spaces between tabs. */
  padding: 7px; /* Surround the tabs with a glass rail. */
  margin-bottom: 22px; /* Separate the navigation from the main window. */
  border: 1px solid rgba(255, 255, 255, 0.55); /* Add a bright edge to the rail. */
  border-radius: 12px; /* Round the navigation's outer corners. */
  background: linear-gradient(rgba(255, 255, 255, 0.17), rgba(0, 34, 65, 0.54)); /* Create a translucent glossy rail. */
  box-shadow: 0 7px 18px rgba(0, 35, 69, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.45); /* Add depth and a top highlight. */
} /* Finish the navigation rail. */
.nav-link { /* Style a single page-navigation tab. */
  display: flex; /* Keep its page number and label on one row. */
  align-items: center; /* Vertically align the number with the label. */
  justify-content: center; /* Centre each tab's contents. */
  flex: 1 1 145px; /* Share space equally and wrap tabs when necessary. */
  gap: 10px; /* Separate the number from the text. */
  min-height: 49px; /* Give touch and mouse users a generous target. */
  padding: 10px 15px; /* Pad the text within the tab. */
  border: 1px solid rgba(255, 255, 255, 0.23); /* Outline each tab lightly. */
  border-radius: 7px; /* Round each tab's corners. */
  background: linear-gradient(#125681 0%, #0b456d 48%, #063454 49%, #093c5a 100%); /* Use a sharp middle highlight for the Windows-era gloss. */
  text-decoration: none; /* Remove link underlines within the tab. */
  font-size: 0.9375rem; /* Set navigation text to roughly 15 pixels. */
  font-weight: 600; /* Make navigation labels easy to scan. */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2); /* Add a thin interior highlight. */
} /* Finish the navigation tab. */
.nav-link:hover { /* Highlight a tab when the pointer is over it. */
  border-color: #ffffff; /* Brighten its border without changing the text colour. */
  background: linear-gradient(#146896, #074469); /* Brighten the dark blue while keeping white text readable. */
} /* Finish the tab hover state. */
.nav-link[aria-current="page"] { /* Highlight only the link for the current page. */
  border-color: var(--green); /* Use the requested green to identify the active page. */
  background: linear-gradient(#426e1a 0%, #355c15 48%, #23420d 49%, #2d5213 100%); /* Use glossy dark green for the selected tab. */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 12px rgba(113, 171, 35, 0.2); /* Add a restrained green glow. */
} /* Finish the selected-page tab. */
.nav-number { /* Style the decorative page numbers beside navigation labels. */
  font-size: 0.875rem; /* Keep the numbers readable but secondary. */
  font-weight: 400; /* Use a lighter weight than the labels. */
} /* Finish navigation numbering. */

/* REUSABLE WINDOWS: copy an entire window section in HTML to add another panel. */
.window { /* Create the outer glass frame for a major content panel. */
  min-width: 0; /* Allow grid-contained windows to shrink without overflow. */
  padding: 7px; /* Leave a visible glass rim around the inner content. */
  border: 1px solid rgba(255, 255, 255, 0.72); /* Make the outside edge bright and crisp. */
  border-radius: var(--radius); /* Reuse the adjustable window corner radius. */
  background: linear-gradient(125deg, rgba(221, 247, 255, 0.32), rgba(var(--accent-rgb), 0.42) 38%, rgba(225, 255, 230, 0.23)); /* Tint the glass rim with the page accent. */
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, 0.7); /* Add depth and a fine highlight. */
} /* Finish the window frame. */
.window-titlebar { /* Lay out the descriptive strip above a window's content. */
  display: flex; /* Arrange its label and decoration horizontally. */
  align-items: center; /* Vertically centre titlebar content. */
  justify-content: space-between; /* Keep the decoration at the opposite edge. */
  gap: 16px; /* Separate the label and decoration. */
  min-height: 37px; /* Give the window title enough vertical space. */
  padding: 0 10px 7px; /* Align the title with the content inside the frame. */
  font-size: 0.875rem; /* Use a compact, readable window-label size. */
} /* Finish titlebar layout. */
.window-label { /* Back the window label with a dark readable surface. */
  padding: 1px 9px; /* Surround the label with a small inset. */
  border-radius: 4px; /* Round the label backing. */
  background: rgba(3, 40, 62, 0.88); /* Prevent white text from merging into the bright glass frame. */
} /* Finish the titlebar label. */
.glass-line { /* Add a noninteractive highlight at the end of each titlebar. */
  width: 58px; /* Keep the decorative highlight compact. */
  height: 5px; /* Make it a slim decorative line rather than a fake button. */
  flex: 0 0 auto; /* Preserve its shape beside long text. */
  border-radius: 20px; /* Round both ends. */
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.75)); /* Fade the line into the glass. */
} /* Finish the titlebar decoration. */
.window-body { /* Create the dark inner surface of a glass window. */
  min-width: 0; /* Allow long content to wrap inside a grid column. */
  padding: var(--panel-padding); /* Use the shared adjustable panel padding. */
  border: 1px solid rgba(0, 22, 46, 0.65); /* Separate the dark content from the bright frame. */
  border-radius: 8px; /* Round the inner panel less than the outside frame. */
  background: linear-gradient(120deg, rgba(255, 255, 255, 0.04), transparent 60%), rgba(var(--surface-rgb), 0.98); /* Add a slight sheen to a nearly opaque readable surface. */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09); /* Highlight the inner top edge subtly. */
} /* Finish the inner window surface. */
.stack { /* Stack any number of panels, paragraphs, or cards. */
  display: grid; /* Place direct children into successive rows. */
  gap: var(--gap); /* Give every row the same adjustable gap. */
  align-content: start; /* Keep content near the top of tall columns. */
  min-width: 0; /* Let this column shrink inside another grid. */
} /* Finish the vertical stack utility. */
.prose { /* Keep large text areas comfortable to read. */
  display: grid; /* Place each heading and paragraph on its own row. */
  gap: 17px; /* Separate text blocks without adding manual line breaks. */
  max-width: 68ch; /* Limit paragraph length to roughly 68 characters per line. */
  min-width: 0; /* Let text fit inside narrow columns. */
} /* Finish the paragraph container. */
.eyebrow { /* Style a short structural label above a main heading. */
  font-size: 0.875rem; /* Keep the small label at a readable size. */
  font-weight: 600; /* Give it emphasis without making it large. */
  letter-spacing: 0.13em; /* Space the label's letters slightly apart. */
  text-transform: uppercase; /* Present the small label in uppercase. */
} /* Finish the small heading label. */
.page-heading { /* Separate a page introduction from the content underneath. */
  padding-bottom: 28px; /* Add breathing room below the introduction. */
  margin-bottom: 28px; /* Space the next content block away from the divider. */
  border-bottom: 1px solid var(--line); /* Mark the end of the introductory block. */
} /* Finish the page introduction spacing. */
.page-heading p { /* Keep introductory placeholder text at a readable line length. */
  max-width: 62ch; /* Prevent the introduction from stretching across the whole window. */
} /* Finish the introductory paragraph rule. */
.button { /* Style a real link as a glossy call-to-action button. */
  display: inline-flex; /* Keep the button sized around its label. */
  align-items: center; /* Centre the label vertically. */
  justify-content: center; /* Centre the label horizontally. */
  align-self: start; /* Prevent stretching inside a grid. */
  justify-self: start; /* Keep the button from filling its entire grid column. */
  min-height: 46px; /* Make the button large enough for touch use. */
  padding: 10px 20px; /* Give the label comfortable horizontal space. */
  border: 1px solid var(--green); /* Give the button a bright green outline. */
  border-radius: 7px; /* Use the same smaller corner radius as tabs. */
  background: linear-gradient(#426e1a 0%, #315410 48%, #22410c 49%, #2e5010 100%); /* Create a green glossy button with readable white text. */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4); /* Add a sharp upper highlight. */
  text-decoration: none; /* Remove the underline from this button-shaped link. */
  font-weight: 600; /* Make the button label easy to find. */
} /* Finish the button-link style. */
.button:hover { /* Highlight an actionable button when hovered. */
  border-color: #ffffff; /* Brighten the edge to indicate interaction. */
  text-decoration: underline; /* Add an underline as an extra interaction cue. */
} /* Finish button hover styling. */
.button-blue { /* Add this class for a blue version of a button link. */
  border-color: var(--blue); /* Give the alternate button a blue rim. */
  background: linear-gradient(#115a86 0%, #09466e 48%, #063450 49%, #0b4569 100%); /* Keep the glossy surface dark enough for white text. */
} /* Finish the alternate button style. */
.button-row { /* Arrange several useful page links together. */
  display: flex; /* Put buttons side by side when space allows. */
  flex-wrap: wrap; /* Move extra buttons to another row on narrow screens. */
  gap: 12px; /* Separate the buttons. */
} /* Finish the button row. */

/* LAYOUT OPTIONS: change these class names in HTML instead of rebuilding the stylesheet. */
.layout-sidebar { /* Use a broad main column with a narrower side column. */
  display: grid; /* Enable a two-column page layout. */
  grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); /* Give the main content roughly twice the sidebar's space. */
  align-items: start; /* Align both columns at the top. */
  gap: var(--gap); /* Separate the two columns. */
} /* Finish the sidebar layout. */
.layout-sidebar.sidebar-left { /* Add sidebar-left to put the narrow column first. */
  grid-template-columns: minmax(260px, 1fr) minmax(0, 2fr); /* Give the first column one share and the second two shares. */
} /* Finish the left-sidebar variation. */
.layout-equal { /* Use two equally wide columns. */
  display: grid; /* Enable the two-column layout. */
  grid-template-columns: repeat(2, minmax(0, 1fr)); /* Divide the available space evenly. */
  gap: var(--gap); /* Separate both columns. */
  align-items: start; /* Keep panels aligned at the top. */
} /* Finish the equal-column layout. */
.cards { /* Lay out a flexible group of repeating cards. */
  display: grid; /* Enable the repeating card grid. */
  grid-template-columns: repeat(3, minmax(0, 1fr)); /* Show three cards per row by default. */
  gap: var(--gap); /* Separate cards horizontally and vertically. */
} /* Finish the default card grid. */
.cards.two-columns { /* Add two-columns to a card group for larger cards. */
  grid-template-columns: repeat(2, minmax(0, 1fr)); /* Show two cards per row. */
} /* Finish the two-card variation. */
.one-column { /* Use this class instead of a multi-column layout for a simpler page. */
  display: grid; /* Keep each direct child in a vertical list. */
  grid-template-columns: minmax(0, 1fr); /* Use one full-width column. */
  gap: var(--gap); /* Preserve the standard spacing between children. */
} /* Finish the single-column utility. */
.hero { /* Arrange the home introduction beside its feature picture. */
  display: grid; /* Enable a text-and-picture layout. */
  grid-template-columns: minmax(0, 1.04fr) minmax(0, 1fr); /* Give the introduction slightly more room than the picture. */
  align-items: center; /* Centre the introduction beside its picture. */
  gap: 38px; /* Separate text from the image. */
  padding-top: 10px; /* Add breathing room above the hero content. */
  padding-bottom: 10px; /* Add matching space below the hero. */
} /* Finish the home hero layout. */
.section-heading { /* Arrange a section title and an optional working link. */
  display: flex; /* Place the title and link on the same row. */
  flex-wrap: wrap; /* Let either wrap naturally on a narrow screen. */
  align-items: baseline; /* Align the text on its baseline. */
  justify-content: space-between; /* Put the link at the end of the row. */
  gap: 12px; /* Separate wrapped or adjacent heading items. */
  margin-bottom: 20px; /* Space the cards beneath the section heading. */
} /* Finish section-heading layout. */
.inset-card { /* Style a reusable dark card within a window. */
  min-width: 0; /* Allow the card to shrink and wrap inside grids. */
  padding: 22px; /* Add internal space around text. */
  border: 1px solid var(--line); /* Outline the card with a translucent edge. */
  border-top: 3px solid var(--accent); /* Use the page accent along the card's top edge. */
  border-radius: 9px; /* Round the inset card corners. */
  background: var(--surface-deep); /* Use a darker surface to distinguish the card. */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05); /* Add a very small interior shine. */
} /* Finish inset-card styling. */
.inset-card.green-accent { border-top-color: var(--green); } /* Add a green top edge to a particular card. */
.inset-card.blue-accent { border-top-color: var(--blue); } /* Add a blue top edge to a particular card. */
.inset-card.deep-accent { border-top-color: var(--deep-blue); } /* Add the secondary electric blue to a particular card. */
.card-copy { /* Space the heading and paragraph inside a repeating card. */
  display: grid; /* Put the card's content into consecutive rows. */
  gap: 14px; /* Keep card text and links comfortably separated. */
} /* Finish card-copy spacing. */
.media-frame { /* Give a picture a double-edged glossy mount. */
  min-width: 0; /* Let the picture frame fit its parent column. */
  padding: 7px; /* Leave a visible rim around the picture. */
  border: 1px solid rgba(255, 255, 255, 0.5); /* Add a bright outer frame. */
  border-radius: 10px; /* Round the mount. */
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.19), rgba(var(--accent-rgb), 0.18)); /* Tint the mount with the page's accent. */
  box-shadow: 0 9px 25px rgba(0, 15, 35, 0.22); /* Lift the picture slightly from the page. */
} /* Finish the picture mount. */
.photo { /* Apply predictable cropping to normal landscape pictures. */
  width: 100%; /* Fill the picture mount horizontally. */
  aspect-ratio: 16 / 10; /* Keep all landscape images at the same tidy proportion. */
  height: auto; /* Let the aspect ratio determine the visible height. */
  object-fit: cover; /* Crop excess edges instead of stretching a replacement picture. */
  object-position: center; /* Keep the centre of a replacement picture visible. */
  border-radius: 5px; /* Round the actual picture inside its mount. */
  background: #062c43; /* Keep the image area dark while a file is loading. */
} /* Finish landscape image styling. */
.photo.portrait { aspect-ratio: 4 / 5; } /* Add portrait to a photo for a taller profile-picture shape. */
.photo.square { aspect-ratio: 1 / 1; } /* Add square to a photo for an equal-width-and-height shape. */
.photo.uncropped { aspect-ratio: auto; height: auto; object-fit: contain; } /* Add uncropped to display the entire picture without trimming its edges. */
figcaption { /* Style the editable caption beneath a picture. */
  padding: 9px 8px 3px; /* Separate the caption from the picture and frame edges. */
  font-size: 0.875rem; /* Use a readable secondary caption size. */
  line-height: 1.5; /* Give a wrapped caption comfortable spacing. */
  background: rgba(3, 40, 62, 0.7); /* Keep caption text readable on every page theme. */
} /* Finish picture-caption styling. */
.feature-strip { /* Divide a featured introduction from its smaller follow-up items. */
  margin-top: 30px; /* Add space after the larger feature. */
  padding-top: 26px; /* Add space above the smaller cards. */
  border-top: 1px solid var(--line); /* Draw a subtle horizontal divider. */
} /* Finish the feature divider. */
.facts { /* Lay out editable label-and-value pairs in the About and Work sidebars. */
  display: grid; /* Stack the facts vertically. */
  gap: 0; /* Let row padding control the separation. */
  margin: 0; /* Remove the default definition-list margin. */
} /* Finish the facts container. */
.fact { /* Arrange one descriptive label beside its value. */
  display: grid; /* Put the label and value into two columns. */
  grid-template-columns: minmax(65px, 0.7fr) minmax(0, 1.3fr); /* Reserve a smaller label column and a larger value column. */
  gap: 14px; /* Separate the label from its editable value. */
  padding: 14px 0; /* Give each fact vertical space. */
  border-bottom: 1px solid var(--line); /* Divide adjacent facts. */
} /* Finish the individual fact row. */
.fact:first-child { padding-top: 0; } /* Avoid unnecessary space above the first fact. */
.fact:last-child { border-bottom: 0; padding-bottom: 0; } /* Remove the final divider and extra bottom padding. */
dt { font-weight: 600; } /* Emphasise each fact's label. */
dd { margin: 0; } /* Remove the browser's default indentation from fact values. */
.plain-list { /* Style simple lists of favourites, tools, or notes. */
  margin: 0; /* Remove the list's outside margin. */
  padding-left: 20px; /* Leave enough room for the bullet marks. */
} /* Finish the basic list style. */
.plain-list li + li { margin-top: 10px; } /* Add spacing between every list item after the first. */
.plain-list li::marker { color: var(--green); } /* Colour only the bullet marks green while text stays white. */
.tag-list { /* Lay out editable tool or hobby tags. */
  display: flex; /* Put tags on the same row when possible. */
  flex-wrap: wrap; /* Let longer tags move onto additional rows. */
  gap: 9px; /* Keep adjacent tags separated. */
} /* Finish the tag container. */
.tag { /* Style a noninteractive short label. */
  padding: 5px 10px; /* Keep the label compact. */
  border: 1px solid var(--line); /* Outline the label. */
  border-radius: 5px; /* Round its corners slightly. */
  background: var(--surface-deep); /* Keep the label's white text readable. */
  font-size: 0.875rem; /* Use a readable secondary size. */
} /* Finish the tag appearance. */

/* DISCUSSION: native details elements open with a mouse, touch, Enter, or Space; no JavaScript is required. */
.topic { /* Frame one collapsible, manually edited discussion topic. */
  border: 1px solid var(--line); /* Outline the topic. */
  border-radius: 9px; /* Round the topic's corners. */
  background: var(--surface-deep); /* Use a dark background behind all topic text. */
} /* Finish the topic frame. */
.topic + .topic { margin-top: 16px; } /* Separate each topic from the preceding one. */
.topic summary { /* Style the real click target that opens a topic. */
  padding: 20px; /* Make the summary large enough to activate comfortably. */
  cursor: pointer; /* Indicate that the summary can be opened or closed. */
  font-weight: 600; /* Make the topic title visually prominent. */
  border-radius: 8px; /* Follow the topic's rounded outline. */
  background: linear-gradient(rgba(var(--accent-rgb), 0.16), transparent); /* Add a restrained accent tint to the summary. */
} /* Finish the topic toggle style. */
.topic summary::marker { color: var(--green); } /* Colour the native open-and-close arrow green. */
.topic summary:hover { background-color: rgba(6, 137, 228, 0.15); } /* Brighten the topic header slightly on hover. */
.topic[open] summary { border-bottom: 1px solid var(--line); } /* Separate an opened topic's title from its messages. */
.topic-body { /* Contain the sample post and its replies. */
  display: grid; /* Stack message blocks. */
  gap: 20px; /* Separate the messages. */
  padding: 22px; /* Keep message text away from the topic's border. */
} /* Finish the expanded topic layout. */
.reply { /* Visually indent a manually written reply. */
  margin-left: 16px; /* Offset the reply slightly beneath its parent post. */
  padding: 18px; /* Give the reply internal spacing. */
  border-left: 3px solid var(--green); /* Identify the reply with a green vertical rule. */
  border-radius: 0 7px 7px 0; /* Round the corners away from the vertical rule. */
  background: rgba(113, 171, 35, 0.06); /* Add a subtle green tint. */
} /* Finish the reply style. */
.project-entry + .project-entry { /* Separate larger game-development project entries. */
  margin-top: 30px; /* Add space above each additional project. */
  padding-top: 30px; /* Add space below its separator. */
  border-top: 1px solid var(--line); /* Divide adjacent projects clearly. */
} /* Finish the project-entry spacing. */
.log-entry { /* Style a manually written development-log entry. */
  padding-left: 18px; /* Separate the entry from its accent line. */
  border-left: 3px solid var(--blue); /* Add a simple blue rule beside the entry. */
} /* Finish the development-log style. */

/* SHARED FOOTER: keep real navigation links here rather than decorative fake controls. */
.site-footer { /* Arrange the footer note and the back-to-top link. */
  display: flex; /* Place the note and link on one row when space allows. */
  flex-wrap: wrap; /* Let them wrap on a narrow screen. */
  align-items: center; /* Align the two footer items. */
  justify-content: space-between; /* Move the top link to the far edge. */
  gap: 15px; /* Separate adjacent or wrapped footer items. */
  margin-top: 24px; /* Space the footer away from the content windows. */
  padding: 15px 20px; /* Add comfortable padding inside the footer bar. */
  border: 1px solid rgba(255, 255, 255, 0.35); /* Outline the footer with a fine glass edge. */
  border-radius: 9px; /* Round the footer bar. */
  background: rgba(3, 40, 62, 0.93); /* Keep footer text readable against the green wallpaper. */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.13); /* Add a subtle upper shine. */
  font-size: 0.875rem; /* Use a compact but readable footer size. */
} /* Finish the footer appearance. */
.site-footer a { padding: 7px 0; } /* Enlarge the footer link's vertical click area. */

/* RESPONSIVE RULES: these switch wide layouts into readable stacks on smaller screens. */
@media (max-width: 960px) { /* Apply these adjustments on tablets and smaller desktop windows. */
  .header-note { display: none; } /* Remove the optional header note to give the brand more space. */
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* Reduce three-card grids to two cards per row. */
  .hero { gap: 24px; } /* Tighten the home page's text-and-image spacing. */
  .layout-sidebar, .layout-sidebar.sidebar-left { grid-template-columns: minmax(0, 1fr); } /* Stack sidebars after the preceding content in HTML order. */
} /* Finish tablet adjustments. */
@media (max-width: 640px) { /* Apply the compact layout on phone-sized screens. */
  :root { --gap: 18px; --panel-padding: 20px; } /* Reduce panel gaps and padding while retaining readable text. */
  body { background-attachment: scroll; } /* Avoid fixed-wallpaper rendering problems on mobile browsers. */
  .site-shell { width: calc(100% - 24px); padding-top: 20px; } /* Leave a safe 12-pixel margin on either side. */
  .masthead { padding: 0 2px 20px; } /* Reduce the header's outer spacing. */
  .brand { gap: 10px; } /* Bring the site mark closer to the title. */
  .brand-name { font-size: 1rem; letter-spacing: 0; } /* Keep a long editable site name manageable on phones. */
  .brand-description { font-size: 0.875rem; } /* Preserve readable small text on phones. */
  .primary-nav { gap: 6px; padding: 6px; } /* Keep mobile navigation neatly padded. */
  .nav-link { flex-basis: calc(50% - 6px); min-width: 0; padding: 10px 6px; } /* Show roughly two navigation links per row. */
  .nav-link:last-child { flex-grow: 1; } /* Let the final link fill unused row space. */
  .window { padding: 5px; } /* Use a slightly thinner frame on small screens. */
  .window-titlebar { padding: 2px 6px 7px; } /* Keep titlebar spacing proportional to the thinner frame. */
  .hero, .layout-equal, .cards, .cards.two-columns { grid-template-columns: minmax(0, 1fr); } /* Stack all remaining multi-column content. */
  .hero { gap: 24px; } /* Separate the stacked introduction and its picture. */
  .page-heading { padding-bottom: 22px; margin-bottom: 22px; } /* Reduce the introduction's divider spacing. */
  .inset-card { padding: 18px; } /* Give cards compact but comfortable phone padding. */
  .topic-body { padding: 18px; } /* Reduce the padding inside expanded topics. */
  .reply { margin-left: 0; padding: 15px; } /* Remove reply indentation when the screen is narrow. */
  .fact { grid-template-columns: minmax(0, 1fr); gap: 4px; } /* Stack each fact label above its value. */
  .site-footer { padding: 12px 16px; } /* Tighten the footer while keeping the link easy to tap. */
} /* Finish the phone layout rules. */
@media (prefers-reduced-transparency: reduce) { /* Respect visitors who request less visual transparency. */
  .window { background: #135277; } /* Make outer window frames solid blue. */
  .window-body { background: var(--surface); } /* Make inner panels completely opaque. */
  .primary-nav { background: #135277; } /* Make the navigation rail solid too. */
} /* Finish reduced-transparency support. */
@media (forced-colors: active) { /* Keep the interface usable in operating-system high-contrast modes. */
  a:focus-visible, summary:focus-visible { outline-color: Highlight; } /* Use the visitor's chosen high-contrast focus colour. */
  .nav-link[aria-current="page"] { border: 3px solid Highlight; } /* Preserve a visible current-page indicator without relying on green. */
} /* Finish high-contrast support. */