:root{
  --paper: #EAE7DC;
  --paper-dark: #DEDACB;
  --card: #F3F1E8;
  --graphite: #262421;
  --graphite-soft: #5B584F;
  --blue-lead: #3E7FA8;
  --blue-lead-soft: #E4EEF3;
  --eraser: #D9836F;
  --eraser-dark: #C06952;
  --line: #C6C0AE;
  --radius: 3px;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
html, body{ overflow-x:hidden; max-width:100%; }
body{
  background:var(--paper);
  color:var(--graphite);
  font-family:'Work Sans', sans-serif;
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
::selection{ background:var(--blue-lead); color:#fff; }
a{color:inherit; text-decoration:none;}
.wrap{ max-width:1140px; margin:0 auto; padding:0 28px; }

.eyebrow{
  font-family:'Space Mono', monospace;
  font-size:12px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--blue-lead);
  display:flex;
  align-items:center;
  gap:10px;
}
.eyebrow .grade{
  border:1.5px solid var(--blue-lead);
  border-radius:50%;
  width:26px; height:26px;
  display:flex; align-items:center; justify-content:center;
  font-weight:700;
  flex:none;
}

h1,h2,h3{ font-family:'Fraunces', serif; font-weight:500; letter-spacing:-0.01em; }

header{
  position:sticky; top:0; z-index:50;
  background:rgba(234,231,220,0.92);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 28px;
  max-width:1140px; margin:0 auto;
}
.brand{
  display:flex; align-items:center; gap:10px;
  font-family:'Fraunces', serif; font-weight:600; font-size:20px;
}
.brand svg{ width:30px; height:30px; }
.navlinks{ display:flex; gap:32px; font-size:14px; font-weight:500; }
.navlinks a{ position:relative; padding-bottom:3px; }
.navlinks a::after{
  content:''; position:absolute; left:0; bottom:0; width:0; height:2px;
  background:var(--eraser); transition:width .25s ease;
}
.navlinks a:hover::after{ width:100%; }
.admin-btn{ padding:9px 16px; font-size:12px; flex:none; }

.nav-toggle{
  display:none; flex:none; width:38px; height:38px;
  border:1.5px solid var(--graphite); border-radius:var(--radius);
  background:transparent; cursor:pointer;
  flex-direction:column; align-items:center; justify-content:center; gap:4px;
}
.nav-toggle span{ display:block; width:18px; height:2px; background:var(--graphite); transition:transform .2s ease, opacity .2s ease; }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

.mobile-nav{
  display:none; flex-direction:column;
  border-top:1px solid var(--line);
  background:var(--paper);
  padding:8px 28px 18px;
}
.mobile-nav a{
  padding:14px 0; font-size:15px; font-weight:500;
  border-bottom:1px solid var(--line);
}
.mobile-nav a:last-child{ border-bottom:none; color:var(--blue-lead); }
.mobile-nav.open{ display:flex; }
.mobile-nav [data-auth-slot] .btn{
  display:flex; width:100%; text-align:left; padding:14px 0; margin:0;
  border:none; border-bottom:1px solid var(--line); border-radius:0;
  background:none; font-size:15px; font-weight:500; font-family:inherit;
  color:var(--graphite); cursor:pointer;
}

.hero{ padding:100px 0 90px; position:relative; overflow:hidden; }
.hero .wrap{ display:grid; grid-template-columns:1.1fr 0.9fr; gap:50px; align-items:center; }
.hero h1{ font-size:clamp(38px,5.2vw,60px); line-height:1.06; margin-bottom:22px; }
.hero h1 em{ font-style:italic; color:var(--blue-lead); }
.hero p.lede{ font-size:18px; color:var(--graphite-soft); max-width:44ch; margin-bottom:34px; }
.underline-svg{ width:220px; height:26px; margin-top:-8px; margin-bottom:28px; display:block; }
.underline-svg path{
  stroke:var(--eraser); stroke-width:4; fill:none; stroke-linecap:round;
  stroke-dasharray:260; stroke-dashoffset:260;
  animation:draw 1.1s ease forwards .4s;
}
@keyframes draw{ to{ stroke-dashoffset:0; } }

.cta-row{ display:flex; gap:16px; flex-wrap:wrap; }
.btn{
  font-family:'Space Mono', monospace;
  font-size:13px; letter-spacing:.04em;
  padding:14px 24px;
  border-radius:var(--radius);
  cursor:pointer;
  border:1.5px solid var(--graphite);
  background:transparent;
  transition:transform .15s ease, background .2s ease, color .2s ease;
  display:inline-block;
}
.btn:hover{ transform:translateY(-2px); }
.btn.solid{ background:var(--eraser); border-color:var(--eraser); color:#fff; }
.btn.solid:hover{ background:var(--eraser-dark); border-color:var(--eraser-dark); }
.btn.ghost:hover{ background:var(--graphite); color:var(--paper); }
.btn:disabled{ opacity:.6; cursor:not-allowed; transform:none; }

.hero-art{ position:relative; }
.hero-art svg{ width:100%; height:auto; }

.section-head{ margin-bottom:44px; max-width:640px; }
.section-head h2{ font-size:clamp(28px,3.4vw,36px); margin-top:10px; }
section{ padding:80px 0; border-top:1px solid var(--line); }

.grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.empty-note{ grid-column:1/-1; color:var(--graphite-soft); font-size:15px; padding:20px 0; }
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  display:flex; flex-direction:column;
  transition:box-shadow .2s ease, transform .2s ease;
}
.card:hover{ box-shadow:0 14px 30px -18px rgba(38,36,33,.35); transform:translateY(-3px); }
.card .art{
  background:var(--paper-dark);
  aspect-ratio:4/3.1;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  position:relative;
}
.card.out-of-stock .art img{ opacity:.55; }
.stock-badge{
  position:absolute; top:12px; left:12px;
  background:var(--graphite); color:var(--paper);
  font-family:'Space Mono', monospace; font-size:11px; letter-spacing:.06em; text-transform:uppercase;
  padding:5px 10px; border-radius:20px;
}
.card .art img{ width:100%; height:100%; object-fit:cover; display:block; }
.card .meta{ padding:18px 20px 20px; display:flex; flex-direction:column; gap:6px; flex:1; }
.card .meta h3{ font-size:19px; }
.card .spec{ font-family:'Space Mono', monospace; font-size:12px; color:var(--graphite-soft); }
.card .row{ display:flex; align-items:center; justify-content:space-between; margin-top:auto; padding-top:14px; }
.card .price{ font-family:'Space Mono', monospace; font-weight:700; font-size:15px; }
.card .inquire{
  font-family:'Space Mono', monospace; font-size:12px; letter-spacing:.03em;
  color:var(--blue-lead); border-bottom:1px solid transparent; cursor:pointer; background:none; border-top:none; border-left:none; border-right:none;
}
.card .inquire:hover{ border-color:var(--blue-lead); }

.commission{ background:var(--paper-dark); }
.comm-grid{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:60px; }
.steps{ display:flex; flex-direction:column; gap:26px; margin-top:32px; }
.step{ display:flex; gap:16px; }
.step .grade{
  font-family:'Space Mono', monospace; font-weight:700; font-size:13px;
  border:1.5px solid var(--graphite); border-radius:50%;
  width:38px; height:38px; flex:none;
  display:flex; align-items:center; justify-content:center;
  background:var(--paper);
}
.step h4{ font-family:'Work Sans'; font-weight:600; font-size:15px; margin-bottom:4px; }
.step p{ font-size:14px; color:var(--graphite-soft); }

form{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:34px; }
.field{ margin-bottom:20px; }
.field label{
  display:block; font-family:'Space Mono', monospace; font-size:11px;
  letter-spacing:.06em; text-transform:uppercase; color:var(--graphite-soft); margin-bottom:8px;
}
.field input, .field select, .field textarea{
  width:100%; padding:12px 14px; font-family:'Work Sans'; font-size:15px;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  color:var(--graphite); outline:none;
}
.field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--blue-lead); box-shadow:0 0 0 3px var(--blue-lead-soft); }
.field textarea{ min-height:100px; resize:vertical; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.submit-note{ font-size:13px; color:var(--graphite-soft); margin-top:14px; }
#formMsg{ display:none; margin-top:16px; padding:14px 16px; border-radius:var(--radius); font-size:14px; }
#formMsg.success{ display:block; background:var(--blue-lead-soft); border:1px solid var(--blue-lead); }
#formMsg.error{ display:block; background:#F6DEDA; border:1px solid var(--eraser-dark); }
.hp-field{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.field input[type="file"]{ padding:9px 10px; font-size:13px; cursor:pointer; }
.ref-preview-wrap{ margin-top:10px; display:flex; align-items:center; gap:12px; }
.ref-preview-wrap img{ width:64px; height:64px; object-fit:cover; border-radius:var(--radius); border:1px solid var(--line); }
.ref-remove{ font-family:'Space Mono', monospace; font-size:12px; color:var(--eraser-dark); background:none; border:none; cursor:pointer; padding:0; }
.ref-remove:hover{ text-decoration:underline; }

.about-grid{ display:grid; grid-template-columns:0.55fr 1fr; gap:50px; align-items:center; }
.about-portrait{ display:flex; flex-direction:column; gap:18px; }
.about-main{ width:100%; max-width:220px; }
.filmstrip{ display:flex; gap:12px; }
.filmstrip svg{ width:64px; height:64px; flex:none; }
.signature{ font-family:'Fraunces', serif; font-style:italic; font-size:26px; margin-top:20px; color:var(--blue-lead); }

.callback-card{
  margin-top:32px; background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:28px 30px; max-width:520px;
}
.callback-card h3{ font-size:20px; margin-top:6px; }
.callback-form{ display:flex; flex-wrap:wrap; gap:12px; align-items:flex-start; }
.callback-form input{
  flex:1 1 180px; padding:12px 14px; font-family:'Work Sans'; font-size:15px;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); color:var(--graphite); outline:none;
}
.callback-form input:focus{ border-color:var(--blue-lead); box-shadow:0 0 0 3px var(--blue-lead-soft); }
.callback-form button{ flex:none; }
#callbackMsg{ display:none; width:100%; margin-top:4px; padding:12px 14px; border-radius:var(--radius); font-size:14px; }
#callbackMsg.success{ display:block; background:var(--blue-lead-soft); border:1px solid var(--blue-lead); }
#callbackMsg.error{ display:block; background:#F6DEDA; border:1px solid var(--eraser-dark); }

.thanks-wall{ display:flex; flex-wrap:wrap; gap:12px; }
.thanks-tag{
  font-family:'Space Mono', monospace; font-size:13px;
  background:var(--card); border:1px solid var(--line); border-radius:20px;
  padding:9px 18px; color:var(--graphite-soft);
}
.thanks-tag strong{ color:var(--blue-lead); font-weight:700; }

footer{ border-top:1px solid var(--line); padding:44px 0; }
footer .wrap{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; }
footer .fbrand{ font-family:'Fraunces'; font-weight:600; }
footer .fmeta{ font-family:'Space Mono', monospace; font-size:12px; color:var(--graphite-soft); }
footer .fmeta a:hover{ color:var(--blue-lead); }

@media (max-width:860px){
  .navlinks{ display:none; }
  .admin-btn{ display:none; }
  .nav-auth{ display:none; } /* a copy is shown inside the hamburger menu instead — see .mobile-nav [data-auth-slot] */
  .nav-toggle{ display:flex; }
  .nav{ padding:16px 20px; }
  .wrap{ padding:0 20px; }
  .hero .wrap{ grid-template-columns:1fr; }
  .hero-art{ order:-1; max-width:min(300px, 100%); margin:0 auto; }
  .underline-svg{ max-width:100%; }
  .grid{ grid-template-columns:1fr 1fr; }
  .comm-grid{ grid-template-columns:1fr; }
  .callback-card{ max-width:100%; }
  .about-grid{ grid-template-columns:1fr; }
  .about-portrait{ flex-direction:row; flex-wrap:wrap; align-items:center; max-width:100%; }
  .about-main{ max-width:120px; }
  .filmstrip{ flex-wrap:wrap; gap:10px; }
  .filmstrip svg{ width:48px; height:48px; }
  .field-row{ grid-template-columns:1fr; }
  section{ padding:56px 0; }
}
@media (max-width:560px){
  .grid{ grid-template-columns:1fr; }
  .hero{ padding:56px 0 44px; }
  .hero-art{ max-width:220px; }
  .about-portrait{ flex-direction:column; align-items:flex-start; }
  .cta-row .btn{ width:100%; text-align:center; }
  form{ padding:24px 20px; }
  .callback-card{ padding:22px 20px; }
  .callback-form{ flex-direction:column; }
  .callback-form input, .callback-form button{ width:100%; }
  footer .wrap{ flex-direction:column; align-items:flex-start; }
}
/* Prevent iOS Safari from auto-zooming when a form field is focused */
@media (max-width:860px){
  .field input, .field select, .field textarea, .callback-form input{ font-size:16px; }
}
@media (max-width:380px){
  .brand{ font-size:17px; gap:8px; }
  .brand svg{ width:24px; height:24px; }
  .wrap{ padding:0 16px; }
  .nav{ padding:14px 16px; }
}
@media (prefers-reduced-motion: reduce){
  .underline-svg path{ animation:none; stroke-dashoffset:0; }
}

/* Account system styles appended below */

/* ======================================================================
   Account system — auth modal, gallery cart button, account page,
   payment cards, message thread. Reuses existing tokens/components
   (--paper, --card, .btn, .field, .field-row) for visual consistency.
   ====================================================================== */

.account-nav-btn{ display:flex; align-items:center; gap:8px; }
.account-avatar{
  width:26px; height:26px; border-radius:50%; object-fit:cover;
  border:1.5px solid var(--line); flex:none; background:var(--card);
}
.cart-badge{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:16px; height:16px; padding:0 4px; border-radius:20px;
  background:var(--eraser); color:#fff; font-family:'Space Mono', monospace;
  font-size:10px; font-weight:700; margin-left:4px;
}
.cart-badge:empty, .cart-badge[data-count="0"]{ display:none; }

.modal-overlay{
  position:fixed; inset:0; background:rgba(38,36,33,.55); z-index:200;
  display:flex; align-items:center; justify-content:center; padding:20px;
}
.modal-overlay[hidden]{ display:none; }
.modal-box{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:32px; max-width:420px; width:100%; max-height:90vh; overflow-y:auto;
  position:relative;
}
.modal-box h2{ font-size:22px; margin-bottom:6px; }
.modal-sub{ color:var(--graphite-soft); font-size:14px; margin-bottom:22px; }
.modal-close{
  position:absolute; top:16px; right:16px; background:none; border:none;
  font-size:20px; cursor:pointer; color:var(--graphite-soft); line-height:1;
}
.modal-close:hover{ color:var(--graphite); }
.modal-msg{ margin-top:14px; font-size:14px; }
.modal-msg.error{ color:var(--eraser-dark); }
.modal-msg.success{ color:var(--blue-lead); }
.modal-switch{ margin-top:18px; font-size:13px; text-align:center; color:var(--graphite-soft); }
.modal-switch button{
  background:none; border:none; color:var(--blue-lead); cursor:pointer;
  font-size:13px; text-decoration:underline; padding:0;
}
.code-input{ font-family:'Space Mono', monospace; font-size:22px; letter-spacing:0.3em; text-align:center; }
.profile-pic-picker{ display:flex; align-items:center; gap:14px; margin-bottom:20px; }
.profile-pic-picker img{
  width:56px; height:56px; border-radius:50%; object-fit:cover;
  border:1.5px solid var(--line); background:var(--paper);
}
.profile-pic-picker label{
  font-family:'Space Mono', monospace; font-size:12px; letter-spacing:.04em;
  text-transform:uppercase; color:var(--blue-lead); cursor:pointer;
}

.card .row{ gap:10px; flex-wrap:wrap; }
.card .cart-btn{
  font-family:'Space Mono', monospace; font-size:11px; text-transform:uppercase;
  letter-spacing:.05em; padding:8px 12px; border:1px solid var(--blue-lead);
  border-radius:var(--radius); background:none; color:var(--blue-lead); cursor:pointer;
}
.card .cart-btn:hover{ background:var(--blue-lead-soft); }
.card .cart-btn:disabled{ opacity:.6; cursor:default; border-color:var(--line); color:var(--graphite-soft); }

.account-shell{ max-width:820px; margin:0 auto; padding:60px 24px 100px; }
.account-header{ display:flex; align-items:center; gap:20px; margin-bottom:40px; flex-wrap:wrap; }
.account-header img{
  width:76px; height:76px; border-radius:50%; object-fit:cover; border:2px solid var(--line);
  background:var(--card);
}
.account-header h1{ font-size:26px; }
.account-header .email{ color:var(--graphite-soft); font-size:14px; margin-top:2px; }
.account-header .btn{ margin-left:auto; }

.account-tabs{ display:flex; gap:6px; border-bottom:1px solid var(--line); margin-bottom:32px; flex-wrap:wrap; }
.account-tab{
  font-family:'Space Mono', monospace; font-size:12px; letter-spacing:.05em; text-transform:uppercase;
  padding:12px 16px; background:none; border:none; cursor:pointer; color:var(--graphite-soft);
  border-bottom:2px solid transparent; margin-bottom:-1px; position:relative;
}
.account-tab.active{ color:var(--graphite); border-color:var(--eraser); }
.account-tab .cart-badge{ position:relative; top:-1px; }

.account-panel[hidden]{ display:none; }

.cart-row{
  display:flex; gap:14px; align-items:center; background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius); padding:14px; margin-bottom:12px;
}
.cart-row img{ width:64px; height:64px; object-fit:cover; border-radius:var(--radius); flex:none; }
.cart-row .info{ flex:1; min-width:0; }
.cart-row .info strong{ display:block; font-size:15px; }
.cart-row .info span{ font-family:'Space Mono', monospace; font-size:12px; color:var(--graphite-soft); }
.cart-row .remove{ background:none; border:none; color:var(--eraser-dark); font-size:13px; cursor:pointer; flex:none; }
.cart-total{ display:flex; justify-content:space-between; align-items:center; padding:16px 0; font-size:18px; font-weight:600; border-top:1px solid var(--line); margin-top:6px; }

