/* ==========================================================================
   AALANKAAR STUDIOS — 02 · RESET, ELEMENTS, TYPOGRAPHY, PRIMITIVES
   ========================================================================== */

*,
*::before,
*::after{ margin:0; padding:0; box-sizing:border-box; }

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
  scroll-padding-top:96px;
}

body{
  background:var(--bg);
  color:var(--fg);
  font-family:var(--font-sans);
  font-size:var(--fs-base);
  font-weight:400;
  line-height:var(--lh-normal);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

/* The pointer is drawn by us, not the OS — but only where a real pointer
   exists, and never while the visitor prefers reduced motion. */
@media (hover:hover) and (pointer:fine){
  body.has-custom-cursor,
  body.has-custom-cursor a,
  body.has-custom-cursor button,
  body.has-custom-cursor input,
  body.has-custom-cursor select,
  body.has-custom-cursor textarea,
  body.has-custom-cursor [role="button"]{ cursor:none; }
}

img,
picture,
video,
svg{ display:block; max-width:100%; height:auto; }

a{ color:inherit; text-decoration:none; }

button{
  font:inherit;
  color:inherit;
  background:none;
  border:none;
  cursor:pointer;
}

input,
textarea,
select{ font:inherit; color:inherit; }

ul,
ol{ list-style:none; }

::selection{ background:var(--c-vermilion); color:var(--c-ivory); }

/* Focus is visible and on-brand — never removed. */
:focus-visible{
  outline:2px solid var(--c-vermilion);
  outline-offset:3px;
  border-radius:var(--radius-sm);
}
.on-dark :focus-visible{ outline-color:var(--c-gold-soft); }

.skip-link{
  position:absolute; top:-100px; left:var(--s-4);
  z-index:calc(var(--z-cursor) + 1);
  background:var(--c-ink); color:var(--c-ivory);
  padding:var(--s-3) var(--s-4);
  font-size:var(--fs-label); letter-spacing:var(--ls-label); text-transform:uppercase;
  transition:top var(--dur-2) var(--ease);
}
.skip-link:focus{ top:var(--s-4); }

.screen-reader-text,
.sr-only{
  position:absolute !important;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); clip-path:inset(50%);
  white-space:nowrap; border:0;
}

/* --------------------------------------------------------------------------
   TYPOGRAPHY PRIMITIVES
   -------------------------------------------------------------------------- */

.t-display{
  font-family:var(--font-display);
  font-weight:500;
  line-height:var(--lh-tight);
  letter-spacing:var(--ls-display);
  font-optical-sizing:auto;
}

.t-mega{ font-family:var(--font-display); font-size:var(--fs-mega); font-weight:500; line-height:var(--lh-tight); letter-spacing:-0.035em; }
.t-xxl { font-family:var(--font-display); font-size:var(--fs-xxl);  font-weight:500; line-height:var(--lh-tight); letter-spacing:var(--ls-display); }
.t-xl  { font-family:var(--font-display); font-size:var(--fs-xl);   font-weight:500; line-height:var(--lh-snug);  letter-spacing:var(--ls-display); }
.t-lg  { font-family:var(--font-display); font-size:var(--fs-lg);   font-weight:500; line-height:1.16; }
.t-md  { font-family:var(--font-display); font-size:var(--fs-md);   font-weight:500; line-height:1.3; }

.t-italic{ font-family:var(--font-display); font-style:italic; font-weight:500; }
.t-script{ font-family:var(--font-script); font-style:italic; font-weight:400; }

.t-label{
  font-family:var(--font-sans);
  font-size:var(--fs-label);
  font-weight:500;
  letter-spacing:var(--ls-label);
  text-transform:uppercase;
  color:var(--fg);
  opacity:.58;
}
.t-label--gold{ color:var(--c-gold); opacity:1; }
.t-label--wide{ letter-spacing:var(--ls-wide); }

.t-serif-label{
  font-family:var(--font-label);
  font-size:var(--fs-sm);
  letter-spacing:.06em;
}

.t-body{
  font-size:var(--fs-base);
  line-height:var(--lh-loose);
  color:var(--fg-muted);
  max-width:var(--maxw-text);
}
.t-lead{
  font-family:var(--font-script);
  font-style:italic;
  font-size:clamp(1.25rem, 2.4vw, 1.85rem);
  line-height:1.45;
  color:var(--fg);
  max-width:52ch;
}

.t-num{ font-variant-numeric:tabular-nums lining-nums; }

