/* MHT Website 1.0. System fonts and local assets only. */
:root {
  color-scheme: dark;
  --ink: #090b0d;
  --panel: #111518;
  --line: #30363a;
  --text: #eff0ec;
  --muted: #a6adb0;
  --red: #ee422f;
  --metal: #c9cdcc;
  --max: 1280px;
  font-family: "Segoe UI", Arial, sans-serif;
  background: var(--ink);
  color: var(--text);
  font-synthesis: none;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 110px; }
body { margin: 0; font-size: 17px; line-height: 1.6; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--red); }
button, input, select { font: inherit; }
button, select { cursor: pointer; }
img { display: block; max-width: 100%; height: auto; }
figure, h1, h2, h3, p { margin: 0; }
p + p { margin-top: 1.2em; }
button, a, input, select, summary { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid var(--red); outline-offset: 5px; }
[hidden] { display: none !important; }
.wrap { width: min(var(--max), calc(100% - 112px)); margin-inline: auto; }
.skip { position: fixed; top: -100px; left: 20px; z-index: 20; padding: 12px; background: var(--text); color: var(--ink); }
.skip:focus { top: 10px; }
.site-header { background: #090b0df5; border-bottom: 1px solid var(--line); }
.header-inner { min-height: 100px; display: flex; justify-content: space-between; align-items: center; gap: 36px; }
.brand { font-size: 18px; font-weight: 800; letter-spacing: .045em; line-height: 1.15; display: inline-flex; flex-direction: column; flex-shrink: 0; }
.brand span { color: var(--muted); font-weight: 500; font-size: 11px; letter-spacing: .34em; margin-top: 6px; }
.site-nav { display: flex; align-items: center; gap: 29px; font-size: 13px; font-weight: 600; }
.site-nav a { padding-block: 14px; min-height: 44px; display: inline-flex; align-items: center; }
.site-nav a[aria-current="page"] { color: var(--text); text-decoration: underline; text-decoration-color: var(--red); text-underline-offset: 9px; }
.site-nav .nav-contact { border: 1px solid #747c7e; padding: 11px 19px; }
.site-nav .nav-contact:hover { border-color: var(--red); }
.eyebrow { text-transform: uppercase; font-size: 11px; letter-spacing: .2em; font-weight: 650; color: var(--metal); display: flex; gap: 12px; align-items: center; }
.eyebrow::before { content: ""; width: 24px; height: 2px; background: var(--red); }
.hero { display: grid; grid-template-columns: 1.2fr 1fr; gap: 74px; padding-top: 72px; padding-bottom: 78px; align-items: center; position: relative; }
.hero::before { content: ""; position: absolute; top: 0; right: 0; width: 160px; height: 100px; background: linear-gradient(90deg, transparent 49%, #40484a60 49%, #40484a60 50%, transparent 50%); background-size: 24px 100%; pointer-events: none; }
.hero h1 { font-size: clamp(46px, 5.25vw, 76px); line-height: 1.04; letter-spacing: -.055em; margin: 30px 0; font-weight: 750; }
.hero h1 span { color: var(--red); }
.hero .lead { color: var(--muted); max-width: 480px; font-size: 18px; line-height: 1.7; }
.hero-actions { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; margin-top: 34px; }
.button { display: inline-flex; align-items: center; gap: 26px; background: var(--red); color: #fff; padding: 15px 22px; font-size: 13px; font-weight: 700; border: 1px solid var(--red); }
.button:hover { background: #d33625; color: white; border-color: #d33625; }
.button.secondary { background: transparent; border-color: #60696d; }
.button.secondary:hover { border-color: var(--text); }
.text-link { font-size: 13px; font-weight: 650; padding-block: 8px; border-bottom: 1px solid #626c6f; display: inline-flex; gap: 25px; align-items: center; }
.arrow { color: currentColor; font-size: 19px; line-height: 1; }
.hero-footnote { margin-top: 47px; display: flex; gap: 14px; color: #838e93; font-size: 11px; text-transform: uppercase; letter-spacing: .13em; }
.hero-footnote span + span::before { content: "/"; color: var(--red); margin-right: 14px; }
.hero-photo { position: relative; max-width: 460px; width: 100%; justify-self: end; }
.hero-photo::before { content: ""; position: absolute; z-index: -1; inset: 18px -18px -18px 18px; border: 1px solid #555e62; }
.hero-photo::after { content: ""; position: absolute; right: -18px; top: -14px; width: 82px; height: 82px; border-right: 3px solid var(--red); border-top: 3px solid var(--red); pointer-events: none; }
.hero-photo img { width: 100%; aspect-ratio: 3 / 4; object-fit: contain; background: #141a1e; }
.hero-photo figcaption { padding: 14px 17px; background: #1a2024; display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 11px; color: #c8cece; text-transform: uppercase; letter-spacing: .12em; }
.signal-line { border-block: 1px solid var(--line); }
.signal-inner { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; padding-block: 24px; font-size: 11px; font-weight: 650; text-transform: uppercase; letter-spacing: .12em; color: #aeb6b7; }
.signal-inner span::before { content: "+"; color: var(--red); margin-right: 12px; }
.section { padding-block: 94px; }
.section-header { display: flex; justify-content: space-between; align-items: flex-end; gap: 35px; margin-bottom: 40px; }
h2 { font-size: clamp(32px, 3.5vw, 49px); line-height: 1.13; font-weight: 650; letter-spacing: -.04em; }
.section-header h2 { margin-top: 16px; }
.intro-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 110px; }
.intro-grid .copy { color: var(--muted); font-size: 18px; }
.intro-grid .eyebrow { margin-bottom: 24px; }
.work-section { background: #111518; border-block: 1px solid var(--line); }
.featured-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.work-card picture { display: block; background: #080b0e; overflow: hidden; }
.work-card img { width: 100%; height: 410px; object-fit: contain; transition: transform .35s ease; }
.work-card:hover img { transform: scale(1.025); }
.work-card:first-child img { object-fit: cover; }
.work-card .work-caption { padding-top: 22px; display: flex; justify-content: space-between; gap: 20px; align-items: start; }
.work-card h3 { font-size: 24px; font-weight: 600; letter-spacing: -.02em; }
.work-card p { color: var(--muted); font-size: 14px; margin-top: 8px; }
.work-index { font: 12px Consolas, monospace; color: var(--red); padding-top: 8px; }
.capability-list { display: grid; grid-template-columns: 1fr 1fr; column-gap: 64px; list-style: none; margin: 0; padding: 0; }
.capability-list li { padding: 24px 0; display: grid; grid-template-columns: 28px 1fr; gap: 18px; border-top: 1px solid var(--line); }
.capability-list .number { color: var(--red); font: 11px Consolas, monospace; padding-top: 7px; }
.capability-list h3 { font-size: 19px; line-height: 1.4; font-weight: 600; }
.capability-list p { color: var(--muted); margin-top: 9px; font-size: 15px; }
.about-band { border-top: 1px solid var(--line); display: grid; grid-template-columns: .7fr 1.3fr; gap: 70px; }
.about-band h2 { font-size: clamp(32px, 3vw, 42px); }
.about-band .copy { max-width: 700px; color: var(--muted); font-size: 18px; }
.about-band .text-link { color: var(--text); margin-top: 25px; }
.contact-band { background: #191c1e; border-block: 1px solid #424849; position: relative; }
.contact-band::after { content: ""; position: absolute; right: 0; bottom: 0; width: 150px; height: 60px; border-bottom: 4px solid var(--red); border-right: 4px solid var(--red); }
.contact-inner { padding-block: 76px; display: flex; align-items: center; justify-content: space-between; gap: 60px; }
.contact-inner h2 { max-width: 780px; font-size: clamp(30px, 3vw, 43px); }
.contact-inner .button { flex-shrink: 0; }
.site-footer { padding-block: 35px; color: #929da2; font-size: 12px; }
.footer-inner { display: flex; justify-content: space-between; align-items: center; gap: 25px; }
.footer-links { display: flex; gap: 25px; }
.page-hero { padding-block: 72px 60px; border-bottom: 1px solid var(--line); }
.page-hero h1 { margin-top: 24px; max-width: 950px; font-size: clamp(42px, 5vw, 70px); line-height: 1.08; letter-spacing: -.045em; font-weight: 650; }
.page-hero .lead { margin-top: 24px; max-width: 720px; color: var(--muted); font-size: 19px; }
.page-hero .lead em { color: var(--text); font-style: normal; }
.portfolio-toolbar { display: flex; flex-wrap: wrap; gap: 20px; align-items: end; padding-block: 24px; border-bottom: 1px solid var(--line); }
.portfolio-toolbar label { display: grid; gap: 7px; font-size: 12px; color: var(--muted); flex: 1; min-width: 200px; }
.portfolio-toolbar select, .portfolio-toolbar input { min-height: 44px; width: 100%; color: var(--text); background: #11171b; border: 1px solid #555e63; padding: 10px 12px; border-radius: 0; }
.portfolio-toolbar output { color: var(--muted); font-size: 12px; padding-bottom: 10px; }
.project { padding-block: 65px; border-bottom: 1px solid var(--line); scroll-margin-top: 28px; }
.project:target { border-top: 2px solid var(--red); }
.project-header { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; margin-bottom: 24px; }
.project h2 { font-size: 29px; }
.project .project-meta { font-size: 11px; letter-spacing: .13em; color: var(--muted); text-transform: uppercase; }
.project-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.gallery-photo { background: #11171b; border: 1px solid #272e32; }
.gallery-photo img { width: 100%; height: 310px; object-fit: contain; background: #080b0d; }
.gallery-photo figcaption { display: flex; justify-content: space-between; gap: 15px; padding: 12px 15px; color: var(--muted); font-size: 12px; }
.gallery-photo a:hover { color: var(--text); }
.gallery-photo a:focus-visible { display: block; }
.no-results { padding-block: 60px; color: var(--muted); }
.content-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; }
.content-columns .copy { color: var(--muted); }
.content-columns h2 { margin-bottom: 25px; font-size: 35px; }
.contact-details { border: 1px solid var(--line); padding: 30px; background: var(--panel); }
.contact-details h2 { font-size: 24px; }
.placeholder { margin-block: 22px; padding: 16px 20px; border-left: 2px solid var(--red); background: #191e22; }
.placeholder strong { display: block; color: var(--text); font-size: 14px; }
.placeholder span { display: block; font-size: 14px; color: var(--muted); margin-top: 6px; }
.inquiry-list { padding-left: 22px; color: var(--muted); }
.inquiry-list li { margin-block: 14px; padding-left: 5px; }
.quiet-note { color: var(--muted); font-size: 13px; }
@media (min-width: 1500px) { .hero { gap: 110px; } }
@media (max-width: 1050px) {
  .wrap { width: calc(100% - 64px); }
  .hero { gap: 42px; }
  .site-nav { gap: 18px; }
  .hero h1 { font-size: 55px; }
  .intro-grid { gap: 50px; }
  .work-card img { height: 330px; }
  .project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .wrap { width: calc(100% - 40px); }
  .header-inner { display: block; min-height: 0; padding-block: 23px 16px; }
  .brand { font-size: 17px; }
  .site-nav { gap: 19px; flex-wrap: wrap; font-size: 12px; margin-top: 18px; }
  .site-nav a { padding-block: 4px; }
  .site-nav .nav-contact { border: none; padding: 4px 0; }
  .hero { grid-template-columns: 1fr; padding-block: 48px 60px; gap: 42px; }
  .hero h1 { font-size: clamp(45px, 9vw, 66px); }
  .hero .lead { font-size: 17px; }
  .hero-photo { max-width: 100%; padding-right: 12px; }
  .hero-photo img { max-height: 550px; }
  .hero-photo::before { inset: 10px 0 -10px 10px; }
  .hero-photo::after { right: 0; }
  .hero-footnote { margin-top: 30px; flex-wrap: wrap; }
  .signal-inner { justify-content: flex-start; column-gap: 25px; font-size: 10px; }
  .section { padding-block: 58px; }
  .intro-grid, .featured-grid, .capability-list, .about-band, .content-columns { grid-template-columns: 1fr; gap: 30px; }
  .section-header { display: block; }
  .section-header > .text-link { margin-top: 24px; }
  .work-card img { height: 340px; }
  .capability-list { gap: 0; }
  .contact-inner { display: block; padding-block: 52px; }
  .contact-inner .button { margin-top: 28px; }
  .footer-inner { align-items: flex-start; flex-direction: column; }
  .page-hero { padding-block: 48px; }
  .project-grid { gap: 13px; }
  .project-header { display: block; }
  .project-meta { display: block; margin-top: 10px; }
  .gallery-photo img { height: 235px; }
  .project { padding-block: 42px; }
  .contact-details { padding: 22px; }
}
@media (max-width: 440px) {
  .site-nav { column-gap: 17px; row-gap: 10px; }
  .project-grid { grid-template-columns: 1fr; }
  .gallery-photo img { height: 330px; }
  .hero-actions { gap: 18px; }
  .work-card img { height: 300px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .work-card img { transition: none; }
}
/* Website 2.0: restrained gunmetal surfaces, fine chrome edges. */
:root { --ink:#121517; --panel:#191d20; --line:#ffffff16; --text:#f0f1ef; --muted:#b0b7bb; --red:#ec4b3d; --metal:#c6cdd0; }
body { background:radial-gradient(ellipse at 80% 0%,#2b303430,transparent 60%),var(--ink); padding-top:88px; }
.site-header { position:fixed; z-index:30; top:0; left:0; right:0; background:#15191bf5; backdrop-filter:blur(16px); border-bottom:1px solid #a7b1b42b; }
.header-inner { min-height:88px; }
.brand { font-size:17px; }
.site-nav .nav-contact { border-color:#9da8ae45; border-radius:4px; }
.site-nav a:hover { color:#f7f7f4; }
.site-nav a[aria-current] { text-decoration-thickness:2px; }
.button { background:linear-gradient(#dd4d40,#bc332a); border-color:#ff948052; border-radius:4px; }
.page-hero { border-color:#ffffff12; background:linear-gradient(110deg,#22282c45,transparent 65%); }
.section { padding-block:68px; }
.contact-band { background:linear-gradient(110deg,#202629,#181d20); border-color:#ffffff17; }
.contact-band::after { display:none; }
.contact-details { border:0; border-radius:8px; background:linear-gradient(135deg,#23292c90,#171b1e80); box-shadow:inset 0 1px #dce6eb1c; }
.placeholder { background:#ffffff03; }
.site-footer { border-top:1px solid #ffffff0e; padding-block:24px; }
.work-hero { padding-block:42px 34px; }
.work-hero h1 { font-size:clamp(40px,4.4vw,60px); margin-top:17px; }
.work-hero h1 span { color:#bbc3c8; }
.work-hero .lead { font-size:16px; margin-top:18px; }
.collection-browser { padding-block:24px 50px; }
.category-filters { display:flex; flex-wrap:wrap; gap:8px 20px; border-bottom:1px solid #ccd5dc22; padding-bottom:15px; }
.category-filters button { background:transparent; color:#bac2c7; border:0; border-bottom:2px solid transparent; min-height:44px; padding:8px 0; font-size:13px; }
.category-filters button[aria-pressed=true] { border-color:var(--red); color:#fff; }
.category-filters button:hover { color:#fff; }
.gallery-controls { display:flex; align-items:end; flex-wrap:wrap; gap:18px; padding-block:22px; }
.gallery-controls label { display:grid; gap:6px; font-size:12px; color:var(--muted); }
.gallery-controls label:first-child { flex:1; max-width:340px; }
.gallery-controls input,.gallery-controls select { width:100%; min-height:44px; padding:9px 12px; border:1px solid #d5e0e52c; border-radius:4px; color:var(--text); background:#1c2225; }
.gallery-controls output { margin-left:auto; padding-bottom:10px; font-size:12px; color:var(--muted); }
.collection-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:30px 24px; }
.collection-card { min-width:0; display:block; border-radius:7px; background:linear-gradient(150deg,#262c302b,transparent); overflow:hidden; }
.collection-card picture { display:block; overflow:hidden; background:#0b0e10; }
.collection-card img { width:100%; height:220px; object-fit:contain; transition:transform .3s ease; }
.collection-card:hover img { transform:scale(1.025); }
.collection-caption { padding:17px 6px 16px; border-bottom:1px solid #c4d0d51c; }
.collection-type { color:#b3bcc2; text-transform:uppercase; font-size:10px; letter-spacing:.1em; }
.collection-card h2 { font-size:21px; letter-spacing:-.025em; margin-top:9px; line-height:1.25; }
.collection-card h2 span { color:var(--red); float:right; }
.collection-caption p { font-size:12px; color:#aeb8be; margin-top:9px; }
.pagination { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:24px; border-top:1px solid #ffffff13; padding-top:24px; margin-top:28px; font-size:13px; }
.pagination button { min-height:44px; padding:9px 17px; color:var(--text); background:linear-gradient(#2c3337,#202629); border:1px solid #c3d0d52c; border-radius:4px; }
.pagination button:disabled { opacity:.4; cursor:default; }
.collection-detail > .eyebrow { margin-top:32px; }
.collection-detail h1 { font-size:clamp(32px,4vw,52px); line-height:1.15; letter-spacing:-.035em; margin:20px 0 14px; }
.collection-detail .project-grid { margin-top:30px; }
.gallery-photo { border:0; border-radius:5px; overflow:hidden; background:#171c1f; }
.control-hero { position:relative; min-height:calc(100svh - 180px); display:grid; isolation:isolate; }
.hero-background,.hero-shade { position:absolute; inset:0; z-index:-1; }
.hero-background picture,.hero-background img { display:block; width:100%; height:100%; }
.hero-background img { object-fit:cover; object-position:55% 45%; }
.hero-shade { background:linear-gradient(90deg,#0b1014ee 0%,#0d1218a8 45%,#0b111760 100%),linear-gradient(0deg,#111619e0,transparent 45%); }
.control-content { display:flex; flex-direction:column; justify-content:center; padding-block:48px 24px; }
.control-copy { max-width:770px; }
.control-copy h1 { font-size:clamp(42px,5.4vw,76px); line-height:1.06; font-weight:650; letter-spacing:-.055em; margin:24px 0; }
.control-copy h1 span { color:#c3ccd2; }
.control-copy .lead { max-width:560px; font-size:17px; color:#c5cbd0; }
.hero-widgets { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:15px; margin-top:58px; }
.hero-widget { position:relative; min-width:0; display:flex; align-items:center; background:linear-gradient(135deg,#404a51ad,#1b2228c7); box-shadow:inset 0 1px #e4f1f338,0 10px 30px #0003; border-radius:6px; }
.hero-widget > a { flex:1; min-height:76px; display:flex; align-items:center; gap:12px; padding:14px 12px; font-size:15px; }
.hero-widget > a:hover { color:#fff; }
.widget-index { font:10px Consolas,monospace; color:#c2cbd0; }
.hero-widget > a > span:last-child { color:var(--red); margin-left:auto; }
.preview-toggle { color:#dbe0e4; background:#ffffff08; border:0; border-radius:0 6px 6px 0; min-height:76px; min-width:44px; font-size:21px; }
.widget-preview { position:absolute; bottom:calc(100% + 10px); left:0; right:0; padding:20px; background:linear-gradient(135deg,#343c42,#1a2126); border-radius:6px; box-shadow:inset 0 1px #e3eef34a,0 12px 40px #0008; visibility:hidden; opacity:0; transform:translateY(5px); transition:opacity .18s,transform .18s; z-index:5; }
.widget-preview::after { content:""; position:absolute; top:100%; left:0; right:0; height:12px; }
.widget-preview strong { font-size:15px; }
.widget-preview p { color:#c4cdd3; font-size:13px; margin-top:8px; }
.widget-preview a { display:inline-flex; min-height:44px; align-items:center; font-size:12px; margin-top:8px; color:#f1f3f5; }
.hero-widget:not(.preview-dismissed):focus-within .widget-preview,.hero-widget.preview-open .widget-preview { visibility:visible; opacity:1; transform:none; }
@media (hover:hover) { .hero-widget:not(.preview-dismissed):hover .widget-preview { visibility:visible; opacity:1; transform:none; } }
.hero-status { font:10px Consolas,monospace; letter-spacing:.14em; color:#bbc5cb; margin-top:34px; }
@media (max-width:1050px) { .collection-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .hero-widgets { grid-template-columns:repeat(2,minmax(0,1fr)); max-width:650px; margin-top:36px; } .control-copy h1 { font-size:58px; } }
@media (max-width:760px) { body { padding-top:158px; } .header-inner { padding-block:18px 10px; } .site-nav { margin-top:10px; row-gap:0; column-gap:16px; } .site-nav a { min-height:44px; } .control-content { padding-top:30px; } .control-copy h1 { font-size:clamp(38px,8.4vw,58px); } .control-copy .lead { font-size:15px; } .control-hero { min-height:0; } .hero-widgets { gap:12px; margin-top:30px; } .hero-widget > a { font-size:13px; gap:7px; padding:12px 9px; } .widget-index { display:none; } .hero-background img { object-position:60% center; } .gallery-controls output { margin-left:0; width:100%; } .collection-card img { height:200px; } .work-hero { padding-block:30px; } .collection-card h2 { font-size:19px; } .collection-caption p { font-size:11px; } .category-filters { gap:6px 16px; } .widget-preview { width:min(290px,calc(100vw - 40px)); right:auto; } .hero-widget:nth-child(even) .widget-preview { left:auto; right:0; } }
@media (max-width:440px) { body { padding-top:183px; } .collection-grid { grid-template-columns:1fr; gap:24px; } .collection-card img { height:230px; } .gallery-controls { gap:14px; } .gallery-controls label:first-child { flex-basis:100%; max-width:none; } .control-copy h1 { font-size:38px; } .hero-widget > a { min-height:64px; } .preview-toggle { min-height:64px; } .pagination { gap:12px; } .brand { font-size:16px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition:none!important; animation:none!important; } }
/* Fixed navigation keeps a consistent footprint at narrow widths. */
body { padding-top:89px; }
@media (max-width:760px) { body { padding-top:126px; } }
@media (max-width:440px) { .site-nav { column-gap:8px; } }

/* Navigation expansion and curated album; original design retained. */
.site-nav{flex-wrap:wrap;column-gap:20px;row-gap:0;justify-content:flex-end}.header-inner{padding-block:14px}.curated-gallery{display:grid;grid-template-columns:1fr 1fr;gap:32px}.curated-gallery img{width:100%;height:480px;object-fit:contain;background:var(--panel)}.curated-gallery figcaption{padding:16px;color:var(--muted);font-size:14px}.curated-cover{max-width:650px;display:block}.curated-cover>img{width:100%;height:400px;object-fit:contain;background:var(--panel)}@media(max-width:700px){.site-nav{justify-content:flex-start}.curated-gallery{grid-template-columns:1fr}.curated-gallery img{height:auto}.header-inner{gap:20px}.curated-cover>img{height:300px}}

/* Flow-based header avoids fixed-height overlap as navigation wraps. */
body{padding-top:0}.site-header{position:sticky;top:0}.curated-gallery img{height:auto;max-height:600px}.curated-gallery{align-items:start}