/* IronBridge Fabrication — editorial */
@font-face { font-family: "Big Shoulders Display"; src: url("../fonts/big-shoulders-display.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Work Sans"; src: url("../fonts/work-sans.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --paper: #F2EFE9;
  --paper-2: #E8E3DA;
  --iron: #1C1E20;
  --graphite: #4A4D50;
  --bronze: #A8763E;
  --rule: #CFC9BE;
  --gutter: clamp(20px, 4vw, 64px);
}
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 17px; }
body { margin: 0; background: var(--paper); color: var(--iron); font-family: "Work Sans", "Helvetica Neue", sans-serif; line-height: 1.62; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2 { font-family: "Big Shoulders Display", Impact, sans-serif; font-weight: 800; text-transform: uppercase; line-height: .92; letter-spacing: .005em; margin: 0 0 .4em; }
h1 { font-size: clamp(3.4rem, 9vw, 8.5rem); }
h2 { font-size: clamp(2rem, 4vw, 3.4rem); }
p { margin: 0 0 1em; }
.label { font-size: .72rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--bronze); margin-bottom: 1.4rem; }
.num { font-family: "Big Shoulders Display", sans-serif; font-weight: 600; font-size: 1.4rem; color: var(--bronze); display: block; margin-bottom: .4rem; }
.fine { font-size: .85rem; color: var(--graphite); }
.center { text-align: center; }

/* image treatment: monochrome until hover */
img.mono { filter: grayscale(1) contrast(1.05); transition: filter .6s ease; }
a:hover img.mono, figure:hover img.mono, .plate:hover img.mono { filter: grayscale(.1) sepia(.15); }

/* links */
.arrow { display: inline-flex; align-items: center; gap: .6em; font-weight: 600; text-decoration: none; border-bottom: 2px solid var(--iron); padding-bottom: 3px; }
.arrow::after { content: "\2192"; transition: transform .2s; }
.arrow:hover::after { transform: translateX(5px); }
.block-link { display: inline-block; background: var(--iron); color: var(--paper); font: 600 .95rem/1 "Work Sans", sans-serif; letter-spacing: .04em; text-decoration: none; padding: 18px 26px; border: 0; cursor: pointer; overflow-wrap: anywhere; }
.block-link:hover { background: var(--bronze); }

/* masthead */
.masthead { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 16px var(--gutter); border-bottom: 1px solid var(--iron); background: var(--paper); }
.masthead__brand img { width: 210px; }
.masthead ol { list-style: none; display: flex; gap: 34px; margin: 0; padding: 0; }
.masthead ol a { text-decoration: none; font-weight: 500; font-size: .95rem; position: relative; }
.masthead sup { font-size: .62rem; color: var(--bronze); margin-right: 4px; font-weight: 600; }
.masthead ol a[aria-current]::after, .masthead ol a:hover::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; background: var(--bronze); }
.masthead__toggle { display: none; }

/* opening */
.opening { padding: clamp(40px, 6vw, 80px) var(--gutter) 0; }
.opening h1 { font-size: clamp(3.6rem, 12.5vw, 13rem); line-height: .8; margin: 0 0 -.16em; position: relative; z-index: 1; white-space: nowrap; }
.bronze { color: var(--bronze); }
.opening__fig { margin: 0 calc(var(--gutter) * -1); }
.opening__fig img { width: 100%; aspect-ratio: 2000 / 760; object-fit: cover; }
.opening__fig figcaption { padding: 0 var(--gutter); }
.opening__foot { display: grid; grid-template-columns: 1fr auto; gap: var(--gutter); align-items: end; padding-top: 36px; }
.opening__lede { max-width: 58ch; font-size: 1.15rem; margin: 0; }
figcaption { font-size: .78rem; color: var(--graphite); margin-top: 10px; font-style: italic; }
.process { border-top: 1px solid var(--iron); border-bottom: 1px solid var(--iron); margin: 96px var(--gutter) 0; }
.process ol { list-style: none; display: grid; grid-template-columns: repeat(6, 1fr); margin: 0; padding: 0; }
.process li { padding: 18px 14px; border-left: 1px solid var(--rule); font-weight: 500; }
.process li:first-child { border-left: 0; padding-left: 0; }
.process b { display: block; font-family: "Big Shoulders Display", sans-serif; font-size: 2rem; color: var(--bronze); line-height: 1; margin-bottom: 4px; }

