/* ==========================================================================
   GIIS — Reading Room
   Direction 1A. Parchment, Noto Serif, quiet. Square corners everywhere, no
   shadows, no transforms, no animation: borders and rules do all the work of
   separation, because the register is print rather than app.

   The one rule that is not cosmetic: heading line-height never drops below 1.3.
   Gurmukhi head marks and subscripts clip against tight leading, and half this
   site's headings are Gurmukhi or bilingual.
   ========================================================================== */

:root {
	--giis-parchment: #F7F3EA;
	--giis-card:      #FDFBF6;
	--giis-band:      #F1EBDD;
	--giis-canvas:    #EFEAE0;
	--giis-ink:       #1B1915;
	--giis-body:      #33302A;
	--giis-secondary: #55503F;
	--giis-rule:      #E4DCCB;
	--giis-rule-soft: #F0EADA;
	--giis-input:     #D8CFBB;
	--giis-muted:     #8A8172;
	--giis-dim:       #B5AC9A;
	--giis-gold:      #C9A227;
	--giis-rust:      #8A4B26;
	--giis-track:     #EDE6D6;

	/*
	 * Blue chrome — colour revision 3C.
	 *
	 * The client's own giis.us blues, applied to the fixed furniture: header,
	 * hero, stats band and footer. Everything between those bands stays parchment,
	 * so the page still reads as paper with the chrome framing it.
	 *
	 * Two depths, used consistently and never interchangeably: --giis-blue-deep
	 * bookends the page (header and footer), --giis-blue-mid is the content band
	 * (hero and stats). The stats band used to be near-black; making it the same
	 * mid blue as the hero means the page carries one dark colour rather than two.
	 *
	 * Type on blue is parchment, never #FFF — white against these blues is harsher
	 * than anything else on the site and would be the one place the register broke.
	 */
	--giis-blue-deep: #0B274B;
	--giis-blue-mid:  #003566;
	--giis-on-blue:      #F7F3EA;
	--giis-on-blue-soft: #C3D2E0;
	--giis-on-blue-mute: #93A8BD;
	/* Gold on blue only. The parchment gold (#C9A227) is too dark to sit on it. */
	--giis-gold-on-blue: #E3B23C;

	--giis-serif: "Noto Serif", "Noto Serif Gurmukhi", Georgia, serif;
	--giis-sans:  "Karla", "Noto Sans Gurmukhi", system-ui, -apple-system, "Segoe UI", sans-serif;
	--giis-mono:  ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

	--giis-gutter: 48px;
	--giis-rail: 360px;
	--giis-measure: 640px;

	/*
	 * The page is a 1280px frame — the width the design was drawn at — centred on
	 * anything wider, so a big monitor gets margins rather than a stretched column.
	 * Backgrounds still run edge to edge (the tinted sections, the band, the ink
	 * numbers strip); only what sits inside them is held to the frame.
	 *
	 * At exactly 1280px this resolves to the gutter and nothing changes, which is
	 * why the mocks and the site line up pixel for pixel at that width.
	 */
	/*
	 * The three values Appearance -> Customize -> GIIS -> Appearance can override.
	 * They are declared here so the theme still renders correctly with no theme
	 * mods set at all, and so the defaults live in version control rather than
	 * only in the database. The Customizer writes the same three names into an
	 * inline style after this file, which is why an override wins.
	 *
	 * --giis-page-bg is deliberately its own value and not --giis-parchment.
	 * Parchment is used fifteen times as light text on a dark panel and only
	 * five times as a background, so repainting it to change the page would
	 * have tinted every button label too.
	 */
	--giis-page-bg:    #FAF3DD;
	/*
	 * The tinted sections default to the page colour, which makes the page read
	 * as one flat parchment the way giis.us does. The theme still supports the
	 * alternation it was drawn with: give this a different value and every
	 * .giis-section--tint picks it up again. It is a Customizer control for
	 * exactly that reason.
	 */
	--giis-section-tint: #FAF3DD;
	--giis-nav-size:   18px;
	--giis-header-h:   80px;
	--giis-hero-h:     376px;

	/*
	 * One type scale for headings, so a page title is the same size whichever
	 * page you land on. Before this the h1 was 34px on the lectures index, 36px
	 * on courses and faculty, 38px on a run, and 42px on an ordinary page, and
	 * three of those came from inline styles in templates where the stylesheet
	 * could not see them.
	 *
	 * Two sizes deliberately sit outside the scale and set their own: the
	 * homepage banner, which is a statement rather than a page title, and the
	 * utility screens (login, dashboard, 404, lesson) where the title is chrome
	 * above the thing you actually came for.
	 */
	--giis-h1: 38px;
	--giis-h2: 26px;
	--giis-h3: 21px;

	color-scheme: light;

	--giis-max: 1280px;
	--giis-inline: max( var(--giis-gutter), calc( (100% - var(--giis-max)) / 2 + var(--giis-gutter) ) );
}

/* --------------------------------------------------------------- elements */

*, *::before, *::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	/*
	 * The header is sticky and 70px tall, so an anchor jump would otherwise land
	 * its target underneath it. This matters most for the skip link: a keyboard
	 * user pressing it would arrive with the first heading hidden behind the
	 * masthead. Browsers without scroll-padding simply behave as before.
	 */
	scroll-padding-top: 86px;
}
.admin-bar { scroll-padding-top: 118px; }

/*
 * A column the full height of the window, so the footer sits at the bottom of a
 * short page instead of floating halfway up it. The dashboard is the page that
 * exposed this: a student with one course has less content than the viewport.
 *
 * The skip link is position:absolute and so takes no part in the flex layout.
 */
body {
	margin: 0;
	min-height: 100vh;
	/*
	 * and then dvh where it exists. On iOS Safari 100vh is the height with the
	 * URL bar *hidden*, so a short page is given more height than the window
	 * actually shows: the footer sits below the fold and the page scrolls when
	 * there is nothing to scroll to. dvh is the height actually on screen.
	 * The vh line stays as the fallback and must come first.
	 */
	min-height: 100dvh;
	display: flex;
	flex-direction: column;
	background: var(--giis-page-bg);
	color: var(--giis-body);
	font-family: var(--giis-sans);
	font-size: 16px;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
}
#giis-main { flex: 1 0 auto; }
.giis-header, .giis-footer { flex-shrink: 0; }

h1, h2, h3, h4, h5, h6 {
	font-family: var(--giis-serif);
	/* The header and footer navy, so headings belong to the same palette as the
	   frame around them rather than reading as a second, blacker ink. */
	color: var(--giis-blue-deep);
	font-weight: 500;
	line-height: 1.32;          /* never tighter — see the note at the top */
	text-wrap: pretty;
	margin: 0 0 0.5em;
}

h1 { font-size: var(--giis-h1); }
h2 { font-size: var(--giis-h2); }
h3 { font-size: var(--giis-h3); }
h4 { font-size: 19px; font-weight: 600; }

p { margin: 0 0 1em; }

a { color: var(--giis-rust); text-decoration: underline; text-underline-offset: 2px; }
a:hover, a:focus { color: var(--giis-ink); }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var(--giis-ink);
	outline-offset: 2px;
}

/*
 * Focus rings invert inside the blue chrome. The parchment-context ring is ink,
 * which on deep blue is very nearly invisible — the one place a keyboard user
 * would lose their position entirely.
 */
.giis-header a:focus-visible,
.giis-header button:focus-visible,
.giis-hero a:focus-visible,
.giis-hero button:focus-visible,
.giis-footer a:focus-visible,
.giis-numbers a:focus-visible {
	outline: 2px solid var(--giis-on-blue);
	outline-offset: 2px;
}

img { max-width: 100%; height: auto; }

hr { border: 0; border-top: 1px solid var(--giis-rule); margin: 40px 0; }

blockquote { margin: 0; }

code, kbd, pre { font-family: var(--giis-mono); font-size: 0.9em; }

table { border-collapse: collapse; width: 100%; }

/* Nothing on this site has a rounded corner or a shadow. Plugins disagree. */
.giis-page :is(a, button, input, select, textarea, img, div, span)[class*="tutor-"],
.giis-page .woocommerce :is(a, button, input, select) {
	border-radius: 0;
	box-shadow: none;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
	white-space: nowrap; border: 0;
}

.giis-skip-link {
	position: absolute; left: -9999px;
	background: var(--giis-ink); color: var(--giis-parchment);
	padding: 12px 20px; font-weight: 600; z-index: 100;
}
.giis-skip-link:focus { left: 8px; top: 8px; }

/* ------------------------------------------------------------- primitives */

.giis-wrap { padding-left: var(--giis-inline); padding-right: var(--giis-inline); }

.giis-eyebrow {
	font-family: var(--giis-sans);
	font-size: 11px;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--giis-gold);
	font-weight: 700;
	line-height: 1.5;
	margin: 0 0 12px;
}
.giis-eyebrow--sm { font-size: 10.5px; letter-spacing: 0.14em; }
/* Inactive, concluded, or otherwise not-for-sale: the eyebrow goes quiet. */
.giis-eyebrow--muted { color: var(--giis-muted); }

.giis-meta { font-size: 13.5px; color: var(--giis-muted); }

.giis-lead { font-size: 17px; line-height: 1.65; color: var(--giis-secondary); }

