/* The Reframe Protocol, Direction A: THE FORGE.
   Iron surfaces, ivory type, auburn only as heat.
   Hard edges everywhere. No radius, no soft shadow.
   Shared by /reframe/a/ and /reframe/a/live/. */

:root{
  /* iron: shades of Warm Charcoal down toward black */
  --iron-0:#0D0C0B;
  --iron-1:#141312;
  --iron-2:#1C1B1A;
  --charcoal:#2B2B2B;
  --charcoal-soft:#3A3A3A;
  --slate:#6B7B8A;
  --ivory:#F5F0E8;
  --ivory-deep:#ECE5D8;
  /* heat: Auburn Red, its deep shade, and a lighter tint toward ivory */
  --auburn:#B33300;
  --auburn-deep:#8C2800;
  --auburn-hot:#C4623A;
  --seam:rgba(245,240,232,.14);
  --seam-strong:rgba(245,240,232,.32);

  --display:'Anton',Impact,'Arial Narrow Bold',sans-serif;
  --cond:'Oswald','Arial Narrow',sans-serif;
  --serif:'Source Serif 4',Georgia,serif;

  --nav-h:68px;
  --gutter:16px;
  --max:1320px;
  --hammer:cubic-bezier(.6,0,.9,.35);   /* accelerating drop */
  --settle:cubic-bezier(.2,.7,.2,1);
}
@media (min-width:700px){:root{--gutter:40px}}
@media (min-width:1100px){:root{--gutter:64px}}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;background:var(--iron-0)}
body{font-family:var(--serif);font-size:18px;line-height:1.6;color:var(--ivory);background:var(--iron-0);-webkit-font-smoothing:antialiased;overflow-x:hidden;text-rendering:optimizeLegibility}
img{max-width:100%;height:auto;display:block}
[hidden]{display:none !important}
a{color:inherit}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* grain: one fixed layer over everything, never blocks a tap */
body{position:relative}
body::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:5000;opacity:.09;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .96 0 0 0 0 .94 0 0 0 0 .91 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:200px 200px}

/* ===== accessibility ===== */
.skip-link{position:absolute;top:-100%;left:var(--gutter);background:var(--auburn);color:#fff;padding:12px 18px;z-index:9999;font-family:var(--cond);font-weight:600;font-size:14px;letter-spacing:.14em;text-transform:uppercase;text-decoration:none}
.skip-link:focus{top:0}
:focus-visible{outline:2px solid var(--auburn-hot);outline-offset:3px}

/* ===== labels ===== */
.label{display:block;font-family:var(--cond);font-weight:600;font-size:13px;line-height:1.2;letter-spacing:.22em;text-transform:uppercase;color:var(--ivory)}
.eyebrow{display:inline-flex;align-items:center;gap:14px;font-family:var(--cond);font-weight:600;font-size:14px;letter-spacing:.32em;text-transform:uppercase;color:var(--ivory)}
.eyebrow::before{content:"";width:10px;height:10px;background:var(--auburn);flex:none}

/* ===== nav ===== */
.nav{position:fixed;top:0;left:0;right:0;z-index:1000;background:rgba(13,12,11,.94);border-bottom:1px solid var(--seam)}
.nav-inner{max-width:var(--max);margin:0 auto;padding:0 var(--gutter);display:flex;align-items:center;justify-content:space-between;height:var(--nav-h)}
.brand{display:flex;align-items:center}
.brand img{height:24px;width:auto}
.nav-links{display:none;align-items:center;gap:30px}
.nav-links a{padding:14px 2px;font-family:var(--cond);font-size:13px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--ivory);text-decoration:none;transition:color .2s}
.nav-links a:hover{color:var(--auburn-hot)}
.nav-links a.nav-cta{border:1px solid var(--ivory);padding:10px 18px}
.nav-links a.nav-cta:hover{background:var(--ivory);color:var(--iron-0)}
.hamburger{display:flex;flex-direction:column;gap:6px;background:none;border:0;cursor:pointer;padding:14px 6px}
.hamburger span{display:block;width:26px;height:2px;background:var(--ivory)}
.mobile-menu{display:none;position:fixed;top:var(--nav-h);left:0;right:0;bottom:0;background:var(--iron-0);z-index:999;padding:24px var(--gutter);overflow-y:auto}
.mobile-menu.open{display:flex;flex-direction:column}
.mobile-menu a{font-family:var(--display);font-size:44px;line-height:1;text-transform:uppercase;color:var(--ivory);padding:16px 0;border-bottom:1px solid var(--seam);text-decoration:none}
.mobile-menu a:hover{color:var(--auburn-hot)}
@media (min-width:1020px){.nav-links{display:flex}.hamburger{display:none}}

