/* ============================================================
   WINE GLASS — portfolio.css
   Editorial scroll portfolio (option B): her work laid directly
   on the page, over the immersive desk world. Dark wine + rose,
   matching the About page. Cream is gone with the notebook.
   ============================================================ */

.pf-main{ position: relative; z-index: 6; max-width: 1180px; margin: 0 auto;
  padding: 0 var(--gutter) 6rem; }

/* reveal (site.js adds .in) */
[data-reveal]{ opacity: 0; transform: translateY(20px); transition: opacity .8s ease, transform .8s var(--ease-out-expo); }
[data-reveal].in{ opacity: 1; transform: none; }

/* ---------- hero ---------- */
.pf-hero{ padding: 9rem 0 4rem; }
.pf-hero .eyebrow::before{ display: none; }
.pf-title{ font-family: var(--font-display-alt); font-weight: 800; text-transform: lowercase; font-size: clamp(3rem, 8vw, 6rem); line-height: 1.08; margin: 1.2rem 0 1.4rem; width: fit-content; max-width: 100%;
  padding: 0.04em 0.1em 0.16em 0;
  background: var(--grad-head); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.pf-title em{ font-style: normal; }
.pf-lead{ font-family: var(--font-ui); font-size: var(--t-lead); line-height: 1.6; color: var(--fg-dim); max-width: 46ch; }

/* ---------- work ---------- */
.pf-work{ display: flex; flex-direction: column; gap: 8.5rem; margin-top: 3rem; }
.pf-proj{ display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 2.6rem; align-items: center; }
.pf-proj.alt .pf-media{ order: 2; }

/* break the dead-center column: each project sits at its own width + offset */
.pf-proj:nth-child(1){ width: 92%; margin-right: auto; grid-template-columns: 1.15fr 0.85fr; }
.pf-proj:nth-child(2){ width: 84%; margin-left: auto; grid-template-columns: 0.82fr 1.18fr; }
.pf-proj:nth-child(3){ width: 88%; margin-right: auto; transform: translateX(-2%); }
.pf-proj:nth-child(4){ width: 80%; margin-left: auto; grid-template-columns: 0.86fr 1.14fr; }
.pf-proj:nth-child(odd) .pf-info{ padding-top: 1.4rem; }
.pf-proj:nth-child(even) .pf-info{ padding-bottom: 1.6rem; }

.pf-media{ position: relative; border-radius: 16px; overflow: hidden; aspect-ratio: 16/11;
  border: 1px solid rgba(240,192,204,0.22);
  box-shadow: 0 30px 60px -30px rgba(8,2,6,0.9), inset 0 0 0 1px rgba(255,255,255,0.03);
  background: #1a070f; }
.pf-media img, .pf-vid{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.pf-media:not(.is-video) img{ cursor: zoom-in; transition: transform .8s var(--ease-out-expo); }
.pf-media:not(.is-video):hover img{ transform: scale(1.04); }
.pf-vid{ background: #000; z-index: 2; }
.pf-thumb{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; z-index: 1; }
.pf-media.is-video{ background: linear-gradient(150deg,#3a1828,#24101c 55%,#7a2840); }
.pf-play{ position: absolute; inset: 0; display: grid; place-items: center; border: 0; cursor: pointer; color: #fff5f0; z-index: 3;
  background: linear-gradient(rgba(36,11,22,0.05), rgba(36,11,22,0.4)); transition: background .3s ease; }
.pf-play svg{ width: 56px; height: 56px; filter: drop-shadow(0 4px 14px rgba(0,0,0,0.6)); transition: transform .3s var(--ease-out-back); }
.pf-play:hover{ background: linear-gradient(rgba(36,11,22,0.0), rgba(36,11,22,0.3)); }
.pf-play:hover svg{ transform: scale(1.12); }
.pf-media.is-playing .pf-play{ display: none; }
.pf-fs{ position: absolute; top: 0.7rem; right: 0.7rem; z-index: 5; width: 38px; height: 38px; display: grid; place-items: center;
  border: 0; border-radius: 10px; cursor: pointer; color: #fff5f0; background: rgba(20,5,11,0.55); backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px); transition: background .25s ease, transform .25s var(--ease-out-back); }
.pf-fs:hover{ background: rgba(122,40,64,0.8); transform: scale(1.08); }
.pf-fs svg{ width: 18px; height: 18px; }
.pf-media:fullscreen{ aspect-ratio: auto; border: 0; border-radius: 0; }
.pf-media:fullscreen .pf-vid{ object-fit: contain; }

.pf-info{ display: flex; flex-direction: column; align-items: flex-start; gap: 0.9rem; }
.pf-logos{ display: flex; align-items: center; gap: 0.8rem; height: 22px; margin-bottom: 0.2rem; }
.pf-logos img{ height: 20px; width: auto; display: block; opacity: 0.95; }
.pf-logos .x{ font-family: var(--font-ui); font-style: normal; color: var(--accent); font-size: 1.1rem; }
.pf-eyebrow{ font-family: var(--font-ui); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent); }
.pf-name{ position: relative; font-family: var(--font-display-alt); font-weight: 700; text-transform: lowercase; font-size: clamp(1.4rem, 2.8vw, 2rem); line-height: 1.08; color: var(--fg); text-decoration: none; display: inline-block; }
.pf-scribble{ position: absolute; left: -1%; right: -1%; bottom: -0.12em; width: 102%; height: 0.42em; overflow: visible; pointer-events: none; }
.pf-scribble path{ stroke: var(--accent); stroke-width: 5; fill: none; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .7s var(--ease-out-expo); }
.pf-proj:hover .pf-scribble path{ stroke-dashoffset: 0; }
.pf-desc{ font-family: var(--font-ui); font-size: 1rem; line-height: 1.65; color: var(--fg-faint); max-width: 42ch; }
.pf-desc strong{ color: var(--rose-50); font-weight: 600; }

/* ---------- blocks (experience / off the clock / contact) ---------- */
.pf-block{ margin-top: 8rem; max-width: 760px; }
.pf-block:nth-of-type(odd){ margin-left: 0; }
.pf-block:nth-of-type(even){ margin-left: auto; margin-right: 0; text-align: left; }
.pf-sec-h{ font-family: var(--font-display-alt); font-weight: 700; text-transform: lowercase; letter-spacing: -0.01em; font-size: var(--t-h2); line-height: 1.06; margin: 0 0 2rem; color: var(--fg); }
.pf-sec-h em{ display: inline-block; padding: 0 0.14em 0.08em 0; font-style: normal; background: var(--grad-head-soft); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

.pf-xp{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.pf-xp li{ display: grid; grid-template-columns: auto 1fr; gap: 1.1rem; padding: 1.4rem 0; align-items: baseline; border-top: 1px solid rgba(240,192,204,0.12); }
.pf-xp li:first-child{ border-top: 0; }
.pf-dot{ width: 9px; height: 9px; margin-top: 0.4rem; border-radius: 50%; background: radial-gradient(circle at 30% 30%, #fbe0e9, var(--accent)); box-shadow: 0 0 0 4px rgba(196,116,139,0.12); }
.pf-xp-role{ font-family: var(--font-display-alt); font-weight: 600; text-transform: lowercase; font-size: 1.1rem; color: var(--fg); margin: 0; }
.pf-xp-meta{ font-family: var(--font-ui); font-size: 0.9rem; color: var(--fg-faint); margin: 0.3rem 0 0; letter-spacing: 0.02em; }

.pf-check{ list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.8rem; }
.pf-chip{ font-family: var(--font-ui); font-size: 0.95rem; color: var(--rose-50); padding: 0.6rem 1.2rem; border-radius: var(--r-pill);
  background: rgba(196,116,139,0.12); border: 1px solid rgba(240,192,204,0.26); }

.pf-contact .pf-lead{ margin-bottom: 2rem; }
.pf-links{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1rem; }
.pf-link{ display: inline-flex; align-items: center; gap: 0.7rem; font-family: var(--font-ui); font-size: 1.05rem; color: var(--fg); text-decoration: none; width: max-content; transition: color .3s ease; }
.pf-link svg{ width: 20px; height: 20px; color: var(--accent); }
.pf-link:hover{ color: var(--accent-bright); }
.pf-sig{ margin-top: 2.4rem; font-family: var(--font-display-alt); font-weight: 600; text-transform: lowercase; font-style: normal; font-size: 1.05rem; color: var(--accent); }

@media(max-width: 820px){
  .pf-proj{ grid-template-columns: 1fr !important; gap: 1.4rem; width: 100% !important; margin: 0 !important; transform: none !important; }
  .pf-proj.alt .pf-media{ order: 0; }
  .pf-proj .pf-info{ padding: 0 !important; }
  .pf-block{ max-width: 100%; margin-left: 0 !important; margin-right: 0 !important; }
  .pf-hero{ padding-top: 7.5rem; }
}
@media(prefers-reduced-motion: reduce){
  [data-reveal]{ opacity: 1; transform: none; transition: none; }
  .pf-scribble path{ stroke-dashoffset: 0; }
}