/* ==========================================================================
   WordCamp Bengaluru 2026 · social frames
   Tokens lifted from the live theme (github.com/wpblr/wcblr2026 style.css).
   ========================================================================== */

/* ---- Fonts ---------------------------------------------------------------
   These are the exact static faces bengaluru.wordcamp.org/2026 serves, copied
   byte for byte, so the frame's type matches the site rather than approximating
   it with a variable build. Fraunces stops at 600 and JetBrains Mono at 500:
   asking for anything heavier makes the browser synthesise a fake bold.
   -------------------------------------------------------------------------- */
@font-face{font-family:'Fraunces';font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/fraunces-400.woff2) format('woff2')}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:500;font-display:swap;src:url(assets/fonts/fraunces-500.woff2) format('woff2')}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:600;font-display:swap;src:url(assets/fonts/fraunces-600.woff2) format('woff2')}
@font-face{font-family:'Fraunces';font-style:italic;font-weight:400;font-display:swap;src:url(assets/fonts/fraunces-italic-400.woff2) format('woff2')}
@font-face{font-family:'Fraunces';font-style:italic;font-weight:500;font-display:swap;src:url(assets/fonts/fraunces-italic-500.woff2) format('woff2')}
@font-face{font-family:'Fraunces';font-style:italic;font-weight:600;font-display:swap;src:url(assets/fonts/fraunces-italic-600.woff2) format('woff2')}

@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/hanken-grotesk-400.woff2) format('woff2')}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url(assets/fonts/hanken-grotesk-500.woff2) format('woff2')}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url(assets/fonts/hanken-grotesk-600.woff2) format('woff2')}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url(assets/fonts/hanken-grotesk-700.woff2) format('woff2')}

@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:300;font-display:swap;src:url(assets/fonts/jetbrains-mono-300.woff2) format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/jetbrains-mono-400.woff2) format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url(assets/fonts/jetbrains-mono-500.woff2) format('woff2')}

/* Not served by the site, which falls back to a system Kannada face. Subset
   here to exactly the lockup string; the ZWNJ in it is load-bearing. */
@font-face{font-family:'Noto Sans Kannada';font-style:normal;font-weight:400 700;font-display:swap;
  src:url(assets/fonts/noto-sans-kannada-kannada.woff2) format('woff2');
  unicode-range:U+0951-0952,U+0964-0965,U+0C80-0CF3,U+1CD0,U+1CD2-1CD3,U+1CDA,U+1CF2,U+1CF4,U+200C-200D,U+20B9,U+25CC,U+A830-A835}

/* ---- Tokens -------------------------------------------------------------- */
:root{
  --espresso:#2A1D14;
  --paper:#F2ECE0;
  --paper-hi:#FBF8F1;
  --crimson:#C8344B;
  --gold:#E0A526;
  --gold-deep:#A8760F;
  --silver:#8C7E6F;
  --muted:#7A6757;
  --border:#D5CFC3;
  --teal:#136451;

  --display:'Fraunces',Georgia,serif;
  --body:'Hanken Grotesk',system-ui,-apple-system,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,monospace;

  --gap:clamp(20px,4vw,44px);
  --radius:10px;
}

*,*::before,*::after{box-sizing:border-box}

[hidden]{display:none !important}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--paper);
  color:var(--espresso);
  font-family:var(--body);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  padding:0 var(--gap) 0;
}

a{color:inherit}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

.skip{position:absolute;left:-9999px;top:0;background:var(--espresso);color:var(--paper);
  padding:12px 18px;font-family:var(--mono);font-size:12px;z-index:20}
.skip:focus{left:8px;top:8px}

/* ---- Masthead ------------------------------------------------------------ */
.masthead{
  max-width:1180px;margin:0 auto;
  padding:clamp(26px,5vw,48px) 0 18px;
  display:flex;align-items:flex-end;justify-content:space-between;gap:24px;
  border-bottom:3px solid var(--espresso);
}

.kicker{
  margin:0;font-family:var(--mono);font-weight:500;
  font-size:12px;letter-spacing:.16em;color:var(--silver);
}

.lockup{
  margin:.24em 0 0;
  font-family:var(--display);font-optical-sizing:auto;
  font-weight:400;
  font-size:clamp(30px,6.2vw,50px);
  line-height:.94;letter-spacing:-.03em;
}
.lockup em{font-style:italic;color:var(--crimson)}

.lockup__kn{
  margin:.5em 0 0;font-family:'Noto Sans Kannada',var(--body);
  font-weight:500;font-size:clamp(12px,2.2vw,15px);color:var(--muted);
}

.masthead__meta{
  margin:0;text-align:right;flex:none;
  font-family:var(--mono);font-weight:500;font-size:12px;
  letter-spacing:.16em;line-height:1.9;color:var(--silver);
}

@media (max-width:640px){
  .masthead{flex-direction:column;align-items:flex-start;gap:10px;padding-bottom:14px}
  .masthead__meta{text-align:left;line-height:1.7}
  .lockup{font-size:clamp(28px,8.4vw,40px)}
}