.giis-prose { font-size: 16.5px; line-height: 1.75; color: var(--giis-body); max-width: var(--giis-measure); }
.giis-prose > :last-child { margin-bottom: 0; }
.giis-prose h2 { margin-top: 1.4em; }
.giis-prose h3 { margin-top: 1.4em; }
.giis-prose ul, .giis-prose ol { padding-left: 1.3em; margin: 0 0 1em; }
.giis-prose li { margin-bottom: 0.35em; }

.giis-btn {
	display: inline-block;
	background: var(--giis-ink);
	color: var(--giis-parchment);
	font-family: var(--giis-sans);
	font-weight: 600;
	font-size: 15px;
	line-height: 1.2;
	padding: 13px 26px;
	border: 1px solid var(--giis-ink);
	text-decoration: none;
	text-align: center;
	cursor: pointer;
}
.giis-btn:hover, .giis-btn:focus { background: #2B2822; color: var(--giis-parchment); }

.giis-btn--secondary {
	background: transparent;
	color: var(--giis-ink);
	border: 1px solid var(--giis-ink);
}
.giis-btn--secondary:hover, .giis-btn--secondary:focus { background: var(--giis-band); color: var(--giis-ink); }

.giis-btn--sm { font-size: 13px; padding: 9px 18px; }
.giis-btn--block { display: block; width: 100%; padding-left: 0; padding-right: 0; }

.giis-input {
	width: 100%;
	background: var(--giis-card);
	border: 1px solid var(--giis-input);
	padding: 12px 14px;
	font-family: var(--giis-sans);
	font-size: 14px;
	color: var(--giis-ink);
	border-radius: 0;
}
.giis-input::placeholder { color: var(--giis-muted); }

.giis-rules { border-top: 1px solid var(--giis-rule); }
.giis-rules > * { border-bottom: 1px solid var(--giis-rule); }

.giis-section { padding: 52px var(--giis-inline) 56px; }
.giis-section--tint { background: var(--giis-section-tint); border-top: 1px solid var(--giis-rule); }
.giis-section-head {
	display: flex; align-items: baseline; justify-content: space-between;
	gap: 24px; flex-wrap: wrap; margin-bottom: 26px;
}
.giis-section-head h2, .giis-section-head h3 { margin: 0; }

.giis-breadcrumb { padding: 18px 0 0; font-size: 13px; color: var(--giis-muted); }
.giis-breadcrumb a { color: var(--giis-rust); }
.giis-breadcrumb span { margin: 0 6px; }

/* Progress: gold on a track, 4px, never animated. */
.giis-progress { height: 4px; background: var(--giis-track); }
.giis-progress > span { display: block; height: 4px; background: var(--giis-gold); }

.giis-chip {
	display: inline-block;
	border: 1px solid var(--giis-input);
	background: var(--giis-band);
	color: var(--giis-secondary);
	font-size: 13.5px;
	padding: 7px 14px;
	text-decoration: none;
}
.giis-chip--on { background: var(--giis-ink); border-color: var(--giis-ink); color: var(--giis-parchment); font-weight: 600; font-size: 13px; }

/* ------------------------------------------------------------ site header */

.giis-header {
	display: flex; align-items: center; justify-content: space-between;
	gap: 24px;
	padding: 22px var(--giis-inline);
	/*
	 * 80px, and it stays 80px. giis.us condenses to this on scroll, but that was
	 * never deliberate there: React swapped a py-4 class for py-1, py-1 was a
	 * class name built at runtime that Tailwind's scanner never saw, so no such
	 * rule was generated and the padding collapsed to nothing. The header fell
	 * to its bare content height. The height is worth keeping; the accident that
	 * produced it, and the movement, are not.
	 */
	min-height: var(--giis-header-h);
	background: var(--giis-blue-deep);
	color: var(--giis-on-blue);
	/* Stays with you down the page. The mobile drop-down is positioned against
	   this element, so it travels correctly without any further work. */
	position: sticky;
	top: 0;
	z-index: 50;
}
/* Clear the WordPress admin bar, which is itself fixed. */
.admin-bar .giis-header { top: 32px; }

/*
 * Wordmark and institute name.
 *
 * Baseline alignment puts the name's *first* line on the wordmark's baseline and
 * lets the second line hang below it, which reads as a slip rather than a
 * masthead. Centring the two-line block against the wordmark is what makes them
 * look set together.
 */
/*
 * Any link in the header, not just the nav — the slim header's "← back" link
 * lives outside .giis-nav and would otherwise inherit the parchment-context
 * rust, which is close to unreadable on deep blue.
 */
.giis-header a { color: var(--giis-on-blue); }
.giis-header a:hover { color: var(--giis-gold-on-blue); }

.giis-brand { display: flex; align-items: center; gap: 13px; text-decoration: none; }
.giis-brand:hover { color: inherit; }
.giis-brand__mark {
	font-family: var(--giis-serif);
	font-size: 27px; font-weight: 600; letter-spacing: 0.04em;
	color: var(--giis-on-blue); line-height: 1.05;
}
.giis-brand__full {
	/*
	 * Set to sit level with the wordmark rather than to a round number. GIIS
	 * renders 28.3px tall at 27px/1.05; this is 12px over two lines at 1.2,
	 * which measures 28.8px. The width is what holds it to two lines: at 12px
	 * the name needs 215px to break after "for", and a narrower box drops
	 * "Studies" onto a third line and unbalances the pair.
	 */
	font-size: 12px; letter-spacing: 0.16em; color: var(--giis-on-blue-mute);
	text-transform: uppercase; width: 208px; flex-shrink: 0; line-height: 1.2;
	/*
	 * Centred, so the short first line sits over the long second one rather than
	 * hanging 42px short of it. The box is 208px because the longer line
	 * measures 203px: any wider and the centring is centring dead space rather
	 * than the text, any narrower and the name takes a third line.
	 */
	text-align: center;
}

.giis-nav { display: flex; align-items: center; gap: 28px; font-size: var(--giis-nav-size); }
.giis-nav ul { display: flex; align-items: center; gap: 28px; list-style: none; margin: 0; padding: 0; }
.giis-nav a { white-space: nowrap; }
.giis-nav a:not(.giis-btn) { color: var(--giis-on-blue); text-decoration: none; }
/* Gold marks the section you are in — the one place it appears in the nav. */
.giis-nav a:not(.giis-btn):hover,
.giis-nav .current-menu-item > a,
.giis-nav .current_page_parent > a { color: var(--giis-gold-on-blue); }
.giis-nav__login { color: var(--giis-on-blue-soft) !important; }
.giis-nav__login:hover { color: var(--giis-gold-on-blue) !important; }

/*
 * The nav's own button inverts on blue: an outline rather than the solid ink
 * fill it has on parchment, which would read as a hole punched in the header.
 */
.giis-nav .giis-btn {
	font-size: 14px; padding: 10px 20px;
	background: transparent;
	border: 1px solid var(--giis-on-blue);
	color: var(--giis-on-blue);
}
.giis-nav .giis-btn:hover,
.giis-nav .giis-btn:focus {
	background: var(--giis-on-blue);
	color: var(--giis-blue-deep);
}

.giis-nav-toggle { display: none; }

/* Header on the reading surfaces (lesson, dashboard) is shallower. */
.giis-header--slim { padding-top: 14px; padding-bottom: 14px; }
.giis-header--slim .giis-brand__mark { font-size: 21px; }

/* -------------------------------------------------------------- home page */

.giis-hero {
	/* Deeper than it was on paper: the band is a colour field now, and the old
	   padding made the type sit tight against the edge of the block. */
	/*
	 * 376px, and the padding is what gets it there rather than a fixed height:
	 * min-height keeps the band from collapsing if the headline is shortened in
	 * the Customizer, and lets it grow rather than clip if the headline is made
	 * longer. At the drawn copy the content measures 294px, so 41px top and
	 * bottom lands on 376 exactly.
	 */
	padding: 41px var(--giis-inline);
	min-height: var(--giis-hero-h);
	display: flex;
	align-items: center;
	background: var(--giis-blue-mid);
	color: var(--giis-on-blue);
}
/*
 * There is no figure any more — this hero used to hold a photograph, or a drawn
 * placeholder where none had been set, and no photograph was ever supplied, so
 * the placeholder was the only thing that ever rendered. Removed rather than
 * left waiting for an image.
 *
 * 600px was sized for a two-column layout, splitting the hero with a figure
 * taking the rest. Alone, that left a wide band of empty parchment to the right
 * of a three-line heading. 760px is a heading-appropriate measure on its own —
 * wide enough that the line breaks read as intentional, not as a leftover.
 */
.giis-hero__text { max-width: 1060px; width: 100%; }
.giis-hero h1 { font-size: 46px; line-height: 1.25; margin: 0 0 20px; color: var(--giis-on-blue); }
.giis-hero__lead { font-size: 17px; line-height: 1.65; color: var(--giis-on-blue-soft); margin: 0 0 28px; max-width: 760px; }
.giis-hero__actions { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }

/* The catalogue line. Gold on blue, and kept at 14px+ semibold for contrast. */
.giis-hero .giis-eyebrow { color: var(--giis-gold-on-blue); font-weight: 700; }

/* The primary button inverts on blue — parchment fill, blue label. */
.giis-hero .giis-btn {
	background: var(--giis-on-blue);
	color: var(--giis-blue-mid);
	border-color: var(--giis-on-blue);
}
.giis-hero .giis-btn:hover,
.giis-hero .giis-btn:focus {
	background: #FFFFFF;
	color: var(--giis-blue-mid);
}

.giis-hero__actions a:not(.giis-btn) { font-size: 15px; color: var(--giis-gold-on-blue); }
.giis-hero__actions a:not(.giis-btn):hover { color: var(--giis-on-blue); }

.giis-card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }

