/* ============================================================================
   LION INK TATTOO SINGAPORE — by Cong Bui
   Design system. One ground, one accent, one voice.

   PALETTE PROVENANCE. Every value below was SAMPLED with PIL from the client's
   own logo, business card and tattoo work, then contrast-checked. Nothing is
   eyeballed and nothing is borrowed from a reference site.

     --paper   #E7E0D0  his seal disc measures #D8C8A8 with an #E8D8B8 highlight;
                        his card ground #D8D8C8. This sits between them, opened
                        up just enough to be a page ground.
     --seal    #8A1818  the 獅印 chop on his logo measures #881818. His actual
                        brand red. 7.18:1 on paper, 9.44:1 with white on it, so
                        it carries small text AND button fills on the light band.
     --scarlet #D9432F  the red sun disc in his samurai back piece measures
                        #B80818 / #C83818. Lifted to clear 4.51:1 on the dark
                        ground, where the oxblood would sit at 2.09 and fail.

   One hue, two grounds, each token used only where it passes.
   ========================================================================= */

:root{
  /* ── ground + ink ─────────────────────────────────────────── */
  --ink:        #0B0A0A;
  --ink-2:      #141210;          /* raised surface on dark */
  --ink-3:      #2A2320;          /* plate edge on dark. his photos are shot
                                     against black, so a plate needs an edge or
                                     it dissolves into the page. */
  --paper:      #E7E0D0;
  --paper-2:    #DDD5C2;          /* raised surface on light */

  /* ── the one accent, two grounds ──────────────────────────── */
  --accent:     #D9432F;          /* DARK grounds. 4.51:1 on --ink */
  --accent-ink: #8A1818;          /* PAPER grounds. 7.18:1, white-on-it 9.44:1 */
  --accent-lift:#E9543E;          /* hover only */

  /* ── text ─────────────────────────────────────────────────── */
  --on-ink:       #F2EFE7;        /* 17.21:1 */
  --on-ink-muted: #ADA69B;        /*  8.20:1 */
  --on-paper:       #17140F;      /* 13.97:1 */
  --on-paper-muted: #5C554B;      /*  5.59:1 */

  /* ── type ─────────────────────────────────────────────────── */
  --display: "Fraunces", "Libre Baskerville", Georgia, serif;
  --sans:    "Figtree", "Helvetica Neue", Arial, sans-serif;
  --mono:    "Fragment Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --fs-display: clamp(3.1rem, 10.5vw, 8.75rem);
  --fs-h1:      clamp(2.6rem, 7vw, 5.5rem);
  --fs-h2:      clamp(2rem, 4.6vw, 3.6rem);
  --fs-h3:      clamp(1.3rem, 2.1vw, 1.75rem);
  --fs-lead:    clamp(1.06rem, 1.35vw, 1.3rem);
  --fs-body:    1rem;
  --fs-small:   0.875rem;
  --fs-micro:   0.75rem;

  --tr-display: -0.045em;
  --tr-h2:      -0.035em;
  --tr-h3:      -0.02em;
  --tr-micro:   0.14em;           /* micro labels only, and only in mono */

  --lh-display: 0.92;
  --lh-h2:      1.04;
  --lh-body:    1.62;

  /* ── space ────────────────────────────────────────────────── */
  --rail:   1240px;
  --gutter: clamp(1.15rem, 2.2vw, 2rem);
  --pad-loud:  clamp(4.75rem, 10vw, 8rem);
  --pad-quiet: clamp(6.5rem, 15vw, 11.5rem);

  --g1: 8px;  --g2: 12px; --g3: 16px; --g4: 24px;
  --g5: 32px; --g6: 40px; --g7: 56px; --g8: 80px;

  --radius: 0px;                  /* knife edge. the work is the ornament. */
  --ease:   cubic-bezier(.22,.75,.24,1);
}

/* ── reset ─────────────────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box }
/* the hidden ATTRIBUTE only works through a UA `display:none`, which any author
   display rule beats. .tile sets display:block, so filtered plates stayed
   visible while the counter said otherwise. */
