/* ═══════════════════════════════════════════════════════════════════
   Makeup by Jazy — newspaper front page, baby pink stock.
   Structure comes from the rules and boxes, not from colour.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  --paper:#f7e4e7; --paper2:#fbeef0; --ink:#141013; --rule:#141013;
  --bar:#141013; --barText:#f7e4e7; --accent:#c9899a; --tint:#f0d3d8;
  --halftone:rgba(20,16,19,.22);
  --wa:#25d366;
  --head:"Anton",Impact,sans-serif;
  --didone:"Playfair Display",Georgia,serif;
  --cond:"Oswald","Arial Narrow",sans-serif;
  --body:"EB Garamond",Georgia,serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--body);font-size:16px;line-height:1.45;
  -webkit-font-smoothing:antialiased;
}
/* newsprint grain */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:99;opacity:.5;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2'/><feColorMatrix type='saturate' values='0'/></filter><rect width='120' height='120' filter='url(%23n)' opacity='.35'/></svg>");
  mix-blend-mode:multiply;
}
.sheet{max-width:1180px;margin:0 auto;padding:14px clamp(12px,3vw,30px) 28px}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.small{font-size:13px;opacity:.78;margin:0}

/* ── rules ── */
.rule{border-top:1px solid var(--rule)}
.rule-d{border-top:3px double var(--rule);height:0;margin:6px 0}
.rule-t{border-top:5px solid var(--rule);border-bottom:1px solid var(--rule);height:4px;margin:5px 0}

/* ── masthead ── */
.masthead{text-align:center;padding:16px 0 2px}
.masthead h1{
  font-family:var(--head);font-size:clamp(58px,14.5vw,178px);line-height:.82;
  margin:0;letter-spacing:-.01em;text-transform:uppercase;
}
.masthead p{
  font-family:var(--didone);font-size:clamp(17px,3.4vw,40px);
  margin:2px 0 8px;letter-spacing:.06em;text-transform:uppercase;font-weight:400;
}
.locbar{
  background:var(--bar);color:var(--barText);text-align:center;
  font-family:var(--cond);font-weight:600;letter-spacing:.16em;
  font-size:clamp(10px,1.35vw,14px);padding:7px 10px;text-transform:uppercase;
  border:1px solid var(--rule);
}

/* ── boxes & headings ── */
.box{border:1px solid var(--rule);padding:14px 16px;background:var(--paper2)}
.barhead{
  background:var(--bar);color:var(--barText);font-family:var(--head);
  text-transform:uppercase;text-align:center;padding:9px 12px;
  font-size:clamp(18px,2.4vw,30px);letter-spacing:.01em;line-height:1;
}
.serifhead{font-family:var(--didone);font-size:clamp(22px,3.2vw,40px);line-height:1;margin:0 0 4px}
.antonhead{font-family:var(--head);text-transform:uppercase;font-size:clamp(24px,3.6vw,46px);line-height:.95;margin:0}
.just{text-align:justify;hyphens:auto;font-size:15.5px;margin:0 0 .8em}
.just:last-child{margin-bottom:0}

/* ── photos: halftone placeholder + swipeable carousel ── */
.photo,.carousel{position:relative;overflow:hidden;border:1px solid var(--rule);background:var(--tint)}
.p-tall{aspect-ratio:5/6}
.p-sq{aspect-ratio:1/1}

.photo::before{
  content:"";position:absolute;inset:0;
  background-image:radial-gradient(var(--halftone) 34%,transparent 35%);
  background-size:6px 6px;
}
.photo::after{
  content:attr(data-label);position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--cond);font-weight:600;letter-spacing:.24em;text-transform:uppercase;
  font-size:11px;opacity:.62;
}

