/* ------------------------------------------------------------------
   Minor Ministries — house style.

   Everything is a document on a desk. The departments share the paper
   stock, the seal and the typewriter pool; each keeps its own inks.
   Quotations from a department appear on that department's own stock.
   ------------------------------------------------------------------ */

:root {
  /* the desk beneath everything */
  --desk:        #2f342c;
  --desk-lit:    #3a4036;
  --desk-edge:   #1c201a;

  /* the office's own paper: a cool bond, not the Bureau's manila */
  --paper:       #f0ead9;
  --paper-deep:  #e2dbc6;
  --paper-edge:  #cec6ac;

  /* inks */
  --ink:         #2a2721;
  --ink-soft:    #635b4b;
  --ink-faint:   #8a8170;
  --rule:        #bcb298;
  --rule-soft:   #d6cdb5;
  --blue:        #27476b;   /* the office pen */
  --stamp:       #a03a29;   /* the office pad */

  /* A fold is shading, not a line: one side in shadow, one catching light.
     Kept faint — these bands run behind body copy, and anything stronger
     reads as a stripe across the text rather than as paper. */
  --crease-dark:  rgba(42, 39, 33, .045);
  --crease-light: rgba(255, 255, 255, .16);

  --font-display: "Avenir Next Condensed", "Arial Narrow", "Helvetica Neue", sans-serif;
  --font-prose:   Charter, "Bitstream Charter", "Sitka Text", Cambria, Georgia, serif;
  --font-typed:   "American Typewriter", "Courier New", Courier, monospace;

  --sheet: 44rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* the lamp turned down. Still paper, just less of it. */
    --desk:       #14170f;
    --desk-lit:   #1c2018;
    --desk-edge:  #090b07;

    --paper:      #c9c2ad;
    --paper-deep: #b9b19a;
    --paper-edge: #99917a;

    --ink:        #22201a;
    --ink-soft:   #4f483b;
    --ink-faint:  #6f6858;
    --rule:       #8d846c;
    --rule-soft:  #a79e86;
    --blue:       #1f3b5c;
    --stamp:      #8d3020;

    --crease-dark:  rgba(18, 16, 12, .06);
    --crease-light: rgba(255, 255, 255, .11);
  }
}

/* ---------- reset ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
  /* the backing sheet is rotated, so its corners reach past the page edge */
  overflow-x: hidden;
  overflow-x: clip;
}

body {
  margin: 0;
  padding: clamp(1.25rem, 4vw, 2.75rem) 1rem 4.5rem;
  color: var(--ink);
  font-family: var(--font-prose);
  font-size: 1.0625rem;
  line-height: 1.6;
  background-color: var(--desk);
  background-image:
    radial-gradient(ellipse 90% 55% at 50% -8%, var(--desk-lit), transparent 70%),
    radial-gradient(ellipse 120% 90% at 50% 50%, transparent 45%, var(--desk-edge)),
    repeating-linear-gradient(0deg,  rgba(0,0,0,.13) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.13) 0 1px, transparent 1px 3px);
  background-attachment: fixed;
}

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

a { color: var(--blue); text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }

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

.skip { position: absolute; left: -9999px; }
.skip:focus {
  left: 1.5rem; top: 1.5rem; z-index: 20;
  background: var(--paper); color: var(--ink);
  padding: .6rem .9rem;
  font: 600 .75rem/1 var(--font-display);
  letter-spacing: .14em; text-transform: uppercase;
  border: 1.5px solid var(--ink);
}

/* ---------- the sheet ---------- */

.sheet {
  position: relative;
  max-width: var(--sheet);
  margin: 0 auto;
  padding: 3.1rem clamp(1.15rem, 4.5vw, 2.75rem) 2.25rem;
  background-color: var(--paper);
  /* Two creases at the letter-fold thirds. A letter fold is a C-fold, so the
     folds face opposite ways: the upper one is a valley (shadow above the
     crease, light below), the lower one a mountain. Soft bands, no hard edge —
     a crease is a change in how the paper takes the light, not a rule. */
  background-image:
    linear-gradient(to bottom,
      transparent 0%,
      var(--crease-dark) 40%,
      var(--crease-dark) 50%,
      var(--crease-light) 54%,
      var(--crease-light) 58%,
      transparent 82%),
    linear-gradient(to bottom,
      transparent 18%,
      var(--crease-light) 42%,
      var(--crease-light) 46%,
      var(--crease-dark) 50%,
      var(--crease-dark) 60%,
      transparent 100%);
  background-size: 100% 24px, 100% 24px;
  background-position: 0 33.4%, 0 66.7%;
  background-repeat: no-repeat;
  box-shadow: 0 1px 0 var(--paper-edge), 0 14px 34px rgba(0,0,0,.42);
}

