/* Nell Avery, employment lawyer for small businesses: concept site by JayLM Studio. Fictional practice; demo only. */

@font-face { font-family: 'Newsreader'; font-style: normal; font-weight: 300 600; font-display: swap; src: url(../../../assets/fonts/font-6e4f2958c3a7c4a80acd.woff2) format('woff2'); }
@font-face { font-family: 'Mona Sans'; font-style: normal; font-weight: 300 900; font-stretch: 75% 125%; font-display: swap; src: url(../../../assets/fonts/font-5ea3740633e5ac7af56c.woff2) format('woff2'); }
/* Fallback faces sized to the web fonts, so the swap moves nothing. Measured in Chrome 154 at 100 px on this site's
   own copy: Newsreader 400 is 100.69 % of Georgia over the seven sentences and 109.71 % of Times New Roman; Mona Sans
   is 103.3 % of Arial at 400 (body copy), 106.5 % at 500 (links) and 100.8 % of Arial Bold at 600 (names, buttons,
   fees). Ascent and descent are the web fonts' own (Newsreader .74/.27, Mona Sans 1.09/.32), divided by the size adjustment. */
@font-face { font-family: 'Newsreader Fallback'; src: local('Georgia'); size-adjust: 100.69%; ascent-override: 73.49%; descent-override: 26.81%; line-gap-override: 0%; }
@font-face { font-family: 'Newsreader Fallback Times'; src: local('Times New Roman'); size-adjust: 109.71%; ascent-override: 67.45%; descent-override: 24.61%; line-gap-override: 0%; }
@font-face { font-family: 'Mona Sans Fallback'; font-weight: 300 450; src: local('Arial'), local('ArialMT'); size-adjust: 103.3%; ascent-override: 105.5%; descent-override: 30.98%; line-gap-override: 0%; }
@font-face { font-family: 'Mona Sans Fallback'; font-weight: 451 550; src: local('Arial'), local('ArialMT'); size-adjust: 106.5%; ascent-override: 102.35%; descent-override: 30.05%; line-gap-override: 0%; }
@font-face { font-family: 'Mona Sans Fallback'; font-weight: 551 900; src: local('Arial Bold'), local('Arial-BoldMT'); size-adjust: 100.8%; ascent-override: 108.13%; descent-override: 31.75%; line-gap-override: 0%; }

:root {
  /* INK: a warm near-black ground, bone type, one warm red-orange accent on the word that changes. The concept band
     keeps the studio's own dark bar colours */
  --ground: #161310; --ground-2: #221e1a; --bone: #f1ebe0; --bone-2: #b9b2a6;
  --line: rgba(241, 235, 224, .18); --line-2: rgba(241, 235, 224, .4);
  --accent: #ff6a3d; --accent-hi: #ff8c66;
  --band: #1c1a17; --band-fg: #f7f3ec;
  color-scheme: dark;
  --serif: 'Newsreader', 'Newsreader Fallback', 'Newsreader Fallback Times', Georgia, serif;
  --sans: 'Mona Sans', 'Mona Sans Fallback', Arial, sans-serif;
  --gutter: clamp(16px, 4.5vw, 72px); --max: 1280px;
  /* The brief's clamp(2.5rem, 9vw, 7rem), capped against the viewport so the longest word fits a 320 px screen at
     200 % text and three lines fit a short screen */
  --display: min(clamp(2.5rem, 9vw, 7rem), 12.5vw, 14svh);
  --bar: 0px;
  /* The concept band above the stage: its measured height is set on this element by index.html (and kept current by
     manifesto.js) so the first screen, band included, ends exactly at the fold. The subtraction is capped at 12svh:
     at 200 % text on a 320 px phone the band runs to twelve lines, and the stage must still hold a four-line sentence */
  --cb: 2.25rem;
  --stage: calc(100svh - var(--bar) - min(var(--cb), 12svh));
}
/* In the studio build a sticky "Back to JayLM Studio" bar (3.25rem + 1px) sits above every concept page */
body:has(> .studio-return) { --bar: calc(3.25rem + 1px); }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--ground); scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: var(--ground); color: var(--bone); font: 400 1rem/1.55 var(--sans); -webkit-font-smoothing: antialiased; }
main { flex: 1; }
h1, h2, h3 { margin: 0; font-weight: 400; line-height: 1.1; }
p { margin: 0; }
a { color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
[tabindex="-1"]:focus { outline: none; }
.visually-hidden, html:not(.no-js) .sentence { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.no-js .needs-js { display: none !important; }
.js-off { display: none; }
.no-js .js-off { display: block; }
.wrap { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }
.skip { position: absolute; left: var(--gutter); top: -100px; z-index: 60; background: var(--bone); color: var(--ground); padding: 10px 14px; border-radius: 6px; }
.skip:focus { top: 8px; }
.concept-bar { background: var(--band); color: var(--band-fg); font-size: .8125rem; line-height: 1.4; text-align: center; padding: 8px var(--gutter); }
.concept-bar a { color: inherit; }
.eyebrow { font-size: .75rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--bone-2); }

/* Masthead: name, practice line and two quiet links; part of the sticky stage on the manifesto page */
.masthead { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 0 24px; }
.ident { display: grid; margin: 0; font: inherit; } /* on the home page the ident is the h1 */
.name { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; font-size: 1.0625rem; letter-spacing: -.01em; text-decoration: none; }
.practice { display: block; font-size: .875rem; font-weight: 400; color: var(--bone-2); margin-top: -6px; }
.top-nav { display: flex; flex-wrap: wrap; gap: 0 4px; margin: 0 -12px; }
.top-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 999px; font-size: .9375rem; font-weight: 500; text-decoration: none; color: var(--bone-2); }
.top-nav a:hover { color: var(--bone); background: var(--ground-2); }
.top-nav a[aria-current="page"] { color: var(--bone); text-decoration: underline; text-underline-offset: 6px; }

