/* Shared layout for the reading pages the footer points at: FAQ, Contact, Team, Blog,
 * Donations, Privacy, Terms. They differ in what they say, not in how they are set.
 *
 * Type here starts at 16px and the smallest thing on the page is 13px. That is
 * deliberately out of step with the rest of the product, where 9px is the single most
 * common declared size — these are pages somebody reads a paragraph of rather than
 * scans for a card name. */

.content-page{max-width:820px;margin:0 auto;padding:0 24px 90px}
.content-hero{padding:64px 0 34px;border-bottom:1px solid var(--line)}
.content-hero .eyebrow{margin:0 0 12px;color:var(--copper);font-size:12px;letter-spacing:.16em;text-transform:uppercase}
.content-hero h1{margin:0;font:clamp(38px,6vw,58px)/1.05 Georgia,serif;font-weight:500;letter-spacing:-.02em}
.content-hero p{max-width:60ch;margin:18px 0 0;color:var(--muted);font-size:17px;line-height:1.65}

.content-section{padding-top:46px}
.content-section>h2{margin:0 0 6px;font:27px Georgia,serif;font-weight:500}
.content-section>p.section-lead{margin:0 0 6px;color:var(--muted);font-size:15px;line-height:1.6}

.faq-entry{padding:24px 0;border-bottom:1px solid var(--line)}
.faq-entry:last-child{border-bottom:0}
.faq-entry h3{margin:0 0 9px;font:19px Georgia,serif;font-weight:600}
.faq-entry p{margin:0 0 11px;font-size:16px;line-height:1.7}
.faq-entry p:last-child{margin-bottom:0}
.faq-entry ul{margin:0 0 11px;padding-left:22px;font-size:16px;line-height:1.7}
.faq-entry li{margin-bottom:5px}
.faq-entry a{color:var(--green2);font-weight:600}

/* An honest placeholder. It says what is not here and where to go instead, rather than
 * pretending the page is a moment from arriving. */
.content-pending{margin-top:44px;padding:32px;border:1px solid var(--line);border-left:3px solid var(--copper);background:var(--surface)}
.content-pending h2{margin:0 0 10px;font:21px Georgia,serif;font-weight:600}
.content-pending p{margin:0 0 12px;color:var(--muted);font-size:16px;line-height:1.7}
.content-pending p:last-child{margin-bottom:0}
.content-pending a{color:var(--green2);font-weight:600}
.content-pending ul{margin:0 0 12px;padding-left:22px;color:var(--muted);font-size:16px;line-height:1.7}

.contact-form{margin-top:38px;display:grid;gap:20px}
.contact-field{display:grid;gap:7px}
.contact-field label{font-size:14px;font-weight:600;color:var(--ink)}
.contact-field .hint{font-size:13px;color:var(--muted);line-height:1.5}
.contact-field input,.contact-field select,.contact-field textarea{width:100%;padding:11px 13px;border:1px solid var(--line-strong);border-radius:3px;background:var(--surface-raised);color:var(--ink);font:15px/1.5 inherit}
.contact-field textarea{min-height:190px;resize:vertical}
.contact-field input:focus-visible,.contact-field select:focus-visible,.contact-field textarea:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.contact-count{justify-self:end;font-size:13px;color:var(--muted)}
.contact-count.over{color:var(--danger);font-weight:600}
.contact-actions{display:flex;align-items:center;gap:16px}
.contact-actions .primary{font-size:15px}
.contact-sent{margin-top:38px;padding:32px;border:1px solid var(--line);border-left:3px solid var(--accent);background:var(--surface)}
.contact-sent h2{margin:0 0 10px;font:21px Georgia,serif;font-weight:600}
.contact-sent p{margin:0 0 12px;color:var(--muted);font-size:16px;line-height:1.7}
.contact-sent p:last-child{margin-bottom:0}
.contact-reference{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:15px;color:var(--ink);background:var(--surface-muted);padding:3px 8px;border-radius:3px}

