/* Architectural Guilds: an editorial place index using the existing brand. */
.guild-shell { width: min(100%, 1520px); margin-inline: auto; padding-inline: 72px; }
.guild-page .eyebrow, .guilds-home .eyebrow { font-size: 12px; letter-spacing: .13em; }
.guild-header { position: relative; background: var(--forest-deep); color: var(--paper); }
.guild-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 15px; margin-bottom: 52px; font-size: 14px; color: var(--muted); }
.guild-breadcrumb a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: underline; text-underline-offset: 5px; }
.guild-directory-intro, .guild-detail-intro { padding-top: 30px; padding-bottom: 64px; }
.guild-intro-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 10%; align-items: end; margin-top: 34px; }
.guild-intro-grid h1 { font-size: clamp(58px, 6.6vw, 94px); line-height: 1.04; letter-spacing: -.035em; }
.guild-intro-grid h1 em { color: var(--forest); }
.guild-intro-copy { max-width: 44ch; margin: 0 0 30px; font-size: 19px; line-height: 1.65; }
.guild-status { display: inline-block; margin: 0; color: var(--muted); font-size: 14px; border-left: 2px solid var(--brass); padding-left: 14px; line-height: 1.5; }
.guild-directory { padding-bottom: 86px; }
.guild-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--rule); border-left: 1px solid var(--rule); }
.guild-card { display: flex; flex-direction: column; min-width: 0; padding: 30px; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); transition: background-color 220ms ease, color 220ms ease; }
.guild-card-top { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 40px; }
.guild-card .glyph { font-size: 24px; }
.guild-card h2 { margin: 35px 0 25px; font-size: clamp(32px, 2.65vw, 42px); line-height: 1.17; }
.guild-card p { margin: 0 0 30px; font-size: 17px; line-height: 1.5; }
.guild-card-bottom { display: block; margin-top: auto; padding-top: 24px; font-size: 14px; text-decoration: underline; text-underline-offset: 6px; }
.guild-card:hover, .guild-card:focus-visible { background: var(--forest); color: var(--paper); }
.guild-card:focus-visible { outline-offset: -6px; }
.guild-editor-note { max-width: 65ch; margin: 30px 0 0; font-size: 15px; color: var(--muted); }
.guild-principle { background: var(--forest); color: var(--paper); padding-block: 76px; }
.guild-principle h2 { margin: 32px 0; font-size: clamp(36px, 4vw, 58px); line-height: 1.2; }
.guild-principle p { max-width: 53ch; }
.guild-principle .text-link { max-width: 360px; }
.guild-title-row { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-bottom: 35px; }
.guild-title-row > .eyebrow { margin: 0; }
.guild-detail-intro h1 { font-size: clamp(50px, 6.5vw, 94px); letter-spacing: -.035em; line-height: 1.1; }
.guild-detail-intro h1 em { display: block; max-width: 29ch; font-size: clamp(29px, 3.15vw, 46px); margin-top: 28px; line-height: 1.25; letter-spacing: -.015em; color: var(--forest); }
.guild-detail-deck { display: grid; grid-template-columns: 1.2fr 1fr; gap: 12%; margin-top: 48px; align-items: start; }
.guild-detail-deck > p { max-width: 52ch; margin: 0; font-size: 19px; }
.guild-lenses { border-left: 1px solid var(--brass); padding-left: 30px; }
.guild-lenses ul { display: flex; flex-wrap: wrap; gap: 8px 20px; list-style: none; padding: 0; margin: 18px 0 0; font-size: 16px; }
.guild-resources { background: var(--paper-deep); padding-block: 72px; }
.guild-section-heading { display: grid; grid-template-columns: 1.2fr 1fr; align-items: end; gap: 12%; margin-bottom: 42px; }
.guild-section-heading h2 { font-size: clamp(34px, 3.4vw, 50px); line-height: 1.18; margin-top: 28px; }
.guild-section-heading > p { margin: 0; max-width: 43ch; font-size: 17px; }
.guild-resource-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; }
.guild-resource { display: flex; flex-direction: column; padding: 32px; background: var(--paper); border-top: 2px solid var(--brass); transition: background-color 220ms ease; }
.guild-resource:hover { background: #fffdf8; }
.guild-resource h3 { margin: 28px 0 22px; font-size: 29px; line-height: 1.25; }
.guild-resource > p { margin: 0 0 28px; font-size: 17px; line-height: 1.6; }
.guild-resource-action { display: flex; align-items: center; gap: 10px; margin-top: auto; min-height: 44px; padding-top: 8px; font-size: 15px; border-top: 1px solid var(--rule); }
.guild-resource-action .glyph { margin-left: auto; font-size: 21px; }
.guild-new-tab { font-size: 13px; color: var(--muted); }
.guild-resource-note { max-width: 105ch; margin: 28px 0 0; font-size: 14px; line-height: 1.6; color: var(--muted); }
.guild-stories { padding-block: 80px; }
.guild-story-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px; padding: 0; margin: 0; list-style: none; }
.guild-story-list li { padding: 26px 0 0; border-top: 1px solid var(--rule); }
.guild-story-list h3 { font-size: 29px; line-height: 1.3; margin: 24px 0; max-width: 30ch; }
.guild-story-status { margin: 0; color: var(--muted); font-size: 14px; }
.guild-local-contact { background: var(--forest-deep); color: var(--paper); padding-block: 72px; }
.guild-local-contact > .guild-shell { display: grid; grid-template-columns: 1.2fr 1fr; align-items: center; gap: 12%; }
.guild-local-contact h2 { font-size: clamp(34px, 3.4vw, 50px); line-height: 1.22; margin-top: 28px; }
.guild-local-contact .text-link { font-size: 17px; }
.guild-phone { display: inline-flex; align-items: center; min-height: 48px; margin-top: 12px; font-size: 17px; }
.guild-other-places { padding-block: 44px; }
.guild-other-places > div { display: flex; flex-wrap: wrap; gap: 8px 30px; margin-top: 18px; }
.guild-other-places a { display: inline-flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 48px; font-size: 16px; text-decoration: underline; text-underline-offset: 6px; }
.guilds-home { background: var(--paper-deep); }
.guilds-home > .section-shell { padding-block: 86px; }
.guild-home-heading { display: grid; grid-template-columns: 1.15fr 1fr; gap: 10%; align-items: end; margin: 34px 0 44px; }
.guild-home-heading h2 { font-size: clamp(40px, 4vw, 62px); line-height: 1.13; }
.guild-home-heading p { margin: 0; max-width: 44ch; font-size: 18px; }
.guild-home-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 50px; }
.guild-home-list > a { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 20px; min-height: 102px; padding: 24px 0; border-top: 1px solid var(--rule); }
.guild-home-list .guild-home-name { font-family: var(--serif); font-size: clamp(26px, 2.4vw, 36px); line-height: 1.25; }
.guild-home-list .glyph { font-size: 22px; }
.guild-home-list a:hover .guild-home-name { text-decoration: underline; text-underline-offset: 8px; }
.guild-home-bottom { display: flex; align-items: center; justify-content: space-between; gap: 30px; margin-top: 28px; }
.guild-home-bottom .text-link { min-width: 235px; }
/* Five navigation items: the wordmark moves left until the centred header has room (1600px+). */
@media (min-width: 1000px) and (max-width: 1599px) {
  .site-header { grid-template-columns: auto 1fr; gap: 30px; }
  .site-header > .wordmark { grid-column: 1; }
  .site-header nav { grid-column: 2; font-size: 13px; gap: 20px; }
}
@media (max-width: 999px) {
  .guild-shell { padding-inline: 44px; }
  .guild-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .guild-intro-grid, .guild-detail-deck, .guild-section-heading, .guild-local-contact > .guild-shell, .guild-home-heading { gap: 38px; }
  .guild-card h2 { font-size: 36px; }
  .guild-resource { padding: 26px; }
}
@media (max-width: 650px) {
  .guild-shell { padding-inline: 24px; }
  .guild-directory-intro, .guild-detail-intro { padding-top: 18px; padding-bottom: 42px; }
  .guild-breadcrumb { margin-bottom: 35px; gap: 4px 10px; }
  .guild-intro-grid, .guild-detail-deck, .guild-section-heading, .guild-local-contact > .guild-shell, .guild-home-heading { grid-template-columns: 1fr; gap: 32px; }
  .guild-intro-grid { margin-top: 28px; }
  .guild-intro-grid h1 { font-size: clamp(48px, 13vw, 72px); }
  .guild-intro-copy, .guild-detail-deck > p { font-size: 18px; }
  .guild-grid, .guild-resource-grid, .guild-story-list, .guild-home-list { grid-template-columns: 1fr; }
  .guild-card { padding: 24px; }
  .guild-card h2 { margin: 24px 0; font-size: 34px; }
  .guild-card p { margin-bottom: 20px; }
  .guild-card-bottom { padding-top: 12px; }
  .guild-directory { padding-bottom: 54px; }
  .guild-principle, .guild-resources, .guild-local-contact { padding-block: 54px; }
  .guild-title-row { display: block; margin-bottom: 30px; }
  .guild-title-row .guild-status { margin-top: 22px; }
  .guild-detail-intro h1 { font-size: clamp(42px, 11.6vw, 62px); }
  .guild-detail-intro h1 em { font-size: 29px; margin-top: 25px; }
  .guild-detail-deck { margin-top: 34px; }
  .guild-lenses { padding-left: 20px; }
  .guild-section-heading { margin-bottom: 32px; }
  .guild-resource { padding: 26px 22px; }
  .guild-resource h3, .guild-story-list h3 { font-size: 27px; }
  .guild-stories { padding-block: 54px; }
  .guild-other-places > div { display: grid; grid-template-columns: 1fr; }
  .guilds-home > .section-shell { padding-block: 58px; }
  .guild-home-heading { margin: 30px 0; }
  .guild-home-list > a { min-height: 96px; grid-template-columns: 22px 1fr auto; gap: 14px; }
  .guild-home-list .guild-home-name { font-size: 28px; }
  .guild-home-bottom { align-items: stretch; flex-direction: column; gap: 20px; }
}
@supports (text-box-trim: trim-both) and (text-box-edge: cap alphabetic) {
  .guild-home-name { text-box-trim: trim-both; text-box-edge: cap alphabetic; }
}

