/* ==========================================================
   Julia Costa — links page (Instagram / TikTok bio)
   Shares the studio palette: olive, walnut, cream, brass.
   ========================================================== */
:root{
  --olive:#292D26;
  --walnut:#1C201A;
  --cream:#EFEBE1;
  --paper:#E8E4DA;
  --ink:#22261F;
  --brass:#BA9861;
  --brass-ink:#735D38;
  --cream-2:rgba(239,235,225,.72);
  --cream-3:rgba(239,235,225,.5);
  --line:rgba(239,235,225,.15);
  --ink-2:rgba(34,38,31,.68);
  --mk-arch:var(--brass);
  --serif:"Cormorant Garamond","Cormorant",Garamond,"Hoefler Text","Times New Roman",serif;
  --sans:"Hanken Grotesk","Helvetica Neue",Helvetica,Arial,sans-serif;
  --ease:cubic-bezier(.2,.7,.1,1);
  --ease-io:cubic-bezier(.76,0,.24,1);
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
  color-scheme:dark;
  background:var(--olive);
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--olive);color:var(--cream);font-family:var(--sans);font-size:15px;line-height:1.55;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%}
img{display:block;max-width:100%}
a{color:inherit}
p,h1,h2,figure,ul{margin:0}
ul{padding:0;list-style:none}
::selection{background:var(--brass);color:var(--walnut)}
:focus-visible{outline:1px solid var(--brass);outline-offset:4px}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- logo (same lockup as the studio site) ---------- */
.logo{display:inline-flex;align-items:center;gap:var(--logo-gap,12px);text-decoration:none;color:inherit;--mk-h:36px}
.mark{display:block;height:var(--mk-h);width:auto;flex:none;overflow:visible}
.logo__word{display:inline-flex;flex-direction:column;align-items:stretch;line-height:1;white-space:nowrap}
.logo__name{font-family:var(--serif);font-weight:500;font-size:var(--wm-fs,14px);line-height:1;letter-spacing:.2em;text-transform:uppercase;margin-right:-.2em}
.logo__sub{display:flex;align-items:center;gap:.95em;margin-top:calc(var(--wm-fs,14px) * .4);font-family:var(--sans);font-weight:500;font-size:calc(var(--wm-fs,14px) * .5);line-height:1;letter-spacing:.5em;text-transform:uppercase;color:var(--mk-arch)}
.logo__sub::before,.logo__sub::after{content:"";flex:1;height:1px;background:currentColor;opacity:.6}
.logo__sub span{margin-right:-.5em}

/* ---------- page frame ---------- */
.lk{max-width:560px;margin:0 auto;padding:22px 20px 40px}

/* ---------- hero: Julia ---------- */
.lk-hero{display:grid;grid-template-columns:132px minmax(0,1fr);grid-template-areas:"logo logo" "portrait intro";column-gap:22px;row-gap:30px;align-items:end}
.lk-logo{grid-area:logo;justify-self:center}
.lk-portrait{grid-area:portrait;position:relative;width:132px;aspect-ratio:300 / 410;--sw:2.3}
.lk-portrait__lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.lk-portrait__lines path{fill:none;stroke:var(--brass);stroke-width:var(--sw)}
.lk-portrait__lines .lk-dash{stroke:rgba(239,235,225,.3);stroke-dasharray:calc(var(--sw) * 2) calc(var(--sw) * 5)}
.lk-portrait__img{position:absolute;left:8%;right:8%;top:5.85%;bottom:4.39%;border-radius:999px 999px 0 0;overflow:hidden;background:#262a23}
.lk-portrait__img img{width:100%;height:100%;object-fit:cover;object-position:50% 24%;transform:scale(1.34);transform-origin:50% 26%}
.lk-intro{grid-area:intro;padding-bottom:4px}
.lk-name{font-family:var(--serif);font-weight:300;font-size:clamp(46px,13.5vw,58px);line-height:.88;letter-spacing:-.01em}
.lk-name span{display:block}
.lk-role{margin-top:14px;font-size:13.5px;line-height:1.4;color:var(--cream-2)}
.lk-handles{margin-top:6px;font-size:12.5px;color:var(--cream-3)}

/* ---------- sections ---------- */
.lk-main{display:flex;flex-direction:column;gap:44px;margin-top:34px}
.lk-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding-bottom:12px;margin-bottom:18px;border-bottom:1px solid var(--line)}
.lk-title{font-family:var(--serif);font-weight:300;font-size:32px;line-height:1;letter-spacing:-.005em;text-wrap:balance}
.lk-aside{font-size:12.5px;line-height:1.35;color:var(--cream-3);text-align:right;max-width:15ch}
.lk-aside--link{color:var(--cream-2);text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:2px;white-space:nowrap;transition:color .3s,border-color .3s}
.lk-aside--link:hover{color:var(--cream);border-color:var(--brass)}
.lk-kicker{font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--brass)}

