/* ============================================================
   De La Paz — Portfolio
   Design tokens: dark charcoal ground, gold accent, serif display
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Pirata+One&family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Inter:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700&family=Raleway:wght@400;500;600;700&display=swap');

:root{
  color-scheme: dark;

  --bg: #0a0908;
  --bg-raised: #120f0b;
  --panel: #15110c;
  --card: #181209;
  --card-hover: #1e1810;
  --border: #2a2318;
  --border-soft: #1e1812;

  --text: #ece6da;
  --text-dim: #a89d8c;
  --text-faint: #958b7b;

  --gold: #d9ac54;
  --gold-bright: #f0c878;
  --gold-dim: #8a6a34;

  --secureid: #d9ac54;
  --honda: #e27d5a;
  --devtective: #9c8be8;
  --vextaro: #5aa3c9;

  --ok: #7cb88a;
  --radius: 14px;
  --radius-sm: 8px;
  --measure: 68ch;

  --shadow-card: 0 1px 0 rgba(255,255,255,0.03) inset, 0 14px 30px -18px rgba(0,0,0,0.65);
  --shadow-pop: 0 1px 0 rgba(255,255,255,0.04) inset, 0 24px 48px -20px rgba(0,0,0,0.75);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:
    radial-gradient(900px 500px at 85% -10%, rgba(217,172,84,0.07), transparent 60%),
    radial-gradient(700px 400px at -10% 20%, rgba(217,172,84,0.04), transparent 55%),
    var(--bg);
  color:var(--text);
  font-family:'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}

::selection{ background:var(--gold); color:#1a1408; }

::-webkit-scrollbar{ height:10px; width:10px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background:var(--border); border-radius:10px; border:2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover{ background:var(--gold-dim); }

a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }

:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:3px;
  border-radius:4px;
}

h1,h2,h3,h4{
  font-family:'EB Garamond', Georgia, serif;
  font-weight:600;
  letter-spacing:-0.01em;
  margin:0;
  color:#fbf7ee;
}

.wordmark{ font-family:'Pirata One', serif; letter-spacing:0.02em; }

.container{
  max-width:1180px;
  margin:0 auto;
  padding:0 32px;
}

.overline{
  font-family:'Inter', sans-serif;
  font-size:12px;
  font-weight:600;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--gold);
}

.lede{ color:var(--text-dim); max-width:var(--measure); font-size:17px; }

.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:11px 20px;
  border-radius:999px;
  font-size:14px;
  font-weight:600;
  border:1px solid var(--border);
  background:var(--panel);
  color:var(--text);
  cursor:pointer;
  transition:border-color .18s ease, background .18s ease, transform .18s ease;
}
.btn:hover{ border-color:var(--gold-dim); background:var(--card-hover); transform:translateY(-1px); }
.btn-primary{ background:var(--gold); border-color:var(--gold); color:#1a1408; }
.btn-primary:hover{ background:var(--gold-bright); border-color:var(--gold-bright); }
.btn svg{ width:15px; height:15px; }

/* mobile bottom-tab scrollable strip, echoes the Figma Slides tab UI */
.mobile-tabs{
  display:none;
  position:sticky; top:64px; z-index:40;
  gap:6px; padding:10px 16px;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  background:rgba(10,9,8,0.9);
  border-bottom:1px solid var(--border-soft);
  scrollbar-width:none;
}
.mobile-tabs::-webkit-scrollbar{ display:none; }
.mobile-tabs a{
  flex:none;
  padding:7px 13px; border-radius:999px; font-size:13px; font-weight:500;
  border:1px solid var(--border); color:var(--text-dim);
}
.mobile-tabs a.active{ background:var(--gold); border-color:var(--gold); color:#1a1408; }
@media(max-width:620px){ .mobile-tabs{ display:flex; } }

/* ---------- hero ---------- */
.hero{ padding:72px 0 56px; }
@media(max-width:620px){ .hero{ padding:40px 0 32px; } }

.hero .overline{ display:flex; align-items:center; gap:10px; }
.hero .overline::after{ content:""; height:1px; flex:1; background:var(--border); }

.hero h1{
  font-size:clamp(32px, 5.2vw, 56px);
  line-height:1.1;
  margin:18px 0 20px;
  max-width:16ch;
}
.hero h1 em{ font-style:italic; color:var(--gold-bright); }

.hero .lede{ font-size:19px; margin-bottom:28px; }
.hero .actions{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom:40px; }

.status-row{
  display:flex; align-items:center; gap:14px;
  padding:8px 8px 8px 8px; border-top:1px solid var(--border-soft); padding-top:20px;
  flex-wrap:wrap;
}
.status-row .label{ font-size:12px; color:var(--text-faint); text-transform:uppercase; letter-spacing:.1em; }

/* ---------- internship strip (feedback: surface internships high) ---------- */
.internships{ padding:0 0 64px; }
.internships-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:16px;
}
@media(max-width:760px){ .internships-grid{ grid-template-columns:1fr; } }

.intern-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:22px 24px;
  box-shadow:var(--shadow-card);
}
.intern-card .top{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px; }
.intern-card .org{ font-family:'EB Garamond', serif; font-size:19px; font-weight:600; color:#fbf7ee; }
.intern-card .when{ font-size:12px; color:var(--text-faint); white-space:nowrap; }
.intern-card .title{ font-size:13px; color:var(--gold); font-weight:600; margin-bottom:12px; }
.intern-card p{ margin:0; font-size:14.5px; color:var(--text-dim); }
.intern-card .status-pill{
  display:inline-flex; align-items:center; gap:6px;
  font-size:11px; font-weight:600; letter-spacing:.04em;
  color:var(--ok); margin-top:14px;
}
.intern-card .status-pill::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--ok); }

/* ---------- section scaffolding ---------- */
.section{ padding:56px 0; }
.section-head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:20px;
  margin-bottom:28px; flex-wrap:wrap;
}
.section-head h2{ font-size:28px; }
.section-head .count{ font-size:13px; color:var(--text-faint); }

/* ---------- project cards (feedback: role/problem/contribution visible) ---------- */
.card-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:18px;
}
@media(max-width:860px){ .card-grid{ grid-template-columns:1fr; } }

/* mobile: current works row stays horizontally scrollable, per request */
.scroll-row{
  display:flex; gap:14px; overflow-x:auto; padding-bottom:6px;
  scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
}
.scroll-row .proj-card{ scroll-snap-align:start; flex:0 0 86%; }
@media(min-width:620px){ .scroll-row{ display:none; } }
.card-grid.desktop-only{ display:none; }
@media(min-width:620px){ .card-grid.desktop-only{ display:grid; } }

.proj-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow-card);
  transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease;
  display:flex; flex-direction:column;
}
.proj-card:hover{ border-color:var(--accent,var(--gold-dim)); transform:translateY(-3px); box-shadow:var(--shadow-pop); }