/* ------------------------------------------------------------------
   September 25 — balance and alignment pass
   ------------------------------------------------------------------ */

/* Where you are: a restrained mark on "Places & Guilds" and the current breadcrumb. */
.site-header nav a[aria-current] {
  color: #f4d89c;
  text-decoration: underline;
  text-decoration-color: var(--brass);
  text-decoration-thickness: 1px;
  text-underline-offset: 7px;
}

.guild-breadcrumb [aria-current="page"] {
  color: var(--ink);
}

@media (max-width: 999px) {
  .site-header nav a[aria-current] {
    text-decoration: none;
    box-shadow: inset 2px 0 0 var(--brass);
    padding-left: 12px;
  }
}

/* Resource cards stack before their long publishers and titles get squeezed. */
@media (max-width: 800px) {
  .guild-resource-grid {
    grid-template-columns: 1fr;
  }
}

/* Side by side, paired cards share their tracks: descriptions start together and
   development labels sit on one line. Stacked phones keep their natural flow. */
@media (min-width: 651px) {
  @supports (grid-template-rows: subgrid) {
    .guild-card {
      display: grid;
      grid-row: span 4;
      grid-template-rows: subgrid;
      row-gap: 0;
    }

    .guild-card-bottom {
      margin-top: 0;
      align-self: end;
    }
  }

  .guild-story-list li {
    display: flex;
    flex-direction: column;
  }

  .guild-story-status {
    margin-top: auto;
  }
}


