@import url("https://fonts.googleapis.com/css2?family=Fraunces:ital,wght@0,300;0,400;1,300;1,400&family=IBM+Plex+Sans:ital,wght@0,300;0,400;0,500;0,600;1,400&family=IBM+Plex+Mono:wght@400;500;600&display=swap");
:root{--fs:100%;--bg:#0b1513;--alt:#101e1a;--panel:#172824;--panel2:#1d332d;--text:#f4f1e8;--sub:#d7d5cc;--muted:#aabbb2;--amber:#e4a64e;--amber2:#f5cf89;--green:#4bc392;--line:#2c493f;--strong:#4b7766;--shell:1180px}
html{font-size:var(--fs);scroll-behavior:smooth}html[data-font="90"]{--fs:90%}html[data-font="115"]{--fs:115%}html.contrast{--bg:#000;--alt:#050505;--panel:#0b0b0b;--panel2:#111;--text:#fff;--sub:#fff;--muted:#eee;--amber:#ffd166;--amber2:#ffe49e;--green:#72f0bb;--line:#aaa;--strong:#fff}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:"IBM Plex Sans",sans-serif;line-height:1.65}a{color:inherit}button,input,textarea{font:inherit}:focus-visible{outline:3px solid var(--amber2);outline-offset:4px}.skip{position:fixed;top:-5rem;left:1rem;z-index:1000;background:var(--amber);color:#111;padding:.7rem 1rem}.skip:focus{top:1rem}.shell{width:min(calc(100% - 2rem),var(--shell));margin:auto}.narrow{max-width:900px}
header{position:sticky;top:0;z-index:100;background:rgba(7,16,13,.94);border-bottom:1px solid var(--line);backdrop-filter:blur(12px)}.nav{min-height:74px;display:flex;align-items:center;gap:1rem}.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;margin-right:auto}.brand>b{display:grid;place-items:center;width:42px;height:42px;border:1px solid var(--amber);border-radius:11px;color:var(--amber);font-family:"IBM Plex Mono"}.brand strong,.brand small{display:block}.brand small{font:500 .67rem "IBM Plex Mono";letter-spacing:.08em;color:var(--muted)}.navbox{display:flex;align-items:center;gap:1rem}.links{display:flex;gap:.15rem}.links a{padding:.5rem .55rem;text-decoration:none;color:var(--muted);font-size:.86rem;border-radius:8px}.links a:hover,.links a.active{background:var(--panel);color:var(--text)}.controls{display:flex;gap:.4rem}.group{display:flex;border:1px solid var(--line);border-radius:9px;overflow:hidden}.group button,.contrast,.menu{border:0;background:transparent;color:var(--muted);padding:.42rem .55rem;cursor:pointer}.group button+button{border-left:1px solid var(--line)}.group button:hover,.group button.active,.contrast:hover{background:var(--panel);color:var(--text)}.contrast,.menu{border:1px solid var(--line);border-radius:9px}.menu{display:none}
.hero{min-height:680px;display:grid;grid-template-columns:1.45fr .75fr;gap:5rem;align-items:center;padding:6rem 0}.kicker{font:600 .76rem "IBM Plex Mono";letter-spacing:.18em;color:var(--amber);margin:0 0 1rem}.hero h1{font-size:clamp(3rem,7vw,6.6rem);line-height:.96;letter-spacing:-.055em;margin:.1em 0 .35em}.hero h1 em,.sectionhead h2 em{font-style:normal;color:var(--amber2)}.lead{font-size:clamp(1.2rem,2vw,1.55rem);color:var(--text);max-width:760px}.hero>div>p{max-width:760px;color:var(--sub)}.actions{display:flex;gap:.8rem;margin-top:2rem}.btn{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;border:1px solid var(--strong);border-radius:11px;padding:.78rem 1.1rem;background:transparent;color:var(--text);cursor:pointer}.btn:hover{border-color:var(--amber);transform:translateY(-1px)}.btn.primary{background:var(--amber);border-color:var(--amber);color:#111;font-weight:600}.hero aside{border-left:3px solid var(--amber);padding:1.5rem 0 1.5rem 1.7rem}.hero aside small{font:500 .7rem "IBM Plex Mono";letter-spacing:.14em;color:var(--muted)}blockquote{font-size:1.35rem;margin:1rem 0;color:var(--sub)}code{font-family:"IBM Plex Mono";color:var(--green)}
.section{padding:6.5rem 0;border-top:1px solid var(--line)}.alt{background:var(--alt)}.sectionhead{max-width:830px;margin-bottom:2.5rem}.sectionhead h2,.contact h2{font-size:clamp(2.1rem,4vw,4rem);line-height:1.08;letter-spacing:-.035em;margin:.2em 0}.sectionhead>p:last-child{font-size:1.08rem;color:var(--muted)}
.filters{display:flex;flex-wrap:wrap;gap:.55rem;margin-bottom:1.5rem}.filters button{border:1px solid var(--line);border-radius:999px;background:transparent;color:var(--muted);padding:.5rem .85rem;cursor:pointer}.filters button:hover,.filters button.active{border-color:var(--amber);background:var(--panel);color:var(--text)}
.grid{display:grid;gap:1rem}.patterns,.offer{grid-template-columns:repeat(3,1fr)}.flip{min-height:260px;perspective:1200px;cursor:pointer}.flip[hidden]{display:none}.inner{position:relative;min-height:260px;height:100%;transform-style:preserve-3d;transition:transform .65s}.flip.is-flipped .inner{transform:rotateY(180deg)}.face{position:absolute;inset:0;backface-visibility:hidden;border:1px solid var(--line);border-radius:18px;padding:1.4rem;background:var(--panel);display:flex;flex-direction:column;box-shadow:0 16px 40px rgba(0,0,0,.25)}.front{justify-content:space-between}.back{transform:rotateY(180deg);background:var(--panel2);border-color:var(--strong)}.face>span{font:600 .68rem "IBM Plex Mono";letter-spacing:.1em;text-transform:uppercase;color:var(--green)}.face h3{font-size:1.26rem;line-height:1.3}.face small{font:.72rem "IBM Plex Mono";color:var(--muted)}.back p{color:var(--sub)}.back b{margin-top:auto;color:var(--amber2)}.note{border-left:3px solid var(--green);padding:.8rem 1.4rem;margin-top:2.5rem;max-width:850px}.note p{margin:.35rem 0;color:var(--sub)}
.accordion{border-top:1px solid var(--line)}details{border-bottom:1px solid var(--line);padding:0 .2rem}summary{list-style:none;cursor:pointer;padding:1.3rem 0;font-size:1.2rem;font-weight:600;display:flex;justify-content:space-between}summary::-webkit-details-marker{display:none}summary:after{content:"+";color:var(--amber)}details[open] summary:after{content:"−"}details p{max-width:780px;color:var(--sub);padding-bottom:1rem}
.principles{border-top:1px solid var(--line)}.principles article{display:grid;grid-template-columns:85px 1fr;gap:1rem;max-width:950px;padding:1.8rem 0;border-bottom:1px solid var(--line)}.principles article>span{font:.75rem "IBM Plex Mono";color:var(--amber)}.principles h3{margin:0 0 .35rem;font-size:1.42rem}.principles p{margin:0;color:var(--muted);max-width:730px}
.cycle{display:grid;grid-template-columns:repeat(11,auto);gap:.4rem;align-items:stretch;overflow-x:auto;padding:1rem 0}.cycle>div{min-width:145px;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:14px;padding:1rem;background:var(--panel)}.cycle span{font:.7rem "IBM Plex Mono";color:var(--amber)}.cycle b{margin:.5rem 0}.cycle small{color:var(--muted);line-height:1.35}.cycle i{align-self:center;color:var(--amber);font-style:normal}.return{font:.83rem "IBM Plex Mono";color:var(--green);margin:1rem 0 2rem}.info{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.info article{border:1px solid var(--line);border-radius:18px;padding:1.4rem;background:var(--panel)}.info article.wide{grid-column:1/-1;border-left:3px solid var(--amber)}.info h3{margin-top:0}.info p{color:var(--sub)}
.docs{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}.docs a{min-height:165px;display:flex;flex-direction:column;text-decoration:none;border:1px solid var(--line);border-radius:18px;padding:1.2rem;background:var(--panel)}.docs a:hover{border-color:var(--amber)}.docs span{font:.7rem "IBM Plex Mono";color:var(--amber)}.docs b{margin-top:auto}
.contact{background:linear-gradient(135deg,var(--alt),var(--panel))}.contactgrid{display:grid;grid-template-columns:1fr 1fr;gap:4rem}.contact p{color:var(--sub)}.methods{display:grid;margin-top:1.5rem}.methods a{display:flex;justify-content:space-between;gap:1rem;text-decoration:none;border-bottom:1px solid var(--line);padding:.7rem 0}.methods span{color:var(--muted);text-align:right}form{display:grid;gap:.9rem;background:var(--bg);border:1px solid var(--line);border-radius:18px;padding:1.4rem}label{display:grid;gap:.3rem}input,textarea{width:100%;border:1px solid var(--line);border-radius:9px;padding:.72rem;background:var(--panel);color:var(--text)}.consent{grid-template-columns:auto 1fr}.consent input{width:auto;margin-top:.25rem}.trap{position:absolute;left:-9999px}.warning{color:var(--amber2)}
footer{border-top:1px solid var(--line);background:#06100d}footer>.shell{min-height:130px;display:flex;justify-content:space-between;align-items:center;color:var(--muted)}footer pre{font:.7rem/1.05 "IBM Plex Mono";color:var(--amber)}
@media(max-width:1060px){.menu{display:block}.navbox{display:none;position:absolute;left:0;right:0;top:74px;padding:1rem;background:var(--alt);border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch}.navbox.open{display:flex}.links{flex-wrap:wrap}.controls{flex-wrap:wrap}.hero{grid-template-columns:1fr;gap:2rem;min-height:auto}.patterns,.offer{grid-template-columns:repeat(2,1fr)}.docs{grid-template-columns:repeat(2,1fr)}}
@media(max-width:680px){.hero{padding:4rem 0}.section{padding:4.5rem 0}.patterns,.offer,.docs,.info,.contactgrid{grid-template-columns:1fr}.info article.wide{grid-column:auto}.principles article{grid-template-columns:48px 1fr}.links{display:grid}.contactgrid{gap:2rem}footer>.shell{flex-direction:column;justify-content:center;padding:2rem 0}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.inner,*{transition:none!important;animation:none!important}}

/* ==========================================================================
   MVP 0.4 — calmer MagT theme
   Components come from magt.css; these rules adapt the existing page layout.
   ========================================================================== */

:root {
  --amber: var(--magt-accent);
  --amber2: var(--magt-accent-soft);
  --green: #7e9f91;
  --line: var(--magt-line);
  --strong: var(--magt-line-strong);
}

/* The grid is structural, not decorative noise. */
body {
  background-color: var(--magt-bg);
  background-image:
    linear-gradient(var(--magt-grid-major) 1px, transparent 1px),
    linear-gradient(90deg, var(--magt-grid-major) 1px, transparent 1px),
    linear-gradient(var(--magt-grid-minor) 1px, transparent 1px),
    linear-gradient(90deg, var(--magt-grid-minor) 1px, transparent 1px);
  background-size: 96px 96px, 96px 96px, 18px 18px, 18px 18px;
}

header,
.section,
footer {
  position: relative;
}

.section.alt {
  background:
    linear-gradient(rgb(16 29 26 / .92), rgb(16 29 26 / .92)),
    linear-gradient(var(--magt-grid-major) 1px, transparent 1px),
    linear-gradient(90deg, var(--magt-grid-major) 1px, transparent 1px);
  background-size: auto, 96px 96px, 96px 96px;
}

/* MagT speaks in serif; mono remains the technical annotation layer. */
.hero h1,
.sectionhead h2,
.contact h2,
.face h3,
.principles h3,
.info h3,
.docs b,
blockquote {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 300;
}

.hero h1 {
  letter-spacing: -.045em;
  line-height: 1.01;
}

.hero h1 em {
  font-weight: 300;
}

.sectionhead h2,
.contact h2 {
  letter-spacing: -.025em;
}

.face h3,
.principles h3 {
  font-size: 1.48rem;
}

/* Green is functional and muted. Amber is a small narrative signal. */
.btn.primary {
  background: var(--magt-primary);
  border-color: var(--magt-primary);
  color: var(--magt-primary-contrast);
}

.btn.primary:hover {
  background: var(--magt-primary-hover);
  border-color: var(--magt-primary-hover);
}

.btn:not(.primary):hover,
.filters button:hover,
.filters button.active {
  border-color: var(--magt-primary);
}

.filters button.active {
  background: color-mix(in srgb, var(--magt-primary) 18%, var(--magt-panel));
}

.face > span,
.return,
code {
  color: #91aa9f;
}

.back b,
.warning {
  color: var(--magt-accent-soft);
}

/* Diamond divider and two restrained light strokes. */
.section-divider {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: min(100%, 700px);
  margin: -1rem 0 2.6rem;
}

.section-divider::before,
.section-divider::after {
  content: "";
  height: 1px;
  flex: 1;
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--magt-accent) 14%, transparent) 20%,
    color-mix(in srgb, var(--magt-accent-soft) 72%, transparent) 50%,
    color-mix(in srgb, var(--magt-accent) 14%, transparent) 80%,
    transparent
  );
  box-shadow: 0 0 12px var(--magt-glow);
}

.section-divider span {
  width: .5rem;
  height: .5rem;
  border: 1px solid color-mix(in srgb, var(--magt-accent) 78%, transparent);
  background: color-mix(in srgb, var(--magt-accent) 8%, transparent);
  transform: rotate(45deg);
}

/* The accordion slides open like a drawer instead of appearing abruptly. */
.accordion {
  border-top: 1px solid var(--magt-line);
}

.accordion-item {
  border-bottom: 1px solid var(--magt-line);
}

.accordion-trigger {
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.28rem;
  font-weight: 300;
}

.accordion-trigger::after {
  transition: transform var(--magt-motion-base) ease;
}

.accordion-item.is-open .accordion-trigger::after {
  transform: rotate(180deg);
}

.accordion-panel {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transform: translateY(-.35rem);
  transition:
    grid-template-rows 420ms cubic-bezier(.2,.7,.2,1),
    opacity 320ms ease,
    transform 420ms cubic-bezier(.2,.7,.2,1);
}

.accordion-item.is-open .accordion-panel {
  grid-template-rows: 1fr;
  opacity: 1;
  transform: translateY(0);
}

.accordion-panel-inner {
  min-height: 0;
  overflow: hidden;
}

.accordion-content {
  margin: 0;
  padding: 0 0 1.4rem;
}

/* Quiet cards: no fluorescent tags, no amber blocks. */
.face {
  background:
    linear-gradient(rgb(23 39 35 / .97), rgb(23 39 35 / .97)),
    linear-gradient(var(--magt-grid-minor) 1px, transparent 1px),
    linear-gradient(90deg, var(--magt-grid-minor) 1px, transparent 1px);
  background-size: auto, 18px 18px, 18px 18px;
}

.back {
  background:
    linear-gradient(rgb(28 48 43 / .98), rgb(28 48 43 / .98)),
    linear-gradient(var(--magt-grid-minor) 1px, transparent 1px),
    linear-gradient(90deg, var(--magt-grid-minor) 1px, transparent 1px);
  background-size: auto, 18px 18px, 18px 18px;
}

.flip:hover .face {
  border-color: color-mix(in srgb, var(--magt-primary) 58%, var(--magt-line));
}

/* Amber cursor is allowed one small pulse at the end of the page. */
.footer-close {
  text-align: right;
  font-family: "IBM Plex Mono", monospace;
  font-size: .78rem;
}

.footer-close > span:first-child {
  color: var(--magt-text-soft);
  letter-spacing: .04em;
}

@media (max-width: 680px) {
  .section-divider {
    margin-top: -.5rem;
  }

  .footer-close {
    text-align: center;
  }
}