/* GridStack site stylesheet.
   Shares the design system of the sibling ThermStack site: one editorial light
   palette, flat surfaces, hairline rules, no gradients or elevation. */

:root{
  --ink:#172b32; --muted:#52646b; --line:#d9e2e4;
  --paper:#fff; --wash:#f3f7f7;
  --green:#087964; --blue:#215fa4; --orange:#ae521d;
  --max:1160px;
}

/* ---------- base ---------- */
*{box-sizing:border-box;letter-spacing:0}
html{scroll-behavior:smooth;scroll-padding-top:100px}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.7 Inter,Arial,sans-serif}
a{color:var(--green);text-underline-offset:4px}
button,a{-webkit-tap-highlight-color:transparent}
button{font:inherit}
button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid var(--blue);outline-offset:5px}
h1,h2,h3,p,figure{margin:0}
h1,h2,h3{line-height:1.18;font-weight:600}
h1{font-size:48px}h2{font-size:34px}h3{font-size:22px}
p+p{margin-top:16px}
.wrap{max-width:var(--max);margin:auto;padding:0 28px}
.skip{position:fixed;top:-100px;left:12px;background:white;padding:12px;z-index:100}
.skip:focus{top:10px}
.icon{width:20px;height:20px;vertical-align:middle;flex:none}
.mono{font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.94em}

