/* نقش · صفيحة محفورة تتشقق
   الوضع الأساسي هنا (بلا JS أو بلا WebGL): صفائح متتابعة بنقش SVG ثابت، مقروءة كاملة
   وفي .gl تتحول الأقسام إلى طبقات ثابتة، ويقيس main.js أماكن نصوصها ليحفرها في الصفيحة نفسها */

:root{
  --ink:#0B0B0B;
  --paper:#F2EBDD;
  --roast:#B4470F;
  --ease:cubic-bezier(.16,1,.3,1);
  --edge:clamp(20px,4.5vw,72px);
  --safe-bottom:calc(100vh - 100svh + 60px);
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--ink);color:var(--paper)}
body{font-family:'Readex Pro',system-ui,sans-serif;font-weight:400;line-height:1.7;overflow-x:clip}
h1,h2,h3,p,ul{margin:0;padding:0}
ul{list-style:none}

/* ===== الصفائح ===== */
.sheet{
  position:relative;min-height:100vh;display:grid;grid-template-columns:minmax(0,1fr);align-content:center;gap:clamp(16px,3vh,32px);
  padding-block:clamp(28px,6vh,72px) var(--safe-bottom);padding-inline:var(--edge);
}
.paper{background-color:var(--paper);color:var(--ink)}
.ink{background-color:var(--ink);color:var(--paper)}

h1,h2{font-family:'Alexandria','Readex Pro',sans-serif;font-weight:700;line-height:1.3}
.copy p,.tag{font-size:clamp(18px,1.15rem + .55vw,28px);line-height:1.6;max-inline-size:24em}

/* الصفيحة الأولى: الباب */
.s0{justify-items:center;text-align:center;align-content:center;gap:0}
.s0 h1{font-size:min(33vw,50vh);line-height:1.3}
.s0 .tag{margin-block-start:clamp(4px,1vh,14px)}
.s0 .pull{position:absolute;inset-block-end:var(--safe-bottom);inset-inline:0;text-align:center;font-size:20px;font-weight:500}

/* الحبة والفنجال: نصف نقش ونصف نص */
.s1,.s3{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:clamp(16px,4vw,64px)}
.s1 h2{font-size:min(15vw,27vh)}
.s3 h2{font-size:min(10.5vw,24vh)}
.s1 .copy p,.s3 .copy p{margin-block-start:clamp(8px,2vh,20px)}
.art{min-block-size:0;block-size:clamp(240px,66vh,760px);display:grid;place-items:center}
.art svg{inline-size:100%;block-size:100%}

/* التحميص: ثلاث درجات من ثقل الخط */
.s2{align-content:center}
.s2 h2{font-size:min(13vw,20vh)}
.s2 .art{block-size:clamp(150px,34vh,380px)}
.s2 .copy p{margin-block-start:clamp(2px,.6vh,8px)}
.roasts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));text-align:center}
.roasts li{display:grid;gap:2px}
.roasts b{font-family:'Alexandria','Readex Pro',sans-serif;font-weight:700;font-size:clamp(18px,1.1rem + .5vw,26px);line-height:1.3}
.roasts span{font-size:clamp(14px,.85rem + .2vw,17px);line-height:1.5}