/* ===== display type ===== */
.display{font-family:var(--display);font-weight:400;text-transform:uppercase;line-height:.9;letter-spacing:.004em;color:var(--ivory)}
.display .l1,.display .l2{display:block}
.display .l1{font-size:30px;line-height:.95}
.display .l2{font-size:15vw;margin-top:.08em}
.display .nb{white-space:nowrap}
/* On wider screens both lines are set to the full measure: each line's size is the column width
   divided by that line's length in ems (--k1, --k2, set per page). */
@media (min-width:700px){
  .display{--inner:calc(100vw - 80px)}
  .display .l1{font-size:calc(var(--inner) / var(--k1,11.4));line-height:.92;color:transparent;-webkit-text-stroke:2px var(--ivory)}
  .display .l2{font-size:calc(var(--inner) / var(--k2,9.3));margin-top:.1em}
}
@media (min-width:1100px){.display{--inner:calc(min(100vw, 1320px) - 128px)}}
h1,h2{text-wrap:balance}

/* ===== correction-pen marks on the headline =====
   Each mark is an SVG inside the span that holds its phrase, so it rides with that phrase when the
   line wraps. Box and viewBox are both set in ems (100 viewBox units = 1em), so the mark scales with
   the type at every width without stretching, and the stroke grows with the type. */
.pen{position:relative;display:inline-block;white-space:nowrap}
.pen svg{position:absolute;overflow:visible;pointer-events:none}
.pen svg{left:-.3em;top:-.3em;height:1.5em}
.pen path{fill:none;stroke:var(--auburn);stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1 1;animation:penDraw .55s cubic-bezier(.55,0,.25,1) .8s both}
/* the phrase widths below are Anton's, in hundredths of an em: "a reason." 378, "a move." 307, "a mission." 407 */
.pen-strike svg{width:4.38em}
.pen-strike path{stroke-width:7.5;animation-delay:.8s;animation-duration:.5s}
/* the margins open a little room above the circle and below the underline, on that one line only,
   so the red never touches the line above or the red rule under the headline */
.pen-circle{margin-top:.08em}
.pen-under{margin-bottom:.14em}
.pen-circle svg{width:3.67em}
.pen-circle path{stroke-width:5;animation-delay:1.35s;animation-duration:.75s}
.pen-under svg{width:4.67em}
.pen-under path{stroke-width:5;animation-delay:.85s;animation-duration:.7s}
@media (max-width:699px){
  .pen-circle{margin-top:.14em}
  .pen-strike path{stroke-width:10}
  .pen-circle path,.pen-under path{stroke-width:6}
}
@keyframes penDraw{0%{stroke-dashoffset:1;opacity:0}1%{opacity:1}100%{stroke-dashoffset:0;opacity:1}}
@media (prefers-reduced-motion:reduce){.pen path{animation:none;stroke-dashoffset:0;opacity:1}}

/* ===== the ember seam: the signature line, drawn once like a hot bar ===== */
.seam{position:relative;height:3px;background:var(--auburn);transform-origin:left center}
.seam::after{content:"";position:absolute;right:0;top:-2px;width:72px;height:7px;background:var(--ivory);box-shadow:0 0 0 1px var(--auburn)}
.seam.is-drawing{animation:seamDraw 900ms var(--hammer) 200ms both}
.seam.is-drawing::after{animation:tipCool 1800ms linear 1100ms both}
@keyframes seamDraw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes tipCool{0%{background:var(--ivory)}55%{background:var(--auburn-hot)}100%{background:var(--auburn-hot)}}