@media(max-width:600px){
  .content-page{padding:0 20px 64px}
  .content-hero{padding:40px 0 26px}
  .content-section{padding-top:34px}
}

/* The blog index and post pages. Server-rendered, so these rules dress markup written by
 * src/blog-pages.js rather than anything a script assembled. */
.post-list{margin-top:26px}
.post-card{padding:30px 0;border-bottom:1px solid var(--line)}
.post-card:last-child{border-bottom:0}
.post-date,.post-byline{margin:0;color:var(--faint);font-size:13px;letter-spacing:.04em}
.post-card h2{margin:8px 0 10px;font:26px Georgia,serif;font-weight:500;line-height:1.25}
.post-card h2 a{color:var(--ink);text-decoration:none}
.post-card h2 a:hover,.post-card h2 a:focus-visible{text-decoration:underline}
.post-card p{margin:0 0 10px;color:var(--muted);font-size:16px;line-height:1.7}
.post-more a{color:var(--green2);font-weight:600;font-size:15px}
.post .content-hero .eyebrow a{color:var(--copper);text-decoration:none}
.post .content-hero .eyebrow a:hover{text-decoration:underline}
.post-byline{margin-top:16px}

/* The rendered post body. Every element here is one the bounded Markdown renderer can
 * produce; anything it cannot produce needs no rule. */
.post-body{margin-top:40px;font-size:17px;line-height:1.75}
.post-body h2{margin:42px 0 12px;font:28px Georgia,serif;font-weight:500}
.post-body h3{margin:34px 0 10px;font:22px Georgia,serif;font-weight:600}
.post-body h4,.post-body h5,.post-body h6{margin:28px 0 8px;font:18px Georgia,serif;font-weight:600}
.post-body p{margin:0 0 18px}
.post-body ul,.post-body ol{margin:0 0 18px;padding-left:26px}
.post-body li{margin-bottom:8px}
.post-body a{color:var(--green2);font-weight:600}
.post-body strong{font-weight:700}
.post-back{margin-top:54px;padding-top:22px;border-top:1px solid var(--line)}
.post-back a{color:var(--green2);font-weight:600}

/* The workshop page's hero carries the JankyJoes mark beside the name.
 *
 * It is detailed illustration rather than a glyph — a hammer, a card, sparks — so it is
 * given room here, at 160px, where the workshop is the subject of the page. It also holds
 * up small: the footer carries it at 40px beside "Forged within the JankyJoes Workshop". */
.workshop-hero{display:flex;align-items:center;justify-content:space-between;gap:40px}
.workshop-hero>div{min-width:0}
.workshop-mark{width:160px;height:160px;flex:0 0 160px;object-fit:contain;display:block}
@media(max-width:700px){
  .workshop-hero{flex-direction:column-reverse;align-items:flex-start;gap:22px}
  .workshop-mark{width:112px;height:112px;flex-basis:112px}
}

/* Developer API page. Nothing else in the product renders code blocks at length, so
   this is the first place `pre` and `code` needed deciding. A sample response is wide by
   nature: it scrolls inside its own block rather than pushing the page sideways. */
.content-page code { padding: 1px 4px; background: var(--surface-muted); border: 1px solid var(--line); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; }
.content-page pre { max-width: 100%; margin: 14px 0; padding: 14px 16px; background: var(--surface-muted); border: 1px solid var(--line); overflow-x: auto; }
.content-page pre code { padding: 0; background: none; border: 0; font-size: 12px; line-height: 1.55; white-space: pre; }
.api-parameters { display: grid; gap: 8px; margin: 14px 0; }
.api-parameters > div { display: grid; grid-template-columns: minmax(120px, auto) minmax(0, 1fr); gap: 12px; align-items: baseline; }
.api-parameters dt { margin: 0; }
.api-parameters dd { margin: 0; color: var(--muted); }
@media (max-width: 620px) { .api-parameters > div { grid-template-columns: 1fr; gap: 2px; } }