[hidden]{ display:none !important }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto } }
body{
  margin:0; background:var(--ink); color:var(--on-ink);
  font-family:var(--sans); font-size:var(--fs-body);
  line-height:var(--lh-body); letter-spacing:0;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:clip;
}
img,svg,video{ max-width:100%; height:auto; display:block }
input,select,textarea,button{ font:inherit; font-size:16px }
a{ color:inherit }
h1,h2,h3,h4{ margin:0; font-family:var(--display); font-weight:800; text-wrap:balance }
p{ margin:0 }
ul,ol{ margin:0; padding:0; list-style:none }
/* figure ships with `margin:1em 40px` by default. Left in, it inflates every
   grid gap by 80px and lifts absolutely-positioned captions off the plate. */
figure,blockquote,fieldset{ margin:0 }

/* ── type roles ────────────────────────────────────────────── */
.display{
  font-size:var(--fs-display); letter-spacing:var(--tr-display);
  line-height:var(--lh-display); font-weight:900; text-transform:uppercase;
  font-variation-settings:"opsz" 144,"SOFT" 0,"WONK" 0;
}
h1{ font-size:var(--fs-h1); letter-spacing:var(--tr-display); line-height:.98;
    font-weight:900; font-variation-settings:"opsz" 144 }
h2{ font-size:var(--fs-h2); letter-spacing:var(--tr-h2); line-height:var(--lh-h2);
    font-variation-settings:"opsz" 96 }
h3{ font-size:var(--fs-h3); letter-spacing:var(--tr-h3); line-height:1.2; font-weight:700;
    font-variation-settings:"opsz" 24 }
.lead{ font-size:var(--fs-lead); line-height:1.5; max-width:46ch; color:var(--on-ink-muted) }
.paper .lead{ color:var(--on-paper-muted) }
.micro{
  font-family:var(--mono); font-size:var(--fs-micro); letter-spacing:var(--tr-micro);
  text-transform:uppercase; color:var(--on-ink-muted);
}
.paper .micro{ color:var(--on-paper-muted) }
.hot{ color:var(--accent) }
.paper .hot{ color:var(--accent-ink) }

/* ── layout ────────────────────────────────────────────────── */
.rail{ width:100%; max-width:var(--rail); margin-inline:auto; padding-inline:var(--gutter) }
.rail-wide{ width:100%; max-width:1560px; margin-inline:auto; padding-inline:var(--gutter) }
section{ padding-block:var(--pad-loud) }
section[data-tone="quiet"]{ padding-block:var(--pad-quiet) }
.paper{ background:var(--paper); color:var(--on-paper) }
.paper h1,.paper h2,.paper h3{ color:var(--on-paper) }

/* film grain: warms the flat dark ground so it never reads as a plastic slab */
.grain{ position:relative; isolation:isolate }
.grain::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:1; opacity:.045;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='.55'/></svg>");
}

/* ── buttons ───────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; gap:var(--g2);
  min-height:52px; padding:.9rem 1.5rem; border:0; border-radius:var(--radius);
  font-family:var(--sans); font-size:var(--fs-small); font-weight:700;
  letter-spacing:.02em; text-transform:uppercase; text-decoration:none;
  cursor:pointer; transition:background-color .28s var(--ease), color .28s var(--ease),
    transform .28s var(--ease);
}
.btn--solid{ background:var(--accent); color:#fff }
.btn--solid:hover{ background:var(--accent-lift) }
.paper .btn--solid{ background:var(--accent-ink) }
.paper .btn--solid:hover{ background:var(--accent) }
.btn--ghost{ background:transparent; color:var(--on-ink); box-shadow:inset 0 0 0 1px rgba(242,239,231,.34) }
.btn--ghost:hover{ background:rgba(242,239,231,.08) }
.paper .btn--ghost{ color:var(--on-paper); box-shadow:inset 0 0 0 1px rgba(23,20,15,.28) }
.paper .btn--ghost:hover{ background:rgba(23,20,15,.06) }
.btn__arw{ width:.95em; height:.95em; flex:none; transition:transform .28s var(--ease) }
.btn:hover .btn__arw{ transform:translate(2px,-2px) }

/* a text link that reads as an action, not a nav item */
.tlink{
  display:inline-flex; align-items:center; gap:.5rem; min-height:44px;
  font-size:var(--fs-small); font-weight:600; letter-spacing:.02em;
  text-transform:uppercase; text-decoration:none; color:inherit;
  border-bottom:1px solid currentColor; padding-bottom:2px;
  transition:color .24s var(--ease), gap .24s var(--ease);
}
.tlink:hover{ color:var(--accent); gap:.85rem }
.paper .tlink:hover{ color:var(--accent-ink) }

