/* page-frame.css — everything that frames a page's content, shared by all of
 * them: the dot-burst menu, the logo bar, and the vertical spacing at the top
 * and bottom of a page.
 *
 * It was called nav.css, which was true when it held only the menu. It grew
 * the logo, then the padding that lifts the first section to the top of the
 * page, then the footer's spacing and the page-title rules -- all of them the
 * frame rather than the content, and none of them navigation.
 *
 * ── The menu ──────────────────────────────────────────────────────────────
 *
 * Previously copy-pasted into each page's inline <style>, where it had already
 * drifted: people/research/engage carried `text-align: left` on .nav-links
 * while publications/network/privacy did not, so the dropdown was aligned
 * differently depending on which page you were on. This file is the
 * left-aligned version, which was the deliberate one.
 *
 * index.html's copy was a strict subset -- it lacks .sub links and menu items
 * 5-8 -- so this superset serves it too; the extra rules match nothing there.
 *
 * Depends on --blue and --pink, defined in each page's :root.
 */

  /* ===== Unified dot-burst menu (shared across all pages) ===== */
  /* pointer-events:none on the container, auto on the parts that are actually
     visible. .nav is a fixed box 250px wide -- the width of the link panel --
     and as tall as that panel, which keeps its layout height while closed
     because it is hidden with opacity rather than display. Only the 68px toggle
     shows, but the whole box was taking the clicks: on the publications page
     the top three theme filters sat under it and could not be clicked at all,
     and filtering moved the list so a different three fell dead each time.
     .nav-links is already pointer-events:none until .nav.open turns it on. */
  .nav{position:fixed;top:2rem;left:2.5rem;z-index:50;display:flex;flex-direction:column;align-items:flex-start;gap:1rem;
    pointer-events:none}
  .nav-toggle{pointer-events:auto}
  /* The burst sits on a chip, because the complaint behind all of this was
     that a visitor did not know it was a menu -- and unlabelled, uncontained,
     over a photograph, it read as an ornament rather than a control. A round
     white ground with a shadow is the shape of a button, and says so without
     a word on it and without hover, which is the only signal a phone gets. */
  .nav-toggle{width:60px;height:60px;border:none!important;padding:0;cursor:pointer;
    border-radius:50%;flex:none;
    position:relative;display:grid;place-items:center;
    transition:background-color .15s linear,box-shadow .15s linear,transform .2s ease}

  /* Away from the top of the page the chip fades off and leaves the burst
     alone. It has already done its work by then -- it is there to be noticed
     on arrival, and a white disc pinned over the content for the rest of the
     page is just something in the way. The dots keep their own drawn shadow,
     so they still read against whatever scrolls under them.

     --chip goes 1 to 0 as the page scrolls, set from site-nav.js, and both the
     ground and the shadow are drawn from it. It tops out at .78 rather than 1:
     even at its most prominent the chip is a little translucent, so it sits on
     the hero photograph rather than punching a white hole in it. Not a class that flips at a
     threshold: that switched the whole chip on or off in one step, at one
     particular scroll position, which is a blink rather than a fade however
     long the transition on it is. Scrolling back up brings it in again just as
     gradually.

     Scroll position rather than a stored flag: the page already knows how far
     down it is, so nothing is written to the visitor's browser and there is
     nothing to disclose. It also means the chip is back at the top of every
     page, which is where a visitor who has lost the menu will look first. */
  .nav-toggle{background:rgba(255,255,255,calc(.78 * var(--chip, 1)))!important;
    box-shadow:0 2px 12px rgba(0,0,0,calc(.18 * var(--chip, 1)))!important}

  /* Hovered, focused, or open, it is a button again wherever you are on the
     page -- otherwise the one way to confirm it is still a control is to click
     a thing that looks like decoration. Setting --chip on the button itself
     beats the value inherited from .nav, and the transition above means it
     arrives as a fade rather than a snap. */
  .nav-toggle:hover,
  .nav-toggle:focus-visible,
  .nav.open .nav-toggle{--chip:1}
  .nav-toggle:hover{box-shadow:0 4px 18px rgba(0,0,0,.24)!important;transform:translateY(-1px)}
  .nav-toggle:focus-visible{outline:2px solid var(--blue);outline-offset:4px}
  /* The burst turns; the word stays the right way up. Rotating the button
     rotated its label with it. */
  .nav-toggle svg{transition:transform .55s cubic-bezier(.2,.7,.2,1)}
  .nav.open .nav-toggle svg{transform:rotate(225deg)}
  /* The word is a tooltip and nothing more: absolutely positioned so it does
     not widen the chip, and invisible until the button is hovered or focused.
     A phone never shows it, which is why the chip above has to carry the
     meaning on its own. */
  .nav-toggle-label{position:absolute;left:calc(100% + .5rem);top:50%;white-space:nowrap;
    font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.12em;
    color:#30363d;background:rgba(255,255,255,.94);border-radius:20px;padding:.34rem .72rem;
    box-shadow:0 2px 10px rgba(0,0,0,.14);line-height:1;pointer-events:none;
    opacity:0;transform:translateY(-50%) translateX(-.4rem);
    transition:opacity .18s ease,transform .18s ease}

  /* Where there is a pointer, the word is a tooltip: hidden until the burst is
     hovered or focused, so the page is not carrying a label it does not need.

     Where there is not -- a phone, a tablet -- the word simply stays. Nothing
     on a touch screen can reveal a tooltip, so hiding it there would hide it
     for good, from exactly the visitor who has the least room to go hunting.
     This is the one case where the two kinds of device genuinely want
     different things rather than one being a narrow version of the other.

     Declared visible above and hidden here, so a browser that understands
     neither query shows the word rather than losing it. */
  .nav-toggle:hover .nav-toggle-label,
  .nav-toggle:focus-visible .nav-toggle-label{opacity:1;transform:translateY(-50%)}
  /* Once the panel is open it has said what it is, and the tooltip is only
     something else hanging over the page. */
  .nav.open .nav-toggle-label{opacity:0!important}
  /* No drop-shadow. It was there to lift the dots off the home page's hero
     photo, and they read on it perfectly well without one; everywhere else it
     put a soft grey smudge on a pale background, which is all it ever did. */
  .nav-toggle svg{width:44px;height:44px;display:block;flex:none}
  .nav-toggle .b{fill:var(--blue)} .nav-toggle .p{fill:var(--pink)} .nav-toggle .c{fill:#fff}
  .nav-links{display:flex;flex-direction:column;align-items:stretch;gap:0;margin:0;padding:0;
    text-align:left;
    width:250px;opacity:0;transform:translateY(-8px);
    pointer-events:none;transition:opacity .4s ease,transform .4s ease}
  /* The panel grows with its search results. Capping .nav rather than the panel
     means the toggle's height is accounted for automatically: .nav is already a
     flex column, so min-height:0 lets the panel shrink and scroll inside itself
     instead of running off the bottom of the window. */
  .nav{max-height:calc(100vh - 4rem)}
  .nav-links{min-height:0;overflow-y:auto}
  .nav.open .nav-links{opacity:1;transform:none;pointer-events:auto;
    background:#fff;border-radius:6px;padding:.25rem 1.1rem;
    box-shadow:0 6px 24px rgba(0,0,0,.22)}
  .nav-links a{text-decoration:none;color:#30363d;text-transform:uppercase;letter-spacing:.08em;
    text-align:left;
    font-size:.82rem;font-weight:600;white-space:nowrap;
    padding:.7rem 0;
    opacity:0;transform:translateY(4px);
    transition:color .2s,opacity .4s,transform .4s}
  /* No horizontal rules anywhere in the panel. The entries were separated by
     hairlines, which since the disclosure was added had been drawn on exactly
     one entry -- PAPERS, the only page with no sections and so the only link
     still a direct child of .nav-links. Padding and the indent on sub-items
     carry the structure; the lines only added noise. */
  .nav.open .nav-links a{opacity:1;transform:none}
  /* Stagger by entry, for the same reason: the link inside a .nav-group is
     always its row's first child, so counting <a> children put every entry
     with sections on the same delay. Each pair covers both forms an entry can
     take -- a bare <a>, or a .nav-group holding one. Sub-links inherit their
     entry's delay, so a group fades in as a unit. */
  .nav.open #navLinks > :nth-child(1),
  .nav.open #navLinks > :nth-child(1) a{transition-delay:.05s}
  .nav.open #navLinks > :nth-child(2),
  .nav.open #navLinks > :nth-child(2) a{transition-delay:.11s}
  .nav.open #navLinks > :nth-child(3),
  .nav.open #navLinks > :nth-child(3) a{transition-delay:.17s}
  .nav.open #navLinks > :nth-child(4),
  .nav.open #navLinks > :nth-child(4) a{transition-delay:.23s}
  .nav.open #navLinks > :nth-child(5),
  .nav.open #navLinks > :nth-child(5) a{transition-delay:.29s}
  .nav-links a:hover{color:var(--blue)}
  /* Sub-links inside the panel (submenu items) */
  .nav-links a.sub{text-transform:none;letter-spacing:.02em;font-size:.74rem;font-weight:400;
    padding:.45rem 0 .45rem 1.1rem;color:#5a616b}
  .nav-links a.sub:hover{color:var(--blue)}
  /* Each entry that has sections becomes a disclosure, opened only by its
     toggle button. Neither hover nor focus is a trigger.

     Hover was disorienting -- the menu is a small target and panels opened as
     the pointer crossed them. :focus-within was worse: clicking the toggle
     focuses it, so the group matched :focus-within and the panel could not be
     closed again by the very button meant to close it.

     The toggle is a real <button>, so it is already reachable and operable
     from the keyboard with Enter or Space; it carries aria-expanded and
     aria-controls. The entry for the current page starts open. */
  .nav-group{display:block}
  .nav-row{display:flex;align-items:center;gap:.25rem}
  .nav-row a{flex:1 1 auto}
  .nav-sub-toggle{
    flex:0 0 auto;background:none;border:0;padding:.35rem .2rem;margin:0;
    cursor:pointer;color:#5a616b;font-size:.7rem;line-height:1;
    transition:transform .2s ease,color .2s ease}
  .nav-sub-toggle:hover{color:var(--blue)}
  /* No focus ring around the caret -- a box drawn round a small glyph is
     visually noisy. Keyboard focus is still shown, as the same colour change
     hover uses plus a slight scale, so the indicator is not lost. */
  .nav-sub-toggle:focus{outline:none}
  .nav-sub-toggle:focus-visible{outline:none;color:var(--blue);transform:scale(1.25)}
  .nav-group.is-open .nav-sub-toggle:focus-visible{transform:rotate(180deg) scale(1.25)}
  .nav-group.is-open .nav-sub-toggle{transform:rotate(180deg)}
  /* Sub-items stack. They used to be direct children of .nav-links, which is a
     flex column, so each got its own row for free; inside .nav-sub they are
     plain inline anchors and would otherwise run side by side. */
  .nav-sub{display:none;flex-direction:column;align-items:stretch}
  .nav-group.is-open .nav-sub{display:flex}
  .nav-sub a{display:block;width:100%}

  /* Sub-links take their text from each section's own <h2>, which on Research
     is a full sentence. The top-level entries stay on one line; these wrap
     instead, so a long heading does not stretch the panel across the page. */
  /* The panel has a fixed width, so opening a group changes only its height.
     Before this, Research's sentence-length headings widened the whole menu as
     it expanded, which was disorienting. */
  .nav-links a.sub{white-space:normal;max-width:100%;line-height:1.3}
  /* Search, at the foot of the menu. Its results are links, so links.css would
     otherwise underline them and paint them the link colour; the selectors here
     carry a class and so outrank it. */
  /* margin-bottom:0 undoes main.css's `form { margin: 0 0 2rem }`, which put
     2rem of nothing between the field and the foot of the menu panel. */
  .nav-search{display:flex;flex-direction:column;gap:.35rem;margin:.6rem 0 0;
    padding:.8rem 0 0;border-top:1px solid rgba(48,54,61,.28)}
  .nav-search input{font:inherit;font-size:.82rem;width:100%;padding:.4rem .55rem;color:#30363d;
    background:#fff;border:1px solid rgba(48,54,61,.28);border-radius:4px}
  .nav-search input:focus-visible{outline:2px solid var(--link);outline-offset:1px}
  /* The magnifying glass stands in for the label, so it must not read as
     louder than what gets typed over it: same family, a size up because U+2315
     draws small, and the muted grey used elsewhere in this menu -- lighter than
     the field's own #30363d. opacity:1 because Firefox dims placeholders by
     default, which would put it lighter again than intended. */
  .nav-search input::placeholder{color:#5a616b;opacity:1;font-size:1.3em}
  /* Both of these are empty until something is typed. Hidden rather than merely
     blank, so the panel does not carry a band of nothing under the field. */
  .nav-search-status{margin:0;font-size:.68rem;color:#5a616b}
  .nav-search-status:empty{display:none}
  .nav-search-results{list-style:none;margin:0;padding:0;overflow-y:auto;
    max-height:min(15rem,38vh)}
  .nav-search-results:empty{display:none}
  /* .nav-links a sets uppercase, letter-spacing, weight 600 and nowrap for the
     menu's own entries. A publication title in caps is unreadable and a long
     one would run out of the panel, so a result undoes all four. The staggered
     fade-in the menu entries use is undone too: results appear as you type, and
     should not wait their turn. */
  .nav-search-results a{display:block;padding:.35rem .45rem;border-radius:4px;
    text-decoration:none;text-transform:none;letter-spacing:normal;font-weight:400;
    white-space:normal;overflow-wrap:anywhere;transition:none!important;
    transition-delay:0s!important}
  .nav-search-results a:hover,
  .nav-search-results a.is-active,
  .nav-search-results a:focus-visible{background:rgba(48,54,61,.08);outline:none}
  .nav-search-results .r-kind{display:block;font-size:.57rem;letter-spacing:.11em;
    text-transform:uppercase;color:#7a8089}
  /* 600, not 500: the label is meant to sit a little heavier than the result's
     own 400, and Source Sans Pro has no 500 -- CSS matches a missing 500 down
     to 400, so it was rendering at exactly the weight it meant to stand out
     from. The family goes 200, 300, 400, 600, 700, 900. */
  .nav-search-results .r-label{display:block;font-size:.8rem;line-height:1.3;color:#30363d;
    font-weight:600}
  /* A theme's sub-line is its whole description, which is several sentences.
     Clamped so eight results still fit the panel; the full text stays in the
     markup for a screen reader. */
  .nav-search-results .r-sub{display:-webkit-box;-webkit-box-orient:vertical;
    -webkit-line-clamp:3;line-clamp:3;overflow:hidden;
    font-size:.68rem;line-height:1.3;color:#5a616b}

  @media (max-width:860px){
    .nav{top:1.25rem;left:1.25rem}
    .nav-links{width:200px}
    /* .72rem lands at 10.6px on a phone, which is below the size anything
       should be set in. */
    .nav-links a{font-size:.82rem;letter-spacing:.05em}
    .nav-links a.sub{font-size:.78rem}
  }

  /* Small screens: the menu button and the logo are a pair, tucked into the
     two top corners, and sized to match each other. The button's glyph is
     30px; the logo is set to the width that makes it the same height, since
     its artwork is 987:252. */
  @media (max-width:600px){
    .nav{top:.6rem;left:.6rem;gap:.5rem}
    .nav-toggle{width:34px;height:34px}
    .nav-toggle svg{width:30px;height:30px}
  }

  @media (max-width:430px){
    .nav{top:.5rem;left:.5rem}
    .nav-toggle{width:30px;height:30px}
    .nav-toggle svg{width:26px;height:26px}
  }

  /* The caret was a 12px-wide target: too small to hit, and the only way to
     open a page's sections. */
  .nav-sub-toggle{min-width:32px;min-height:32px;display:flex;align-items:center;justify-content:center}
  .nav-links a.sub{padding-top:.55rem;padding-bottom:.55rem}
  @media (prefers-reduced-motion:reduce){
    .nav-toggle,.nav-links,.nav-links a{transition:none!important}
  }

	/* Site logo — a normal in-flow block at the top of the page, so it
	   scrolls away with the content. The dot-burst menu stays fixed; the logo
	   deliberately does not, which is why it lives outside .nav in the markup:
	   a child of a fixed element cannot scroll independently of it, whatever
	   position it is given. */
	.site-logo-bar {
		text-align: right;
		padding: 0.6rem 2.5rem 0 1rem;
		line-height: 0;
	}

	.site-logo {
		display: inline-block;
		line-height: 0;
	}

	.site-logo img {
		display: block;
		width: 440px;
		max-width: 78vw;
		height: auto;
		/* The SVG canvas is 16:9, but the artwork occupies only the middle 39%
		   of its height -- roughly 30% is transparent above and below. Left
		   alone, a 440px-wide logo is 248px tall to show 96px of artwork, and
		   the dead band reads as a huge gap above the page heading. Cropping
		   to the artwork's own ratio removes it. The hero logo on index.html
		   uses a different selector and is unaffected. */
		aspect-ratio: 987 / 252;
		object-fit: cover;
		object-position: center;
	}

	/* Smaller and tighter as the viewport narrows: on a phone the logo should
	   sit unobtrusively in the upper right, not dominate the first screen.
	   The dot-burst menu is fixed at the upper left, so the two never meet.
	   The vw cap keeps it modest on very narrow screens regardless of the px
	   value. */
	@media (max-width: 860px) {

		.site-logo-bar { padding: 0.5rem 1.25rem 0 1rem; }

		.site-logo img { width: 260px; max-width: 46vw; }

	}

	/* Tucked into the opposite corner from the menu, at the same inset, and
	   sized to the same height: 118px of a 987:252 logo is 30px tall, which is
	   the menu glyph. The two read as a pair rather than as two unrelated
	   marks of different weights. */
	/* The right inset is 0, not 0.6rem, and the image is pulled a little
	   further still. The artwork does not reach the edge of its own svg: the
	   aspect-ratio crop above takes the transparent bands off the top and
	   bottom but leaves a few pixels at the sides, so padding alone left the
	   barcode sitting 19px from the screen edge while the menu glyph opposite
	   sat at 8. The negative margin is measuring the difference, not guessing
	   at it. */
	@media (max-width: 600px) {

		.site-logo-bar { padding: 0.6rem 0 0 0.5rem; }

		.site-logo img { width: 118px; max-width: 40vw; margin-right: -4px; }

	}

	@media (max-width: 430px) {

		.site-logo-bar { padding: 0.5rem 0 0 0.5rem; }

		.site-logo img { width: 102px; max-width: 38vw; margin-right: -4px; }

	}

	/* The first section on a page sits directly beneath the logo, so it does
	   not need the 7rem top padding that .wrapper.style1 > .inner uses to
	   separate sections from one another. Only padding-top is overridden, so
	   the responsive left/right/bottom values in main.css still apply.
	   index.html is unaffected: its first child is .hero-scroll, not .wrapper. */
	#wrapper > .wrapper:first-child > .inner {
		padding-top: 1.5rem;
	}

	@media (max-width: 980px) {

		#wrapper > .wrapper:first-child > .inner {
			padding-top: 1.25rem;
		}

	}

	/* Once the page is wide enough that the logo and the fixed menu both sit
	   in the margins, beside the content rather than over it, the logo no
	   longer needs a row of its own. Taking it out of flow lets the page
	   heading start at the top, level with the logo, instead of below a band
	   of empty space about 150px deep.

	   1440px is where that becomes true. The content column is 64rem wide and
	   centred, so the margins grow only as fast as the viewport: below 1440
	   the menu overlaps the column's left edge and a centred heading reaches
	   under the logo, and the stacked layout reads better there anyway. Above
	   it the heading clears the logo by some 70px.

	   The padding that replaces the logo's row is what keeps full-width text
	   below the logo. Only the heading, which is narrow, rises beside it. */
	@media (min-width: 1440px) {

		/* Level with the menu, which is fixed at the same 2rem offset, and
		   about as tall as it -- the two read as a pair across the top of the
		   page rather than as two unrelated marks at different heights. Tight
		   to the right edge; the menu's 2.5rem inset is not mirrored, because
		   the menu is a small round glyph and the logo is a wide block. */
		.site-logo-bar {
			position: absolute;
			top: 2rem;
			right: 0;
			padding: 0 1rem 0 0;
		}

		.site-logo img {
			width: 270px;
		}

		/* The content starts at the top. Only enough padding is left to keep a
		   full-width line of text clear of the logo's lower edge; the heading
		   is the one thing that rises beside it. */
		#wrapper > .wrapper:first-child > .inner {
			padding-top: 2rem;
		}

		/* Which means the heading has to stop before the logo does. It used to
		   be short enough that it always did, and a longer one ran underneath:
		   the logo is a fixed 270px block pinned to the right, while the
		   content column and the heading's size both step up at breakpoints, so
		   the first line rewraps and lands differently against it. Measured
		   across widths the collision came and went -- 54px at 1440, clear at
		   1550, 90px at 1700, clear at 1920 -- so no choice of breakpoint fixes
		   it and the heading has to be unable to reach.

		   100% is the content column. Half of it, plus half the viewport, is
		   the distance from the heading's left edge to the page's right edge;
		   taking off the logo and 2rem leaves the heading clear of it at every
		   width, and min() stops the cap once the column is narrower than that
		   anyway. */
		#wrapper > .wrapper:first-child h1 {
			max-width: min(100%, calc(50% + 50vw - 270px - 3rem));
		}

	}

	/* The footer is a .wrapper.style1 too, so it inherits the padding meant to
	   separate stacked sections: 5rem above and 5rem below, the latter leaving
	   80px of blank page below the copyright line with nothing after it. The
	   section above it ends with 3rem of its own, so the gap over the footer
	   came to about 150px on every page. Only the vertical padding is
	   overridden, so the responsive left/right values still apply. */
	/* The footer's rows want more air than the 1.5rem that separated stacked
	   sections. The icon row is 50px of round buttons, and 28px above and below
	   it read as cramped next to the openness of the page it follows. The same
	   value above the icons, between the rows, and below the credits, so the
	   footer is evenly spaced rather than evenly cramped. */
	#wrapper > footer.wrapper > .inner {
		padding-top: 2.25rem;
		padding-bottom: 2.25rem;

		/* A grid at every width, one column or two. The two-column rule below
		   used to bring the grid with it, so on a narrow screen the rows fell
		   back to whatever margins the elements happened to carry -- and the
		   icon row, whose own margin is dropped here, ended up sitting almost
		   on top of the first address. One row gap, everywhere. */
		display: grid;
		justify-items: center;
		align-items: start;
		gap: 2.25rem 2.5rem;
	}

	/* The icons above the addresses, the credits below them: both are about
	   the site rather than about a place, and neither belongs in a column of
	   one. Their own margins go, so the grid's row gap is the only thing
	   setting the space between rows. */
	#wrapper > footer.wrapper > .inner > ul.icons,
	#wrapper > footer.wrapper > .inner > p {
		grid-column: 1 / -1;
		margin: 0;
	}

	/* The footer is small print and now looks like it, which sets it apart
	   from the page above without a rule or a background, and buys the
	   addresses enough width to keep a line to a line. In rem, so it rides the
	   base size down through the site's breakpoints rather than staying put
	   while everything around it shrinks. */
	#wrapper > footer.wrapper > .inner p {
		font-size: 0.75rem;
	}

	/* The credits are smaller again: a line about the site itself, under the
	   two places the group actually is. */
	#wrapper > footer.wrapper > .inner p.credits {
		font-size: 0.65rem;
	}

	/* Three paragraphs now: the site's own credits, and a postal address for
	   each of the two institutes. Stacked they make a tall column of small
	   print, and one address sitting under the other reads as though the
	   second were a continuation of the first. Side by side they read as what
	   they are -- two places.

	   500px, which is far lower than it looks like it should be. The site's
	   base font size steps down as the page narrows, and the addresses are set
	   in rem, so they shrink with it -- the pair keeps fitting long after a
	   fixed-size version would have stopped. Measured rather than guessed:
	   every line still holds at 480, and "University of Oxford" is the first
	   to wrap somewhere below that, so the line goes just above it with a
	   little room for a substituted font. Two earlier guesses, 980 and 737,
	   both left the footer stacked and twice as tall on screens with ample
	   room for two columns.

	   The icon list is a flex item too, so it is given the whole width to keep
	   it above the row rather than in it.

	   Two equal columns, one institute in each, centred in its own. Sizing
	   them to their content instead makes two blocks of different widths
	   huddled in the middle, which does not read as columns.

	   The columns are capped rather than taking half of .inner each. At half
	   of a wide page the two addresses end up a screen apart, each marooned in
	   the middle of its own half, and read as two unrelated things. Capped and
	   centred as a pair they stay a pair however wide the window is. 17rem is
	   a little over the widest line either address has, and in rem so it
	   shrinks with the type through the breakpoints rather than staying put.

	   Nothing here wraps a line of an address, because neither is wider than
	   half: the Max Planck name is broken after "of" in the partial, by hand,
	   since it is the one line long enough to need it and a machine would
	   break it in the wrong place. */
	@media (min-width: 500px) {

		#wrapper > footer.wrapper > .inner {
			grid-template-columns: repeat(2, minmax(0, 17rem));
			justify-content: center;
		}

		/* One address per column; the icons and the credits still span both. */
		#wrapper > footer.wrapper > .inner > p {
			grid-column: auto;
		}

		#wrapper > footer.wrapper > .inner > p.credits {
			grid-column: 1 / -1;
		}

	}

	/* The last section before the footer has nothing below it to be separated
	   from. (:nth-last-child(2) rather than :last-of-type -- the footer is the
	   last child, and is itself a .wrapper.) */
	#wrapper > .wrapper:nth-last-child(2) > .inner {
		padding-bottom: 1.5rem;
	}

	/* .divided draws a hairline above every section, including the footer, so
	   each page ended with a rule across it. The footer is already set apart by
	   being the footer. */
	#wrapper.divided > footer {
		box-shadow: none !important;
	}

	/* A page title is a heading and nothing else, so it needs none of the 3rem
	   that separates a section of content from the next. Without this the
	   heading floated over 110px of empty page.

	   (.wrapper.style1 is repeated in these selectors on purpose: the rule
	   being overridden is `.wrapper.style1 > .inner`, three classes, so two
	   would lose to it however late they appear.) */
	.wrapper.style1.page-title > .inner {
		padding-bottom: 0;
	}

	.page-title + .wrapper.style1 > .inner {
		padding-top: 1.5rem;
	}

	/* No rule directly under a page title. .divided draws one above every
	   section after the first, but a title is not a section of content -- it
	   is the head of the page, and on Engage it carries the photograph too.
	   A line between that and the first heading cuts the top of the page in
	   half. */
	#wrapper.divided > .page-title + * {
		box-shadow: none !important;
	}