/* Astor Law website: styles for the landing page.
   Identity: the 118o master (../assets/logo/README.md). Ink with the electric-blue dot on white, the lighter
   dot on the photograph and on ink. Playfair Display headlines, Geist body, Geist Mono annotations.
   Layout: the fjord is the front door and the firm's belief follows on white. The services are an index,
   their names set large one row each. How we work sets what our technology does beside what our lawyers
   do. The price promise closes the page on ink.
   One look for every visitor, so no dark theme. */
:root{
  --ink:#0A1430;          /* logo, text, deep bands */
  --blue:#2F6BFF;         /* the dot: links, rules and annotations on white */
  --blue-lt:#7EA1FF;      /* the dot on the photograph and on ink */
  --paper:#FFFFFF;
  --mist:#F3F5FA;         /* second ground, biased to the ink */
  --slate:#4B5573;        /* secondary text on white */
  --line:#DCE1EB;         /* hairlines on white */
  --white:#FFFFFF;
  --on-ink:#CCD5E6;       /* secondary text on ink */
  --line-ink:rgba(255,255,255,.16);
  --photo:#1B2228;        /* shows until the photograph loads */
  --serif:"Playfair Display",Georgia,"Times New Roman",serif;
  --sans:"Geist","Helvetica Neue",Arial,sans-serif;
  --mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --gutter:clamp(16px,4.5vw,64px);
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:400 16px/1.65 var(--sans);-webkit-font-smoothing:antialiased}
img{max-width:100%}
a{color:inherit}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.dark :focus-visible{outline-color:var(--blue-lt)}
h1,h2,h3{font-family:var(--serif);font-weight:400;letter-spacing:-.01em;text-wrap:balance;margin:0}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
[id]{scroll-margin-top:24px}
.wrap{max-width:1360px;margin-inline:auto;padding-inline:var(--gutter)}
.skip{position:absolute;left:-9999px;top:12px;z-index:20;background:var(--paper);color:var(--ink);padding:8px 14px;font-size:14px}
.skip:focus{left:16px}

/* ---------- The logo: the drawn A at Playfair's cap height, on the text baseline ---------- */
.logo{font:400 30px/1 var(--serif);letter-spacing:-.01em;white-space:nowrap;text-decoration:none;color:inherit;--dot:var(--blue)}
.logo svg{height:.71em;width:auto;overflow:visible;vertical-align:baseline;margin-right:.035em;fill:currentColor}
.logo .dot{fill:var(--dot)}
.dark .logo{--dot:var(--blue-lt)}

/* ---------- Annotations: the monospace notes of the 118 direction ---------- */
.note{font:400 13px/1.5 var(--mono);letter-spacing:.02em;color:var(--blue);display:flex;align-items:flex-start;gap:10px}
.note::before{content:"";width:7px;height:7px;margin-top:calc((1.5em - 7px) / 2);border-radius:50%;background:currentColor;flex:none}
.dark .note{color:var(--blue-lt)}
.ann{font:400 12.5px/1.5 var(--mono);letter-spacing:.02em;color:var(--slate)}
.caps{font:500 11.5px/1.6 var(--sans);letter-spacing:.14em;text-transform:uppercase}
.rule{display:block;width:56px;height:2px;background:var(--blue)}
.dark .rule{background:var(--blue-lt)}

/* ---------- Header, on the photograph ---------- */
.site-head{position:absolute;z-index:5;inset:0 0 auto;color:var(--white);background:linear-gradient(180deg,rgba(5,10,24,.5),rgba(5,10,24,.14) 60%,transparent)}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:26px;max-width:none}
.nav{display:flex;gap:clamp(18px,2.6vw,38px);align-items:center}
.nav a{font-size:14px;text-decoration:none;padding-bottom:3px;border-bottom:1px solid transparent;transition:border-color .2s}
.nav a:hover{border-color:var(--blue-lt)}
.menu-btn{display:none;background:none;border:1px solid rgba(255,255,255,.75);color:var(--white);font:400 13px var(--sans);letter-spacing:.12em;text-transform:uppercase;padding:8px 14px;border-radius:0;cursor:pointer}

