/* Brand: "Measure & Draw" — deep specimen navy, four pillar colours taken from pigment and stain:
   madder rose (research), slide blue (imaging), lichen sage (clinical), ochre (studio).
   Type: Hanken Grotesk light for display, Newsreader italic for voice, JetBrains Mono for FIG. labels and data.
   Deliberately single-theme: every colour is set explicitly. */
:root{
  --navy:#0c1424; --navy-2:#14203a; --ink:#111827; --paper:#f3f1ec; --sheet:#fbfaf7; --line:#d9d5cc;
  --muted:#5d6472; --mist:#c9d3e3;
  --rose:#a8767c; --rose-d:#7e5157; --sky:#93b1cf; --sky-d:#5d7fa3; --sage:#93a296; --sage-d:#62716a; --ochre:#b48a52; --ochre-d:#8a6634;
  --glow:#9fc0ff;
  --display:"Outfit","Avenir Next","Helvetica Neue",Arial,sans-serif;
  --body:"Hanken Grotesk","Helvetica Neue",Arial,sans-serif;
  --voice:"Newsreader",Georgia,serif;
  --hand:"Kalam","Bradley Hand","Segoe Print",cursive;
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.65 var(--body);-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:30;background:var(--navy)}
img{max-width:100%;display:block}
a{color:inherit}
a:focus-visible,button:focus-visible{outline:2px solid var(--glow);outline-offset:3px;border-radius:2px}
h1,h2,h3{font-family:var(--display);font-weight:300;line-height:1.05;letter-spacing:-.02em;margin:0;text-wrap:balance}
p{margin:0}
.gut{padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.wrap{max-width:1200px;margin:0 auto}
.label{font-family:var(--display);font-weight:500;font-size:12px;letter-spacing:.16em;text-transform:uppercase}
.hand{font-family:var(--hand);font-weight:300}
.voice{font-family:var(--voice);font-style:italic;font-weight:300}
.read{max-width:660px}
.stack{display:grid;gap:18px}

/* ---------- top bar ---------- */
.bar{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:rgba(12,20,36,.92);backdrop-filter:blur(8px);color:#e8edf6;border-bottom:1px solid rgba(255,255,255,.08)}
.bar .wrap{display:flex;align-items:center;gap:22px;padding-block:14px;overflow-x:auto;scrollbar-width:none}
.bar .wrap::-webkit-scrollbar{display:none}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;margin-right:auto;white-space:nowrap}
.brand svg{width:26px;height:26px;flex:none}
.brand span{font-family:var(--display);font-weight:500;font-size:17px;letter-spacing:.01em;text-transform:none;color:#fff}
.brand svg.logo{width:38px;height:38px;flex:none}
.bar a.tab{font-family:var(--display);font-weight:500;font-size:12px;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;color:#aab6ca;white-space:nowrap;padding-block:4px;border-bottom:1px solid transparent}
.bar a.tab:hover{color:#fff}
.bar a.tab[aria-current="page"]{color:#fff;border-bottom-color:var(--glow)}

/* ---------- hero ---------- */
.hero{background:radial-gradient(120% 90% at 75% 40%,#1b2d52 0%,var(--navy) 60%);color:#eef2f9;position:relative;overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);align-items:center;gap:20px;padding-block:72px 64px;min-height:560px}
.hero h1{font-size:clamp(44px,6.2vw,82px);font-weight:300}
.hero h1 b{font-weight:600}
.hero .thesis{font-size:clamp(22px,2.6vw,30px);line-height:1.3;color:#c9d5ea;max-width:20em}
.hero .links{display:flex;flex-wrap:wrap;gap:22px;border-top:1px solid rgba(255,255,255,.18);padding-top:18px;max-width:520px}
.hero .links a{color:#e8edf6;text-decoration:none}
.hero .links a:hover{color:var(--glow)}
.cellwrap{position:relative;aspect-ratio:1/1;width:100%;max-width:520px;justify-self:center}
.cellwrap canvas{width:100%;height:100%;display:block}
.cellwrap .sketch{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
@media (max-width:860px){.hero .wrap{grid-template-columns:1fr;min-height:0;padding-block:48px}.cellwrap{max-width:360px}}

/* ---------- pillar panels ---------- */
.panels{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1000px){.panels{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.panels{grid-template-columns:1fr}}
.panel{color:#fff;text-decoration:none;display:flex;flex-direction:column;gap:18px;padding:28px 24px 26px;min-height:500px;position:relative}
.panel h2{font-size:clamp(28px,2.6vw,34px)}
.panel .fig{display:flex;justify-content:space-between;align-items:center;border-top:1px solid rgba(255,255,255,.45);padding-top:8px}
.panel .art{flex:1;display:flex;align-items:center;justify-content:center;min-height:220px}
.panel .art img{max-height:260px;width:auto;object-fit:contain;filter:drop-shadow(0 18px 30px rgba(0,0,0,.28));transition:transform .5s ease}
.panel:hover .art img{transform:translateY(-6px) scale(1.02)}
.panel .go{font-family:var(--display);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.p-rose{background:var(--rose)} .p-sky{background:var(--sky)} .p-sage{background:var(--sage)} .p-ochre{background:var(--ochre)}
@media (prefers-reduced-motion:reduce){.panel .art img{transition:none}}

/* ---------- numbers strip ---------- */
.numbers{background:var(--navy-2);color:#e8edf6}
.numbers .wrap{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding-block:44px}
@media (max-width:760px){.numbers .wrap{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:28px}}
.num{padding-right:20px;border-left:1px solid rgba(255,255,255,.14);padding-left:18px}
.num b{display:block;font-weight:300;font-size:clamp(36px,4.4vw,54px);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.num span{color:#9fb0c9;font-size:14px}

/* ---------- sections ---------- */
.sect{padding-block:80px}
.sect + .sect{border-top:1px solid var(--line)}
.eyebrow{display:flex;gap:14px;align-items:center;color:var(--muted)}
.eyebrow i{display:inline-block;width:10px;height:10px;border-radius:50%}
.h2{font-size:clamp(36px,5vw,60px)}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:start}
@media (max-width:860px){.split{grid-template-columns:1fr;gap:32px}}
.lede{font-family:var(--voice);font-style:italic;font-weight:300;font-size:clamp(22px,2.4vw,28px);line-height:1.35;color:#2a3140}

/* page header for inner pages */
.pagehead{color:#fff;padding-block:72px 56px}
.pagehead .wrap{display:grid;gap:22px}
.pagehead h1{font-size:clamp(44px,7vw,84px)}
.pagehead .lede{color:rgba(255,255,255,.92);max-width:26em}
.pagehead .crumb{display:flex;justify-content:space-between;border-top:1px solid rgba(255,255,255,.45);padding-top:10px;max-width:none}
.pagehead a{color:#fff}

/* cards, buttons */
.card{background:var(--sheet);border:1px solid var(--line);padding:24px;display:grid;gap:10px}
.btns{display:flex;flex-wrap:wrap;gap:12px}
.btn{font-family:var(--display);font-size:12px;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;padding:12px 16px;border:1px solid var(--ink);color:var(--ink);background:transparent}
.btn:hover{background:var(--ink);color:var(--paper)}
.btn.fill{background:var(--ink);color:var(--paper)}
.btn.fill:hover{background:var(--navy-2)}
.btn.light{border-color:rgba(255,255,255,.7);color:#fff}
.btn.light:hover{background:#fff;color:var(--navy)}

/* figures */
figure{margin:0;display:grid;gap:12px}
figure img{width:100%;height:auto;background:#fff;border:1px solid var(--line);cursor:zoom-in}
figcaption{font-size:14px;color:var(--muted);line-height:1.5}
figcaption b{font-family:var(--display);font-weight:500;font-size:11px;letter-spacing:.12em;color:var(--ink);margin-right:8px}
.figrow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
@media (max-width:860px){.figrow{grid-template-columns:1fr}}

/* data table */
.table{width:100%;border-collapse:collapse;background:var(--sheet);border:1px solid var(--line)}
.table th,.table td{padding:14px 18px;border-top:1px solid var(--line);text-align:left;vertical-align:top;font-size:15px}
.table th{font-family:var(--display);font-weight:400;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);border-top:0}
.table td.n{font-family:var(--display);font-size:13px;font-variant-numeric:tabular-nums;white-space:nowrap}
.scrollx{overflow-x:auto}
.pill{display:inline-block;font-family:var(--display);font-size:10px;letter-spacing:.12em;text-transform:uppercase;padding:3px 9px;border-radius:99px;border:1px solid currentColor;white-space:nowrap}
.ok{color:var(--sky-d)} .stop{color:var(--rose-d)} .tbd{color:var(--muted)}

/* gallery */
.works{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
@media (max-width:860px){.works{grid-template-columns:1fr}}
.works img{aspect-ratio:3/4;object-fit:cover}
.work h3{font-size:24px}
.grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
@media (max-width:860px){.grid4{grid-template-columns:repeat(2,minmax(0,1fr))}}
.grid4 img{aspect-ratio:1/1;object-fit:cover}

.quote{font-family:var(--voice);font-style:italic;font-weight:300;font-size:clamp(26px,3vw,36px);line-height:1.3;border-left:2px solid var(--sage-d);padding-left:22px}

/* next-page footer band */
.next{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.next a{color:#fff;text-decoration:none;padding:34px 24px;display:grid;gap:8px}
.next a h3{font-size:28px}

footer.site{background:var(--navy);color:#8fa0bb}
footer.site .wrap{display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between;padding-block:36px 48px;font-size:14px}
footer.site a{color:#cdd8ea}

.copy{font-family:var(--display);font-size:12px;letter-spacing:.08em;text-transform:uppercase;padding:12px 16px;border:1px solid var(--line);background:var(--sheet);color:var(--ink);cursor:pointer}

/* lightbox */
.lb{position:fixed;inset:0;z-index:40;background:rgba(8,12,20,.94);display:flex;align-items:center;justify-content:center;padding:max(20px,env(safe-area-inset-top,0px)) max(20px,env(safe-area-inset-right,0px)) max(20px,env(safe-area-inset-bottom,0px)) max(20px,env(safe-area-inset-left,0px))}
.lb[hidden]{display:none!important}
.lb img{max-height:84vh;max-width:100%;object-fit:contain;background:#fff}
.lb .cap{position:absolute;left:0;right:0;bottom:max(16px,env(safe-area-inset-bottom,0px));text-align:center;color:#cfd8e6;font-family:var(--display);font-size:11px;letter-spacing:.08em;padding-inline:20px}
.lb button{position:absolute;top:max(16px,env(safe-area-inset-top,0px));right:max(16px,env(safe-area-inset-right,0px));background:none;border:1px solid #7f8ba0;color:#fff;font-family:var(--display);font-size:11px;letter-spacing:.1em;padding:8px 12px;cursor:pointer}

/* ---------- sketches (chalk on navy) ---------- */
.sketch{width:100%;height:auto;display:block;overflow:visible}
.sketch path{fill:none;stroke:#e3eaf6;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.sketch .base path{opacity:.22}
.sketch .draw path{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 2.2s cubic-bezier(.6,.1,.3,1) forwards;animation-delay:calc(var(--i,0)*90ms)}
.sketch .hand text{font-family:var(--hand);font-weight:300;font-size:19px;fill:#e9eef8;opacity:.25;animation:ink 1.2s ease forwards;animation-delay:calc(var(--i,0)*90ms + .6s)}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes ink{to{opacity:.95}}
@media (prefers-reduced-motion:reduce){.sketch .draw path{animation:none;stroke-dashoffset:0}.sketch .hand text{animation:none;opacity:.95}}
.panel .art .sketch{max-width:280px}
.panel .art .sketch path{stroke:#fff}
.panel .art .sketch .hand text{fill:#fff;font-size:20px}

/* ---------- inner page header ---------- */
.pagehead{background:radial-gradient(110% 120% at 80% 30%,#1c2e52 0%,var(--navy) 62%);color:#eef2f9;padding-block:56px 64px;position:relative}
.pagehead::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--acc)}
.acc-rose{--acc:var(--rose)} .acc-sky{--acc:var(--sky)} .acc-sage{--acc:var(--sage)} .acc-ochre{--acc:var(--ochre)}
.pagehead .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:center}
@media (max-width:900px){.pagehead .wrap{grid-template-columns:1fr}}
.ph-text{display:grid;gap:22px}
.pagehead h1{font-size:clamp(42px,6vw,76px);font-weight:300}
.pagehead .lede{color:#c9d5ea;max-width:24em}
.pagehead .crumb{display:flex;justify-content:space-between;gap:16px;border-top:1px solid rgba(255,255,255,.22);padding-top:12px;color:#aab6ca}
.pagehead .crumb a{color:#fff;text-decoration:none}
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--acc);margin-right:8px;vertical-align:1px}
.ph-art{justify-self:center;width:100%;max-width:580px}
.sketchpair{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:10px;align-items:center}
.render{position:relative;aspect-ratio:1/1}
.render canvas{width:100%;height:100%;display:block}
.render .hand{position:absolute;bottom:2%;left:0;right:0;text-align:center;color:#c9d5ea;font-size:19px}
figure.pencil{margin:0;justify-self:center;display:grid;gap:10px;justify-items:center}
figure.pencil img{width:240px;max-width:100%;height:auto;border:0;background:#fbfaf7;padding:10px;transform:rotate(-1.5deg);box-shadow:0 18px 40px rgba(0,0,0,.35);cursor:default}
figure.pencil.small img{width:220px}
figure.pencil figcaption{font-size:22px;color:#c9d5ea}

/* sketch tokens on light sections */
.eyebrow{font-family:var(--display)}
.table td.n{font-family:var(--display);font-weight:500}
.mono-email{font-family:var(--display);font-weight:500}
.num b{font-family:var(--display);font-weight:300}

/* ---------- gallery catalogue ---------- */
.gallery{background:#ecebe7}
.cat{display:grid;grid-template-columns:minmax(0,380px) minmax(0,1fr);gap:56px;align-items:center;padding-block:8px}
.cat + .cat{border-top:1px solid #d6d3cb;padding-top:56px}
@media (max-width:820px){.cat{grid-template-columns:1fr;gap:24px}}
.mount{background:#f7f6f2;padding:28px;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 0 #fff inset,0 22px 40px -24px rgba(20,24,32,.45)}
.mount img{width:100%;height:auto;max-height:440px;object-fit:contain;border:0;background:transparent;cursor:zoom-in;box-shadow:0 10px 24px -10px rgba(10,14,22,.55),0 2px 4px rgba(10,14,22,.18)}
.cat-text{display:grid;gap:12px;max-width:560px}
.cat-text .artist{color:var(--muted)}
.cat-text h3{font-size:clamp(26px,2.6vw,34px);font-weight:300}
.cat-text h3 em{font-style:italic;font-family:var(--voice);font-weight:400}
.cat-text .medium{font-size:14px;color:var(--muted);border-bottom:1px solid #d6d3cb;padding-bottom:12px}
.cat-text p{color:#2a3140}
.award{display:grid;gap:4px;font-size:15px;color:var(--ochre-d)!important}
.award .label{color:var(--muted)}
img.sketchphoto{background:#fbfaf7;border:0;box-shadow:0 18px 40px -20px rgba(10,14,22,.5)}

/* ---------- featured catalogue profiles ---------- */
.feat{display:grid;grid-template-columns:minmax(0,360px) minmax(0,1fr);gap:56px;align-items:start}
.feat + .feat{border-top:1px solid #d6d3cb;padding-top:64px}
@media (max-width:860px){.feat{grid-template-columns:1fr;gap:28px}}
.feat-img{position:sticky;top:96px;display:grid;gap:12px}
@media (max-width:860px){.feat-img{position:static;max-width:360px}}
.plate{color:var(--muted);text-align:center}
.feat-text{display:grid;gap:16px;max-width:640px}
.feat-text h3{font-size:clamp(30px,3vw,40px);font-weight:300}
.feat-text h3 em{font-family:var(--voice);font-style:italic;font-weight:400}
.ru{font-family:var(--voice);font-style:italic;color:var(--muted);margin-top:-8px}
.artist{color:var(--muted)}
dl.facts{display:grid;grid-template-columns:minmax(0,8.5em) minmax(0,1fr);gap:8px 18px;margin:0;padding-block:14px;border-block:1px solid #d6d3cb;font-size:15px}
dl.facts dt{font-family:var(--display);font-weight:500;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding-top:3px}
dl.facts dd{margin:0;color:#2a3140}
@media (max-width:520px){dl.facts{grid-template-columns:1fr;gap:2px}dl.facts dd{margin-bottom:8px}}
.award-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:16px;align-items:center;background:#f7f6f2;border:1px solid #e1ddd3;padding:14px 16px}
@media (max-width:560px){.award-row{grid-template-columns:auto minmax(0,1fr)}.award-links{grid-column:1/-1}}
.badge{font-family:var(--display);font-weight:600;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#fff;background:var(--ochre-d);padding:8px 10px;white-space:nowrap}
.award-row b{display:block;font-weight:600;font-size:15px}
.award-row div span{display:block;font-size:14px;color:var(--muted)}
.award-links{display:flex;gap:14px}
.award-links a{font-family:var(--display);font-weight:500;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--ochre)}
.impression{font-family:var(--voice);font-style:italic;font-size:21px;line-height:1.45;color:#2a3140}
.mood{display:grid;gap:4px;font-size:15px;color:#2a3140}
.mood .label{color:var(--muted)}
details.prof{border-top:1px solid #d6d3cb}
details.prof:last-of-type{border-bottom:1px solid #d6d3cb}
details.prof summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;padding:14px 0;font-family:var(--display);font-weight:500;font-size:13px;letter-spacing:.14em;text-transform:uppercase}
details.prof summary::-webkit-details-marker{display:none}
details.prof summary::after{content:"+";font-size:20px;font-weight:300;color:var(--ochre-d)}
details.prof[open] summary::after{content:"–"}
.prof-body{display:grid;gap:10px;padding-bottom:16px;color:#2a3140}
.small-note{font-size:15px;color:var(--muted)}

/* ---------- nav: desktop row, mobile dots menu ---------- */
.bar .wrap{overflow:visible;position:relative}
.tabs{display:flex;gap:22px;align-items:center}
.menu-btn{display:none;background:none;border:1px solid rgba(255,255,255,.25);border-radius:999px;width:42px;height:42px;padding:0;cursor:pointer;align-items:center;justify-content:center;gap:4px;flex-direction:column}
.menu-btn span{display:block;width:4px;height:4px;border-radius:50%;background:#fff;transition:transform .25s ease,opacity .25s ease}
@media (max-width:900px){
  .menu-btn{display:flex}
  .tabs{position:absolute;top:calc(100% + 8px);right:0;flex-direction:column;align-items:stretch;gap:0;min-width:230px;background:#101b31;border:1px solid rgba(255,255,255,.12);box-shadow:0 24px 48px -16px rgba(0,0,0,.6);padding:8px 0;
    opacity:0;transform:translateY(-6px);pointer-events:none;visibility:hidden;transition:opacity .2s ease,transform .2s ease,visibility 0s linear .2s}
  .tabs.open{opacity:1;transform:none;pointer-events:auto;visibility:visible;transition:opacity .2s ease,transform .2s ease}
  .bar .tabs a.tab{padding:14px 22px;border-bottom:1px solid rgba(255,255,255,.06);font-size:13px}
  .bar .tabs a.tab:last-child{border-bottom:0}
  .bar .tabs a.tab[aria-current="page"]{border-bottom-color:rgba(255,255,255,.06);color:#fff;box-shadow:inset 3px 0 0 var(--glow)}
  .menu-btn[aria-expanded="true"]{background:rgba(255,255,255,.08)}
}
@media (prefers-reduced-motion:reduce){.tabs,.tabs.open{transition:none}}

/* ---------- option B: full-screen index menu (mobile) ---------- */
.tabs small,.tabs .d,.tabs .m-note,.tabs .m-mail{display:none}
@media (max-width:900px){
  .bar{backdrop-filter:none;background:var(--navy)}
  .brand,.menu-btn{position:relative;z-index:2}
  .menu-btn{gap:4.5px}
  .menu-btn span{width:18px;height:1.6px;border-radius:2px}
  .menu-btn[aria-expanded="true"] span:nth-child(1){transform:translateY(6.1px) rotate(45deg)}
  .menu-btn[aria-expanded="true"] span:nth-child(2){opacity:0}
  .menu-btn[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.1px) rotate(-45deg)}
  .tabs{position:fixed;inset:0;top:0;right:0;min-width:0;z-index:1;background:var(--navy);border:0;box-shadow:none;
    padding:calc(env(safe-area-inset-top,0px) + 96px) max(24px,env(safe-area-inset-right,0px)) calc(env(safe-area-inset-bottom,0px) + 28px) max(24px,env(safe-area-inset-left,0px));
    display:flex;flex-direction:column;align-items:stretch;overflow-y:auto;transform:none}
  .tabs.open{transform:none}
  .bar .tabs a.tab{display:flex;align-items:baseline;gap:14px;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.08);
    font-family:var(--display);font-weight:300;font-size:clamp(28px,8vw,36px);letter-spacing:-.01em;text-transform:none;color:#eef2f9;box-shadow:none}
  .bar .tabs a.tab small{display:block;width:44px;flex:none;font-size:10px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:#7f8ea8}
  .bar .tabs a.tab .d{display:block;width:10px;height:10px;border-radius:50%;flex:none;transform:translateY(-5px)}
  .bar .tabs a.tab[aria-current="page"]{color:var(--glow);box-shadow:none;border-bottom-color:rgba(255,255,255,.08)}
  .tabs .m-note{display:block;margin-top:22px;font-size:20px;color:#c9d5ea}
  .tabs .m-mail{display:block;margin-top:6px;font-size:13px;color:#8fa3c4}
  .tabs.open a.tab{animation:menuIn .35s ease both}
  .tabs.open a.tab:nth-child(2){animation-delay:.04s}.tabs.open a.tab:nth-child(3){animation-delay:.08s}.tabs.open a.tab:nth-child(4){animation-delay:.12s}.tabs.open a.tab:nth-child(5){animation-delay:.16s}.tabs.open a.tab:nth-child(6){animation-delay:.2s}
}
@keyframes menuIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.tabs.open a.tab{animation:none}}