/* Nora Restoration Studio — theme.css
   Thesis: a conservation studio for websites. Blueprint grid paper, risograph
   two-ink print (navy + coral, misregistered), cream stock, caliper precision.
   All styling lives here. No style="" anywhere. */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;600;700&family=IBM+Plex+Mono:wght@400;600&family=Fraunces:opsz,wght@9..144,600;9..144,800&display=swap');

:root{
  --cream:#F4EDE0; --navy:#1B2A4A; --blue:#3B6EA5; --coral:#E8735A;
  --grid:rgba(59,110,165,.14); --grid-major:rgba(59,110,165,.28);
  --display:'Fraunces',Georgia,serif; --body:'Space Grotesk',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --radius:2px; --rule:2px solid var(--navy); --max:1120px;
}
body.theme-restoration{
  margin:0; color:var(--navy); font:17px/1.6 var(--body);
  background-color:var(--cream);
  background-image:
    linear-gradient(var(--grid-major) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid-major) 1px,transparent 1px),
    linear-gradient(var(--grid) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:120px 120px,120px 120px,24px 24px,24px 24px;
}
/* risograph grain */
body.theme-restoration::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:100; opacity:.18; mix-blend-mode:multiply;
  background-image:radial-gradient(rgba(27,42,74,.5) .6px,transparent .7px); background-size:3px 3px;
}
.theme-restoration a{color:var(--blue); text-decoration-thickness:2px; text-underline-offset:3px}
.theme-restoration a:hover{color:var(--coral)}
.theme-restoration h1,.theme-restoration h2,.theme-restoration h3{font-family:var(--display); line-height:1.1; margin:0 0 .5em}
.theme-restoration h1{font-size:clamp(2.4rem,6vw,4.4rem); text-shadow:3px 2px 0 var(--coral)} /* riso misregistration */
.theme-restoration h2{font-size:clamp(1.6rem,3.4vw,2.4rem); color:var(--navy)}
.theme-restoration h3{font-size:1.25rem; color:var(--blue)}

/* chrome */
.studio-shell{max-width:var(--max); margin:0 auto; padding:0 24px}
.studio-bar{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px; padding:20px 0; border-bottom:var(--rule)}
.studio-brand{display:flex; align-items:center; gap:14px; text-decoration:none; color:var(--navy)}
.studio-stamp{width:52px; height:52px; border:2px solid var(--coral); border-radius:50%; display:grid; place-items:center; font:700 1.3rem var(--display); color:var(--coral); transform:rotate(-8deg)}
.studio-name{font:800 1.25rem var(--display); margin:0}
.studio-tag{font:400 .8rem var(--mono); margin:0; color:var(--blue)}
.studio-nav{display:flex; flex-wrap:wrap; gap:6px}
.studio-nav a{font:600 .85rem var(--mono); text-decoration:none; color:var(--navy); padding:6px 10px; border:1px dashed var(--blue); border-radius:var(--radius); background:var(--cream)}
.studio-nav a:hover{background:var(--navy); color:var(--cream); border-style:solid}
.studio-nav a.nav-hq{border:2px solid var(--coral); color:var(--coral)}
.studio-ruler{display:flex; justify-content:space-between; font:400 .72rem var(--mono); color:var(--blue); padding:6px 0; border-bottom:1px solid var(--grid-major)}
.studio-ruler span::before{content:"├ "}

/* regions */
.studio-page{padding:48px 0}
.studio-hero{padding:24px 0 40px; border-bottom:1px dashed var(--blue); margin-bottom:40px}
.studio-grid{display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr); gap:40px}
@media (max-width:820px){.studio-grid{grid-template-columns:1fr}}
.studio-aside{border-left:2px solid var(--coral); padding-left:24px; font-size:.95rem}
@media (max-width:820px){.studio-aside{border-left:0; border-top:2px solid var(--coral); padding:24px 0 0}}
.keel-region:empty,.studio-aside:has(.keel-region:empty){display:none}

/* native parts */
.theme-restoration .keel-block--richText p{max-width:68ch}
.theme-restoration .keel-block--quote,.theme-restoration blockquote{
  margin:24px 0; padding:18px 22px; background:var(--navy); color:var(--cream);
  font:600 1.1rem var(--display); border-left:6px solid var(--coral); box-shadow:5px 5px 0 var(--blue)}
.theme-restoration .keel-cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:20px}
.theme-restoration .keel-cards__card{
  background:var(--cream); border:var(--rule); border-radius:var(--radius); padding:20px; position:relative;
  box-shadow:4px 4px 0 var(--coral)}
.theme-restoration .keel-cards__card::after{content:"✛"; position:absolute; top:6px; right:10px; color:var(--blue); font-size:.8rem}
.theme-restoration .keel-cards__card h3{color:var(--navy)}
.theme-restoration .button,.theme-restoration .keel-form button{
  display:inline-block; font:700 .95rem var(--mono); text-transform:uppercase; letter-spacing:.06em;
  background:var(--coral); color:var(--navy); border:2px solid var(--navy); border-radius:var(--radius);
  padding:12px 20px; text-decoration:none; box-shadow:3px 3px 0 var(--navy); cursor:pointer}
.theme-restoration .button:hover,.theme-restoration .keel-form button:hover{transform:translate(2px,2px); box-shadow:1px 1px 0 var(--navy); color:var(--navy)}
.theme-restoration img{max-width:100%; height:auto; border:2px solid var(--navy); filter:contrast(1.05) saturate(.9)}
.theme-restoration .keel-block--picture figure{margin:0; background:var(--blue); padding:8px; box-shadow:6px 6px 0 var(--coral)}
.theme-restoration figcaption{font:400 .78rem var(--mono); color:var(--cream); padding-top:6px}
.theme-restoration ul li::marker{content:"⌖ "; color:var(--coral)}
.theme-restoration code{font-family:var(--mono); background:rgba(59,110,165,.12); padding:1px 5px}

/* form */
.theme-restoration .keel-form{display:grid; gap:16px; max-width:560px; padding:24px; border:var(--rule); background:var(--cream)}
.theme-restoration .keel-form label{font:600 .8rem var(--mono); text-transform:uppercase; color:var(--blue)}
.theme-restoration .keel-form input,.theme-restoration .keel-form textarea,.theme-restoration .keel-form select{
  width:100%; box-sizing:border-box; font:400 1rem var(--body); color:var(--navy);
  background:#fff; border:2px solid var(--navy); border-radius:var(--radius); padding:10px}
.theme-restoration .keel-form input:focus,.theme-restoration .keel-form textarea:focus{outline:3px solid var(--coral); outline-offset:1px}

/* footer */
.studio-footer{border-top:var(--rule); margin-top:48px; padding:28px 0 40px; font:400 .82rem var(--mono); display:grid; gap:10px}
.studio-footer .footer-joke{color:var(--coral); font-weight:600}
.studio-footer a{color:var(--navy)}