.halves { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; margin-top: 96px; background: var(--iron); }
.half { display: block; text-decoration: none; background: var(--paper); }
.half img { aspect-ratio: 9 / 7; object-fit: cover; width: 100%; }
.half > div { padding: 34px var(--gutter) 44px; }
.half p { max-width: 46ch; }
.essay { padding: 110px var(--gutter); max-width: 1300px; }
.essay blockquote { margin: 0 0 48px; font-family: "Big Shoulders Display", sans-serif; font-weight: 600; font-size: clamp(2rem, 4.4vw, 3.8rem); line-height: 1.02; text-transform: uppercase; max-width: 22ch; }
.essay__cols { columns: 2; column-gap: 48px; max-width: 1000px; }
.index { padding: 0 var(--gutter) 110px; }
.index header { display: flex; justify-content: space-between; align-items: end; border-bottom: 3px solid var(--iron); }
.index ul { list-style: none; margin: 0; padding: 0; }
.index li a { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; padding: 22px 0; border-bottom: 1px solid var(--rule); text-decoration: none; }
.index li span { font-family: "Big Shoulders Display", sans-serif; font-weight: 700; font-size: clamp(1.6rem, 3.4vw, 2.8rem); text-transform: uppercase; transition: color .2s, padding .2s; }
.index li em { font-style: normal; color: var(--graphite); font-size: .95rem; text-align: right; }
.index li a:hover span { color: var(--bronze); padding-left: 14px; }
.hiring { position: relative; }
.hiring img { width: 100%; height: 560px; object-fit: cover; }
.hiring__panel { position: absolute; right: var(--gutter); bottom: -1px; max-width: 520px; background: var(--paper); padding: 40px 40px 44px; border-top: 6px solid var(--bronze); }

/* sheets (inner pages) */
.sheet { padding: 0 var(--gutter) 110px; }
.sheet__head { padding: clamp(48px, 7vw, 100px) 0 48px; border-bottom: 1px solid var(--iron); margin-bottom: 48px; display: grid; grid-template-columns: 1fr; }
.sheet__head h1 { font-size: clamp(3rem, 8vw, 7rem); max-width: 14ch; }
.sheet__head > p:last-child { max-width: 58ch; font-size: 1.1rem; }
.sheet__wide { margin: 56px calc(var(--gutter) * -1); }
.sheet__wide img { width: 100%; aspect-ratio: 18 / 7; object-fit: cover; }
.sheet__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; margin: 0 calc(var(--gutter) * -1); }
.sheet__pair img { width: 100%; aspect-ratio: 9 / 6.4; object-fit: cover; }
.stations { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; border-top: 1px solid var(--iron); }
.stations article { padding: 28px 22px 32px 0; border-right: 1px solid var(--rule); margin-right: 22px; }
.stations article:last-child { border-right: 0; margin-right: 0; }
.stations h2 { font-size: 1.9rem; }
.stations p { font-size: .95rem; }
.fieldgrid { display: grid; grid-template-columns: 5fr 6fr; gap: var(--gutter); align-items: start; }
.fieldgrid figure { margin: 0; }
.fieldgrid img { aspect-ratio: 9 / 11; object-fit: cover; width: 100%; }
.daylist { padding: 0; list-style: none; counter-reset: d; }
.daylist li { counter-increment: d; padding: 18px 0 18px 64px; border-bottom: 1px solid var(--rule); position: relative; }
.daylist li::before { content: counter(d, upper-roman); position: absolute; left: 0; top: 14px; font-family: "Big Shoulders Display", sans-serif; font-size: 1.7rem; color: var(--bronze); font-weight: 700; }
.plate { display: grid; grid-template-columns: 5fr 7fr; gap: var(--gutter); align-items: center; padding: 48px 0; border-bottom: 1px solid var(--rule); scroll-margin-top: 20px; }
.plate img { aspect-ratio: 9 / 11; object-fit: cover; width: 100%; }
.plate--flip { grid-template-columns: 7fr 5fr; }
.plate--flip img { order: 2; }
.plate p { max-width: 52ch; font-size: 1.05rem; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gutter); }
.two__col h2 { border-bottom: 3px solid var(--iron); padding-bottom: 12px; }
.jobs dt { font-weight: 650; font-size: 1.08rem; padding-top: 18px; }
.jobs dd { margin: 4px 0 0; padding-bottom: 18px; border-bottom: 1px solid var(--rule); color: var(--graphite); }
.apply { max-width: 760px; }
.quote { max-width: 900px; border-top: 1px solid var(--iron); }
.quote__row { display: grid; grid-template-columns: 220px 1fr; gap: 24px; align-items: start; padding: 18px 0; border-bottom: 1px solid var(--rule); }
.quote label { font-weight: 600; padding-top: 10px; }
.quote input, .quote select, .quote textarea { font: inherit; background: transparent; border: 0; border-bottom: 2px solid var(--iron); padding: 10px 0; width: 100%; color: var(--iron); border-radius: 0; }
.quote textarea { border: 2px solid var(--iron); padding: 12px; }
.quote input:focus, .quote select:focus, .quote textarea:focus { outline: none; border-color: var(--bronze); }
.quote__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; padding: 28px 0; }
.quote__msg { margin: 0; font-size: .92rem; color: var(--graphite); max-width: 52ch; }

