/* ------------------------------------------------------------------------
   Plug-in Solar East Midlands

   The design source is what the six counties are built out of: Nottingham
   and Leicester red brick, Derbyshire limestone, and the ironstone belt that
   runs up through Northamptonshire and Rutland into south Leicestershire.
   Three decisions carry the site and nothing else is allowed to compete.

   1. THE ARCH is the signature device. Every object that holds content on
      this site (the wordmark plate, the form, every photograph, every card,
      every section head, the nav panel, the page aside, the closing tile) is
      topped by a shallow segmental arch, the brick arch that sits over every
      window and every door of a Midlands terrace. It is drawn as an
      elliptical radius on the two top corners of a fully bordered object, so
      it is a silhouette rather than an edge treatment: the object still
      closes on all four sides. Every other corner on this site is square, so
      the glyphs stay square capped and mitred.

   2. THE OVERSAIL is the seam device, and it is the only one. There is not a
      single rule, band, hairline or jog at a seam anywhere on this site.
      Instead the first object of every course rises 56px into the course
      above it, so the boundary is crossed by an object rather than marked by
      a line. That is how a brick course oversails the wall below it. The
      grounds change as well, but the ground change is the page's rhythm and
      the oversail is the seam: they are never joined by a third device.

   3. THE FIRING is the one ambient motion. Ironstone is iron in the clay and
      it only goes red in the kiln, so the warm light on the dark hero course
      breathes rather than travels: one very wide, very soft ironstone glow
      that swells and settles on a 26 second cycle. Scale and opacity only,
      nothing behind the headline, and it stops for anyone who has asked for
      less movement.

   Texture is used once and once only: a non directional grain at 400px on
   the two ink courses. No object standing on those courses is textured.
   ------------------------------------------------------------------------ */

:root {
  /* Seven roles. ink: the dark courses, and all text on light grounds.
     cream: the page. marl: the alternate light ground, measured at 1.27
     against cream, which is where two grounds separate for the eye without
     reading as banding. ironstone: the highlight and the closing course,
     the colour of the stone in the south of the region. green: ACTION only,
     never decoration. slate: information, the colour of Swithland slate.
     muted: secondary text. */
  --ink: #221A16;
  --cream: #FBF6EC;
  --marl: #E9DCC4;
  --ironstone: #A94A24;
  --green: #1D6B3E;
  --slate: #4B5560;
  --muted: #63534A;

  /* Derived, not new colours. iron-text is the highlight darkened so it
     carries at body size on both light grounds; iron-lit is the same hue
     lifted so it carries on ink. ink-2 is one step up for an object standing
     on an ink course. hair is component furniture only and never a seam. */
  --iron-text: #963F1D;
  --iron-lit: #E08A5A;
  --green-lit: #7FD3A0;
  --green-press: #14512E;
  --ink-2: #2E231D;
  --hair: #D3C2A6;
  --field: #FFFDF8;

  --display: "Public Sans", "Helvetica Neue", Arial, sans-serif;
  --body: "Lato", "Helvetica Neue", Arial, sans-serif;

  --wrap: 1280px;   /* three cards land at 409px across at 1440 */
  --gut: 26px;
  --arch: 50% 50% 0 0 / 30px 30px 0 0;   /* the segmental arch */
  --arch-sm: 50% 50% 0 0 / 18px 18px 0 0;
  --sail: 56px;     /* how far a course's first object rises into the one above */
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font: 400 17px/1.62 var(--body);
  overflow-x: hidden;
}

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

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 800;
  line-height: 1.06;
  margin: 0;
  text-wrap: balance;
  letter-spacing: -0.015em;
}

p { margin: 0 0 1.05em; }
p:last-child { margin-bottom: 0; }

a { color: var(--green); text-decoration: none; font-weight: 700; }
a:hover { color: var(--green-press); }

:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 50;
  background: var(--ink); color: var(--cream); padding: 14px 20px;
}
.skip:focus { left: 0; }

.ico { flex: none; vertical-align: -3px; }

/* --------------------------------------------------------------- masthead */
/* A cream bar with the nav in it, and the wordmark carried on an ironstone
   plate that hangs below the bar into the course underneath. */

.mast {
  position: relative;
  z-index: 20;
  background: var(--cream);
}
.mast .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 22px; min-height: 92px;
}

