/* =============================================================
   HOME — index.html only
   ============================================================= */

/* SHARED SECTION UTILITIES */
.section{padding:100px 72px}
.section-label{font-size:11px;letter-spacing:0.18em;text-transform:uppercase;color:var(--terracotta);margin-bottom:16px}
.section-title{font-family:var(--serif);font-size:clamp(42px,5vw,72px);line-height:1.02;color:var(--dark)}
.section-header{margin-bottom:64px}
.section-header-row{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:64px}
.section-link{font-size:11.5px;font-weight:500;letter-spacing:0.09em;text-transform:uppercase;color:var(--muted);text-decoration:none;display:flex;align-items:center;gap:6px;transition:color 0.2s;margin-bottom:8px}
.section-link:hover{color:var(--terracotta)}

/* BUTTONS */
.btn-primary{background:var(--dark);color:var(--cream);padding:13px 28px;border-radius:40px;font-size:11.5px;font-weight:500;letter-spacing:0.09em;text-transform:uppercase;text-decoration:none;display:inline-flex;align-items:center;gap:8px;transition:background 0.22s,transform 0.22s}
.btn-primary:hover{background:var(--terracotta);transform:translateY(-2px)}
.btn-ghost{font-size:11.5px;font-weight:500;letter-spacing:0.09em;text-transform:uppercase;color:var(--muted);text-decoration:none;display:inline-flex;align-items:center;gap:6px;transition:color 0.2s}
.btn-ghost:hover{color:var(--terracotta)}

/* HERO */
#hero{padding:72px 72px 80px;min-height:100vh;display:flex;flex-direction:column;justify-content:space-between}
.hero-eyebrow{font-size:11px;letter-spacing:0.18em;text-transform:uppercase;color:var(--terracotta);margin-bottom:28px}
.hero-headline{font-family:var(--serif);font-size:clamp(56px,7vw,96px);line-height:1.0;color:var(--dark);margin-bottom:36px;letter-spacing:0em}
.hero-headline em{font-style:normal;color:var(--terracotta)}
.hero-divider{width:40px;height:1.5px;background:var(--terracotta);margin-bottom:28px}
.hero-intro{font-size:17px;line-height:1.85;color:#4A4A46;font-weight:300;max-width:540px;margin-bottom:16px}
.hero-intro strong{color:var(--dark);font-weight:500}
.hero-sub{font-size:14px;line-height:1.8;color:var(--muted);max-width:460px;margin-bottom:44px}
.hero-ctas{display:flex;align-items:center;gap:24px;margin-bottom:64px}
.hero-stats{display:flex;gap:0;border-top:1px solid var(--border);padding-top:36px;margin-bottom:64px}
.hero-stat{flex:1;padding-right:32px}
.hero-stat+.hero-stat{border-left:1px solid var(--border);padding-left:32px}
.stat-val{font-family:var(--serif);font-size:42px;color:var(--dark);line-height:1;margin-bottom:4px}
.stat-label{font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:var(--muted)}
.hero-grid-label{font-size:11px;letter-spacing:0.18em;text-transform:uppercase;color:var(--muted);margin-bottom:16px}
.hero-img-wrap{width:calc(100% + 144px);margin-left:-72px;margin-right:-72px;overflow:hidden}
.hero-img-wrap img{width:100%;display:block}

/* PROJECTS */
#work{padding:100px 0;background:var(--cream)}
#work .section-header-row{padding:0 72px;margin-bottom:40px}
.project-feature{position:relative;overflow:hidden;border-top:1px solid var(--border)}
.project-feature:last-child{border-bottom:1px solid var(--border)}
.project-body{display:grid;grid-template-columns:1.4fr 1fr;min-height:420px}
.project-info{order:2}
.project-visual{order:1}
.project-info{padding:56px 64px;display:flex;flex-direction:column;justify-content:center;border-left:1px solid var(--border)}
.project-tag-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:24px}
.project-tag{font-size:10px;letter-spacing:0.12em;text-transform:uppercase;color:var(--terracotta);border:1px solid rgba(244,91,24,0.3);padding:4px 12px;border-radius:20px}
.project-name{font-family:var(--serif);font-size:clamp(26px,3vw,42px);color:var(--dark);line-height:1.05;margin-bottom:20px}
.project-desc{font-size:14px;line-height:1.8;color:var(--muted);font-weight:300;margin-bottom:32px;max-width:380px}
.project-link{display:inline-flex;align-items:center;gap:8px;font-size:11.5px;font-weight:500;letter-spacing:0.09em;text-transform:uppercase;color:var(--dark);text-decoration:none;border-bottom:1px solid var(--dark);padding-bottom:2px;align-self:flex-start;transition:color 0.2s,border-color 0.2s}
.project-link:hover{color:var(--terracotta);border-color:var(--terracotta)}
.project-visual{overflow:hidden;position:relative;background:var(--cream);min-height:420px}
.project-visual-inner{width:100%;height:100%;min-height:420px;transition:transform 0.7s cubic-bezier(0.25,0.46,0.45,0.94);display:flex;align-items:center;justify-content:center;position:relative}
.project-visual-inner img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.project-feature:hover .project-visual-inner{transform:scale(1.03)}