/* ---------- Hero: the voyage up the fjord ---------- */
.hero{position:relative;height:100vh;height:100svh;min-height:600px;max-height:1100px;overflow:hidden;isolation:isolate;background:var(--photo);color:var(--white);display:flex;align-items:flex-end}
.hero .photo{position:absolute;inset:0;background:url("fjord.jpg") 64.5% 46%/cover no-repeat}
#voyage{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity 1.2s ease}
#voyage.on{opacity:1}
.hero .shade{position:absolute;inset:0;pointer-events:none;background:
  linear-gradient(180deg,rgba(8,14,18,.18) 0%,rgba(8,14,18,0) 24%),
  linear-gradient(0deg,rgba(8,14,18,.55) 0%,rgba(8,14,18,0) 40%),
  linear-gradient(90deg,rgba(8,14,18,.38) 0%,rgba(8,14,18,0) 50%)}
.hero-copy{position:relative;z-index:2;width:100%;padding-block:0 clamp(44px,8vh,92px)}
.hero-copy > div{max-width:820px;display:grid;justify-items:start}
.hero .rule{margin:20px 0 24px}
.hero h1{font-size:clamp(40px,6vw,88px);line-height:1.04}

/* ---------- Belief: the first words on white ---------- */
.belief{padding-block:clamp(88px,12vw,168px);border-bottom:1px solid var(--line)}
.belief .wrap{display:grid;gap:26px;justify-items:start}
.belief .big{font-family:var(--serif);font-size:clamp(34px,5vw,72px);line-height:1.1;letter-spacing:-.01em;max-width:19ch;text-wrap:balance}
.belief .small{font-size:clamp(17px,1.4vw,20px);line-height:1.65;max-width:54ch;color:var(--slate);text-wrap:pretty}
.belief .sig{margin-top:14px;color:var(--blue)}

/* ---------- Promise: the price statement, closing the page on ink ---------- */
.promise{position:relative;overflow:hidden;background:var(--ink);color:var(--white);padding-block:clamp(96px,13vw,176px);text-align:center}
.promise .wrap{position:relative;z-index:1;display:grid;justify-items:center;gap:30px}
.big-a{position:absolute;pointer-events:none;width:auto;overflow:visible}
.promise .big-a{left:50%;top:50%;height:clamp(340px,46vw,640px);transform:translate(-50%,-50%);fill:var(--white);opacity:.06}
.promise .big-a .dot{fill:var(--blue-lt)}
.statement{font-family:var(--serif);font-size:clamp(32px,4.2vw,60px);line-height:1.14;letter-spacing:-.005em;max-width:20ch;text-wrap:balance}
.promise + .section{border-top:0}

/* ---------- Sections on white ---------- */
.section{padding-block:clamp(64px,8vw,112px)}
.section + .section{border-top:1px solid var(--line)}
.section.mist{background:var(--mist);border-top:0}
.section.mist + .section{border-top:0}
.section-head{display:flex;justify-content:space-between;align-items:end;gap:20px 40px;flex-wrap:wrap;margin-bottom:40px}
.section-head > div{display:grid;gap:16px;min-width:0}
.section-head h2{font-size:clamp(30px,3.6vw,48px);line-height:1.12;max-width:20ch}
.section-head p{max-width:46ch;color:var(--slate)}

/* ---------- What we do: the index, the service names set large, one row each ---------- */
.index{border-top:1px solid var(--ink)}
.row{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.5fr) minmax(0,1fr);gap:12px clamp(24px,3vw,48px);align-items:center;padding:30px clamp(0px,1.5vw,24px);border-bottom:1px solid var(--line);transition:background .25s,color .25s}
.row .who{color:var(--slate);transition:color .25s}
.row h3{font-size:clamp(30px,3.8vw,56px);line-height:1.05;display:flex;align-items:center;gap:0;transition:gap .25s}
.row h3::before{content:"";width:0;height:14px;border-radius:50%;background:var(--blue-lt);flex:none;transition:width .25s}
.row-side{display:grid;gap:8px;color:var(--slate);font-size:15px;line-height:1.6;min-width:0;transition:color .25s}
.row .fee{font:400 12.5px/1.5 var(--mono);letter-spacing:.02em;color:var(--ink);transition:color .25s}
@media (hover:hover){
  .row:hover{background:var(--ink);color:var(--white)}
  .row:hover .who,.row:hover .row-side{color:var(--on-ink)}
  .row:hover .fee{color:var(--blue-lt)}
  .row:hover h3{gap:18px}
  .row:hover h3::before{width:14px}
}