/* ===== buttons: a hot slab ===== */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:space-between;gap:28px;background:var(--auburn);color:#fff;text-decoration:none;font-family:var(--cond);font-weight:600;font-size:19px;letter-spacing:.12em;text-transform:uppercase;padding:0 28px;min-height:68px;border:0;border-radius:0;cursor:pointer;transition:background .18s}
.btn::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--ivory);transform:scaleX(0);transform-origin:left;transition:transform .32s var(--settle)}
.btn:hover{background:var(--auburn-deep)}
.btn:hover::before{transform:scaleX(1)}
.btn:active{transform:translateY(1px)}
.btn .arr{font-family:var(--serif);font-size:24px;line-height:1;transition:transform .2s}
.btn:hover .arr{transform:translateX(5px)}
.btn[disabled]{cursor:wait;background:var(--auburn-deep)}
.btn[disabled]:hover::before{transform:scaleX(0)}
.cta-note{font-family:var(--serif);font-size:15px;line-height:1.5;color:var(--ivory);margin-top:16px;max-width:52ch}

/* ===== fields: no boxes, just a line that heats on focus ===== */
.field{margin-top:30px}
.field:first-child{margin-top:0}
.field-label{display:block;font-family:var(--cond);font-weight:600;font-size:13px;letter-spacing:.22em;text-transform:uppercase;color:var(--ivory);margin-bottom:10px}
.input,.textarea,.select{display:block;width:100%;font-family:var(--serif);font-size:19px;line-height:1.45;color:var(--ivory);background:transparent;border:0;border-bottom:2px solid var(--seam-strong);border-radius:0;padding:10px 0 12px;transition:border-color .2s;-webkit-appearance:none;appearance:none}
.textarea{resize:vertical;overflow-wrap:anywhere}
.input:focus,.textarea:focus,.select:focus{outline:none;border-bottom-color:var(--auburn-hot)}
.input::placeholder,.textarea::placeholder{color:var(--ivory);opacity:.5}
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

.form-status{font-family:var(--serif);font-size:19px;line-height:1.5;margin-top:18px;min-height:0;color:var(--ivory);overflow-wrap:anywhere;scroll-margin:calc(var(--nav-h) + 16px) 0 24px}
.form-status:empty{margin-top:0}
.form-status.is-error{display:flex;gap:12px;align-items:baseline;font-family:var(--cond);font-weight:500;font-size:17px;letter-spacing:.02em}
.form-status.is-error::before{content:"";flex:none;width:10px;height:10px;background:var(--auburn);transform:translateY(-1px)}

/* ===== sections ===== */
section{position:relative}
.band{padding:96px 0}
.band-iron{background:var(--iron-1)}
.band-char{background:var(--charcoal)}
@media (max-width:699px){.band{padding:64px 0}}

/* ===== footer ===== */
.footer{background:var(--iron-0);border-top:1px solid var(--seam);padding:72px 0 40px}
.footer-grid{display:grid;grid-template-columns:1fr;gap:40px}
@media (min-width:768px){.footer-grid{grid-template-columns:2fr 1fr 1fr 1fr}}
.footer-brand img{height:28px;width:auto;margin-bottom:18px}
.footer-brand p{font-size:16px;line-height:1.6;max-width:34ch;color:var(--ivory)}
.footer-col h3{font-family:var(--cond);font-size:13px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--ivory);margin-bottom:10px}
.footer-col a{display:block;font-family:var(--serif);font-size:16px;color:var(--ivory);padding:9px 0;text-decoration:none;transition:color .2s}
.footer-col a:hover{color:var(--auburn-hot)}
.footer-bottom{margin-top:56px;padding-top:24px;border-top:1px solid var(--seam);font-family:var(--cond);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--ivory)}

/* ===== corner brackets: hard steel corners on a frame ===== */
.brackets{position:relative}
.brackets::before,.brackets::after{content:"";position:absolute;width:22px;height:22px;pointer-events:none}
.brackets::before{top:-1px;left:-1px;border-top:3px solid var(--ivory);border-left:3px solid var(--ivory)}
.brackets::after{bottom:-1px;right:-1px;border-bottom:3px solid var(--ivory);border-right:3px solid var(--ivory)}

/* ===== entrance on first paint ===== */
.rise{animation:rise .7s var(--settle) both}
.rise.d1{animation-delay:.08s}.rise.d2{animation-delay:.16s}.rise.d3{animation-delay:.5s}.rise.d4{animation-delay:.62s}
@keyframes rise{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

@media (max-width:699px){
  body{font-size:17px}
  .btn{width:100%;font-size:17px;padding:0 20px;min-height:64px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;animation-delay:0s !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  .btn:hover .arr{transform:none}
}