
* { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body { background:#f2e9d6; color:#2c2213; font-family:Optima, Candara, 'Segoe UI', sans-serif; font-size:16px;
  line-height:1.55; -webkit-font-smoothing:antialiased; }
img { display:block; max-width:100%; }
a { color:#2c2213; text-decoration:none; }

.sheet { padding:clamp(10px,2.5vw,28px);
  background:
    linear-gradient(rgba(44,34,19,0.20) 1px, transparent 1px) 0 0/100% 88px,
    linear-gradient(90deg,rgba(44,34,19,0.20) 1px, transparent 1px) 0 0/88px 100%,
    linear-gradient(rgba(44,34,19,0.10) 1px, transparent 1px) 0 0/100% 22px,
    linear-gradient(90deg,rgba(44,34,19,0.10) 1px, transparent 1px) 0 0/22px 100%,
    #eae1ce; }
.frame { border:2px solid rgba(44,34,19,0.55); padding:clamp(14px,3vw,36px);
  max-width:1180px; margin:0 auto; position:relative; }
.frame::before { content:""; position:absolute; inset:7px; border:1px solid rgba(44,34,19,0.20);
  pointer-events:none; }

.tbar { display:flex; justify-content:space-between; align-items:center;
  font-family:'Courier New', Courier, monospace; font-size:12px; letter-spacing:0.12em;
  border-bottom:1.5px solid rgba(44,34,19,0.55); padding-bottom:12px; margin-bottom:8px;
  color:#7a6a4b; }
.tbar .proj { color:#7a4a22; font-weight:700; }

/* plan / hero */
.plan { padding:clamp(24px,5vw,60px) 0; }
.note { font-family:'Courier New', Courier, monospace; font-size:12px; letter-spacing:0.14em;
  color:#7a4a22; margin-bottom:16px; }
.ttl { font-family:Rockwell, 'Rockwell Nova', 'Roboto Slab', Georgia, serif; font-weight:800; line-height:0.96;
  font-size:clamp(2.6rem,8vw,6rem); letter-spacing:-0.02em; }
.sub { font-family:'Courier New', Courier, monospace; color:#7a6a4b; margin-top:18px; max-width:52ch; }
.dimrow { margin-top:26px; display:flex; gap:12px; flex-wrap:wrap; }
.cta { font-family:'Courier New', Courier, monospace; font-size:12px; letter-spacing:0.14em;
  text-transform:uppercase; border:1.5px solid #7a4a22; color:#7a4a22;
  padding:12px 22px; border-radius:2px; }
.cta:hover { background:#7a4a22; color:#eae1ce; }
.cta.ghost { border-color:rgba(44,34,19,0.55); color:#2c2213; }

.viewport { position:relative; margin-top:40px; border:1.5px solid rgba(44,34,19,0.55);
  padding:10px; }
.viewport img { width:100%; height:clamp(240px,40vw,480px); object-fit:cover;
  filter:saturate(0.85); }
.dim { position:absolute; display:flex; align-items:center; gap:6px;
  font-family:'Courier New', Courier, monospace; font-size:10px; letter-spacing:0.1em; color:#7a6a4b; }
.dim i { flex:1; height:1px; background:rgba(44,34,19,0.55); min-width:26px; position:relative; }
.dim i::before,.dim i::after { content:""; position:absolute; top:-3px; width:1px;
  height:7px; background:rgba(44,34,19,0.55); }
.dim i::before { left:0; } .dim i::after { right:0; }
.dim-top { top:-9px; left:14px; right:14px; }
.dim-left { top:14px; bottom:14px; left:-6px; flex-direction:column; writing-mode:vertical-rl; }
.dim-left i { width:1px; height:auto; flex:1; background:rgba(44,34,19,0.55); }
.callout { position:absolute; right:16px; bottom:16px; font-family:'Courier New', Courier, monospace;
  font-size:11px; letter-spacing:0.1em; background:#7a4a22;
  color:#eae1ce; padding:5px 10px; }
.callout em { font-style:normal; opacity:0.85; margin-left:6px; }

/* detail */
.detail { display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(20px,4vw,48px);
  border-top:1.5px solid rgba(44,34,19,0.55); padding:clamp(28px,5vw,52px) 0; }
.col h2 { font-family:Rockwell, 'Rockwell Nova', 'Roboto Slab', Georgia, serif; font-weight:800; font-size:1.5rem; margin-bottom:14px;
  text-transform:uppercase; letter-spacing:0.02em; }
.col p { color:#7a6a4b; max-width:46ch; }
.leaders { list-style:none; margin-top:22px; }
.leaders li { display:flex; align-items:center; gap:10px; font-family:'Courier New', Courier, monospace;
  font-size:12px; padding:9px 0; border-bottom:1px dashed rgba(44,34,19,0.20); }
.leaders span { color:#7a6a4b; letter-spacing:0.12em; }
.leaders li::after { content:""; }
.leaders b { margin-left:auto; color:#7a4a22; }

.spec { width:100%; border-collapse:collapse; font-family:'Courier New', Courier, monospace; font-size:13px; }
.spec th { text-align:left; padding:10px 8px; border-bottom:1.5px solid rgba(44,34,19,0.55);
  font-size:11px; letter-spacing:0.12em; color:#7a6a4b; }
.spec td { padding:11px 8px; border-bottom:1px solid rgba(44,34,19,0.20); vertical-align:top; }
.spec .rc { color:#7a4a22; } .spec .rt { font-weight:700; }
.spec .rd { color:#7a6a4b; }

/* section b */
.section-b { display:grid; grid-template-columns:1fr 1fr 1.4fr; gap:16px;
  border-top:1.5px solid rgba(44,34,19,0.55); padding:clamp(24px,5vw,48px) 0; align-items:stretch; }
.thumb { border:1.5px solid rgba(44,34,19,0.55); padding:6px; }
.thumb img { width:100%; height:100%; min-height:180px; object-fit:cover; }
.qt { font-family:Rockwell, 'Rockwell Nova', 'Roboto Slab', Georgia, serif; font-size:clamp(1.2rem,2.6vw,1.7rem); line-height:1.3;
  border:1.5px solid #7a4a22; padding:22px; display:flex; flex-direction:column;
  justify-content:center; }
.qt cite { font-family:'Courier New', Courier, monospace; font-style:normal; font-size:12px;
  color:#7a6a4b; margin-top:14px; letter-spacing:0.1em; }

/* title block */
.titleblock { display:grid; grid-template-columns:repeat(6,1fr);
  border:1.5px solid rgba(44,34,19,0.55); margin-top:8px; }
.tb { border-right:1px solid rgba(44,34,19,0.20); border-top:1px solid rgba(44,34,19,0.20);
  padding:12px 14px; display:flex; flex-direction:column; gap:4px; min-height:70px; }
.tb:last-child { border-right:0; }
.tb-wide { grid-column:1 / 4; }
.tb .k { font-family:'Courier New', Courier, monospace; font-size:10px; letter-spacing:0.16em;
  color:#7a6a4b; }
.tb .v { font-family:Rockwell, 'Rockwell Nova', 'Roboto Slab', Georgia, serif; font-weight:700; font-size:15px; }
.tb .vv { font-family:Optima, Candara, 'Segoe UI', sans-serif; font-weight:400; font-size:13px; color:#7a6a4b; }
.tb a.v:hover { color:#7a4a22; }

@media (max-width:820px){
  .detail{ grid-template-columns:1fr; }
  .section-b{ grid-template-columns:1fr; }
  .titleblock{ grid-template-columns:1fr 1fr; }
  .tb-wide{ grid-column:1 / 3; }
  .dim-left{ display:none; }
}


.xq{box-sizing:border-box;font-family:Optima, Candara, 'Segoe UI', sans-serif;color:#2c2213;padding:56px 24px;width:100%}
.xq *{box-sizing:border-box;margin:0}
.xq .xq-wrap{max-width:1060px;margin:0 auto}
.xq h2{font-family:Rockwell, 'Rockwell Nova', 'Roboto Slab', Georgia, serif;font-size:1.7rem;line-height:1.2;margin-bottom:8px}
.xq .xq-kick{display:block;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:#7a4a22;margin-bottom:10px;font-weight:700}

.xq-steplist{counter-reset:xqs;list-style:none;padding:0;margin-top:22px;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:18px}
.xq-step{counter-increment:xqs;position:relative;padding:18px 18px 18px 20px;border-left:3px solid #7a4a22;background:rgba(44,34,19,0.05);border-radius:0 2px 2px 0}
.xq-step::before{content:"0" counter(xqs);display:block;font-family:Rockwell, 'Rockwell Nova', 'Roboto Slab', Georgia, serif;font-size:.8rem;letter-spacing:.1em;color:#7a4a22;font-weight:800;margin-bottom:8px}
.xq-step h3{font-family:Rockwell, 'Rockwell Nova', 'Roboto Slab', Georgia, serif;font-size:1.02rem;margin-bottom:6px}
.xq-step p{font-size:.9rem;color:#7a6a4b}


.xq-hours{border-top:1px solid rgba(44,34,19,0.14)}
.xq-hours-in{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:26px;align-items:start}
.xq-hours address{font-style:normal;color:#7a6a4b;line-height:1.8;margin-top:8px}
.xq-hourtable{width:100%;border-collapse:collapse}
.xq-hourtable th,.xq-hourtable td{text-align:left;padding:12px 6px;border-bottom:1px solid rgba(44,34,19,0.14)}
.xq-hourtable th{font-family:Rockwell, 'Rockwell Nova', 'Roboto Slab', Georgia, serif}
.xq-hourtable td{color:#7a4a22;font-weight:700;text-align:right}


.xq-faq-list{margin-top:18px;border-top:1px solid rgba(44,34,19,0.14)}
.xq-faq-item{border-bottom:1px solid rgba(44,34,19,0.14);padding:4px 0}
.xq-faq-item summary{cursor:pointer;padding:14px 4px;font-weight:700;font-family:Rockwell, 'Rockwell Nova', 'Roboto Slab', Georgia, serif;list-style-position:inside}
.xq-faq-item summary::marker{color:#7a4a22}
.xq-faq-item p{padding:0 4px 16px;color:#7a6a4b;max-width:64ch}


/* =====================================================
   DESIGN DNA: midnight-glass
   Whole-page visual system applied over the layout
   archetype. Appended last so it wins the cascade.
   ===================================================== */
html::before{content:'';position:fixed;inset:0;z-index:99980;pointer-events:none;background:radial-gradient(120% 90% at 50% 0%,transparent 55%,rgba(0,0,0,.5));opacity:.14;}
h1,h2,h3{letter-spacing:-0.02em !important;font-weight:700 !important}
img{border-radius:16px !important;box-shadow:0 30px 70px rgba(0,0,0,.4),0 0 0 1px rgba(44,34,19,.18) !important}
a[class*="btn"],button,span[class*="btn"]{border-radius:999px !important;box-shadow:0 10px 30px rgba(122,74,34,.45),inset 0 1px 0 rgba(255,255,255,.25) !important}
div[class*="card"]:not([class*="cards"]),article[class*="card"],a[class*="card"],figure[class*="card"],li[class*="card"]{border-radius:20px !important;border:1px solid rgba(44,34,19,.16) !important;box-shadow:0 24px 60px rgba(0,0,0,.35) !important}
