/* Hallmark · shape: Statement sheet (kept content) · genre: editorial · theme: Grid (deal 3/3, seed small-indian-online-store-567b·97ded366·2026-11-07·r0) · redesign: full
 * hero: Stage, the field bleeding off the right edge from column 7 · nav: edge-aligned, the logo on paper and four links on the field · footer: mast, the logo large over the policy links · imagery: none, the brand logo only · signature: the headline overprinting the brand-blue field, white where it crosses
 * axes: light/grotesk-sans/cool · posture: full-palette · contrast: pass · fold: pass · job: contact (email, WhatsApp) · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H5 E4 S3 R5 V4 · weakest: S, a holding page has few facts; carried it with the brand's own navy, blue and violet and the overprint instead of adding claims */
/* Hallmark · dismissed 77 · the opening-soon holding page keeps only its own content (headline, line, contact, footer) until the store opens; a redesign adds no sections */
/* Hallmark · reworded "© 2026 Adisia Store. All rights reserved." to "© 2026 Adisia Store" · 19 names the stock footer line */
@import url("./tokens.css");
@import url("./base.css");

:root { --nav-h: 80px; }

/* The skip link */
.skip { position: absolute; left: var(--space-md); top: calc(-1 * var(--space-3xl)); z-index: var(--z-toast); padding: var(--space-xs) var(--space-md); background: var(--color-ink); color: var(--color-paper); }
.skip:focus-visible { top: var(--space-md); }

/* Links, all states */
a { color: inherit; text-decoration: underline; text-decoration-thickness: var(--rule-hair); text-underline-offset: 0.28em; transition: color var(--dur-short) var(--ease-out), text-decoration-color var(--dur-short) var(--ease-out); }
a:hover { color: var(--color-mark); }
a:active { color: var(--color-ink-2); }
a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }

/* The sheet: one full screen, twelve columns, the field from column 7 to the bleed */
.sheet {
  position: relative;
  display: grid;
  grid-template-columns:
    [full-start] minmax(calc(var(--gutter) - var(--gap-columns)), 1fr)
    [content-start] repeat(12, minmax(0, calc((var(--container) - 2 * var(--gutter) - 11 * var(--gap-columns)) / 12)))
    [content-end] minmax(calc(var(--gutter) - var(--gap-columns)), 1fr) [full-end];
  grid-template-rows: var(--nav-h) minmax(var(--space-xl), 1fr) auto auto minmax(var(--space-xl), 1.05fr);
  column-gap: var(--gap-columns);
  min-height: 100svh;
  background: var(--color-paper);
}
.sheet__field { grid-column: 8 / full-end; grid-row: 1 / -1; background: var(--color-field); }
.sheet__main { grid-column: full-start / full-end; grid-row: 2 / -1; display: grid; grid-template-columns: subgrid; grid-template-rows: subgrid; }

.sheet__logo { grid-column: content-start / span 4; grid-row: 1; align-self: center; justify-self: start; text-decoration: none; }
.sheet__logo img { display: block; height: 36px; width: auto; }

.sheet__nav { grid-column: 9 / content-end; grid-row: 1; align-self: center; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-xs) var(--space-lg); color: var(--color-field-ink); --color-focus: var(--color-field-ink); }
.sheet__nav a { font: 500 var(--text-md)/1.2 var(--font-body); text-decoration: none; white-space: nowrap; }
.sheet__nav a:hover { color: var(--color-field-ink); text-decoration: underline; text-decoration-thickness: var(--rule-hair); }
.sheet__nav a:active { opacity: 0.85; }

/* The head, set at poster scale; the copy above turns field-ink past column 7 like an overprint */
.sheet__head {
  grid-column: content-start / content-end; grid-row: 2; align-self: end;
  margin: 0; max-width: none;
  font: var(--display-weight) clamp(4.5rem, 12.5vw, 11.5rem)/0.9 var(--font-display);
  letter-spacing: -0.045em; color: var(--color-ink);
  overflow-wrap: break-word; min-width: 0; text-wrap: balance;
}
.sheet__head--over { color: var(--color-field-ink); clip-path: inset(0 0 0 calc(6 * (100% + var(--gap-columns)) / 12)); pointer-events: none; }

.sheet__lead { grid-column: content-start / span 5; grid-row: 3; margin: var(--space-2xl) 0 0; max-width: 38ch; color: var(--color-ink-2); }

.sheet__contact { grid-column: 9 / content-end; grid-row: 3; margin-top: var(--space-2xl); color: var(--color-field-ink); --color-focus: var(--color-field-ink); }
.sheet__contact h2 { margin: 0 0 var(--space-sm); font: var(--display-weight) var(--text-title)/1.1 var(--font-display); letter-spacing: var(--tracking-display); }
.sheet__contact p { margin: 0; font: 400 var(--text-md)/1.6 var(--font-body); }
.sheet__contact a { font: 500 var(--text-xl)/1.4 var(--font-display); white-space: nowrap; }
.sheet__contact a:hover { color: var(--color-field-ink); text-decoration-thickness: 2px; }
.sheet__contact p + p { margin-top: var(--space-sm); }

/* The mast footer */
.mast { padding-block: var(--section-gap-s); background: var(--color-paper-2); color: var(--color-ink); }
.mast__inner { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: var(--space-xl); align-items: end; }
.mast__logo { grid-column: 1 / span 6; text-decoration: none; }
.mast__logo img { display: block; width: min(100%, 520px); height: auto; }
.mast__links { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-lg); }
.mast__links a { font: 500 var(--text-md)/1.4 var(--font-body); white-space: nowrap; }
.mast__legal { grid-column: 1 / -1; margin: 0; font-size: var(--text-sm); color: var(--color-muted); }

/* Under 60rem the sheet stacks: logo and links, the head, the line, then the field as its own band */
@media (max-width: 60rem) {
  .sheet { display: block; min-height: 0; padding: 0; }
  .sheet__field, .sheet__head--over { display: none; }
  .sheet__logo, .sheet__nav, .sheet__head, .sheet__lead { padding-inline: var(--gutter); }
  .sheet__logo { display: block; padding-top: var(--space-lg); }
  .sheet__logo img { height: 32px; }
  .sheet__nav { justify-content: flex-start; padding-top: var(--space-md); color: var(--color-ink); --color-focus: var(--color-accent); }
  .sheet__nav a:hover { color: var(--color-mark); }
  .sheet__head { padding-top: var(--space-3xl); font-size: clamp(3.25rem, 13vw, 4.5rem); line-height: 0.95; }
  .sheet__lead { margin: var(--space-lg) 0 var(--space-2xl); }
  .sheet__contact { margin: 0; padding: var(--space-2xl) var(--gutter); background: var(--color-field); }
  .mast__logo { grid-column: 1 / -1; }
}