.proj-card .thumb{
  height:150px;
  display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(120% 140% at 20% 0%, color-mix(in srgb, var(--accent,#d9ac54) 22%, transparent), transparent 60%),
    var(--bg-raised);
  border-bottom:1px solid var(--border-soft);
  position:relative;
}
.proj-card .thumb .tag-corner{
  position:absolute; top:12px; left:12px;
  font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--accent,var(--gold));
  background:color-mix(in srgb, var(--accent,#d9ac54) 16%, #0a0908 84%);
  border:1px solid color-mix(in srgb, var(--accent,#d9ac54) 45%, transparent);
  padding:4px 9px; border-radius:999px;
}
.proj-card .thumb svg{ width:46px; height:46px; color:var(--accent,var(--gold)); }

.proj-card .body{ padding:18px 20px 20px; display:flex; flex-direction:column; gap:12px; flex:1; }
.proj-card h3{ font-size:18px; line-height:1.25; }

.proj-card .meta-row{
  display:grid; grid-template-columns:auto 1fr; gap:4px 10px;
  font-size:13px;
}
.proj-card .meta-row dt{ color:var(--text-faint); font-weight:500; }
.proj-card .meta-row dd{ margin:0; color:var(--text-dim); }
.proj-card .meta-row dd strong{ color:var(--text); font-weight:600; }

.proj-card .desc{ font-size:13.5px; color:var(--text-dim); margin:0; }

.proj-card .tags{ display:flex; flex-wrap:wrap; gap:6px; margin-top:auto; padding-top:4px; }
.proj-card .tags span{
  font-size:11px; font-weight:600; letter-spacing:.02em;
  padding:4px 9px; border-radius:999px;
  border:1px solid var(--border); color:var(--text-dim);
}

.proj-card .viewlink{
  display:flex; align-items:center; justify-content:space-between;
  padding:13px 20px; border-top:1px solid var(--border-soft);
  font-size:13px; font-weight:600; color:var(--text);
}
.proj-card .viewlink svg{ width:14px; height:14px; transition:transform .18s ease; }
.proj-card:hover .viewlink svg{ transform:translateX(3px); }

/* ---------- about ---------- */
.about-grid{ display:grid; grid-template-columns:1fr 1.4fr; gap:40px; align-items:start; }
@media(max-width:760px){ .about-grid{ grid-template-columns:1fr; gap:24px; } }
.about-grid .skills{ display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }
.about-grid .skills span{ font-size:12.5px; padding:6px 11px; border:1px solid var(--border); border-radius:999px; color:var(--text-dim); }

/* ---------- footer ---------- */
footer{ border-top:1px solid var(--border-soft); padding:32px 0 48px; }
footer .foot-row{ display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; }
footer .foot-links{ display:flex; gap:18px; font-size:13.5px; color:var(--text-dim); }
footer .foot-links a:hover{ color:var(--gold); }
footer .copyright{ font-size:12.5px; color:var(--text-faint); }

/* ============================================================
   Case-study page
   ============================================================ */
.cs-hero{
  padding:48px 0 40px;
  border-bottom:1px solid var(--border-soft);
  background:
    radial-gradient(800px 360px at 90% -20%, color-mix(in srgb, var(--accent,#d9ac54) 10%, transparent), transparent 60%);
}
.breadcrumb{ font-size:12.5px; color:var(--text-faint); margin-bottom:16px; }
.breadcrumb a:hover{ color:var(--gold); }
.cs-hero h1{ font-size:clamp(30px,4.6vw,46px); margin-bottom:10px; }
.cs-hero .tagline{ font-size:17px; color:var(--text-dim); max-width:var(--measure); margin-bottom:26px; }

.cs-meta{
  display:grid; grid-template-columns:repeat(4,1fr); gap:20px;
  padding-top:22px; border-top:1px solid var(--border-soft);
}
@media(max-width:700px){ .cs-meta{ grid-template-columns:repeat(2,1fr); } }
.cs-meta dt{ font-size:11px; text-transform:uppercase; letter-spacing:.1em; color:var(--text-faint); margin-bottom:4px; }
.cs-meta dd{ margin:0; font-size:14.5px; font-weight:600; color:var(--text); }

.cs-badge-row{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:24px; }
.cs-badge-row span{
  font-size:11.5px; font-weight:600; padding:5px 11px; border-radius:999px;
  border:1px solid color-mix(in srgb, var(--accent,#d9ac54) 45%, var(--border) 55%);
  color:var(--accent,var(--gold));
  background:color-mix(in srgb, var(--accent,#d9ac54) 10%, transparent);
}

.cs-body{ padding:48px 0; }
.cs-section{ max-width:var(--measure); margin:0 0 56px; }
.cs-section:last-child{ margin-bottom:0; }
.cs-section .num{ font-size:12px; color:var(--accent,var(--gold)); font-weight:700; letter-spacing:.1em; margin-bottom:8px; display:block; }
.cs-section h2{ font-size:26px; margin-bottom:14px; }
.cs-section p{ color:var(--text-dim); margin:0 0 14px; font-size:16px; }
.cs-section ul{ margin:0 0 14px; padding-left:20px; color:var(--text-dim); font-size:15.5px; }
.cs-section li{ margin-bottom:8px; }

/* Figma Slides-style case-study workspace */
.case-study-page{ height:100vh; overflow:hidden; background:#0e0e0e; }
.case-study-page .workspace-toolbar{ height:48px; padding:0 16px; border-radius:0; }
.case-study-page .workspace-shell{ height:calc(100vh - 48px); min-height:0; }
.case-study-page .workspace-main{ min-height:0; display:flex; flex-direction:column; }
.presentation-shell{ min-height:0; flex:1; display:grid; grid-template-columns:182px minmax(0,1fr); background:#0b0b0b; }
.presentation-rail{ min-height:0; overflow-y:auto; padding:16px 12px; border-right:1px solid #292929; background:#111; }
.presentation-thumb{ display:grid; grid-template-columns:18px 1fr; grid-template-rows:auto auto; gap:3px 7px; width:100%; min-height:72px; margin:0 0 8px; padding:9px 8px; text-align:left; border:1px solid #2b2b2b; border-radius:4px; color:#d9d3ca; background:#151515; cursor:pointer; }
.presentation-thumb > span{ grid-row:1 / -1; color:#aaa39b; font-size:10px; }.presentation-thumb strong{ overflow:hidden; font:600 10px/1.2 Raleway, sans-serif; white-space:nowrap; text-overflow:ellipsis; }.presentation-thumb small{ color:#aaa39b; font-size:7px; letter-spacing:.06em; text-align:right; }.presentation-thumb:hover,.presentation-thumb.is-active{ border-color:var(--gold); background:#201d16; }.presentation-thumb.is-active > span,.presentation-thumb.is-active strong{ color:var(--gold-bright); }
.presentation-canvas{ min-width:0; min-height:0; display:flex; align-items:center; justify-content:center; padding:28px 36px; overflow:hidden; background:#0b0b0b; }
.presentation-slide{ display:none; width:min(100%,1140px); height:min(100%,640px); overflow:auto; margin:0; padding:42px 48px; border:1px solid #2b2b2b; background:#101010; }
.presentation-slide.presentation-cover{ display:none; grid-template-columns:minmax(0,1.1fr) minmax(280px,.8fr); gap:28px; align-items:start; padding:20px; overflow:hidden; }.presentation-slide.presentation-cover.is-active{ display:grid; }.presentation-cover-visual{ min-height:330px; display:grid; place-items:center; overflow:hidden; border:1px solid #2b2b2b; background:#171512; }.presentation-cover-visual img{ width:100%; height:100%; max-height:330px; object-fit:contain; padding:20px; }.presentation-cover-visual .cover-mark{ color:var(--accent,var(--gold)); font:600 clamp(54px,8vw,92px) 'EB Garamond',serif; letter-spacing:-.04em; }.presentation-cover-copy{ min-width:0; padding:8px 0; }.presentation-cover-copy .breadcrumb{ margin-bottom:20px; }.presentation-cover-copy h1{ margin:0 0 10px; font-family:'EB Garamond',serif; font-size:clamp(34px,4vw,58px); letter-spacing:-.03em; }.presentation-cover-copy .tagline{ max-width:42ch; font-size:14px; line-height:1.55; }.presentation-cover-copy .cs-meta{ margin-top:22px; }.presentation-cover-copy .cs-badge-row{ margin-bottom:12px; }.presentation-cover-copy .num{ display:none; }
.presentation-slide.is-active{ display:block; animation:presentation-in .25s ease both; }.presentation-slide .container{ width:auto; max-width:none; }.presentation-slide.cs-hero{ border-bottom:1px solid #2b2b2b; }.presentation-slide .cs-body{ padding:0; }.presentation-slide .cs-section{ max-width:760px; margin:0; }.presentation-slide .cs-section h2{ font-size:clamp(26px,3.2vw,44px); }.presentation-slide .cs-section p,.presentation-slide .cs-section ul{ font-size:15px; }.presentation-slide .breadcrumb{ margin-bottom:24px; }.presentation-slide .cs-hero{ padding:0; }.presentation-controls{ display:flex; align-items:center; gap:10px; height:48px; padding:0 24px; border-top:1px solid #292929; background:#111; }.presentation-controls button{ width:30px; height:30px; border:1px solid #3a3530; border-radius:4px; color:#f0ede8; background:#171717; cursor:pointer; }.presentation-controls button:hover:not(:disabled){ border-color:var(--gold); color:var(--gold-bright); }.presentation-controls button:disabled{ opacity:.35; cursor:not-allowed; }.presentation-progress{ width:160px; height:2px; background:#292929; }.presentation-progress span{ display:block; height:100%; width:0; background:var(--gold); transition:width .2s ease; }.present-button{ margin-left:auto; width:auto!important; padding:0 12px; color:#17130b!important; background:var(--gold)!important; border-color:var(--gold)!important; font-size:11px; font-weight:700; }.case-study-page.is-presenting .workspace-toolbar,.case-study-page.is-presenting .workspace-rail,.case-study-page.is-presenting .presentation-rail,.case-study-page.is-presenting .presentation-controls{ display:none; }.case-study-page.is-presenting .workspace-shell{ height:100vh; }.case-study-page.is-presenting .presentation-canvas{ padding:0; }.case-study-page.is-presenting .presentation-slide{ width:100%; height:100%; max-width:none; border:0; }
.presentation-note{ display:none; align-items:center; justify-content:center; color:var(--text-dim); }.presentation-note.is-active{ display:flex; }.presentation-note .note-box{ max-width:680px; margin:0; }
@keyframes presentation-in{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
@media(max-width:700px){ .case-study-page{ overflow:auto; height:auto; min-height:100vh; }.case-study-page .workspace-toolbar{ height:56px; }.case-study-page .workspace-shell{ height:calc(100vh - 56px); min-height:600px; }.case-study-deck{ grid-template-columns:84px minmax(0,1fr); }.case-study-deck .hero-rail{ padding:10px 7px; }.case-study-deck .hero-thumb{ min-height:62px; grid-template-columns:1fr; gap:3px; padding:7px; }.case-study-deck .hero-thumb span{ grid-row:auto; }.case-study-deck .hero-thumb strong{ font-size:8px; white-space:normal; }.case-study-deck .hero-thumb small{ display:none; }.case-study-deck .hero-canvas{ padding:10px; }.case-study-deck .case-study-slide{ height:100%; padding:24px 20px; }.case-study-deck .case-study-slide.presentation-cover{ grid-template-columns:1fr; gap:14px; padding:12px; overflow:auto; }.presentation-cover-visual{ min-height:150px; }.presentation-cover-visual img{ max-height:170px; padding:12px; }.presentation-cover-copy{ padding:4px 8px; }.presentation-cover-copy h1{ font-size:34px; }.case-study-deck .case-study-slide .cs-hero h1{ font-size:34px; }.case-study-deck .case-study-slide .cs-section h2{ font-size:26px; }.case-study-deck .case-study-slide .cs-section p,.case-study-deck .case-study-slide .cs-section ul{ font-size:14px; }.case-study-deck .hero-controls{ padding:0 10px; }.case-study-deck .hero-progress{ flex:1; }.case-study-deck .hero-hint{ display:none; } }

/* research -> decision -> evaluation chain (feedback: connect reasoning) */
.reasoning-chain{
  display:flex; flex-direction:column; gap:0;
  border:1px solid var(--border); border-radius:var(--radius);
  overflow:hidden; background:var(--card); margin:18px 0 4px;
}
.chain-step{ display:grid; grid-template-columns:120px 1fr; gap:4px 18px; padding:18px 20px; }
.chain-step + .chain-step{ border-top:1px solid var(--border-soft); }
.chain-step .k{ font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--accent,var(--gold)); }
.chain-step .v{ font-size:14.5px; color:var(--text); line-height:1.55; }
.chain-step .v b{ color:var(--gold-bright); font-weight:600; }
@media(max-width:560px){ .chain-step{ grid-template-columns:1fr; } }

.quote-block{
  border-left:3px solid var(--accent,var(--gold));
  padding:4px 0 4px 20px; margin:20px 0;
  font-family:'EB Garamond', serif; font-size:20px; font-style:italic;
  color:#f3ead9;
}
.quote-block cite{ display:block; font-style:normal; font-family:'Inter',sans-serif; font-size:12.5px; color:var(--text-faint); margin-top:8px; }

.impact-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:18px 0; }
@media(max-width:700px){ .impact-grid{ grid-template-columns:1fr 1fr; } }
.impact-stat{ border:1px solid var(--border); border-radius:var(--radius-sm); padding:16px; background:var(--card); }
.impact-stat .n{ font-family:'EB Garamond', serif; font-size:26px; color:var(--accent,var(--gold-bright)); }
.impact-stat .l{ font-size:12px; color:var(--text-faint); margin-top:4px; }

.cs-nav-footer{
  display:flex; justify-content:space-between; gap:16px;
  padding-top:32px; margin-top:8px; border-top:1px solid var(--border-soft);
  max-width:var(--measure);
}
.cs-nav-footer a{ font-size:13.5px; color:var(--text-dim); font-weight:600; }
.cs-nav-footer a:hover{ color:var(--gold); }

.note-box{
  border:1px dashed var(--border); border-radius:var(--radius-sm);
  padding:14px 16px; font-size:13.5px; color:var(--text-faint);
  margin:18px 0;
}

/* ---------- portfolio slideshow ---------- */
.portfolio{ min-height:calc(100vh - 64px); position:relative; overflow:hidden; }
.slides{ min-height:calc(100vh - 140px); position:relative; }
.slide{ display:none; width:min(1180px,100%); min-height:calc(100vh - 140px); margin:0 auto; padding:clamp(46px,8vh,100px) 32px 56px; align-items:center; grid-template-columns:minmax(0,1fr) minmax(280px, .82fr); gap:clamp(36px,8vw,120px); }
.slide.is-active{ display:grid; animation:slide-in .45s ease both; }
@keyframes slide-in{ from{ opacity:0; transform:translateX(22px); } to{ opacity:1; transform:none; } }
.slide-copy{ max-width:600px; }
.slide h1,.slide h2{ font-size:clamp(44px,6.5vw,84px); line-height:.96; margin:22px 0 26px; max-width:9ch; }
.slide h2{ font-size:clamp(42px,5.7vw,72px); }
.slide h1 em,.slide h2 em{ color:var(--gold-bright); font-style:italic; }
.slide .lede{ font-size:clamp(16px,1.45vw,19px); max-width:52ch; }
.slide-actions{ display:flex; gap:12px; flex-wrap:wrap; margin:30px 0; }
.availability{ color:var(--text-faint); font-size:13px; display:flex; align-items:center; gap:9px; }
.status-dot{ width:7px; height:7px; background:var(--ok); border-radius:50%; box-shadow:0 0 0 4px rgba(124,184,138,.1); }
.experience-note{ display:grid; grid-template-columns:auto 1fr; gap:2px 12px; max-width:440px; margin-top:26px; padding:14px 16px; border-left:2px solid var(--gold-dim); background:rgba(217,172,84,.04); }
.experience-note .overline{ grid-row:1 / span 2; writing-mode:vertical-rl; transform:rotate(180deg); font-size:9px; letter-spacing:.12em; }
.experience-note strong{ font-size:13px; color:var(--text); font-weight:600; }
.experience-note > span:last-child{ color:var(--text-faint); font-size:12px; }
.slide-kicker{ color:var(--text); font:500 20px/1.3 'EB Garamond',serif; max-width:32ch; margin:-8px 0 18px; }
.slide-meta{ border-top:1px solid var(--border); margin:28px 0 24px; padding-top:16px; display:flex; gap:28px; flex-wrap:wrap; }
.slide-meta div{ min-width:150px; }
.slide-meta dt{ color:var(--text-faint); font-size:11px; letter-spacing:.1em; text-transform:uppercase; }
.slide-meta dd{ color:var(--text-dim); font-size:13px; margin:4px 0 0; }
.text-link{ display:inline-flex; gap:10px; color:var(--gold-bright); font-size:14px; font-weight:600; border-bottom:1px solid var(--gold-dim); padding-bottom:5px; }
.text-link span{ transition:transform .18s ease; }
.text-link:hover span{ transform:translate(3px,-3px); }
.slide-art{ min-height:clamp(300px,48vh,540px); position:relative; border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-pop); background:var(--panel); }
.slide-art::before,.slide-art::after{ content:""; position:absolute; border-radius:50%; filter:blur(1px); }
.art-intro{ flex-direction:column; align-items:flex-start; padding:clamp(25px,5vw,65px); gap:4px; background:linear-gradient(145deg,#17120c,#0d0c0a); }
.art-intro::before{ width:300px; height:300px; right:-80px; top:-60px; background:rgba(217,172,84,.15); }
.art-intro span{ position:relative; z-index:1; font:italic clamp(32px,4vw,58px)/.95 'EB Garamond',serif; color:var(--gold-bright); }
.art-intro span:nth-child(2){ margin-left:18%; color:var(--text); }.art-intro span:nth-child(3){ margin-left:36%; }
.art-label{ position:absolute; top:22px; left:24px; color:var(--text-faint); font-size:11px; letter-spacing:.14em; }
.art-caption{ position:absolute; bottom:22px; left:24px; color:var(--text); font:italic 24px 'EB Garamond',serif; }
.art-vextaro{ background:radial-gradient(circle at 65% 40%,rgba(90,163,201,.3),transparent 38%),#0e171b; }
.art-dress{ width:42%; height:62%; border:1px solid rgba(139,207,235,.7); clip-path:polygon(30% 0,70% 0,80% 24%,100% 100%,0 100%,20% 24%); background:linear-gradient(110deg,transparent 45%,rgba(90,163,201,.5)); transform:rotate(8deg); }
.art-devtective{ background:radial-gradient(circle at center,rgba(143,123,214,.28),transparent 45%),#110f19; }
.art-orbit{ width:45%; aspect-ratio:1; border:1px solid #aa9be8; border-radius:50%; transform:rotate(-28deg); box-shadow:0 0 0 18px rgba(143,123,214,.08),0 0 0 45px rgba(143,123,214,.05); }
.art-orbit::after{ content:""; display:block; width:14px; height:14px; background:#c5baf3; border-radius:50%; margin:7% 0 0 78%; box-shadow:0 3px 12px rgba(0,0,0,.45); }
.art-secureid{ background:radial-gradient(circle at 50% 42%,rgba(217,172,84,.22),transparent 40%),#171208; }
.art-lock{ width:120px; height:120px; border:1px solid var(--gold); border-radius:50%; color:var(--gold-bright); display:grid; place-items:center; font:300 54px 'EB Garamond'; box-shadow:0 0 0 26px rgba(217,172,84,.06),0 0 0 52px rgba(217,172,84,.03); }
.art-honda{ background:radial-gradient(circle at 60% 40%,rgba(226,125,90,.26),transparent 40%),#1b110e; }
.art-target{ width:150px; height:150px; border:1px solid #e27d5a; border-radius:50%; box-shadow:inset 0 0 0 22px rgba(226,125,90,.08),inset 0 0 0 48px rgba(226,125,90,.08); }
.art-target::after{ content:""; display:block; width:24px; height:24px; background:#e27d5a; border-radius:50%; margin:62px auto; }
.art-about{ flex-direction:column; align-items:flex-start; padding:48px; background:linear-gradient(145deg,#20190f,#0e0c09); }
.art-about span{ color:var(--text-dim); font-size:15px; }.art-about strong{ font:600 clamp(42px,5vw,68px)/.9 'EB Garamond',serif; color:var(--gold-bright); }.art-about small{ margin-top:16px; color:var(--text-faint); }
.skills{ display:flex; flex-wrap:wrap; gap:8px; margin:24px 0 6px; }.skills span{ border:1px solid var(--border); border-radius:999px; color:var(--text-dim); padding:6px 11px; font-size:12px; }
.work-overview{ padding:54px 32px 20px; }
.work-overview .section-head{ margin-bottom:20px; }
.work-overview h2{ font-size:clamp(28px,4vw,38px); margin-top:6px; }
.recent-work{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.recent-card{ min-height:220px; display:flex; flex-direction:column; padding:18px; border:1px solid var(--border); border-radius:var(--radius); background:var(--card); box-shadow:var(--shadow-card); transition:transform .2s ease,border-color .2s ease,background .2s ease; }
.recent-card:hover{ transform:translateY(-3px); border-color:var(--accent,var(--gold-dim)); background:var(--card-hover); }
.recent-card::before{ content:""; height:3px; width:34px; border-radius:4px; background:var(--recent-accent,var(--gold)); margin-bottom:30px; }
.recent-card h3{ font-size:24px; margin-bottom:6px; }
.recent-card p{ color:var(--text-dim); font-size:13px; line-height:1.45; margin:0; }
.recent-index{ color:var(--recent-accent,var(--gold)); font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
.recent-link{ display:flex; justify-content:space-between; margin-top:auto; padding-top:22px; color:var(--text); font-size:12px; font-weight:600; }
.recent-vextaro{ --recent-accent:var(--vextaro); }.recent-secureid{ --recent-accent:var(--secureid); }.recent-devtective{ --recent-accent:var(--devtective); }.recent-honda{ --recent-accent:var(--honda); }
.slide-progress{ position:absolute; z-index:2; top:0; left:0; width:100%; height:2px; background:var(--border-soft); }.slide-progress span{ display:block; height:100%; width:16.66%; background:var(--gold); transition:width .35s ease; }
.slide-controls{ width:min(1180px,100%); margin:0 auto; padding:0 32px 24px; display:flex; align-items:center; gap:12px; }.slide-arrow{ width:38px; height:38px; border:1px solid var(--border); border-radius:50%; color:var(--text); background:transparent; cursor:pointer; font-size:18px; }.slide-arrow:hover{ border-color:var(--gold); color:var(--gold-bright); }.slide-dots{ display:flex; gap:7px; }.slide-dot{ width:28px; height:3px; border:0; background:var(--border); cursor:pointer; }.slide-dot.is-active{ background:var(--gold); }.slide-hint{ color:var(--text-faint); font-size:11px; margin-left:auto; }
@media(max-width:760px){ .slide{ min-height:calc(100vh - 170px); grid-template-columns:1fr; gap:28px; padding-top:50px; }.slide-art{ min-height:220px; max-height:280px; order:-1; }.slide-copy{ order:1; }.slide h1,.slide h2{ margin:14px 0 18px; }.slide .lede{ font-size:16px; }.slide-meta{ gap:14px; margin-top:20px; }.slide-controls{ padding-bottom:16px; }.slide-hint{ display:none; }.art-about{ padding:28px; }.art-about strong{ font-size:46px; } }
@media(max-width:900px){ .recent-work{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:620px){ .portfolio{ min-height:calc(100vh - 116px); }.slides,.slide{ min-height:calc(100vh - 210px); }.slide{ padding:26px 20px 24px; gap:18px; }.slide-art{ min-height:156px; max-height:190px; }.slide h1,.slide h2{ font-size:clamp(34px,10vw,50px); line-height:.98; margin:10px 0 14px; }.slide-kicker{ font-size:17px; margin-bottom:12px; }.slide .lede{ font-size:14px; line-height:1.5; }.slide-actions{ margin:20px 0; gap:8px; }.slide-actions .btn{ padding:9px 15px; font-size:13px; }.experience-note{ margin-top:18px; }.slide-meta{ margin:16px 0 18px; padding-top:12px; }.slide-meta dd{ font-size:12px; }.slide-controls{ padding-left:20px; padding-right:20px; }.work-overview{ padding:42px 20px 12px; }.work-overview .section-head{ align-items:flex-start; gap:8px; }.work-overview .count{ font-size:11px; }.recent-work{ display:flex; overflow-x:auto; gap:12px; padding:2px 0 12px; scroll-snap-type:x mandatory; scrollbar-width:none; }.recent-work::-webkit-scrollbar{ display:none; }.recent-card{ flex:0 0 78%; min-height:190px; scroll-snap-align:start; padding:16px; }.recent-card::before{ margin-bottom:22px; }.recent-card h3{ font-size:22px; }.internships{ padding-top:38px; }.internships-grid{ gap:12px; }.intern-card{ padding:17px; }.intern-card p{ font-size:13px; } }
@media(prefers-reduced-motion:reduce){ .slide.is-active{ animation:none; } }

/* ---------- tabbed portfolio workspace ---------- */
.workspace-tab-list{ display:flex; align-items:stretch; min-width:0; overflow-x:auto; scrollbar-width:none; }
.workspace-tab-list::-webkit-scrollbar{ display:none; }
.workspace-tab{ display:flex; align-items:center; gap:8px; min-width:132px; padding:0 16px; border:0; border-right:1px solid #252525; color:#817b75; background:#0e0e0e; font:12px Raleway,sans-serif; white-space:nowrap; cursor:pointer; }
.workspace-tab:hover{ color:#f0ede8; background:#141414; }
.workspace-tab.is-active{ color:#f0ede8; background:#141414; border-bottom:2px solid #c9a84c; }
.workspace-tab b{ margin-left:auto; color:#aaa39b; font-size:16px; font-weight:400; }
.workspace-file{ display:none; width:100%; height:100%; min-height:0; }
.workspace-file.is-visible{ display:block; }
.workspace-content{ max-width:none; height:100%; }
.home-content{ display:flex; flex-direction:column; }
.home-welcome{ max-width:720px; margin:38px 0 34px; padding:28px 0; border-top:1px solid #292929; border-bottom:1px solid #292929; }
.home-welcome h2{ margin:10px 0 8px; font-size:30px; }
.home-welcome p{ max-width:58ch; margin:0 0 18px; color:#aaa39b; }
.text-action{ padding:0; border:0; background:none; color:#c9a84c; font:600 13px Raleway,sans-serif; cursor:pointer; }
.text-action span{ margin-left:8px; }
.home-file-links{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; max-width:720px; }
.home-file-links button{ display:grid; grid-template-columns:24px 1fr auto; grid-template-rows:auto auto; gap:3px 10px; padding:17px; border:1px solid #292929; border-radius:8px; color:#f0ede8; background:#151515; text-align:left; cursor:pointer; }
.home-file-links button:hover{ border-color:#c9a84c; background:#201d16; }
.home-file-links button span{ grid-row:1 / -1; color:#c9a84c; font-size:20px; }
.home-file-links button strong{ font:600 15px Cinzel,serif; }
.home-file-links button small{ color:#aaa39b; font-size:11px; }
.home-file-links button b{ grid-column:3; grid-row:1 / -1; align-self:center; color:#c9a84c; font-size:18px; }
.page-heading{ display:flex; align-items:end; justify-content:space-between; gap:24px; padding-bottom:25px; border-bottom:1px solid #292929; }
.page-heading h1{ margin:9px 0 8px; font-size:clamp(28px,3vw,42px); }
.page-heading p{ max-width:54ch; margin:0; color:#aaa39b; }
.page-heading .search-chip{ flex:0 0 240px; }
.workspace-file .file-section-heading{ margin-top:26px; }
.workspace-file .project-grid{ padding-bottom:30px; }
.case-file{ background:#0e0e0e; }
.case-file iframe{ width:100%; height:100%; border:0; display:block; background:#0e0e0e; }
.toolbar-button{ display:inline-flex; align-items:center; gap:7px; text-decoration:none; }
.toolbar-button img{ width:14px; height:14px; object-fit:contain; filter:brightness(0); }

/* Hero file matches the fixed-size Slides canvas from Portfolio-V2. */
.hero-workspace{ display:grid; grid-template-columns:182px minmax(0,1fr); width:100%; height:100%; min-height:0; background:#0b0b0b; }
.workspace-file[data-page="hero"]{ height:100%; overflow:auto; }.workspace-file[data-page="hero"] .hero-workspace{ height:calc(100% - 116px); min-height:520px; }.hero-folders{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; max-width:760px; padding:16px 36px 24px; }.hero-folders button{ display:grid; grid-template-columns:24px 1fr auto; grid-template-rows:auto auto; gap:3px 10px; padding:15px; border:1px solid #292929; border-radius:8px; color:#f0ede8; background:#151515; text-align:left; cursor:pointer; }.hero-folders button:hover{ border-color:#c9a84c; background:#201d16; }.hero-folders button span{ grid-row:1 / -1; color:#c9a84c; font-size:20px; }.hero-folders button span img{ width:20px; height:20px; filter:brightness(0) saturate(100%) invert(72%) sepia(35%) saturate(600%) hue-rotate(7deg) brightness(89%); }.hero-folders button strong{ font:600 14px Cinzel,serif; }.hero-folders button small{ color:#aaa39b; font-size:11px; }.hero-folders button b{ grid-column:3; grid-row:1 / -1; align-self:center; color:#c9a84c; font-size:18px; }
.hero-internships{ padding:0 36px 30px; }.hero-internships .file-section-heading{ margin:0 0 14px; }.hero-internships .file-section-heading > div:first-child{ display:flex; align-items:center; gap:10px; }.hero-internships h2{ margin:0; font-size:20px; }.intern-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; max-width:1100px; }.intern-card{ background:#151515; border:1px solid #292929; border-radius:10px; padding:16px 18px; }.intern-card:hover{ border-color:#8d7634; }.intern-top{ display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:6px; }.intern-top strong{ color:#f0ede8; font:600 16px 'EB Garamond',serif; }.intern-top span{ color:#aaa39b; font-size:11px; white-space:nowrap; }.intern-title{ color:#c9a84c; font-size:12px; font-weight:500; margin-bottom:10px; }.intern-card p{ margin:0; color:#aaa39b; font-size:12.5px; line-height:1.55; }
.card-role{ display:block; margin:0 0 5px; color:#c9a84c; font-size:11px; font-weight:500; }.card-problem{ margin:0 0 8px!important; color:#aaa39b!important; font-size:11.5px!important; line-height:1.4!important; }.card-problem b{ color:#f0ede8; font-weight:600; }
.hero-rail{ overflow-y:auto; padding:16px 12px; border-right:1px solid #292929; background:#111; }
.rail-heading{ display:block; margin:0 0 12px 2px; color:#aaa39b; font-size:10px; letter-spacing:.08em; }
.hero-thumb{ display:grid; grid-template-columns:18px 1fr; grid-template-rows:auto auto; gap:4px 7px; width:100%; min-height:66px; margin-bottom:9px; padding:9px 8px; border:1px solid #2b2b2b; border-radius:4px; color:#d9d3ca; background:#151515; text-align:left; cursor:pointer; }
.hero-thumb:hover,.hero-thumb.is-active{ border-color:#c9a84c; background:#201d16; }
.hero-thumb span{ grid-row:1 / -1; color:#aaa39b; font-size:10px; }.hero-thumb strong{ font:600 10px Raleway,sans-serif; }.hero-thumb small{ color:#aaa39b; font-size:7px; letter-spacing:.06em; text-align:right; }
.hero-canvas-wrap{ display:flex; flex-direction:column; min-width:0; min-height:0; }
.hero-canvas{ flex:1; min-height:0; display:flex; align-items:center; justify-content:center; padding:28px 36px; overflow:hidden; }
.hero-slide{ display:none; flex-direction:column; width:min(100%,1136px); height:min(100%,640px); padding:48px 56px 38px; border:1px solid #343434; background:#070707; cursor:pointer; }
.hero-slide.is-active{ display:flex; animation:presentation-in .25s ease both; }
.hero-slide-top{ display:flex; align-items:center; gap:18px; color:#c9a84c; font-size:12px; letter-spacing:.16em; }
.hero-slide-top i{ width:305px; height:1px; background:#c9a84c; }
.hero-slide h1{ max-width:850px; margin:18px 0 0; color:#f0ede8; font:600 clamp(30px,3.8vw,48px)/1.1 Cinzel,serif; letter-spacing:.01em; }
.hero-slide-footer{ display:flex; align-items:end; justify-content:space-between; gap:24px; margin-top:auto; }
.hero-slide-footer div{ display:grid; gap:7px; max-width:380px; }.hero-slide-footer span{ color:#c9a84c; font-size:10px; letter-spacing:.15em; }.hero-slide-footer strong{ color:#f0ede8; font:600 15px/1.35 Cinzel,serif; }.hero-slide-footer small{ color:#aaa39b; font-size:9px; letter-spacing:.1em; }.hero-slide-footer em{ display:none; }
.hero-controls{ display:flex; align-items:center; gap:10px; height:48px; padding:8px 24px; border-top:1px solid #292929; background:#111; }
.hero-controls button{ width:30px; height:30px; border:1px solid #3a3530; border-radius:4px; color:#f0ede8; background:#171717; cursor:pointer; }.hero-controls button:hover{ border-color:#c9a84c; color:#c9a84c; }
.hero-progress{ width:180px; height:2px; background:#292929; }.hero-progress span{ display:block; height:100%; width:0; background:#c9a84c; transition:width .2s ease; }.hero-hint{ margin-left:auto; color:#aaa39b; font-size:10px; }
.workspace-file.is-presenting{ position:fixed; inset:0; z-index:100; background:#070707; }.workspace-file.is-presenting .hero-workspace{ height:calc(100vh - 48px); }.workspace-file.is-presenting .hero-rail{ display:none; }.workspace-file.is-presenting .hero-canvas{ padding:0; }.workspace-file.is-presenting .hero-slide{ width:100%; height:100%; max-width:none; border:0; }
.case-study-deck{ height:100%; }
.case-study-deck .hero-canvas{ padding:28px 36px; }
.case-study-deck .case-study-slide{ overflow:auto; cursor:default; }
.case-study-deck .case-study-slide.is-active{ display:flex; }
.case-study-deck .case-study-slide.presentation-cover.is-active{ display:grid; }
.case-study-deck .case-study-slide:not(.presentation-cover){ justify-content:flex-start; }
.case-study-deck .case-study-slide .cs-section{ max-width:760px; margin:0; }
.case-study-deck .case-study-slide .cs-section h2{ font-size:clamp(26px,3.2vw,44px); }
.case-study-deck .case-study-slide .cs-section p,
.case-study-deck .case-study-slide .cs-section ul{ font-size:15px; }
.case-study-deck .case-study-slide .cs-body{ padding:0; }
.case-study-deck .case-study-slide .container{ width:auto; max-width:none; }
.case-study-deck .case-study-slide.presentation-note{ align-items:center; justify-content:center; }
.case-study-page.is-presenting .hero-controls{ display:none; }
.case-study-page.is-presenting .case-study-deck .hero-canvas{ padding:0; }
.presentation-exit{ display:none; position:fixed; z-index:110; top:18px; left:50%; width:38px; height:38px; transform:translateX(-50%); border:1px solid #514a40; border-radius:50%; color:#f0ede8; background:#191714; font-size:24px; line-height:1; cursor:pointer; }.presentation-exit.is-visible{ display:block; }
.card-title h2{ margin:0 0 4px; color:#f0ede8; font:600 15px/1.25 Cinzel,serif; letter-spacing:.2px; }

@media(max-width:760px){
  .workspace-tabs{ overflow-x:auto; }
  .workspace-tab{ min-width:112px; padding:0 12px; }
  .workspace-rail{ display:none; }
  .workspace-shell{ height:calc(100vh - 88px); }
  .workspace-content{ padding:22px 18px 32px; }
  .workspace-hero,.page-heading{ grid-template-columns:1fr; display:grid; align-items:start; gap:18px; }
  .page-heading .search-chip{ width:100%; }
  .home-file-links{ grid-template-columns:1fr; }
  .workspace-file[data-page="hero"] .hero-workspace{ height:auto; min-height:0; }.hero-folders{ grid-template-columns:1fr; padding:12px 16px 22px; }.hero-workspace{ display:block; overflow:auto; }
  .hero-internships{ padding:0 16px 22px; }.intern-grid{ grid-template-columns:1fr; gap:10px; }
  .hero-rail{ display:flex; gap:8px; overflow-x:auto; padding:10px 12px; border-right:0; border-bottom:1px solid #292929; }
  .rail-heading{ display:none; }
  .hero-thumb{ flex:0 0 128px; min-height:54px; margin:0; }
  .hero-canvas{ min-height:calc(100vh - 220px); padding:16px; }
  .hero-slide{ height:100%; min-height:390px; padding:30px 24px 24px; }
  .hero-slide-top i{ width:90px; }
  .hero-slide h1{ font-size:clamp(24px,7vw,36px); }
  .hero-slide-footer{ align-items:start; flex-direction:column; gap:12px; }
  .hero-hint{ display:none; }
  .card-title h2{ font-size:15px; }
}

/* ---------- Figma workspace portfolio ---------- */
.workspace-page{ height:100vh; overflow:hidden; background:#080808; color:#f0ede8; font-family:'Raleway',Inter,sans-serif; font-size:14px; }
.workspace-page h1,.workspace-page h2,.workspace-page h3{ font-family:'Cinzel',Georgia,serif; }
.workspace-tabs{ height:40px; display:flex; align-items:stretch; background:#0e0e0e; border-bottom:1px solid #252525; overflow:hidden; }
.workspace-menu{ width:52px; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:3px; border-right:1px solid #252525; }
.workspace-menu span{ width:4px; height:4px; border-radius:50%; background:#c9a84c; }
.workspace-tab,.workspace-tab-add{ display:flex; align-items:center; gap:8px; padding:0 16px; min-width:132px; color:#817b75; border-right:1px solid #252525; font-size:12px; }
.workspace-tab.is-active{ color:#f0ede8; background:#141414; border-bottom:2px solid #c9a84c; }
.workspace-tab b{ margin-left:auto; color:#817b75; font-weight:400; }.workspace-tab-add{ min-width:40px; justify-content:center; padding:0; font-size:18px; }
.workspace-shell{ display:flex; height:calc(100vh - 48px); min-height:0; }
.workspace-rail{ width:182px; flex:0 0 182px; padding:18px 12px; background:#101010; border-right:1px solid #292929; display:flex; flex-direction:column; }
.rail-brand{ display:flex; align-items:center; gap:9px; padding:0 8px 22px; color:#f0ede8; font:700 12px 'Cinzel',serif; letter-spacing:.8px; }
.rail-mark,.gold-mark{ display:grid; place-items:center; width:24px; height:24px; border-radius:5px; color:#111; background:#c9a84c; font:700 15px 'Cinzel',serif; }
.rail-profile{ display:flex; align-items:center; gap:10px; padding:14px 2px 20px; }.rail-profile img{ width:40px; height:40px; object-fit:cover; object-position:center; border:2px solid #c9a84c; border-radius:50%; }.rail-profile strong,.rail-profile small{ display:block; }.rail-profile strong{ color:#f0ede8; font-size:12px; }.rail-profile small{ color:#aaa39b; font-size:10px; margin-top:3px; }.workspace-rail nav{ display:flex; flex-direction:column; gap:4px; }.workspace-rail nav a{ display:flex; gap:11px; align-items:center; padding:10px 12px; border-radius:4px; color:#817b75; font-size:12px; }.workspace-rail nav a span{ width:15px; color:#5d5751; display:flex; }.workspace-rail nav a span img{ width:15px; height:15px; object-fit:contain; filter:invert(1) opacity(.48); }.workspace-rail nav a:hover,.workspace-rail nav a.is-active{ color:#f0ede8; background:#262115; }.workspace-rail nav a.is-active span img{ filter:brightness(0) saturate(100%) invert(72%) sepia(35%) saturate(600%) hue-rotate(7deg) brightness(89%); }
.rail-footer{ display:flex; align-items:center; gap:8px; margin-top:auto; padding:12px 10px 2px; color:#aaa39b; font-size:11px; border-top:1px solid #292929; }
.workspace-main{ min-width:0; flex:1; min-height:0; display:flex; flex-direction:column; background:#0c0c0c; }.workspace-toolbar{ height:48px; display:flex; justify-content:space-between; align-items:center; padding:0 14px; border-bottom:1px solid #292929; background:#111; }.file-identity{ display:flex; align-items:center; gap:10px; color:#f0ede8; font-size:12px; }.file-identity strong{ font-size:13px; letter-spacing:1px; }.file-identity > span:last-child{ color:#aaa39b; }.file-identity small{ color:#aaa39b; padding:3px 7px; border:1px solid #292929; border-radius:4px; font-size:9px; }.toolbar-divider{ height:20px; width:1px; background:#3a3530; }.toolbar-actions{ display:flex; align-items:center; gap:18px; color:#a09890; font-size:12px; }.toolbar-button{ padding:7px 14px; border:0; border-radius:4px; color:#111; background:#c9a84c; font:inherit; font-weight:700; cursor:pointer; }
.workspace-content{ width:100%; max-width:1150px; height:100%; min-height:0; overflow-y:auto; margin:0 auto; padding:30px 36px 48px; }.workspace-hero{ display:grid; grid-template-columns:1fr 240px; gap:28px; align-items:end; padding:0 0 18px; }.workspace-eyebrow{ color:#c9a84c; font-size:10px; font-weight:700; letter-spacing:1.5px; }.workspace-hero h1{ margin:10px 0 12px; font-size:clamp(28px,3vw,40px); line-height:1.08; letter-spacing:1px; }.workspace-hero h1 em,.about-panel h2 em{ color:#c9a84c; font-style:normal; }.workspace-hero p{ max-width:620px; margin:0; color:#a09890; line-height:1.6; font-size:13px; }.hero-proof{ display:flex; align-items:center; gap:8px; margin-top:18px; color:#6f6963; font-size:11px; }.proof-separator{ color:#403a34; }.hero-portrait{ height:170px; position:relative; overflow:hidden; border:1px solid #343434; border-radius:6px; background:#151515; }.hero-portrait img{ width:100%; height:100%; object-fit:cover; object-position:center 22%; filter:saturate(.7); }.hero-portrait span{ position:absolute; left:10px; bottom:8px; color:#c9a84c; font-size:9px; letter-spacing:1px; }
.file-section{ padding-top:28px; }.file-section-heading{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:14px; }.file-section-heading > div:first-child{ display:flex; align-items:center; gap:10px; }.folder-icon{ color:#c9a84c; font-size:20px; transform:rotate(-25deg); }.file-section h2{ margin:0; font-size:16px; letter-spacing:.4px; }.file-count{ padding:4px 8px; border:1px solid #343434; border-radius:20px; color:#74706b; font-size:10px; }.search-chip{ display:flex; align-items:center; gap:7px; width:240px; padding:8px 12px; border:1px solid #343434; border-radius:6px; color:#aaa39b; font-size:11px; }.search-chip input{ width:100%; min-width:0; border:0; outline:0; color:#f0ede8; background:transparent; font:inherit; }.search-chip input::placeholder{ color:#4a4540; }.view-toggle{ display:flex; gap:2px; color:#7e7770; }.view-toggle button{ padding:5px 7px; border:0; border-radius:4px; color:inherit; background:transparent; cursor:pointer; }.view-toggle button:hover,.view-toggle button.selected{ background:#292929; color:#c9a84c; }
.project-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }.project-grid.is-list{ grid-template-columns:1fr; gap:8px; }.project-grid.is-list .workspace-card{ display:grid; grid-template-columns:180px 1fr; }.project-grid.is-list .card-art{ height:100%; min-height:116px; }.workspace-card{ display:flex; flex-direction:column; overflow:hidden; border:1px solid #2a2a2a; border-radius:10px; background:#151515; box-shadow:0 4px 20px rgba(0,0,0,.4); transition:transform .2s,border-color .2s; }.workspace-card:hover{ transform:translateY(-3px); border-color:#8d7634; }.card-art{ height:190px; position:relative; display:grid; place-items:center; overflow:hidden; background:#111; }.card-art img{ width:100%; height:100%; object-fit:contain; padding:12px; }.card-badge{ position:absolute; left:12px; top:12px; padding:4px 9px; border:1px solid rgba(201,168,76,.35); border-radius:4px; color:#c9a84c; background:rgba(201,168,76,.08); font-size:9px; font-weight:700; letter-spacing:1px; }.card-vextaro .card-art{ background:linear-gradient(160deg,#0a1420,#1a2e40 55%,#0a1420); }.vextaro-mark{ width:52px; height:52px; display:grid; place-items:center; border:1px solid #59758d; border-radius:50%; color:#f0ede8; font:700 30px Georgia; box-shadow:0 0 0 9px rgba(89,117,141,.12); }.card-details{ display:flex; flex-direction:column; gap:9px; padding:14px 16px 16px; }.card-title{ display:flex; justify-content:space-between; gap:8px; }.card-title h3{ margin:0 0 4px; color:#f0ede8; font-size:15px; line-height:1.25; letter-spacing:.2px; }.card-title small{ color:#4a4540; font-size:10px; }.card-title b{ color:#716a63; letter-spacing:2px; }.card-tags{ display:flex; flex-wrap:wrap; gap:6px; }.card-tags span,.skill-list span{ padding:3px 8px; border:1px solid rgba(201,168,76,.18); border-radius:4px; color:#8a6a1e; background:rgba(201,168,76,.05); font-size:9px; }.card-details p{ margin:0; color:#aaa39b; font-size:11px; line-height:1.5; }.about-panel{ display:grid; grid-template-columns:1fr 1fr; gap:42px; margin-top:42px; padding:28px 0 0; border-top:1px solid #292929; }.about-panel h2{ margin:10px 0 0; color:#f0ede8; font-size:28px; line-height:1.1; }.about-panel p{ margin:0 0 16px; color:#a09890; font-size:13px; line-height:1.6; }.skill-list{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:16px; }.inline-link{ color:#c9a84c; font-size:12px; font-weight:600; }.workspace-footer{ display:flex; justify-content:space-between; padding:18px 30px 26px 212px; background:#080808; border-top:1px solid #292929; color:#aaa39b; font-size:11px; }.workspace-footer div{ display:flex; gap:18px; }.workspace-footer a:hover{ color:#c9a84c; }
.workspace-page .workspace-footer{ display:none; }
@media(max-width:760px){ .workspace-tabs{ position:sticky; top:0; z-index:20; }.workspace-shell{ display:block; height:calc(100vh - 44px); }
.workspace-main{ height:100%; }.workspace-rail{ width:100%; height:150px; padding:0 12px 10px; display:block; border-right:0; border-bottom:1px solid #292929; position:static; overflow:hidden; }.rail-brand{ height:34px; padding:0 14px 0 0; margin:0; border:0; }.rail-brand span:last-child{ display:inline; font-size:9px; }.rail-profile{ padding:6px 0 8px; }.rail-profile img{ width:28px; height:28px; }.rail-profile strong{ font-size:10px; }.rail-profile small{ font-size:8px; }.workspace-rail nav{ flex-direction:row; gap:3px; overflow-x:auto; }.workspace-rail nav a{ padding:6px 9px; white-space:nowrap; font-size:9px; }.workspace-rail nav a span{ display:inline; width:auto; }.rail-footer{ display:none; }.workspace-main{ height:calc(100% - 150px); }.workspace-toolbar{ height:44px; padding:0 14px; }.file-identity strong{ font-size:12px; }.file-identity > span:last-child,.file-identity small,.toolbar-divider,.toolbar-actions > a:first-child{ display:none; }.toolbar-actions{ gap:8px; }.workspace-content{ padding:18px 12px 34px; }.workspace-hero{ grid-template-columns:1fr; gap:12px; padding-top:0; }.workspace-hero h1{ font-size:clamp(25px,8vw,34px); }.workspace-hero p{ font-size:10px; }.search-chip{ display:flex; width:100%; font-size:9px; }.file-section{ padding-top:20px; }.file-section-heading{ margin-bottom:10px; }.file-section h2{ font-size:13px; }.project-grid{ display:grid; grid-template-columns:1fr; gap:10px; padding:2px 1px 10px; }.workspace-card{ width:100%; }.card-art{ height:165px; }.card-details{ padding:10px 10px 12px; gap:7px; }.card-title h3{ font-size:12px; }.card-title small{ font-size:8px; }.card-tags{ gap:4px; }.card-tags span{ padding:2px 6px; font-size:8px; }.card-details p{ font-size:9px; line-height:1.45; }.about-panel{ grid-template-columns:1fr; gap:16px; margin-top:28px; }.workspace-footer{ padding:18px 16px 24px; flex-direction:column; gap:10px; }.workspace-footer div{ gap:14px; } }

/* Accessibility polish: preserve the compact workspace while keeping utility text readable. */
.workspace-toolbar{ box-sizing:border-box; height:auto; min-height:48px; padding:8px 14px; }
.workspace-rail nav a,
.rail-profile strong{ font-size:12px; }
.file-identity small{ font-size:12px; }
.workspace-rail nav a small,
.rail-profile small,
.workspace-eyebrow,
.file-count,
.card-badge,
.card-title small,
.card-tags span,
.card-details p{ font-size:12px; }
.workspace-rail nav a,
.rail-profile small,
.workspace-eyebrow,
.file-count,
.card-title small,
.card-details p{ color:#aaa39b; }
.file-identity > span:last-child,
.toolbar-actions,
.workspace-footer,
.workspace-footer a{ color:#aaa39b; }
.card-tags span{ color:#d6b96e; }
.search-chip input::placeholder{ color:#9a9289; }
.file-section-heading .file-count{ color:#aaa39b; }
.art-orbit::after{ box-shadow:none; }
@media(max-width:760px){
  .workspace-toolbar{ min-height:44px; }
  .workspace-rail nav a{ font-size:12px; }
  .rail-profile strong{ font-size:12px; }
  .rail-profile small{ font-size:12px; }
  .workspace-eyebrow{ font-size:12px; }
  .workspace-hero p{ font-size:12px; }
  .file-count{ font-size:12px; }
  .file-section h2{ font-size:18px; }
  .card-title h3{ font-size:15px; }
  .card-title small,.card-tags span,.card-details p{ font-size:12px; }
}