/* --------------------------------------------------------------------------
   LAYOUT PRIMITIVES
   -------------------------------------------------------------------------- */

.wrap{
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.wrap--narrow{ max-width:var(--maxw-narrow); }
.wrap--flush{ max-width:100%; padding-inline:var(--gutter); }

.section{ padding-block:var(--section-y); position:relative; }
.section--tight{ padding-block:calc(var(--section-y) * .58); }
.section--flush-top{ padding-top:0; }

.stack > * + *{ margin-top:var(--flow, var(--s-4)); }

.grid{ display:grid; gap:var(--s-5); }
.grid--2{ grid-template-columns:repeat(2, minmax(0,1fr)); }
.grid--3{ grid-template-columns:repeat(3, minmax(0,1fr)); }
.grid--4{ grid-template-columns:repeat(4, minmax(0,1fr)); }
.grid--auto{ grid-template-columns:repeat(auto-fill, minmax(min(280px,100%), 1fr)); }

@media (max-width:1024px){
  .grid--4{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .grid--3{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width:640px){
  .grid--4,
  .grid--3,
  .grid--2{ grid-template-columns:1fr; }
}

.rule{ height:1px; background:var(--rule); border:0; }
.rule--gold{ background:var(--gold-line); }

/* A hairline that draws itself in when it enters the viewport. */
.rule--draw{
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform var(--dur-5) var(--ease);
}
.is-inview .rule--draw,
.rule--draw.is-inview{ transform:scaleX(1); }

/* --------------------------------------------------------------------------
   SECTION HEADING — the recurring editorial masthead
   -------------------------------------------------------------------------- */

.sec-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:var(--s-5);
  padding-bottom:var(--s-4);
  border-bottom:1px solid var(--rule);
  margin-bottom:var(--s-6);
}
.sec-head__index{
  font-family:var(--font-sans);
  font-size:var(--fs-label);
  letter-spacing:var(--ls-label);
  color:var(--c-gold);
  display:block;
  margin-bottom:var(--s-3);
}
.sec-head__title{ font-family:var(--font-display); font-size:var(--fs-xl); font-weight:500; line-height:var(--lh-snug); letter-spacing:var(--ls-display); }
.sec-head__aside{ max-width:38ch; text-align:right; color:var(--fg-muted); font-size:var(--fs-sm); line-height:var(--lh-loose); }

@media (max-width:820px){
  .sec-head{ flex-direction:column; align-items:flex-start; }
  .sec-head__aside{ text-align:left; }
}

/* --------------------------------------------------------------------------
   BUTTONS & LINKS
   -------------------------------------------------------------------------- */

.btn{
  --btn-bg:   var(--c-ink);
  --btn-fg:   var(--c-ivory);
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--s-2);
  padding:var(--s-3) var(--s-5);
  min-height:50px;
  background:var(--btn-bg);
  color:var(--btn-fg);
  font-family:var(--font-sans);
  font-size:var(--fs-label);
  font-weight:600;
  letter-spacing:var(--ls-label);
  text-transform:uppercase;
  border:1px solid var(--btn-bg);
  border-radius:var(--radius-sm);
  overflow:hidden;
  isolation:isolate;
  transition:color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}
/* The fill wipes up from the floor of the button on hover. */
.btn::before{
  content:"";
  position:absolute; inset:0;
  background:var(--c-vermilion);
  transform:translateY(101%);
  transition:transform var(--dur-3) var(--ease);
  z-index:-1;
}
.btn:hover::before,
.btn:focus-visible::before{ transform:translateY(0); }
.btn:hover{ color:var(--c-ivory); border-color:var(--c-vermilion); }

.btn--outline{ --btn-bg:transparent; --btn-fg:var(--fg); border-color:var(--fg); }
.btn--outline:hover{ color:var(--c-ivory); }

.btn--gold{ --btn-bg:var(--c-gold); --btn-fg:var(--c-ink-deep); }
.btn--ghost{ --btn-bg:transparent; --btn-fg:var(--fg); border-color:var(--rule); }

.btn--block{ width:100%; }
.btn--lg{ min-height:60px; padding-inline:var(--s-6); }
.btn--sm{ min-height:40px; padding:var(--s-2) var(--s-4); font-size:9.5px; }

.btn[disabled],
.btn.is-loading{ opacity:.5; pointer-events:none; }

/* Underline that grows from the left, retreats to the right. */
.link-underline{
  position:relative;
  display:inline-block;
  padding-bottom:2px;
}
.link-underline::after{
  content:"";
  position:absolute; left:0; bottom:0;
  width:100%; height:1px;
  background:currentColor;
  transform:scaleX(0);
  transform-origin:right center;
  transition:transform var(--dur-3) var(--ease);
}
.link-underline:hover::after,
.link-underline:focus-visible::after{ transform:scaleX(1); transform-origin:left center; }

/* Arrow link — the arrow steps forward, a second arrow follows it in. */
.link-arrow{
  display:inline-flex;
  align-items:center;
  gap:var(--s-2);
  font-size:var(--fs-label);
  font-weight:600;
  letter-spacing:var(--ls-label);
  text-transform:uppercase;
}
.link-arrow__icon{
  position:relative;
  width:26px; height:9px;
  overflow:hidden;
  display:inline-block;
}
.link-arrow__icon::before,
.link-arrow__icon::after{
  content:"→";
  position:absolute; top:50%; left:0;
  transform:translateY(-50%);
  transition:transform var(--dur-3) var(--ease);
  line-height:1;
}
.link-arrow__icon::after{ transform:translate(-130%,-50%); }
.link-arrow:hover .link-arrow__icon::before{ transform:translate(130%,-50%); }
.link-arrow:hover .link-arrow__icon::after{ transform:translate(0,-50%); }

/* --------------------------------------------------------------------------
   FORM FIELDS — shared by search, checkout, account, newsletter
   -------------------------------------------------------------------------- */

.field{ display:block; }
.field__label{
  display:block;
  font-size:var(--fs-label);
  letter-spacing:var(--ls-label);
  text-transform:uppercase;
  color:var(--fg-muted);
  margin-bottom:var(--s-2);
}
.field__input,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
textarea,
select{
  width:100%;
  background:transparent;
  border:0;
  border-bottom:1px solid var(--rule);
  padding:var(--s-3) 0;
  font-family:var(--font-sans);
  font-size:var(--fs-base);
  color:var(--fg);
  border-radius:0;
  transition:border-color var(--dur-2) var(--ease);
  -webkit-appearance:none;
  appearance:none;
}
select{
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 14px) center, calc(100% - 9px) center;
  background-size:5px 5px, 5px 5px;
  background-repeat:no-repeat;
  padding-right:var(--s-5);
}
.field__input:focus,
input:focus,
textarea:focus,
select:focus{ border-bottom-color:var(--c-vermilion); outline:none; }
textarea{ min-height:130px; resize:vertical; }
::placeholder{ color:var(--fg-faint); }

