/* =========================================================
   OW DESIGN — "Exhibition Wall Label" design system
   Signature: a museum object-label panel overlapping a
   large portrait photo, "Fig." numbered section heads,
   gallery-piece cards with a curatorial medium caption,
   and a numbered "room" walkthrough instead of a technical
   process diagram. Distinct from the blueprint/title-block
   language used for the earlier Jorco Design build, and
   from every other prior signature (nameplate, swing-tag,
   scoreboard, swatch deck).
   ========================================================= */

:root{
  --paper:   #F5F3EE;   /* gallery wall — warm white         */
  --paper-2: #FFFFFF;   /* card / label surface               */
  --ink:     #1B1A17;   /* near-black — primary dark          */
  --stone:   #726C60;   /* secondary text                      */
  --line:    #E2DDD1;   /* hairline on paper                   */
  --petrol:  #1F4B4C;   /* petrol teal — primary accent        */
  --red-dot: #C1443B;   /* museum "sold dot" red — sparing use */

  --font-display:'Instrument Serif', serif;
  --font-body:   'Archivo', sans-serif;
  --font-mono:   'Fragment Mono', monospace;

  --wrap: 1160px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}

a{ color:inherit; text-decoration:none; }
h1,h2,h3{ font-family:var(--font-display); font-weight:400; margin:0 0 0.4em; color:var(--ink); }
em{ font-style:italic; color:var(--petrol); }
p{ margin:0 0 1em; color:var(--stone); }
svg{ display:block; }
:focus-visible{ outline:2px solid var(--petrol); outline-offset:3px; }

.wrap{ max-width:var(--wrap); margin:0 auto; padding:0 28px; }

.fig{
  font-family:var(--font-mono);
  font-size:0.72rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--petrol);
  margin:0 0 0.9em;
}

/* =================== HEADER =================== */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(245,243,238,0.92);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
}
.header-row{
  display:flex; align-items:center; justify-content:space-between;
  gap:20px; padding:16px 28px;
}
.brand{ display:flex; align-items:center; gap:12px; }
.plane-mark{ color:var(--ink); width:36px; height:25px; flex:0 0 auto; }
.plane-mark svg{ width:100%; height:100%; }
.brand-name{
  font-family:var(--font-display);
  font-size:1.4rem;
  letter-spacing:0.02em;
  color:var(--ink);
}
.brand-name span{
  color:var(--stone);
  font-size:0.65em;
  font-family:var(--font-mono);
  letter-spacing:0.1em;
  text-transform:uppercase;
  margin-left:4px;
}

.main-nav{ display:flex; gap:32px; }
.main-nav a{
  font-family:var(--font-mono);
  font-size:0.8rem;
  color:var(--ink);
  padding:6px 2px;
  border-bottom:1px solid transparent;
  transition:color .15s, border-color .15s;
}
.main-nav a:hover{ color:var(--petrol); border-color:var(--petrol); }

.cta-line{
  font-family:var(--font-mono);
  font-size:0.8rem;
  color:var(--ink);
  padding:10px 0;
  border-bottom:1.5px solid var(--ink);
  transition:color .15s, border-color .15s;
}
.cta-line:hover{ color:var(--petrol); border-color:var(--petrol); }

/* =================== BUTTONS =================== */
.btn{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--font-mono);
  font-size:0.86rem;
  padding:13px 22px;
  border:1px solid transparent;
  transition:transform .15s, background .15s, border-color .15s, color .15s;
}
.btn:hover{ transform:translateY(-1px); }
.btn-primary{ background:var(--ink); color:var(--paper-2); }
.btn-primary:hover{ background:var(--petrol); }
.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--ink); }
.btn-ghost:hover{ background:var(--ink); color:var(--paper-2); }

/* =================== HERO =================== */
.hero{ padding:70px 0 110px; }
.hero .wrap{
  display:grid;
  grid-template-columns:1fr 1.05fr;
  gap:60px;
  align-items:center;
}
.hero-title{
  font-size:clamp(2.5rem, 5vw, 4rem);
  line-height:1.05;
  margin-bottom:0.4em;
  max-width:14ch;
}
.hero-sub{
  max-width:44ch;
  font-size:1.05rem;
}
.hero-actions{ display:flex; gap:14px; margin-top:26px; flex-wrap:wrap; }