.carousel .track{
  display:flex;height:100%;overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;-ms-overflow-style:none;scroll-behavior:smooth;
}
.carousel .track::-webkit-scrollbar{display:none}
.carousel .slide{
  flex:0 0 100%;scroll-snap-align:center;margin:0;position:relative;height:100%;
}
.carousel .slide img{width:100%;height:100%;object-fit:cover}
.carousel .slide figcaption{
  position:absolute;inset:auto 0 0;padding:16px 10px 7px;
  background:linear-gradient(to top,rgba(20,16,19,.72),transparent);
  color:#fff;font-family:var(--cond);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;text-align:center;
}
.carousel .arw{
  position:absolute;top:50%;translate:0 -50%;z-index:3;
  border:1px solid var(--rule);background:var(--paper2);color:var(--ink);
  width:30px;height:30px;font-size:19px;line-height:1;cursor:pointer;
  display:grid;place-items:center;padding:0;opacity:.86;
}
.carousel .arw:hover{background:var(--bar);color:var(--barText)}
.carousel .prev{left:6px}
.carousel .next{right:6px}
.carousel .dots{
  position:absolute;left:0;right:0;bottom:8px;z-index:3;
  display:flex;gap:6px;justify-content:center;
}
.carousel .dot{
  width:7px;height:7px;padding:0;border-radius:50%;cursor:pointer;
  border:1px solid var(--ink);background:transparent;
}
.carousel .dot.on{background:var(--ink)}

/* ── front grid ── */
.front{display:grid;grid-template-columns:165px 1.05fr 1.3fr;gap:12px;margin-top:10px}
.front .stack{display:grid;gap:12px;grid-template-rows:auto 1fr}
.facts{border:1px solid var(--rule);padding:10px 12px;background:var(--paper2)}
.facts h4{
  font-family:var(--head);text-transform:uppercase;font-size:15px;margin:0 0 6px;
  border-bottom:1px solid var(--rule);padding-bottom:5px;
}
.facts ul{list-style:none;margin:0;padding:0;font-size:13.5px;line-height:1.75}

/* ── hours / contact / rates ── */
.cols{display:grid;grid-template-columns:1fr 1fr 1.15fr;gap:14px;margin-top:14px;align-items:start}
.hours dl{margin:0;display:grid;grid-template-columns:1fr auto;gap:6px 10px;font-size:15px}
.hours dt{font-family:var(--cond);font-weight:600;text-transform:uppercase;letter-spacing:.08em;font-size:13px}
.hours dd{margin:0;text-align:right}

.contact p{margin:0 0 10px;font-size:15px}
.contact strong{
  font-family:var(--cond);font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;font-size:11px;display:block;margin-bottom:2px;
}
.contact .note{display:block;font-size:12.5px;opacity:.7;font-style:italic}
.contact a{border-bottom:1px solid var(--accent)}

.wa-line{
  display:flex;align-items:center;gap:8px;margin:0 0 12px;padding:9px 12px;
  border:1px solid var(--rule);background:var(--wa);color:var(--ink);
  font-family:var(--cond);font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;font-size:12px;
}
.wa-line:hover{filter:brightness(.93)}

.social{display:grid;grid-template-columns:1fr 1fr;gap:6px 10px;font-size:13.5px}
.soc{display:flex;align-items:center;gap:6px;min-width:0}
.soc span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.soc:hover{color:var(--accent)}
.ico{flex:none}

.rates{width:100%;border-collapse:collapse;font-size:15px}
.rates th{
  font-family:var(--cond);font-weight:600;text-transform:uppercase;letter-spacing:.1em;
  font-size:11px;text-align:left;border-bottom:1px solid var(--rule);padding:0 0 6px;
}
.rates td{padding:8px 0;border-bottom:1px dotted var(--rule);vertical-align:top}
.rates .r{text-align:right}
.rates td.r{font-family:var(--didone);font-size:19px;white-space:nowrap}
.rates .svc{font-family:var(--cond);font-weight:600;text-transform:uppercase;letter-spacing:.06em;font-size:14px}
.rates .sub{font-size:13px;opacity:.7;display:block}