.giis-card {
	border: 1px solid var(--giis-rule);
	background: var(--giis-card);
	display: flex; flex-direction: column;
	text-decoration: none; color: inherit;
	/*
	 * min-width: 0 is load-bearing, and its absence shows up only in Safari.
	 *
	 * A grid item's automatic minimum size is min-content, not zero. Chrome
	 * treats a replaced element with width:100% as contributing nothing to
	 * min-content; WebKit can resolve it to the image's intrinsic width. With
	 * the card images served at their full size, that pushed each 1fr track out
	 * to the width of the photograph, so the grid overflowed and the cards
	 * appeared enormous. It got worse further down the page because images
	 * below the fold are lazy-loaded, so each one only forced the track wider
	 * once it had arrived, which reads as cards growing while you scroll.
	 */
	min-width: 0;
}
.giis-card:hover { color: inherit; }
.giis-card:hover .giis-card__title { color: var(--giis-rust); }
.giis-card__media {
	aspect-ratio: 16 / 9;
	border-bottom: 1px solid var(--giis-rule);
	background: var(--giis-band);
	overflow: hidden;
}
.giis-card__media img { display: block; width: 100%; max-width: 100%; height: 100%; object-fit: cover; }
.giis-card__body { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.giis-card__title {
	font-family: var(--giis-serif); font-weight: 600; font-size: var(--giis-h3); line-height: 1.35;
	color: var(--giis-blue-deep); margin: 0;
}
.giis-card__excerpt { font-size: 14px; line-height: 1.6; color: var(--giis-secondary); margin: 0; flex: 1; }
.giis-card__foot {
	display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
	border-top: 1px solid var(--giis-rule); padding-top: 12px;
	font-size: 13.5px; color: var(--giis-muted); margin-top: auto;
}
.giis-card__price { font-weight: 700; color: var(--giis-ink); font-size: 15px; }
.giis-card__price .amount, .giis-card__price bdi { font-weight: 700; color: var(--giis-ink); }

/* A live card leads to the hub, not a purchase — the badge says so before the
   price would have, and the footer's right side echoes it rather than a price. */
.giis-card--live .giis-card__media { position: relative; }
.giis-card__badge {
	position: absolute; top: 12px; right: 12px;
	background: var(--giis-gold); color: var(--giis-ink);
	font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
	padding: 5px 10px;
}
.giis-card__price--live { color: var(--giis-gold); font-size: 13.5px; }

/* Ruled subject list — the row carries the subject's state on its right. */
.giis-subject-row {
	display: flex; justify-content: space-between; align-items: baseline;
	gap: 24px; padding: 15px 4px;
}
.giis-subject-row__title {
	text-decoration: none; color: var(--giis-ink);
	font-family: var(--giis-serif); font-size: 18px; line-height: 1.35;
}
.giis-subject-row__title:hover { color: var(--giis-rust); }
.giis-subject-row__state { font-size: 13px; white-space: nowrap; }
.giis-state--sale { color: var(--giis-rust); }
/* Gold rather than rust — current, but not a thing to click and buy. */
.giis-state--live { color: var(--giis-gold); }
.giis-state--interest { color: var(--giis-muted); }

/*
 * The next-term band, in the mid blue.
 *
 * It used to be a third parchment shade (#F1EBDD) sitting between the card tint
 * and the page ground, which left the homepage running four different creams
 * past each other and reading as noise. Making it blue does two things: it drops
 * the page to two parchment shades, and it sets up an alternation — blue hero,
 * paper, blue band, paper, blue stats — so the colour carries a rhythm rather
 * than just marking one box.
 */
.giis-band {
	display: flex; align-items: center; justify-content: space-between; gap: 40px;
	padding: 40px var(--giis-inline);
	background: var(--giis-blue-mid);
	color: var(--giis-on-blue);
	flex-wrap: wrap;
}
.giis-band__text { max-width: 520px; }
.giis-band__title { font-family: var(--giis-serif); font-weight: 600; font-size: 22px; line-height: 1.35; margin-bottom: 6px; color: var(--giis-on-blue); }
.giis-band__note { font-size: 14.5px; color: var(--giis-on-blue-soft); line-height: 1.6; }

/* The band's own button inverts, the same way the hero's does. */
.giis-band .giis-btn {
	background: var(--giis-on-blue);
	color: var(--giis-blue-mid);
	border-color: var(--giis-on-blue);
}
.giis-band .giis-btn:hover,
.giis-band .giis-btn:focus { background: #FFFFFF; color: var(--giis-blue-mid); }

/* And the interest form, which sits in the band on the homepage. */
.giis-band .giis-interest h3,
.giis-band .giis-interest p { color: var(--giis-on-blue); }
.giis-band .giis-interest input[type="email"] {
	background: var(--giis-on-blue);
	border-color: var(--giis-on-blue);
	color: var(--giis-ink);
}
.giis-band .giis-interest .button,
.giis-band .giis-interest button {
	background: var(--giis-gold-on-blue);
	border-color: var(--giis-gold-on-blue);
	color: var(--giis-blue-deep);
}
.giis-band .giis-interest .button:hover,
.giis-band .giis-interest button:hover { background: #EFC55A; }
.giis-band .giis-interest-msg { color: var(--giis-on-blue-soft); }

.giis-quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: start; }
/* Natural height, always. Real testimonials run 82 to 1,521 characters. */
.giis-quote { margin: 0; border-left: 2px solid var(--giis-gold); padding: 4px 0 4px 20px; }
.giis-quote blockquote {
	margin: 0 0 10px;
	font-family: var(--giis-serif);
	font-size: 16.5px; line-height: 1.7; color: var(--giis-body);
}
.giis-quote figcaption { font-size: 12.5px; color: var(--giis-muted); }

/*
 * The stats band was near-black. It is the same mid blue as the hero now, so the
 * page carries one dark colour rather than two competing ones.
 */
.giis-numbers {
	display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap;
	padding: 44px var(--giis-inline);
	background: var(--giis-blue-mid); color: var(--giis-on-blue);
}
.giis-numbers__n { font-family: var(--giis-serif); font-size: 38px; font-weight: 500; line-height: 1.3; }
.giis-numbers__label { font-size: 13px; color: var(--giis-on-blue-mute); margin-top: 4px; max-width: 220px; }

/* ----------------------------------------------------------------- footer */

/* Deep blue, matching the header, so the two bookend the page. */
.giis-footer {
	display: flex; justify-content: space-between; align-items: baseline;
	gap: 24px; flex-wrap: wrap;
	padding: 30px var(--giis-inline);
	font-size: 13px;
	background: var(--giis-blue-deep);
	color: var(--giis-on-blue-mute);
}
.giis-footer nav ul { display: flex; gap: 24px; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.giis-footer a { color: var(--giis-on-blue); text-decoration: none; }
.giis-footer a:hover { color: var(--giis-gold-on-blue); }
.giis-footer__social { display: flex; gap: 14px; align-items: center; }
.giis-footer__social a { color: var(--giis-on-blue-mute); display: flex; }
.giis-footer__social a:hover { color: var(--giis-on-blue); }

/* ------------------------------------------------------- main + rail shell */

/*
 * Main column and rail, with the page's title block as a third part.
 *
 * The title is its own element rather than the top of the main column so that on
 * a narrow screen the offer card can sit directly under the title — which is
 * where someone deciding whether to buy expects it — while on a wide screen the
 * rail still runs the full height beside both.
 */
.giis-shell {
	display: grid;
	grid-template-columns: minmax(0, 1fr) var(--giis-rail);
	gap: 0 48px;
	align-items: start;
	margin-top: 26px;
}
.giis-shell__head { grid-column: 1; grid-row: 1; min-width: 0; }
.giis-shell__main { grid-column: 1; grid-row: 2; min-width: 0; }
.giis-shell__rail {
	grid-column: 2; grid-row: 1 / span 2;
	display: flex; flex-direction: column; gap: 18px;
}
/*
 * The run page's lecture list, under the description rather than beside it.
 *
 * It used to sit in the right column below the price card, as a syllabus to
 * glance down while reading. In practice it competed with the price card for
 * the same narrow column and pushed the enrol button up out of view on a
 * laptop, so the one thing the page is for became the thing you scrolled past.
 *
 * Row 3 of column 1 puts it below both: the description above it, the card
 * beside that. It also aligns to the description's measure, which a fifteen-row
 * list needs more than the rail's 360px allowed.
 *
 * Grid placement rather than a DOM move, so the phone layout keeps the order the
 * markup already has — description, then lectures — instead of the offer-first
 * rule dragging the syllabus above the copy.
 */
.giis-run-curriculum { grid-column: 1; grid-row: 3; min-width: 0; margin-top: 40px; }

/* Nothing in the rail — the column takes the whole width. */
.giis-shell--solo { grid-template-columns: minmax(0, 1fr); }
.giis-shell--solo .giis-shell__rail { display: none; }

.giis-body-wrap { padding: 0 var(--giis-inline) 56px; }

/* ------------------------------------------------------------- offer rail */

.giis-rail-card { border: 1px solid var(--giis-input); background: var(--giis-card); padding: 24px 26px; }
.giis-rail-card--owned { border-color: var(--giis-gold); }
.giis-rail-card--tint { border-color: var(--giis-rule); background: var(--giis-band); padding: 20px 22px; }

.giis-price { display: flex; align-items: baseline; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.giis-price__amount { font-family: var(--giis-serif); font-size: 32px; font-weight: 600; color: var(--giis-ink); line-height: 1.2; }
.giis-price__amount del { color: var(--giis-muted); font-size: 0.6em; margin-right: 6px; }
.giis-price__amount ins { text-decoration: none; }
.giis-price__note { font-size: 13px; color: var(--giis-muted); }

.giis-rail-card__facts {
	font-size: 14px; line-height: 1.75; color: var(--giis-secondary);
	border-top: 1px solid var(--giis-rule); padding-top: 14px; margin-bottom: 18px;
}
.giis-rail-card__foot { text-align: center; font-size: 13px; color: var(--giis-muted); margin-top: 12px; }
.giis-rail-card__foot--ruled { border-top: 1px solid var(--giis-rule); padding-top: 14px; margin-top: 14px; }
.giis-rail-card__title { font-family: var(--giis-serif); font-weight: 600; font-size: 19px; line-height: 1.45; margin-bottom: 6px; color: var(--giis-blue-deep); }
.giis-rail-card__continue { font-size: 13.5px; color: var(--giis-muted); margin-bottom: 16px; }

.giis-zoom {
	border-top: 1px solid var(--giis-rule);
	margin-top: 18px; padding-top: 16px;
	font-size: 14px; line-height: 1.65; color: var(--giis-secondary);
}
.giis-zoom__label { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--giis-gold); font-weight: 700; margin-bottom: 6px; }

.giis-status-chip {
	display: inline-block;
	border: 1px solid var(--giis-input);
	background: var(--giis-band);
	color: var(--giis-secondary);
	font-size: 13.5px; padding: 7px 14px;
	margin-bottom: 24px;
}
/* A cohort in session reads as active, not as a muted "nothing here" note. */
.giis-status-chip--live { border-color: var(--giis-gold); color: var(--giis-body); }

/* --------------------------------------------------------- faculty inline */

.giis-faculty-inline {
	display: flex; gap: 18px;
	border: 1px solid var(--giis-rule); background: var(--giis-card);
	padding: 20px 22px; max-width: var(--giis-measure); margin-bottom: 34px;
}
.giis-faculty-inline__portrait {
	width: 64px; height: 64px; border-radius: 50%; flex-shrink: 0;
	object-fit: cover; background: var(--giis-band);
}
.giis-faculty-inline__name { font-family: var(--giis-serif); font-weight: 600; font-size: 17px; color: var(--giis-blue-deep); }
.giis-faculty-inline__role { font-size: 13px; color: var(--giis-muted); margin: 2px 0 8px; }
.giis-faculty-inline__bio { font-size: 14px; line-height: 1.6; color: var(--giis-secondary); }

/* ----------------------------------------------------------- ledger rows */

.giis-ledger { border-top: 1px solid var(--giis-rule); max-width: var(--giis-measure); }
.giis-ledger__row {
	display: flex; justify-content: space-between; gap: 20px;
	padding: 13px 4px; border-bottom: 1px solid var(--giis-rule);
	font-size: 14.5px;
}
.giis-ledger__row a { text-decoration: none; color: var(--giis-ink); }
.giis-ledger__row a:hover { color: var(--giis-rust); }
.giis-ledger__meta { color: var(--giis-muted); font-size: 13px; white-space: nowrap; }

/* --------------------------------------------------------- curriculum list */

.giis-curriculum { border-top: 1px solid var(--giis-rule); max-width: var(--giis-measure); }

.giis-week {
	display: flex; align-items: baseline; gap: 14px;
	padding: 12px 4px; border-bottom: 1px solid var(--giis-rule);
}
.giis-week__n { font-family: var(--giis-mono); font-size: 12.5px; color: var(--giis-gold); width: 22px; flex-shrink: 0; }
.giis-week__title { flex: 1; font-size: 15px; line-height: 1.5; color: var(--giis-ink); text-decoration: none; }
a.giis-week__title:hover { color: var(--giis-rust); }
.giis-week__mark { font-size: 12px; color: var(--giis-muted); white-space: nowrap; }
.giis-week__time { font-size: 12.5px; color: var(--giis-muted); white-space: nowrap; }
.giis-week--now { background: var(--giis-band); }

/* Archived: the whole list steps back a tone. Nothing is a link, nothing is gold. */
.giis-curriculum--dim .giis-week__n { color: var(--giis-dim); font-size: 12px; }
.giis-curriculum--dim .giis-week__title { color: var(--giis-secondary); font-size: 14.5px; }
.giis-curriculum--dim .giis-week__time { color: var(--giis-dim); font-size: 12px; }
.giis-curriculum--dim .giis-week { padding: 11px 2px; }

.giis-curriculum-label {
	font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase;
	color: var(--giis-muted); margin-bottom: 8px;
}

/* The archived run's two-line block: log in, or buy the self-paced version. */
.giis-archive-note {
	border-top: 1px solid var(--giis-rule);
	border-bottom: 1px solid var(--giis-rule);
	padding: 16px 2px; margin-bottom: 22px;
	font-size: 14.5px; line-height: 1.7; color: var(--giis-secondary);
}
.giis-archive-note p { margin: 0; }

/* -------------------------------------------------------------- interest */

/* The form is the plugin's; when the card supplies its own title the plugin's
   heading is passed empty and would otherwise leave a gap. */
.giis-interest h3:empty { display: none; }
.giis-interest h3 {
	font-family: var(--giis-serif); font-weight: 600; font-size: 17px;
	line-height: 1.4; margin: 0 0 6px; color: var(--giis-ink);
}
.giis-interest p:not(.giis-interest-msg) { font-size: 13.5px; line-height: 1.6; color: var(--giis-secondary); margin: 0 0 14px; }
.giis-interest input[type="email"] {
	width: 100%; background: var(--giis-card); border: 1px solid var(--giis-input);
	padding: 12px 14px; font-family: var(--giis-sans); font-size: 14px;
	color: var(--giis-ink); border-radius: 0; margin-bottom: 8px;
}
.giis-interest input[type="email"]::placeholder { color: var(--giis-muted); }
.giis-interest .button, .giis-interest button {
	display: block; width: 100%;
	background: var(--giis-ink); color: var(--giis-parchment);
	border: 1px solid var(--giis-ink); border-radius: 0;
	font-family: var(--giis-sans); font-weight: 600; font-size: 14px;
	padding: 13px 0; cursor: pointer; text-align: center;
	line-height: 1.2;
}
.giis-interest .button:hover, .giis-interest button:hover { background: #2B2822; }
.giis-interest .button:disabled, .giis-interest button:disabled { background: var(--giis-dim); border-color: var(--giis-dim); cursor: default; }
.giis-interest-msg { font-size: 13px; color: var(--giis-secondary); margin: 10px 0 0; min-height: 1px; }
/* On the tinted band the input needs the lighter ground to stay legible. */
.giis-rail-card--tint .giis-interest input[type="email"] { background: var(--giis-card); }
.giis-band .giis-interest { display: flex; gap: 10px; align-items: flex-start; flex-wrap: wrap; }
.giis-band .giis-interest h3 { flex-basis: 100%; }
.giis-band .giis-interest p { flex-basis: 100%; margin-bottom: 10px; }
.giis-band .giis-interest input[type="email"] { width: 280px; margin-bottom: 0; }
.giis-band .giis-interest .button, .giis-band .giis-interest button { width: auto; padding: 13px 22px; white-space: nowrap; }
.giis-band .giis-interest-msg { flex-basis: 100%; }

/* ------------------------------------------------------------------ auth */

/* The /login page. A single narrow column — there is one thing to do here. */
.giis-auth { max-width: 420px; margin: 0 auto; padding: 48px 0 64px; }
.giis-auth h1 { font-size: 30px; margin: 0 0 20px; }
.giis-auth__intro { font-size: 15px; margin-bottom: 24px; }

.giis-auth__notice {
	border-left: 2px solid var(--giis-gold);
	background: var(--giis-band);
	padding: 12px 16px; margin: 0 0 20px;
	font-size: 14px; line-height: 1.6; color: var(--giis-body);
}
.giis-auth__notice--error { border-left-color: var(--giis-rust); }

/*
 * The returning-student notice.
 *
 * 273 people have an account they have never signed into, and the failure mode
 * is specific: they try to register instead, end up with a second account, and
 * lose sight of everything they paid for. So this is not a footnote — it is
 * given the weight of a notice and placed above the form, and its own action,
 * so the recovery is one click rather than a hunt for "forgotten password".
 */
.giis-auth__migrated {
	border: 1px solid var(--giis-rule);
	border-left: 3px solid var(--giis-gold);
	background: var(--giis-band);
	padding: 18px 20px 20px;
	margin: 0 0 28px;
}
.giis-auth__migrated .giis-eyebrow { margin: 0 0 8px; }
.giis-auth__migrated p:not(.giis-eyebrow) {
	font-size: 14.5px; line-height: 1.65;
	color: var(--giis-body); margin: 0 0 14px;
}

.giis-auth__card {
	border: 1px solid var(--giis-rule); background: var(--giis-card);
	padding: 28px 26px 22px;
}
.giis-auth__card label { display: block; font-size: 13.5px; color: var(--giis-secondary); margin-bottom: 5px; }
.giis-auth__card .login-username,
.giis-auth__card .login-password { margin-bottom: 16px; }
.giis-auth__card input[type="text"],
.giis-auth__card input[type="password"] {
	width: 100%;
	background: var(--giis-parchment);
	border: 1px solid var(--giis-input);
	border-radius: 0;
	padding: 12px 14px;
	font-family: var(--giis-sans); font-size: 15px; color: var(--giis-ink);
}
.giis-auth__card .login-remember { margin-bottom: 18px; font-size: 13.5px; color: var(--giis-secondary); }
.giis-auth__card .login-remember label { display: inline; }
.giis-auth__card .login-submit input[type="submit"] {
	display: block; width: 100%;
	background: var(--giis-ink); color: var(--giis-parchment);
	border: 1px solid var(--giis-ink); border-radius: 0;
	font-family: var(--giis-sans); font-weight: 600; font-size: 15px;
	padding: 13px 0; cursor: pointer;
}
.giis-auth__card .login-submit input[type="submit"]:hover { background: #2B2822; }

.giis-auth__aside { font-size: 13.5px; color: var(--giis-muted); margin: 14px 0 0; text-align: center; }

.giis-auth__foot {
	border-top: 1px solid var(--giis-rule);
	margin-top: 34px; padding-top: 26px;
}
.giis-auth__foot h2 { font-size: 21px; margin: 0 0 8px; }
.giis-auth__foot p { font-size: 14.5px; line-height: 1.65; color: var(--giis-secondary); }

/* Registration form fields, sharing the login card's shape. */
.giis-auth__card form p { margin: 0 0 16px; }
.giis-auth__card input[type="email"] {
	width: 100%;
	background: var(--giis-parchment);
	border: 1px solid var(--giis-input);
	border-radius: 0;
	padding: 12px 14px;
	font-family: var(--giis-sans); font-size: 15px; color: var(--giis-ink);
}
.giis-auth__consent { font-size: 13.5px; line-height: 1.55; color: var(--giis-secondary); }
.giis-auth__consent label { display: flex; gap: 9px; align-items: flex-start; }
.giis-auth__consent input { margin-top: 3px; flex-shrink: 0; }

/* The honeypot. Off-screen rather than display:none — some bots skip hidden
   fields, and a screen reader is told to ignore it by aria-hidden. */
.giis-hp {
	position: absolute !important;
	left: -9999px; width: 1px; height: 1px; overflow: hidden;
}

/* ------------------------------------------------------- lecture join link */

/*
 * Free to attend, but the link is behind an account — because open links to a
 * live room got the room disrupted. Gold, not rust: this is an invitation, not
 * a purchase.
 */
.giis-join {
	border: 1px solid var(--giis-gold);
	background: var(--giis-card);
	padding: 22px 24px;
	margin: 0 0 24px;
	max-width: var(--giis-measure);
}
.giis-join__lead { font-size: 14.5px; line-height: 1.65; color: var(--giis-secondary); margin: 0 0 16px; }
.giis-join__actions { display: flex; gap: 10px; flex-wrap: wrap; margin: 0; }

/* ------------------------------------------------------------- manage panel */

/* For the two or three people who run the institute, on their own dashboard. */
.giis-manage {
	border-top: 1px solid var(--giis-rule);
	margin-top: 40px; padding-top: 26px;
}
.giis-manage__note { font-size: 14px; color: var(--giis-secondary); margin: 0 0 12px; }
.giis-manage__links {
	display: flex; flex-wrap: wrap; gap: 10px 24px;
	list-style: none; margin: 0; padding: 0;
	font-size: 14.5px;
}

/* ------------------------------------------------------------ concession */

.giis-concession { max-width: var(--giis-measure); }
.giis-concession h3 { font-size: 19px; margin: 0 0 8px; }
.giis-concession > p { font-size: 14px; line-height: 1.65; color: var(--giis-secondary); margin: 0 0 18px; }
.giis-concession__form { display: flex; flex-direction: column; gap: 4px; max-width: 420px; }
.giis-concession__form label { font-size: 13px; color: var(--giis-secondary); margin-top: 10px; }
.giis-concession__form input, .giis-concession__form textarea {
	background: var(--giis-card); border: 1px solid var(--giis-input);
	padding: 11px 12px; font-family: var(--giis-sans); font-size: 14px;
	color: var(--giis-ink); border-radius: 0;
}
.giis-concession__form button { margin-top: 16px; align-self: flex-start; }
.giis-concession__msg { font-size: 13px; color: var(--giis-secondary); margin: 10px 0 0; }

.giis-concession-disclosure {
	margin: 24px 0 32px; padding: 18px 22px;
	border: 1px solid var(--giis-rule); background: var(--giis-band);
}
.giis-concession-disclosure summary {
	cursor: pointer; font-weight: 600; font-size: 14px; color: var(--giis-ink);
	list-style: none;
}
.giis-concession-disclosure summary::-webkit-details-marker { display: none; }
.giis-concession-disclosure[open] summary { margin-bottom: 16px; }
.giis-concession-disclosure .giis-concession h3 { display: none; }
.giis-concession-disclosure .giis-concession > p { margin-top: -4px; }

/* ------------------------------------------------------------- run header */

.giis-run-head h1 { line-height: 1.3; margin: 0 0 12px; }
.giis-run-head__meta { font-size: 14.5px; color: var(--giis-secondary); margin-bottom: 26px; }
.giis-run-head__meta--dim { color: var(--giis-muted); font-size: 14px; margin-bottom: 22px; }

.giis-hub-head h1 { line-height: 1.3; margin: 0 0 22px; }

/* ------------------------------------------------------------ lesson page */

.giis-lesson { display: flex; gap: 40px; align-items: flex-start; padding: 30px var(--giis-inline) 52px; }
.giis-lesson__main { flex: 1; min-width: 0; }
.giis-lesson__rail { width: 330px; flex-shrink: 0; border: 1px solid var(--giis-rule); background: var(--giis-card); }

.giis-video { aspect-ratio: 16 / 9; background: var(--giis-ink); position: relative; }
.giis-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.giis-video__fallback {
	position: absolute; inset: 0;
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	gap: 12px; color: var(--giis-dim); font-size: 14px; text-align: center; padding: 24px;
}

.giis-lesson__head {
	display: flex; justify-content: space-between; align-items: baseline;
	gap: 24px; margin-top: 22px; flex-wrap: wrap;
}
.giis-lesson__head h1 { font-size: 28px; line-height: 1.35; margin: 0; }
.giis-lesson__meta { font-size: 13.5px; color: var(--giis-muted); margin-top: 8px; }

.giis-lesson__nav {
	display: flex; justify-content: space-between; gap: 20px;
	border-top: 1px solid var(--giis-rule); margin-top: 22px; padding-top: 16px;
	font-size: 14px;
}
.giis-lesson__nav a { text-decoration: none; }
.giis-lesson__nav span { color: var(--giis-dim); }

.giis-outline__head { padding: 16px 20px; border-bottom: 1px solid var(--giis-rule); }
.giis-lesson__rail > summary { list-style: none; }
.giis-lesson__rail > summary::-webkit-details-marker { display: none; }
.giis-lesson__rail > summary::marker { content: ""; }

.giis-transcript { border-top: 1px solid var(--giis-rule); padding-top: 20px; max-width: var(--giis-measure); }
.giis-transcript summary {
	cursor: pointer; list-style: none;
	font-family: var(--giis-serif); font-size: 19px; font-weight: 600; color: var(--giis-ink);
}
.giis-transcript summary::-webkit-details-marker { display: none; }
.giis-transcript summary::before { content: "+ "; color: var(--giis-gold); }
.giis-transcript[open] summary::before { content: "– "; }
.giis-outline__title { font-size: 13.5px; font-weight: 700; margin-bottom: 8px; color: var(--giis-ink); }
.giis-outline__count { font-size: 12px; color: var(--giis-muted); margin-top: 6px; }
.giis-outline__item {
	display: flex; align-items: baseline; gap: 10px;
	padding: 10px 20px; border-bottom: 1px solid var(--giis-rule-soft);
	text-decoration: none; color: var(--giis-ink);
}
.giis-outline__item:hover { background: var(--giis-parchment); color: var(--giis-ink); }
.giis-outline__item--now { background: var(--giis-band); }
.giis-outline__n { font-family: var(--giis-mono); font-size: 11px; color: var(--giis-gold); width: 18px; flex-shrink: 0; }
.giis-outline__label { flex: 1; font-size: 13px; line-height: 1.45; }
.giis-outline__chip { font-size: 11px; color: var(--giis-muted); white-space: nowrap; }

/* ---------------------------------------------------------- course archive */

.giis-archive-intro { padding: 40px 0 8px; }
.giis-archive-intro h1 { margin: 0 0 10px; }
.giis-archive-intro p { font-size: 15.5px; color: var(--giis-secondary); line-height: 1.6; margin: 0 0 20px; max-width: 560px; }
.giis-filters { display: flex; gap: 8px; margin-bottom: 28px; flex-wrap: wrap; }

/* ------------------------------------------------------------- lectures */

.giis-lecture-row {
	display: flex; align-items: baseline; gap: 20px;
	padding: 15px 4px; border-bottom: 1px solid var(--giis-rule);
}
.giis-lecture-row__date { font-family: var(--giis-mono); font-size: 12px; color: var(--giis-muted); width: 90px; flex-shrink: 0; }
.giis-lecture-row__title {
	flex: 1; text-decoration: none; color: var(--giis-ink);
	font-family: var(--giis-serif); font-size: 18px; line-height: 1.45;
}
.giis-lecture-row__title:hover { color: var(--giis-rust); }
.giis-lecture-row__abstract { font-size: 12px; color: var(--giis-dim); white-space: nowrap; }
/* The only red thing on the page, which is exactly why it reads at a glance. */
.giis-watch {
	font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700;
	color: var(--giis-parchment); background: var(--giis-rust);
	padding: 4px 10px; white-space: nowrap; text-decoration: none;
}
.giis-year-head {
	font-family: var(--giis-serif); font-size: 15px; color: var(--giis-muted);
	letter-spacing: 0.08em; padding: 22px 4px 6px; margin: 0;
	border-bottom: 1px solid var(--giis-rule);
}

/* The single lecture's poster, standing in for the video when there isn't one.
   Bounded rather than cropped — flyers arrive in whatever shape they were made. */
.giis-lecture-poster { margin: 0 0 20px; border: 1px solid var(--giis-rule); background: var(--giis-card); }
.giis-lecture-poster img { display: block; width: 100%; height: auto; }

/* -------------------------------------------------------------- faculty */

.giis-faculty-card {
	display: flex; gap: 32px;
	border: 1px solid var(--giis-rule); background: var(--giis-card);
	padding: 30px 34px;
}
.giis-faculty-card__portrait {
	width: 104px; flex-shrink: 0; aspect-ratio: 4 / 5;
	/*
	 * align-self is load-bearing. The card is a flex row, and a flex item's
	 * default alignment is stretch, which gives the image a definite height —
	 * the height of the whole card. A definite width and a definite height
	 * together beat aspect-ratio, so the 4:5 was silently ignored and each
	 * portrait was drawn as tall as its own bio: 140x299 for one, 140x379 for
	 * the other, ratios of 0.47 and 0.37 against the 0.80 intended. object-fit
	 * then scaled the source up to fill that, which is what made a 225px photo
	 * look like a bad enlargement. flex-start returns the height to the ratio.
	 */
	align-self: flex-start;
	object-fit: cover; background: var(--giis-band);
}
.giis-faculty-card h2 { font-family: var(--giis-serif); font-weight: 600; font-size: var(--giis-h2); margin: 0 0 4px; }
.giis-faculty-card__role {
	font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase;
	color: var(--giis-gold); font-weight: 700; margin-bottom: 14px;
}
.giis-faculty-card__bio { font-size: 15px; line-height: 1.7; color: var(--giis-body); margin: 0 0 16px; max-width: var(--giis-measure); }
.giis-faculty-card__bio > :last-child { margin-bottom: 0; }

/* ------------------------------------------------------------- dashboard */

.giis-dash { padding: 36px var(--giis-inline) 52px; }
.giis-dash h1 { font-size: 30px; margin: 0 0 26px; }
.giis-dash h2 { font-size: 21px; margin: 0 0 12px; }

.giis-continue {
	display: flex; gap: 24px; align-items: center; flex-wrap: wrap;
	border: 1px solid var(--giis-gold); background: var(--giis-card);
	padding: 24px 28px; margin-bottom: 30px;
}
/* The one action on the dashboard, in the deep blue rather than ink — it is the
   thing the page exists for, and the blue ties it to the chrome around it. */
.giis-continue .giis-btn {
	background: var(--giis-blue-deep);
	border-color: var(--giis-blue-deep);
	color: var(--giis-on-blue);
}
.giis-continue .giis-btn:hover,
.giis-continue .giis-btn:focus {
	background: var(--giis-blue-mid);
	border-color: var(--giis-blue-mid);
	color: var(--giis-on-blue);
}
.giis-continue__text { flex: 1; min-width: 220px; }
.giis-continue__title { font-family: var(--giis-serif); font-weight: 600; font-size: 21px; line-height: 1.35; margin-bottom: 6px; color: var(--giis-blue-deep); }
.giis-continue__meta { font-size: 13px; color: var(--giis-muted); }

.giis-course-row {
	display: flex; align-items: center; gap: 20px;
	padding: 16px 4px; border-bottom: 1px solid var(--giis-rule);
	flex-wrap: wrap;
}
.giis-course-row__text { flex: 1; min-width: 200px; }
.giis-course-row__title { font-family: var(--giis-serif); font-size: 17px; font-weight: 600; line-height: 1.4; color: var(--giis-blue-deep); }
.giis-course-row__meta { font-size: 12.5px; color: var(--giis-muted); margin-top: 3px; }
.giis-course-row .giis-progress { width: 120px; flex-shrink: 0; }

.giis-quiet-band {
	display: flex; justify-content: space-between; align-items: center; gap: 20px;
	background: var(--giis-band); border: 1px solid var(--giis-rule);
	padding: 16px 22px; margin-top: 26px;
	font-size: 14px; color: var(--giis-secondary); flex-wrap: wrap;
}

.giis-dash-nav { display: flex; gap: 26px; font-size: 13.5px; flex-wrap: wrap; }
.giis-dash-nav a { text-decoration: none; color: var(--giis-secondary); }
.giis-dash-nav a:hover { color: var(--giis-ink); }
.giis-dash-nav .is-current { color: var(--giis-ink); border-bottom: 2px solid var(--giis-gold); padding-bottom: 2px; }
.giis-dash-nav .giis-nav__login { color: var(--giis-rust); }

/*
 * The same nav class serves the dashboard's own tabs (on parchment) and the
 * slim header's "My dashboard" link (on blue). The rule above sets a
 * parchment-context colour, and being later in the file it was beating the
 * generic .giis-header a rule — leaving "My dashboard" in dark warm grey on
 * deep blue, which is close to unreadable. Scoped to the header, it wins back.
 */
.giis-header .giis-dash-nav a { color: var(--giis-on-blue-soft); }
.giis-header .giis-dash-nav a:hover { color: var(--giis-gold-on-blue); }

/* ---------------------------------------------------------- 404 + search */

.giis-404 { padding: 64px var(--giis-inline) 60px; text-align: center; }
.giis-404__code { font-family: var(--giis-serif); font-size: 15px; color: var(--giis-gold); letter-spacing: 0.2em; margin-bottom: 16px; }
.giis-404 h1 { font-size: 30px; line-height: 1.35; margin: 0 0 14px; }
.giis-404 p { font-size: 15px; line-height: 1.65; color: var(--giis-secondary); margin: 0 auto 26px; max-width: 380px; }
.giis-404__actions { display: flex; gap: 10px; justify-content: center; margin-bottom: 22px; flex-wrap: wrap; }

.giis-searchform { display: flex; max-width: 460px; }
.giis-searchform input[type="search"] {
	flex: 1; min-width: 0;
	background: var(--giis-card); border: 1px solid var(--giis-input); border-right: none;
	padding: 12px 14px; font-family: var(--giis-serif); font-size: 15px;
	color: var(--giis-ink); border-radius: 0;
}
.giis-searchform input[type="search"]::placeholder { font-family: var(--giis-sans); color: var(--giis-muted); font-size: 13.5px; }
.giis-searchform button {
	background: var(--giis-ink); color: var(--giis-parchment); border: 1px solid var(--giis-ink);
	padding: 12px 18px; font-family: var(--giis-sans); font-size: 14px; font-weight: 600;
	cursor: pointer; border-radius: 0;
}
.giis-404 .giis-searchform { margin: 0 auto; }

.giis-result { padding: 16px 2px; border-bottom: 1px solid var(--giis-rule); }
.giis-result__type {
	font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase;
	font-weight: 700; margin-bottom: 5px;
}
.giis-result__type--buyable { color: var(--giis-gold); }
.giis-result__type--quiet { color: var(--giis-muted); }
.giis-result__title { font-family: var(--giis-serif); font-size: 18px; line-height: 1.4; text-decoration: none; color: var(--giis-blue-deep); }
.giis-result__title:hover { color: var(--giis-rust); }
.giis-result__note { font-size: 13.5px; color: var(--giis-secondary); margin-top: 4px; }

.giis-pagination { display: flex; gap: 10px; margin-top: 30px; font-size: 14px; flex-wrap: wrap; }
.giis-pagination .page-numbers {
	border: 1px solid var(--giis-input); padding: 8px 14px; text-decoration: none; color: var(--giis-ink);
}
.giis-pagination .page-numbers.current { background: var(--giis-ink); color: var(--giis-parchment); border-color: var(--giis-ink); }

/* --------------------------------------------------------------- sign-up modal */

/*
 * The dialog is a real <dialog>, so the browser handles the focus trap, Escape,
 * and the inert background — three things that are easy to write badly by hand
 * and that a keyboard user notices immediately when they are wrong.
 */
.giis-modal {
	border: 1px solid var(--giis-rule);
	background: var(--giis-card);
	color: var(--giis-body);
	padding: 0;
	max-width: 460px;
	width: calc( 100% - 32px );
}
.giis-modal::backdrop { background: rgba( 11, 39, 75, 0.55 ); }
.giis-modal__inner { padding: 30px 32px 32px; position: relative; }
.giis-modal__title { font-size: 21px; margin: 0 0 8px; padding-right: 28px; }
.giis-modal__note { font-size: 14.5px; color: var(--giis-secondary); line-height: 1.6; margin: 0 0 18px; }
.giis-modal__close {
	position: absolute; top: 10px; right: 12px;
	background: none; border: 0; cursor: pointer;
	font-size: 26px; line-height: 1; color: var(--giis-muted); padding: 4px 8px;
}
.giis-modal__close:hover { color: var(--giis-ink); }
/* The form inside sheds the heading the shortcode would otherwise repeat. */
.giis-modal .giis-interest h3 { display: none; }
.giis-modal .giis-interest input[type="email"] { width: 100%; }
.giis-modal .giis-interest .button,
.giis-modal .giis-interest button { width: 100%; }

/* ------------------------------------------------------------ testimonials */

.giis-quote__more { display: inline-block; margin-left: 8px; font-size: 12.5px; white-space: nowrap; }

/* Stacked rather than columned: for reading, not for scanning. */
.giis-quotes--stack { display: block; }
.giis-quotes--stack .giis-quote { margin: 0 0 26px; max-width: 66ch; }

.giis-testimonials { padding: 44px 0 10px; }
.giis-testimonials__head { max-width: 66ch; margin-bottom: 40px; }
.giis-testimonials__head h1 { margin-bottom: 12px; }
.giis-testimonials .giis-lede { font-size: 17px; line-height: 1.7; color: var(--giis-secondary); margin: 0; }

.giis-testimonials__group { padding-top: 26px; border-top: 1px solid var(--giis-rule); margin-bottom: 34px; }
.giis-testimonials__group h2 { font-size: 21px; margin: 0 0 20px; }
.giis-testimonials__group h2 a { color: inherit; text-decoration: none; }
.giis-testimonials__group h2 a:hover { text-decoration: underline; }

/* The subject hub's own quotes — under the copy, above the run history. */
.giis-hub-quotes { margin-top: 38px; padding-top: 26px; border-top: 1px solid var(--giis-rule); }
.giis-hub-quotes h2 { font-size: 21px; margin: 0 0 20px; }

/* The subject image at the top of the hub rail. */
.giis-hub-figure { margin: 0; }
.giis-hub-figure img {
	display: block; width: 100%;
	aspect-ratio: 4 / 3; object-fit: cover;
	border: 1px solid var(--giis-rule);
}

/* A short note above a price card — the "you are joining late" line. */
.giis-rail-note {
	border-left: 2px solid var(--giis-gold);
	background: var(--giis-band);
	padding: 12px 16px;
	font-size: 13.5px; line-height: 1.6; color: var(--giis-body);
}
.giis-rail-note .giis-eyebrow { margin: 0 0 4px; }

/* The dashboard's opening line, in place of the greeting that used to be there. */
.giis-dash-lede { font-size: 16px; color: var(--giis-secondary); margin: -6px 0 26px; }

/* ------------------------------------------------ Tutor learning area */

/*
 * The lesson player.
 *
 * Tutor 4 renders lessons through its own learning area — a full-screen player
 * with a sidebar, progress and the comment thread. It is not rebuilt here, and
 * barely restyled either: everything Tutor draws sits behind enrolment, so the
 * public face of the institute is the theme's and stays consistent whatever the
 * player looks like. Family resemblance inside it is enough.
 *
 * The base colour is set through Tutor's own Settings → Design → Brand Color,
 * now the mid blue (#003566) that the hero and stats band use. That is where it
 * belongs: the setting also reaches Tutor's admin screens, the course builder
 * above all, where this stylesheet is never loaded at all.
 *
 * One thing is corrected here, and only because it is a behaviour bug rather
 * than a matter of taste. Tutor derives its ramp by shifting the base in HSL
 * against fixed target lightnesses that assume a mid-tone brand colour. The mid
 * blue sits at L=20%, so the generated 700 — the *hover* step — comes out at
 * #0973ec, a bright blue far lighter than the 600 it is hovering from. Left
 * alone, a primary button jumps several shades lighter when you point at it.
 *
 * The hover is set to the deep blue instead, so hovering deepens rather than
 * lightens and both ends of the interaction are colours the rest of the site
 * already uses.
 */
.giis-page,
body[class*="tutor-"] {
	--tutor-brand-700: #0B274B;

	/* tutor-front.min.css predates the ramp and reads this one directly. */
	--tutor-color-primary-hover: #0B274B;
	--tutor-color-primary-hover-rgb: 11, 39, 75;
}

/*
 * Tutor's form primitives.
 *
 * The dashboard's Account, Settings and profile screens are Tutor's own, built
 * from its utility classes — .tutor-form-control, .tutor-label, .tutor-btn — and
 * nothing here had ever touched them, so they arrived as raw Tutor: rounded
 * inputs, its own greys, its own button shape, next to the square-cornered
 * parchment forms used everywhere else on the site.
 *
 * Styling the primitives rather than any one screen means Account, Settings,
 * Profile and anything Tutor adds later all pick this up at once. It stays
 * deliberately light — the shapes and colours the rest of the site uses, and
 * nothing that reaches into Tutor's layout.
 */
.giis-page .tutor-form-control,
.giis-page .tutor-input,
.giis-page input[type="text"].tutor-form-control,
.giis-page input[type="email"].tutor-form-control,
.giis-page input[type="password"].tutor-form-control,
.giis-page textarea.tutor-form-control,
.giis-page select.tutor-form-control {
	border: 1px solid var(--giis-input);
	border-radius: 0;
	background: var(--giis-card);
	font-family: var(--giis-sans);
	color: var(--giis-ink);
}
.giis-page .tutor-form-control:focus,
.giis-page .tutor-input:focus {
	border-color: var(--giis-ink);
	box-shadow: none;
	outline: 2px solid var(--giis-ink);
	outline-offset: 1px;
}

.giis-page .tutor-label,
.giis-page .tutor-form-label {
	font-size: 13.5px;
	color: var(--giis-secondary);
	font-family: var(--giis-sans);
}

/* Buttons take the site's square, ink-filled primary. */
.giis-page .tutor-btn.tutor-btn-primary {
	border-radius: 0;
	background: var(--giis-ink);
	border-color: var(--giis-ink);
	color: var(--giis-parchment);
	font-family: var(--giis-sans);
	font-weight: 600;
}
.giis-page .tutor-btn.tutor-btn-primary:hover,
.giis-page .tutor-btn.tutor-btn-primary:focus {
	background: #2B2822;
	border-color: #2B2822;
	color: var(--giis-parchment);
}
.giis-page .tutor-btn.tutor-btn-outline-primary,
.giis-page .tutor-btn.tutor-btn-secondary {
	border-radius: 0;
	border-color: var(--giis-input);
	color: var(--giis-ink);
	background: transparent;
	font-family: var(--giis-sans);
}
.giis-page .tutor-btn.tutor-btn-link,
.giis-page .tutor-btn.tutor-btn-link-gray { color: var(--giis-rust); }

/* Tutor's own card surfaces, squared off to match everything around them. */
.giis-page .tutor-card,
.giis-page .tutor-dashboard-content .tutor-card {
	border-radius: 0;
	border-color: var(--giis-rule);
	background: var(--giis-card);
}

/*
 * Tutor's own video skin paints its controls from --plyr-color-main, which is
 * not part of the brand ramp and so is not covered by the Brand Color setting.
 */
.giis-page {
	--plyr-color-main: #003566;
}


/* -------------------------------------------------- WooCommerce + Tutor */

.giis-page .woocommerce .button,
.giis-page .woocommerce a.button,
.giis-page .woocommerce button.button,
.giis-page .woocommerce input.button {
	background: var(--giis-ink); color: var(--giis-parchment);
	border: 1px solid var(--giis-ink); border-radius: 0;
	font-family: var(--giis-sans); font-weight: 600; font-size: 14.5px;
	padding: 13px 26px; line-height: 1.2; text-shadow: none;
}
.giis-page .woocommerce .button:hover { background: #2B2822; color: var(--giis-parchment); }
.giis-page .woocommerce .button.alt { background: var(--giis-ink); }

.giis-page .woocommerce table.shop_table,
.giis-page .woocommerce table.shop_table td,
.giis-page .woocommerce table.shop_table th {
	border-color: var(--giis-rule); border-radius: 0;
}
/*
 * WooCommerce's notices.
 *
 * The icon is a ::before glyph carrying Woo's own blue (#1e85be), which had
 * nothing to do with anything else on the page — on the Orders screen it read as
 * two stray blue squares floating in a cream box. It takes the gold that the
 * top border already uses, so the notice is one mark rather than three colours.
 */
.giis-page .woocommerce .woocommerce-info,
.giis-page .woocommerce .woocommerce-message,
.giis-page .woocommerce .woocommerce-error {
	background: var(--giis-band); border-top-color: var(--giis-gold); color: var(--giis-body);
}
.giis-page .woocommerce .woocommerce-info::before,
.giis-page .woocommerce .woocommerce-message::before { color: var(--giis-gold); }
.giis-page .woocommerce .woocommerce-error { border-top-color: var(--giis-rust); }
.giis-page .woocommerce .woocommerce-error::before { color: var(--giis-rust); }
.giis-page .woocommerce form .form-row input.input-text,
.giis-page .woocommerce form .form-row textarea,
.giis-page .woocommerce form .form-row select,
.giis-page .select2-container .select2-selection {
	border: 1px solid var(--giis-input); border-radius: 0; background: var(--giis-card);
	font-family: var(--giis-sans);
}
.giis-page .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; }
.giis-page .woocommerce-MyAccount-navigation li { border-bottom: 1px solid var(--giis-rule); }
.giis-page .woocommerce-MyAccount-navigation a { display: block; padding: 12px 4px; text-decoration: none; color: var(--giis-ink); }
.giis-page .woocommerce-MyAccount-navigation .is-active a { color: var(--giis-rust); font-weight: 600; }

/*
 * Tutor's own surfaces are styled rather than rebuilt — account, orders, login.
 *
 * Only the primary and outline variants are repainted. Tutor also ships
 * link-shaped buttons (tutor-btn tutor-btn-link-gray), and a blanket .tutor-btn
 * rule turns "Forgot password?" into a solid ink block.
 */
.giis-page .tutor-btn { border-radius: 0; font-family: var(--giis-sans); }
.giis-page .tutor-btn-primary {
	background: var(--giis-ink); border-color: var(--giis-ink);
	color: var(--giis-parchment); font-weight: 600;
}
.giis-page .tutor-btn-outline-primary,
.giis-page .tutor-btn-secondary {
	background: transparent; color: var(--giis-ink); border-color: var(--giis-ink); font-weight: 600;
}
.giis-page [class*="tutor-btn-link"] {
	background: transparent; border-color: transparent;
	color: var(--giis-rust); font-weight: 400;
	padding-left: 0; padding-right: 0;
}
.giis-page .tutor-form-control, .giis-page .tutor-form-select {
	border-radius: 0; border-color: var(--giis-input); background: var(--giis-card);
	font-family: var(--giis-sans);
}
.giis-page .tutor-card, .giis-page .tutor-dashboard-content {
	border-radius: 0; box-shadow: none; border-color: var(--giis-rule); background: var(--giis-card);
}
.giis-page .tutor-color-primary, .giis-page a.tutor-color-primary { color: var(--giis-rust); }

/* ------------------------------------------------------------ responsive */

@media (max-width: 1080px) {
	.giis-hero h1 { font-size: 40px; }
}

/* The rails stack under the main column here — brief §"Interactions". */
@media (max-width: 1000px) {
	:root { --giis-gutter: 32px; }

	/*
	 * Below this the masthead and the full nav no longer both fit, and the first
	 * thing to break is "Public lectures" across two lines. The institute name and
	 * the Browse button go instead — the name is decoration at this width and
	 * Browse duplicates the Courses link beside it.
	 */
	.giis-brand__full { display: none; }
	.giis-nav { gap: 22px; }
	.giis-nav ul { gap: 22px; }
	.giis-nav > .giis-btn { display: none; }
	.giis-shell { display: flex; flex-direction: column; gap: 32px; }
	.giis-shell__rail { width: 100%; }
	/* Back into the flow, under the copy, where the markup already puts it. */
	.giis-run-curriculum { margin-top: 0; }
	/* On a narrow screen the offer belongs directly under the title, ahead of the
	   description — so the price is answered before the reading starts. */
	.giis-shell--offer-first .giis-shell__head { order: 1; }
	.giis-shell--offer-first .giis-shell__rail { order: 2; }
	.giis-shell--offer-first .giis-shell__main { order: 3; }
	.giis-lesson { flex-direction: column; gap: 28px; }
	.giis-lesson__rail { width: 100%; }
	.giis-card-grid, .giis-quotes { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 782px) {
	/* Scoped to .giis-nav so it outweighs the `.giis-nav ul` layout rule above —
	   the menu is both, and the more specific selector has to be the one hiding it. */
	.giis-nav .giis-nav__links { display: none; }
	/*
	 * The drop-down carries the header's colour down with it. It used to be
	 * parchment, which stopped working the moment the nav links became parchment
	 * too — parchment text on a parchment panel is an invisible menu.
	 */
	.giis-nav .giis-nav__links.is-open {
		display: flex; flex-direction: column; align-items: flex-start; gap: 0;
		position: absolute; left: 0; right: 0; top: 100%;
		background: var(--giis-blue-deep);
		border-bottom: 1px solid rgba( 247, 243, 234, 0.18 );
		padding: 8px 20px 16px; z-index: 20;
	}
	.giis-nav .giis-nav__links.is-open li { width: 100%; border-bottom: 1px solid rgba( 247, 243, 234, 0.14 ); }
	.giis-nav .giis-nav__links.is-open li:last-child { border-bottom: 0; }
	.giis-nav .giis-nav__links.is-open a { display: block; padding: 14px 0; }
	.giis-header { position: relative; padding: 16px 20px; }
	.giis-nav-toggle {
		display: inline-flex; flex-direction: column; gap: 4px; justify-content: center;
		background: none; border: 0; padding: 12px 4px; cursor: pointer;
	}
	/* On the blue header the bars have to be parchment or they vanish. */
	.giis-nav-toggle span { display: block; width: 20px; height: 2px; background: var(--giis-on-blue); }
	.giis-nav > .giis-btn { display: none; }
	.giis-brand__full { display: none; }
	.giis-brand__mark { font-size: 22px; }
}

@media (max-width: 720px) {
	:root { --giis-gutter: 20px; }

	/* The scale steps down as a whole rather than heading by heading, so the
	   sizes stay normalised on a phone the way they are on a desktop. */
	:root {
		--giis-h1: 30px;
		--giis-h2: 22px;
		--giis-h3: 19px;
	}

	.giis-hero { padding: 36px var(--giis-inline) 32px; }
	.giis-hero h1 { font-size: 30px; line-height: 1.3; }
	.giis-hero__lead { font-size: 15px; }
	.giis-hero__actions { flex-direction: column; align-items: stretch; gap: 14px; }
	.giis-hero__actions a { text-align: center; }
	.giis-hero__actions .giis-btn { padding: 15px 0; }

	.giis-section { padding: 28px var(--giis-inline) 32px; }
	.giis-card-grid, .giis-quotes { grid-template-columns: 1fr; }
	.giis-band { padding: 26px var(--giis-inline); gap: 16px; }
	.giis-band .giis-interest { display: block; }
	.giis-band .giis-interest input[type="email"] { width: 100%; margin-bottom: 10px; }
	.giis-band .giis-interest .button, .giis-band .giis-interest button { width: 100%; }
	.giis-numbers { gap: 24px; padding: 32px var(--giis-inline); }
	.giis-numbers > div { flex: 1 1 40%; }
	.giis-numbers__n { font-size: 30px; }

	.giis-lesson { padding: 0 0 32px; }
	/* Video full-bleed at the top, per the mobile lesson frame. */
	.giis-lesson__main > .giis-video { margin: 0; }
	.giis-lesson__body { padding: 20px var(--giis-gutter); }
	.giis-lesson__head h1 { font-size: 21px; line-height: 1.4; }
	.giis-lesson__nav { flex-direction: column; gap: 10px; }
	.giis-lesson__nav a {
		border: 1px solid var(--giis-ink); padding: 13px 0; text-align: center;
		font-weight: 600; font-size: 13.5px; min-height: 44px;
	}
	.giis-lesson__nav a:last-child { background: var(--giis-ink); color: var(--giis-parchment); }
	.giis-lesson__rail { margin: 0 var(--giis-gutter); }

	.giis-faculty-card { flex-direction: column; gap: 20px; padding: 22px; }

	.giis-continue { padding: 18px 20px; }
	.giis-continue .giis-btn { width: 100%; }
	.giis-course-row .giis-progress { display: none; }
	.giis-footer { flex-direction: column; gap: 14px; text-align: center; justify-content: center; }
	.giis-footer nav ul { justify-content: center; }
	.giis-footer__social { justify-content: center; }

	/* Hit targets — nothing tappable below 44px. */
	.giis-btn, .giis-chip, .giis-week__title, .giis-outline__item,
	.giis-subject-row__title, .giis-lecture-row__title { min-height: 44px; }
	.giis-btn { display: block; padding: 14px 20px; }
	.giis-btn--sm { display: inline-block; padding: 12px 18px; }
	.giis-week, .giis-subject-row, .giis-lecture-row, .giis-ledger__row { padding-top: 14px; padding-bottom: 14px; }
	.giis-week__title, .giis-subject-row__title, .giis-lecture-row__title { display: flex; align-items: center; }
	.giis-lecture-row { flex-wrap: wrap; }
	.giis-lecture-row__date { width: 100%; }
}

/*
 * Touch keyboards, and the 16px rule.
 *
 * iOS Safari zooms the page in when a text field is focused whose computed
 * font-size is below 16px, and it does not zoom back out afterwards. Every
 * field in this theme was set between 13.5px and 15px to sit with the rest of
 * the type, which meant tapping the login field, the interest email or the
 * concession form left the reader zoomed in on a half-width page and having to
 * pinch their way back.
 *
 * Raising the size only for coarse pointers keeps the drawn design exactly as
 * it is on a desktop and fixes the phone. It is scoped to pointer rather than
 * width so a tablet in landscape is covered too, which a width query misses.
 */
@media (pointer: coarse) {
	.giis-input,
	.giis-interest input[type="email"],
	.giis-concession__form input,
	.giis-concession__form textarea,
	.giis-auth__card input[type="text"],
	.giis-auth__card input[type="password"],
	.giis-auth__card input[type="email"],
	.giis-searchform input[type="search"],
	.woocommerce input[type="text"],
	.woocommerce input[type="email"],
	.woocommerce input[type="tel"],
	.woocommerce input[type="password"],
	.woocommerce select,
	.woocommerce textarea,
	.wc-block-components-text-input input,
	.wc-block-components-select select {
		font-size: 16px;
	}
}

@media print {
	.giis-header, .giis-footer, .giis-shell__rail, .giis-lesson__rail, .giis-nav { display: none; }
	body { background: #fff; }
}