/* Accueil krajewski.fr — DA des pages books (Caslon Doric, or, blanc).
   Remplace style.css pour l'accueil ; style.css reste sur le serveur, inchangé. */
@font-face{font-family:DoricExtended;src:url('/books/assets/fonts/CaslonDoricExtended-Thin.otf') format('opentype');font-weight:100;font-display:swap}
@font-face{font-family:DoricExtended;src:url('/books/assets/fonts/CaslonDoricExtended-Light.otf') format('opentype');font-weight:300;font-display:swap}
@font-face{font-family:DoricExtended;src:url('/books/assets/fonts/CaslonDoricExtended-Bold.otf') format('opentype');font-weight:700;font-display:swap}
@font-face{font-family:Doric;src:url('/books/assets/fonts/CaslonDoric-Light.otf') format('opentype');font-weight:300;font-display:swap}

:root{
  --paper:#fff;--ink:#2a2723;--gold:#a08a68;--gold-deep:#74644d;--gold-soft:#dccfba;
  --display:DoricExtended,Doric,sans-serif;--body:Doric,sans-serif
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;width:100%;height:100%;overflow:hidden;background:#000;color:var(--ink);
  font:300 15px/1.5 var(--body);-webkit-font-smoothing:antialiased}

/* Diaporama plein écran en fond (inchangé) */
#diaporama{position:fixed;inset:0;z-index:0}
#diaporama .wrapper,#diaporama .diaporama{height:100%}
#diaporama .diaporama{position:relative}
#diaporama ul.medias{position:relative;z-index:1;overflow:hidden;width:100%;height:100%;list-style:none;margin:0;padding:0}
#diaporama ul.medias li{position:absolute;inset:0;z-index:0;opacity:0;transition:all .2s ease;
  background-size:cover;background-position:center;background-repeat:no-repeat}
#diaporama ul.medias li.on{opacity:1;z-index:1}

/* Carte centrale : fond blanc, comme les pages books */
.page{position:absolute;z-index:2;top:50%;left:50%;transform:translate(-50%,-50%);
  width:min(300px,calc(100vw - 96px));padding:44px 30px 40px;background:var(--paper);text-align:left}
.page h1{margin:0;font:100 26px/1.18 var(--display);letter-spacing:.03em;color:var(--gold);text-transform:uppercase}
.page h1 span{display:block}
/* filet doré à la place des croix : court, fin, sans dégradé */
.page .rail{display:block;width:24px;height:1px;margin:22px 0;background:var(--gold)}   /* filet horizontal, aligné à gauche */
@media (min-resolution:2dppx){.page .rail{height:.5px}}   /* écrans Retina : trait d'un pixel physique */
.page p{margin:0}
.page .role{margin-top:16px;font:700 10px/1.45 var(--display);letter-spacing:.18em;text-transform:uppercase}
.page .books{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.page .books a{font:300 12px/1.5 var(--display);letter-spacing:.08em;text-transform:uppercase;color:var(--gold-deep);
  text-decoration:none}
.page .books a:hover{color:var(--ink)}
.page .contact{font:300 12px/1.75 var(--body);color:var(--gold-deep)}
.page .contact a{color:inherit;text-decoration:none}
.page .contact a:hover{color:var(--ink)}
.page .contact .insta{display:inline-block;width:1.1em;height:1.1em;margin-right:.35em;vertical-align:-.2em;fill:none;stroke:currentColor;stroke-width:1.3}
.page .contact .insta circle:last-child{fill:currentColor;stroke:none}   /* picto Instagram */
.page a:focus-visible{outline:1px solid var(--gold-deep);outline-offset:4px}

/* petits écrans : « Graphic Design Studio » sur une seule ligne */
@media (max-width:420px){.page{padding:40px 22px 36px}.page .role{font-size:9px;letter-spacing:.12em}}