/* Manifesto: a sticky stage shows the current sentence; the chapters below are scroll runways whose plain sentences
   are visually hidden (screen readers read them in order) while this stage's kinetic copy is aria-hidden */
.manifesto { position: relative; }
.stage { position: sticky; top: var(--bar); z-index: 2; height: var(--stage); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; padding: 8px var(--gutter) 18px; background: var(--ground); }
/* Phones: the counter keeps a band of its own above the dock, which sits in the bottom right corner */
@media (max-width: 719px) { .stage { padding-bottom: 76px; } }
.k-wrap { display: grid; align-content: center; min-width: 0; padding: 12px 52px 12px 0; }
.k { position: relative; max-width: 13.2em; font: 400 var(--display)/1.04 var(--serif); letter-spacing: -.02em; text-wrap: balance; }
.w { position: relative; display: inline-block; overflow-wrap: anywhere; color: var(--bone); text-decoration: none; transition: opacity .28s ease, translate .55s cubic-bezier(.2, .7, .15, 1), color .3s ease; }
.w.accent { color: var(--accent); }
.w.link { text-decoration: underline; text-decoration-thickness: .04em; text-underline-offset: .1em; }
a.w:hover { color: var(--accent-hi); }
.w.in { opacity: 0; translate: 0 .35em; }
.w.abs { position: absolute; white-space: nowrap; pointer-events: none; }
.w.out { opacity: 0; }
.w.out.strike { transition: opacity .25s ease .36s; }
/* On a strike exit the old words are struck and fade first; the kept and new words wait, so the two sentences do not
   sit on top of each other when the line count changes */
