/* Shreya Varma — site styles. Matches the original shreyavarma.com look. Plain CSS, no framework. */
@font-face{font-family:"Montserrat";font-style:normal;font-weight:400 600;font-display:swap;src:url("/assets/montserrat.woff2") format("woff2")}

:root{
  --g900:#111827; --g800:#262626; --g700:#374151; --g600:#4b5563; --g500:#6b7280; --g400:#9ca3af;
  --g200:#e5e7eb; --g100:#f3f4f6; --g50:#f9fafb; --white:#fff;
  --font:"Montserrat",system-ui,-apple-system,"Segoe UI",sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--white);color:var(--g900);font:400 1rem/1.5 var(--font);display:flex;flex-direction:column;min-height:100vh}
img,svg,iframe{max-width:100%;display:block}
a{color:var(--g900);text-decoration-thickness:1px;text-underline-offset:.2em}
a:hover{color:var(--g600)}
:focus-visible{outline:2px solid var(--g900);outline-offset:3px;border-radius:2px}
p{margin:0 0 1.5rem;line-height:1.625}
ul{padding-left:1.1rem}
.skip{position:absolute;left:-999px}
.skip:focus{left:1rem;top:1rem;background:#fff;padding:.5rem .75rem;z-index:50}

/* ---------- navigation (as original) ---------- */
.site-header{background:var(--white);border-bottom:1px solid var(--g200);position:relative;z-index:30}
.bar{max-width:80rem;margin:0 auto;padding:0 2rem;display:flex;justify-content:space-between;min-height:4rem}
.brand{display:flex;align-items:center;gap:.75rem;text-decoration:none;color:var(--g900);font-size:1.125rem;font-weight:600;letter-spacing:.025em}
.brand:hover{color:var(--g900);opacity:.8}
.brand img{width:3.5rem;height:3.5rem}
.nav ul{list-style:none;margin:0;padding:0;display:flex;gap:2rem;height:100%}
.nav li{display:flex}
.nav a{display:inline-flex;align-items:center;padding:.25rem .25rem 0;font-size:.875rem;font-weight:600;letter-spacing:.025em;color:var(--g600);text-decoration:none;border-bottom:2px solid transparent;transition:color .15s}
.nav a:hover{color:var(--g900)}
.nav a[aria-current="page"]{color:var(--g900);border-bottom-color:var(--g900)}
.menu-btn{display:none;align-self:center;background:none;border:0;padding:.5rem;border-radius:.375rem;cursor:pointer;color:var(--g400)}
.menu-btn:hover{color:var(--g500);background:var(--g100)}
.menu-btn svg{width:1.5rem;height:1.5rem}
@media (max-width:1023px){.nav ul{gap:1.25rem}.nav a{font-size:.8rem}}
@media (max-width:860px){
  .bar{padding:0 1rem}
  .js .menu-btn{display:block}
  .js .nav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--white);border-bottom:1px solid var(--g200);box-shadow:0 10px 20px rgba(0,0,0,.05);padding:.5rem 0 1rem}
  .js .nav.open{display:block}
  .nav ul{flex-direction:column;gap:0}
  .nav a{display:block;font-size:1rem;padding:.6rem 1rem;border-bottom:0;border-left:3px solid transparent}
  .nav a[aria-current="page"]{border-left-color:var(--g900);background:var(--g50)}
}

/* ---------- page layout (as original: container, max-w-4xl) ---------- */
main{flex:1;padding:2rem 1rem 4rem}
.wrap{max-width:56rem;margin:0 auto}
.wrap-wide{max-width:72rem}
.prose{max-width:none}
.prose p{color:var(--g900)}

/* Home: name heading exactly like the original */
.home-title{font-size:1.875rem;line-height:2.25rem;font-weight:500;letter-spacing:-.025em;color:var(--g800);margin:0 0 1.5rem}
@media (max-width:767px){.home-title{font-size:1.5rem;line-height:2rem}}
.subtitle{color:var(--g600);font-weight:500;margin:-1rem 0 1.75rem;letter-spacing:.01em}