/* a second sheet underneath, set down slightly out of true */
.sheet::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--paper-deep);
  /* centred origin keeps the offset even top and bottom on long pages */
  transform: rotate(-.35deg);
  transform-origin: 50% 50%;
  box-shadow: 0 10px 26px rgba(0,0,0,.34);
}

/* two holes, punched slightly off-true as they always are.
   Each is the desk showing through, with the paper's cut edge around it. */
.sheet::after {
  content: "";
  position: absolute;
  top: 13px; left: 0; right: 0;
  height: 18px;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(circle 7.5px at 33% 53%,
      var(--desk-edge) 0 74%, rgba(42,39,33,.42) 76% 88%, transparent 93%),
    radial-gradient(circle 7.5px at 67% 47%,
      var(--desk-edge) 0 74%, rgba(42,39,33,.42) 76% 88%, transparent 93%);
}

.sheet + .sheet { margin-top: 1.5rem; }

/* ---------- masthead ---------- */

.masthead {
  display: flex;
  align-items: center;
  gap: clamp(.85rem, 3vw, 1.25rem);
  padding-bottom: .85rem;
}

.seal { flex: 0 0 auto; width: clamp(54px, 13vw, 72px); color: var(--blue); }

.masthead-text { min-width: 0; }

/* an <h1> on the index, an <a> everywhere else */
.wordmark {
  display: block;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.3rem, 5.4vw, 1.85rem);
  line-height: 1.05;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
}
a.wordmark:hover { color: var(--blue); }

.masthead-sub {
  display: block;
  margin-top: .3rem;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: .6875rem;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--blue);
}

.masthead-file {
  display: block;
  margin-top: .18rem;
  font: .625rem/1.4 var(--font-typed);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* the double rule under a masthead */
.rule-double {
  border: 0;
  height: 4px;
  margin: 0 0 1.6rem;
  background:
    linear-gradient(var(--ink) 0 0) top / 100% 2px no-repeat,
    linear-gradient(var(--ink) 0 0) bottom / 100% 1px no-repeat;
}

/* ---------- type ---------- */

h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.45rem, 6vw, 2.05rem);
  line-height: 1.1;
  letter-spacing: .13em;
  text-transform: uppercase;
  margin: 0 0 .5rem;
}

h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .8125rem;
  letter-spacing: .21em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 2.4rem 0 .9rem;
  padding-bottom: .3rem;
  border-bottom: 1.5px solid var(--ink);
}

h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .8125rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--blue);
  margin: 1.5rem 0 .3rem;
}

p { margin: 0 0 .85rem; max-width: 60ch; }
p:last-child { margin-bottom: 0; }

.standfirst {
  font-family: var(--font-display);
  font-size: 1rem;
  font-style: italic;
  letter-spacing: .01em;
  color: var(--ink-soft);
  max-width: 52ch;
  margin-bottom: 1.4rem;
}

.typed { font-family: var(--font-typed); font-size: .9em; }

.small-print {
  font: .625rem/1.5 var(--font-display);
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* short, scannable lists — the office does not write essays */
/* full width so the rules line up with the section rules above them */
.points { margin: 0 0 .9rem; padding: 0; list-style: none; }
/* Flex with baseline alignment, not absolute positioning. An absolutely
   positioned marker gets its own line box, sized by its smaller font — so its
   baseline sat above the text's and the mark rode high. Baseline alignment
   pins the two together whatever the glyph metrics; the marker stays its own
   flex item so wrapped lines keep the hanging indent. */
.points li {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  padding: .34rem 0;
  border-bottom: 1px solid var(--rule-soft);
}
.points li:last-child { border-bottom: 0; }
.points li::before {
  content: "\2717";
  flex: 0 0 auto;
  font-size: .8em;
  line-height: 1;
  color: var(--blue);
}

/* ---------- the rubber stamp ---------- */

.stamp {
  display: inline-block;
  flex: 0 0 auto;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .78rem;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--stamp);
  border: 2.4px solid var(--stamp);
  border-radius: 3px;
  padding: .26rem .6rem .3rem;
  opacity: .82;
  transform: rotate(-6deg);
  white-space: nowrap;
}

