/* Freya OS — shared site styles (Blog, Article, Freebies).
   Mirrors the tokens + components used in index.html / Library.html. */

@font-face { font-family: 'The New Elegance'; src: url('fonts/The_New_Elegance.ttf') format('truetype'); font-weight: 400 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'The New Elegance'; src: url('fonts/The_New_Elegance_Italic.ttf') format('truetype'); font-weight: 400 900; font-style: italic; font-display: swap; }
@font-face { font-family: 'Melodrame'; src: url('fonts/Melodrame.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }

:root {
  --porcelain:#F4EDE9; --oat:#F3E0D1; --antique:#E8E1D1; --ethereal:#F8E4D7;
  --ink:#282423; --ink-muted:#6E5A50; --ink-quiet:#9C8A7E;
  --bubblegum:#FF9EC4; --lilac:#FBC9F7; --coral:#FF6B6B; --tangerine:#FF8A1E; --hotpink:#FF2E54; --acid:#FFCB2E;
  --rule:rgba(40,36,35,0.15);
  --display:'The New Elegance','Cormorant Garamond',serif;
  --editorial:'Cormorant Garamond',serif;
  --script:'Melodrame','Cormorant Garamond',cursive;
  --body:'Libre Baskerville',Georgia,serif;
  --meta:'DM Mono',ui-monospace,monospace;
  --radius-pill:100px; --radius-soft:4px;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;background:var(--porcelain);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.8;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
img{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}

.shell{max-width:1100px;margin:0 auto;padding:0 40px;}
.shell--narrow{max-width:760px;}
.section{padding:96px 0;border-bottom:1px solid var(--rule);position:relative;}
.bg-oat{background:var(--oat);}
.bg-porcelain{background:var(--porcelain);}
.clip{overflow:hidden;}
.rule-60{width:60px;height:1px;background:var(--ink);}
.eyebrow{font-family:var(--meta);font-size:11px;letter-spacing:0.28em;text-transform:uppercase;color:var(--ink-muted);display:inline-flex;align-items:center;gap:12px;}
.eyebrow .mark{color:var(--ink);font-family:var(--display);font-size:13px;}

/* masthead + nav */
.masthead{border-bottom:1px solid var(--rule);background:rgba(244,237,233,0.86);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);position:sticky;top:0;z-index:60;}
.masthead__inner{max-width:1100px;margin:0 auto;padding:16px 40px;display:flex;align-items:center;justify-content:space-between;gap:24px;}
.masthead__brand{display:flex;align-items:baseline;gap:12px;}
.masthead__mark{font-family:var(--display);font-size:16px;color:var(--ink);position:relative;top:-1px;}
.masthead__freya{font-family:var(--display);font-weight:900;font-size:22px;letter-spacing:-0.01em;line-height:1;color:var(--ink);}
.masthead__os{font-family:var(--display);font-weight:400;font-size:11px;letter-spacing:0.6em;padding-left:0.6em;color:var(--ink);}
.nav__links{display:flex;align-items:center;gap:30px;}
.nav__link{font-family:var(--meta);font-size:11px;letter-spacing:0.22em;text-transform:uppercase;color:var(--ink);padding:6px 0;position:relative;white-space:nowrap;}
.nav__link::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform 260ms cubic-bezier(.16,1,.3,1);}
.nav__link:hover::after,.nav__link[aria-current="page"]::after{transform:scaleX(1);}
.nav__cta{font-family:var(--meta);font-size:11px;letter-spacing:0.22em;text-transform:uppercase;color:var(--ink);padding:9px 22px;border:1px solid var(--ink);border-radius:var(--radius-pill);white-space:nowrap;transition:background 260ms cubic-bezier(.16,1,.3,1),color 260ms cubic-bezier(.16,1,.3,1);}
.nav__cta:hover{background:var(--ink);color:var(--porcelain);}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 32px;font-family:var(--meta);font-size:11px;letter-spacing:0.28em;text-transform:uppercase;color:var(--ink);background:transparent;border:1px solid var(--ink);border-radius:var(--radius-pill);cursor:pointer;white-space:nowrap;transition:background 260ms cubic-bezier(.16,1,.3,1),color 260ms cubic-bezier(.16,1,.3,1),transform 160ms cubic-bezier(.16,1,.3,1);}
.btn:hover{background:var(--ink);color:var(--porcelain);}
.btn:active{transform:scale(0.98);}
.btn .arrow{font-family:var(--meta);font-size:14px;transition:transform 260ms cubic-bezier(.16,1,.3,1);}
.btn:hover .arrow{transform:translateX(4px);}

/* footer */
.foot{background:var(--oat);text-align:center;padding:70px 0 60px;}
.foot__mark{font-family:var(--display);font-size:16px;color:var(--ink);margin-bottom:14px;}
.foot__freya{font-family:var(--display);font-weight:900;font-size:38px;letter-spacing:-0.01em;line-height:1;color:var(--ink);}
.foot__os{font-family:var(--display);font-weight:400;font-size:12px;letter-spacing:0.6em;padding-left:0.6em;color:var(--ink);margin-top:8px;}
.foot__links{display:flex;justify-content:center;gap:18px;margin-top:30px;font-family:var(--meta);font-size:11px;letter-spacing:0.24em;text-transform:uppercase;color:var(--ink-muted);}
.foot__links a{transition:color 160ms ease;}
.foot__links a:hover{color:var(--ink);}
.foot__sep{color:var(--ink-quiet);}
.foot__meta{font-family:var(--meta);font-size:10px;letter-spacing:0.3em;text-transform:uppercase;color:var(--ink-quiet);margin-top:24px;}
.foot__social{display:flex;justify-content:center;flex-wrap:wrap;gap:14px;margin-top:18px;font-family:var(--meta);font-size:10px;letter-spacing:0.24em;text-transform:uppercase;color:var(--ink-quiet);}
.foot__social a{transition:color 160ms ease;}
.foot__social a:hover{color:var(--ink);}