.k.strike-exit .w:not(.abs) { transition-delay: .42s; }
.w::after { content: ''; position: absolute; left: -.02em; right: -.02em; top: 50%; height: .055em; background: var(--bone); transform-origin: 0 50%; scale: 0 1; transition: scale .34s cubic-bezier(.3, 0, .2, 1); }
.w.strike::after, .w.struck::after { scale: 1 1; }
.stage-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; min-height: 28px; }
.foot-left { display: flex; align-items: center; gap: 18px; font-size: .8125rem; color: var(--bone-2); letter-spacing: .06em; }
.count { font-variant-numeric: tabular-nums; }
.hint { display: inline-flex; align-items: center; gap: 10px; transition: opacity .3s; }
.hint::before { content: ''; width: 28px; height: 1px; background: var(--bone-2); transform-origin: 0 50%; animation: hint 1.8s ease-in-out infinite; }
@keyframes hint { 0%, 100% { scale: .35 1; opacity: .5; } 50% { scale: 1 1; opacity: 1; } }
.manifesto:not([data-chapter="1"]) .hint { opacity: 0; }
.rail { position: absolute; right: max(2px, calc(var(--gutter) - 18px)); top: 50%; translate: 0 -50%; display: grid; z-index: 3; }
.rail a { display: grid; place-items: center; width: 44px; height: 44px; text-decoration: none; }
.rail a::before { content: ''; width: 12px; height: 2px; background: var(--bone-2); transition: width .25s, background-color .25s; }
.rail a:hover::before { background: var(--bone); }
.rail a[aria-current]::before { width: 22px; background: var(--bone); }
@media (max-height: 560px) { .rail a { height: 36px; } }
@media (max-height: 420px) { .rail { display: none; } }
@media (min-width: 720px) { .k-wrap { padding-right: 84px; } }
.chapters { position: relative; z-index: 1; margin-top: calc(-1 * var(--stage)); }
.chapter { min-height: var(--stage); }
html:not(.no-js) .num { display: none; }
/* Without JavaScript nothing can drive the stage, so the sentences stand stacked as a readable manifesto */
.no-js .stage { position: static; height: auto; display: block; padding-bottom: 0; }
.no-js .k-wrap, .no-js .stage-foot, .no-js .rail { display: none; }
.no-js .chapters { margin-top: 0; padding: 4vh var(--gutter) 8vh; }
.no-js .chapter { min-height: 0; padding: 6vh 0; border-top: 1px solid var(--line); }
.no-js .chapter:first-child { border-top: 0; }
.no-js .sentence { max-width: 13.2em; font: 400 var(--display)/1.04 var(--serif); letter-spacing: -.02em; overflow-wrap: anywhere; text-wrap: balance; }
.no-js .sentence em { font-style: normal; color: var(--accent); }
.no-js .sentence a { color: var(--accent); text-decoration-thickness: .04em; text-underline-offset: .1em; }
.no-js .num { display: block; font-size: .8125rem; font-weight: 500; letter-spacing: .08em; color: var(--bone-2); margin-bottom: 16px; }

/* Sticky dock: the call, once the first screen is behind the visitor and until the closing action is on screen */
.dock { position: fixed; right: 16px; bottom: 16px; z-index: 40; display: inline-flex; align-items: center; min-height: 48px; padding: 0 22px; border-radius: 999px; background: var(--bone); color: var(--ground); font-weight: 600; text-decoration: none; box-shadow: 0 8px 24px rgba(0, 0, 0, .5); opacity: 0; visibility: hidden; translate: 0 8px; transition: opacity .3s, translate .3s, visibility 0s .3s; }
.dock-on:not(.dock-off) .dock { opacity: 1; visibility: visible; translate: 0 0; transition: opacity .3s, translate .3s; }
.dock:hover { background: var(--accent); }

/* Closing block and footer */
.close { position: relative; z-index: 3; background: var(--ground); border-top: 1px solid var(--line); padding: clamp(56px, 12vh, 140px) 0; }
.close-grid { display: grid; gap: 28px; }
@media (min-width: 900px) { .close-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; } }
.close h2 { font: 400 clamp(1.9rem, 3.4vw, 3rem)/1.08 var(--serif); letter-spacing: -.02em; margin-top: 10px; max-width: 9.6em; }
.close p { font: 400 clamp(1.05rem, 1.4vw, 1.3rem)/1.45 var(--serif); max-width: 27.6em; }
.close p + p { margin-top: 14px; }
.actions { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; margin-top: 28px; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 26px; border-radius: 999px; border: 0; background: var(--bone); color: var(--ground); font: 600 1rem/1 var(--sans); text-decoration: none; cursor: pointer; transition: background-color .15s; }
.btn:hover { background: var(--accent); }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.btn-quiet { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; font-weight: 500; text-decoration: underline; text-underline-offset: 5px; }
.btn-quiet:hover { color: var(--accent-hi); }
.site-foot { border-top: 1px solid var(--line); padding: 28px 0 40px; font-size: .875rem; color: var(--bone-2); }
.site-foot strong { color: var(--bone); }
.foot-row { display: flex; flex-wrap: wrap; gap: 4px 24px; justify-content: space-between; align-items: center; }
.foot-nav { display: flex; flex-wrap: wrap; gap: 0 16px; }
.foot-nav a { display: inline-flex; align-items: center; min-height: 44px; }
.disclaimer { margin-top: 12px; max-width: 44em; }

/* Inner pages: static masthead, display title with one accent word */
.page-top { padding: 8px var(--gutter) 0; }
.page { padding: clamp(28px, 7vh, 72px) 0 88px; }
.page-head h1 { font: 400 var(--display)/1.04 var(--serif); letter-spacing: -.02em; max-width: 13.2em; overflow-wrap: anywhere; text-wrap: balance; }
.page-head h1 em { font-style: normal; color: var(--accent); }
.page-head .lede { margin-top: 20px; font-size: clamp(1.05rem, 1.4vw, 1.25rem); color: var(--bone-2); max-width: 32em; }