/* Wide screens: header and footer share the content column's left and right axis. */
@media (min-width: 1400px) {
  .guild-page .site-header,
  .guild-page .site-footer {
    padding-inline: max(72px, calc(50% - 688px));
  }
}

/* ------------------------------------------------------------------
   September 30 — the architecture library (/architects/) and its entry points
   ------------------------------------------------------------------ */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Guild directory: a second way in, by people rather than place. */
.guild-architecture-link { display: grid; grid-template-columns: 1.15fr 1fr; gap: 10%; align-items: end; padding-block: 8px 86px; }
.guild-architecture-link > div:first-child { padding-top: 34px; border-top: 1px solid var(--rule); }
.guild-architecture-link h2 { margin-top: 26px; font-size: clamp(32px, 3.2vw, 46px); line-height: 1.2; }
.guild-architecture-link h2 em { color: var(--forest); }
.guild-architecture-link p { max-width: 44ch; margin: 0 0 26px; font-size: 18px; }
.guild-architecture-link .text-link { max-width: 330px; }

/* Guild detail: documented architect connections, then the general link. */
.guild-architecture { padding-block: 72px 80px; border-top: 1px solid var(--rule); }
.guild-architect-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px; margin: 0 0 40px; padding: 0; list-style: none; }
.guild-architect-list li { padding-top: 26px; border-top: 2px solid var(--brass); }
.guild-architect-list .eyebrow { text-transform: uppercase; }
.guild-architect-list h3 { margin: 22px 0 18px; font-size: 29px; line-height: 1.25; }
.guild-architect-list h3 a { text-decoration: underline; text-decoration-color: rgba(59, 73, 63, .35); text-underline-offset: 7px; transition: text-decoration-color 220ms ease; }
.guild-architect-list h3 a:hover { text-decoration-color: var(--brass); }
.guild-architect-list p { max-width: 58ch; margin: 0 0 14px; font-size: 17px; line-height: 1.6; }
.guild-architect-list .guild-architect-source, .arch-source { font-size: 14px; color: var(--muted); }
.guild-architect-source a, .arch-source a { text-decoration: underline; text-underline-offset: 4px; }
.guild-architecture-all { max-width: 400px; }

