/* elicuellar.com — Phase Lock x Elements */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#14120F;color:#EFE5CE;font-family:'EB Garamond',Georgia,serif;-webkit-font-smoothing:antialiased}
a{color:#C43C28}
a:hover{color:#EFE5CE}
img{max-width:100%;display:block}

.gx-c{background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='260'%20height='260'%3E%3Cfilter%20id='m'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.38'%20numOctaves='3'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20type='saturate'%20values='0'/%3E%3C/filter%3E%3Crect%20width='260'%20height='260'%20filter='url(%23m)'/%3E%3C/svg%3E")}
.weave{background-image:repeating-linear-gradient(0deg,rgba(255,255,255,0.02) 0 1px,transparent 1px 3px),repeating-linear-gradient(90deg,rgba(255,255,255,0.02) 0 1px,transparent 1px 3px)}

/* navigation */
.nv{font-family:'IBM Plex Mono',monospace;font-size:8.5px;letter-spacing:0.16em;text-decoration:none;color:rgba(239,229,206,0.55)}
.nv:hover{color:#EFE5CE}
.nv-cur{font-family:'IBM Plex Mono',monospace;font-size:8.5px;letter-spacing:0.16em;color:#E3AC38}

/* gallery plate */
.plate{background:#EFE5CE;padding:14px 14px 11px;box-shadow:0 3px 16px rgba(0,0,0,0.45);transition:transform 0.3s,box-shadow 0.3s}
.plate:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(0,0,0,0.55)}
.pnum{font-family:'IBM Plex Mono',monospace;font-size:8px;letter-spacing:0.2em;color:#8a7f6a}
.pcap{font-family:'IBM Plex Mono',monospace;font-size:8.5px;letter-spacing:0.08em;color:#8a7f6a}
.ptitle{font-family:'EB Garamond',serif;font-style:italic;font-size:15.5px;color:#2A2622;text-decoration:none}
.ptitle:hover{color:#C43C28}
.ptitle--static{pointer-events:none}

/* empty image slot (awaiting the author's assets) */
.slot{position:relative;background:#E3D9C0}

/* grids */
.grid6{display:grid;grid-template-columns:repeat(6,1fr);gap:22px;align-items:start}
.contents{display:grid;grid-template-columns:repeat(8,1fr);gap:16px}

/* home cover lockup */
.herolock{display:flex;flex-direction:column;gap:18px;max-width:600px;position:relative;left:157px}
.heroname{margin:0;font-family:'EB Garamond',serif;font-weight:400;font-size:84px;line-height:0.98;letter-spacing:0.09em;color:#E3AC38}
.hx{display:flex;flex-direction:column;gap:7px;text-decoration:none;opacity:0.82;transition:opacity 0.25s,transform 0.25s}
.hx:hover{opacity:1;transform:translateY(-2px)}

/* contact */
.mail{font-family:'EB Garamond',serif;font-size:31px;color:#2A2622;text-decoration:none;text-align:center;transition:color 0.2s}
.mail:hover{color:#C43C28}

/* writing index rows */
.wrow{display:flex;align-items:baseline;gap:24px;padding:24px 4px;border-bottom:1px solid rgba(239,229,206,0.13);text-decoration:none;transition:background 0.25s}
.wrow:hover{background:rgba(239,229,206,0.04)}

/* responsive safety (design is desktop-first) */
@media (max-width:900px){
  .about-grid{grid-template-columns:1fr !important;gap:34px !important}
  .herolock{left:0}
  .heroname{font-size:60px}
}
@media (max-width:820px){
  .grid6{grid-template-columns:repeat(2,1fr)}
  .grid6 .plate{grid-column:span 2 !important}
  .contents{grid-template-columns:repeat(4,1fr)}
}
@media (max-width:560px){
  .contents{grid-template-columns:repeat(2,1fr)}
  .heroname{font-size:48px}
  .wrow{flex-wrap:wrap;gap:8px}
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .plate,.hx,.mail,.wrow{transition:none}
}