/* Erskine & Co — component styles ported from mockups/erskineandco-site.html.
   All colour, type and spacing values come from the token CSS. No new literals
   except the two clamp values already defined in the token files. */

html{scroll-behavior:smooth}
body{overflow-x:hidden}

/* Neutralise WordPress block group defaults so token spacing owns layout */
.wp-site-blocks{margin:0}
.masthead.wp-block-group,.principle.wp-block-group,.sitefoot.wp-block-group{margin-block:0}

/* — Top bar: fixed, opaque parchment, hairline appears past 40px of scroll — */
.topbar{position:fixed;inset:0 0 auto 0;z-index:20;display:flex;justify-content:space-between;align-items:center;padding:22px var(--gutter-page);background:var(--parchment);border-bottom:1px solid transparent;transition:border-color var(--dur-base) var(--ease)}
.topbar[data-scrolled]{border-bottom-color:var(--rule)}
.mark{display:flex;flex-direction:column;align-items:flex-start;line-height:1;text-decoration:none;border:0}
.mark .name{font-family:var(--font-display);font-weight:500;font-size:var(--wordmark-header);font-variation-settings:var(--vf-small);letter-spacing:var(--track-wordmark-small);color:var(--ink)}
.mark .tick{width:var(--rule-brass-width-header);height:1px;background:var(--brass);margin-top:4px}
.util{display:flex;gap:34px}
.util a{font-family:var(--font-sans);font-size:11px;letter-spacing:var(--track-label);text-transform:uppercase;color:var(--umber);text-decoration:none;position:relative;padding-bottom:2px;border:0;transition:var(--transition-link)}
.util a:hover{color:var(--ink)}
.util a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:var(--brass);transform:scaleX(0);transform-origin:left;transition:var(--transition-rule)}
.util a:hover::after{transform:scaleX(1)}

/* — Masthead: full viewport. Wordmark only; the pairing never appears publicly — */
.masthead{min-height:100vh;padding:120px var(--gutter-page) 80px;display:grid;grid-template-rows:1fr auto}
.masthead .lockup{display:flex;align-items:center;justify-content:center;padding:40px 20px}
.wordmark{margin:0;font-family:var(--font-display);font-weight:500;font-size:var(--wordmark-masthead);letter-spacing:var(--track-wordmark);font-variation-settings:var(--vf-wordmark);color:var(--ink);line-height:.88}
.masthead .foot{padding-top:var(--s-6);display:flex;justify-content:space-between;align-items:flex-end;gap:var(--s-6);flex-wrap:wrap;border-top:1px solid var(--rule)}
.credo{margin:0;font-family:var(--font-sans);font-size:var(--label-size);letter-spacing:var(--track-label-wide);text-transform:uppercase;color:var(--brass)}
.credo strong{color:var(--ink);font-weight:400}
/* Tagline set as a caption to the descriptor: Newsreader italic, sentence case,
   a second register on the same line (mirrors the footer tagline treatment). */
.credo em{font-family:var(--font-serif);font-style:italic;font-weight:400;text-transform:none;letter-spacing:0;font-size:15px;color:var(--umber)}
.invite{margin:0;font-family:var(--font-sans);font-size:var(--label-size);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--umber)}

/* — Principle: ink rule opens the division; single 700px column — */
.principle{position:relative;padding:180px var(--gutter-page) var(--s-12);display:grid;grid-template-columns:1fr minmax(320px,700px) 1fr}
.principle::before{content:"";position:absolute;top:60px;left:var(--gutter-page);right:var(--gutter-page);height:1px;background:var(--ink)}
.principle .label{grid-column:2;display:flex;align-items:center;gap:14px;margin:0 0 var(--s-8);font-family:var(--font-sans);font-size:10.5px;letter-spacing:var(--track-label-wide);text-transform:uppercase;color:var(--brass)}
.principle .label::before{content:"§";font-family:var(--font-serif);font-style:italic;font-size:14px;letter-spacing:0;text-transform:none}
.principle .body{grid-column:2}
.quote{position:relative;margin:0 0 var(--s-7);font-family:var(--font-serif);font-style:italic;font-weight:400;font-size:var(--credo-size);line-height:var(--credo-leading);letter-spacing:-.008em;color:var(--ink);max-width:var(--measure-credo)}
.quote::before{content:"\201C";color:var(--brass)}
.quote::after{content:"\201D";color:var(--brass)}
.attr{margin:0 0 var(--s-8);font-family:var(--font-sans);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--umber)}
.attr strong{color:var(--ink);font-weight:400}
.passage{margin:0 0 var(--s-4);font-family:var(--font-serif);font-size:var(--prose-size);line-height:var(--prose-leading);color:var(--ink-2);max-width:var(--measure-prose);text-wrap:pretty}
.passage em{color:var(--brass);font-style:italic}
.passage strong{color:var(--ink);font-weight:600}