.hero-exhibit{ position:relative; }
.hero-photo{ min-height:440px; border:1px solid var(--line); overflow:hidden; }
.hero-photo img{ display:block; width:100%; height:100%; object-fit:cover; }

/* =================== WALL LABEL (signature) =================== */
.wall-label{
  background:var(--paper-2);
  border:1px solid var(--line);
  padding:22px 24px 18px;
  box-shadow:0 22px 44px -26px rgba(27,26,23,0.4);
}
.hero-exhibit .wall-label{
  position:absolute;
  left:-40px;
  bottom:-30px;
  width:280px;
}
.wl-fig{
  font-family:var(--font-mono);
  font-size:0.66rem;
  letter-spacing:0.13em;
  text-transform:uppercase;
  color:var(--petrol);
  margin:0 0 14px;
}
.wl-rows{ margin:0; }
.wl-rows > div{
  padding:9px 0;
  border-bottom:1px solid var(--line);
  display:grid;
  grid-template-columns:88px 1fr;
  gap:8px;
  align-items:baseline;
}
.wl-rows > div:last-child{ border-bottom:none; }
.wl-rows dt{
  font-family:var(--font-mono);
  font-size:0.65rem;
  letter-spacing:0.04em;
  text-transform:uppercase;
  color:var(--stone);
}
.wl-rows dd{
  margin:0;
  font-size:0.86rem;
  color:var(--ink);
  font-weight:500;
}
.wl-rows dd a{ border-bottom:1px solid var(--line); transition:border-color .15s, color .15s; }
.wl-rows dd a:hover{ color:var(--petrol); border-color:var(--petrol); }
.wl-status dd{ display:flex; align-items:center; gap:7px; }
.dot{
  width:7px; height:7px; border-radius:50%;
  background:var(--red-dot);
  flex:0 0 auto;
}

/* =================== COLLECTION =================== */
.collection{ padding:100px 0 96px; }
.section-head{ max-width:640px; margin-bottom:50px; }
.section-head h2{ font-size:clamp(1.9rem, 3.4vw, 2.6rem); }

.piece-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:1px;
  background:var(--line);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.piece{
  position:relative;
  background:var(--paper-2);
  padding:32px 22px 24px;
}
.piece-photo{
  position:relative;
  margin:-32px -22px 20px;
  aspect-ratio:4/3;
  overflow:hidden;
  border-bottom:1px solid var(--line);
}
.piece-photo img{ display:block; width:100%; height:100%; object-fit:cover; }
.piece-no{
  position:absolute;
  top:12px; right:14px;
  font-family:var(--font-mono);
  font-size:0.72rem;
  color:var(--paper-2);
  background:rgba(27,26,23,0.55);
  padding:2px 7px;
}
.p-icon{ width:34px; height:34px; color:var(--petrol); margin-bottom:20px; }
.piece h3{ font-size:1.2rem; margin-bottom:0.3em; }
.piece p{ font-size:0.9rem; margin-bottom:1.2em; }
.p-medium{
  display:block;
  font-family:var(--font-mono);
  font-size:0.68rem;
  letter-spacing:0.04em;
  color:var(--stone);
  border-top:1px solid var(--line);
  padding-top:10px;
}