/* Inner pages: large title with a rule running to the right (as original) */
.page-title{display:flex;align-items:center;gap:1.5rem;margin:.5rem 0 2rem}
.page-title h1{font-size:2.25rem;line-height:2.5rem;font-weight:600;color:var(--g900);margin:0;flex:0 1 auto}
.page-title::after{content:"";flex:1;height:1px;background:var(--g400);min-width:2rem}
@media (max-width:640px){.page-title h1{font-size:1.875rem;line-height:2.25rem}}

h2{font-size:1.25rem;line-height:1.75rem;font-weight:600;color:var(--g900);margin:2.5rem 0 1rem}
h3{font-size:1.05rem;font-weight:600;color:var(--g900);margin:1.75rem 0 .75rem}
.lede{color:var(--g600);font-size:1.05rem;margin:-.75rem 0 2rem}
.crumbs{font-size:.8rem;color:var(--g500);margin-bottom:1rem;letter-spacing:.01em}
.crumbs a{color:var(--g500)}
.crumbs span{margin:0 .4rem}
.rule{border:0;border-top:1px solid var(--g200);margin:2.5rem 0}
.quiet{font-size:.9rem;color:var(--g500)}
.more{font-size:.9rem}
.creds{list-style:none;padding:0;margin:0;font-size:.92rem;color:var(--g600)}
.creds li{padding:.2rem 0}

/* Simple row list (home services) */
.list-links{list-style:none;padding:0;margin:0;border-top:1px solid var(--g200)}
.list-links li{border-bottom:1px solid var(--g200)}
.list-links a{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1rem .25rem;text-decoration:none;color:var(--g900);font-weight:500}
.list-links a:hover{background:var(--g50);color:var(--g900)}
.list-links small{display:block;color:var(--g600);font-size:.86rem;font-weight:400;margin-top:.2rem}
.list-links span:last-child{color:var(--g500);transition:transform .15s}
.list-links a:hover span:last-child{transform:translateX(3px)}

/* Services: one clickable card per service */
.svc-cards{display:grid;gap:1.25rem;grid-template-columns:1fr}
@media (min-width:640px){.svc-cards{grid-template-columns:1fr 1fr}}
.svc-card{display:flex;flex-direction:column;border:1px solid var(--g200);border-radius:.5rem;padding:1.5rem;text-decoration:none;color:var(--g900);background:var(--white);transition:box-shadow .15s,border-color .15s}
.svc-card:hover{color:var(--g900);border-color:var(--g400);box-shadow:0 4px 14px rgba(17,24,39,.06)}
.svc-card h2{font-size:1.1rem;margin:0 0 .5rem}
.svc-card p{color:var(--g600);font-size:.95rem;flex:1;margin-bottom:1.25rem}
.svc-card .know{font-size:.875rem;font-weight:600;letter-spacing:.025em}

/* Articles & resources cards with thumbnails */
.cards{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fill,minmax(18rem,1fr))}
.card{border:1px solid var(--g200);border-radius:.5rem;overflow:hidden;display:flex;flex-direction:column;background:var(--white);transition:box-shadow .15s}
.card:hover{box-shadow:0 4px 14px rgba(17,24,39,.06)}
.thumb{position:relative;aspect-ratio:16/9;background:var(--g50);border-bottom:1px solid var(--g200);display:flex;align-items:center;justify-content:center;overflow:hidden}
.thumb img{width:100%;height:100%}
.fit-cover img{object-fit:cover}
.fit-contain img{object-fit:contain;padding:1.5rem 2rem;background:var(--white)}
.thumb-fallback{display:none;padding:1rem 1.5rem;text-align:center;font-size:.95rem;font-weight:600;color:var(--g500);letter-spacing:.025em}
.thumb-failed .thumb-fallback{display:block}
.card-body{padding:1.25rem 1.5rem 1.4rem;display:flex;flex-direction:column;flex:1}
.card h2{font-size:1.05rem;line-height:1.45;margin:0 0 .35rem}
.card .src{font-size:.82rem;color:var(--g500);margin-bottom:.75rem}
.card p{font-size:.93rem;color:var(--g600);flex:1;margin-bottom:1rem}
.card a.go{font-size:.875rem;font-weight:600;letter-spacing:.025em;text-decoration:none}
.card a.go:hover{text-decoration:underline}