/* ── availability calendar ── */
.cal-wrap{margin-top:2px;border:1px solid var(--rule)}
.cal-inner{display:grid;grid-template-columns:1fr 300px}
.cal{padding:12px 14px}
.cal-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:10px}
.cal-month{font-family:var(--didone);font-size:22px}
.cal-note{font-family:var(--cond);font-size:11px;letter-spacing:.14em;text-transform:uppercase;opacity:.7}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.cal-dow{
  font-family:var(--cond);font-weight:600;font-size:10.5px;letter-spacing:.1em;
  text-align:center;text-transform:uppercase;padding:4px 0;opacity:.6;
}
.day{
  min-height:38px;display:grid;place-items:center;font-size:14px;
  border:1px solid var(--rule);background:var(--paper2);position:relative;
}
.day.free{cursor:pointer}
.day.free:hover,.day.on{background:var(--bar);color:var(--barText)}
.day.taken{
  background:repeating-linear-gradient(-45deg,transparent 0 3px,var(--halftone) 3px 4px);
  opacity:.55;
}
.day.pad{border-color:transparent;background:none}
.day.past{opacity:.35}

.cal-nav{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px;flex-wrap:wrap}
.calbtn{
  font-family:var(--cond);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  background:none;border:1px solid var(--rule);padding:6px 12px;cursor:pointer;color:inherit;
}
.calbtn:hover{background:var(--bar);color:var(--barText)}
.calbtn[disabled]{opacity:.3;cursor:default}
.calbtn[disabled]:hover{background:none;color:inherit}
.legend{font-family:var(--cond);font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.legend i{
  width:12px;height:12px;border:1px solid var(--rule);display:inline-block;
  margin:0 4px 0 10px;vertical-align:-2px;
}
.legend i:first-child{margin-left:0}
.legend i.t{background:repeating-linear-gradient(-45deg,transparent 0 3px,var(--halftone) 3px 4px)}

.cta{
  border-left:1px solid var(--rule);padding:16px;display:flex;
  flex-direction:column;justify-content:center;gap:10px;background:var(--tint);
}
.cta h3{font-family:var(--head);text-transform:uppercase;font-size:25px;line-height:1.08;margin:0}
.cta p{font-size:14px;margin:0}
.picked{font-family:var(--didone);font-size:17px;min-height:1.4em}

/* ── booking pickers: what, how many, where ──
   Everything is a tap. Square, one ink, reversed when chosen — the same
   furniture as the section bars, so it reads as part of the paper. */
.picks{display:flex;flex-direction:column;gap:9px}
.pick{display:flex;flex-direction:column;gap:5px}
.pick-lab{
  font-family:var(--cond);font-weight:600;text-transform:uppercase;
  letter-spacing:.16em;font-size:10px;
}
.opts{display:flex;flex-wrap:wrap;gap:5px}
.opt,.stepbtn,.sel{
  font-family:var(--cond);font-weight:500;text-transform:uppercase;
  letter-spacing:.1em;font-size:11px;color:var(--ink);
  border:1px solid var(--rule);background:var(--paper2);
  padding:8px 10px;cursor:pointer;line-height:1;
}
.opt:hover,.stepbtn:hover:not(:disabled),.sel:hover{background:var(--paper)}
.opt.on{background:var(--bar);color:var(--barText)}
.sel{
  width:100%;padding:9px 10px;cursor:pointer;
  appearance:none;-webkit-appearance:none;border-radius:0;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),
                   linear-gradient(135deg,var(--ink) 50%,transparent 50%);
  background-position:calc(100% - 15px) 50%,calc(100% - 10px) 50%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
  padding-right:28px;
}
.step{display:flex;align-items:stretch;gap:5px}
.stepbtn{width:34px;font-size:14px;font-weight:600;padding:0}
.stepbtn:disabled{opacity:.35;cursor:default}
.stepval{
  font-family:var(--didone);font-size:17px;min-width:38px;text-align:center;
  border:1px solid var(--rule);background:var(--paper2);
  display:flex;align-items:center;justify-content:center;
}
.wa{
  display:flex;align-items:center;justify-content:center;gap:8px;
  background:var(--wa);color:var(--ink);font-family:var(--cond);font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;font-size:12.5px;
  padding:13px 10px;border:1px solid var(--rule);
}
.wa:hover{filter:brightness(.93)}
.cta-social{grid-template-columns:repeat(3,auto);justify-content:center;gap:14px}
.cta-social .soc span{display:none}
.cta-social .soc{
  width:36px;height:36px;justify-content:center;
  border:1px solid var(--rule);background:var(--paper2);
}
.cta-social .soc:hover{background:var(--bar);color:var(--barText)}