/* المنيو */
.s4{place-items:center}
.menu{inline-size:min(100%,980px);display:grid;gap:clamp(12px,2.4vh,28px)}
.menu h2{font-size:min(15vw,17vh)}
.mhead{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:clamp(8px,2vh,20px) 32px}
.mact{display:grid;gap:10px;justify-items:start}
.cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,3vw,48px)}
.cols h3{font-family:'Alexandria','Readex Pro',sans-serif;font-weight:600;font-size:clamp(15px,.9rem + .2vw,18px);line-height:1.4;margin-block-end:6px}
.cols li{font-size:clamp(18px,1rem + .6vw,25px);line-height:1.55}
.hours{font-size:clamp(14px,.85rem + .2vw,17px)}
.cta{
  display:inline-block;padding:15px 30px;background:var(--ink);color:var(--paper);
  font-family:'Alexandria','Readex Pro',sans-serif;font-weight:600;font-size:18px;line-height:1.4;text-decoration:none;
  transition:background-color .35s var(--ease),opacity .45s var(--ease);
}
@media (hover:hover) and (pointer:fine){.cta:hover{background:var(--roast);color:#fff}}
.cta:focus-visible{background:var(--roast);color:#fff}
.cta:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

/* السطر الثابت */
.credit{
  position:fixed;z-index:5;inset-block-end:calc(10px + env(safe-area-inset-bottom));inset-inline-start:10px;
  max-inline-size:calc(100vw - 20px);padding:5px 10px;background:var(--ink);color:var(--paper);
  border:1px solid var(--paper);font-size:12px;line-height:1.5;text-decoration:none;
}
.credit bdi{font-family:'Manrope',sans-serif;font-weight:600}
@media (hover:hover) and (pointer:fine){.credit:hover{background:var(--paper);color:var(--ink)}}
.credit:focus-visible{background:var(--paper);color:var(--ink)}

/* الجوال: نكدّس بدل العمودين */
@media (max-width:767px){
  .s1,.s3{grid-template-columns:minmax(0,1fr);align-content:center;gap:4px}
  .s1 h2,.s3 h2{font-size:min(22vw,13vh)}
  .s1 .copy{order:-1}
  .art{block-size:min(46vh,92vw)}
  .s2 h2{font-size:min(19vw,12vh)}
  .s2 .art{block-size:min(26vh,46vw)}
  .s0 h1{font-size:33vw}
  .cols{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:clamp(8px,1.6vh,18px)}
  .cols>div:first-child{grid-row:span 2}
  .menu h2{font-size:min(19vw,10vh)}
  .cols li{font-size:clamp(16px,2.3vh,19px);line-height:1.5}
  .mhead,.mact{display:contents}
  .hours{order:3}
  .cta{order:4;text-align:center}
  .cols{order:2}
}

/* التابلت القائم: نفس تكديس الجوال للحبة والفنجال */
@media (min-width:768px) and (max-aspect-ratio:1/1){
  .s1,.s3{grid-template-columns:minmax(0,1fr);align-content:center;gap:12px}
  .s1 .copy{order:-1}
  .s1 h2,.s3 h2{font-size:min(17vw,13vh)}
  .art{block-size:50vh}
  .s2 .art{block-size:30vh}
}

/* ===== وضع WebGL: الأقسام طبقات ثابتة، والحروف محفورة في الصفيحة ===== */
#plate,#track{display:none}
.gl #plate{display:block;position:fixed;inset-block-start:0;inset-inline-start:0;inline-size:100%;block-size:100vh;z-index:1}
.gl #track{display:block;block-size:calc(100vh + 4 * 230vh)}
.gl body{cursor:grab;-webkit-user-select:none;user-select:none}
.gl.dragging body{cursor:grabbing}
.gl main{position:fixed;inset-block-start:0;inset-inline:0;block-size:100vh;z-index:2;pointer-events:none}
.gl .sheet{position:absolute;inset-block-start:0;inset-inline:0;block-size:100vh;min-block-size:0;background:none}
.gl .art svg{visibility:hidden}

/* قبل جاهزية الصفيحة: لا نكدّس النصوص فوق بعضها */
.gl:not(.ready) .sheet:not(.s0){visibility:hidden}
.gl:not(.ready) .s0{color:var(--paper)}

.gl.ready [data-t]{color:transparent}
.gl.ready .sheet{visibility:visible}
.gl.ready .cta{opacity:0;transition:opacity .45s var(--ease),background-color .35s var(--ease)}
.gl.ready .cta.on{opacity:1;pointer-events:auto}

/* ===== البديل الثابت (بلا WebGL): نقش الباب مرسوم SVG ===== */
html:not(.gl) .s0,html:not(.gl) .s4{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='192'%3E%3Cg fill='none' stroke='%230B0B0B' stroke-width='1.2'%3E%3Cpath d='M0 72 48 0l48 72z'/%3E%3Cpath d='M16 72 48 24l32 48zM32 72 48 48l16 24z'/%3E%3Cpath d='M48 96 96 144 48 192 0 144z'/%3E%3Cpath d='M48 116 76 144 48 172 20 144z'/%3E%3Cpath d='M0 84H96'/%3E%3C/g%3E%3C/svg%3E");
}
html:not(.gl) .s0 h1,html:not(.gl) .s0 .tag,html:not(.gl) .s0 .pull,html:not(.gl) .menu{background:var(--paper)}
html:not(.gl) .s0 h1{padding-inline:.04em}
html:not(.gl) .s0 .tag{padding-inline:.6em}
html:not(.gl) .s0 .pull{inset-inline:auto;justify-self:center;padding-inline:.8em}
html:not(.gl) .menu{padding:clamp(16px,3vw,40px)}
html:not(.gl) .s4{padding-block-end:80px}
html:not(.gl) .credit{position:fixed}

@media (prefers-reduced-motion:reduce){
  .cta,.gl.ready .cta{transition:none}
}