.payment-card{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:20px; margin-bottom:16px; }
.payment-card .top{ display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:10px; }
.payment-card .amount{ font-family:'Space Mono', monospace; font-weight:700; font-size:18px; }
.payment-status{
  display:inline-block; padding:3px 10px; border-radius:20px; font-family:'Space Mono', monospace;
  font-size:11px; letter-spacing:.04em; text-transform:uppercase;
}
.payment-status.awaiting_payment{ background:#F6DEDA; color:var(--eraser-dark); }
.payment-status.marked_paid{ background:var(--blue-lead-soft); color:var(--blue-lead); }
.payment-status.confirmed{ background:#DCEFE0; color:#2C7A44; }
.upi-pay-box{ background:var(--paper); border:1px dashed var(--line); border-radius:var(--radius); padding:16px; margin:14px 0; }
.upi-pay-box .upi-id{ font-family:'Space Mono', monospace; font-size:15px; user-select:all; }
.upi-pay-box .btn{ margin-top:12px; }
.utr-form{ display:flex; gap:10px; margin-top:14px; flex-wrap:wrap; }
.utr-form input{
  flex:1; min-width:160px; padding:10px 12px; border:1px solid var(--line); border-radius:var(--radius);
  background:var(--paper); font-size:14px;
}

.commission-card{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:20px; margin-bottom:16px; }
.commission-card .timeline{ margin-top:14px; border-left:2px solid var(--line); padding-left:16px; display:flex; flex-direction:column; gap:12px; }
.commission-card .timeline .entry .when{ font-family:'Space Mono', monospace; font-size:11px; color:var(--graphite-soft); }
.commission-card .timeline .entry .note{ font-size:14px; margin-top:2px; }

.message-thread{ display:flex; flex-direction:column; gap:10px; max-height:420px; overflow-y:auto; padding:6px 2px; margin-bottom:16px; }
.message-bubble{ max-width:75%; padding:10px 14px; border-radius:14px; font-size:14px; line-height:1.4; }
.message-bubble.user{ align-self:flex-end; background:var(--eraser); color:#fff; border-bottom-right-radius:4px; }
.message-bubble.admin{ align-self:flex-start; background:var(--card); border:1px solid var(--line); border-bottom-left-radius:4px; }
.message-bubble .when{ display:block; font-family:'Space Mono', monospace; font-size:10px; opacity:.7; margin-top:4px; }
.message-form{ display:flex; gap:10px; }
.message-form textarea{
  flex:1; min-height:44px; max-height:120px; padding:10px 12px; border:1px solid var(--line);
  border-radius:var(--radius); background:var(--card); font-family:inherit; font-size:14px; resize:vertical;
}
.empty-note.small{ padding:8px 0; font-size:14px; }

@media (max-width:600px){
  .account-header{ gap:14px; }
  .account-header .btn{ margin-left:0; width:100%; text-align:center; }
  .message-bubble{ max-width:88%; }
}

/* account.html has no hamburger menu, unlike index.html — its (short) nav
   must stay reachable on small screens rather than disappearing with
   nothing to replace it. */
@media (max-width:640px){
  .account-nav{ flex-wrap:wrap; row-gap:10px; }
  .account-nav .navlinks{ display:flex; gap:16px; font-size:12px; order:3; width:100%; }
}