/* The library page */
.arch-intro { padding-top: 30px; padding-bottom: 64px; }
.arch-intro h1 { font-size: clamp(50px, 5.6vw, 84px); line-height: 1.08; letter-spacing: -.03em; }
.arch-intro h1 em { display: block; color: var(--forest); }
.arch-layout { display: grid; grid-template-columns: minmax(210px, 250px) minmax(0, 1fr); gap: clamp(48px, 7vw, 120px); align-items: start; padding-bottom: 96px; }
.arch-index { position: sticky; top: 32px; max-height: calc(100vh - 64px); overflow-y: auto; padding: 26px 0 8px; border-top: 2px solid var(--brass); font-size: 15px; line-height: 1.4; scrollbar-width: thin; }
.arch-index h2 { margin: 0 0 20px; font-family: var(--sans); font-weight: 400; }
.arch-index ol, .arch-index ul { margin: 0; padding: 0; list-style: none; }
.arch-index > ol > li + li { margin-top: 18px; }
.arch-index-period { display: block; margin-bottom: 4px; font-family: var(--serif); font-style: italic; font-size: 16px; color: var(--forest); }
.arch-index ul a { display: flex; align-items: center; min-height: 32px; padding-block: 3px; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 5px; transition: text-decoration-color 200ms ease, color 200ms ease; }
.arch-index ul a:hover, .arch-index ul a:focus-visible { text-decoration-color: var(--brass); }
.arch-index-guilds { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; margin-top: 22px; font-size: 14px; text-decoration: underline; text-underline-offset: 5px; }
.arch-reading { max-width: 700px; min-width: 0; }
.arch-section + .arch-section { margin-top: 40px; }
.arch-section-head { padding: 30px 0 6px; border-top: 1px solid var(--ink); scroll-margin-top: 32px; }
.arch-section { scroll-margin-top: 32px; }
.arch-section-head h2 { margin: 24px 0 0; font-size: clamp(36px, 3.4vw, 50px); line-height: 1.15; }
.arch-profile { padding: 50px 0 46px; border-bottom: 1px solid var(--rule); scroll-margin-top: 32px; }
.arch-profile:last-child { border-bottom: 0; }
.arch-profile h3 { margin: 0; font-size: clamp(32px, 2.6vw, 40px); line-height: 1.18; letter-spacing: -.01em; overflow-wrap: break-word; }
.arch-role { margin: 20px 0 0; font-family: var(--serif); font-style: italic; font-size: 19px; line-height: 1.4; color: var(--forest); }
.arch-bio { margin-top: 26px; }
.arch-bio p { max-width: 64ch; margin: 0; font-size: 18px; line-height: 1.72; }
.arch-bio p + p { margin-top: 1.05em; }
.arch-pending { color: var(--muted); font-style: italic; }
.arch-design-note { max-width: 60ch; margin: 26px 0 0; padding-left: 18px; border-left: 2px solid var(--brass); font-size: 16px; line-height: 1.6; }
.arch-design-note .arch-source { display: block; margin-top: 8px; }
.arch-figure { margin: 28px 0 0; }
.arch-figure img { display: block; width: 100%; height: auto; }
.arch-figure figcaption { margin-top: 10px; font-size: 14px; line-height: 1.5; color: var(--muted); }
.arch-credit { display: block; font-size: 13px; }
.arch-works, .arch-places { margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--rule); }
.arch-works ul, .arch-places ul { margin: 14px 0 0; padding: 0; list-style: none; }
.arch-places li + li { margin-top: 20px; }
.arch-places li > a { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; font-family: var(--serif); font-size: 22px; text-decoration: underline; text-decoration-color: rgba(59, 73, 63, .35); text-underline-offset: 6px; transition: text-decoration-color 220ms ease; }
.arch-places li > a:hover { text-decoration-color: var(--brass); }
.arch-places p { max-width: 62ch; margin: 4px 0 0; font-size: 16px; line-height: 1.6; }
.arch-places .arch-source { margin-top: 14px; }
.arch-to-index { display: inline-flex; align-items: center; min-height: 44px; margin-top: 22px; font-size: 14px; color: var(--muted); text-decoration: underline; text-underline-offset: 5px; }
.arch-closing-note { max-width: 64ch; margin: 44px 0 0; font-size: 14px; line-height: 1.6; color: var(--muted); }