/* ---- Layout -------------------------------------------------------------- */
.shell{
  max-width:1180px;margin:0 auto;
  padding:clamp(24px,4vw,40px) 0 0;
  display:grid;gap:clamp(26px,4vw,52px);
  grid-template-columns:minmax(0,1.08fr) minmax(300px,.92fr);
  align-items:start;
}

@media (max-width:900px){
  .shell{grid-template-columns:minmax(0,1fr)}
}

/* ---- Stage --------------------------------------------------------------- */
.stage{display:flex;flex-direction:column;gap:14px;min-width:0}

.tabs{
  display:flex;gap:6px;padding:6px;
  background:rgba(42,29,20,.07);border-radius:999px;
}
.tab{
  flex:1;font-family:var(--body);font-weight:700;font-size:16px;
  padding:12px 14px;border:0;border-radius:999px;cursor:pointer;
  background:transparent;color:var(--muted);
  transition:background .16s ease,color .16s ease;
}
.tab.is-on{background:var(--espresso);color:var(--paper)}
.tab:not(.is-on):hover{color:var(--espresso)}

.canvas-wrap{position:relative;min-width:0}

#canvas{
  display:block;width:100%;height:auto;
  touch-action:none;cursor:grab;
  background:var(--paper-hi);
  box-shadow:0 18px 44px rgba(42,29,20,.20);
  transition:border-radius .2s ease;
}
#canvas.is-avatar{border-radius:50%}
#canvas.is-empty{cursor:pointer}
#canvas.is-dragging{cursor:grabbing}

.canvas-wrap.is-over::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  border:4px dashed var(--gold);background:rgba(224,165,38,.14);
}
.canvas-wrap.is-over #canvas.is-avatar~.dropnote{border-radius:50%}

.dropnote{
  position:absolute;inset:auto 0 22px;margin:0;text-align:center;
  font-family:var(--mono);font-weight:500;font-size:12px;letter-spacing:.16em;
  color:var(--espresso);pointer-events:none;
}

.adjust{
  display:flex;align-items:center;gap:10px;margin:0;
  font-size:15px;font-weight:600;line-height:1.35;color:var(--espresso);
  background:rgba(224,165,38,.22);
  border:1px solid rgba(168,118,15,.30);
  border-radius:9px;padding:11px 14px;text-wrap:pretty;
}
.adjust svg{width:19px;height:19px;flex:none;color:var(--gold-deep)}
.adjust strong{font-weight:700}

.hint{
  margin:0;font-family:var(--mono);font-weight:500;
  font-size:11.5px;letter-spacing:.1em;color:var(--silver);
}

/* ---- Controls ------------------------------------------------------------ */
.controls{display:flex;flex-direction:column;gap:clamp(22px,3vw,30px);min-width:0}

.step{display:flex;flex-direction:column;gap:12px}

.step__no{
  margin:0;font-family:var(--mono);font-weight:500;
  font-size:12px;letter-spacing:.16em;color:var(--crimson);
}