.stamp--sm {
  font-size: .625rem;
  letter-spacing: .15em;
  border-width: 1.8px;
  padding: .18rem .42rem .2rem;
  transform: rotate(-4.5deg);
}

.stamp--quiet { color: var(--ink-faint); border-color: var(--ink-faint); }

/* ---------- form fieldset: the legend punched into the border ---------- */

.fieldset {
  position: relative;
  border: 1.5px solid var(--ink);
  padding: 1.35rem 1.1rem 1.05rem;
  margin: 1.9rem 0;
}

.fieldset > .legend {
  position: absolute;
  top: 0; left: .85rem;
  transform: translateY(-52%);
  background: var(--paper);
  padding: 0 .5rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .6875rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--blue);
}

/* ---------- the schedule of departments ---------- */

.dept {
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: .85rem .1rem;
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
  color: inherit;
}
.dept:last-of-type { border-bottom: 0; }

.dept-room {
  flex: 0 0 3.1rem;
  font: .8125rem/1.2 var(--font-typed);
  letter-spacing: .04em;
  color: var(--blue);
}

.dept-body { flex: 1 1 auto; min-width: 0; }

.dept-name {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.02rem, 3.6vw, 1.22rem);
  line-height: 1.15;
  letter-spacing: .075em;
  text-transform: uppercase;
  color: var(--ink);
}

a.dept:hover .dept-name { color: var(--blue); text-decoration: underline; }

.dept-line {
  display: block;
  margin-top: .16rem;
  font: .8125rem/1.4 var(--font-typed);
  color: var(--ink-soft);
}

.dept--vacant .dept-name { color: var(--ink-faint); }
.dept--vacant .dept-room { color: var(--ink-faint); }

/* Narrow: the stamp moves up beside the room number so the name gets the
   full width, instead of being squeezed into one word per line. */
@media (max-width: 34rem) {
  .dept { flex-wrap: wrap; gap: .45rem .6rem; }
  .dept-room { flex: 0 0 auto; order: 0; }
  .dept .stamp { order: 1; margin-left: auto; }
  .dept-body { flex: 1 1 100%; order: 2; }
}

/* ---------- record: dot-leader rows ---------- */

.record { margin: 0; }

.record-row {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  padding: .42rem 0;
  border-bottom: 1px solid var(--rule-soft);
}
.record-row:last-child { border-bottom: 0; }

.record-key {
  flex: 0 0 auto;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: .6875rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.record-val {
  flex: 1 1 52%;
  font: .8125rem/1.5 var(--font-typed);
  color: var(--ink);
  text-align: right;
}

.leader {
  flex: 1 1 auto;
  min-width: 1rem;
  align-self: flex-end;
  height: 2px;
  margin-bottom: .34em;
  background-image: linear-gradient(to right, currentColor 0 2px, transparent 2px);
  background-size: 7px 2px;
  background-repeat: repeat-x;
  color: var(--ink-faint);
  opacity: .5;
}

@media (max-width: 34rem) {
  .record-row { flex-wrap: wrap; gap: 0; }
  .record-key { flex-basis: 100%; }
  .record-row .leader { display: none; }
  .record-val { flex-basis: 100%; text-align: left; }
}

/* ---------- schedule: a lettered classification ---------- */

.schedule-row {
  display: flex;
  align-items: baseline;
  gap: .85rem;
  padding: .5rem 0;
  border-bottom: 1px solid var(--rule-soft);
}
.schedule-row:last-child { border-bottom: 0; }

.schedule-code {
  flex: 0 0 1.6rem;
  font: 600 .8125rem/1.4 var(--font-typed);
  color: var(--blue);
}

.schedule-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .6875rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  margin: 0 0 .04rem;
}

.schedule-note {
  font: .8125rem/1.45 var(--font-typed);
  color: var(--ink-soft);
  margin: 0;
  max-width: none;
}

/* ---------- a department's own stock ---------- */