/* ---------- the studio (primary link) ---------- */
.lk-site{display:grid;grid-template-columns:84px minmax(0,1fr) auto;align-items:center;gap:16px;padding:12px 16px 12px 12px;border:1px solid rgba(186,152,97,.5);border-radius:6px;background:var(--walnut);text-decoration:none;color:inherit;
  transition:border-color .4s,background-color .4s}
.lk-site__img{display:block;width:84px;aspect-ratio:3 / 3.9;border-radius:999px 999px 0 0;overflow:hidden;background:#262a23}
.lk-site__img img{width:100%;height:100%;object-fit:cover;object-position:18% 50%;transition:transform 1.2s var(--ease)}
.lk-site__text{display:flex;flex-direction:column;gap:6px;min-width:0}
.lk-site__title{font-family:var(--serif);font-weight:400;font-size:28px;line-height:1}
.lk-site__note{font-size:13px;line-height:1.4;color:var(--cream-2)}
.lk-go{width:42px;height:42px;border-radius:50%;background:var(--brass);color:var(--walnut);display:grid;place-items:center;flex:none;transition:transform .5s var(--ease)}
.lk-go svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5}
.lk-site:hover{border-color:var(--brass);background:#20241e}
.lk-site:hover .lk-site__img img{transform:scale(1.06)}
.lk-site:hover .lk-go{transform:translateX(3px)}

/* ---------- shop: tags strung on a brass line ---------- */
.tags-rail{position:relative;display:flex;flex-direction:column;gap:12px;padding-left:22px}
.tags-rail::before{content:"";position:absolute;left:3px;top:-6px;bottom:24px;width:1px;background:linear-gradient(var(--brass),rgba(186,152,97,.55))}
.tags-rail::after{content:"";position:absolute;left:0;top:-9px;width:7px;height:7px;border-radius:50%;background:var(--brass)}
.tags-rail li{position:relative}
.tags-rail li::before{content:"";position:absolute;left:-19px;top:50%;width:37px;height:1px;background:var(--brass);transform-origin:left;transform:rotate(-4deg)}
.tag-row{position:relative;display:grid;grid-template-columns:10px 58px minmax(0,1fr) 34px;align-items:center;gap:14px;min-height:92px;padding:10px 14px 10px 12px;
  background:var(--paper);color:var(--ink);text-decoration:none;border-radius:46px 10px 10px 46px;box-shadow:0 22px 40px -28px rgba(0,0,0,.85);
  transition:transform .6s var(--ease),box-shadow .6s var(--ease)}
.tag-row__hole{width:10px;height:10px;border-radius:50%;background:var(--olive);box-shadow:inset 0 0 0 1px rgba(34,38,31,.4)}
.tag-row__thumb{display:block;width:58px;aspect-ratio:.78;border-radius:999px 999px 0 0;overflow:hidden;background:#262a23}
.tag-row__thumb img{width:100%;height:100%;object-fit:cover}
.tag-row__text{display:flex;flex-direction:column;min-width:0}
.tag-row__kicker{font-size:10.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--brass-ink)}
.tag-row__title{margin-top:5px;font-family:var(--serif);font-weight:500;font-size:24px;line-height:1.02}
.tag-row__note{margin-top:4px;font-size:13px;line-height:1.35;color:var(--ink-2)}
.tag-row__go{width:34px;height:34px;border-radius:50%;border:1px solid rgba(34,38,31,.28);display:grid;place-items:center;font-size:15px;line-height:1;transition:background-color .4s,color .4s,border-color .4s}
.tag-row:hover{transform:translateX(5px);box-shadow:0 28px 48px -28px rgba(0,0,0,.9)}
.tag-row:hover .tag-row__go{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.tag-row:active{transform:translateX(3px) scale(.99)}

/* ---------- from the studio ---------- */
.lk-projects{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.lk-projects a{display:flex;flex-direction:column;text-decoration:none;color:inherit}
.lk-arch{display:block;aspect-ratio:3 / 3.9;border-radius:999px 999px 0 0;overflow:hidden;background:#262a23}
.lk-arch img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.lk-projects a:hover .lk-arch img{transform:scale(1.06)}
.lk-projects__name{margin-top:10px;font-family:var(--serif);font-size:19px;line-height:1.1}
.lk-projects__meta{margin-top:3px;font-size:12px;color:var(--cream-3)}

/* ---------- inquire ---------- */
.lk-inquire{padding:30px 22px 26px;border-radius:999px 999px 6px 6px;background:var(--walnut);text-align:center;display:flex;flex-direction:column;align-items:center}
.lk-inquire .lk-title{padding-top:26px;max-width:12em}
.lk-inquire__text{margin-top:14px;max-width:34ch;font-size:14px;color:var(--cream-2)}
.btn-arch{position:relative;display:inline-flex;align-items:center;justify-content:center;min-height:54px;margin-top:22px;padding:19px 36px 15px;border:1px solid var(--brass);border-radius:999px 999px 0 0;
  font:500 14px/1 var(--sans);letter-spacing:.04em;color:var(--cream);text-decoration:none;overflow:hidden;isolation:isolate;transition:color .5s}
.btn-arch::before{content:"";position:absolute;inset:0;background:var(--brass);transform:translateY(101%);transition:transform .7s var(--ease);z-index:-1}
.btn-arch:hover,.btn-arch:focus-visible{color:var(--walnut)}
.btn-arch:hover::before,.btn-arch:focus-visible::before{transform:none}
.lk-inquire__mail{margin-top:16px;font-size:13px;color:var(--cream-3)}
.lk-inquire__mail a{color:var(--cream-2);text-decoration:none;border-bottom:1px solid var(--line);-webkit-user-select:all;user-select:all}

/* ---------- follow ---------- */
.lk-follow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.lk-follow a{display:flex;flex-direction:column;gap:4px;padding:16px 4px;text-decoration:none;text-align:center;transition:background-color .4s}
.lk-follow a + a{border-left:1px solid var(--line)}
.lk-follow b{font-family:var(--serif);font-weight:400;font-size:19px;line-height:1.1}
.lk-follow span{font-size:12px;color:var(--cream-3);overflow-wrap:anywhere}
.lk-follow a:hover{background:rgba(186,152,97,.08)}

.lk-foot{display:flex;flex-direction:column;gap:6px;font-size:12px;line-height:1.5;color:var(--cream-3);text-align:center}

/* ---------- arrival: the arch is drawn, then the page settles in ---------- */
@keyframes lk-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes lk-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes lk-fade{from{opacity:0}to{opacity:1}}
.lk-draw{stroke-dasharray:1;stroke-dashoffset:0;animation:lk-draw 1.5s var(--ease-io) .05s both}
.lk-draw + .lk-draw{animation-delay:.55s}
.lk-portrait__img{animation:lk-fade 1.1s var(--ease) .35s both}
.lk-intro,.lk-logo{animation:lk-rise .9s var(--ease) .2s both}
.rise{animation:lk-rise .9s var(--ease) both}
.lk-main > :nth-child(1){animation-delay:.3s}
.lk-main > :nth-child(2){animation-delay:.4s}
.lk-main > :nth-child(3){animation-delay:.5s}
.lk-main > :nth-child(4){animation-delay:.55s}
.lk-main > :nth-child(5){animation-delay:.6s}

/* ---------- wide screens: Julia on the left, the links on the right ---------- */
@media (min-width:960px){
  .lk{max-width:1360px;display:grid;grid-template-columns:minmax(0,1fr) minmax(440px,540px);column-gap:clamp(56px,7vw,120px);padding:0 clamp(36px,5vw,84px)}
  .lk-hero{position:sticky;top:0;height:100vh;height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;padding:96px 0 48px}
  .lk-logo{position:absolute;top:36px;left:0;--mk-h:44px;--wm-fs:16px;--logo-gap:15px}
  .lk-portrait{width:clamp(260px,24vw,360px);max-height:58vh;width:min(clamp(260px,24vw,360px),calc(58vh * 300 / 410));--sw:1}
  .lk-intro{margin-top:30px;text-align:center}
  .lk-name{font-size:clamp(64px,6vw,92px)}
  .lk-name span{display:inline}
  .lk-role{font-size:15px}
  .lk-main{margin-top:0;padding:clamp(72px,11vh,130px) 0 60px;gap:52px}
}
@media (max-width:370px){
  .lk-hero{grid-template-columns:112px minmax(0,1fr);column-gap:16px}
  .lk-portrait{width:112px;--sw:2.7}
  .tag-row{grid-template-columns:8px 50px minmax(0,1fr) 30px;gap:11px}
  .tag-row__thumb{width:50px}
  .tag-row__title{font-size:21px}
  .tag-row__go{width:30px;height:30px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-delay:0s!important;transition-duration:.001ms!important}
}
/* From the studio: the two project types, as on the website */
.lk-projects--types{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.lk-projects--types .lk-arch{aspect-ratio:3 / 3.6}
.lk-projects--types .lk-projects__name{margin-top:12px;font-size:25px}
.lk-projects--types .lk-projects__meta{margin-top:5px;font-size:12.5px;line-height:1.4}