.filepick{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  background:var(--espresso);color:var(--paper);
  border-radius:var(--radius);padding:17px 20px;cursor:pointer;
  transition:background .16s ease;
}
.filepick:hover{background:#3B2A1D}
.filepick:focus-within{outline:3px solid var(--gold);outline-offset:2px}
.filepick input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.filepick__name{
  font-weight:700;font-size:18px;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.filepick__cta{
  flex:none;font-family:var(--mono);font-weight:500;
  font-size:11.5px;letter-spacing:.14em;color:var(--gold);
}

.zoom{display:flex;align-items:center;gap:13px}
.zoom__label{font-family:var(--mono);font-weight:500;font-size:11px;
  letter-spacing:.14em;color:var(--silver)}
.zoom input[type=range]{flex:1;min-width:0;accent-color:var(--crimson)}
.zoom input[type=range]:disabled{opacity:.4}

.ghostbtn{
  font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:.12em;
  color:var(--muted);background:none;cursor:pointer;
  border:2px solid var(--border);border-radius:999px;padding:7px 13px;
  transition:border-color .16s ease,color .16s ease;
}
.ghostbtn:hover:not(:disabled){border-color:var(--crimson);color:var(--crimson)}
.ghostbtn:disabled{opacity:.4;cursor:default}

.roles{display:flex;flex-wrap:wrap;gap:9px}
.role{
  font-family:var(--body);font-weight:700;font-size:16px;
  padding:10px 16px;border-radius:999px;white-space:nowrap;cursor:pointer;
  border:2px solid var(--border);background:transparent;color:var(--muted);
  transition:background .16s ease,color .16s ease,border-color .16s ease;
}
.role:hover{border-color:var(--espresso);color:var(--espresso)}
.role.is-on{background:var(--espresso);border-color:var(--espresso);color:var(--paper)}

#phrase{
  font-family:var(--body);font-weight:600;font-size:17px;color:var(--espresso);
  background:var(--paper-hi);border:2px solid var(--border);
  border-radius:var(--radius);padding:13px 15px;width:100%;
}
#phrase:focus{outline:3px solid var(--gold);outline-offset:1px;border-color:var(--espresso)}

.bigbtn{
  display:flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--body);font-weight:700;font-size:20px;color:var(--espresso);
  background:var(--gold);border:0;border-radius:var(--radius);
  padding:19px 22px;cursor:pointer;
  box-shadow:0 10px 22px rgba(224,165,38,.42);
  transition:background .16s ease,transform .1s ease;
}
.bigbtn:hover{background:#F0B336}
.bigbtn:active{transform:translateY(1px)}
.bigbtn__arrow{width:22px;height:22px;flex:none}

.sharebtn{
  font-family:var(--body);font-weight:700;font-size:16px;
  color:var(--espresso);background:transparent;
  border:2px solid var(--espresso);border-radius:var(--radius);
  padding:14px 18px;cursor:pointer;
}
.sharebtn:hover{background:var(--espresso);color:var(--paper)}

.note{margin:0;font-size:15px;font-weight:500;color:var(--muted);line-height:1.45;text-wrap:pretty}

.note--warn{
  display:flex;gap:11px;
  background:rgba(200,52,75,.10);border-radius:8px;padding:12px 14px;
  color:#A8283B;font-weight:600;
}
.note--warn::before{
  content:"";flex:none;width:8px;height:8px;margin-top:7px;
  background:var(--crimson);transform:rotate(45deg);
}

/* ---- Footer -------------------------------------------------------------- */
.foot{
  max-width:1180px;margin:clamp(36px,6vw,64px) auto 0;
  padding:20px 0 34px;border-top:2px solid var(--border);
  display:flex;flex-wrap:wrap;gap:8px 22px;justify-content:space-between;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;color:var(--silver);
}
.foot p{margin:0}
.foot a{text-decoration:none}
.foot a:hover{color:var(--crimson)}

.noscript{
  max-width:1180px;margin:24px auto;padding:16px 18px;
  background:rgba(200,52,75,.10);border-radius:8px;font-weight:600;color:#A8283B;
}

/* ---- Motion --------------------------------------------------------------
   Everything here is either orienting (what arrived, what changed) or an
   affordance (this is tappable, there is more below). All of it is switched
   off wholesale by the reduced-motion block at the foot of this file.
   -------------------------------------------------------------------------- */
@keyframes rise{from{opacity:0;transform:translateY(11px)}to{opacity:1;transform:none}}
.masthead{animation:rise .5s cubic-bezier(.2,.7,.3,1) both}
.stage{animation:rise .5s cubic-bezier(.2,.7,.3,1) .06s both}
.controls{animation:rise .5s cubic-bezier(.2,.7,.3,1) .12s both}

/* a photo landing in the frame */
@keyframes photoIn{from{opacity:.4;transform:scale(.986)}to{opacity:1;transform:none}}
#canvas.is-fresh{animation:photoIn .42s cubic-bezier(.2,.7,.3,1) both}

/* the empty frame breathes so it reads as tappable */
@keyframes breathe{
  0%,100%{box-shadow:0 18px 44px rgba(42,29,20,.20),0 0 0 0 rgba(224,165,38,.55)}
  50%    {box-shadow:0 18px 44px rgba(42,29,20,.20),0 0 0 14px rgba(224,165,38,0)}
}
#canvas.is-empty{animation:breathe 2.8s ease-in-out infinite}

@keyframes settle{from{opacity:0;transform:translateY(-7px)}to{opacity:1;transform:none}}
.adjust:not([hidden]){animation:settle .34s cubic-bezier(.2,.7,.3,1) both}

.bigbtn__arrow{transition:transform .18s cubic-bezier(.2,.7,.3,1)}
.bigbtn:hover .bigbtn__arrow{transform:translateY(3px)}
.role,.tab{transition:background .16s ease,color .16s ease,border-color .16s ease,transform .12s ease}
.role:active,.tab:active{transform:scale(.97)}

/* ---- Mobile: there is more below ----------------------------------------- */
.scrollcue{
  display:none;
  /* Bottom-right, not centred: centred it sits straight on top of the
     "Choose a photo" bar at exactly the fold. */
  position:fixed;right:calc(14px + env(safe-area-inset-right));
  bottom:calc(14px + env(safe-area-inset-bottom));
  align-items:center;justify-content:center;z-index:15;
  width:38px;height:38px;padding:0;
  color:var(--gold);background:var(--espresso);
  border:1.5px solid rgba(224,165,38,.55);border-radius:50%;
  cursor:pointer;opacity:.9;
  box-shadow:0 6px 16px rgba(42,29,20,.28);
}
.scrollcue svg{width:15px;height:15px;flex:none}
.scrollcue[hidden]{display:none}

@media (max-width:900px){
  .scrollcue:not([hidden]){display:inline-flex;animation:cue 1.9s ease-in-out infinite}
}
@keyframes cue{
  0%,100%{transform:translateY(0)}
  50%    {transform:translateY(4px)}
}

/* ---- Focus + motion ------------------------------------------------------ */
:where(button,input,a):focus-visible{outline:3px solid var(--gold);outline-offset:2px}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    transition-duration:.01ms !important;
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
  }
  /* Looping affordances stop entirely rather than snapping in place. */
  #canvas.is-empty,.scrollcue:not([hidden]){animation:none !important}
}