/* ---------- How we work: what the technology does, and what the lawyers do ---------- */
.split{display:grid;grid-template-columns:minmax(0,1fr) 112px minmax(0,1fr);align-items:stretch}
.side{padding:clamp(26px,3vw,44px);display:grid;gap:18px;align-content:start;min-width:0}
.side.tech{background:var(--paper);border:1px solid var(--line)}
.side.law{background:var(--ink);color:var(--white)}
.side-k{font:500 11.5px/1.6 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--slate)}
.law .side-k{color:var(--blue-lt)}
.side li{padding-block:13px;border-top:1px solid var(--line)}
.tech li{font:400 clamp(16px,1.3vw,18px)/1.5 var(--sans)}
.law li{font:400 clamp(19px,1.6vw,23px)/1.35 var(--serif);border-top-color:var(--line-ink)}
.hand{display:grid;place-content:center;justify-items:center;gap:8px;font:400 12px/1 var(--mono);color:var(--slate)}
.hand svg{width:64px;height:auto;overflow:visible;transform:scaleX(-1)}
.hand path{fill:none;stroke:var(--ink);stroke-width:1.5}
.hand .travel{fill:var(--blue);animation:hand 3.2s cubic-bezier(.5,0,.3,1) infinite}
@keyframes hand{0%,15%{transform:translateX(0);opacity:0}25%{opacity:1}75%{opacity:1}85%,100%{transform:translateX(44px);opacity:0}}
#method h2{max-width:none}
.h-sub{display:block;color:var(--slate)}

/* People */
.pairs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(40px,6vw,104px);border-top:1px solid var(--line)}
.pairs > *{padding-block:40px 46px;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:12px;min-width:0}
.pairs h3{font-size:clamp(24px,2.2vw,30px);line-height:1.2}
.pairs p{max-width:46ch;line-height:1.7}
.person p{color:var(--slate)}
.person .note{color:var(--blue)}
.person .in{align-self:flex-start;font-size:14px;color:var(--blue);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.person.next h3{color:var(--slate)}

/* Contact */
.contact{text-align:center}
.contact .wrap{display:grid;justify-items:center;gap:22px}
.contact h2{font-size:clamp(30px,4vw,54px);line-height:1.12}
.addr{display:flex;justify-content:center;gap:18px clamp(28px,5vw,72px);flex-wrap:wrap;margin-top:8px}
.addr div{display:grid;gap:4px}
.addr .caps{color:var(--slate)}
.addr a{font-size:clamp(16px,1.3vw,18px);text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:2px;user-select:all}
.addr a:hover{border-color:var(--blue)}
.contact .base{color:var(--slate);font-size:14.5px}

/* ---------- Footer ---------- */
.site-foot{background:var(--ink);color:var(--on-ink)}
.site-foot .wrap{padding-block:52px 36px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:28px 48px;align-items:start}
.site-foot .logo{font-size:24px;color:var(--white)}
.foot-nav{display:flex;gap:12px 28px;flex-wrap:wrap;font-size:14px}
.foot-nav a{text-decoration:none}
.foot-nav a:hover{color:var(--white)}
.fine{grid-column:1/-1;border-top:1px solid var(--line-ink);padding-top:22px;font-size:12.5px;display:flex;justify-content:space-between;gap:10px 24px;flex-wrap:wrap;opacity:.8}

/* ---------- Narrow screens ---------- */
@media (max-width:900px){
  .row{grid-template-columns:minmax(0,1fr);padding-inline:0}
  .split{grid-template-columns:minmax(0,1fr)}
  .hand{padding-block:18px}
  .hand svg{transform:rotate(90deg) scaleX(-1)}
  .nav{display:none}
  .menu-btn{display:inline-block}
  .site-head.open{background:var(--ink)}
  .site-head.open .nav{display:flex;flex-direction:column;align-items:stretch;gap:0;position:absolute;top:100%;left:0;right:0;background:var(--ink);padding:0 var(--gutter) 16px;border-bottom:1px solid var(--line-ink)}
  .site-head.open .nav a{font-size:17px;padding:14px 0;border-bottom:1px solid var(--line-ink)}
  .site-head.open .nav a:last-child{border-bottom:0}
  .hero .shade{background:
    linear-gradient(180deg,rgba(8,14,18,.18) 0%,rgba(8,14,18,0) 24%),
    linear-gradient(0deg,rgba(8,14,18,.78) 0%,rgba(8,14,18,.5) 38%,rgba(8,14,18,0) 62%)}
  .pairs{grid-template-columns:minmax(0,1fr)}
  .pairs > *{padding-block:28px 32px}
  .site-foot .wrap{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:600px){
  .logo{font-size:26px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important}
  #voyage{display:none}
  .hand .travel{animation:none;transform:translateX(22px)}
}