/* Contact */
.contact-grid{display:grid;gap:2.5rem;grid-template-columns:1fr}
@media (min-width:900px){.contact-grid{grid-template-columns:1.25fr 1fr}}
.dl{display:grid;grid-template-columns:7rem 1fr;gap:.6rem 1rem;margin:0}
.dl dt{color:var(--g500);font-size:.9rem}
.dl dd{margin:0;color:var(--g900)}
.map{width:100%;aspect-ratio:16/9;border:1px solid var(--g200);border-radius:.5rem}
.form-frame{width:100%;min-height:1100px;border:1px solid var(--g200);border-radius:.5rem;background:var(--g50)}
.note{background:var(--g50);border-left:3px solid var(--g200);padding:.9rem 1rem;font-size:.9rem;color:var(--g600);margin:1.8rem 0}
.photo-slot{display:none}

/* ---------- footer (as original: gray-50, logo, Quick Links / Location / Legal) ---------- */
.site-footer{background:var(--g50);border-top:1px solid var(--g100)}
.foot{max-width:80rem;margin:0 auto;padding:3rem 2rem;display:grid;gap:2rem;grid-template-columns:1fr}
@media (min-width:768px){.foot{grid-template-columns:1.3fr 1fr 1fr 1fr}}
.foot img{width:5rem;height:5rem;margin-bottom:1rem}
.foot .tag{font-size:.875rem;font-weight:600;color:var(--g600);margin:0 0 .75rem;line-height:1.45}
.foot .reg{font-size:.8rem;color:var(--g500);margin:0;line-height:1.5}
.foot h3{font-size:.875rem;font-weight:600;color:var(--g900);letter-spacing:.025em;margin:0 0 1rem}
.foot ul + h3{margin-top:1.75rem}
.foot ul{list-style:none;padding:0;margin:0}
.foot li{margin-bottom:.75rem}
.foot a,.foot address{font-size:.875rem;color:var(--g600);text-decoration:none;font-style:normal;letter-spacing:.01em}
.foot a:hover{color:var(--g900)}
.foot address{display:block;margin-bottom:.75rem;line-height:1.5}
.legal{max-width:80rem;margin:0 auto;padding:1.25rem 2rem 2rem;border-top:1px solid var(--g200);font-size:.8rem;color:var(--g500)}
@media (max-width:640px){.foot,.legal{padding-left:1rem;padding-right:1rem}}