/* WORK SECTION — desktop/mobile split */
.work-desktop{display:block}
.work-mobile{display:none}

/* HOVER PREVIEW TABLE */
.lib-hover-wrap{position:relative;padding:0 72px}
.lib-preview{position:fixed;right:80px;top:50%;transform:translateY(-50%);width:340px;height:240px;border-radius:10px;overflow:hidden;opacity:0;pointer-events:none;transition:opacity 0.25s ease;z-index:50;box-shadow:0 24px 64px rgba(0,0,0,0.18)}
.lib-preview.visible{opacity:1}
.lib-preview-img{width:100%;height:100%;background-size:cover;background-position:center;transition:background-image 0.15s ease}
.lib-row{border-bottom:1px solid var(--border);transition:background 0.15s;cursor:pointer}
.lib-row:hover{background:rgba(244,91,24,0.04)}
.lib-row:hover .lib-arrow{color:var(--terracotta);transform:translate(3px,-3px)}
.lib-hover-wrap .library-table{width:100%}
#work{padding:100px 0}
.library-table{width:100%;border-collapse:collapse;margin-top:40px}
.library-table thead tr{border-bottom:1px solid var(--border)}
.library-table thead th{font-size:10px;letter-spacing:0.16em;text-transform:uppercase;color:var(--muted);font-weight:400;padding:0 0 14px;text-align:left}
.library-table thead th:last-child{text-align:right}
.library-table tbody tr{border-bottom:1px solid var(--border);transition:background 0.15s;cursor:pointer}
.library-table tbody tr:hover{background:rgba(244,91,24,0.04)}
.library-table tbody td{padding:18px 0;vertical-align:middle}
.lib-num{font-family:var(--serif);font-size:14px;color:rgba(4,2,12,0.2);width:40px}
.lib-name{font-size:15px;font-weight:500;color:var(--dark)}
.lib-cat{font-size:10px;letter-spacing:0.1em;text-transform:uppercase;color:var(--terracotta);border:1px solid rgba(244,91,24,0.3);padding:3px 10px;border-radius:20px;display:inline-block}
.lib-year{font-size:13px;color:var(--muted)}
.lib-arrow{font-size:16px;color:var(--muted);text-align:right;display:block;transition:color 0.2s,transform 0.2s}
.library-table tbody tr:hover .lib-arrow{color:var(--terracotta);transform:translate(3px,-3px)}