/* aura + stars */
.aura{position:absolute;inset:-14% -8%;z-index:0;pointer-events:none;}
.aura .blob{position:absolute;will-change:transform;}
.aura .blob>i{display:block;width:100%;height:100%;border-radius:50%;filter:blur(70px);will-change:transform;}
.b1{width:46vmax;height:46vmax;top:-16%;left:2%;}
.b2{width:38vmax;height:38vmax;top:2%;right:-6%;}
.b3{width:30vmax;height:30vmax;bottom:-16%;left:28%;}
.b4{width:24vmax;height:24vmax;top:22%;left:46%;}
.b1>i{background:radial-gradient(circle at 50% 50%,rgba(255,158,196,0.82),rgba(255,158,196,0) 70%);animation:fd1 23s cubic-bezier(.45,0,.55,1) infinite alternate;}
.b2>i{background:radial-gradient(circle at 50% 50%,rgba(251,201,247,0.8),rgba(251,201,247,0) 70%);animation:fd2 28s cubic-bezier(.45,0,.55,1) infinite alternate;}
.b3>i{background:radial-gradient(circle at 50% 50%,rgba(255,178,140,0.58),rgba(255,178,140,0) 70%);animation:fd3 19s cubic-bezier(.45,0,.55,1) infinite alternate;}
.b4>i{background:radial-gradient(circle at 50% 50%,rgba(255,107,107,0.4),rgba(255,107,107,0) 70%);animation:fd4 25s cubic-bezier(.45,0,.55,1) infinite alternate;}
@keyframes fd1{0%{transform:translate(-7%,-4%) scale(0.96);}100%{transform:translate(8%,7%) scale(1.16);}}
@keyframes fd2{0%{transform:translate(5%,3%) scale(1.1);}100%{transform:translate(-8%,-6%) scale(0.94);}}
@keyframes fd3{0%{transform:translate(-4%,5%) scale(0.97);}100%{transform:translate(9%,-5%) scale(1.18);}}
@keyframes fd4{0%{transform:translate(3%,-5%) scale(1.06);}100%{transform:translate(-8%,6%) scale(0.92);}}
.blob--cursor{width:28vmax;height:28vmax;left:0;top:0;}
.blob--cursor>i{background:radial-gradient(circle at 50% 50%,rgba(255,158,196,0.62),rgba(255,158,196,0) 66%);filter:blur(54px);animation:none;}
.aura__grain{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.5;mix-blend-mode:soft-light;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:180px 180px;}
.stars{position:absolute;inset:0;z-index:1;pointer-events:none;}
.tw{position:absolute;font-family:var(--display);line-height:1;display:inline-block;transform-origin:center;animation:twk var(--tw,7s) ease-in-out infinite;animation-delay:var(--td,0s);}
@keyframes twk{0%,100%{opacity:.22;transform:scale(.78) rotate(-8deg);}50%{opacity:.95;transform:scale(1.14) rotate(8deg);}}
.c-bubble{color:#FF9EC4;}.c-lilac{color:#FBC9F7;}.c-coral{color:#FF6B6B;}.c-tang{color:#FF8A1E;}.c-hot{color:#FF2E54;}.c-acid{color:#FFCB2E;}

/* reveal */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1);transition-delay:var(--rd,0s);}
.reveal.is-in{opacity:1;transform:none;}

/* kinetic */
.kinetic{cursor:default;}
.kinetic .ku{display:inline-block;white-space:nowrap;}
.kinetic .kc{display:inline-block;will-change:transform;transform-origin:center;}
.kinetic mark.ku{transform-origin:center;will-change:transform;}

/* email-unlock form (shared) */
.capture{display:flex;align-items:center;gap:10px;max-width:520px;border-bottom:1px solid var(--ink);padding-bottom:8px;}
[hidden]{display:none!important;}
.capture input{flex:1;background:transparent;border:0;outline:none;font-family:var(--body);font-size:17px;color:var(--ink);padding:10px 4px;}
.capture input::placeholder{color:var(--ink-quiet);font-style:italic;}
.capture button{flex:none;background:transparent;border:0;font-family:var(--meta);font-size:11px;letter-spacing:0.26em;text-transform:uppercase;color:var(--ink);cursor:pointer;padding:10px 6px;display:inline-flex;align-items:center;gap:10px;white-space:nowrap;}
.capture button .arrow{font-size:14px;transition:transform 260ms cubic-bezier(.16,1,.3,1);}
.capture button:hover .arrow{transform:translateX(4px);}

@media (prefers-reduced-motion: reduce){
  .aura .blob>i{animation:none !important;}
  .tw{animation:none;opacity:.65;}
  .reveal{opacity:1;transform:none;transition:none;}
}
@media (max-width: 880px){ .section{padding:72px 0;} }
@media (max-width: 560px){
  .shell{padding:0 22px;}
  .masthead__inner{padding:14px 22px;}
  .nav__link{display:none;}
}
