/* Angel Castillo — personal portfolio. Production stylesheet.
   Approved Ivory + Onyx + Aged Brass direction (Portfolio v4). */

:root{
  --personal-ivory:#F6F0E8;--warm-white:#FFFDF9;--onyx:#0E0E0E;--warm-graphite:#615A51;
  --aged-brass:#B58B3B;--castl-brass:#C8A45D;--charcoal:#1E1D1A;
  --surface-page:var(--personal-ivory);--surface-card:var(--warm-white);
  --text-primary:var(--onyx);--text-secondary:var(--warm-graphite);
  --action-primary:var(--aged-brass);--action-on-primary:var(--onyx);
  --text-link:var(--onyx);--text-link-hover:var(--aged-brass);--focus-ring:var(--onyx);
  --border-hairline:rgba(14,14,14,.12);
  --font-display:"Bricolage Grotesque",system-ui,sans-serif;
  --font-body:"Manrope",system-ui,sans-serif;
  --font-mono:"Space Mono",ui-monospace,SFMono-Regular,monospace;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--surface-page);color:var(--text-primary);font-family:var(--font-body);-webkit-font-smoothing:antialiased;overflow-x:hidden;text-wrap:pretty}
a{color:var(--text-link);text-decoration:none}
a:hover{color:var(--text-link-hover)}
img{max-width:100%}
::selection{background:rgba(181,139,59,.30)}
:focus-visible{outline:2px solid #0E0E0E;outline-offset:4px;border-radius:2px}

@keyframes acWordIn{from{opacity:0;transform:translateY(.14em)}to{opacity:1;transform:none}}
@keyframes acLetterIn{0%{opacity:0;transform:translateY(14px)}72%{opacity:1;transform:translateY(-1.5px)}100%{opacity:1;transform:none}}
@keyframes acBrassSheen{0%{background-position:14% 50%,0 0}50%{background-position:86% 50%,0 0}100%{background-position:14% 50%,0 0}}
@keyframes acPageIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes acDrift{to{transform:translateX(-50%)}}

.acBLw{display:inline-block;animation:acLetterIn .56s cubic-bezier(.33,1,.68,1) both}
.acBL{display:inline-block;color:#B58B3B}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .acBL{
    background-image:linear-gradient(100deg,#6F4F18 0%,#8F6929 16%,#B58B3B 34%,#D6B76E 50%,#B58B3B 66%,#8F6929 84%,#6F4F18 100%),repeating-linear-gradient(94deg,rgba(255,255,255,.055) 0 1px,rgba(20,12,0,.055) 1px 2.5px);
    background-size:320% 100%,3px 100%;background-repeat:no-repeat,repeat;
    -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
    animation:acBrassSheen 3.8s cubic-bezier(.45,0,.55,1) infinite
  }
}

/* Four page states — routes: / , /work , /about , /contact */
.acPage{animation:acPageIn .28s cubic-bezier(.33,1,.68,1) both}
#pg-home{display:flex;flex-direction:column;min-height:100svh}
#pg-work,#pg-about,#pg-contact{display:none}
main[data-page="work"] #pg-home,main[data-page="about"] #pg-home,main[data-page="contact"] #pg-home{display:none}
main[data-page="work"] #pg-work{display:block}
main[data-page="about"] #pg-about{display:block}
main[data-page="contact"] #pg-contact{display:block}
.acPageH[tabindex="-1"]:focus,
.acPageH[tabindex="-1"]:focus-visible{outline:none}
.acPageH[tabindex="-1"][data-kbd]:focus{outline:2px solid #0E0E0E;outline-offset:6px}

/* Custom pointer — CASTL Compass Blade + restrained brass halo */
html.acCurOn,html.acCurOn *{cursor:none !important}
html.acCurOn input,html.acCurOn textarea,html.acCurOn select{cursor:text !important}
#acCurLayer{display:none}
html.acCurOn #acCurLayer{display:block;position:fixed;inset:0;z-index:900;pointer-events:none}
#acCurBlade{position:absolute;top:0;left:0;width:22px;height:22px;transform-origin:3px 19px;transition:filter .18s ease;will-change:transform}
#acCurHalo{position:absolute;top:0;left:0;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;background:radial-gradient(circle,rgba(181,139,59,.16) 0%,rgba(181,139,59,.06) 45%,rgba(181,139,59,0) 72%);opacity:.9;transition:opacity .2s ease,transform .12s ease;will-change:transform}
#acCurLayer[data-hot="1"] #acCurBlade{filter:brightness(1.16)}
#acCurLayer[data-hot="1"] #acCurHalo{opacity:1;transform:scale(1.35)}

.acSr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.acSkip{position:fixed;top:-72px;left:16px;z-index:400;background:#0E0E0E;color:#F6F0E8;padding:13px 20px;border-radius:2px;font:600 14px/1 var(--font-body);text-decoration:none;transition:top .15s}
.acSkip:focus{top:14px;color:#F6F0E8}

/* Header — two rows from 320 to 859px, single row from 860px */
.acHdr{position:fixed;top:0;left:0;right:0;z-index:300;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"name sig" "nav nav";align-items:center;column-gap:12px;row-gap:10px;padding:12px clamp(16px,4vw,48px) 12px;background:linear-gradient(#F6F0E8 70%,rgba(246,240,232,0));pointer-events:none}
.acHdrName{grid-area:name;pointer-events:auto;display:inline-flex;align-items:center;min-height:44px;text-decoration:none;color:#0E0E0E}
.acHdrName span{display:block;font-family:var(--font-display);font-weight:800;font-size:clamp(16px,1.7vw,20px);letter-spacing:-.02em;line-height:1.1}
.acHdrSig{grid-area:sig;pointer-events:auto;justify-self:end}

/* Icon dock — three destinations, top of page at every width */
.acDock{grid-area:nav;pointer-events:auto;justify-self:center;display:flex;align-items:center;gap:4px;padding:8px 18px;background:rgba(30,29,26,var(--ac-dock-alpha,.75));-webkit-backdrop-filter:saturate(140%) blur(10px);backdrop-filter:saturate(140%) blur(10px);border:1px solid rgba(255,253,249,.14);border-radius:26px;box-shadow:0 10px 26px rgba(14,14,14,.16)}
.acDockItem{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:94px;min-height:48px;padding:6px 0 5px;text-decoration:none;color:#F6F0E8;border-radius:18px}
.acDockItem:hover{color:#FFFDF9}
.acDockIcon{position:relative;display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;transition:transform .26s cubic-bezier(.2,.7,.3,1),background .26s ease,box-shadow .26s ease}
.acDockIcon svg{display:block;width:27px;height:27px}
.acDockLabel{font-family:var(--font-body);font-weight:600;font-size:10.5px;letter-spacing:.04em;line-height:1;color:inherit}
.acDockItem[aria-current="page"]{color:#FFFDF9}
.acDockItem[aria-current="page"] .acDockIcon{background:rgba(181,139,59,.18);box-shadow:inset 0 0 0 1px #B58B3B}
.acDockItem[aria-current="page"]::after{content:"";position:absolute;bottom:0;width:4px;height:4px;border-radius:50%;background:#B58B3B}
.acDockItem:focus-visible{outline:2px solid #B58B3B;outline-offset:2px}

@media (hover:hover) and (pointer:fine) and (min-width:721px){
  .acDockItem:hover .acDockIcon,
  .acDockItem:focus-visible .acDockIcon{transform:translateY(-3px) scale(1.22);background:rgba(181,139,59,.24);box-shadow:inset 0 0 0 1px rgba(181,139,59,.60)}
  .acDock:has(.acDockItem:hover) .acDockItem:not(:hover) .acDockIcon,
  .acDock:has(.acDockItem:focus-visible) .acDockItem:not(:focus-visible) .acDockIcon{transform:scale(1.05)}
}
.acDockItem:active .acDockIcon{transform:scale(.96)}

@media (max-width:720px){
  .acDock{width:min(322px,calc(100vw - 32px));height:68px;justify-content:space-between;gap:0;padding:0 8px;border-radius:24px}
  .acDockItem{flex:1;width:auto;min-width:48px;min-height:56px}
  #ac-blinkWrap{max-width:min(34vh,min(58vw,340px)) !important}
  .acCh2Media{aspect-ratio:16/10 !important}
}
@media (max-width:859px){
  #ac-core{padding-top:172px !important}
  #pg-work>.acWorkIntro,#pg-about>.acAbout,#pg-contact>div:first-child{padding-top:176px !important}
}

/* CASTL STUDIO referral — permanent shield + label, fenced from the dock */
.acSig{position:relative;display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:4px 2px;text-decoration:none;color:#0E0E0E}
.acSigShield{height:37px;width:auto;display:block;transition:transform .34s cubic-bezier(.33,1,.68,1)}
.acSigLabel{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.16em;color:#615A51;white-space:nowrap}
.acSigNote{position:absolute;top:100%;right:2px;margin-top:1px;opacity:0;transform:translateY(-3px);white-space:nowrap;font-family:var(--font-mono);font-size:9px;letter-spacing:.1em;color:#615A51;pointer-events:none;transition:opacity .2s ease,transform .2s ease}
@media (hover:hover) and (pointer:fine){
  .acSig:hover .acSigNote,.acSig:focus-visible .acSigNote{opacity:1;transform:none}
  .acSig:hover .acSigShield,.acSig:focus-visible .acSigShield{transform:translateY(-3px) rotate(-5deg)}
}
@media (hover:none){
  .acSigNote{display:none}
  .acHint{opacity:1 !important;transform:none !important}
}
@media (min-width:860px){
  .acHdr{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);grid-template-areas:"name nav sig";padding:18px clamp(16px,4vw,48px) 14px;row-gap:0}
  .acHdrName{padding-top:2px}
  .acSigShield{height:42px}
  .acSigLabel{font-size:10px}
}

/* Hero */
#ac-core{position:relative;container-type:inline-size;flex:1;display:flex;flex-direction:column;justify-content:center;width:100%;max-width:1320px;margin:0 auto;padding:clamp(96px,13vh,150px) clamp(16px,4vw,48px) clamp(14px,2vh,26px)}
#ac-topo{position:absolute;inset:-8%;background-image:repeating-radial-gradient(circle at 58% 42%,rgba(14,14,14,0) 0 26px,rgba(14,14,14,.055) 26px 27px),repeating-linear-gradient(94deg,rgba(14,14,14,0) 0 78px,rgba(14,14,14,.035) 78px 79px);-webkit-mask-image:radial-gradient(78% 76% at 58% 44%,#000 0,transparent 80%);mask-image:radial-gradient(78% 76% at 58% 44%,#000 0,transparent 80%);transition:transform .6s cubic-bezier(.33,1,.68,1);will-change:transform}
#ac-glow{position:absolute;top:0;left:0;width:620px;height:620px;border-radius:50%;background:radial-gradient(circle,rgba(200,164,93,.22) 0%,rgba(200,164,93,0) 66%);transform:translate(52vw,14vh);transition:transform .55s cubic-bezier(.33,1,.68,1);will-change:transform}
.acKicker{margin:0 0 clamp(10px,1.6vh,18px);font-family:var(--font-mono);font-size:9.5px;letter-spacing:.18em;color:#615A51}
.acHeroLine{position:relative;z-index:1;font-family:var(--font-display);font-weight:800;font-size:min(11.4cqw,7.2rem);line-height:.86;letter-spacing:-.035em;color:#0E0E0E;white-space:nowrap}
.acHeroLineBrass{z-index:3;text-align:right;color:#B58B3B}
#ac-w1{will-change:opacity,transform}
#ac-avatar{transition:transform .5s cubic-bezier(.33,1,.68,1);will-change:transform;transform-origin:50% 84%}
#ac-blinkWrap{position:relative;width:100%;max-width:min(40vh,min(62vw,380px))}
.acAvatar{display:block;width:100%;height:auto;object-fit:contain;object-position:bottom;filter:drop-shadow(0 16px 22px rgba(14,14,14,.16))}
/* Blink overlays — lossless eye-region crops positioned over the base avatar.
   Pixels outside this region are untouched, so no shift/shadow/colour change. */
.acBlinkLayer{position:absolute;left:28.415%;top:27.95%;width:33.902%;height:auto;opacity:0;pointer-events:none;will-change:opacity}
.acAvatarShadow{width:min(30vh,46vw);height:12px;margin-top:-4px;border-radius:50%;background:radial-gradient(closest-side,rgba(14,14,14,.20),rgba(14,14,14,0) 78%)}
.acHeroSub{margin:clamp(18px,3vh,34px) 0 0;max-width:44ch;font-size:15.5px;line-height:1.6;color:#615A51}
.acHeroCtas{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(16px,2.4vh,26px)}

/* Buttons */
.acBtn{display:inline-flex;align-items:center;min-height:48px;font-weight:600;font-size:14.5px;text-decoration:none;transition:background .12s,transform .12s,border-color .12s,color .12s}
.acBtn:active{transform:scale(.985)}
.acBtnPrimary{padding:13px 26px;background:#B58B3B;color:#0E0E0E}
.acBtnPrimary:hover{background:#A37A2F;color:#0E0E0E}
.acBtnDark{padding:14px 26px;background:#0E0E0E;color:#F6F0E8}
.acBtnDark:hover{background:#1E1D1A;color:#F6F0E8}
.acBtnGhost{padding:13px 20px;color:#0E0E0E;border-bottom:1px solid rgba(14,14,14,.3)}
.acBtnGhost:hover{border-color:#B58B3B;color:#B58B3B}

/* Marquee */
.acMarq{position:relative;overflow:hidden;border-top:1px solid rgba(14,14,14,.14);border-bottom:1px solid rgba(14,14,14,.14);padding:12px 0;background:rgba(255,253,249,.55)}
.acMarqTrack{display:flex;width:max-content;animation:acDrift 26s linear infinite}
.acMarq:hover .acMarqTrack,.acMarq:focus-within .acMarqTrack,.acMarq:focus-visible .acMarqTrack{animation-play-state:paused}
.acMarqRow{display:flex;align-items:center;white-space:nowrap;font-family:var(--font-mono);font-weight:700;font-size:12.5px;letter-spacing:.06em;color:#0E0E0E}
.acMarqRow span{padding:0 16px}
.acDot{flex:none;width:6.5px;height:6.5px;border-radius:50%;background:#B58B3B;padding:0 !important}
@media (min-width:860px){.acMarqRow{font-size:14px}.acMarqRow span{padding:0 22px}}

.acHint{opacity:0;transform:translateY(4px);transition:opacity .22s,transform .22s}
.acHintWrap:hover .acHint,.acHintWrap:focus-within .acHint{opacity:1;transform:none}

/* Work */
.acWorkIntro{max-width:1320px;margin:0 auto;padding:clamp(112px,14vh,160px) clamp(16px,4vw,48px) 0}
.acEyebrow{margin:0;font-family:var(--font-mono);font-size:11px;letter-spacing:.2em;color:#615A51}
.acChapter{margin:0 0 18px;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.18em;color:#B58B3B}
.acChTitle{margin:0;font-family:var(--font-display);font-weight:800;font-size:clamp(2rem,6vw,4.6rem);line-height:.92;letter-spacing:-.035em}
.acWorkStudy{contain:layout style}
.acCh1{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(24px,4vw,72px);align-items:end;max-width:1320px;margin:clamp(44px,7vw,100px) auto 0;padding:0 clamp(16px,4vw,48px)}
.acCh2{position:relative;margin-top:clamp(64px,10vw,150px);padding:clamp(40px,6vw,72px) 0;background:#FFFDF9;border-top:1px solid rgba(14,14,14,.10);border-bottom:1px solid rgba(14,14,14,.10)}
.acChHeadOver{position:relative;z-index:2;transform:translateY(clamp(0px,2vw,26px))}
.acCh3{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(24px,4vw,72px);align-items:start;max-width:1320px;margin:clamp(64px,9vw,140px) auto 0;padding:0 clamp(16px,4vw,48px)}
.acStudyFrame{position:relative;overflow:hidden;background:#FFFDF9}
.acStudyImg{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.acStudyImgJulian{object-position:center top}
.acStudyCap{margin-top:12px;font-family:var(--font-mono);font-size:10px;letter-spacing:.15em;color:#615A51}
.acProjectNote{max-width:46ch;margin:24px 0 0;padding-top:18px;border-top:1px solid rgba(14,14,14,.14);font-family:var(--font-mono);font-size:10.5px;line-height:1.7;letter-spacing:.04em;color:#615A51}
.acRef{display:grid;grid-template-columns:1fr auto;gap:clamp(20px,4vw,64px);align-items:center;max-width:1320px;margin:clamp(64px,9vw,140px) auto 0;padding:clamp(40px,6vw,64px) clamp(16px,4vw,48px);border-top:1px solid rgba(14,14,14,.12)}

@media (max-width:900px){
  .acCh1,.acCh3{grid-template-columns:1fr !important}
  .acCh1Media,.acCh3Media{margin:0 !important;max-width:none !important}
  .acChHeadOver{margin:0 0 20px !important;transform:none !important}
  .acAbout{grid-template-columns:1fr !important}
  .acRef{grid-template-columns:1fr !important}
  .acProof{grid-template-columns:1fr 1fr !important}
}
@media (max-width:520px){
  .acProof{grid-template-columns:1fr !important}
}

/* About */
.acAbout{display:grid;grid-template-columns:auto 1fr;gap:clamp(20px,5vw,80px);max-width:1320px;margin:0 auto;padding:clamp(112px,14vh,164px) clamp(16px,4vw,48px) clamp(64px,9vw,120px)}
.acProof{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,2.6vw,34px);max-width:640px;margin:clamp(32px,5vw,52px) 0 0;padding-top:24px;border-top:1px solid rgba(14,14,14,.14)}
.acProof dt{font-family:var(--font-display);font-weight:800;font-size:clamp(1.1rem,1.6vw,1.45rem);letter-spacing:-.02em}
.acProof dd{margin:6px 0 0;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.13em;color:#615A51}

/* Contact */
.acContactList{display:grid;gap:0;margin-top:clamp(34px,5vw,58px);max-width:760px;border-top:1px solid rgba(14,14,14,.14)}
.acContactRow{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:10px;min-height:56px;padding:18px 2px;border-bottom:1px solid rgba(14,14,14,.14);text-decoration:none;color:#0E0E0E;transition:padding-left .18s,color .18s}
.acContactRow:hover{padding-left:8px;color:#B58B3B}
.acContactKey{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.18em;color:#615A51}
.acContactVal{font-family:var(--font-mono);font-size:clamp(14px,2.4vw,21px);letter-spacing:.04em}

/* Footer */
.acFooter{border-top:1px solid rgba(14,14,14,.12)}
.acFooter>div{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;max-width:1320px;margin:0 auto;padding:20px clamp(16px,4vw,48px)}
.acFooterHome{display:inline-flex;align-items:center;min-height:44px;font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;color:#0E0E0E;text-decoration:none;border-bottom:1px solid #B58B3B}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  html.acCurOn,html.acCurOn *{cursor:auto !important}
  #acCurLayer{display:none !important}
  .acPage{animation:none !important}
  .acDockIcon{transition:none !important}
  .acDockItem:hover .acDockIcon,.acDockItem:focus-visible .acDockIcon,.acDock:has(.acDockItem:hover) .acDockItem:not(:hover) .acDockIcon{transform:none !important}
  .acSigShield{transition:none !important}
  .acBLw{animation:none !important}
  .acBL{animation:none !important;background-image:none !important;color:#B58B3B !important;-webkit-text-fill-color:#B58B3B !important}
  .acMarqTrack{animation:none !important;flex-wrap:wrap;width:auto !important;transform:none !important}
  .acMarqRow{white-space:normal;flex-wrap:wrap}
  .acMarqDup{display:none !important}
  #ac-avatar{transform:none !important}
  .acBlinkLayer{opacity:0 !important}
}