/* PHILOSOPHY */
#philosophy{background:var(--dark);padding:100px 72px}
#philosophy .section-label{color:var(--terracotta)}
#philosophy .section-title{color:#EAE8E1}
.philosophy-intro{font-size:16px;line-height:1.85;color:rgba(234,232,225,0.5);font-weight:300;max-width:560px;margin-bottom:72px;margin-top:16px}
.philosophy-cols{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0;border-top:1px solid var(--border-dark)}
.phil-col{padding:48px 40px 48px 0;border-right:1px solid var(--border-dark)}
.phil-col:first-child{padding-left:0}
.phil-col:last-child{border-right:none;padding-right:0;padding-left:40px}
.phil-col:nth-child(2){padding-left:40px}
.phil-tag{font-size:10px;letter-spacing:0.16em;text-transform:uppercase;color:var(--terracotta);margin-bottom:20px;display:block}
.phil-title{font-family:var(--serif);font-size:26px;color:#EAE8E1;margin-bottom:16px;line-height:1.1}
.phil-text{font-size:14px;line-height:1.85;color:rgba(234,232,225,0.4);font-weight:300}

/* BACKGROUND / STORY */
#background{background:var(--cream);padding:100px 72px}
.story-layout{display:grid;grid-template-columns:1fr 1.6fr;gap:80px;align-items:start}
.story-left{position:sticky;top:40px}
.story-left .section-title{margin-bottom:24px;font-size:clamp(36px,4vw,52px)}
.story-left-sub{font-size:14px;line-height:1.8;color:var(--muted);font-weight:300}
.story-body{font-size:18px;line-height:1.9;color:var(--dark);font-weight:300;margin-bottom:28px}
.story-body strong{color:var(--terracotta);font-weight:500}
.story-body-2{font-size:15px;line-height:1.85;color:var(--muted);font-weight:300;margin-bottom:28px}
.story-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.story-tag{font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:var(--dark);border:1px solid var(--border);padding:6px 14px;border-radius:20px;transition:border-color 0.2s,color 0.2s}
.story-tag:hover{border-color:var(--terracotta);color:var(--terracotta)}

/* EXPERIENCE */
#experience{background:var(--cream);padding:100px 72px}
.exp-header{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:64px}
.exp-count{font-family:var(--serif);font-size:72px;color:rgba(4,2,12,0.08);line-height:1}
.exp-list{display:flex;flex-direction:column;gap:0}
.exp-item{display:grid;grid-template-columns:220px 1fr;gap:0;border-top:1px solid var(--border);padding:40px 0;transition:background 0.2s}
.exp-item:last-child{border-bottom:1px solid var(--border)}
.exp-item:hover{background:rgba(244,91,24,0.03);padding-left:16px;padding-right:16px;margin:0 -16px;border-radius:4px}
.exp-left{padding-right:48px;padding-top:4px}
.exp-dates{font-size:12px;letter-spacing:0.08em;color:var(--muted);margin-bottom:8px;text-transform:uppercase}
.exp-company{font-family:var(--serif);font-size:22px;color:var(--dark);margin-bottom:4px}
.exp-location{font-size:12px;color:var(--muted)}
.exp-title{font-size:16px;font-weight:500;color:var(--dark);margin-bottom:12px}
.exp-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px}
.exp-tag{font-size:10px;letter-spacing:0.1em;text-transform:uppercase;color:var(--terracotta);border:1px solid rgba(244,91,24,0.3);padding:3px 10px;border-radius:20px}
.exp-desc{font-size:14px;line-height:1.8;color:var(--muted);font-weight:300}

/* SKILLS */
#skills{background:var(--cream);padding:100px 72px}
.essentials-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--border);border:1px solid var(--border);margin-top:64px}
.essential-item{background:var(--cream);padding:36px 32px;transition:background 0.2s;position:relative}
.essential-item::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--terracotta);transform:scaleX(0);transform-origin:left;transition:transform 0.3s ease}
.essential-item:hover{background:var(--cream)}
.essential-item:hover::before{transform:scaleX(1)}
.essential-title{font-size:15px;font-weight:500;color:var(--dark);margin-bottom:8px}
.essential-desc{font-size:13px;line-height:1.75;color:var(--muted);font-weight:300}

