/*
Theme Name: Line Storgaard-Conley
Theme URI: https://linestorgaardconley.com
Author: Line Storgaard-Conley
Description: Bold personal site on a highlighter-yellow field with pink & blue accents. A links hub (front page) plus About and Work pages.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: lsc
*/

:root{
    --bg:#F2FF5C;
    --paper:#FFFFFF;
    --ink:#161306;
    --orange:#FF4F18;
    --orange-deep:#D9440C;
    --blue:#2340F2;
    --pink:#FF4FCB;
    --clay:#54503A;
    --line:rgba(22,19,6,.16);
    --display:"Bricolage Grotesque", sans-serif;
    --serif:"Newsreader", Georgia, serif;
    --mono:"Space Mono", ui-monospace, monospace;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{background:var(--bg); color:var(--ink); font-family:var(--mono); -webkit-font-smoothing:antialiased; overflow-x:hidden; position:relative;}
  ::selection{background:var(--ink); color:var(--bg);}

  .grain{position:fixed; inset:0; z-index:60; pointer-events:none; opacity:.055; mix-blend-mode:multiply;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");}

  .wrap{max-width:1160px; margin:0 auto; padding:0 clamp(22px,5vw,68px); position:relative; z-index:2;}

  .topbar{display:flex; justify-content:space-between; align-items:center; padding-top:clamp(22px,4vw,34px);
    font-family:var(--mono); font-size:.74rem; letter-spacing:.06em; color:var(--ink); text-transform:uppercase;}
  .topbar .mark{font-family:var(--display); font-weight:800; font-size:1rem; text-decoration:none; color:var(--ink); position:relative; display:inline-flex; align-items:center; gap:.16em; line-height:1;}
  .topbar .mark .lt{position:relative; z-index:1; padding:.05em .12em;}
  .topbar .mark .lt::before{content:""; position:absolute; left:0; right:0; top:14%; bottom:14%; background:var(--pink); z-index:-1; transform:scaleX(0) skewX(-8deg); transform-origin:left center; transition:transform .34s cubic-bezier(.16,1,.3,1);}
  .topbar .mark:hover .lt::before{transform:scaleX(1) skewX(-8deg);}
  .topbar .mark .st{display:inline-block; color:var(--pink); transform-origin:center; animation:twinkle 3.2s ease-in-out infinite;}
  .topbar .mark:hover .st{color:var(--blue); animation:starpop .6s cubic-bezier(.16,1,.3,1);}
  @keyframes twinkle{0%,100%{transform:rotate(0deg) scale(1);} 50%{transform:rotate(90deg) scale(1.22);}}
  @keyframes starpop{0%{transform:rotate(0deg) scale(1);} 55%{transform:rotate(230deg) scale(1.45);} 100%{transform:rotate(360deg) scale(1);}}
  .nav{display:flex; gap:clamp(15px,2.4vw,30px); align-items:center;}
  .nav a{color:var(--ink); text-decoration:none; position:relative; padding-bottom:3px;}
  .nav a::after{content:""; position:absolute; left:0; right:0; bottom:0; height:1.7px; background:var(--pink); transform:scaleX(0); transform-origin:left center; transition:transform .28s cubic-bezier(.16,1,.3,1);}
  .nav a:hover::after, .nav a.current::after{transform:scaleX(1);}
  .blurb{font-family:var(--mono); font-size:.8rem; color:var(--clay); line-height:1.6; max-width:54ch;}
  .row.work{display:grid; grid-template-columns:1fr auto; align-items:baseline; gap:6px 18px;}
  .row.work .meta{justify-self:end;}
  .row.work .blurb{grid-column:1 / -1; margin-top:2px;}
  .row:hover .blurb{color:var(--paper);}
  .story{max-width:78ch;}
  .story p{font-family:var(--mono); font-size:.92rem; line-height:1.85; color:var(--ink); margin-bottom:1.25em;}
  .story p.lead{font-size:1.02rem;}
  .pullquote{font-family:var(--serif); font-style:italic; font-weight:500; font-size:clamp(1.55rem,3.8vw,2.5rem); line-height:1.22; color:var(--ink); margin:clamp(26px,4vw,42px) 0; padding-left:20px; border-left:3px solid var(--pink);}
  .pullquote .hl{background:var(--pink); color:#fff; padding:.02em .14em; box-decoration-break:clone; -webkit-box-decoration-break:clone;}
  .storycard{background:var(--paper); border:1px solid var(--blue); padding:clamp(26px,4vw,52px); max-width:56rem; margin-top:clamp(26px,4vw,38px);}
  .storycard .story{max-width:none;}
  .storycard .links-head{color:var(--blue);}

  /* hero */
  .hero{display:grid; grid-template-columns:1.22fr .78fr; align-items:center; gap:clamp(20px,3.2vw,40px); padding-top:clamp(38px,6vw,76px);}
  .eyebrow{font-family:var(--mono); font-size:.76rem; letter-spacing:.22em; text-transform:uppercase; color:var(--ink); font-weight:700; margin-bottom:clamp(14px,2vw,22px); display:flex; align-items:center; gap:9px;}
  .eyebrow::before{content:""; width:24px; height:1.6px; background:var(--pink);}
  h1.name{font-family:var(--display); font-weight:800; color:var(--ink); font-size:clamp(2.7rem,9.6vw,7.4rem); line-height:.94; letter-spacing:-.03em; text-transform:lowercase;}
  h1.name .w{display:block; overflow:hidden; padding-bottom:.14em; margin-bottom:-.14em;}
  h1.name .w span{display:block; white-space:nowrap; transform:translateY(105%); animation:wipe .9s cubic-bezier(.16,1,.3,1) forwards;}
  .name .w:nth-child(2) span{animation-delay:.09s;}
  .name .w:nth-child(3) span{animation-delay:.18s;}
  @keyframes wipe{to{transform:none;}}
  h1.name .dot{color:var(--pink);}
  .tagline{font-family:var(--serif); font-style:italic; font-size:clamp(1.3rem,3.4vw,2.05rem); color:var(--ink); margin-top:clamp(18px,2.6vw,28px);}
  .intro{font-family:var(--mono); font-size:.85rem; line-height:1.7; color:var(--clay); max-width:40ch; margin-top:18px; letter-spacing:.01em;}
  .intro b{color:var(--ink); font-weight:400;}

  /* photo */
  .photo{position:relative; justify-self:end; width:clamp(230px,30vw,360px); margin:clamp(24px,4vw,0) 0;}
  .photo .block{position:absolute; inset:0; background:var(--pink); transform:rotate(-3.5deg) translate(20px,22px); z-index:1;}
  .photo .frame{position:relative; z-index:2; transform:rotate(-3.5deg); background:var(--paper); border:1.5px solid var(--ink); padding:0; line-height:0; transition:transform .5s cubic-bezier(.16,1,.3,1);}
  .photo .frame img{display:block; width:100%; filter:grayscale(1) contrast(1.05); }
  .photo:hover .frame{transform:rotate(-1.5deg) scale(1.015);}
  .photo .cap{position:absolute; z-index:3; bottom:-12px; left:-10px; background:var(--ink); color:#fff; font-family:var(--mono); font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; padding:6px 11px; transform:rotate(-3.5deg);}
  .sticker{position:absolute; --sz:clamp(118px,14.5vw,158px); top:calc(var(--sz) / -2); right:calc(var(--sz) / -2); width:var(--sz); height:var(--sz); z-index:4; animation:spin 16s linear infinite;}
  .sticker text{font-family:var(--mono); font-size:8.4px; letter-spacing:1.8px; fill:var(--bg); text-transform:uppercase;}
  .sticker circle{fill:var(--blue); stroke:none;}
  .sticker .core{font-family:var(--display); font-weight:800; font-size:26px; fill:var(--pink); animation:spin 16s linear infinite reverse; transform-origin:center;}
  @keyframes spin{to{transform:rotate(360deg);}}

  /* marquee */
  .marquee{margin-top:clamp(46px,7vw,82px); padding:16px 0; overflow:hidden; white-space:nowrap; border-top:1.5px solid var(--ink); border-bottom:1.5px solid var(--ink);}
  .marquee .track{display:inline-block; animation:scroll 24s linear infinite;}
  .marquee:hover .track{animation-play-state:paused;}
  .marquee span{font-family:var(--display); font-weight:700; font-size:clamp(1.5rem,3.8vw,2.4rem); color:var(--ink); text-transform:lowercase; padding:0 .3em;}
  .marquee .dot{color:var(--pink);}
  @keyframes scroll{to{transform:translateX(-50%);}}

  /* links */
  .links{margin-top:clamp(48px,8vw,88px);}
  .links-head{font-family:var(--mono); font-size:.74rem; letter-spacing:.24em; text-transform:uppercase; color:var(--blue); font-weight:700; margin-bottom:4px;}
  .row{display:flex; align-items:center; justify-content:space-between; gap:18px; padding:clamp(17px,2.5vw,26px) clamp(10px,2vw,22px);
    border-top:1.5px solid var(--line); text-decoration:none; color:var(--ink); position:relative; overflow:hidden; transition:color .35s ease;}
  .links .row:last-of-type{border-bottom:1.5px solid var(--line);}
  .row .label{font-family:var(--display); font-weight:700; font-size:clamp(1.6rem,5vw,3.1rem); line-height:1; letter-spacing:-.02em; text-transform:lowercase; transition:transform .4s cubic-bezier(.16,1,.3,1);}
  .row .meta{font-family:var(--mono); font-size:.76rem; letter-spacing:.04em; text-transform:uppercase; color:var(--clay); display:flex; align-items:center; gap:13px; white-space:nowrap; transition:color .35s ease;}
  .row .arrow{font-family:var(--display); font-size:1.25rem; color:var(--blue); transition:transform .4s cubic-bezier(.16,1,.3,1), color .3s ease;}
  .row::before{content:""; position:absolute; inset:0; background:var(--pink); transform:translateY(101%); transition:transform .42s cubic-bezier(.16,1,.3,1); z-index:-1;}
  .row:hover{color:var(--paper);}
  .row:hover::before{transform:none;}
  .row:hover .label{transform:translateX(12px);}
  .row:hover .meta{color:var(--paper);}
  .row:hover .arrow{transform:translate(6px,-6px); color:var(--paper);}
  .row:focus-visible{outline:2px solid var(--pink); outline-offset:-6px;}

  footer{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px; margin-top:clamp(54px,9vw,100px); padding-bottom:clamp(40px,6vw,60px);
    font-family:var(--mono); font-size:.76rem; letter-spacing:.04em; color:var(--clay); text-transform:uppercase;}
  footer .fr{display:flex; gap:22px;}
  footer .fstar{display:inline-block; margin-left:.25em; color:var(--pink); font-family:var(--display); font-weight:800; transform-origin:center; animation:twinkle 3.2s ease-in-out infinite;}
  footer a{color:var(--ink); text-decoration:none; border-bottom:1.6px solid transparent; transition:border-color .25s;}
  footer a:hover{border-color:var(--pink);}
  footer .ar{color:var(--blue);}

  .artwork{position:relative; justify-self:end; width:clamp(240px,32vw,380px);}
  .artwork svg{width:100%; height:auto; display:block; overflow:visible;}
  .ill-spin{transform-box:fill-box; transform-origin:center; animation:spin 24s linear infinite;}
  .ill-tw{transform-box:fill-box; transform-origin:center; animation:twinkle 3.2s ease-in-out infinite;}
  .reveal{opacity:0; animation:fade .8s ease forwards;}
  .r2{animation-delay:.28s;} .r3{animation-delay:.42s;} .r4{animation-delay:.56s;}
  @keyframes fade{to{opacity:1;}}

  @media (max-width:760px){
    .hero{grid-template-columns:1fr; gap:8px;}
    .artwork{justify-self:start; width:min(290px,76%); margin:30px 0 6px;}
    .photo{justify-self:start; order:2; margin:34px 0 8px; width:min(300px,78%);}
    h1.name{font-size:clamp(2.9rem,16vw,5rem);}
    .row{flex-direction:column; align-items:flex-start; gap:7px;}
  }
  @media (prefers-reduced-motion:reduce){
    *{animation:none !important; transition:none !important;}
    h1.name .w span{transform:none;}
    .row::before{display:none;}
    html{scroll-behavior:auto;}
  }