@font-face{font-family:Courier Prime;src:url('assets/courier-prime-regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:Courier Prime;src:url('assets/courier-prime-bold.ttf') format('truetype');font-weight:700;font-display:swap}
:root{--paper:#f7f5ef;--ink:#171715;--orange:#e76f45;--small:14px;--measure:440px}
*{box-sizing:border-box}html{background:var(--paper);color:var(--ink);font-family:'Courier Prime','Courier New',monospace}body{margin:0;background:var(--paper) url('assets/grain.svg') repeat;min-height:100svh}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;background:none;border:0;border-radius:0;cursor:pointer;padding:0}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible{outline:2px solid var(--orange);outline-offset:5px}button:disabled{opacity:.35;cursor:default}[hidden]{display:none!important}h1,h2,p,figure{margin:0}
.edition{width:100%;max-width:var(--measure);margin:auto;min-height:100svh;display:flex;flex-direction:column;padding:48px 24px max(20px,env(safe-area-inset-bottom))}
.masthead{margin-bottom:62px}.wordmark{font-weight:700;font-size:21px;line-height:1.1;display:inline-flex;align-items:baseline;gap:7px;letter-spacing:-.5px}.logo-dot{display:inline-block;width:8px;height:8px;flex:none;border-radius:50%;background:var(--orange)}.dateline{font-size:var(--small);line-height:1.4;margin-top:5px}.section-heading{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:20px;gap:16px}.section-heading h1{font-size:16px;font-weight:700;text-transform:uppercase}.section-heading>span{font-size:14px;white-space:nowrap}
main{display:flex;flex:1;flex-direction:column}.page{display:flex;flex:1;flex-direction:column}.square{width:100%;aspect-ratio:1;display:block}.photograph{height:auto;object-fit:cover;object-position:50% 50%}figcaption,.difficulty button,.see{font-size:var(--small);font-weight:700;line-height:1.4}figcaption{margin-top:16px}.shuffle-space{display:flex;flex:1;min-height:120px;align-items:center;justify-content:center}.shuffle{width:44px;height:44px;display:grid;place-items:center}.shuffle:hover{color:var(--orange)}
.navigation{display:flex;justify-content:space-between;gap:15px;margin-top:24px;padding:0 8px}.navigation a{text-transform:uppercase;font-weight:700;font-size:14px;position:relative;min-height:44px;padding:8px 12px 22px}.navigation a[aria-current]::after{content:'';position:absolute;width:8px;height:8px;border-radius:50%;background:var(--orange);bottom:6px;left:calc(50% - 4px)}
.board{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));grid-template-rows:repeat(9,minmax(0,1fr));border:1.6px solid var(--ink)}.cell{position:relative;min-width:0;min-height:0;border-right:1px solid #77746680;border-bottom:1px solid #77746680;display:grid;place-items:center;font-size:clamp(19px,5.5vw,25px);font-weight:400;line-height:1}.cell:nth-child(9n){border-right:0}.cell:nth-child(n+73){border-bottom:0}.cell:nth-child(9n+3),.cell:nth-child(9n+6){border-right:1.6px solid var(--ink)}.cell:nth-child(n+19):nth-child(-n+27),.cell:nth-child(n+46):nth-child(-n+54){border-bottom:1.6px solid var(--ink)}.cell.selected::after{content:'';position:absolute;inset:0;border:2px solid var(--orange);pointer-events:none}.cell.user-value{font-weight:700}.cell.conflict{color:#9d3325;background:#9d332510}.cell:focus-visible{outline:none}.cell:focus-visible::after{content:'';position:absolute;inset:2px;border:2px solid var(--orange)}.pencil{display:grid;grid-template-columns:repeat(3,1fr);width:100%;height:100%;padding:2px}.pencil span{font-size:10px;display:grid;place-items:center}.difficulty{display:flex;gap:24px;margin-top:12px}.difficulty button{min-height:44px;position:relative;padding-bottom:20px}.difficulty [aria-pressed=true]::after{content:"";position:absolute;width:8px;height:8px;border-radius:50%;background:var(--orange);bottom:6px;left:calc(50% - 4px)}.game-tools{display:flex;justify-content:space-between;gap:8px;margin-top:25px}.game-tools button{font-size:13px;min-height:44px}.game-tools [aria-pressed=true]{text-decoration:underline;text-decoration-color:var(--orange);text-underline-offset:5px}.keypad{display:grid;grid-template-columns:repeat(9,1fr);margin-top:9px}.keypad button{font-size:clamp(19px,5.5vw,25px);min-height:44px}.status{min-height:34px;font-size:12px;line-height:1.5;margin-top:10px}.events{display:flex;flex-direction:column;gap:66px;padding-top:38px;padding-bottom:50px}.events article{display:grid;grid-template-columns:80px minmax(0,1fr);gap:12px}.category{text-transform:uppercase;font-size:14px;line-height:1.35}.events h2{font-size:15px;line-height:1.35;font-weight:700;text-transform:uppercase}.events article p:not(.category){font-size:14px;line-height:1.45;margin-top:5px}.see{display:inline-block;text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px;min-height:44px;margin-top:8px}.see:hover{color:var(--orange)}
dialog{font-family:inherit;color:inherit;max-width:300px;width:calc(100% - 64px);border:0;padding:28px 22px;background:var(--paper) url('assets/grain.svg') repeat;box-shadow:0 15px 80px #0002}dialog::backdrop{background:#17171540;backdrop-filter:blur(3px)}dialog h2{font-size:var(--small);line-height:1.4;margin:10px 0}dialog p{font-size:var(--small);line-height:1.4}.sample-note{margin-top:18px}.close{position:absolute;top:0;right:0;width:44px;height:44px;font-size:18px;line-height:1;display:grid;place-items:center}.close:focus-visible{outline:none}.close:focus-visible::after{content:"";position:absolute;inset:11px;border:1px solid var(--orange);pointer-events:none}
.difficulty{margin-top:16px}.difficulty button{display:flex;align-items:flex-start}.game-tools{margin-top:13px}.events{gap:56px;padding-bottom:20px}
@media(min-width:700px){.edition{min-height:max(850px,100svh);padding-top:50px;padding-bottom:30px}.masthead{margin-bottom:64px}.shuffle-space{min-height:140px}}
@media(max-width:359px){.edition{padding-left:18px;padding-right:18px}.events article{grid-template-columns:64px minmax(0,1fr);gap:8px}.navigation{padding:0;gap:5px}.navigation a{padding-left:8px;padding-right:8px}.masthead{margin-bottom:48px}}
@media(prefers-reduced-motion:no-preference){.navigation a,.shuffle,.see{transition:color .15s ease}.photograph{animation:appear .3s ease}@keyframes appear{from{opacity:.65}to{opacity:1}}}
/* Keep navigation outside the scrollable content, including Safari's changing viewport. */
html,body{height:100%;overflow:hidden}
.edition{height:100vh;height:100dvh;min-height:0;padding-top:24px;padding-bottom:max(12px,env(safe-area-inset-bottom))}
.masthead{flex-shrink:0;margin-bottom:44px}
main{min-height:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior-y:contain;scrollbar-width:thin}
.page{flex-shrink:0;min-height:100%}
.square{width:100%;flex-shrink:0}
.photograph{margin-inline:auto}
.board{margin-inline:auto}
.shuffle-space{min-height:44px}
.navigation{flex-shrink:0;margin-top:12px;padding-top:4px}
.difficulty{margin-top:12px}
.game-tools{margin-top:0}
.keypad{margin-top:0}
.status{min-height:0;margin-top:4px}
.events{gap:clamp(20px,5dvh,56px);padding-top:24px;padding-bottom:12px}
@media(min-height:780px){.edition{padding-top:40px}.masthead{margin-bottom:60px}}

@media(max-height:740px){.edition{padding-top:18px}.masthead{margin-bottom:24px}.section-heading{margin-bottom:16px}.difficulty{margin-top:8px}.status{margin-top:0}}
.image-caption{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
#image-info{flex:none;width:44px;height:44px;display:grid;place-items:center;margin-top:-12px;margin-right:0;font-family:Arial,sans-serif;font-size:16px;font-weight:400}
#image-info:hover{color:var(--orange)}
.intro{position:fixed;inset:0;z-index:100;background:var(--paper) url('assets/grain.svg') repeat;display:grid;place-items:center;animation:intro-away .4s ease 1.3s forwards;pointer-events:none}
.intro-wordmark{display:inline-flex;align-items:baseline;gap:7px;font-weight:700;font-size:26px;line-height:1.1;letter-spacing:-.5px;animation:intro-arrive .65s cubic-bezier(.22,1,.36,1) both}
.intro-dot{width:8px;height:8px;border-radius:50%;background:var(--orange);animation:intro-pulse .8s ease-in-out .35s both}
@keyframes intro-arrive{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@keyframes intro-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.6)}}
@keyframes intro-away{to{opacity:0;visibility:hidden}}
@media(prefers-reduced-motion:reduce){.intro-wordmark,.intro-dot{animation:none}.intro{animation:intro-away .01s linear .4s forwards}}
/* Respect the status bar/notch when Safari uses the full display. */
.edition{padding-top:max(24px,calc(env(safe-area-inset-top,0px) + 12px))}
.section-heading,.masthead,.navigation{flex-shrink:0}
@media(min-height:780px){.edition{padding-top:max(40px,calc(env(safe-area-inset-top,0px) + 12px))}}

/* Lock the document itself: iOS can restore a scroll offset on overflow-hidden bodies. */
html{position:relative;width:100%;height:100%;overflow:hidden}
body{position:fixed;inset:0;width:100%;height:100%;min-height:0;overflow:hidden}
.edition{position:absolute;top:0;bottom:0;left:0;right:0;margin:0 auto;height:100%;min-height:0}
main{flex:1 1 0;min-height:0;-webkit-overflow-scrolling:touch}
.page{flex:0 0 auto;min-height:100%}
.page figure,.shuffle-space{flex-shrink:0}
.navigation{position:relative;z-index:2}

.shuffle[aria-busy="true"]{opacity:.5;cursor:progress}

/* The listening edition follows the photograph's exact editorial grid. */
.music-artwork{object-fit:cover;height:auto}
.music-note{font-size:var(--small);line-height:1.4;margin-top:8px}
.music-player{margin-top:16px;flex:none}
.music-player iframe{display:block;width:100%;height:42px;border:0}
.music-source{font-size:12px;line-height:1.4;min-height:44px;display:flex;align-items:center;gap:8px;margin-top:8px;align-self:flex-start}
.music-source:hover{color:var(--orange)}
.navigation{gap:0;padding-left:0;padding-right:0}
.navigation a{padding-left:8px;padding-right:8px}
@media(max-width:359px){.navigation a{font-size:13px;padding-left:3px;padding-right:3px}}

/* Align both editorial actions. */
.shuffle-space{position:relative;min-height:160px}
.album-frame{position:relative;aspect-ratio:1}
.album-frame .music-player{position:absolute;bottom:0;left:0;right:0;margin:0}
.music-feature .image-caption{min-height:32px}

.photo-frame{position:relative;aspect-ratio:1}
.photo-frame #image-info{position:absolute;right:6px;bottom:6px;margin:0;font-size:14px}
.image-caption{min-height:32px}

/* Allow immediate taps while preserving scrolling and pinch zoom. */
button,a{touch-action:manipulation}

.keypad button{position:relative}
.keypad .number-complete::after{content:"";position:absolute;left:50%;top:50%;width:22px;height:2px;background:var(--orange);transform:translate(-50%,-50%) rotate(-18deg);pointer-events:none}

#view-sortir{position:relative;padding-top:40px}
#calendar-toggle{position:absolute;top:0;right:0;width:44px;height:36px;display:grid;place-items:center}
#calendar-toggle[aria-expanded=true],#calendar-toggle:hover{color:var(--orange)}
#calendar-panel{flex:none;margin-top:24px;padding-bottom:16px}
.calendar-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.calendar-heading h2{font-size:14px;font-weight:400}
.calendar-heading button{width:44px;height:44px;font-size:22px}
.calendar-weekdays,.calendar-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));text-align:center;font-size:13px}
.calendar-weekdays{margin-bottom:10px}
.calendar-days button{position:relative;min-height:48px;font-size:14px}
.calendar-days button:disabled{opacity:.55}
.calendar-days .has-selection::after{content:'';position:absolute;width:5px;height:5px;border-radius:50%;background:var(--orange);left:calc(50% - 2.5px);bottom:5px}
.calendar-days .guest-day::before{content:'';position:absolute;left:0;right:0;bottom:3px;height:1px;background:var(--orange)}
.calendar-days button[aria-current=date]{font-weight:700}
#calendar-note{font-size:12px;line-height:1.5;margin-top:20px}