/* ── policies ── */
.pol-head{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;margin-top:2px}
.stamp{
  border:1px solid var(--rule);background:var(--bar);color:var(--barText);
  font-family:var(--didone);font-style:italic;text-align:center;padding:10px 14px;
  font-size:14px;line-height:1.15;
}
.pol-sub{
  text-align:center;font-family:var(--didone);font-size:clamp(13px,1.7vw,19px);
  letter-spacing:.02em;margin:4px 0 10px;text-transform:uppercase;
}
.pol{display:grid;grid-template-columns:repeat(var(--n,4),1fr);border:1px solid var(--rule)}
.pol div{padding:14px;border-right:1px solid var(--rule)}
.pol div:last-child{border-right:0}
.pol h4{font-family:var(--head);text-transform:uppercase;font-size:16px;margin:0 0 8px;text-align:center}
.pol p{font-size:13.5px;margin:0;text-align:justify;hyphens:auto}

.foot{
  text-align:center;font-family:var(--cond);letter-spacing:.2em;text-transform:uppercase;
  font-size:11px;padding:14px 0 0;opacity:.75;
}

/* ── responsive ── */
@media(max-width:900px){
  .front{grid-template-columns:1fr 1fr}
  .front .stack{grid-column:1/-1;grid-template-columns:1fr 1fr;grid-template-rows:none}
  .cols{grid-template-columns:1fr 1fr}
  .cols .rates-box{grid-column:1/-1}
  .cal-inner{grid-template-columns:1fr}
  .cta{border-left:0;border-top:1px solid var(--rule)}
  .pol{grid-template-columns:1fr 1fr}
  .pol div{border-bottom:1px solid var(--rule)}
  .pol div:nth-child(2n){border-right:0}
  .pol div:nth-last-child(-n+2){border-bottom:0}
}
@media(max-width:620px){
  .front{grid-template-columns:1fr}
  .front .stack{grid-template-columns:1fr 1fr}
  .cols{grid-template-columns:1fr}
  .pol{grid-template-columns:1fr}
  .pol div{border-right:0;border-bottom:1px solid var(--rule)}
  .pol div:last-child{border-bottom:0}
  .social{grid-template-columns:1fr}
  .carousel .arw{width:34px;height:34px}
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .carousel .track{scroll-behavior:auto}
}

/* ═══════════════════════════════════════════════════════════════════
   Arabic — /ar
   The mark stays Anton: it is a logo, not a word. Everything around it
   changes face. Amiri carries the columns the way EB Garamond does in
   English; Cairo takes Anton's job in the bars, where a heavy geometric
   Arabic reads as the same kind of loud.
   ═══════════════════════════════════════════════════════════════════ */
[dir="rtl"]{
  --head:"Cairo","Noto Kufi Arabic",sans-serif;
  --didone:"Amiri",Georgia,serif;
  --cond:"Cairo","Noto Kufi Arabic",sans-serif;
  --body:"Amiri",Georgia,serif;
}
[dir="rtl"] body{font-size:17px;line-height:1.75}

/* the mark is untouched, and stays left-to-right inside a right-to-left page */
[dir="rtl"] .masthead{direction:ltr}
[dir="rtl"] .masthead h1{font-family:"Anton",Impact,sans-serif;letter-spacing:-.01em}
[dir="rtl"] .masthead p{font-family:"Playfair Display",Georgia,serif}