/* TECH */
#tech{background:var(--cream);padding:100px 72px}
.tech-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:64px}
.tech-header-right{font-size:14px;line-height:1.7;color:var(--muted);font-weight:300;text-align:right;max-width:200px;padding-top:8px}
.tech-list{display:flex;flex-direction:column;gap:0;max-width:760px;margin-left:auto}
.tech-row{display:grid;grid-template-columns:56px 180px 1fr;align-items:center;gap:24px;padding:22px 0;border-bottom:1px solid var(--border)}
.tech-row:first-child{border-top:1px solid var(--border)}
.tech-icon-tile{width:44px;height:44px;border-radius:10px;background:var(--cream);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden;padding:6px}
.tech-icon-tile img{width:100%;height:100%;object-fit:contain}
.tech-name{font-size:15px;font-weight:500;color:var(--dark)}
.tech-desc{font-size:13px;line-height:1.65;color:var(--muted);font-weight:300}
.tech-expand-btn{display:flex;align-items:center;gap:10px;margin-top:32px;margin-left:auto;background:none;border:1px solid var(--border);border-radius:40px;padding:10px 22px;font-family:var(--sans);font-size:12px;font-weight:500;letter-spacing:0.08em;text-transform:uppercase;color:var(--muted);cursor:pointer;transition:all 0.2s;white-space:nowrap}
.tech-expand-btn:hover{border-color:var(--terracotta);color:var(--terracotta)}
.tech-expand-btn .expand-arrow{font-size:14px;transition:transform 0.3s}
.tech-expand-btn.open .expand-arrow{transform:rotate(180deg)}
.tech-extra{max-height:0;overflow:hidden;transition:max-height 0.55s cubic-bezier(0.25,0.46,0.45,0.94)}
.tech-extra.open{max-height:1400px}
.tech-category-divider{font-size:10px;letter-spacing:0.2em;text-transform:uppercase;color:var(--terracotta);padding:28px 0 10px;border-bottom:1px solid var(--border)}