.situations { margin-top: clamp(32px, 6vh, 64px); border-top: 1px solid var(--line); counter-reset: sit; }
.sit { display: grid; gap: 12px 32px; padding: 30px 0 34px; border-bottom: 1px solid var(--line); }
@media (min-width: 840px) { .sit { grid-template-columns: 56px minmax(0, 5fr) minmax(0, 6fr) 176px; align-items: start; padding: 40px 0; } }
.sit-num { font-size: .8125rem; font-weight: 500; letter-spacing: .08em; color: var(--bone-2); padding-top: 10px; }
.sit h2 { font: 400 clamp(1.6rem, 2.6vw, 2.3rem)/1.1 var(--serif); letter-spacing: -.02em; }
.sit-line { font: 400 1.125rem/1.4 var(--serif); color: var(--bone-2); margin-top: 8px; max-width: 18em; }
.sit h3 { font-size: .75rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--bone-2); margin-bottom: 8px; }
.sit-does p { max-width: 30.7em; }
.fee { display: grid; gap: 2px; }
.fee strong { font-size: 1.25rem; font-weight: 600; }
.fee span { font-size: .8125rem; color: var(--bone-2); line-height: 1.35; }
@media (min-width: 840px) { .fee { padding-top: 8px; } }
.fees-note { margin-top: 28px; max-width: 37em; color: var(--bone-2); }
.not-listed { margin-top: clamp(40px, 8vh, 80px); display: grid; gap: 8px; }
.not-listed h2 { font: 400 clamp(1.6rem, 2.6vw, 2.3rem)/1.1 var(--serif); letter-spacing: -.02em; }
.not-listed p { max-width: 28em; }

/* Contact form: local validation, demo confirmation, nothing sent */
.contact { display: grid; gap: 40px; margin-top: clamp(28px, 5vh, 56px); }
@media (min-width: 900px) { .contact { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 80px; align-items: start; } }
.field { display: grid; gap: 6px; margin-bottom: 20px; }
.field label { font-weight: 600; }
.field .hint-text { font-size: .875rem; color: var(--bone-2); }
.field :is(input, select, textarea) { width: 100%; min-height: 48px; padding: 10px 14px; border: 1.5px solid var(--bone-2); border-radius: 8px; background: var(--ground-2); color: var(--bone); font: inherit; }
.field select { appearance: none; -webkit-appearance: none; padding-right: 40px; background: var(--ground-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M3 6l5 5 5-5' fill='none' stroke='%23f1ebe0' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 14px center; }
.field textarea { min-height: 150px; resize: vertical; line-height: 1.5; }
.field :is(input, select, textarea):focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.field [aria-invalid="true"] { border-color: var(--accent); }
.field .error { font-size: .875rem; font-weight: 500; color: var(--accent); }
.field .error:empty { display: none; }
.errors { border: 1.5px solid var(--accent); border-radius: 8px; padding: 14px 16px; margin-bottom: 20px; }
.errors h2 { font: 600 1rem/1.3 var(--sans); }
.errors ul { margin-top: 2px; display: grid; }
.errors li { position: relative; padding-left: 20px; }
.errors li::before { content: ''; position: absolute; left: 0; top: calc(11px + .78em); width: 10px; height: 1px; background: var(--accent); }
.errors a { color: var(--accent); display: inline-block; padding: 11px 0; }
.form-row { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; margin-top: 4px; }
.form-note { font-size: .875rem; color: var(--bone-2); }
.sent { border: 1px solid var(--line); border-radius: 12px; padding: 32px 28px; display: grid; gap: 12px; justify-items: start; }
.sent h2 { font: 400 clamp(1.8rem, 3vw, 2.4rem)/1.1 var(--serif); letter-spacing: -.02em; }
.sent p { max-width: 29.5em; }
.aside h2 { font: 400 1.5rem/1.2 var(--serif); }
.aside ul { margin-top: 12px; display: grid; gap: 10px; }
.aside li { position: relative; padding-left: 20px; max-width: 24.5em; }
.aside li::before { content: ''; position: absolute; left: 0; top: .72em; width: 10px; height: 1px; background: var(--bone); }
.aside .quiet { margin-top: 20px; font-size: .875rem; color: var(--bone-2); max-width: 24.5em; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .w, .w::after, .hint, .hint::before, .dock, .rail a::before, .btn { transition: none !important; animation: none !important; }
  .w.in { opacity: 1; translate: none; }
}