/* — Footer: signature, not navigation — */
.sitefoot{padding:110px var(--gutter-page) 60px;border-top:1px solid var(--ink)}
.sitefoot .inner{max-width:var(--measure-page);margin:0 auto;display:grid;grid-template-columns:2fr 1fr 1fr;gap:var(--s-8);align-items:start}
.signature{margin:0;font-family:var(--font-sans);font-weight:400;font-size:18px;letter-spacing:var(--track-signature);text-transform:uppercase;color:var(--ink)}
.signature .amp{color:var(--brass);font-family:var(--font-display);font-style:italic;font-weight:400;font-size:20px;letter-spacing:0;padding:0 6px}
.tagline{margin-top:14px;font-family:var(--font-serif);font-style:italic;font-size:16px;color:var(--umber);max-width:34ch;line-height:1.5}
.col{font-family:var(--font-sans);font-size:12.5px;line-height:1.7;color:var(--ink-2);letter-spacing:.02em}
.col a{border:0}
.meta{max-width:var(--measure-page);margin:80px auto 0;padding-top:22px;border-top:1px solid var(--rule);display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-family:var(--font-sans);font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--umber)}
.meta strong{color:var(--ink);font-weight:400}

/* — Contact page: same division grammar as the principle (ink rule opens it) — */
.contact{position:relative;padding:180px var(--gutter-page) var(--s-12);display:grid;grid-template-columns:1fr minmax(320px,700px) 1fr}
.contact::before{content:"";position:absolute;top:60px;left:var(--gutter-page);right:var(--gutter-page);height:1px;background:var(--ink)}
.contact .label{grid-column:2;margin:0 0 var(--s-6);font-family:var(--font-sans);font-size:10.5px;letter-spacing:var(--track-label-wide);text-transform:uppercase;color:var(--brass)}
.contact .body{grid-column:2}
.contact .lead{margin:0 0 var(--s-8);font-family:var(--font-serif);font-size:var(--prose-size);line-height:var(--prose-leading);color:var(--ink-2);max-width:var(--measure-prose);text-wrap:pretty}
.contact .lead-alt{margin:var(--s-8) 0 0;font-family:var(--font-serif);font-size:var(--prose-size-sm);line-height:var(--prose-leading);color:var(--umber);max-width:var(--measure-prose)}

/* — Fluent Forms reskin: map FF's DOM onto the register. Scoped to .contact so
     it never touches anything else. Ruled fields, not boxes; the one quiet button;
     brass (never red) validation, since the palette is closed. — */
.contact .fluentform{max-width:600px}
.contact .ff-el-group{margin:0 0 var(--s-6)}
.contact .ff-el-input--label{padding:0;margin:0 0 10px;line-height:1.4}
.contact .ff-el-input--label label{font-family:var(--font-sans);font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--brass);font-weight:400}
/* Drop FF's red required asterisk — restraint over decoration */
.contact .ff-el-is-required.asterisk-right>label:after,.contact .ff-el-input--label label:after{content:none!important}
/* Inputs + textarea → a ruled field */
.contact .ff-el-form-control{width:100%;box-sizing:border-box;background:transparent;border:0;border-bottom:1px solid var(--rule);border-radius:0;padding:8px 0;box-shadow:none;font-family:var(--font-serif);font-size:17px;line-height:1.5;color:var(--ink);transition:border-color var(--dur-base) var(--ease)}
.contact .ff-el-form-control::placeholder{color:var(--umber)}
.contact .ff-el-form-control:focus{outline:0;border-bottom-color:var(--brass);box-shadow:none}
.contact textarea.ff-el-form-control{min-height:120px;resize:vertical}
/* Submit → the one quiet button (no fill, no radius, no lift) */
.contact .ff-btn-submit{-webkit-appearance:none;appearance:none;background:none!important;border:0;border-bottom:1px solid var(--brass);border-radius:0;color:var(--umber)!important;font-family:var(--font-sans);font-size:11px;letter-spacing:var(--track-label);text-transform:uppercase;font-weight:400;padding:0 0 4px;box-shadow:none;height:auto;min-width:0;line-height:1.4;cursor:pointer;transition:var(--transition-link)}
.contact .ff-btn-submit:hover{color:var(--ink)!important;background:none!important;box-shadow:none}
.contact .ff_submit_btn_wrapper{margin-top:var(--s-4)}
/* Validation → brass, never red */
.contact .ff-el-form-control.error,.contact .ff-el-form-control.has-error{border-bottom-color:var(--brass)}
.contact .ff-el-is-error,.contact .text-danger,.contact .error.text-danger{color:var(--brass);font-family:var(--font-serif);font-style:italic;font-size:14px;margin-top:6px}
/* Same-page confirmation → the register voice, no green box */
.contact .ff-message-success,.contact .ff_submit_success{background:none;border:0;padding:0;font-family:var(--font-serif);font-size:var(--credo-size);line-height:var(--credo-leading);font-style:italic;color:var(--ink)}

@media(max-width:820px){
  .topbar{padding:16px var(--gutter-page-sm)}
  .util{gap:18px}
  .util a{font-size:9.5px}
  .masthead{padding:96px var(--gutter-page-sm) 60px}
  .wordmark{font-size:96px}
  .principle{grid-template-columns:1fr;padding:110px var(--gutter-page-sm) 90px}
  .principle::before{left:var(--gutter-page-sm);right:var(--gutter-page-sm)}
  .principle .label,.principle .body{grid-column:1}
  .quote{font-size:26px}
  .passage{font-size:16px}
  .contact{grid-template-columns:1fr;padding:110px var(--gutter-page-sm) 90px}
  .contact::before{left:var(--gutter-page-sm);right:var(--gutter-page-sm)}
  .contact .label,.contact .body{grid-column:1}
  .sitefoot{padding:80px var(--gutter-page-sm) 40px}
  .sitefoot .inner{grid-template-columns:1fr;gap:36px}
  .meta{margin-top:48px}
}