/* An always-open square calendar on the same grid as Sudoku. */
#view-sortir{padding-top:0}
#calendar-panel{width:100%;aspect-ratio:1;margin:0;padding:0;display:flex;flex-direction:column;flex:none}
.calendar-heading{margin:0;flex:none;height:44px}
.calendar-heading h2{font-size:13px}
.calendar-weekdays{font-size:11px;margin:8px 0;flex:none}
.calendar-days{flex:1;min-height:0}
.calendar-days button{min-height:0;font-size:13px}
#calendar-note{font-size:10px;line-height:1.3;margin:10px 0 0;min-height:26px;flex:none}
#view-sortir .events{gap:0;padding:12px 0 0}
#view-sortir .events article{grid-template-columns:65px minmax(0,1fr);gap:8px;min-height:50px;padding:7px 0}
#view-sortir .events article>div{position:relative;padding-right:40px}
#view-sortir .category{font-size:10px;line-height:1.3}
#view-sortir .events h2{font-size:11px;line-height:1.25;text-transform:none}
#view-sortir .events article p:not(.category){font-size:10px;line-height:1.25;margin-top:3px}
#view-sortir .see{position:absolute;right:0;top:-6px;margin:0;font-size:10px;min-height:44px;min-width:36px;display:flex;align-items:center;gap:3px}