/* --------------------------------------------------------------------------
   MEDIA — the frame every product/editorial image lives in
   -------------------------------------------------------------------------- */

.media{
  position:relative;
  overflow:hidden;
  background:var(--bg-lift);
}
.media > img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform var(--dur-5) var(--ease), filter var(--dur-4) var(--ease);
  will-change:transform;
}
.media--portrait{ aspect-ratio:3 / 4; }
.media--square{   aspect-ratio:1 / 1; }
.media--land{     aspect-ratio:4 / 3; }
.media--wide{     aspect-ratio:16 / 9; }
.media--tall{     aspect-ratio:2 / 3; }

/* A slow warm veil that lifts on hover, so nothing looks flat at rest. */
.media::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(23,12,9,0) 42%, rgba(23,12,9,.28) 100%);
  opacity:.62;
  transition:opacity var(--dur-3) var(--ease);
  pointer-events:none;
}
.media:hover::after{ opacity:.24; }

/* --------------------------------------------------------------------------
   BADGES / PILLS
   -------------------------------------------------------------------------- */

.pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:5px 11px;
  border:1px solid var(--gold-line);
  border-radius:var(--radius-pill);
  font-size:9.5px;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-weight:500;
  color:var(--c-gold);
  white-space:nowrap;
}
.pill--solid{ background:var(--c-vermilion); border-color:var(--c-vermilion); color:var(--c-ivory); }
.pill--ink{   background:var(--c-ink); border-color:var(--c-ink); color:var(--c-ivory); }

/* --------------------------------------------------------------------------
   TEXTURE — a faint woven grain, because everything here is handmade
   -------------------------------------------------------------------------- */