/* Subtle arrival: only when motion is welcome, and always readable without it. */
html.arch-motion .arch-section-head:not(.is-in), html.arch-motion .arch-profile:not(.is-in) { opacity: 0; transform: translateY(14px); }
@media print { html.arch-motion .arch-section-head, html.arch-motion .arch-profile { opacity: 1; transform: none; } }
/* Focus rings that stay whole inside the scrolling index and clear trimmed lines nearby. */
.arch-index a:focus-visible { outline-offset: -2px; }
.arch-source a:focus-visible, .guild-architect-source a:focus-visible, .arch-places li > a:focus-visible, .arch-to-index:focus-visible, .guild-architect-list h3 a:focus-visible { outline-offset: 2px; }
html.arch-motion .arch-section-head, html.arch-motion .arch-profile { transition: opacity 700ms ease, transform 900ms cubic-bezier(.2, .7, .2, 1); }
.arch-profile:target h3 { text-decoration: underline; text-decoration-color: var(--brass); text-decoration-thickness: 1px; text-underline-offset: 10px; }

@media (max-width: 999px) {
  .guild-architecture-link { gap: 38px; }
  .arch-layout { grid-template-columns: 1fr; gap: 0; }
  .arch-index { position: static; max-height: none; overflow: visible; margin-bottom: 44px; padding-bottom: 26px; border-bottom: 1px solid var(--rule); }
  .arch-index > ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 36px; }
  .arch-index > ol > li + li { margin-top: 0; }
  .arch-index ul a { min-height: 40px; }
  .arch-reading { max-width: none; }
  .arch-bio p { max-width: 62ch; }
  .arch-profile h3 { font-size: clamp(28px, 4.2vw, 32px); }
}
@media (max-width: 650px) {
  .guild-architecture-link { grid-template-columns: 1fr; gap: 30px; padding-bottom: 54px; }
  .guild-architecture { padding-block: 54px; }
  .guild-architect-list { grid-template-columns: 1fr; gap: 30px; }
  .guild-architect-list h3 { font-size: 27px; }
  .arch-intro { padding-top: 18px; padding-bottom: 42px; }
  .arch-intro h1 { font-size: clamp(40px, 11vw, 58px); }
  .arch-index > ol { grid-template-columns: 1fr; }
  .arch-section-head h2 { font-size: 34px; }
  .arch-profile { padding: 40px 0 36px; }
  .arch-profile h3 { font-size: clamp(28px, 8vw, 32px); }
  .arch-bio p { font-size: 17px; line-height: 1.7; }
  .arch-role { font-size: 18px; }
}
@supports (text-box-trim: trim-both) and (text-box-edge: cap alphabetic) {
  .arch-index-period, .arch-role { text-box-trim: trim-both; text-box-edge: cap alphabetic; }
  /* trimmed paragraphs lose their half-leading, so the paragraph break needs a little more */
  .arch-bio p + p { margin-top: 1.6em; }
}