.calendar-days .guest-day::before{inset:50% 0 auto;height:30px;transform:translateY(-50%);border-top:2px solid var(--orange);border-bottom:2px solid var(--orange);background:none;pointer-events:none}
.calendar-days .guest-start::before{border-left:2px solid var(--orange)}
.calendar-days .guest-end::before{border-right:2px solid var(--orange)}

/* Desktop edition: a quiet sidebar and one compact editorial square. */
@media(min-width:900px){
  .edition{max-width:none;display:grid;grid-template-columns:220px minmax(0,1fr);grid-template-rows:100px minmax(0,1fr);column-gap:40px;padding:52px 64px 36px}
  .masthead{grid-column:1;grid-row:1;margin:0;position:relative;z-index:2;align-self:start;justify-self:start}
  .wordmark{font-size:23px}
  .dateline{font-size:12px;margin-top:8px}
  main{grid-column:1 / 3;grid-row:1 / 3;display:block;padding-top:184px;padding-bottom:20px;overflow-y:auto}
  .page{width:360px;max-width:100%;min-height:0;margin:0 auto}
  .navigation{grid-column:1;grid-row:2;align-self:start;justify-self:start;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:8px;margin:70px 0 0;padding:0}
  .navigation a{font-size:13px;text-transform:none;min-height:44px;padding:14px 0 14px 19px}
  .navigation a[aria-current]::after{width:6px;height:6px;left:0;bottom:auto;top:18px}
  .image-caption{font-size:12px;margin-top:14px;min-height:32px}
  .shuffle-space{flex:none;min-height:90px}
  .difficulty button{font-size:12px}
  .difficulty{margin-top:14px}
  .cell,.keypad button{font-size:23px}
  .game-tools button{font-size:12px}
}