.brand {
  display: block;
  position: relative;
  margin-bottom: calc(-1 * var(--sail));
  background: var(--ironstone);
  border: 2px solid var(--ink);
  /* a segmental arch rises in proportion to its span, so a narrow object like
     the wordmark takes a shallower rise than a 700px plate, or it domes */
  border-radius: 50% 50% 0 0 / 15px 15px 0 0;
  color: var(--cream);
  font-family: var(--display); font-weight: 800;
  font-size: 1.32rem; line-height: 1.1; letter-spacing: -0.02em;
  padding: 22px 26px 18px;
  min-width: 0;
}
.brand b { display: block; font-weight: 800; color: #FFE4D2; font-size: 1.06rem; }
.brand:hover { color: #FFF; }

.nav { display: flex; align-items: center; gap: 8px; }
.nav > a, .drop > button {
  font-family: var(--display); font-weight: 700; font-size: 1rem;
  color: var(--ink); background: none; border: 0; cursor: pointer;
  padding: 13px 14px; display: inline-flex; align-items: center; gap: 7px;
  min-height: 44px;
}
.nav > a:hover, .drop > button:hover { color: var(--iron-text); }
/* the nav rule above zeroes background and border, so the action button has
   to answer it at the same specificity or it loses its own ground */
.nav > a.cta-top {
  background: var(--green); color: var(--cream);
  border: 2px solid var(--ink); padding: 13px 20px;
}
.nav > a.cta-top:hover { background: var(--green-press); color: var(--cream); }

.drop { position: relative; }
.drop .ico { transition: transform .18s ease; }
.drop[data-open="true"] .ico { transform: rotate(180deg); }
.drop .panel {
  position: absolute; top: calc(100% + 14px); left: 0; width: 430px;
  background: var(--cream); border: 2px solid var(--ink);
  border-radius: var(--arch);
  padding: 34px 26px 22px;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.drop[data-open="true"] .panel { opacity: 1; visibility: visible; transform: none; }
.panel .strap { font-size: .95rem; color: var(--muted); margin: 0 0 16px; }
.panel ul { list-style: none; margin: 0; padding: 0; }
.panel li + li { margin-top: 4px; }
.panel li a {
  display: block; padding: 11px 12px; color: var(--ink);
  font-family: var(--display); font-weight: 700; font-size: 1rem;
}
.panel li a span { display: block; font-family: var(--body); font-weight: 400; font-size: .92rem; color: var(--muted); margin-top: 3px; }
.panel li a:hover { background: var(--marl); }
.panel .all {
  display: block; margin-top: 16px; padding-top: 16px;
  color: var(--green); font-size: .97rem;
}

.burger {
  display: none; font-family: var(--display); font-weight: 700; font-size: 1rem;
  background: var(--ink); color: var(--cream); border: 2px solid var(--ink);
  padding: 13px 18px; cursor: pointer; min-height: 44px;
}
.mobile { display: none; }

/* ----------------------------------------------------------------- courses */

.sec { position: relative; padding: 104px 0 96px; }
.sec--cream { background: var(--cream); }
.sec--marl { background: var(--marl); }
.sec--ink, .sec--iron { color: var(--cream); }
.sec--ink { background: var(--ink); }
.sec--iron { background: var(--ironstone); }
.sec--ink a, .sec--iron a { color: var(--green-lit); }
.sec--ink .attrib, .sec--iron .attrib { color: #C8B9AC; }

/* The one texture: a non directional 400px grain, and only on the ink
   courses. It is held down under a flat wash of the ink token so it reads as
   grain in the surface rather than as mottling laid on top, and the wash
   carries a tonal shift inside the same hue, which is the only gradient on
   the site. Objects standing on these courses stay flat and untextured. */
.sec--ink, .hero, .foot {
  background-image:
    linear-gradient(178deg, rgba(46, 35, 29, .93) 0%, rgba(26, 19, 16, .95) 100%),
    url("/assets/tex/subtle-grunge.png");
  background-repeat: no-repeat, repeat;
  background-size: 100% 100%, 400px 400px;
}

/* ---------------------------------------------------- the arch, everywhere */

.arch { border-radius: var(--arch); overflow: hidden; }

/* A plate is the site's one object type: a fully bordered field with an
   arched head. Every heading, every card, the form and the aside are one.
   A plate always restates its own text colour, because a plate standing on
   an ink or ironstone course would otherwise inherit cream type. */
.plate {
  background: var(--cream);
  color: var(--ink);
  border: 2px solid var(--ink);
  border-radius: var(--arch);
}
.plate a { color: var(--green); }
.plate a:hover { color: var(--green-press); }
.plate--dark { background: var(--ink-2); border-color: var(--iron-text); color: var(--cream); }

/* THE OVERSAIL. The first object of a course rises into the course above.
   This is the site's only seam device. Never add a rule or a band to a seam;
   the object crossing it is the seam. */
.sail { margin-top: calc(-1 * (104px + var(--sail))); position: relative; z-index: 3; }

.head {
  max-width: 760px;
  padding: 44px 42px 38px;
  margin-bottom: 54px;
}
.head h2 { font-size: clamp(2.25rem, 3.4vw, 3rem); }
.head h2 em { font-style: normal; color: var(--iron-text); }
.plate--dark h2 em { color: var(--iron-lit); }
.head p { margin: 18px 0 0; font-size: 1.1rem; color: var(--muted); max-width: 60ch; }
.plate--dark p { color: #D8CABC; }

/* -------------------------------------------------------------------- hero */

.hero {
  position: relative;
  background-color: var(--ink);
  color: var(--cream);
  padding-top: 96px;
  overflow: hidden;
}
.hero .wrap { position: relative; z-index: 2; }

/* THE FIRING: one wide soft ironstone glow that breathes. Scale and opacity
   only, sat low and right so it never falls behind the headline. */
.firing {
  position: absolute; z-index: 1;
  right: -14%; bottom: -6%; width: 78vw; height: 78vw; max-width: 1150px; max-height: 1150px;
  background: radial-gradient(circle at 50% 50%,
    rgba(200, 96, 46, .40) 0%, rgba(169, 74, 36, .22) 38%, rgba(169, 74, 36, 0) 72%);
  transform: scale(1);
  animation: firing 26s ease-in-out infinite;
  pointer-events: none;
}
@keyframes firing {
  0%, 100% { transform: scale(1); opacity: .82; }
  50% { transform: scale(1.085); opacity: 1; }
}

.hero-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) 500px; gap: 56px;
  align-items: start;
}
.hero h1 {
  font-size: clamp(2.75rem, 5.2vw, 4.5rem);
  max-width: 15ch;
}
.hero h1 em { font-style: normal; color: var(--iron-lit); }
.hero .lede {
  font-size: 1.24rem; line-height: 1.55; color: #E3D6C9;
  max-width: 46ch; margin-top: 26px;
}

.chips { list-style: none; margin: 34px 0 0; padding: 0; display: grid; gap: 12px; }
.chips li {
  display: flex; gap: 13px; align-items: flex-start;
  font-size: 1.02rem; color: var(--cream); min-width: 0;
}
.chips .ico { color: var(--green-lit); margin-top: 3px; }

.hero-band {
  position: relative; z-index: 2;
  margin-top: 72px;
  height: 440px;
  overflow: hidden;
}
.hero-band img { width: 100%; height: 100%; object-fit: cover; }
/* extra bottom padding equal to the sail rise, so the next course's plate
   climbs into blank ground here and never over the caption text */
.band-note { background: var(--ink); color: #C8B9AC; font-size: .93rem; padding: 16px 0 calc(26px + var(--sail)); }
.band-note p { margin: 0; }

/* -------------------------------------------------------------------- form */

.form-card { padding: 34px 32px 30px; }
.form-card h3 { font-size: 1.62rem; }
.form-card .said { margin: 14px 0 24px; color: var(--muted); font-size: 1.02rem; }
.plate--dark .said { color: #D8CABC; }

.f-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
label.f { display: block; margin-bottom: 16px; min-width: 0; }
label.f span {
  display: block; font-family: var(--display); font-weight: 700;
  font-size: .93rem; margin-bottom: 7px;
}
label.f input, label.f select, label.f textarea {
  width: 100%; font: 400 16px/1.5 var(--body); color: var(--ink);
  background: var(--field); border: 2px solid var(--ink);
  padding: 12px 13px; min-height: 46px;
}
label.f textarea { resize: vertical; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.btn {
  display: inline-block; font-family: var(--display); font-weight: 800;
  font-size: 1.04rem; background: var(--green); color: var(--cream);
  border: 2px solid var(--ink); padding: 15px 26px; cursor: pointer;
  min-height: 48px;
}
.btn:hover { background: var(--green-press); color: var(--cream); }
/* the action button keeps cream type on every course, including the two ink
   ones and the ironstone closer, where links are otherwise lifted green */
.sec--ink a.btn, .sec--iron a.btn, .hero a.btn, .foot a.btn, .plate a.btn { color: var(--cream); }
.sec--ink a.btn:hover, .sec--iron a.btn:hover, .hero a.btn:hover, .foot a.btn:hover, .plate a.btn:hover { color: var(--cream); }
.form-card .btn { width: 100%; }
.form-card .after { margin: 18px 0 0; font-size: .92rem; color: var(--muted); }
.plate--dark .after { color: #C8B9AC; }

/* ------------------------------------------------------------ county rows */

.two { display: grid; grid-template-columns: minmax(0, 1fr) 460px; gap: 56px; align-items: start; }
.two--flip { grid-template-columns: 460px minmax(0, 1fr); }

.rows { list-style: none; margin: 0; padding: 0; }
.rows li { padding: 26px 0; }
.rows li:first-child { padding-top: 0; }
.rows li:last-child { padding-bottom: 0; }
.rows h3 { font-size: 1.34rem; color: var(--iron-text); }
.rows p { margin: 8px 0 0; color: var(--muted); max-width: 56ch; }

.stack > * + * { margin-top: 26px; }

figure { margin: 0; }
figure .arch { border: 2px solid var(--ink); }
.sec--ink figure .arch, .sec--iron figure .arch, .hero figure .arch { border-color: var(--iron-text); }
figcaption {
  margin-top: 13px; font-size: .93rem; color: var(--muted); line-height: 1.5;
}
.sec--ink figcaption, .sec--iron figcaption, .hero figcaption { color: #C8B9AC; }

.attrib { font-size: .9rem; color: var(--muted); margin-top: 26px; }

/* ------------------------------------------------------------------- cards */

.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gut); }
.card { display: flex; }
.card > a { display: flex; flex-direction: column; width: 100%; color: var(--ink); font-weight: 400; }
.card-img { height: 300px; overflow: hidden; }
.card-img img { width: 100%; height: 100%; object-fit: cover; }
.card-body { padding: 26px 26px 28px; display: flex; flex-direction: column; flex: 1; }
.card-body h3 { font-size: 1.34rem; }
.card-body p { margin: 12px 0 0; color: var(--muted); font-size: 1rem; }
.card .go {
  margin-top: auto; padding-top: 20px; display: inline-flex; align-items: center; gap: 8px;
  color: var(--green); font-family: var(--display); font-weight: 700; font-size: .99rem;
}
.card > a:hover .go { color: var(--green-press); }

/* -------------------------------------------------------------- the figures */

.bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 26px; }
.bars li { min-width: 0; }
.bar-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.bar-head b { font-family: var(--display); font-weight: 700; font-size: 1.05rem; }
.bar-head span {
  font-family: var(--display); font-weight: 800; font-size: 1.5rem;
  color: var(--iron-text); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.bar-head span i { font-style: normal; font-size: .82rem; color: var(--muted); font-weight: 700; }
.bar-track { margin-top: 10px; height: 26px; background: var(--cream); border: 2px solid var(--ink); }
.sec--marl .bar-track { background: var(--field); }
.bar-fill { height: 100%; background: var(--ironstone); }

.figures { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gut); }
.fig-plate { padding: 30px 28px; text-align: left; }
.fig-plate .n {
  font-family: var(--display); font-weight: 800; font-size: 2.9rem;
  color: var(--iron-text); line-height: 1; margin: 0;
  font-variant-numeric: tabular-nums;
}
.fig-plate .n small { display: block; font-size: .92rem; color: var(--muted); font-weight: 700; margin-top: 8px; }
.fig-plate p { margin: 16px 0 0; font-size: 1rem; color: var(--muted); }

/* --------------------------------------------------------------- questions */

.qs { display: grid; gap: 14px; }
.q { background: var(--cream); border: 2px solid var(--ink); border-radius: var(--arch-sm); overflow: hidden; }
.sec--marl .q { background: var(--field); }
.q summary {
  list-style: none; cursor: pointer; padding: 22px 26px;
  font-family: var(--display); font-weight: 700; font-size: 1.13rem;
  display: flex; justify-content: space-between; align-items: center; gap: 18px;
  min-height: 44px;
}
.q summary::-webkit-details-marker { display: none; }
.q summary .ico { color: var(--iron-text); transition: transform .2s ease; }
.q[open] summary .ico { transform: rotate(45deg); }
.q .a { padding: 0 26px 24px; color: var(--muted); max-width: 70ch; }

/* ------------------------------------------------------------- the closer */

.closer-grid { display: grid; grid-template-columns: minmax(0, 1fr) 520px; gap: 0; align-items: end; }
.closer-grid .arch { border: 2px solid var(--ink); }
.closer-grid .arch img { width: 100%; height: 420px; object-fit: cover; }
.closer-plate { padding: 40px 38px 38px; margin-left: -56px; margin-bottom: 44px; position: relative; z-index: 2; }
.closer-plate h2 { font-size: clamp(1.9rem, 2.6vw, 2.4rem); }
.closer-plate p { margin: 16px 0 26px; color: var(--muted); }

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

.foot { background: var(--ink); background-color: var(--ink); color: #D8CABC; padding: 0 0 54px; }
.foot .mark {
  display: inline-block;
  background: var(--ironstone); border: 2px solid var(--iron-text);
  border-radius: 50% 50% 0 0 / 15px 15px 0 0;
  color: var(--cream); font-family: var(--display); font-weight: 800;
  font-size: 1.2rem; line-height: 1.12; padding: 20px 24px 16px;
  margin: 0 0 22px;
}
.foot .mark b { display: block; color: #FFE4D2; font-size: .98rem; }
.foot-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 40px; padding-top: 24px; }
.foot h4 { font-size: 1.02rem; color: var(--cream); margin-bottom: 16px; }
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li { margin-bottom: 9px; font-size: .97rem; }
.foot a { color: var(--green-lit); }
.foot a:hover { color: #B7E8CD; }
.foot-legal { margin-top: 48px; padding-top: 26px; font-size: .88rem; color: #B5A496; }
.foot-legal p { max-width: 100ch; }

/* -------------------------------------------------------- interior pages */

.page-head { background: var(--marl); padding: 74px 0 96px; }
.crumb { font-size: .93rem; color: var(--muted); margin-bottom: 22px; }
.crumb a { color: var(--iron-text); }
.page-head h1 { font-size: clamp(2.5rem, 4.4vw, 3.8rem); max-width: 18ch; }
.page-head h1 em { font-style: normal; color: var(--iron-text); }
.pull { margin: 26px 0 0; font-size: 1.24rem; line-height: 1.55; color: var(--ink); max-width: 56ch; }

.article { background: var(--cream); padding: 0 0 96px; }
.article .wrap { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 60px; align-items: start; }
.prose { max-width: 70ch; min-width: 0; padding-top: 96px; }
.prose h2 { font-size: clamp(1.9rem, 2.8vw, 2.4rem); margin: 54px 0 18px; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: 1.3rem; margin: 34px 0 12px; }
.prose ul { padding-left: 22px; margin: 0 0 1.05em; }
.prose li { margin-bottom: 10px; }
.prose figure { margin: 34px 0; }
.prose .qs { margin-top: 24px; }

.said-note {
  background: var(--marl); border: 2px solid var(--ink); border-radius: var(--arch);
  padding: 30px 28px; margin: 34px 0;
}
.said-note b { display: block; font-family: var(--display); font-weight: 800; font-size: 1.15rem; margin-bottom: 12px; }
.said-note p { color: var(--muted); margin: 0; }

.aside { position: sticky; top: 26px; min-width: 0; margin-top: calc(-1 * (96px + var(--sail))); }
.aside-inner { padding: 32px 26px 28px; }
.aside h4 { font-size: 1.05rem; margin-bottom: 16px; }
.aside ol { margin: 0; padding-left: 20px; }
.aside li { margin-bottom: 9px; font-size: .97rem; }
.aside li a { color: var(--green); font-weight: 400; }
.aside-card { margin-top: 22px; padding: 26px 24px; background: var(--marl); border: 2px solid var(--ink); border-radius: var(--arch); }
.aside-card h4 { margin-bottom: 12px; }
.aside-card p { font-size: .97rem; color: var(--muted); margin-bottom: 18px; }

.siblings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gut); margin-top: 24px; }
/* the guide page carries all three, so the row runs full width rather than
   leaving one card stranded on a second line */
.siblings--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.ask-grid { display: grid; grid-template-columns: minmax(0, 1fr) 500px; gap: 56px; align-items: start; }
.counties { list-style: none; margin: 28px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.counties li {
  background: var(--cream); border: 2px solid var(--ink);
  border-radius: 50% 50% 0 0 / 9px 9px 0 0;
  padding: 9px 15px; font-family: var(--display); font-weight: 700; font-size: .95rem;
}
.sec--marl .counties li { background: var(--field); }

/* ---------------------------------------------------------------- credits */

.credits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gut); }
.credit { padding: 28px 26px; }
.credit h3 { font-size: 1.14rem; margin-bottom: 12px; }
.credit p { font-size: .95rem; color: var(--muted); margin-bottom: .5em; }

.thanks-grid { display: grid; grid-template-columns: minmax(0, 1fr) 460px; gap: 56px; align-items: start; }
.thanks h1 { font-size: clamp(2.4rem, 4vw, 3.4rem); }
.next { list-style: none; padding: 0; margin: 26px 0 0; }
.next li { margin-bottom: 14px; }

/* ----------------------------------------------------------------- motion */

.rise { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.rise.in { opacity: 1; transform: none; }
.rise.d1 { transition-delay: .09s; }
.rise.d2 { transition-delay: .18s; }

@media (prefers-reduced-motion: reduce) {
  .firing { animation: none; }
  .rise, .rise.in { opacity: 1; transform: none; transition: none; }
  * { scroll-behavior: auto !important; }
}

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

@media (max-width: 1180px) {
  .hero-grid, .ask-grid, .two, .two--flip, .thanks-grid { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .article .wrap { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .aside { position: static; margin-top: 0; }
  .closer-grid { grid-template-columns: minmax(0, 1fr); }
  .closer-plate { margin-left: 0; margin-bottom: 0; margin-top: -56px; }
  .prose { padding-top: 72px; }
}

@media (max-width: 1101px) {
  .nav > a.lg, .drop.lg { display: none; }
  .burger { display: inline-block; }
  .mobile {
    display: block; background: var(--marl);
    max-height: 0; overflow: hidden; transition: max-height .28s ease;
  }
  .mobile[data-open="true"] { max-height: 640px; }
  .mobile .wrap { padding-top: 22px; padding-bottom: 26px; }
  .mobile ul { list-style: none; margin: 0 0 18px; padding: 0; }
  .mobile li a {
    display: block; padding: 14px 0; color: var(--ink);
    font-family: var(--display); font-weight: 700; font-size: 1.06rem;
  }
  .mobile li a span { display: block; font-family: var(--body); font-weight: 400; font-size: .93rem; color: var(--muted); margin-top: 3px; }
  .mast .wrap { min-height: 80px; }
  .brand { font-size: 1.18rem; padding: 18px 20px 15px; }
  .brand b { font-size: .95rem; }
}

@media (max-width: 900px) {
  .cards, .figures, .credits, .siblings { grid-template-columns: minmax(0, 1fr); }
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 34px; }
  .sec { padding: 84px 0 76px; }
  .sail { margin-top: calc(-1 * (84px + var(--sail))); }
  .hero-band { height: 300px; margin-top: 54px; }
}

@media (max-width: 620px) {
  body { font-size: 16px; }
  :root { --gut: 18px; --sail: 40px; }
  .sec { padding: 66px 0 60px; }
  .sail { margin-top: calc(-1 * (66px + var(--sail))); }
  .head { padding: 32px 24px 28px; margin-bottom: 38px; }
  .f-row { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .form-card { padding: 26px 20px 24px; }
  .foot-grid { grid-template-columns: minmax(0, 1fr); }
  .hero { padding-top: 66px; }
  .hero-band { height: 230px; }
  .card-img { height: 230px; }
  .closer-grid .arch img { height: 260px; }
  .closer-plate { padding: 28px 22px 26px; }
  .page-head { padding: 54px 0 76px; }
  .prose { padding-top: 60px; }
  .fig-plate { padding: 24px 22px; }
  .bar-head { flex-wrap: wrap; }
}