/* ══ HEADER ══ corner-anchored. no bar, no pill. ═════════════ */
.hdr{
  position:absolute; inset:var(--gutter) 0 auto; z-index:60;
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--g4); padding-inline:var(--gutter);
}
.hdr--solid{ position:sticky; top:0; inset-inline:0; padding-block:.85rem;
  background:color-mix(in srgb,var(--ink) 92%,transparent); backdrop-filter:blur(12px) }
.hdr__brand{ display:flex; align-items:center; gap:.7rem; text-decoration:none; flex:none;
  min-height:44px }
.hdr__brand img{ height:34px; width:auto }
.hdr__nav{ display:none; align-items:center; gap:clamp(1.1rem,2.2vw,2.1rem) }
.hdr__nav a{
  display:inline-flex; align-items:center; min-height:44px;
  font-size:var(--fs-small); font-weight:500; letter-spacing:.01em;
  text-decoration:none; color:var(--on-ink); opacity:.82;
  transition:opacity .22s var(--ease), color .22s var(--ease);
}
.hdr__nav a:hover{ opacity:1 }
.hdr__nav a[aria-current="page"]{ opacity:1; color:var(--accent) }
.hdr__cta{ display:none }
.burger{
  width:48px; height:48px; display:grid; place-items:center; flex:none;
  background:transparent; border:0; cursor:pointer; color:var(--on-ink);
}
.burger span{ display:block; width:24px; height:1.5px; background:currentColor; position:relative;
  transition:transform .3s var(--ease), opacity .2s }
.burger span::before,.burger span::after{ content:""; position:absolute; left:0; width:24px;
  height:1.5px; background:currentColor; transition:transform .3s var(--ease) }
.burger span::before{ top:-7px } .burger span::after{ top:7px }
.burger[aria-expanded="true"] span{ transform:rotate(45deg) }
.burger[aria-expanded="true"] span::before{ transform:translateY(7px) rotate(-90deg) }
.burger[aria-expanded="true"] span::after{ opacity:0 }
@media (min-width:940px){
  .hdr__nav{ display:flex } .hdr__cta{ display:inline-flex } .burger{ display:none }
}

/* full-page menu overlay */
.menu{
  position:fixed; inset:0; z-index:90; background:var(--ink);
  display:grid; grid-template-rows:auto 1fr auto; padding:var(--gutter);
}
.menu[hidden]{ display:none }
.menu__top{ display:flex; justify-content:space-between; align-items:center }
.menu__top img{ height:34px }
.menu__links{ display:grid; align-content:center; gap:var(--g2) }
.menu__links a{
  font-family:var(--display); font-weight:900; font-size:clamp(2.1rem,10vw,3.4rem);
  letter-spacing:-.035em; line-height:1.02; text-transform:uppercase;
  text-decoration:none; color:var(--on-ink);
  font-variation-settings:"opsz" 96;
}
.menu__links a:hover{ color:var(--accent) }
.menu__foot{ display:grid; gap:var(--g3) }
@media (prefers-reduced-motion:no-preference){
  .menu:not([hidden]) .menu__links a{ animation:mIn .42s var(--ease) both }
  .menu:not([hidden]) .menu__links a:nth-child(2){ animation-delay:.045s }
  .menu:not([hidden]) .menu__links a:nth-child(3){ animation-delay:.09s }
  .menu:not([hidden]) .menu__links a:nth-child(4){ animation-delay:.135s }
  .menu:not([hidden]) .menu__links a:nth-child(5){ animation-delay:.18s }
  .menu:not([hidden]) .menu__links a:nth-child(6){ animation-delay:.225s }
  .menu:not([hidden]) .menu__links a:nth-child(7){ animation-delay:.27s }
  @keyframes mIn{ from{ opacity:0; transform:translateY(14px) } to{ opacity:1; transform:none } }
}

/* ══ PAGE HEAD (interior pages) ══════════════════════════════ */
.phead{ padding-block:clamp(8rem,16vw,12rem) clamp(3rem,6vw,4.5rem) }
.phead__in{ display:grid; gap:var(--g4); max-width:24ch }
.phead .lead{ max-width:52ch }