.calendar-detail{margin-top:36px;padding-bottom:24px;font-size:12px;line-height:1.5}
.calendar-detail h2{font-size:14px;line-height:1.4;margin:10px 0;font-weight:700}
.calendar-detail .sample-note{font-size:10px;opacity:.6;margin-top:14px}
.calendar-days [aria-expanded=true]{color:var(--orange);font-weight:700}
@media(min-width:900px){.calendar-detail{margin-top:80px}}
@media(max-width:899px){.navigation a{font-size:12px;padding-left:4px;padding-right:4px}}

.calendar-detail article+article{margin-top:24px}
.calendar-detail article p+p{margin-top:8px}
.calendar-event-link{display:inline-flex;align-items:center;min-height:44px;text-decoration:underline;text-underline-offset:4px}
.calendar-source{display:inline-block;font-size:10px;margin-top:12px}

/* Match details to the calendar's first and last date columns. */
.calendar-detail{width:100%;margin-inline:0;padding-inline:calc(100% / 14);text-align:left}

/* Keep the shared width while bringing calendar rows closer together. */
#calendar-panel{aspect-ratio:auto}
.calendar-heading{height:36px}
.calendar-weekdays{margin:4px 0 22px}
.calendar-days{flex:none;grid-auto-rows:45px}
.calendar-days button{min-height:45px}
.image-caption,.difficulty button,.calendar-detail h2{font-weight:400}

/* Reliability and accessibility refinements retain the existing editorial layout. */
button,a{touch-action:manipulation}
.connection-status,.calendar-empty{font-size:12px;line-height:1.4;font-weight:400;margin:0 0 18px}
.connection-status{max-width:360px;margin-inline:auto}
@media(min-width:900px){.masthead{position:relative;z-index:2}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}