/* =================== WALKTHROUGH =================== */
.walkthrough{ padding:96px 0; background:var(--ink); }
.walkthrough .fig{ color:#7FA8A5; }
.walkthrough h2{ color:var(--paper-2); }

.rooms{
  position:relative;
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:30px;
}
.rooms-line{
  position:absolute;
  top:-20px; left:0; right:0;
  height:1px;
  background:#3A3934;
}
.room-no{
  display:block;
  font-family:var(--font-mono);
  font-size:0.7rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:#7FA8A5;
  margin-bottom:16px;
}
.room h3{ color:var(--paper-2); font-size:1.35rem; margin-bottom:0.3em; }
.room p{ color:#AFAA9F; font-size:0.9rem; }

/* =================== PROVENANCE =================== */
.provenance{ padding:96px 0; }
.plaque-row{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:20px;
  margin-bottom:44px;
}
.plaque{
  background:var(--paper-2);
  border:1px solid var(--line);
  padding:24px 20px;
}
.plaque svg{ width:28px; height:28px; color:var(--petrol); margin-bottom:14px; }
.plaque h3{ font-size:1.05rem; margin-bottom:0.3em; }
.plaque p{ font-family:var(--font-mono); font-size:0.78rem; color:var(--stone); margin:0; }

.map-placeholder{ min-height:180px; border:1px solid var(--line); overflow:hidden; }
.map-placeholder img{ display:block; width:100%; height:100%; object-fit:cover; }

/* =================== CONTACT =================== */
.contact-cta{ padding:0 0 104px; }
.contact-panel{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:44px;
  align-items:start;
  border:1px solid var(--line);
  background:var(--paper-2);
  padding:46px;
}
.contact-copy h2{ font-size:clamp(1.9rem, 3.4vw, 2.4rem); }
.contact-copy p{ max-width:38ch; }
.wall-label-contact{ box-shadow:none; }

.contact-form{ margin-top:20px; max-width:38ch; }
.form-row{ margin-bottom:16px; display:flex; flex-direction:column; gap:6px; }
.form-row label{
  font-family:var(--font-mono);
  font-size:0.68rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--stone);
}
.form-row input,
.form-row textarea{
  font-family:var(--font-body);
  font-size:0.92rem;
  color:var(--ink);
  background:var(--paper-2);
  border:1px solid var(--line);
  padding:11px 13px;
  resize:vertical;
}
.form-row input::placeholder,
.form-row textarea::placeholder{ color:#A29C90; }
.form-row input:focus,
.form-row textarea:focus{ outline:none; border-color:var(--petrol); }
.form-submit{ border:none; cursor:pointer; margin-top:4px; }

/* =================== FOOTER =================== */
.site-footer{
  background:var(--ink);
  color:#A29C90;
  padding:36px 0;
}
.footer-row{
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
}
.footer-brand{ display:flex; align-items:center; gap:12px; }
.footer-brand .plane-mark{ color:var(--paper-2); }
.footer-name{ color:var(--paper-2); font-family:var(--font-display); font-size:1.15rem; margin:0; }
.footer-uen{ font-family:var(--font-mono); font-size:0.72rem; margin:0; color:#7FA8A5; }
.footer-meta{ font-family:var(--font-mono); font-size:0.78rem; text-align:right; }
.footer-meta p{ margin:0 0 4px; color:#A29C90; }
.footer-copy{ width:100%; text-align:center; font-family:var(--font-mono); font-size:0.7rem; color:#645F55; margin:26px 0 0; padding-top:20px; border-top:1px solid #37352F; }

/* =================== RESPONSIVE =================== */
@media (max-width: 980px){
  .main-nav{ display:none; }
  .hero .wrap{ grid-template-columns:1fr; gap:80px; }
  .hero-photo{ min-height:340px; }
  .hero-exhibit .wall-label{ position:static; width:auto; margin-top:-40px; margin-left:24px; margin-right:0; }
  .piece-grid{ grid-template-columns:repeat(2, 1fr); }
  .plaque-row{ grid-template-columns:repeat(2, 1fr); }
  .rooms{ grid-template-columns:repeat(2, 1fr); gap:36px 24px; }
  .rooms-line{ display:none; }
  .contact-panel{ grid-template-columns:1fr; }
}

@media (max-width: 600px){
  .wrap{ padding:0 18px; }
  .header-row{ padding:14px 18px; }
  .hero{ padding:52px 0 80px; }
  .hero-actions{ flex-direction:column; }
  .btn{ justify-content:center; }
  .hero-exhibit .wall-label{ margin-left:0; }
  .piece-grid{ grid-template-columns:1fr; }
  .plaque-row{ grid-template-columns:1fr; }
  .rooms{ grid-template-columns:1fr; }
  .wl-rows > div{ grid-template-columns:1fr; gap:3px; }
  .footer-row{ flex-direction:column; align-items:flex-start; }
  .footer-meta{ text-align:left; }
  .contact-panel{ padding:28px; }
}