.grain::before{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  opacity:.05;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   WORDPRESS EDITOR / CONTENT DEFAULTS
   -------------------------------------------------------------------------- */

.entry-content{ max-width:var(--maxw-text); }
.entry-content > * + *{ margin-top:var(--s-4); }
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4{ font-family:var(--font-display); font-weight:500; line-height:1.2; letter-spacing:var(--ls-display); }
.entry-content h1{ font-size:var(--fs-xl); }
.entry-content h2{ font-size:var(--fs-lg); margin-top:var(--s-6); }
.entry-content h3{ font-size:var(--fs-md); margin-top:var(--s-5); }
.entry-content p{ line-height:var(--lh-loose); color:var(--fg-muted); }
.entry-content a{ color:var(--c-vermilion); text-decoration:underline; text-underline-offset:3px; }
.entry-content ul{ list-style:disc; padding-left:1.15em; }
.entry-content ol{ list-style:decimal; padding-left:1.25em; }
.entry-content li{ margin-top:var(--s-2); color:var(--fg-muted); }
.entry-content blockquote{
  border-left:2px solid var(--c-gold);
  padding-left:var(--s-4);
  font-family:var(--font-script);
  font-style:italic;
  font-size:1.35rem;
  color:var(--fg);
}
.entry-content img{ margin-block:var(--s-5); }
.entry-content code{ font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:.9em; background:var(--bg-lift); padding:2px 6px; }
.entry-content table{ width:100%; border-collapse:collapse; }
.entry-content th,
.entry-content td{ padding:var(--s-3); border-bottom:1px solid var(--rule); text-align:left; }

.alignwide{ max-width:min(1200px, 92vw); margin-inline:auto; }
.alignfull{ max-width:100%; width:100%; }
.aligncenter{ margin-inline:auto; }
.alignleft{ float:left; margin:0 var(--s-4) var(--s-3) 0; }
.alignright{ float:right; margin:0 0 var(--s-3) var(--s-4); }
.wp-caption-text,
figcaption{ font-size:var(--fs-xs); color:var(--fg-faint); margin-top:var(--s-2); }

/* --------------------------------------------------------------------------
   STATE FLAGS
   Written by JavaScript, carrying no styling of their own. Declared here so
   they are discoverable, and so a child theme or a third-party stylesheet
   has a documented hook to attach to.

     html.is-ready    the entry loader has finished and left
     html.no-js       JavaScript did not run
     body.menu-open   the fullscreen menu is open (the nav stops auto-hiding)
     body.has-custom-cursor   the custom cursor has taken over the pointer
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   UTILITIES
   -------------------------------------------------------------------------- */

.u-center{ text-align:center; }
.u-right{ text-align:right; }
.u-muted{ color:var(--fg-muted); }
.u-gold{ color:var(--c-gold); }
.u-accent{ color:var(--c-vermilion); }
.u-nowrap{ white-space:nowrap; }
.u-relative{ position:relative; }
.u-hide{ display:none !important; }
@media (max-width:820px){ .u-hide\@md{ display:none !important; } }
@media (max-width:640px){ .u-hide\@sm{ display:none !important; } }

/* --------------------------------------------------------------------------
   BARE CONTENT SAFETY NET
   Content should always reach the page inside .entry-content — see
   aalankaar_page_content(). But a plugin, a shortcode or a template that
   escapes that path should still land on brand type and inside the gutters,
   rather than running edge to edge in the browser's default font. This is the
   floor, not the intended route.
   -------------------------------------------------------------------------- */

.site-main > h1,
.site-main > h2,
.site-main > h3,
.site-main > h4,
.site-main > p,
.site-main > ul,
.site-main > ol,
.site-main > blockquote,
.site-main > figure{
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.site-main > h1,
.site-main > h2,
.site-main > h3,
.site-main > h4{
  font-family:var(--font-display);
  font-weight:500;
  line-height:1.15;
  letter-spacing:var(--ls-display);
  margin-top:var(--s-5);
}
.site-main > p{
  line-height:var(--lh-loose);
  color:var(--fg-muted);
  margin-top:var(--s-3);
  max-width:min(var(--maxw), var(--maxw-text) + var(--gutter) * 2);
}
/* Scoped to the bare elements above — never `*`. A universal first-child
   margin here also hits <section class="hero">, cancelling the negative
   margin that tucks the hero under the navigation, which opens an ivory
   band the ivory nav then disappears into. */
.site-main > h1:first-child,
.site-main > h2:first-child,
.site-main > h3:first-child,
.site-main > h4:first-child,
.site-main > p:first-child{ margin-top:var(--s-7); }

.site-main > h1:last-child,
.site-main > h2:last-child,
.site-main > h3:last-child,
.site-main > h4:last-child,
.site-main > p:last-child,
.site-main > ul:last-child,
.site-main > ol:last-child,
.site-main > blockquote:last-child,
.site-main > figure:last-child{ margin-bottom:var(--s-7); }