/* Homepage: a restrained doorway into the library, beside the Guilds. */
.architects-home { background: var(--paper-deep); }
.architects-home > .section-shell { padding-block: 0 86px; }
.architects-home-inner { display: grid; grid-template-columns: 1.15fr 1fr; gap: 10%; align-items: end; padding-top: 44px; border-top: 1px solid var(--rule); }
.architects-home h2 { margin-top: 26px; font-size: clamp(32px, 3.2vw, 46px); line-height: 1.2; }
.architects-home h2 em { color: var(--forest); }
.architects-home p { max-width: 46ch; margin: 0 0 26px; font-size: 18px; }
.architects-home .text-link { max-width: 300px; }
@media (max-width: 999px) { .architects-home-inner { gap: 38px; } }
@media (max-width: 650px) {
  .architects-home > .section-shell { padding-bottom: 58px; }
  .architects-home-inner { grid-template-columns: 1fr; gap: 28px; padding-top: 36px; }
}
@media (prefers-reduced-motion: reduce) {
  html.arch-motion .arch-section-head, html.arch-motion .arch-profile { opacity: 1; transform: none; transition: none; }
}

/* October 12: a short line under a section title, used for Civic Landmarks. */
.arch-section-note { max-width: 56ch; margin: 18px 0 0; font-size: 17px; line-height: 1.6; color: var(--muted); }

/* October 12: very wide screens. On Guild and library pages the header shares the content column,
   so above 1600px the centred wordmark left only ~560px for five links and they wrapped.
   Keep the wordmark left (as at 1000-1599px) and never let a link break onto two lines. */
@media (min-width: 1000px) {
  .site-header nav a { white-space: nowrap; }
}
@media (min-width: 1600px) {
  .guild-page .site-header { grid-template-columns: auto 1fr; gap: 30px; }
  .guild-page .site-header > .wordmark { grid-column: 1; }
  .guild-page .site-header nav { grid-column: 2; justify-self: end; }
}