.sample {
  padding: 1.3rem 1.25rem 1.15rem;
  margin: 1.4rem 0;
  transform: rotate(-.35deg);
  box-shadow: 0 5px 16px rgba(0,0,0,.24);
}

.sample-label {
  font-size: .625rem;
  letter-spacing: .21em;
  text-transform: uppercase;
  margin: 0 0 .75rem;
}

.sample blockquote { margin: 0; font-size: .95rem; line-height: 1.62; }
.sample blockquote p { max-width: 52ch; margin-bottom: .7rem; }
.sample blockquote p:last-of-type { margin-bottom: 0; }

.sample-cite {
  display: block;
  margin-top: .85rem;
  font-size: .5625rem;
  letter-spacing: .17em;
  text-transform: uppercase;
  font-style: normal;
}

/* 50 lux. The galleries are dark in both appearances. */
.sample--museum { background: #14120f; border: 1px solid #2e2921; color: #cfc5b4; }
.sample--museum .sample-label { font-family: "American Typewriter", var(--font-typed); color: #877e70; }
.sample--museum blockquote { font-family: "Iowan Old Style", Charter, Georgia, serif; color: #cfc5b4; }
.sample--museum .sample-cite { font-family: "American Typewriter", var(--font-typed); color: #b08a4a; }

/* A municipal office, c. 1976. */
.sample--bureau { background: #e8dcbb; border: 1px solid #6d6045; color: #2e2922; }
.sample--bureau .sample-label { font-family: "Avenir Next Condensed", var(--font-display); font-weight: 600; color: #564a76; }
.sample--bureau blockquote { font-family: "American Typewriter", var(--font-typed); color: #2e2922; }
.sample--bureau .sample-cite { font-family: "Avenir Next Condensed", var(--font-display); font-weight: 600; color: #a33b2a; }

.directives { list-style: none; margin: .9rem 0 0; padding: 0;
  font-family: "American Typewriter", var(--font-typed); font-size: .8125rem; line-height: 1.5; }
.directives li {
  display: flex;
  align-items: baseline;
  gap: .55rem;
  padding: .42rem 0;
  border-top: 1px solid rgba(46,41,34,.2);
}
.directives li::before { content: "\2014"; flex: 0 0 auto; color: #a33b2a; }

/* ---------- the App Store button ---------- */

.storefront {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .85rem 1.2rem;
  margin: 1.3rem 0 0;
}

.appstore {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .5rem .9rem;
  border-radius: 8px;
  background: #12100c;
  color: #fff;
  border: 1px solid #12100c;
  text-decoration: none;
  line-height: 1;
  box-shadow: 0 2px 5px rgba(0,0,0,.3);
}

.appstore-small { display: block; font-size: .5625rem; letter-spacing: .02em; opacity: .92; }
.appstore-large { display: block; font-size: 1rem; font-weight: 500; letter-spacing: -.01em; margin-top: .1rem; }

.appstore.is-pending {
  background: transparent;
  color: var(--ink-faint);
  border: 1.5px dashed var(--rule);
  box-shadow: none;
}
.appstore.is-pending svg { opacity: .5; }

/* ---------- signature ---------- */

.signature { display: block; margin: 1.6rem 0 0; }
.signature svg { width: 168px; color: var(--blue); }
.signature-rule { width: 186px; height: 1px; background: var(--ink); margin: .2rem 0 .28rem; }

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

.foot {
  margin-top: 2.4rem;
  padding-top: 1rem;
  border-top: 1.5px solid var(--ink);
  font: .6875rem/1.7 var(--font-display);
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-faint);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .5rem 1.5rem;
}

.foot a { color: var(--ink-soft); text-decoration: none; }
.foot a:hover { color: var(--blue); text-decoration: underline; }

.foot-links { margin: 0; }
.foot-stamp { margin: 0; text-align: right; }

@media (max-width: 34rem) {
  .foot { display: block; }
  .foot-stamp { text-align: left; margin-top: .5rem; }
}

.counter { display: block; }
.counter[hidden] { display: none; }

/* ---------- back to the directory ---------- */

.backlink {
  display: inline-block;
  margin-bottom: 1rem;
  font: 500 .6875rem/1 var(--font-display);
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-decoration: none;
}
.backlink:hover { color: var(--blue); text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}