/* ══ FOOTER ══════════════════════════════════════════════════ */
.foot{ background:var(--ink); color:var(--on-ink); padding-block:var(--pad-loud) var(--g6) }
.foot__grid{ display:grid; gap:var(--g7) }
.foot__brand img{ height:44px; margin-bottom:var(--g4) }
.foot__cols{ display:grid; gap:var(--g6) }
.foot__col h4{ font-family:var(--sans); font-size:var(--fs-micro); font-weight:700;
  letter-spacing:var(--tr-micro); text-transform:uppercase; color:var(--on-ink-muted);
  margin-bottom:var(--g3) }
.foot__col p{ display:block; font-size:var(--fs-small); color:var(--on-ink);
  opacity:.86; margin-bottom:.55rem; max-width:30ch }
/* links are touch targets, so they carry a real 44px height rather than
   sitting at the 23px their line-height alone would give them */
.foot__col a{ display:flex; align-items:center; min-height:44px; font-size:var(--fs-small);
  text-decoration:none; color:var(--on-ink); opacity:.86; max-width:32ch }
.foot__col a:hover{ opacity:1; color:var(--accent) }
.foot__base{ margin-top:var(--g8); display:flex; flex-wrap:wrap; gap:var(--g3) var(--g5);
  justify-content:space-between; align-items:center;
  font-size:var(--fs-micro); color:var(--on-ink-muted) }
.foot__base a{ color:var(--on-ink-muted); text-decoration:underline; text-underline-offset:3px;
  display:inline-flex; align-items:center; min-height:44px }
.foot__base a:hover{ color:var(--accent) }
@media (min-width:760px){ .foot__cols{ grid-template-columns:repeat(3,1fr) } }
@media (min-width:1040px){ .foot__grid{ grid-template-columns:minmax(0,.85fr) minmax(0,2fr) } }

/* ══ ENTRANCE MOTION ══════════════════════════════════════════
   TRANSFORM ONLY. No opacity, ever.
   A first pass used `from{opacity:.02}` and it left tiles sitting at
   opacity 0.02 at rest below the fold, i.e. genuinely invisible content.
   A translate cannot hide anything, degrades to nothing without
   animation-timeline support, and reads the same. */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .rise{ animation:rise linear both; animation-timeline:view(); animation-range:entry 2% cover 20% }
    @keyframes rise{ from{ transform:translateY(20px) } to{ transform:none } }
  }
}

/* ══ SHARED COMPONENTS ═══════════════════════════════════════ */

/* section masthead: label left, action right */
.mast{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between;
  gap:var(--g3) var(--g5); margin-bottom:var(--g8) }
/* 22ch was far too tight and broke every section heading into four narrow
   lines. A display heading wants 2 lines, so the measure is set on the
   heading itself in em, which tracks the font size. */
.mast__t{ display:grid; gap:var(--g3); min-width:0; flex:1 1 min(100%,30rem) }
.mast__t h2{ max-width:14em }

/* the work tile.
   HIS PHOTOS ARE SHOT AGAINST BLACK. Dropped straight onto a near-black page
   they lose their edge and stop reading as objects, so every plate carries a
   hairline mount and its own slightly-raised ground. */
.tile{ position:relative; display:block; overflow:clip; background:var(--ink-2);
  text-decoration:none; color:inherit;
  box-shadow:inset 0 0 0 1px var(--ink-3);
  transition:box-shadow .4s var(--ease) }
.tile:hover{ box-shadow:inset 0 0 0 1px rgba(217,67,47,.55) }
.paper .tile{ background:var(--paper-2); box-shadow:inset 0 0 0 1px rgba(23,20,15,.16) }
.tile img{ width:100%; height:100%; object-fit:cover; aspect-ratio:3/4;
  transition:transform .7s var(--ease) }
.tile:hover img{ transform:scale(1.035) }
@media (hover:none){ .tile:hover img{ transform:none } }
.tile__cap{ position:absolute; inset:auto 0 0; padding:var(--g5) var(--g4) var(--g4);
  display:grid; gap:.3rem;
  background:linear-gradient(to top,rgba(11,10,10,.92),rgba(11,10,10,.55) 55%,transparent);
}
.tile__cap b{ font-family:var(--display); font-weight:800; font-size:1.05rem;
  letter-spacing:-.02em; font-variation-settings:"opsz" 24 }
.tile__cap span{ font-family:var(--mono); font-size:var(--fs-micro);
  letter-spacing:var(--tr-micro); text-transform:uppercase; color:var(--on-ink-muted) }

