* { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body { background:#f6ecd6; color:#2a1c11; font-family:'Trebuchet MS', Tahoma, sans-serif; font-size:16px;
  line-height:1.55; -webkit-font-smoothing:antialiased; }
img { display:block; max-width:100%; }
a { color:#2a1c11; text-decoration:none; }

.sheet { padding:clamp(10px,2.5vw,28px);
  background:
    linear-gradient(rgba(42,28,17,0.20) 1px, transparent 1px) 0 0/100% 88px,
    linear-gradient(90deg,rgba(42,28,17,0.20) 1px, transparent 1px) 0 0/88px 100%,
    linear-gradient(rgba(42,28,17,0.10) 1px, transparent 1px) 0 0/100% 22px,
    linear-gradient(90deg,rgba(42,28,17,0.10) 1px, transparent 1px) 0 0/22px 100%,
    #eee4ce; }
.frame { border:2px solid rgba(42,28,17,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(42,28,17,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(42,28,17,0.55); padding-bottom:12px; margin-bottom:8px;
  color:#78654e; }
.tbar .proj { color:#c14a1c; 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:#c14a1c; 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:#78654e; 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 #c14a1c; color:#c14a1c;
  padding:12px 22px; border-radius:5px; }
.cta:hover { background:#c14a1c; color:#eee4ce; }
.cta.ghost { border-color:rgba(42,28,17,0.55); color:#2a1c11; }

.viewport { position:relative; margin-top:40px; border:1.5px solid rgba(42,28,17,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:#78654e; }
.dim i { flex:1; height:1px; background:rgba(42,28,17,0.55); min-width:26px; position:relative; }
.dim i::before,.dim i::after { content:""; position:absolute; top:-3px; width:1px;
  height:7px; background:rgba(42,28,17,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(42,28,17,0.55); }
.callout { position:absolute; right:16px; bottom:16px; font-family:'Courier New', Courier, monospace;
  font-size:11px; letter-spacing:0.1em; background:#c14a1c;
  color:#eee4ce; 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(42,28,17,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:#78654e; 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(42,28,17,0.20); }
.leaders span { color:#78654e; letter-spacing:0.12em; }
.leaders li::after { content:""; }
.leaders b { margin-left:auto; color:#c14a1c; }

.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(42,28,17,0.55);
  font-size:11px; letter-spacing:0.12em; color:#78654e; }
.spec td { padding:11px 8px; border-bottom:1px solid rgba(42,28,17,0.20); vertical-align:top; }
.spec .rc { color:#c14a1c; } .spec .rt { font-weight:700; }
.spec .rd { color:#78654e; }

/* section b */
.section-b { display:grid; grid-template-columns:1fr 1fr 1.4fr; gap:16px;
  border-top:1.5px solid rgba(42,28,17,0.55); padding:clamp(24px,5vw,48px) 0; align-items:stretch; }
.thumb { border:1.5px solid rgba(42,28,17,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 #c14a1c; 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:#78654e; margin-top:14px; letter-spacing:0.1em; }

/* title block */
.titleblock { display:grid; grid-template-columns:repeat(6,1fr);
  border:1.5px solid rgba(42,28,17,0.55); margin-top:8px; }
.tb { border-right:1px solid rgba(42,28,17,0.20); border-top:1px solid rgba(42,28,17,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:#78654e; }
.tb .v { font-family:Rockwell, 'Rockwell Nova', 'Roboto Slab', Georgia, serif; font-weight:700; font-size:15px; }
.tb .vv { font-family:'Trebuchet MS', Tahoma, sans-serif; font-weight:400; font-size:13px; color:#78654e; }
.tb a.v:hover { color:#c14a1c; }

@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:'Trebuchet MS', Tahoma, sans-serif;color:#2a1c11;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:#c14a1c;margin-bottom:10px;font-weight:700}

.xq-cta{background:#c14a1c;color:#ffffff}
.xq-cta h2,.xq-cta p{color:#ffffff}
.xq-cta p{opacity:.85;max-width:52ch}
.xq-cta-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px}
.xq-btn{display:inline-block;background:#f6ecd6;color:#2a1c11;text-decoration:none;font-weight:700;padding:14px 30px;border-radius:5px;font-family:Rockwell, 'Rockwell Nova', 'Roboto Slab', Georgia, serif}
.xq-btn:hover{transform:translateY(-2px)}


.xq-checklist{list-style:none;padding:0;margin-top:20px;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px 26px}
.xq-checklist li{position:relative;padding:10px 0 10px 32px;border-bottom:1px dashed rgba(42,28,17,0.14)}
.xq-checklist li::before{content:"\2713";position:absolute;left:0;top:8px;width:22px;height:22px;line-height:22px;text-align:center;border-radius:50%;background:#c14a1c;color:#ffffff;font-size:.75rem;font-weight:800}


/* =====================================================
   DESIGN DNA: sketchbook
   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:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='28'%3E%3Cpath d='M0 27.5H100' stroke='%232a1c11' stroke-width='1'/%3E%3C/svg%3E");opacity:.06;}
h1,h2,h3{font-family:'Segoe Print', 'Comic Sans MS', cursive !important;font-weight:700 !important}
h2{text-decoration:underline wavy rgba(193,74,28,.8) 2px;text-underline-offset:6px}
img{border:3px solid #2a1c11 !important;border-radius:10px 3px 12px 4px !important;transform:rotate(-.7deg);filter:saturate(.95)}
a[class*="btn"],button,span[class*="btn"]{border:2.5px dashed #2a1c11 !important;border-radius:12px 4px 14px 5px !important;font-family:'Segoe Print', 'Comic Sans MS', cursive !important;box-shadow:none !important}
div[class*="card"]:not([class*="cards"]),article[class*="card"],a[class*="card"],figure[class*="card"],li[class*="card"]{border:2px dashed rgba(42,28,17,.7) !important;border-radius:4px 14px 5px 12px !important;box-shadow:none !important}