/* consent banner (only on the live domain) */
.consent{position:fixed;left:1rem;right:1rem;bottom:1rem;max-width:34rem;margin:0 auto;background:#1f2937;color:#f9fafb;border-radius:8px;padding:1rem 1.1rem;font-size:.88rem;display:flex;gap:1rem;align-items:center;flex-wrap:wrap;box-shadow:0 8px 30px rgba(0,0,0,.18);z-index:40}
.consent p{margin:0;flex:1 1 16rem}
.consent button{font:inherit;border-radius:6px;padding:.45rem .9rem;cursor:pointer;border:1px solid #9ca3af;background:transparent;color:#f9fafb}
.consent button.yes{background:#f9fafb;color:#111827;border-color:#f9fafb}

@media print{.site-header,.site-footer,.consent{display:none}}

/* ---------- v4 additions ---------- */
/* Slightly larger type throughout */
html{font-size:112.5%}
@media (min-width:1024px){html{font-size:118.75%}}

/* End-of-page links block */
.after{margin:3rem 0 0}

/* Credentials with logos / icons */
.creds-grid{list-style:none;padding:0;margin:0 0 .5rem;display:grid;gap:.75rem}
.cred{display:flex;align-items:center;gap:1rem;border:1px solid var(--g200);border-radius:.5rem;padding:.85rem 1rem}
.cred-mark{flex:0 0 8rem;height:5rem;border-radius:.4rem;background:var(--g50);display:flex;align-items:center;justify-content:center;color:var(--g700);overflow:hidden}
.cred-mark svg{width:1.6rem;height:1.6rem}
.cred-mark img{width:100%;height:100%;object-fit:contain;background:transparent;padding:.2rem}
.cred-mark.has-logo{background:transparent;border:0}
.cred-mark.has-logo svg{display:none}
.cred-mark.has-logo.no-logo svg{display:block}
.cred-text strong{display:block;font-weight:600;color:var(--g900);line-height:1.35}
.cred-text small{display:block;color:var(--g600);font-size:.88rem;line-height:1.45;margin-top:.15rem}

/* Directions */
.way-btns{display:flex;flex-wrap:wrap;gap:.6rem;margin:0 0 .5rem}
.btn{display:inline-flex;align-items:center;padding:.6rem 1rem;border:1px solid var(--g900);border-radius:.4rem;font-size:.875rem;font-weight:600;letter-spacing:.02em;text-decoration:none;color:var(--g900);background:#fff}
.btn:hover{background:var(--g900);color:#fff}
.ways{list-style:none;padding:0;margin:0 0 1rem}
.ways li{display:flex;gap:.8rem;align-items:flex-start;padding:.7rem 0;border-bottom:1px solid var(--g100);line-height:1.6}
.line-dot{flex:0 0 .8rem;height:.8rem;border-radius:50%;margin-top:.45rem}
.line-dot.pink{background:#e5418c}.line-dot.yellow{background:#f2c400}.line-dot.violet{background:#7b3fa0}

/* Designed cover when a publication has no image */
.thumb-failed{background:linear-gradient(135deg,#f3f4f6 0%,#fafafa 100%)}
.thumb-failed .thumb-fallback{font-size:1.15rem;color:var(--g700);letter-spacing:.04em}
.thumb-failed .thumb-fallback::before{content:"";display:block;width:2.5rem;height:1px;background:var(--g400);margin:0 auto .8rem}
.thumb-failed .thumb-fallback::after{content:"";display:block;width:2.5rem;height:1px;background:var(--g400);margin:.8rem auto 0}

/* ---------- v5 ---------- */
/* See also: grey tiles, clearly different from content cards */
.see-also{margin-top:3rem;padding-top:1.5rem;border-top:1px solid var(--g200)}
.see-label{font-size:.75rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--g500);margin:0 0 .9rem}
.see-grid{display:grid;gap:.75rem;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
.see-tile{position:relative;display:block;background:var(--g100);border-radius:.5rem;padding:1rem 2.75rem 1rem 1.1rem;text-decoration:none;color:var(--g900);transition:background .15s}
.see-tile:hover{background:var(--g200);color:var(--g900)}
.see-t{display:block;font-weight:600;font-size:.98rem}
.see-d{display:block;font-size:.84rem;color:var(--g600);margin-top:.2rem;line-height:1.45}
.see-arrow{position:absolute;right:1.1rem;top:50%;transform:translateY(-50%);color:var(--g500);transition:transform .15s}
.see-tile:hover .see-arrow{transform:translate(3px,-50%)}
.after .see-also{margin-top:0}

/* Floating contact tab (right edge on desktop, round button on phones) */
.ctab{position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:35}
.ctab summary{list-style:none;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:.5rem;background:var(--g900);color:#fff;padding:.9rem .55rem;border-radius:.5rem 0 0 .5rem;box-shadow:0 6px 20px rgba(17,24,39,.18);font-size:.78rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.ctab summary::-webkit-details-marker{display:none}
.ctab summary span{writing-mode:vertical-rl;transform:rotate(180deg)}
.ctab summary svg{width:1.25rem;height:1.25rem}
.ctab summary:hover{background:var(--g700)}
.ctab-panel{position:absolute;right:calc(100% + .5rem);top:50%;transform:translateY(-50%);width:17rem;background:#fff;border:1px solid var(--g200);border-radius:.6rem;box-shadow:0 12px 32px rgba(17,24,39,.14);padding:.9rem}
.ctab-title{font-weight:600;margin:0 0 .5rem;font-size:.95rem}
.ctab-panel a{display:flex;flex-direction:column;padding:.55rem .6rem;border-radius:.4rem;text-decoration:none;color:var(--g900);font-size:.88rem;word-break:break-word}
.ctab-panel a:hover{background:var(--g50)}
.ctab-panel .k{font-size:.7rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--g500)}
@media (max-width:860px){
  .ctab{top:auto;bottom:1rem;right:1rem;transform:none}
  .ctab summary{border-radius:999px;padding:.85rem;flex-direction:row}
  .ctab summary span{display:none}
  .ctab-panel{right:0;top:auto;bottom:calc(100% + .6rem);transform:none;width:min(17rem,calc(100vw - 2rem))}
}
@media print{.ctab{display:none}}

/* Professional enquiries cards */
.pcards{display:grid;gap:1.25rem;grid-template-columns:1fr}
@media (min-width:760px){.pcards{grid-template-columns:1fr 1fr}}
.pcard{border:1px solid var(--g200);border-radius:.6rem;padding:1.5rem;display:flex;flex-direction:column}
.pcard h2{margin:.9rem 0 .5rem;font-size:1.1rem}
.pcard p{color:var(--g600);font-size:.95rem;flex:1;margin-bottom:1.25rem}
.pcard .btn{align-self:flex-start}
.pcard-icon{width:2.75rem;height:2.75rem;border-radius:.5rem;background:var(--g100);display:flex;align-items:center;justify-content:center;color:var(--g900)}
.pcard-icon svg{width:1.4rem;height:1.4rem}
.pcard:last-child:nth-child(odd){grid-column:1/-1}

/* Body copy a touch larger on desktop */
@media (min-width:1024px){.prose p,.prose li{font-size:1.02rem}}
h2{font-size:1.3rem}

/* ---------- v6 ---------- */
/* Buttons: same black / grey language as the Contact tab */
.btn{display:inline-flex;align-items:center;gap:.4rem;padding:.65rem 1.1rem;border:0;border-radius:.45rem;font-size:.875rem;font-weight:600;letter-spacing:.03em;text-decoration:none;background:var(--g900);color:#fff;transition:background .15s}
.btn:hover{background:var(--g700);color:#fff}
.btn-quiet{background:var(--g100);color:var(--g900)}
.btn-quiet:hover{background:var(--g200);color:var(--g900)}
.btn-row{display:flex;flex-wrap:wrap;gap:.6rem;margin:.25rem 0 1rem}

/* Professional enquiries: icon on the left, text on the right (same language as About Me) */
.prows{display:grid;gap:1rem}
.prow{display:flex;gap:1.5rem;align-items:flex-start;border:1px solid var(--g200);border-radius:.6rem;padding:1.5rem}
.prow-icon{flex:0 0 5rem;height:5rem;display:flex;align-items:center;justify-content:center;color:var(--g900)}
.prow-icon svg{width:3.25rem;height:3.25rem}
.prow-body{flex:1}
.prow-body h2{margin:.1rem 0 .5rem;font-size:1.15rem}
.prow-body p{color:var(--g600);margin-bottom:1rem}
@media (max-width:560px){.prow{flex-direction:column;gap:.75rem}.prow-icon{flex-basis:auto;height:auto;justify-content:flex-start}}

/* ---------- v7 ---------- */
/* One hover language for every clickable box: dark border + soft grey fill */
.svc-card:hover,.card-link:hover{border-color:var(--g900);background:var(--g50);box-shadow:none;transform:none}
.card-link{text-decoration:none;color:var(--g900);transition:border-color .15s,background .15s}
.card-link:hover{color:var(--g900)}
.card-link:hover .thumb{border-bottom-color:var(--g900)}
.card .go{font-size:.875rem;font-weight:600;letter-spacing:.025em;color:var(--g900)}
.card-link:hover .go{text-decoration:underline}

/* Previous / Next */
.see-also{margin-top:3.5rem}
.see-grid{grid-template-columns:1fr 1fr}
@media (max-width:600px){.see-grid{grid-template-columns:1fr}}
.see-k{display:block;font-size:.7rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--g500);margin-bottom:.25rem}
.see-next{text-align:right;padding:1rem 2.75rem 1rem 1.1rem}
.see-next .see-arrow{right:1.1rem}
.see-previous{padding:1rem 1.1rem 1rem 2.75rem}
.see-previous .see-arrow{left:1.1rem;right:auto}
.see-previous:hover .see-arrow{transform:translate(-3px,-50%)}
.see-tile{border:1px solid transparent}
.see-tile:hover{border-color:var(--g900);background:var(--g50)}
@media (max-width:600px){.see-next{text-align:left}}

/* ---------- v8 ---------- */
/* Buttons: soft grey everywhere; hover = dark border (same language as the cards) */
.btn{background:var(--g100);color:var(--g900);border:1px solid var(--g200)}
.btn:hover{background:var(--g50);color:var(--g900);border-color:var(--g900)}

/* Contact tab in the same grey */
.ctab summary{background:var(--g100);color:var(--g900);border:1px solid var(--g200);border-right:0;box-shadow:0 6px 20px rgba(17,24,39,.10)}
.ctab summary:hover,.ctab[open] summary{background:var(--g50);border-color:var(--g900)}
@media (max-width:860px){.ctab summary{border-right:1px solid var(--g200)}}

/* Corner arrow on clickable cards (replaces "Know more") */
.svc-card,.prow{position:relative}
.svc-card p{margin-bottom:0}
.card-arrow{position:absolute;top:1.35rem;right:1.4rem;color:var(--g500);transition:transform .15s,color .15s}
.svc-card:hover .card-arrow,.prow:hover .card-arrow{transform:translateX(3px);color:var(--g900)}
.svc-card h2{padding-right:1.5rem}

/* Professional Enquiries: whole row is the link, larger icon spanning the text */
.prow{text-decoration:none;color:var(--g900);align-items:center;padding:1.75rem 3.25rem 1.75rem 1.75rem;transition:border-color .15s,background .15s}
.prow:hover{border-color:var(--g900);background:var(--g50);color:var(--g900)}
.prow-icon{flex:0 0 6.5rem;height:auto;align-self:stretch;min-height:5.5rem}
.prow-icon svg{width:5rem;height:5rem}
.prow-body p{margin-bottom:0}
@media (max-width:560px){.prow{padding:1.5rem}.prow-icon svg{width:3.75rem;height:3.75rem}}

/* Contact tab: grey with a dark outline so it stands out on white and on the grey footer */
.ctab summary{background:var(--g100);border:1px solid var(--g900);border-right:0}
.ctab summary:hover,.ctab[open] summary{background:var(--g200);border-color:var(--g900)}
@media (max-width:860px){.ctab summary{border-right:1px solid var(--g900)}}

/* ---------- v10: the thread, from the logo artwork ---------- */
/* Logo = tangle + stub of its line (assets/logo-thread.svg). The line leaves the tangle at 54% of its height.
   The logo sits ON the header's bottom edge; a 1px line carries on to the loop (assets/thread-loop.svg). */
:root{--hh:4rem;--lh:4.6rem;--lw:4.65rem;--loop-w:24px;--loop-h:8.6px;--loop-line:5.9px}
@media (max-width:860px){:root{--lh:3.9rem;--lw:3.95rem}}
.site-header{height:var(--hh);min-height:0;border-bottom:0}
.bar{height:100%;min-height:0;position:relative}
.brand{position:relative;height:100%;padding-left:calc(var(--lw) + .8rem)}
.brand:hover{opacity:1}
.brand-mark{position:absolute;left:0;top:calc(var(--hh) - .541*var(--lh));width:var(--lw);height:auto;max-width:none}
.nav a[aria-current="page"]{border-bottom-color:transparent}
.site-header .thread-line{position:absolute;height:1px;background:var(--g900);top:calc(var(--hh) - .5px);
  left:calc(max(0px,(100% - 80rem)/2) + 2rem + var(--lw) - 2px);right:calc(1.25rem + var(--loop-w) * .55);transition:right .35s ease}
.site-header.loop-moved .thread-line{right:1.25rem}
.site-header .thread-loop{position:absolute;right:1.25rem;top:calc(var(--hh) - var(--loop-line));width:var(--loop-w);height:var(--loop-h);
  transition:transform .45s cubic-bezier(.4,.1,.2,1);pointer-events:none;z-index:2}
@media (max-width:860px){.site-header .thread-line{left:calc(1rem + var(--lw) - 2px)}}
main{padding-top:3.25rem}
@media (max-width:860px){main{padding-top:2.75rem}}

/* Mobile menu: the open list sits above the hanging logo; the current page is marked with the loop */
@media (max-width:860px){
  .js .nav{z-index:40}
  .nav a[aria-current="page"]{border-left-color:transparent;background:none;position:relative}
  .nav a[aria-current="page"]::after{content:"";display:inline-block;width:var(--loop-w);height:var(--loop-h);margin-left:.6rem;vertical-align:middle;
    background:url(/assets/thread-loop.svg) no-repeat center/contain}
}

/* Footer: the same tangle sits on the footer's top edge and its line runs across */
.site-footer{position:relative;border-top:0}
.site-footer .foot-mark{position:absolute;top:calc(-.541*var(--lh));left:calc(max(0px,(100% - 80rem)/2) + 2rem);width:var(--lw);height:auto;max-width:none}
.site-footer .thread-line{position:absolute;height:1px;background:var(--g900);top:-.5px;
  left:calc(max(0px,(100% - 80rem)/2) + 2rem + var(--lw) - 2px);right:calc(7rem + var(--loop-w) * .55)}
.site-footer .thread-loop{position:absolute;right:7rem;top:calc(-1 * var(--loop-line));width:var(--loop-w);height:var(--loop-h)}
@media (max-width:860px){
  .site-footer .foot-mark,.site-footer .thread-line{left:1rem}
  .site-footer .thread-line{left:calc(1rem + var(--lw) - 2px);right:calc(1.25rem + var(--loop-w) * .55)}
  .site-footer .thread-loop{right:1.25rem}
}
.foot{padding-top:4rem}
@media print{.thread-line,.thread-loop,.foot-mark{display:none}}
/* v10 fix: beat the older ".brand img" size rule; slightly larger loop */
.brand .brand-mark{width:var(--lw);height:auto}
:root{--loop-w:31px;--loop-h:11.1px;--loop-line:7.6px}
/* loop artwork trimmed to the curl only */
:root{--loop-w:21px;--loop-h:11.1px;--loop-line:7.6px}
.site-header .thread-line{right:calc(1.25rem + var(--loop-w) - 1px)}
.site-header.loop-moved .thread-line{right:1.25rem}
.site-footer .thread-line{right:calc(7rem + var(--loop-w) - 1px)}
@media (max-width:860px){.site-footer .thread-line{right:calc(1.25rem + var(--loop-w) - 1px)}}
/* phones: keep the hanging logo + thread above the open menu; menu items start below the logo */
@media (max-width:860px){
  .brand-mark,.site-header .thread-line,.site-header .thread-loop{z-index:45}
  .js .nav{padding-top:calc(.46 * var(--lh) + .6rem)}
}
/* v11: line colour = logo ink; logo drawn over the line where they overlap (positions set by thread.js) */
.thread-line{background:#010101}
.brand-mark,.site-footer .foot-mark{z-index:3}
.site-header .thread-line,.site-footer .thread-line{z-index:2}
@media (max-width:860px){.brand-mark{z-index:46}.site-header .thread-line{z-index:45}}
/* ---------- v12: the thread is ONE path (tangle -> line -> knot) drawn in a single inline SVG ----------
   Built from Shreya's two logo files; thread.js only sets the line's length (where the knot sits). */
.brand-mark,.foot-mark,.thread-line,.thread-loop{display:none}
.thread{--tx:calc(max(0px,(100% - 80rem)/2) + 2rem);--knot-r:1.25rem;position:absolute;left:var(--tx);width:calc(100% - var(--tx));
  height:var(--lh);top:calc(var(--hh) - .5419 * var(--lh));display:block;overflow:hidden;pointer-events:none;z-index:3;max-width:none}
.site-footer .thread{top:calc(-.5419 * var(--lh));--knot-r:7rem}
@media (max-width:860px){.thread{--tx:1rem}.site-footer .thread{--knot-r:1.25rem}.site-header .thread{z-index:46}}
@media print{.thread{display:none}}