/* PRESS (hidden but kept for future use) */
#press{background:var(--dark);padding:100px 72px}
#press .section-label{color:var(--terracotta)}
#press .section-title{color:#EAE8E1;margin-bottom:72px}
.press-quotes{display:flex;flex-direction:column;gap:0}
.press-item{display:grid;grid-template-columns:1fr 260px;gap:64px;align-items:start;padding:52px 0;border-top:1px solid var(--border-dark);transition:background 0.2s}
.press-item:last-child{border-bottom:1px solid var(--border-dark)}
.press-item:hover{background:rgba(255,255,255,0.02)}
.press-quote{font-family:var(--serif);font-size:clamp(22px,2.5vw,32px);color:rgba(234,232,225,0.85);line-height:1.35;position:relative;padding-left:32px}
.press-quote::before{content:'\201C';position:absolute;left:0;top:-8px;font-family:var(--serif);font-size:64px;color:var(--terracotta);opacity:0.5;line-height:1}
.press-name{font-size:14px;font-weight:500;color:#EAE8E1;margin-bottom:4px}
.press-title{font-size:12px;color:rgba(234,232,225,0.4);line-height:1.6}

/* CONTACT */
#contact{background:var(--cream);padding:120px 72px}
.contact-layout{max-width:640px}
.contact-headline{font-family:var(--serif);font-size:clamp(48px,6vw,80px);line-height:1.02;color:var(--dark);margin-bottom:24px}
.contact-headline em{font-style:normal;color:var(--terracotta)}
.contact-sub{font-size:15px;line-height:1.85;color:var(--muted);font-weight:300;max-width:480px;margin-bottom:40px}
.contact-channels{display:flex;flex-direction:column;gap:16px}
.contact-channel{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:20px 24px;border:1px solid var(--border);border-radius:8px;text-decoration:none;transition:border-color 0.2s,background 0.2s}
.contact-channel:hover{border-color:var(--terracotta);background:rgba(244,91,24,0.04)}
.channel-info{display:flex;flex-direction:column;gap:4px}
.channel-label{font-size:10px;letter-spacing:0.12em;text-transform:uppercase;color:var(--muted)}
.channel-val{font-size:15px;font-weight:500;color:var(--dark)}
.channel-arrow{font-size:18px;color:var(--muted);transition:color 0.2s,transform 0.2s}
.contact-channel:hover .channel-arrow{color:var(--terracotta);transform:translateX(3px)}

/* ARSENAL EASTER EGG */
.arsenal-word{position:relative;cursor:default;display:inline-block}
.arsenal-word::after{content:'';position:absolute;bottom:-2px;left:0;right:0;height:2px;background:#EF0107;transform:scaleX(0);transform-origin:left;transition:transform 0.3s ease}
.arsenal-word:hover::after{transform:scaleX(1)}
.arsenal-tooltip{position:absolute;bottom:calc(100% + 16px);left:50%;transform:translateX(-50%) translateY(8px);opacity:0;pointer-events:none;transition:opacity 0.25s ease,transform 0.25s ease;z-index:200;width:220px}
.arsenal-word:hover .arsenal-tooltip{opacity:1;transform:translateX(-50%) translateY(0)}
.arsenal-card{background:#1A1A1A;border:1px solid rgba(239,1,7,0.3);border-radius:10px;padding:16px 18px;text-align:center;box-shadow:0 16px 40px rgba(0,0,0,0.4)}
.arsenal-crest{display:flex;align-items:center;justify-content:center;margin-bottom:10px}
.arsenal-name{font-family:var(--serif);font-size:20px;color:#EF0107;letter-spacing:0.04em;margin-bottom:4px}
.arsenal-motto{font-size:10px;letter-spacing:0.16em;text-transform:uppercase;color:rgba(255,255,255,0.4);margin-bottom:6px}
.arsenal-badge{display:inline-flex;align-items:center;gap:5px;background:rgba(239,1,7,0.12);border:1px solid rgba(239,1,7,0.25);border-radius:20px;padding:4px 10px}
.arsenal-badge-dot{width:6px;height:6px;border-radius:50%;background:#EF0107;animation:pulse 1.5s ease-in-out infinite}
.arsenal-badge-text{font-size:10px;letter-spacing:0.1em;text-transform:uppercase;color:rgba(255,255,255,0.6)}
.arsenal-tip{position:absolute;bottom:-6px;left:50%;width:12px;height:12px;background:#1A1A1A;border-right:1px solid rgba(239,1,7,0.3);border-bottom:1px solid rgba(239,1,7,0.3);transform:translateX(-50%) rotate(45deg)}

/* HOME MOBILE */
@media(max-width:900px){
  .section,#hero,#philosophy,#background,#experience,#skills,#tech,#press,#library,#contact{padding-left:28px;padding-right:28px}
  #work .section-header-row{padding:0 28px}
  .work-desktop{display:none}
  .work-mobile{display:block}
  .project-body{grid-template-columns:1fr}
  .project-info{border-right:none!important;border-left:none!important;padding:40px 28px}
  .project-visual{min-height:260px}
  .philosophy-cols{grid-template-columns:1fr}
  .phil-col{border-right:none;padding:36px 0;border-bottom:1px solid var(--border-dark)}
  .phil-col:nth-child(2),.phil-col:last-child{padding-left:0}
  .phil-col:last-child{border-bottom:none}
  .tech-row{grid-template-columns:44px 1fr}
  .tech-desc{display:none}
  .press-item{grid-template-columns:1fr;gap:24px}
  .exp-item{grid-template-columns:1fr;gap:12px}
  .story-layout{grid-template-columns:1fr;gap:40px}
  .essentials-grid{grid-template-columns:1fr;width:100%}
  .essential-item{width:100%}
  .hero-stats{flex-wrap:wrap}
}