/* ---------- header ---------- */
.site-header{position:sticky;top:0;background:#fffffffa;border-bottom:1px solid var(--line);z-index:20}
.header-inner{height:76px;display:flex;align-items:center;justify-content:space-between;gap:28px}
.brand{display:flex;gap:10px;align-items:center;color:var(--ink);font-size:22px;font-weight:700;text-decoration:none}
.brand-mark{display:grid;gap:3px;transform:skewY(-16deg);width:25px}
.brand-mark i{display:block;height:5px;background:var(--green)}
.brand-mark i:nth-child(2){background:#449dc0}
.brand-mark i:nth-child(3){background:#dc9147}
.nav{display:flex;align-items:center;gap:32px}
.nav a{font-size:14px;text-decoration:none;color:var(--muted)}
.nav a[aria-current=page]{color:var(--ink);border-bottom:2px solid var(--green);padding:24px 0}
.nav .contact-link{color:var(--green);font-weight:600}
.menu-button{display:none;border:0;background:transparent;padding:8px;color:var(--ink)}

/* ---------- shared type ---------- */
.eyebrow{font-size:12px;font-weight:700;color:var(--green);text-transform:uppercase;margin-bottom:16px}
.lead{font-size:21px;color:var(--muted);line-height:1.55;max-width:830px}
.text-link{display:inline-flex;align-items:center;gap:9px;font-weight:600;text-decoration:none}
.note{font-size:13px;color:var(--muted);margin-top:18px;line-height:1.6}

/* ---------- cover ---------- */
.cover{padding:42px 0 0;background:#fff}
.cover .intro{max-width:910px}
.cover h1{margin-bottom:12px}
.cover .lead{max-width:890px}
.cover-actions{display:flex;gap:30px;flex-wrap:wrap;margin:20px 0 12px}
.cover-visual{height:315px;position:relative;
  background-image:url('../figs/views/ibmpg3t_structure_2d.png'),url('../figs/views/ibmpg3t_drop_3d.png');
  background-size:auto 310px,auto 310px;background-repeat:no-repeat;
  background-position:calc(50% - 190px) center,calc(50% + 190px) center}
.visual-note{color:var(--muted);font-size:12px;text-align:center;padding-bottom:14px}

/* ---------- summary strip ---------- */
.summary-strip{border-block:1px solid var(--line);background:var(--wash)}
.summary-grid{display:grid;grid-template-columns:repeat(3,1fr)}
.summary-grid>div{padding:24px 24px 24px 0}
.summary-grid strong{display:block;font-size:17px;margin-bottom:5px}
.summary-grid p{font-size:14px;color:var(--muted);max-width:300px}

/* ---------- bands & section headings ---------- */
.band{padding:70px 0;border-bottom:1px solid var(--line)}
.band.alt{background:var(--wash)}
.section-heading{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start;margin-bottom:36px}
.section-heading p{color:var(--muted)}
.section-heading h2{max-width:540px}

/* ---------- capability grid ---------- */
.capabilities{display:grid;grid-template-columns:repeat(2,1fr);column-gap:50px}
.capability{border-top:1px solid var(--line);padding:24px 0 30px}
.capability .number,.feature-number{font-size:12px;font-weight:700;color:var(--green);margin-bottom:12px}
.capability p{color:var(--muted);margin:12px 0 18px}
.capability .soon{color:var(--muted);font-weight:600;font-size:14px}

/* ---------- three-column flow ---------- */
.flow{display:grid;grid-template-columns:repeat(3,1fr);gap:34px}
.flow article{border-top:2px solid var(--green);padding-top:22px}
.flow article:nth-child(2){border-color:var(--blue)}
.flow article:nth-child(3){border-color:var(--orange)}
.flow p{font-size:15px;color:var(--muted);margin-top:12px}
.inline-list{padding:0;list-style:none}
.inline-list li{padding:12px 0;border-bottom:1px solid var(--line)}

/* ---------- evidence / key numbers ---------- */
.evidence{display:grid;grid-template-columns:repeat(3,1fr);margin:32px 0;border-block:1px solid var(--line)}
.evidence>div{padding:24px 20px 24px 0}
.evidence strong{font-size:35px;color:var(--green);display:block;line-height:1.2}
.evidence span{display:block;font-size:14px;color:var(--muted);margin-top:9px}
.evidence .blue{color:var(--blue)}

/* ---------- figures ---------- */
.figure-pair{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.figure-trio{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.figure{margin:26px 0}
.figure img{width:100%;height:auto;display:block;background:#fff}
.figure figcaption{font-size:13px;color:var(--muted);margin-top:12px}
.figure figcaption .step{display:block;font-size:12px;font-weight:700;color:var(--green);text-transform:uppercase;margin-bottom:6px}
.image-open{padding:0;border:0;background:#fff;display:block;cursor:zoom-in;width:100%}
.image-open:hover{outline:1px solid #9fbdc4}

/* ---------- document pages ---------- */
.page-intro{padding:54px 0 40px;border-bottom:1px solid var(--line)}
.page-intro h1{margin-bottom:18px}
.page-intro .lead{max-width:890px}
.page-layout{display:grid;grid-template-columns:180px minmax(0,1fr);gap:50px}
.contents{position:sticky;top:108px;align-self:start;padding-top:38px}
.contents p{font-size:12px;color:var(--muted);margin-bottom:15px;text-transform:uppercase}
.contents a{display:block;padding:9px 0;font-size:13px;text-decoration:none;color:var(--muted);border-left:2px solid var(--line);padding-left:15px}
.contents a:hover,.contents a[aria-current=true]{color:var(--green);border-color:var(--green)}
.feature-section{padding:48px 0 54px;border-bottom:1px solid var(--line);scroll-margin-top:24px}
.feature-section h2{font-size:32px;margin-bottom:18px}
.feature-section h3{margin:28px 0 14px}
.feature-section>p{color:var(--muted)}
.feature-section .intro-copy{font-size:18px}
.feature-section ul{color:var(--muted);padding-left:22px;margin:16px 0}
.feature-section li{padding:5px 0}
.feature-section li b,.feature-section ul b{color:var(--ink)}
.article-pair{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin:25px 0}
.article-pair p{font-size:15px;color:var(--muted)}
.article-pair h3{font-size:19px;margin-top:0}
.article-pair .role{font-size:12px;font-weight:700;color:var(--green);text-transform:uppercase;margin-bottom:10px}
.article-pair article:nth-child(2) .role{color:var(--blue)}

/* ---------- tables ---------- */
.table-wrap{overflow:auto;margin:22px 0;border-block:1px solid var(--line)}
table{width:100%;border-collapse:collapse;font-size:14px;font-variant-numeric:tabular-nums}
th,td{text-align:left;padding:14px 12px;border-bottom:1px solid var(--line);vertical-align:top}
th{font-weight:600;background:var(--wash);font-size:12px}
tr:last-child td{border-bottom:0}
tbody tr.total th,tbody tr.total td{font-weight:700;background:var(--wash)}

.reading-note{border-left:3px solid var(--blue);padding:12px 0 12px 20px;margin:24px 0;font-size:14px;color:var(--muted)}
.reading-note strong{color:var(--ink)}
details{border-top:1px solid var(--line);padding:18px 0;font-size:14px;color:var(--muted)}
summary{cursor:pointer;color:var(--ink);font-weight:600}
details p{margin-top:12px}

/* ---------- contact & footer ---------- */
.contact-band{padding:55px 0;background:var(--wash)}
.contact-inner{display:flex;align-items:center;justify-content:space-between;gap:35px}
.contact-inner p{max-width:660px;margin-top:12px;color:var(--muted)}
.button{display:inline-flex;gap:10px;align-items:center;padding:13px 22px;background:var(--green);color:white;border-radius:5px;text-decoration:none;white-space:nowrap;font-size:14px;font-weight:600}
.button:hover{background:#075b4d}
footer{padding:28px 0;font-size:12px;color:var(--muted)}
.footer-inner{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}
footer a{color:var(--muted)}

/* ---------- lightbox ---------- */
.lightbox{max-width:96vw;max-height:94vh;border:1px solid var(--line);border-radius:6px;padding:48px 20px 20px;background:#fff}
.lightbox::backdrop{background:#172b32c7}
.lightbox img{display:block;max-width:88vw;max-height:76vh;object-fit:contain;margin:auto}
.lightbox p{font-size:13px;color:var(--muted);max-width:900px;margin:12px auto 0}
.close-button{position:absolute;right:12px;top:10px;padding:6px;border:0;background:var(--wash);border-radius:4px;cursor:pointer}
.print-note{display:none}

/* ---------- white-paper series layout ---------- */
.paper-meta{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;font-weight:700;color:var(--green);text-transform:uppercase;margin-bottom:16px}
.paper-meta span+span::before{content:"\00b7";margin-right:14px;color:var(--line)}
.paper-body{max-width:880px}
.paper-abstract{border:1px solid var(--line);border-left:3px solid var(--green);background:var(--wash);padding:20px 24px;margin:30px 0 6px;font-size:15px;color:var(--muted);line-height:1.65}
.paper-abstract strong{display:block;color:var(--ink);font-size:12px;text-transform:uppercase;margin-bottom:8px}
.paper-nav{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:26px 0;font-size:14px}

/* ---------- domain-decomposition diagram ---------- */
.diagram{margin:30px 0 6px;border:1px solid var(--line);background:var(--wash);padding:26px 24px}
.diagram svg{display:block;width:100%;height:auto}
.diagram figcaption{font-size:13px;color:var(--muted);margin-top:16px}
.tag-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px;padding:0;list-style:none}
.tag-list li{font-size:12px;font-weight:600;color:var(--muted);border:1px solid var(--line);background:#fff;padding:6px 11px;border-radius:4px}

/* ---------- responsive ---------- */
@media(min-width:1600px){.cover-visual{height:350px;background-size:auto 345px,auto 345px}}
@media(max-width:900px){
  .page-layout{grid-template-columns:145px minmax(0,1fr);gap:28px}
  .nav{gap:22px}
  .section-heading{gap:28px}
  .evidence strong{font-size:29px}
  .cover-visual{background-position:calc(50% - 170px) center,calc(50% + 170px) center}
  .article-pair{grid-template-columns:1fr}
  .figure-trio{grid-template-columns:1fr 1fr}
  .page-layout .evidence{grid-template-columns:1fr}
  .page-layout .evidence>div{padding:16px 0;border-bottom:1px solid var(--line)}
  .page-layout .evidence>div:last-child{border:0}
}
@media(max-width:640px){
  .wrap{padding:0 20px}
  .header-inner{height:64px;gap:12px}
  .brand{font-size:20px}
  .menu-button{display:inline-flex}
  .nav{display:none;position:absolute;top:64px;left:0;right:0;background:white;padding:18px 20px;border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch;gap:0}
  .nav.open{display:flex}
  .nav a,.nav a[aria-current=page]{padding:12px 0;border:0}
  .nav a[aria-current=page]{font-weight:700}
  .cover{padding-top:30px}
  h1{font-size:36px}h2{font-size:28px}
  .lead{font-size:18px}
  .eyebrow{font-size:11px;margin-bottom:12px}
  .cover-actions{gap:15px;font-size:14px}
  .cover-visual{height:270px;background-image:url('../figs/views/ibmpg3t_drop_3d.png');background-size:auto 265px;background-position:center}
  .visual-note{font-size:10px}
  .summary-grid{grid-template-columns:1fr}
  .summary-grid>div{padding:16px 0;border-bottom:1px solid var(--line)}
  .summary-grid>div:last-child{border:0}
  .summary-grid p{max-width:none}
  .band{padding:44px 0}
  .section-heading{grid-template-columns:1fr;gap:20px;margin-bottom:28px}
  .capabilities,.flow,.figure-pair,.figure-trio{grid-template-columns:1fr}
  .flow{gap:28px}
  .evidence{grid-template-columns:1fr}
  .evidence>div{border-bottom:1px solid var(--line);padding:18px 0}
  .evidence>div:last-child{border:0}
  .page-intro{padding:34px 0}
  .page-layout{display:block}
  .contents{position:static;padding:24px 0 0;display:flex;flex-wrap:wrap;gap:6px 20px}
  .contents p{width:100%;margin:0}
  .contents a{border:0;padding:5px 0}
  .feature-section{padding:36px 0}
  .feature-section h2{font-size:28px}
  .contact-inner{display:block}
  .contact-inner .button{margin-top:24px}
  .table-wrap{font-size:12px}
  th,td{padding:12px 8px}
  .diagram{padding:18px 14px}
  .lightbox{padding:44px 10px 12px}
  .lightbox img{max-width:86vw}
  .lightbox p{font-size:12px}
  .footer-inner{gap:14px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
@media print{
  .site-header,.contents,.cover-actions,.contact-band,.image-open+.icon,dialog{display:none!important}
  .wrap{max-width:none;padding:0}
  .page-layout{display:block}
  .band,.feature-section{padding:22px 0}
  .figure,table{break-inside:avoid}
  .cover-visual{print-color-adjust:exact}
  .print-note{display:block}
  body{font-size:11pt}h1{font-size:28pt}h2{font-size:21pt}
}