/* PLAYDAY: a play festival. Cobalt, yellow, red on warm paper; flat shapes, one wooden sculpture as the anchor. */
:root{--paper:#F7F4EC;--ink:#1c2147;--blue:#3152C9;--yellow:#F4D96A;--red:#DA543D;--focus:#1c2147}
body{font-weight:500}
h1,h2,h3{font-weight:900;line-height:1.02}
.ph{position:sticky;top:0;z-index:50;background:#F7F4ECf2;backdrop-filter:blur(8px)}
.ph-in{display:flex;align-items:center;gap:24px;min-height:68px}
.ph-logo{font-size:30px;font-weight:900;color:var(--blue);text-decoration:none;margin-inline-end:auto;letter-spacing:.01em}
.ph nav{display:flex;gap:26px;font-weight:700;font-size:16px}
.ph nav a{text-decoration:none;padding:12px 2px}
.ph nav a:hover{color:var(--blue)}
.ph-cta{background:var(--blue);color:#fff;padding:0 20px;min-height:44px;display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-weight:800;font-size:15px}
@media(max-width:720px){.ph nav{display:none}}

.p-btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:52px;padding:0 28px;background:var(--yellow);color:var(--ink);font-weight:800;font-size:18px;text-decoration:none;border:2px solid var(--yellow);cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.p-btn:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.p-btn--ink{background:var(--blue);border-color:var(--blue);color:#fff}
.p-btn--ink:hover{background:var(--ink);border-color:var(--ink)}
.p-btn--ghost{background:transparent;border-color:var(--ink);color:var(--ink)}
.p-btn--text{background:none;border-color:transparent;text-decoration:underline;min-height:44px;padding:0 12px}
.p-btn--text:hover{background:none;color:var(--red);border-color:transparent}

.p-hero{position:relative;min-height:min(740px,calc(100svh - 68px));display:flex;align-items:center;overflow:hidden}
.p-hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:70% 55%}
.p-hero-copy{position:relative;display:grid;gap:22px;justify-items:end;padding-block:48px}
.p-hero-copy>*{max-width:560px;width:100%}
.p-hero h1{font-size:clamp(46px,5.4vw,92px);color:var(--blue)}
.p-hero-copy p{font-size:clamp(18px,1.6vw,21px);font-weight:600;max-width:34ch}
.p-hero .p-btn{width:fit-content}
@media(max-width:820px){
  .p-hero{display:block;min-height:0}
  .p-hero-img{position:relative;height:auto;aspect-ratio:4/3.4;object-position:70% 55%}
  .p-hero-copy{justify-items:start;padding-block:28px 44px}
  .p-hero h1{font-size:clamp(44px,12.5vw,70px)}
}

.p-areas{background:var(--blue);color:#fff;padding:clamp(32px,5vw,64px) 0}
.p-areas-list{display:grid;grid-template-columns:repeat(3,1fr)}
.p-areas-list li{display:flex;align-items:center;gap:20px;padding:12px clamp(16px,3vw,40px);border-inline-start:1px solid #ffffff55}
.p-areas-list li:first-child{border-inline-start:0;padding-inline-start:0}
.p-areas-list svg{width:clamp(64px,7vw,96px);flex:none;color:var(--yellow)}
.p-areas-list h3{font-size:clamp(28px,3vw,42px)}
.p-areas-list p{font-size:17px;max-width:24ch}
@media(max-width:820px){.p-areas-list{grid-template-columns:1fr;gap:20px}.p-areas-list li{border:0;padding:0}}

.p-planner{padding:clamp(56px,8vw,112px) 0}
.p-head{display:grid;gap:12px;margin-bottom:clamp(28px,4vw,48px);max-width:640px}
.p-num{font-weight:800;letter-spacing:.16em;font-size:14px;color:var(--red)}
.p-head h2,.p-contact h2{font-size:clamp(38px,5.4vw,84px);color:var(--blue)}
.p-head p:last-child{font-size:19px}
.p-grid{display:grid;grid-template-columns:5fr 7fr;gap:clamp(20px,4vw,56px);align-items:start}
.p-pool{display:grid;gap:26px}
.p-group h3{font-size:24px;margin-bottom:10px;display:flex;align-items:center;gap:10px}
.p-group h3::before{content:"";width:14px;height:14px;background:var(--c)}
.p-group ul{display:grid;gap:8px}
.p-act{display:flex;align-items:center;gap:12px;border:2px solid var(--ink);background:#fff;padding:6px 6px 6px 12px;min-height:56px}
.p-act b{font-weight:800;font-size:18px;margin-inline-end:auto}
.p-act span{font-size:14px;opacity:.8}
.p-add{min-width:44px;min-height:44px;border:0;background:var(--c);color:var(--ink);font-weight:900;font-size:22px;line-height:1}
.p-add:hover{background:var(--ink);color:#fff}
.p-schedule{background:#fff;border:2px solid var(--ink);padding:clamp(18px,2.4vw,32px);display:grid;gap:16px;box-shadow:8px 8px 0 var(--yellow);position:sticky;top:84px}
.p-s-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px}
.p-s-top h3{font-size:28px}
.p-start{display:flex;align-items:center;gap:10px;font-weight:700;font-size:16px}
.p-start input{min-height:44px;border:2px solid var(--ink);padding:0 10px;font:inherit;background:#fff;color:var(--ink)}
.p-list{display:grid;gap:8px}
.p-item{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;border:2px solid var(--ink);padding:8px 10px;background:var(--paper);border-inline-start:10px solid var(--c)}
.p-item.drag{opacity:.4}
.p-item.over{outline:3px dashed var(--blue)}
.p-time{font-weight:800;font-size:15px;min-width:110px;direction:ltr;text-align:start}
.p-name{font-weight:800;font-size:18px}
.p-name small{display:block;font-size:13px;font-weight:600;opacity:.75}
.p-ctl{display:flex;gap:4px}
.p-ctl button{min-width:44px;min-height:44px;border:2px solid var(--ink);background:#fff;font-size:18px;line-height:1}
.p-ctl button:hover:not(:disabled){background:var(--ink);color:#fff}
.p-ctl button:disabled{opacity:.35;cursor:not-allowed}
.p-handle{cursor:grab;font-size:20px;opacity:.6;padding:0 4px;user-select:none}
.p-empty{padding:18px;border:2px dashed var(--ink);font-weight:700}
.p-total{font-size:22px;font-weight:900;color:var(--blue)}
.p-actions{display:flex;flex-wrap:wrap;gap:10px}
.p-status{min-height:1.4em;font-weight:700;font-size:15px}
@media(max-width:900px){.p-grid{grid-template-columns:1fr}.p-schedule{position:static}.p-item{grid-template-columns:1fr auto}.p-time{grid-column:1/-1}}

.p-contact{background:var(--yellow);padding:clamp(56px,8vw,104px) 0}
.p-contact-in{display:grid;grid-template-columns:7fr 5fr;gap:clamp(24px,4vw,64px);align-items:end}
.p-contact p{font-size:20px;margin-bottom:20px;max-width:30ch;font-weight:600}
.p-contact .p-btn{background:var(--blue);border-color:var(--blue);color:#fff}
.p-contact .p-btn:hover{background:var(--ink);border-color:var(--ink)}
.p-note{font-size:14px!important;margin:18px 0 0!important}
@media(max-width:820px){.p-contact-in{grid-template-columns:1fr}}
.credit{background:var(--ink);color:#fff}.credit a{color:#fff}

.spark{position:fixed;width:10px;height:10px;z-index:300;pointer-events:none;animation:spark .8s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes spark{to{transform:translate(var(--dx),var(--dy)) rotate(var(--r));opacity:0}}
@media(prefers-reduced-motion:reduce){.spark{display:none}}

@media print{
  body>*:not(main),.p-hero,.p-areas,.p-head,.p-pool,.p-actions,.p-status,.p-contact,.p-start input{display:none!important}
  .p-planner{padding:0}.p-grid{display:block}
  .p-schedule{position:static;border:0;box-shadow:none;padding:0}
  .p-ctl,.p-handle{display:none}
  .p-item{border-inline-start:6px solid #000;break-inside:avoid}
  .p-start::after{content:attr(data-print)}
}