/* Cairo needs its heaviest weight to carry Anton's job */
[dir="rtl"] .barhead,
[dir="rtl"] .antonhead,
[dir="rtl"] .cta h3,
[dir="rtl"] .stamp{font-weight:900;letter-spacing:0;line-height:1.25}
[dir="rtl"] .barhead{padding:11px 12px}
[dir="rtl"] .locbar,
[dir="rtl"] .pick-lab,
[dir="rtl"] .lab,
[dir="rtl"] .opt,
[dir="rtl"] .sel,
[dir="rtl"] .wa,
[dir="rtl"] .calbtn{letter-spacing:0;font-weight:500}
[dir="rtl"] .serifhead{line-height:1.3}

/* Arabic does not hyphenate the way the Latin columns do */
[dir="rtl"] .just{hyphens:none;text-align:justify}

/* borders that were on the left belong on the right */
[dir="rtl"] .cta{border-left:0;border-right:1px solid var(--rule)}
@media (max-width:860px){
  [dir="rtl"] .cta{border-right:0;border-top:1px solid var(--rule)}
}

/* the strapline bar also carries the language toggle */
.locbar{position:relative}
.lang{
  position:absolute;inset-inline-end:10px;top:50%;translate:0 -50%;
  font-family:var(--cond);font-weight:600;letter-spacing:.14em;font-size:11px;
  border:1px solid var(--barText);padding:3px 8px;line-height:1.4;
}
.lang:hover{background:var(--barText);color:var(--bar)}
@media (max-width:520px){
  .locbar{padding-inline-end:56px}
}

/* digits, prices and phone numbers read left to right in any direction */
[dir="rtl"] .rates td.r,
[dir="rtl"] .hours dd,
[dir="rtl"] .cal-grid,
[dir="rtl"] .picked,
[dir="rtl"] .stepval{direction:ltr}
[dir="rtl"] .hours dd{text-align:left}
[dir="rtl"] .rates td.r{text-align:left}

/* Text that has not been translated yet is still English sitting in a
   right-to-left page. `plaintext` lets each paragraph take its direction from
   its own first letter, so an English paragraph reads as English — full stops
   at the end — instead of being dragged into Arabic order. */
[dir="rtl"] .just,
[dir="rtl"] .small,
[dir="rtl"] .facts li,
[dir="rtl"] .pol p,
[dir="rtl"] .contact p,
[dir="rtl"] .hours dt,
[dir="rtl"] .rates .svc,
[dir="rtl"] .rates .sub,
[dir="rtl"] .cta p{unicode-bidi:plaintext}
[dir="rtl"] .soc span{direction:ltr;text-align:right}
/* the table header was pinned left for English; in Arabic it belongs right,
   with only the price column staying on the far side */
[dir="rtl"] .rates th{text-align:right}
[dir="rtl"] .rates th.r{text-align:left}

/* "Meet Your MAKEUP ARTIST" keeps its own faces on the Arabic page. Anton and
   Playfair are listed first and the Arabic faces second, so Latin letters get
   Anton and any Arabic typed here still has a face to fall back to. */
[dir="rtl"] .antonhead{font-family:"Anton","Cairo",Impact,sans-serif;letter-spacing:-.01em}
[dir="rtl"] .serifhead{font-family:"Playfair Display","Amiri",Georgia,serif}
[dir="rtl"] .antonhead,
[dir="rtl"] .serifhead{unicode-bidi:plaintext}

/* the one field on the card, and the button it holds back */
.namein,.timein{
  font-family:var(--body);font-size:16px;color:var(--ink);
  border:1px solid var(--rule);background:var(--paper2);
  padding:9px 10px;width:100%;border-radius:0;
}
.namein::placeholder,.timein::placeholder{color:var(--ink);opacity:.45;font-style:italic}
.wa.off{filter:grayscale(1);opacity:.55}
.wa-hint{
  font-family:var(--cond);font-weight:500;text-transform:uppercase;
  letter-spacing:.12em;font-size:10.5px;margin:0;color:var(--ink);
}
[dir="rtl"] .namein{font-family:var(--body)}
/* a time is digits: it reads left to right whatever the page does */
.timein{font-family:var(--didone);direction:ltr;text-align:start}
[dir="rtl"] .wa-hint{letter-spacing:0;font-weight:500}