/* numbered editorial list */
.steps{ display:grid; gap:var(--g8) }
.steps li{ display:grid; grid-template-columns:3.25rem minmax(0,1fr); gap:var(--g4);
  align-items:start }
.steps__n{ font-family:var(--mono); font-size:1rem; line-height:1;
  color:var(--accent); transform:translateY(.35em); font-variant-numeric:tabular-nums }
.steps li > div{ display:grid; gap:var(--g2) }
.steps li h3{ line-height:1.05 }
.steps li p{ max-width:52ch; color:var(--on-ink-muted) }
.paper .steps li p{ color:var(--on-paper-muted) }
@media (min-width:900px){ .steps{ grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--g8) var(--g7) } }

/* FAQ / accordion, native */
.faq details{ padding-block:var(--g4) }
.faq summary{ list-style:none; cursor:pointer; display:flex; justify-content:space-between;
  gap:var(--g4); align-items:center; min-height:44px; font-weight:600; font-size:1.05rem }
.faq summary::-webkit-details-marker{ display:none }
.faq summary::after{ content:"+"; font-family:var(--mono); font-size:1.15rem; line-height:1;
  color:var(--accent); flex:none; transition:transform .3s var(--ease) }
.faq details[open] summary::after{ transform:rotate(45deg) }
.faq p{ padding-top:var(--g3); max-width:62ch; color:var(--on-ink-muted) }
.paper .faq p{ color:var(--on-paper-muted) }
.faq details + details{ box-shadow:inset 0 1px 0 rgba(242,239,231,.1) }
.paper .faq details + details{ box-shadow:inset 0 1px 0 rgba(23,20,15,.12) }

/* stat row */
.stats{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--g6) var(--g5) }
.stats b{ display:block; font-family:var(--display); font-weight:900;
  font-size:clamp(2.3rem,4.6vw,3.4rem); letter-spacing:-.045em; line-height:.95;
  font-variation-settings:"opsz" 96 }
.stats span{ font-family:var(--mono); font-size:var(--fs-micro);
  letter-spacing:var(--tr-micro); text-transform:uppercase; color:var(--on-ink-muted) }
.paper .stats span{ color:var(--on-paper-muted) }
@media (min-width:760px){ .stats{ grid-template-columns:repeat(4,1fr) } }

/* split: media cluster + body */
.split{ display:grid; gap:var(--g7) }
.split__body{ display:grid; gap:var(--g4); align-content:center }
.split__body p{ max-width:48ch; color:var(--on-ink-muted) }
.paper .split__body p{ color:var(--on-paper-muted) }
@media (min-width:900px){
  .split{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(2.5rem,5vw,5.5rem);
    align-items:center }
  .split--flip .split__media{ order:2 }
}

/* skip link */
.skip{ position:absolute; left:-9999px; top:0; z-index:200; padding:1rem 1.4rem;
  background:var(--accent); color:#fff; font-weight:700 }
.skip:focus{ left:0 }
:focus-visible{ outline:2px solid var(--accent-lift); outline-offset:3px }

/* ══ CLOSING CTA ══ his own ink lion, used at real scale ════ */
.cta{ position:relative; background:var(--ink); color:var(--on-ink); overflow:clip }
.cta h2{ color:var(--on-ink) }
.cta__lion{
  position:absolute; z-index:0; pointer-events:none; user-select:none;
  right:-14%; bottom:-8%; width:min(62vw,720px); height:auto;
  opacity:.20;   /* the PNG is already cream on transparent, so no invert */
}
.cta__in{ position:relative; z-index:2; display:grid; gap:var(--g7) }
.cta__t{ margin:0; font-size:clamp(3rem,10vw,7.5rem) }
.cta__side{ display:grid; gap:var(--g5); justify-items:start }
.cta__side .lead{ max-width:40ch; color:var(--on-ink-muted) }
.cta__row{ display:flex; flex-wrap:wrap; gap:var(--g3) }
.cta__addr{ font-style:normal; font-size:var(--fs-small); line-height:1.55;
  color:var(--on-ink-muted); display:grid; gap:.35rem }
.cta__addr .micro{ color:var(--accent) }
@media (min-width:960px){
  .cta__in{ grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:clamp(2.5rem,5vw,5rem); align-items:end }
}