/* colophon */
.colophon { background: var(--iron); color: #BEB8AD; padding: 72px var(--gutter) 24px; margin-top: 0; }
.colophon__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; font-size: .92rem; }
.colophon h2 { font-family: "Work Sans", sans-serif; font-size: .7rem; letter-spacing: .22em; color: var(--bronze); font-weight: 600; margin-bottom: 12px; line-height: 1.4; }
.colophon a { color: var(--paper); }
.colophon__word { color: var(--paper); margin: 72px 0 18px; opacity: .95; }
.colophon__word svg { width: 100%; height: auto; display: block; }
.colophon__base { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: .78rem; border-top: 1px solid #3A3D40; padding-top: 16px; margin: 0; }
:focus-visible { outline: 2px solid var(--bronze); outline-offset: 3px; }

@media (max-width: 1060px) {
  .masthead { flex-wrap: wrap; }
  .masthead__toggle { display: inline-block; background: none; border: 1px solid var(--iron); font: 600 .8rem/1 "Work Sans", sans-serif; letter-spacing: .18em; text-transform: uppercase; padding: 14px 16px; cursor: pointer; min-height: 44px; }
  .masthead__toggle[aria-expanded="true"] { background: var(--iron); color: var(--paper); }
  .masthead nav { width: 100%; display: none; }
  .masthead nav.open { display: block; }
  .masthead ol { flex-direction: column; gap: 0; padding: 12px 0 4px; }
  .masthead ol a { display: block; padding: 14px 0; border-top: 1px solid var(--rule); font-family: "Big Shoulders Display", sans-serif; font-weight: 700; font-size: 1.8rem; text-transform: uppercase; }
  .masthead ol a::after { display: none; }
  .stations { grid-template-columns: 1fr 1fr; }
  .stations article { border-right: 0; margin-right: 0; border-bottom: 1px solid var(--rule); }
  .colophon__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 820px) {
  .opening, .fieldgrid, .plate, .plate--flip, .two, .halves { grid-template-columns: 1fr; }
  .plate--flip img { order: 0; }
  .opening h1 { white-space: normal; font-size: clamp(3.4rem, 17vw, 6rem); margin-bottom: .15em; }
  .opening__fig img { aspect-ratio: 4 / 3; }
  .opening__foot { grid-template-columns: 1fr; }
  .process ol { grid-template-columns: repeat(3, 1fr); }
  .process li:nth-child(4) { border-left: 0; padding-left: 0; }
  .process li { border-top: 1px solid var(--rule); }
  .essay__cols { columns: 1; }
  .index li a { flex-direction: column; gap: 4px; }
  .index li em { text-align: left; }
  .hiring img { height: 340px; }
  .hiring__panel { position: static; max-width: none; }
  .sheet__pair { grid-template-columns: 1fr; }
  .quote__row { grid-template-columns: 1fr; gap: 4px; }
  .quote label { padding-top: 0; }
}
@media (max-width: 520px) {
  html { font-size: 16px; }
  .masthead__brand img { width: 170px; }
  .stations, .colophon__grid { grid-template-columns: 1fr; }
  .process ol { grid-template-columns: 1fr 1fr; }
  .process li:nth-child(odd) { border-left: 0; padding-left: 0; }
  .process li:nth-child(4) { border-left: 1px solid var(--rule); padding-left: 14px; }
  .hiring__panel { padding: 28px 22px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }